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

Some style chages on first/second step.

Browse Source
This commit is contained in:
John Shaver 2018-08-16 20:01:51 -07:00 committed by AJ ONeal
parent fe530836c7
commit b416813a44
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 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"/> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</g> </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> </defs>
</svg> </svg>
<div class="column-container wide"> <div class="column-container wide">
@ -98,37 +106,58 @@
<!-- Step 2 Create Account --> <!-- Step 2 Create Account -->
<form class="js-acme-form js-acme-form-account"> <form class="js-acme-form js-acme-form-account">
<h1><label>What's your email?</label></h1> <h1><label>What's your email?</label></h1>
<input class="js-acme-account-email" type="email" placeholder="john@doe.family" required> <input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required>
<br> <div class="checkbox-array">
<br> <label>
<label><input class="js-acme-account-tos" type="checkbox" required> <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> <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<br> <use xlink:href="#svg-checked"></use>
<br> </svg>
<label><input class="js-greenlock-account-tos" type="checkbox" required> <svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?</label> <use xlink:href="#svg-unchecked"></use>
<br> </svg>
<br> 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> <a href="#">advanced (use existing account)</a>
<br> <br>
<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> </form>
<!-- Step 3 Set Challanges --> <!-- Step 3 Set Challanges -->
<form class="js-acme-form js-acme-form-challenges"> <form class="js-acme-form js-acme-form-challenges">
<h1>How will you validate your domain?</h1> <h1>Let's verify your domain</h1>
<br> <div class="tabbed-selector">
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required> <label>
File Upload to HTTP Web Server</label> <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
<br> File Upload
<label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required> <div></div>
TXT Records on DNS Name Server</label> </label>
<br> <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"> <div class="js-acme-challenges">
<h2>Verify Domains &amp; Sub-Domains</h2> <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; font-family: Source Sans Pro, sans-serif;
margin: 0; margin: 0;
line-height: 1.33; line-height: 1.33;
color: #1a1a1a;
} }
.greenlock-name { .greenlock-name {
@ -84,7 +85,93 @@ body {
display: initial; 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;
}