make Prettier™
This commit is contained in:
parent
137990002a
commit
513fb992c9
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"trailingComma": "none",
|
||||
"useTabs": true
|
||||
}
|
||||
15
README.md
15
README.md
|
|
@ -1,10 +1,8 @@
|
|||
Greenlock™ in your Browser
|
||||
=========================
|
||||
# Greenlock™ in your Browser
|
||||
|
||||
Taking greenlock™ (Let's Encrypt v2 / ACME client) where it's never been before: Your browser!
|
||||
|
||||
Official Site
|
||||
=============
|
||||
# Official Site
|
||||
|
||||
This app is available at <https://greenlock.domains>.
|
||||
|
||||
|
|
@ -14,14 +12,12 @@ If it doesn't, please open an issue to let us know why.
|
|||
We'd much rather improve the app than have a hundred different versions running in the wild.
|
||||
However, in keeping to our values we've released the source for others to inspect, improve, and modify.
|
||||
|
||||
Trademark Notice
|
||||
================
|
||||
# Trademark Notice
|
||||
|
||||
Greenlock™ is our trademark. If you do host your own copy of this app,
|
||||
please do provide attribution, but please also use your branding.
|
||||
|
||||
Install
|
||||
=======
|
||||
# Install
|
||||
|
||||
```bash
|
||||
git clone ssh://gitea@git.coolaj86.com:22042/coolaj86/greenlock.html.git
|
||||
|
|
@ -30,8 +26,7 @@ pushd greenlock.html/
|
|||
popd
|
||||
```
|
||||
|
||||
Usage
|
||||
=====
|
||||
# Usage
|
||||
|
||||
Simply host from your webserver.
|
||||
|
||||
|
|
|
|||
778
app/index.html
778
app/index.html
|
|
@ -1,262 +1,403 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Greenlock™</title>
|
||||
<meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
<head>
|
||||
<title>Greenlock™</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://greenlock.domains/img/greenlock-mark-400x400.png"
|
||||
/>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
|
||||
url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
|
||||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
|
||||
url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2)
|
||||
format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
|
||||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Code Pro";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Source Code Pro"), local("SourceCodePro-Regular"),
|
||||
url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
|
||||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="styles/main.css" rel="stylesheet">
|
||||
<link rel="preload" href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous">
|
||||
<link href="styles/main.css" rel="stylesheet" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<link rel="preload" href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="./js/bluecrypt-acme.js" as="script">
|
||||
<link rel="preload" href="./js/greenlock.js" as="script">
|
||||
<link
|
||||
rel="preload"
|
||||
href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="preload" href="./js/bluecrypt-acme.js" as="script" />
|
||||
<link rel="preload" href="./js/greenlock.js" as="script" />
|
||||
</head>
|
||||
<body hidden>
|
||||
<!-- let's define our SVG that we will reuse -->
|
||||
|
||||
</head>
|
||||
<body hidden>
|
||||
<!-- let's define our SVG that we will reuse -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<g id="svg-check">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
||||
</g>
|
||||
<g id="svg-checked">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</g>
|
||||
<g id="svg-unchecked">
|
||||
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</g>
|
||||
<g id="svg-download">
|
||||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="column-container wide">
|
||||
<div class="header-row column-row">
|
||||
<div id="js-progress-bar" class="progress-bar">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="0"
|
||||
height="0"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<defs>
|
||||
<g id="svg-check">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
|
||||
</g>
|
||||
<g id="svg-checked">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||
/>
|
||||
</g>
|
||||
<g id="svg-unchecked">
|
||||
<path
|
||||
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||
/>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
</g>
|
||||
<g id="svg-download">
|
||||
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="column-container wide">
|
||||
<div class="header-row column-row">
|
||||
<div id="js-progress-bar" class="progress-bar">
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg
|
||||
display="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Details</div></div>
|
||||
</div>
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg
|
||||
display="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Verify domain</div></div>
|
||||
</div>
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg
|
||||
display="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label">
|
||||
<div>Install certificates</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- hide until the steps are all updated
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Details</div></div>
|
||||
</div>
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Verify domain</div></div>
|
||||
</div>
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Install certificates</div></div>
|
||||
</div>
|
||||
<!-- hide until the steps are all updated
|
||||
<div class="progress-bar-step">
|
||||
<div class="circle">
|
||||
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
|
||||
<use xlink:href="#svg-check"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="progress-step-label"><div>Done</div></div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="greenlock-logo-badge"><img src="./img/greenlock-mark-400x400.png"></div>
|
||||
<div class="greenlock-name">Greenlock</div>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<form class="js-acme-form js-acme-form-domains">
|
||||
<h1><label>What's your domain?</label></h1>
|
||||
<h4>Certificates are valid for 90 days. Renewal is free :)</h4>
|
||||
<input class="js-acme-domains" type="text" placeholder="example.com,*.example.com" required>
|
||||
<br>
|
||||
<button type="submit">Next</button>
|
||||
</div>
|
||||
<div class="greenlock-logo-badge">
|
||||
<img src="./img/greenlock-mark-400x400.png" />
|
||||
</div>
|
||||
<div class="greenlock-name">Greenlock</div>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<form class="js-acme-form js-acme-form-domains">
|
||||
<h1><label>What's your domain?</label></h1>
|
||||
<h4>Certificates are valid for 90 days. Renewal is free :)</h4>
|
||||
<input
|
||||
class="js-acme-domains"
|
||||
type="text"
|
||||
placeholder="example.com,*.example.com"
|
||||
required
|
||||
/>
|
||||
<br />
|
||||
<button type="submit">Next</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="v02" checked required>
|
||||
Production</label>
|
||||
<label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="staging-v02" required>
|
||||
Testing</label>
|
||||
<br>
|
||||
<input class="js-acme-directory-url" type="url" placeholder="ACME directory url">
|
||||
</form>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<label
|
||||
><input
|
||||
class="js-acme-api-type"
|
||||
name="acme-api-type"
|
||||
type="radio"
|
||||
value="v02"
|
||||
checked
|
||||
required
|
||||
/>
|
||||
Production</label
|
||||
>
|
||||
<label
|
||||
><input
|
||||
class="js-acme-api-type"
|
||||
name="acme-api-type"
|
||||
type="radio"
|
||||
value="staging-v02"
|
||||
required
|
||||
/>
|
||||
Testing</label
|
||||
>
|
||||
<br />
|
||||
<input
|
||||
class="js-acme-directory-url"
|
||||
type="url"
|
||||
placeholder="ACME directory url"
|
||||
/>
|
||||
</form>
|
||||
|
||||
<!-- Step 2 Create Account -->
|
||||
<form class="js-acme-form js-acme-form-account">
|
||||
<h1><label>What's your email?</label></h1>
|
||||
<input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required>
|
||||
<div class="checkbox-array">
|
||||
<label>
|
||||
<input class="js-acme-account-tos" type="checkbox" required>
|
||||
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to  <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt™ Terms of Service</a>?
|
||||
</label>
|
||||
<label>
|
||||
<input class="js-greenlock-account-tos" type="checkbox" required>
|
||||
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to  <a class="js-gl-tos" target="_blank" href="/legal/#terms">Greenlock™ Terms of Service</a>?
|
||||
</label>
|
||||
</div>
|
||||
<!--
|
||||
<!-- Step 2 Create Account -->
|
||||
<form class="js-acme-form js-acme-form-account">
|
||||
<h1><label>What's your email?</label></h1>
|
||||
<input
|
||||
class="js-acme-account-email acme-account-email"
|
||||
type="email"
|
||||
placeholder="john@doe.family"
|
||||
required
|
||||
/>
|
||||
<div class="checkbox-array">
|
||||
<label>
|
||||
<input class="js-acme-account-tos" type="checkbox" required />
|
||||
<svg
|
||||
class="icon-checked-box"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg
|
||||
class="icon-unchecked-box"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to <a class="js-acme-tos-url" target="acme-tos"
|
||||
>Let's Encrypt™ Terms of Service</a
|
||||
>?
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
class="js-greenlock-account-tos"
|
||||
type="checkbox"
|
||||
required
|
||||
/>
|
||||
<svg
|
||||
class="icon-checked-box"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg
|
||||
class="icon-unchecked-box"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to  <a
|
||||
class="js-gl-tos"
|
||||
target="_blank"
|
||||
href="/legal/#terms"
|
||||
>Greenlock™ Terms of Service</a
|
||||
>?
|
||||
</label>
|
||||
</div>
|
||||
<!--
|
||||
<a href="#">advanced (use existing account)</a>
|
||||
<br>
|
||||
<br>
|
||||
-->
|
||||
<button class="button-next js-account-next" type="submit">Next</button>
|
||||
<div class="email-usage">
|
||||
Why do we need your email?
|
||||
We link your SSL certificates to the email you use so that you'll
|
||||
be notified before the certificate expires and so you can manage
|
||||
your certificates in the future.
|
||||
</div>
|
||||
</form>
|
||||
<button class="button-next js-account-next" type="submit">
|
||||
Next
|
||||
</button>
|
||||
<div class="email-usage">
|
||||
Why do we need your email? We link your SSL certificates to the
|
||||
email you use so that you'll be notified before the certificate
|
||||
expires and so you can manage your certificates in the future.
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Step 3 Set Challanges -->
|
||||
<form class="js-acme-form js-acme-form-challenges">
|
||||
<!-- Step 3 Set Challanges -->
|
||||
<form class="js-acme-form js-acme-form-challenges">
|
||||
<h1>Let's verify your domain</h1>
|
||||
<div class="js-acme-challenges">
|
||||
<div class="tabbed-selector">
|
||||
<label>
|
||||
<input
|
||||
class="js-acme-challenge-type"
|
||||
name="acme-challenge-type"
|
||||
type="radio"
|
||||
value="http-01"
|
||||
checked
|
||||
required
|
||||
/>
|
||||
File Upload
|
||||
<div></div>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
class="js-acme-challenge-type"
|
||||
name="acme-challenge-type"
|
||||
type="radio"
|
||||
value="dns-01"
|
||||
required
|
||||
/>
|
||||
DNS Record
|
||||
<div></div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="js-acme-verification-http-01">
|
||||
<h3>Upload each file</h3>
|
||||
<div class="js-acme-http">
|
||||
<div class="http-verification-info file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<div>
|
||||
<div class="file-ver-info-header">FILENAME</div>
|
||||
<pre class="js-acme-ver-file-location">...loading</pre>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<div class="file-ver-info-header">CONTENTS</div>
|
||||
<pre class="js-acme-ver-content">...loading</pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg
|
||||
class="mdicon icon-download"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a
|
||||
class="js-download-verify-link"
|
||||
href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
|
||||
download="hello.txt"
|
||||
target="_blank"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<div class="file-ver-info-header">LOCATION</div>
|
||||
<pre class="js-acme-ver-uri">..loading</pre>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-acme-verification-dns-01">
|
||||
<h3>Set each DNS Record</h3>
|
||||
<div class="js-acme-dns">
|
||||
<div class="acme-ver-dns-label">TXT Host</div>
|
||||
<div class="js-acme-ver-txt-host">loading...</div>
|
||||
<div class="acme-ver-dns-label">TXT Value</div>
|
||||
<div class="js-acme-ver-txt-value">loading...</div>
|
||||
<br />
|
||||
</div>
|
||||
<p>
|
||||
<strong>Warning</strong>: You should wait at least 30 seconds
|
||||
after setting DNS records before continuing.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Google DNS Users</strong>: You may need to wait up to
|
||||
5 minutes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Let's verify your domain</h1>
|
||||
<div class="js-acme-challenges">
|
||||
<div class="tabbed-selector">
|
||||
<label>
|
||||
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
|
||||
File Upload
|
||||
<div></div>
|
||||
</label>
|
||||
<label>
|
||||
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
|
||||
DNS Record
|
||||
<div></div>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="js-acme-verification-http-01">
|
||||
<h3>Upload each file</h3>
|
||||
<div class="js-acme-http">
|
||||
<div class="http-verification-info file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<div>
|
||||
<div class="file-ver-info-header">FILENAME</div>
|
||||
<pre class="js-acme-ver-file-location">...loading</pre>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div class="file-ver-info-header">CONTENTS</div>
|
||||
<pre class="js-acme-ver-content">...loading</pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a class="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div class="file-ver-info-header">LOCATION</div>
|
||||
<pre class="js-acme-ver-uri">..loading</pre>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-acme-verification-dns-01">
|
||||
<h3>Set each DNS Record</h3>
|
||||
<div class="js-acme-dns">
|
||||
<div class="acme-ver-dns-label">TXT Host</div>
|
||||
<div class="js-acme-ver-txt-host">loading...</div>
|
||||
<div class="acme-ver-dns-label">TXT Value</div>
|
||||
<div class="js-acme-ver-txt-value">loading...</div>
|
||||
<br>
|
||||
</div>
|
||||
<p><strong>Warning</strong>:
|
||||
You should wait at least 30 seconds after setting DNS records before continuing.</p>
|
||||
<p><strong>Google DNS Users</strong>:
|
||||
You may need to wait up to 5 minutes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-acme-wildcard-challenges">
|
||||
<div class="js-acme-verification-wildcard">
|
||||
<h3>Set each DNS Record (for wildcards)</h3>
|
||||
<div class="js-acme-wildcard">
|
||||
<div class="acme-ver-dns-label">TXT Host</div>
|
||||
<div class="js-acme-ver-txt-host">loading...</div>
|
||||
<div class="acme-ver-dns-label">TXT Value</div>
|
||||
<div class="js-acme-ver-txt-value">loading...</div>
|
||||
<br />
|
||||
</div>
|
||||
<p>
|
||||
<strong>Warning</strong>: You should wait at least 30 seconds
|
||||
after setting DNS records before continuing.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Google DNS</strong>: You may need to wait up to 5
|
||||
minutes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="js-acme-wildcard-challenges">
|
||||
<div class="js-acme-verification-wildcard">
|
||||
<h3>Set each DNS Record (for wildcards)</h3>
|
||||
<div class="js-acme-wildcard">
|
||||
<div class="acme-ver-dns-label">TXT Host</div>
|
||||
<div class="js-acme-ver-txt-host">loading...</div>
|
||||
<div class="acme-ver-dns-label">TXT Value</div>
|
||||
<div class="js-acme-ver-txt-value">loading...</div>
|
||||
<br>
|
||||
</div>
|
||||
<p><strong>Warning</strong>:
|
||||
You should wait at least 30 seconds after setting DNS records before continuing.</p>
|
||||
<p><strong>Google DNS</strong>:
|
||||
You may need to wait up to 5 minutes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button-next" type="submit">Next</button>
|
||||
</form>
|
||||
|
||||
<button class="button-next" type="submit">Next</button>
|
||||
</form>
|
||||
<!-- Step 4 Process Challanges -->
|
||||
<form class="js-acme-form js-acme-form-poll">
|
||||
Verifying Domains... (give us 5 seconds or so...)
|
||||
<div class="js-challenge-responses" hidden>
|
||||
Checking
|
||||
<span class="js-challenge-response-altname"> </span>
|
||||
using <span class="js-challenge-response-type"> </span> :
|
||||
<span class="js-challenge-response-status"> </span>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 Process Challanges -->
|
||||
<form class="js-acme-form js-acme-form-poll">
|
||||
Verifying Domains... (give us 5 seconds or so...)
|
||||
<div class="js-challenge-responses" hidden>
|
||||
Checking
|
||||
<span class="js-challenge-response-altname"> </span>
|
||||
using <span class="js-challenge-response-type"> </span>
|
||||
: <span class="js-challenge-response-status"> </span>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
<table class="js-acme-table-verifying">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -278,42 +419,58 @@
|
|||
|
||||
<button type="submit">Next</button>
|
||||
-->
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<!-- Step 5 Get Certs -->
|
||||
<form class="js-acme-form js-acme-form-download">
|
||||
<div class="cert-download-container">
|
||||
<h2><label>privkey.pem</label></h2>
|
||||
<div class="acme-result-privkey file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<pre id="js-privkey">
|
||||
</pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a id="js-download-privkey-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="privkey.pem" target="_blank">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<h2><label>fullchain.pem</label></h2>
|
||||
<div class="acme-result-fullchain file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<pre id="js-fullchain">
|
||||
</pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a id="js-download-fullchain-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="fullchain.pem" target="_blank">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h3>node.js https server example</h3>
|
||||
<pre><code> 'use strict';
|
||||
<!-- Step 5 Get Certs -->
|
||||
<form class="js-acme-form js-acme-form-download">
|
||||
<div class="cert-download-container">
|
||||
<h2><label>privkey.pem</label></h2>
|
||||
<div class="acme-result-privkey file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<pre id="js-privkey"></pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg
|
||||
class="mdicon icon-download"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a
|
||||
id="js-download-privkey-link"
|
||||
href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
|
||||
download="privkey.pem"
|
||||
target="_blank"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<h2><label>fullchain.pem</label></h2>
|
||||
<div class="acme-result-fullchain file-preview">
|
||||
<div class="paper-fold"></div>
|
||||
<pre id="js-fullchain"></pre>
|
||||
</div>
|
||||
<div class="download-file">
|
||||
<svg
|
||||
class="mdicon icon-download"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 24 24"
|
||||
>
|
||||
<use xlink:href="#svg-download"></use>
|
||||
</svg>
|
||||
<a
|
||||
id="js-download-fullchain-link"
|
||||
href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
|
||||
download="fullchain.pem"
|
||||
target="_blank"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h3>node.js https server example</h3>
|
||||
<pre><code> 'use strict';
|
||||
|
||||
var https = require('https');
|
||||
var server = https.createServer({
|
||||
|
|
@ -325,9 +482,9 @@
|
|||
console.log('Listening on', this.address());
|
||||
})
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<!--
|
||||
TODO
|
||||
<label>cert.pem</label>
|
||||
<textarea class="js-cert">-</textarea>
|
||||
|
|
@ -340,39 +497,60 @@
|
|||
<a href="#">Advanced (copy and paste)</a>
|
||||
<br>
|
||||
<button type="submit">Start Over</button>
|
||||
-->
|
||||
</form>
|
||||
</div>
|
||||
--></div>
|
||||
</form>
|
||||
|
||||
<div><small><center>
|
||||
<div>
|
||||
A <a href="https://rootprojects.org/" target="_blank">Root</a> Project
|
||||
| <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git)
|
||||
| <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a>
|
||||
| <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a>
|
||||
</div>
|
||||
<!-- or
|
||||
<div>
|
||||
<small
|
||||
><center>
|
||||
<div>
|
||||
A
|
||||
<a href="https://rootprojects.org/" target="_blank">Root</a>
|
||||
Project |
|
||||
<a
|
||||
href="https://git.coolaj86.com/coolaj86/greenlock.html"
|
||||
target="_blank"
|
||||
>View Source</a
|
||||
>
|
||||
(git) |
|
||||
<a href="https://rootprojects.org/legal/#terms" target="_blank"
|
||||
>Terms of Service</a
|
||||
>
|
||||
|
|
||||
<a
|
||||
href="https://rootprojects.org/legal/#privacy"
|
||||
target="_blank"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
</div>
|
||||
<!-- or
|
||||
<pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre>
|
||||
Or view the live site code (same as live-site branch):
|
||||
<pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
|
||||
-->
|
||||
</center></small></div>
|
||||
<br>
|
||||
</center></small
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<script src="./js/bluecrypt-acme.js"></script>
|
||||
<script src="./js/greenlock.js"></script>
|
||||
|
||||
<script src="./js/bluecrypt-acme.js"></script>
|
||||
<script src="./js/greenlock.js"></script>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-118745161-2');
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
gtag("config", "UA-118745161-2");
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
1005
app/js/greenlock.js
1005
app/js/greenlock.js
File diff suppressed because it is too large
Load Diff
|
|
@ -1,263 +1,270 @@
|
|||
body {
|
||||
font-size: 18px;
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
margin: 0;
|
||||
line-height: 1.33;
|
||||
color: #1a1a1a;
|
||||
font-size: 18px;
|
||||
font-family: Source Sans Pro, sans-serif;
|
||||
margin: 0;
|
||||
line-height: 1.33;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.77777778em;
|
||||
text-align: center;
|
||||
font-size: 1.77777778em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1a1a1a;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
input[type=email], input[type=text] {
|
||||
font-size: 1em;
|
||||
padding: 0.444444444em 0.888889em;
|
||||
width: 100%;
|
||||
border: solid 1px #d9d9d9;
|
||||
border-radius: 2px;
|
||||
input[type="email"],
|
||||
input[type="text"] {
|
||||
font-size: 1em;
|
||||
padding: 0.444444444em 0.888889em;
|
||||
width: 100%;
|
||||
border: solid 1px #d9d9d9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
font-family: Source Code Pro, monospace;
|
||||
margin: 0;
|
||||
font-family: Source Code Pro, monospace;
|
||||
}
|
||||
|
||||
.column-row {
|
||||
width: 22.222222em;
|
||||
width: 22.222222em;
|
||||
}
|
||||
|
||||
.column-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 0;
|
||||
border: solid 1px #5bc17f;
|
||||
background-color: #5bc17f;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 22em;
|
||||
margin: 1.388888889em auto;
|
||||
height: 0;
|
||||
border: solid 1px #5bc17f;
|
||||
background-color: #5bc17f;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 22em;
|
||||
margin: 1.388888889em auto;
|
||||
}
|
||||
|
||||
.greenlock-logo-badge > img {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.greenlock-logo-badge {
|
||||
display: inline-block;
|
||||
border: solid 1px #d9d9d9;
|
||||
border-radius: 500px;
|
||||
width: 5.333333333em;
|
||||
height: 5.333333333em;
|
||||
margin-top: 4.277777778em;
|
||||
display: inline-block;
|
||||
border: solid 1px #d9d9d9;
|
||||
border-radius: 500px;
|
||||
width: 5.333333333em;
|
||||
height: 5.333333333em;
|
||||
margin-top: 4.277777778em;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-bar-step {
|
||||
position: relative;
|
||||
margin: -0.722222222em -0.166666667em;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
/* border-radius: 100%; */
|
||||
padding: 0 0.111111em;
|
||||
position: relative;
|
||||
margin: -0.722222222em -0.166666667em;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
/* border-radius: 100%; */
|
||||
padding: 0 0.111111em;
|
||||
}
|
||||
|
||||
.progress-bar-step > .circle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border: solid 0.111111111em #5bc17f;
|
||||
width: 0.888888889em;
|
||||
height: 0.888888889em;
|
||||
border-radius: 100%;
|
||||
background: white;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border: solid 0.111111111em #5bc17f;
|
||||
width: 0.888888889em;
|
||||
height: 0.888888889em;
|
||||
border-radius: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.progress-step-label {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
=: block font-size: ;
|
||||
top: 139%;
|
||||
font-size: 0.722222222em;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 139%;
|
||||
font-size: 0.722222222em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-step-label > div {
|
||||
position: relative;
|
||||
right: 50%;
|
||||
position: relative;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.greenlock-name {
|
||||
color: #808080;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.file-preview {
|
||||
background: #f7f7f7;
|
||||
position: relative;
|
||||
font-size: 0.833333333em;
|
||||
padding: 1.6em 2.9333em 1.6em 1.6em;
|
||||
background: #f7f7f7;
|
||||
position: relative;
|
||||
font-size: 0.833333333em;
|
||||
padding: 1.6em 2.9333em 1.6em 1.6em;
|
||||
}
|
||||
|
||||
.js-progress-step-complete > .circle, .js-progress-step-started > .circle {
|
||||
background-color: #5bc17f;
|
||||
.js-progress-step-complete > .circle,
|
||||
.js-progress-step-started > .circle {
|
||||
background-color: #5bc17f;
|
||||
}
|
||||
|
||||
.progress-bar-step.js-progress-step-complete svg {
|
||||
fill: white;
|
||||
/* stroke: none; */
|
||||
display: initial;
|
||||
fill: white;
|
||||
/* stroke: none; */
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.checkbox-array {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
.checkbox-array input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox] ~ .icon-checked-box {
|
||||
display: none;
|
||||
.checkbox-array input[type="checkbox"] ~ .icon-checked-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox] ~ .icon-unchecked-box {
|
||||
display: initial;
|
||||
.checkbox-array input[type="checkbox"] ~ .icon-unchecked-box {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
|
||||
display: initial;
|
||||
.checkbox-array input[type="checkbox"]:checked ~ .icon-checked-box {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box {
|
||||
display: none;
|
||||
.checkbox-array input[type="checkbox"]:checked ~ .icon-unchecked-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
|
||||
width: 1.333333333em;
|
||||
fill: #5bc17f;
|
||||
margin-right: 0.666666667em;
|
||||
.checkbox-array .icon-checked-box,
|
||||
.checkbox-array .icon-unchecked-box {
|
||||
width: 1.333333333em;
|
||||
fill: #5bc17f;
|
||||
margin-right: 0.666666667em;
|
||||
}
|
||||
|
||||
.checkbox-array label {
|
||||
display: flex;
|
||||
height: 1.333333333em;
|
||||
font-size: 0.833333333em;
|
||||
margin: 0.4em 0;
|
||||
display: flex;
|
||||
height: 1.333333333em;
|
||||
font-size: 0.833333333em;
|
||||
margin: 0.4em 0;
|
||||
}
|
||||
|
||||
.checkbox-array input[type=checkbox]:focus ~ .icon-checked-box, .checkbox-array input[type=checkbox]:focus ~ .icon-unchecked-box {
|
||||
background: #5bc17f52;
|
||||
.checkbox-array input[type="checkbox"]:focus ~ .icon-checked-box,
|
||||
.checkbox-array input[type="checkbox"]:focus ~ .icon-unchecked-box {
|
||||
background: #5bc17f52;
|
||||
}
|
||||
|
||||
.email-usage {
|
||||
color: #666666;
|
||||
font-size: 0.833333333em;
|
||||
margin: 2em 0;
|
||||
color: #666666;
|
||||
font-size: 0.833333333em;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.button-next {
|
||||
width: 100%;
|
||||
background-color: #5bc17f;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
padding: 0.44444em;
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
background-color: #5bc17f;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
padding: 0.44444em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.tabbed-selector label {
|
||||
width: 50%;
|
||||
padding: 0.5em 0;
|
||||
width: 50%;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.tabbed-selector {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabbed-selector input[type=radio] {
|
||||
display: none;
|
||||
.tabbed-selector input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.download-file svg {
|
||||
fill: #5bc17f;
|
||||
width: 1.333333333em;
|
||||
fill: #5bc17f;
|
||||
width: 1.333333333em;
|
||||
}
|
||||
|
||||
.download-file a {
|
||||
color: #5bc17f;
|
||||
color: #5bc17f;
|
||||
}
|
||||
|
||||
.mdicon {
|
||||
position: relative;
|
||||
top: 0.4em;
|
||||
position: relative;
|
||||
top: 0.4em;
|
||||
}
|
||||
|
||||
.http-verification-info {
|
||||
padding-right: 6.933333333em;
|
||||
padding-right: 6.933333333em;
|
||||
}
|
||||
|
||||
.paper-fold {
|
||||
position: absolute;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-left: solid #d9d9d9 1px;
|
||||
border-bottom: solid #d9d9d9 1px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(45deg, #f7f7f7 0%,#f7f7f7 50%,#ffffff 50%,#ffffff 100%);
|
||||
position: absolute;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-left: solid #d9d9d9 1px;
|
||||
border-bottom: solid #d9d9d9 1px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#f7f7f7 0%,
|
||||
#f7f7f7 50%,
|
||||
#ffffff 50%,
|
||||
#ffffff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.file-ver-info-header {
|
||||
color: #808080;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.http-verification-info hr {
|
||||
border: none;
|
||||
border-bottom: solid 1px #d9d9d9;
|
||||
border: none;
|
||||
border-bottom: solid 1px #d9d9d9;
|
||||
}
|
||||
|
||||
.acme-ver-uri {
|
||||
word-break: break-all;
|
||||
margin: auto;
|
||||
word-break: break-all;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.acme-ver-dns-label {
|
||||
margin: 1.777777778em 0 0.444444444em 0;
|
||||
border-bottom: solid 1px #d9d9d9;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.166666667em;
|
||||
margin: 1.777777778em 0 0.444444444em 0;
|
||||
border-bottom: solid 1px #d9d9d9;
|
||||
font-weight: bold;
|
||||
padding-bottom: 0.166666667em;
|
||||
}
|
||||
|
||||
.tabbed-selector input[type="radio"]:checked ~ div {
|
||||
border: solid 1px #5bc17f;
|
||||
background-color: #5bc17f;
|
||||
border: solid 1px #5bc17f;
|
||||
background-color: #5bc17f;
|
||||
}
|
||||
|
||||
.file-preview pre {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
||||
.cert-download-container {
|
||||
margin: 0 -31%;
|
||||
margin: 0 -31%;
|
||||
}
|
||||
|
||||
|
|
|
|||
250
index.html
250
index.html
|
|
@ -1,99 +1,171 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Greenlock™</title>
|
||||
<meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" />
|
||||
<link href="styles/main.css" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
<link rel="preload" href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="preload" href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="prefetch" href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous">
|
||||
<link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script">
|
||||
<link rel="prefetch" href="./app/js/greenlock.js" as="script">
|
||||
<link rel="prefetch" href="./js/app.js" as="script">
|
||||
</head>
|
||||
<body class="js-app-ready">
|
||||
<script>
|
||||
document.querySelector('body').classList.remove("js-app-ready");
|
||||
</script>
|
||||
<div class="column-container wide">
|
||||
<head>
|
||||
<title>Greenlock™</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://greenlock.domains/img/greenlock-mark-400x400.png"
|
||||
/>
|
||||
<link href="styles/main.css" rel="stylesheet" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
|
||||
url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
|
||||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: block;
|
||||
src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
|
||||
url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2)
|
||||
format("woff2");
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
|
||||
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
|
||||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
rel="preload"
|
||||
href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
rel="prefetch"
|
||||
href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
|
||||
as="font"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script" />
|
||||
<link rel="prefetch" href="./app/js/greenlock.js" as="script" />
|
||||
<link rel="prefetch" href="./js/app.js" as="script" />
|
||||
</head>
|
||||
<body class="js-app-ready">
|
||||
<script>
|
||||
document.querySelector("body").classList.remove("js-app-ready");
|
||||
</script>
|
||||
<div class="column-container wide">
|
||||
<div class="column-row">
|
||||
<img alt="Greenlock logo" src="img/greenlock-146.png" />
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<h1>Get the green lock for your website</h1>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<div class="js-javascript-warning">
|
||||
Greenlock will process the CSR in the browser and request the
|
||||
certificates directly from letsencrypt.org. Please enable Javascript
|
||||
before continuing.
|
||||
</div>
|
||||
<form id="js-acme-form" action="./app/" method="GET">
|
||||
<div class="domain-psuedo-input">
|
||||
<span class="secure-green">Secure</span> |
|
||||
<span class="secure-green">https:</span>//<input
|
||||
aria-label="domains to secure"
|
||||
id="acme-domains"
|
||||
type="text"
|
||||
name="acme-domains"
|
||||
placeholder="Your domain name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Go</button>
|
||||
<div class="domain-subtext">
|
||||
Domain, subdomain, or wildcard domain
|
||||
</div>
|
||||
|
||||
<div class="column-row">
|
||||
<img src="img/greenlock-146.png">
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<h1>Get the green lock for your website</h1>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<div class="js-javascript-warning">
|
||||
Greenlock will process the CSR in the browser and request the certificates directly from letsencrypt.org.
|
||||
Please enable Javascript before continuing.
|
||||
</div>
|
||||
<form id="js-acme-form" action="./app/" method="GET">
|
||||
<div class="domain-psuedo-input">
|
||||
<span class="secure-green">Secure</span> | <span class="secure-green">https:</span>//<input aria-label="domains to secure" id="acme-domains" type="text" name="acme-domains" placeholder="Your domain name" required>
|
||||
</div>
|
||||
<button type="submit">Go</button>
|
||||
<div class="domain-subtext">Domain, subdomain, or wildcard domain</div>
|
||||
|
||||
<div class="acme-advanced-fields">
|
||||
<label><input name="acme-api-type" type="radio" value="v02" checked required>
|
||||
Production
|
||||
</label>
|
||||
<label><input name="acme-api-type" type="radio" value="staging-v02" required>
|
||||
Testing</label>
|
||||
<input id="js-acme-api-url" type="url" placeholder="ACME directory url">
|
||||
<br>
|
||||
API Compatibility: Let's Encrypt v2 / ACME draft 15
|
||||
<div>
|
||||
<br>
|
||||
A <a href="https://rootprojects.org/" target="_blank">Root</a> Project
|
||||
| <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git)
|
||||
| <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a>
|
||||
| <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<div class="why-you-need">
|
||||
<h2>Why you need HTTPS</h2>
|
||||
SSL Certificates are required for secure login, accepting payments, and for browsers like Google Chrome to stop showing security warnings to your users.
|
||||
</div>
|
||||
</div>
|
||||
<!-- or
|
||||
<div class="acme-advanced-fields">
|
||||
<label
|
||||
><input
|
||||
name="acme-api-type"
|
||||
type="radio"
|
||||
value="v02"
|
||||
checked
|
||||
required
|
||||
/>
|
||||
Production
|
||||
</label>
|
||||
<label
|
||||
><input
|
||||
name="acme-api-type"
|
||||
type="radio"
|
||||
value="staging-v02"
|
||||
required
|
||||
/>
|
||||
Testing</label
|
||||
>
|
||||
<input
|
||||
id="js-acme-api-url"
|
||||
type="url"
|
||||
placeholder="ACME directory url"
|
||||
/>
|
||||
<br />
|
||||
API Compatibility: Let's Encrypt v2 / ACME draft 15
|
||||
<div>
|
||||
<br />
|
||||
A
|
||||
<a href="https://rootprojects.org/" target="_blank">Root</a>
|
||||
Project |
|
||||
<a
|
||||
href="https://git.coolaj86.com/coolaj86/greenlock.html"
|
||||
target="_blank"
|
||||
>View Source</a
|
||||
>
|
||||
(git) |
|
||||
<a href="https://rootprojects.org/legal/#terms" target="_blank"
|
||||
>Terms of Service</a
|
||||
>
|
||||
|
|
||||
<a href="https://rootprojects.org/legal/#privacy" target="_blank"
|
||||
>Privacy Policy</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="column-row">
|
||||
<div class="why-you-need">
|
||||
<h2>Why you need HTTPS</h2>
|
||||
SSL Certificates are required for secure login, accepting payments,
|
||||
and for browsers like Google Chrome to stop showing security warnings
|
||||
to your users.
|
||||
</div>
|
||||
</div>
|
||||
<!-- or
|
||||
< | ||||