coolaj86
/
greenlock.html
2
2
Fork 0
Code Issues 5 Pull Requests Releases Wiki Activity

Some style chages on first/second step.

This commit is contained in:
John Shaver 2018-08-16 20:01:51 -07:00
parent c3c9696799
commit 6a05569ab5
2 changed files with 139 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/index.html
View File

@ -33,6 +33,14 @@
<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>
</defs>
</svg>
<div class="column-container wide">
@ -98,37 +106,58 @@
<!-- 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" type="email" placeholder="john@doe.family" required>
<br>
<br>
<label><input class="js-acme-account-tos" type="checkbox" required>
Agree to <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?</label>
<br>
<br>
<label><input class="js-greenlock-account-tos" type="checkbox" required>
Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?</label>
<br>
<br>
<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 &nbsp<a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; 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 &nbsp<a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?
</label>
</div>
<!--
<a href="#">advanced (use existing account)</a>
<br>
<br>
-->
<button type="submit">Next</button>
<button class="button-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 you can manage your certificates in the future,
and get important email updates about them.
</div>
</form>
<!-- Step 3 Set Challanges -->
<form class="js-acme-form js-acme-form-challenges">
<h1>How will you validate your domain?</h1>
<br>
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
File Upload to HTTP Web Server</label>
<br>
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
TXT Records on DNS Name Server</label>
<br>
<h1>Let's verify your domain</h1>
<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 class="js-acme-challenges">
<h2>Verify Domains &amp; Sub-Domains</h2>

91
app/styles/main.css
View File

@ -68,6 +68,7 @@ body {
font-family: Source Sans Pro, sans-serif;
margin: 0;
line-height: 1.33;
color: #1a1a1a;
}
.greenlock-name {
@ -84,7 +85,93 @@ body {
display: initial;
}
svg {
svg {}
.js-progress-step-complete > .circle {}
h1 {
font-size: 1.77777778em;
}
.js-progress-step-complete > .circle {}
input[type=email], input[type=text] {
font-size: 1em;
padding: 0.444444444em 0.888889em;
width: 100%;
}
.checkbox-array {
display: flex;
flex-direction: column;
align-items: start;
padding: 1em 0;
}
.checkbox-array input[type=checkbox] {
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]:checked ~ .icon-checked-box {
display: initial;
}
.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 label {
display: flex;
align-items: center;
height: 1.333333333em;
font-size: 0.833333333em;
margin: 0.4em 0;
}
a {
color: #1a1a1a;
}
.email-usage {
color: #666666;
text-align: start;
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;
}
.tabbed-selector label {
width: 50%;
padding: 0.5em 0;
}
.tabbed-selector {
display: flex;
font-weight: bold;
}
.tabbed-selector input[type=radio] {
display: none;
}