Browse Source

make Prettier™

master
AJ ONeal 6 months ago
parent
commit
513fb992c9
10 changed files with 5232 additions and 4162 deletions
  1. 4
    0
      .prettierrc
  2. 5
    10
      README.md
  3. 478
    300
      app/index.html
  4. 3409
    2818
      app/js/bluecrypt-acme.js
  5. 607
    504
      app/js/greenlock.js
  6. 146
    139
      app/styles/main.css
  7. 161
    89
      index.html
  8. 39
    32
      js/app.js
  9. 315
    201
      legal.html
  10. 68
    69
      styles/main.css

+ 4
- 0
.prettierrc View File

@@ -0,0 +1,4 @@
1
+{
2
+  "trailingComma": "none",
3
+  "useTabs": true
4
+}

+ 5
- 10
README.md View File

@@ -1,10 +1,8 @@
1
-Greenlock™ in your Browser
2
-=========================
1
+# Greenlock™ in your Browser
3 2
 
4 3
 Taking greenlock™ (Let's Encrypt v2 / ACME client) where it's never been before: Your browser!
5 4
 
6
-Official Site
7
-=============
5
+# Official Site
8 6
 
9 7
 This app is available at <https://greenlock.domains>.
10 8
 
@@ -14,14 +12,12 @@ If it doesn't, please open an issue to let us know why.
14 12
 We'd much rather improve the app than have a hundred different versions running in the wild.
15 13
 However, in keeping to our values we've released the source for others to inspect, improve, and modify.
16 14
 
17
-Trademark Notice
18
-================
15
+# Trademark Notice
19 16
 
20 17
 Greenlock&trade; is our trademark. If you do host your own copy of this app,
21 18
 please do provide attribution, but please also use your branding.
22 19
 
23
-Install
24
-=======
20
+# Install
25 21
 
26 22
 ```bash
27 23
 git clone ssh://gitea@git.coolaj86.com:22042/coolaj86/greenlock.html.git
@@ -30,8 +26,7 @@ pushd greenlock.html/
30 26
 popd
31 27
 ```
32 28
 
33
-Usage
34
-=====
29
+# Usage
35 30
 
36 31
 Simply host from your webserver.
37 32
 

+ 478
- 300
app/index.html View File

@@ -1,262 +1,403 @@
1
+<!DOCTYPE html>
1 2
 <html>
2
-  <head>
3
-    <title>Greenlock&trade;</title>
4
-    <meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" />
5
-    <style>
6
-      @font-face {
7
-        font-family: 'Source Sans Pro';
8
-        font-style: normal;
9
-        font-display: block;
10
-        font-weight: 400;
11
-        src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
12
-        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;
13
-      }
14
-      @font-face {
15
-        font-family: 'Source Sans Pro';
16
-        font-style: normal;
17
-        font-weight: 700;
18
-        font-display: block;
19
-        src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
20
-        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;
21
-      }
22
-      @font-face {
23
-        font-family: 'Source Code Pro';
24
-        font-style: normal;
25
-        font-weight: 400;
26
-        src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
27
-        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;
28
-      }
29
-    </style>
3
+	<head>
4
+		<title>Greenlock&trade;</title>
5
+		<meta
6
+			property="og:image"
7
+			content="https://greenlock.domains/img/greenlock-mark-400x400.png"
8
+		/>
9
+		<style>
10
+			@font-face {
11
+				font-family: "Source Sans Pro";
12
+				font-style: normal;
13
+				font-display: block;
14
+				font-weight: 400;
15
+				src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
16
+					url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
17
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
18
+					U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
19
+					U+2212, U+2215, U+FEFF, U+FFFD;
20
+			}
21
+			@font-face {
22
+				font-family: "Source Sans Pro";
23
+				font-style: normal;
24
+				font-weight: 700;
25
+				font-display: block;
26
+				src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
27
+					url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2)
28
+						format("woff2");
29
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
30
+					U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
31
+					U+2212, U+2215, U+FEFF, U+FFFD;
32
+			}
33
+			@font-face {
34
+				font-family: "Source Code Pro";
35
+				font-style: normal;
36
+				font-weight: 400;
37
+				src: local("Source Code Pro"), local("SourceCodePro-Regular"),
38
+					url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format("woff2");
39
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
40
+					U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
41
+					U+2212, U+2215, U+FEFF, U+FFFD;
42
+			}
43
+		</style>
30 44
 
31
-    <link href="styles/main.css" rel="stylesheet">
32
-    <link rel="preload" href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous">
33
-    <link rel="preload" href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous">
45
+		<link href="styles/main.css" rel="stylesheet" />
46
+		<link
47
+			rel="preload"
48
+			href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
49
+			as="font"
50
+			crossorigin="anonymous"
51
+		/>
52
+		<link
53
+			rel="preload"
54
+			href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
55
+			as="font"
56
+			crossorigin="anonymous"
57
+		/>
34 58
 
35
-    <link rel="preload" href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous">
36
-    <link rel="preload" href="./js/bluecrypt-acme.js" as="script">
37
-    <link rel="preload" href="./js/greenlock.js" as="script">
59
+		<link
60
+			rel="preload"
61
+			href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
62
+			as="font"
63
+			crossorigin="anonymous"
64
+		/>
65
+		<link rel="preload" href="./js/bluecrypt-acme.js" as="script" />
66
+		<link rel="preload" href="./js/greenlock.js" as="script" />
67
+	</head>
68
+	<body hidden>
69
+		<!-- let's define our SVG that we will reuse -->
38 70
 
39
-  </head>
40
-  <body hidden>
41
-    <!-- let's define our SVG that we will reuse -->
42
-
43
-    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
44
-      <defs>
45
-        <g id="svg-check">
46
-          <path fill="none" d="M0 0h24v24H0z"/>
47
-          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
48
-        </g>
49
-        <g id="svg-checked">
50
-          <path d="M0 0h24v24H0z" fill="none"/>
51
-          <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"/>
52
-        </g>
53
-        <g id="svg-unchecked">
54
-          <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"/>
55
-          <path d="M0 0h24v24H0z" fill="none"/>
56
-        </g>
57
-        <g id="svg-download">
58
-          <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
59
-          <path d="M0 0h24v24H0z" fill="none"/>
60
-        </g>
61
-      </defs>
62
-    </svg>
63
-    <div class="column-container wide">
64
-      <div class="header-row column-row">
65
-        <div id="js-progress-bar" class="progress-bar">
66
-          <div class="progress-bar-step">
67
-            <div class="circle">
68
-              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
69
-                <use xlink:href="#svg-check"></use>
70
-              </svg>
71
-            </div>
72
-            <div class="progress-step-label"><div>Details</div></div>
73
-          </div>
71
+		<svg
72
+			xmlns="http://www.w3.org/2000/svg"
73
+			width="0"
74
+			height="0"
75
+			viewbox="0 0 24 24"
76
+		>
77
+			<defs>
78
+				<g id="svg-check">
79
+					<path fill="none" d="M0 0h24v24H0z" />
80
+					<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
81
+				</g>
82
+				<g id="svg-checked">
83
+					<path d="M0 0h24v24H0z" fill="none" />
84
+					<path
85
+						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"
86
+					/>
87
+				</g>
88
+				<g id="svg-unchecked">
89
+					<path
90
+						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"
91
+					/>
92
+					<path d="M0 0h24v24H0z" fill="none" />
93
+				</g>
94
+				<g id="svg-download">
95
+					<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
96
+					<path d="M0 0h24v24H0z" fill="none" />
97
+				</g>
98
+			</defs>
99
+		</svg>
100
+		<div class="column-container wide">
101
+			<div class="header-row column-row">
102
+				<div id="js-progress-bar" class="progress-bar">
103
+					<div class="progress-bar-step">
104
+						<div class="circle">
105
+							<svg
106
+								display="none"
107
+								xmlns="http://www.w3.org/2000/svg"
108
+								viewbox="0 0 24 24"
109
+							>
110
+								<use xlink:href="#svg-check"></use>
111
+							</svg>
112
+						</div>
113
+						<div class="progress-step-label"><div>Details</div></div>
114
+					</div>
115
+					<div class="progress-bar-step">
116
+						<div class="circle">
117
+							<svg
118
+								display="none"
119
+								xmlns="http://www.w3.org/2000/svg"
120
+								viewbox="0 0 24 24"
121
+							>
122
+								<use xlink:href="#svg-check"></use>
123
+							</svg>
124
+						</div>
125
+						<div class="progress-step-label"><div>Verify domain</div></div>
126
+					</div>
127
+					<div class="progress-bar-step">
128
+						<div class="circle">
129
+							<svg
130
+								display="none"
131
+								xmlns="http://www.w3.org/2000/svg"
132
+								viewbox="0 0 24 24"
133
+							>
134
+								<use xlink:href="#svg-check"></use>
135
+							</svg>
136
+						</div>
137
+						<div class="progress-step-label">
138
+							<div>Install certificates</div>
139
+						</div>
140
+					</div>
141
+					<!-- hide until the steps are all updated
74 142
           <div class="progress-bar-step">
75 143
             <div class="circle">
76
-              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
77
-                <use xlink:href="#svg-check"></use>
78
-              </svg>
79
-            </div>
80
-            <div class="progress-step-label"><div>Verify domain</div></div>
81
-          </div>
82
-          <div class="progress-bar-step">
83
-            <div class="circle">
84
-              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
85
-                <use xlink:href="#svg-check"></use>
86
-              </svg>
87
-            </div>
88
-            <div class="progress-step-label"><div>Install certificates</div></div>
89
-          </div>
90
-          <!-- hide until the steps are all updated
91
-          <div class="progress-bar-step">
92
-            <div class="circle">
93
-              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
144
+              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
94 145
                 <use xlink:href="#svg-check"></use>
95 146
               </svg>
96 147
             </div>
97 148
             <div class="progress-step-label"><div>Done</div></div>
98 149
           </div>
99 150
           -->
100
-        </div>
101
-        <div class="greenlock-logo-badge"><img src="./img/greenlock-mark-400x400.png"></div>
102
-        <div class="greenlock-name">Greenlock</div>
103
-      </div>
104
-      <div class="column-row">
105
-        <form class="js-acme-form js-acme-form-domains">
106
-          <h1><label>What's your domain?</label></h1>
107
-          <h4>Certificates are valid for 90 days. Renewal is free :)</h4>
108
-          <input class="js-acme-domains" type="text" placeholder="example.com,*.example.com" required>
109
-          <br>
110
-          <button type="submit">Next</button>
151
+				</div>
152
+				<div class="greenlock-logo-badge">
153
+					<img src="./img/greenlock-mark-400x400.png" />
154
+				</div>
155
+				<div class="greenlock-name">Greenlock</div>
156
+			</div>
157
+			<div class="column-row">
158
+				<form class="js-acme-form js-acme-form-domains">
159
+					<h1><label>What's your domain?</label></h1>
160
+					<h4>Certificates are valid for 90 days. Renewal is free :)</h4>
161
+					<input
162
+						class="js-acme-domains"
163
+						type="text"
164
+						placeholder="example.com,*.example.com"
165
+						required
166
+					/>
167
+					<br />
168
+					<button type="submit">Next</button>
111 169
 
112
-          <br>
113
-          <br>
114
-          <br>
115
-          <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="v02" checked required>
116
-            Production</label>
117
-          <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="staging-v02" required>
118
-            Testing</label>
119
-          <br>
120
-          <input class="js-acme-directory-url" type="url" placeholder="ACME directory url">
121
-        </form>
170
+					<br />
171
+					<br />
172
+					<br />
173
+					<label
174
+						><input
175
+							class="js-acme-api-type"
176
+							name="acme-api-type"
177
+							type="radio"
178
+							value="v02"
179
+							checked
180
+							required
181
+						/>
182
+						Production</label
183
+					>
184
+					<label
185
+						><input
186
+							class="js-acme-api-type"
187
+							name="acme-api-type"
188
+							type="radio"
189
+							value="staging-v02"
190
+							required
191
+						/>
192
+						Testing</label
193
+					>
194
+					<br />
195
+					<input
196
+						class="js-acme-directory-url"
197
+						type="url"
198
+						placeholder="ACME directory url"
199
+					/>
200
+				</form>
122 201
 
123
-        <!-- Step 2 Create Account -->
124
-        <form class="js-acme-form js-acme-form-account">
125
-          <h1><label>What's your email?</label></h1>
126
-          <input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required>
127
-          <div class="checkbox-array">
128
-            <label>
129
-              <input class="js-acme-account-tos" type="checkbox" required>
130
-              <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
131
-                <use xlink:href="#svg-checked"></use>
132
-              </svg>
133
-              <svg class="icon-unchecked-box"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
134
-                <use xlink:href="#svg-unchecked"></use>
135
-              </svg>
136
-              Agree to &nbsp<a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?
137
-            </label>
138
-            <label>
139
-              <input class="js-greenlock-account-tos" type="checkbox" required>
140
-              <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
141
-                <use xlink:href="#svg-checked"></use>
142
-              </svg>
143
-              <svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
144
-                <use xlink:href="#svg-unchecked"></use>
145
-              </svg>
146
-              Agree to &nbsp<a class="js-gl-tos" target="_blank" href="/legal/#terms">Greenlock&trade; Terms of Service</a>?
147
-            </label>
148
-          </div>
149
-          <!--
202
+				<!-- Step 2 Create Account -->
203
+				<form class="js-acme-form js-acme-form-account">
204
+					<h1><label>What's your email?</label></h1>
205
+					<input
206
+						class="js-acme-account-email acme-account-email"
207
+						type="email"
208
+						placeholder="john@doe.family"
209
+						required
210
+					/>
211
+					<div class="checkbox-array">
212
+						<label>
213
+							<input class="js-acme-account-tos" type="checkbox" required />
214
+							<svg
215
+								class="icon-checked-box"
216
+								xmlns="http://www.w3.org/2000/svg"
217
+								viewbox="0 0 24 24"
218
+							>
219
+								<use xlink:href="#svg-checked"></use>
220
+							</svg>
221
+							<svg
222
+								class="icon-unchecked-box"
223
+								xmlns="http://www.w3.org/2000/svg"
224
+								viewbox="0 0 24 24"
225
+							>
226
+								<use xlink:href="#svg-unchecked"></use>
227
+							</svg>
228
+							Agree to &nbsp;<a class="js-acme-tos-url" target="acme-tos"
229
+								>Let's Encrypt&trade; Terms of Service</a
230
+							>?
231
+						</label>
232
+						<label>
233
+							<input
234
+								class="js-greenlock-account-tos"
235
+								type="checkbox"
236
+								required
237
+							/>
238
+							<svg
239
+								class="icon-checked-box"
240
+								xmlns="http://www.w3.org/2000/svg"
241
+								viewbox="0 0 24 24"
242
+							>
243
+								<use xlink:href="#svg-checked"></use>
244
+							</svg>
245
+							<svg
246
+								class="icon-unchecked-box"
247
+								xmlns="http://www.w3.org/2000/svg"
248
+								viewbox="0 0 24 24"
249
+							>
250
+								<use xlink:href="#svg-unchecked"></use>
251
+							</svg>
252
+							Agree to &nbsp<a
253
+								class="js-gl-tos"
254
+								target="_blank"
255
+								href="/legal/#terms"
256
+								>Greenlock&trade; Terms of Service</a
257
+							>?
258
+						</label>
259
+					</div>
260
+					<!--
150 261
           <a href="#">advanced (use existing account)</a>
151 262
           <br>
152 263
           <br>
153 264
           -->
154
-          <button class="button-next js-account-next" type="submit">Next</button>
155
-          <div class="email-usage">
156
-            Why do we need your email?
157
-            We link your SSL certificates to the email you use so that you'll
158
-            be notified before the certificate expires and so you can manage
159
-            your certificates in the future.
160
-          </div>
161
-        </form>
265
+					<button class="button-next js-account-next" type="submit">
266
+						Next
267
+					</button>
268
+					<div class="email-usage">
269
+						Why do we need your email? We link your SSL certificates to the
270
+						email you use so that you'll be notified before the certificate
271
+						expires and so you can manage your certificates in the future.
272
+					</div>
273
+				</form>
162 274
 
163
-        <!-- Step 3 Set Challanges -->
164
-        <form class="js-acme-form js-acme-form-challenges">
275
+				<!-- Step 3 Set Challanges -->
276
+				<form class="js-acme-form js-acme-form-challenges">
277
+					<h1>Let's verify your domain</h1>
278
+					<div class="js-acme-challenges">
279
+						<div class="tabbed-selector">
280
+							<label>
281
+								<input
282
+									class="js-acme-challenge-type"
283
+									name="acme-challenge-type"
284
+									type="radio"
285
+									value="http-01"
286
+									checked
287
+									required
288
+								/>
289
+								File Upload
290
+								<div></div>
291
+							</label>
292
+							<label>
293
+								<input
294
+									class="js-acme-challenge-type"
295
+									name="acme-challenge-type"
296
+									type="radio"
297
+									value="dns-01"
298
+									required
299
+								/>
300
+								DNS Record
301
+								<div></div>
302
+							</label>
303
+						</div>
304
+						<div>
305
+							<div class="js-acme-verification-http-01">
306
+								<h3>Upload each file</h3>
307
+								<div class="js-acme-http">
308
+									<div class="http-verification-info file-preview">
309
+										<div class="paper-fold"></div>
310
+										<div>
311
+											<div class="file-ver-info-header">FILENAME</div>
312
+											<pre class="js-acme-ver-file-location">...loading</pre>
313
+										</div>
314
+										<hr />
315
+										<div>
316
+											<div class="file-ver-info-header">CONTENTS</div>
317
+											<pre class="js-acme-ver-content">...loading</pre>
318
+										</div>
319
+										<div class="download-file">
320
+											<svg
321
+												class="mdicon icon-download"
322
+												xmlns="http://www.w3.org/2000/svg"
323
+												viewbox="0 0 24 24"
324
+											>
325
+												<use xlink:href="#svg-download"></use>
326
+											</svg>
327
+											<a
328
+												class="js-download-verify-link"
329
+												href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
330
+												download="hello.txt"
331
+												target="_blank"
332
+											>
333
+												Download
334
+											</a>
335
+										</div>
336
+										<hr />
337
+										<div>
338
+											<div class="file-ver-info-header">LOCATION</div>
339
+											<pre class="js-acme-ver-uri">..loading</pre>
340
+										</div>
341
+									</div>
342
+									<br />
343
+								</div>
344
+							</div>
345
+							<div class="js-acme-verification-dns-01">
346
+								<h3>Set each DNS Record</h3>
347
+								<div class="js-acme-dns">
348
+									<div class="acme-ver-dns-label">TXT Host</div>
349
+									<div class="js-acme-ver-txt-host">loading...</div>
350
+									<div class="acme-ver-dns-label">TXT Value</div>
351
+									<div class="js-acme-ver-txt-value">loading...</div>
352
+									<br />
353
+								</div>
354
+								<p>
355
+									<strong>Warning</strong>: You should wait at least 30 seconds
356
+									after setting DNS records before continuing.
357
+								</p>
358
+								<p>
359
+									<strong>Google DNS Users</strong>: You may need to wait up to
360
+									5 minutes.
361
+								</p>
362
+							</div>
363
+						</div>
165 364
 
166
-          <h1>Let's verify your domain</h1>
167
-          <div class="js-acme-challenges">
168
-            <div class="tabbed-selector">
169
-              <label>
170
-                <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
171
-                File Upload
172
-                <div></div>
173
-              </label>
174
-              <label>
175
-                <input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
176
-                DNS Record
177
-                <div></div>
178
-              </label>
179
-            </div>
180
-            <div>
181
-              <div class="js-acme-verification-http-01">
182
-                <h3>Upload each file</h3>
183
-                <div class="js-acme-http">
184
-                  <div class="http-verification-info file-preview">
185
-                    <div class="paper-fold"></div>
186
-                    <div>
187
-                      <div class="file-ver-info-header">FILENAME</div>
188
-                      <pre class="js-acme-ver-file-location">...loading</pre>
189
-                    </div>
190
-                    <hr>
191
-                    <div>
192
-                      <div class="file-ver-info-header">CONTENTS</div>
193
-                      <pre class="js-acme-ver-content">...loading</pre>
194
-                    </div>
195
-                    <div class="download-file">
196
-                      <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
197
-                        <use xlink:href="#svg-download"></use>
198
-                      </svg>
199
-                      <a class="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
200
-                        Download
201
-                      </a>
202
-                    </div>
203
-                    <hr>
204
-                    <div>
205
-                      <div class="file-ver-info-header">LOCATION</div>
206
-                      <pre class="js-acme-ver-uri">..loading</pre>
207
-                    </div>
208
-                  </div>
209
-                  <br>
210
-                </div>
211
-              </div>
212
-              <div class="js-acme-verification-dns-01">
213
-                <h3>Set each DNS Record</h3>
214
-                <div class="js-acme-dns">
215
-                  <div class="acme-ver-dns-label">TXT Host</div>
216
-                  <div class="js-acme-ver-txt-host">loading...</div>
217
-                  <div class="acme-ver-dns-label">TXT Value</div>
218
-                  <div class="js-acme-ver-txt-value">loading...</div>
219
-                  <br>
220
-                </div>
221
-                <p><strong>Warning</strong>:
222
-                  You should wait at least 30 seconds after setting DNS records before continuing.</p>
223
-                <p><strong>Google DNS Users</strong>:
224
-                  You may need to wait up to 5 minutes.</p>
225
-              </div>
226
-            </div>
365
+						<div class="js-acme-wildcard-challenges">
366
+							<div class="js-acme-verification-wildcard">
367
+								<h3>Set each DNS Record (for wildcards)</h3>
368
+								<div class="js-acme-wildcard">
369
+									<div class="acme-ver-dns-label">TXT Host</div>
370
+									<div class="js-acme-ver-txt-host">loading...</div>
371
+									<div class="acme-ver-dns-label">TXT Value</div>
372
+									<div class="js-acme-ver-txt-value">loading...</div>
373
+									<br />
374
+								</div>
375
+								<p>
376
+									<strong>Warning</strong>: You should wait at least 30 seconds
377
+									after setting DNS records before continuing.
378
+								</p>
379
+								<p>
380
+									<strong>Google DNS</strong>: You may need to wait up to 5
381
+									minutes.
382
+								</p>
383
+							</div>
384
+						</div>
385
+					</div>
227 386
 
228
-            <div class="js-acme-wildcard-challenges">
229
-              <div class="js-acme-verification-wildcard">
230
-                <h3>Set each DNS Record (for wildcards)</h3>
231
-                <div class="js-acme-wildcard">
232
-                  <div class="acme-ver-dns-label">TXT Host</div>
233
-                  <div class="js-acme-ver-txt-host">loading...</div>
234
-                  <div class="acme-ver-dns-label">TXT Value</div>
235
-                  <div class="js-acme-ver-txt-value">loading...</div>
236
-                  <br>
237
-                </div>
238
-                <p><strong>Warning</strong>:
239
-                  You should wait at least 30 seconds after setting DNS records before continuing.</p>
240
-                <p><strong>Google DNS</strong>:
241
-                  You may need to wait up to 5 minutes.</p>
242
-              </div>
243
-            </div>
244
-          </div>
387
+					<button class="button-next" type="submit">Next</button>
388
+				</form>
245 389
 
246
-          <button class="button-next" type="submit">Next</button>
247
-        </form>
390
+				<!-- Step 4 Process Challanges -->
391
+				<form class="js-acme-form js-acme-form-poll">
392
+					Verifying Domains... (give us 5 seconds or so...)
393
+					<div class="js-challenge-responses" hidden>
394
+						Checking
395
+						<span class="js-challenge-response-altname">&nbsp;</span>
396
+						using <span class="js-challenge-response-type">&nbsp;</span> :
397
+						<span class="js-challenge-response-status">&nbsp;</span>
398
+					</div>
248 399
 
249
-        <!-- Step 4 Process Challanges -->
250
-        <form class="js-acme-form js-acme-form-poll">
251
-          Verifying Domains... (give us 5 seconds or so...)
252
-          <div class="js-challenge-responses" hidden>
253
-            Checking
254
-            <span class="js-challenge-response-altname">&nbsp;</span>
255
-            using <span class="js-challenge-response-type">&nbsp;</span>
256
-            : <span class="js-challenge-response-status">&nbsp;</span>
257
-          </div>
258
-
259
-          <!--
400
+					<!--
260 401
           <table class="js-acme-table-verifying">
261 402
             <thead>
262 403
               <tr>
@@ -278,42 +419,58 @@
278 419
 
279 420
           <button type="submit">Next</button>
280 421
           -->
281
-        </form>
422
+				</form>
282 423
 
283
-        <!-- Step 5 Get Certs -->
284
-        <form class="js-acme-form js-acme-form-download">
285
-          <div class="cert-download-container">
286
-            <h2><label>privkey.pem</label></h2>
287
-            <div class="acme-result-privkey file-preview">
288
-              <div class="paper-fold"></div>
289
-              <pre id="js-privkey">
290
-              </pre>
291
-            </div>
292
-            <div class="download-file">
293
-              <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
294
-                <use xlink:href="#svg-download"></use>
295
-              </svg>
296
-              <a id="js-download-privkey-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="privkey.pem" target="_blank">
297
-                Download
298
-              </a>
299
-            </div>
300
-            <h2><label>fullchain.pem</label></h2>
301
-            <div class="acme-result-fullchain file-preview">
302
-              <div class="paper-fold"></div>
303
-              <pre id="js-fullchain">
304
-              </pre>
305
-            </div>
306
-            <div class="download-file">
307
-              <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
308
-                <use xlink:href="#svg-download"></use>
309
-              </svg>
310
-              <a id="js-download-fullchain-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="fullchain.pem" target="_blank">
311
-                Download
312
-              </a>
313
-            </div>
314
-            <div>
315
-            <h3>node.js https server example</h3>
316
-            <pre><code>    'use strict';
424
+				<!-- Step 5 Get Certs -->
425
+				<form class="js-acme-form js-acme-form-download">
426
+					<div class="cert-download-container">
427
+						<h2><label>privkey.pem</label></h2>
428
+						<div class="acme-result-privkey file-preview">
429
+							<div class="paper-fold"></div>
430
+							<pre id="js-privkey"></pre>
431
+						</div>
432
+						<div class="download-file">
433
+							<svg
434
+								class="mdicon icon-download"
435
+								xmlns="http://www.w3.org/2000/svg"
436
+								viewbox="0 0 24 24"
437
+							>
438
+								<use xlink:href="#svg-download"></use>
439
+							</svg>
440
+							<a
441
+								id="js-download-privkey-link"
442
+								href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
443
+								download="privkey.pem"
444
+								target="_blank"
445
+							>
446
+								Download
447
+							</a>
448
+						</div>
449
+						<h2><label>fullchain.pem</label></h2>
450
+						<div class="acme-result-fullchain file-preview">
451
+							<div class="paper-fold"></div>
452
+							<pre id="js-fullchain"></pre>
453
+						</div>
454
+						<div class="download-file">
455
+							<svg
456
+								class="mdicon icon-download"
457
+								xmlns="http://www.w3.org/2000/svg"
458
+								viewbox="0 0 24 24"
459
+							>
460
+								<use xlink:href="#svg-download"></use>
461
+							</svg>
462
+							<a
463
+								id="js-download-fullchain-link"
464
+								href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
465
+								download="fullchain.pem"
466
+								target="_blank"
467
+							>
468
+								Download
469
+							</a>
470
+						</div>
471
+						<div>
472
+							<h3>node.js https server example</h3>
473
+							<pre><code>    'use strict';
317 474
 
318 475
     var https = require('https');
319 476
     var server = https.createServer({
@@ -325,9 +482,9 @@
325 482
       console.log('Listening on', this.address());
326 483
     })
327 484
             </code></pre>
328
-          </div>
485
+						</div>
329 486
 
330
-          <!--
487
+						<!--
331 488
             TODO
332 489
           <label>cert.pem</label>
333 490
           <textarea class="js-cert">-</textarea>
@@ -340,39 +497,60 @@
340 497
           <a href="#">Advanced (copy and paste)</a>
341 498
           <br>
342 499
           <button type="submit">Start Over</button>
343
-          -->
344
-        </form>
345
-      </div>
500
+          --></div>
501
+				</form>
346 502
 
347
-      <div><small><center>
348
-      <div>
349
-          A <a href="https://rootprojects.org/" target="_blank">Root</a> Project
350
-          | <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git)
351
-          | <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a>
352
-          | <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a>
353
-      </div>
354
-      <!-- or
503
+				<div>
504
+					<small
505
+						><center>
506
+							<div>
507
+								A
508
+								<a href="https://rootprojects.org/" target="_blank">Root</a>
509
+								Project |
510
+								<a
511
+									href="https://git.coolaj86.com/coolaj86/greenlock.html"
512
+									target="_blank"
513
+									>View Source</a
514
+								>
515
+								(git) |
516
+								<a href="https://rootprojects.org/legal/#terms" target="_blank"
517
+									>Terms of Service</a
518
+								>
519
+								|
520
+								<a
521
+									href="https://rootprojects.org/legal/#privacy"
522
+									target="_blank"
523
+									>Privacy Policy</a
524
+								>
525
+							</div>
526
+							<!-- or
355 527
         <pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre>
356 528
         Or view the live site code (same as live-site branch):
357 529
         <pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
358 530
       -->
359
-      </center></small></div>
360
-      <br>
361
-
531
+						</center></small
532
+					>
533
+				</div>
534
+				<br />
362 535
 
363
-        <script src="./js/bluecrypt-acme.js"></script>
364
-        <script src="./js/greenlock.js"></script>
536
+				<script src="./js/bluecrypt-acme.js"></script>
537
+				<script src="./js/greenlock.js"></script>
365 538
 
366
-        <!-- Global site tag (gtag.js) - Google Analytics -->
367
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script>
368
-        <script>
369
-          window.dataLayer = window.dataLayer || [];
370
-          function gtag(){dataLayer.push(arguments);}
371
-          gtag('js', new Date());
539
+				<!-- Global site tag (gtag.js) - Google Analytics -->
540
+				<script
541
+					async
542
+					src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"
543
+				></script>
544
+				<script>
545
+					window.dataLayer = window.dataLayer || [];
546
+					function gtag() {
547
+						dataLayer.push(arguments);
548
+					}
549
+					gtag("js", new Date());
372 550
 
373
-          gtag('config', 'UA-118745161-2');
374
-        </script>
375
-      </div>
376
-    </div>
377
-  </body>
551
+					gtag("config", "UA-118745161-2");
552
+				</script>
553
+			</div>
554
+		</div>
555
+	</body>
378 556
 </html>

+ 3409
- 2818
app/js/bluecrypt-acme.js
File diff suppressed because it is too large
View File


+ 607
- 504
app/js/greenlock.js
File diff suppressed because it is too large
View File


+ 146
- 139
app/styles/main.css View File

@@ -1,263 +1,270 @@
1 1
 body {
2
-    font-size: 18px;
3
-    font-family: Source Sans Pro, sans-serif;
4
-    margin: 0;
5
-    line-height: 1.33;
6
-    color: #1a1a1a;
2
+	font-size: 18px;
3
+	font-family: Source Sans Pro, sans-serif;
4
+	margin: 0;
5
+	line-height: 1.33;
6
+	color: #1a1a1a;
7 7
 }
8 8
 
9 9
 h1 {
10
-    text-align: center;
11
-    font-size: 1.77777778em;
10
+	text-align: center;
11
+	font-size: 1.77777778em;
12 12
 }
13 13
 
14 14
 a {
15
-    color: #1a1a1a;
15
+	color: #1a1a1a;
16 16
 }
17 17
 
18
-input[type=email], input[type=text] {
19
-    font-size: 1em;
20
-    padding: 0.444444444em 0.888889em;
21
-    width: 100%;
22
-    border: solid 1px #d9d9d9;
23
-    border-radius: 2px;
18
+input[type="email"],
19
+input[type="text"] {
20
+	font-size: 1em;
21
+	padding: 0.444444444em 0.888889em;
22
+	width: 100%;
23
+	border: solid 1px #d9d9d9;
24
+	border-radius: 2px;
24 25
 }
25 26
 
26 27
 pre {
27
-    margin: 0;
28
-    font-family: Source Code Pro, monospace;
28
+	margin: 0;
29
+	font-family: Source Code Pro, monospace;
29 30
 }
30 31
 
31 32
 .column-row {
32
-    width: 22.222222em;
33
+	width: 22.222222em;
33 34
 }
34 35
 
35 36
 .column-container {
36
-    display: flex;
37
-    flex-direction: column;
38
-    align-items: center;
37
+	display: flex;
38
+	flex-direction: column;
39
+	align-items: center;
39 40
 }
40 41
 
41 42
 .progress-bar {
42
-    height: 0;
43
-    border: solid 1px #5bc17f;
44
-    background-color: #5bc17f;
45
-    display: flex;
46
-    justify-content: space-between;
47
-    align-items: center;
48
-    width: 22em;
49
-    margin: 1.388888889em auto;
43
+	height: 0;
44
+	border: solid 1px #5bc17f;
45
+	background-color: #5bc17f;
46
+	display: flex;
47
+	justify-content: space-between;
48
+	align-items: center;
49
+	width: 22em;
50
+	margin: 1.388888889em auto;
50 51
 }
51 52
 
52 53
 .greenlock-logo-badge > img {
53
-    width: 100%;
54
+	width: 100%;
54 55
 }
55 56
 
56 57
 .greenlock-logo-badge {
57
-    display: inline-block;
58
-    border: solid 1px #d9d9d9;
59
-    border-radius: 500px;
60
-    width: 5.333333333em;
61
-    height: 5.333333333em;
62
-    margin-top: 4.277777778em;
58
+	display: inline-block;
59
+	border: solid 1px #d9d9d9;
60
+	border-radius: 500px;
61
+	width: 5.333333333em;
62
+	height: 5.333333333em;
63
+	margin-top: 4.277777778em;
63 64
 }
64 65
 
65 66
 .header-row {
66
-    text-align: center;
67
+	text-align: center;
67 68
 }
68 69
 
69 70
 .progress-bar-step {
70
-    position: relative;
71
-    margin: -0.722222222em -0.166666667em;
72
-    display: inline-block;
73
-    background-color: white;
74
-    /* border-radius: 100%; */
75
-    padding: 0 0.111111em;
71
+	position: relative;
72
+	margin: -0.722222222em -0.166666667em;
73
+	display: inline-block;
74
+	background-color: white;
75
+	/* border-radius: 100%; */
76
+	padding: 0 0.111111em;
76 77
 }
77 78
 
78 79
 .progress-bar-step > .circle {
79
-    content: "";
80
-    display: inline-block;
81
-    border: solid 0.111111111em #5bc17f;
82
-    width: 0.888888889em;
83
-    height: 0.888888889em;
84
-    border-radius: 100%;
85
-    background: white;
80
+	content: "";
81
+	display: inline-block;
82
+	border: solid 0.111111111em #5bc17f;
83
+	width: 0.888888889em;
84
+	height: 0.888888889em;
85
+	border-radius: 100%;
86
+	background: white;
86 87
 }
87 88
 
88 89
 .progress-step-label {
89
-    text-align: center;
90
-    position: absolute;
91
-    left: 50%;
92
-    =: block font-size: ;
93
-    top: 139%;
94
-    font-size: 0.722222222em;
95
-    white-space: nowrap;
90
+	text-align: center;
91
+	position: absolute;
92
+	left: 50%;
93
+	top: 139%;
94
+	font-size: 0.722222222em;
95
+	white-space: nowrap;
96 96
 }
97 97
 
98 98
 .progress-step-label > div {
99
-    position: relative;
100
-    right: 50%;
99
+	position: relative;
100
+	right: 50%;
101 101
 }
102 102
 
103 103
 .greenlock-name {
104
-    color: #808080;
104
+	color: #808080;
105 105
 }
106 106
 
107 107
 .file-preview {
108
-    background: #f7f7f7;
109
-    position: relative;
110
-    font-size: 0.833333333em;
111
-    padding: 1.6em 2.9333em 1.6em 1.6em;
108
+	background: #f7f7f7;
109
+	position: relative;
110
+	font-size: 0.833333333em;
111
+	padding: 1.6em 2.9333em 1.6em 1.6em;
112 112
 }
113 113
 
114
-.js-progress-step-complete > .circle, .js-progress-step-started > .circle {
115
-    background-color: #5bc17f;
114
+.js-progress-step-complete > .circle,
115
+.js-progress-step-started > .circle {
116
+	background-color: #5bc17f;
116 117
 }
117 118
 
118 119
 .progress-bar-step.js-progress-step-complete svg {
119
-    fill: white;
120
-    /* stroke: none; */
121
-    display: initial;
120
+	fill: white;
121
+	/* stroke: none; */
122
+	display: initial;
122 123
 }
123 124
 
124 125
 .checkbox-array {
125
-    display: flex;
126
-    flex-direction: column;
127
-    padding: 1em 0;
126
+	display: flex;
127
+	flex-direction: column;
128
+	padding: 1em 0;
128 129
 }
129 130
 
130
-.checkbox-array input[type=checkbox] {
131
-    opacity: 0;
132
-    position: absolute;
131
+.checkbox-array input[type="checkbox"] {
132
+	opacity: 0;
133
+	position: absolute;
133 134
 }
134 135
 
135
-.checkbox-array input[type=checkbox] ~ .icon-checked-box {
136
-    display: none;
136
+.checkbox-array input[type="checkbox"] ~ .icon-checked-box {
137
+	display: none;
137 138
 }
138 139
 
139
-.checkbox-array input[type=checkbox] ~ .icon-unchecked-box {
140
-    display: initial;
140
+.checkbox-array input[type="checkbox"] ~ .icon-unchecked-box {
141
+	display: initial;
141 142
 }
142 143
 
143
-.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
144
-    display: initial;
144
+.checkbox-array input[type="checkbox"]:checked ~ .icon-checked-box {
145
+	display: initial;
145 146
 }
146 147
 
147
-.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box {
148
-    display: none;
148
+.checkbox-array input[type="checkbox"]:checked ~ .icon-unchecked-box {
149
+	display: none;
149 150
 }
150 151
 
151
-.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
152
-    width: 1.333333333em;
153
-    fill: #5bc17f;
154
-    margin-right: 0.666666667em;
152
+.checkbox-array .icon-checked-box,
153
+.checkbox-array .icon-unchecked-box {
154
+	width: 1.333333333em;
155
+	fill: #5bc17f;
156
+	margin-right: 0.666666667em;
155 157
 }
156 158
 
157 159
 .checkbox-array label {
158
-    display: flex;
159
-    height: 1.333333333em;
160
-    font-size: 0.833333333em;
161
-    margin: 0.4em 0;
160
+	display: flex;
161
+	height: 1.333333333em;
162
+	font-size: 0.833333333em;
163
+	margin: 0.4em 0;
162 164
 }
163 165
 
164
-.checkbox-array input[type=checkbox]:focus ~ .icon-checked-box, .checkbox-array input[type=checkbox]:focus ~ .icon-unchecked-box {
165
-    background: #5bc17f52;
166
+.checkbox-array input[type="checkbox"]:focus ~ .icon-checked-box,
167
+.checkbox-array input[type="checkbox"]:focus ~ .icon-unchecked-box {
168
+	background: #5bc17f52;
166 169
 }
167 170
 
168 171
 .email-usage {
169
-    color: #666666;
170
-    font-size: 0.833333333em;
171
-    margin: 2em 0;
172
+	color: #666666;
173
+	font-size: 0.833333333em;
174
+	margin: 2em 0;
172 175
 }
173 176
 
174 177
 .button-next {
175
-    width: 100%;
176
-    background-color: #5bc17f;
177
-    border: none;
178
-    font-size: 1em;
179
-    color: white;
180
-    padding: 0.44444em;
181
-    margin: 1em 0;
178
+	width: 100%;
179
+	background-color: #5bc17f;
180
+	border: none;
181
+	font-size: 1em;
182
+	color: white;
183
+	padding: 0.44444em;
184
+	margin: 1em 0;
182 185
 }
183 186
 
184 187
 .tabbed-selector label {
185
-    width: 50%;
186
-    padding: 0.5em 0;
188
+	width: 50%;
189
+	padding: 0.5em 0;
187 190
 }
188 191
 
189 192
 .tabbed-selector {
190
-    display: flex;
191
-    font-weight: bold;
192
-    text-align: center;
193
+	display: flex;
194
+	font-weight: bold;
195
+	text-align: center;
193 196
 }
194 197
 
195
-.tabbed-selector input[type=radio] {
196
-    display: none;
198
+.tabbed-selector input[type="radio"] {
199
+	display: none;
197 200
 }
198 201
 
199 202
 .download-file svg {
200
-    fill: #5bc17f;
201
-    width: 1.333333333em;
203
+	fill: #5bc17f;
204
+	width: 1.333333333em;
202 205
 }
203 206
 
204 207
 .download-file a {
205
-    color: #5bc17f;
208
+	color: #5bc17f;
206 209
 }
207 210
 
208 211
 .mdicon {
209
-    position: relative;
210
-    top: 0.4em;
212
+	position: relative;
213
+	top: 0.4em;
211 214
 }
212 215
 
213 216
 .http-verification-info {
214
-    padding-right: 6.933333333em;
217
+	padding-right: 6.933333333em;
215 218
 }
216 219
 
217 220
 .paper-fold {
218
-    position: absolute;
219
-    width: 2em;
220
-    height: 2em;
221
-    border-left: solid #d9d9d9 1px;
222
-    border-bottom: solid #d9d9d9 1px;
223
-    right: 0;
224
-    top: 0;
225
-    background: linear-gradient(45deg, #f7f7f7 0%,#f7f7f7 50%,#ffffff 50%,#ffffff 100%);
221
+	position: absolute;
222
+	width: 2em;
223
+	height: 2em;
224
+	border-left: solid #d9d9d9 1px;
225
+	border-bottom: solid #d9d9d9 1px;
226
+	right: 0;
227
+	top: 0;
228
+	background: linear-gradient(
229
+		45deg,
230
+		#f7f7f7 0%,
231
+		#f7f7f7 50%,
232
+		#ffffff 50%,
233
+		#ffffff 100%
234
+	);
226 235
 }
227 236
 
228 237
 .file-ver-info-header {
229
-    color: #808080;
238
+	color: #808080;
230 239
 }
231 240
 
232 241
 .http-verification-info hr {
233
-    border: none;
234
-    border-bottom: solid 1px #d9d9d9;
242
+	border: none;
243
+	border-bottom: solid 1px #d9d9d9;
235 244
 }
236 245
 
237 246
 .acme-ver-uri {
238
-    word-break: break-all;
239
-    margin: auto;
247
+	word-break: break-all;
248
+	margin: auto;
240 249
 }
241 250
 
242 251
 .acme-ver-dns-label {
243
-    margin: 1.777777778em 0 0.444444444em 0;
244
-    border-bottom: solid 1px #d9d9d9;
245
-    font-weight: bold;
246
-    padding-bottom: 0.166666667em;
252
+	margin: 1.777777778em 0 0.444444444em 0;
253
+	border-bottom: solid 1px #d9d9d9;
254
+	font-weight: bold;
255
+	padding-bottom: 0.166666667em;
247 256
 }
248 257
 
249 258
 .tabbed-selector input[type="radio"]:checked ~ div {
250
-    border: solid 1px #5bc17f;
251
-    background-color: #5bc17f;
259
+	border: solid 1px #5bc17f;
260
+	background-color: #5bc17f;
252 261
 }
253 262
 
254 263
 .file-preview pre {
255
-    white-space: pre-line;
256
-    word-break: break-all;
264
+	white-space: pre-line;
265
+	word-break: break-all;
257 266
 }
258 267
 
259
-
260 268
 .cert-download-container {
261
-    margin: 0 -31%;
269
+	margin: 0 -31%;
262 270
 }
263
-

+ 161
- 89
index.html View File

@@ -1,99 +1,171 @@
1 1
 <html>
2
-  <head>
3
-    <title>Greenlock&trade;</title>
4
-    <meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" />
5
-    <link href="styles/main.css" rel="stylesheet">
6
-    <style>
7
-      @font-face {
8
-        font-family: 'Source Sans Pro';
9
-        font-style: normal;
10
-        font-display: block;
11
-        font-weight: 400;
12
-        src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
13
-        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;
14
-      }
15
-      @font-face {
16
-        font-family: 'Source Sans Pro';
17
-        font-style: normal;
18
-        font-weight: 700;
19
-        font-display: block;
20
-        src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
21
-        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;
22
-      }
23
-    </style>
24
-    <link rel="preload" href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous">
25
-    <link rel="preload" href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous">
26
-    <link rel="prefetch" href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous">
27
-    <link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script">
28
-    <link rel="prefetch" href="./app/js/greenlock.js" as="script">
29
-    <link rel="prefetch" href="./js/app.js" as="script">
30
-  </head>
31
-  <body class="js-app-ready">
32
-    <script>
33
-      document.querySelector('body').classList.remove("js-app-ready");
34
-    </script>
35
-    <div class="column-container wide">
2
+	<head>
3
+		<title>Greenlock&trade;</title>
4
+		<meta
5
+			property="og:image"
6
+			content="https://greenlock.domains/img/greenlock-mark-400x400.png"
7
+		/>
8
+		<link href="styles/main.css" rel="stylesheet" />
9
+		<style>
10
+			@font-face {
11
+				font-family: "Source Sans Pro";
12
+				font-style: normal;
13
+				font-display: block;
14
+				font-weight: 400;
15
+				src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
16
+					url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
17
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
18
+					U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
19
+					U+2212, U+2215, U+FEFF, U+FFFD;
20
+			}
21
+			@font-face {
22
+				font-family: "Source Sans Pro";
23
+				font-style: normal;
24
+				font-weight: 700;
25
+				font-display: block;
26
+				src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
27
+					url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2)
28
+						format("woff2");
29
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
30
+					U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
31
+					U+2212, U+2215, U+FEFF, U+FFFD;
32
+			}
33
+		</style>
34
+		<link
35
+			rel="preload"
36
+			href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
37
+			as="font"
38
+			crossorigin="anonymous"
39
+		/>
40
+		<link
41
+			rel="preload"
42
+			href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
43
+			as="font"
44
+			crossorigin="anonymous"
45
+		/>
46
+		<link
47
+			rel="prefetch"
48
+			href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
49
+			as="font"
50
+			crossorigin="anonymous"
51
+		/>
52
+		<link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script" />
53
+		<link rel="prefetch" href="./app/js/greenlock.js" as="script" />
54
+		<link rel="prefetch" href="./js/app.js" as="script" />
55
+	</head>
56
+	<body class="js-app-ready">
57
+		<script>
58
+			document.querySelector("body").classList.remove("js-app-ready");
59
+		</script>
60
+		<div class="column-container wide">
61
+			<div class="column-row">
62
+				<img alt="Greenlock logo" src="img/greenlock-146.png" />
63
+			</div>
64
+			<div class="column-row">
65
+				<h1>Get the green lock for your website</h1>
66
+			</div>
67
+			<div class="column-row">
68
+				<div class="js-javascript-warning">
69
+					Greenlock will process the CSR in the browser and request the
70
+					certificates directly from letsencrypt.org. Please enable Javascript
71
+					before continuing.
72
+				</div>
73
+				<form id="js-acme-form" action="./app/" method="GET">
74
+					<div class="domain-psuedo-input">
75
+						<span class="secure-green">Secure</span> |
76
+						<span class="secure-green">https:</span>//<input
77
+							aria-label="domains to secure"
78
+							id="acme-domains"
79
+							type="text"
80
+							name="acme-domains"
81
+							placeholder="Your domain name"
82
+							required
83
+						/>
84
+					</div>
85
+					<button type="submit">Go</button>
86
+					<div class="domain-subtext">
87
+						Domain, subdomain, or wildcard domain
88
+					</div>
36 89
 
37
-      <div class="column-row">
38
-        <img src="img/greenlock-146.png">
39
-      </div>
40
-      <div class="column-row">
41
-        <h1>Get the green lock for your website</h1>
42
-      </div>
43
-      <div class="column-row">
44
-        <div class="js-javascript-warning">
45
-          Greenlock will process the CSR in the browser and request the certificates directly from letsencrypt.org.
46
-          Please enable Javascript before continuing.
47
-        </div>
48
-        <form id="js-acme-form" action="./app/" method="GET">
49
-          <div class="domain-psuedo-input">
50
-            <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>
51
-          </div>
52
-          <button type="submit">Go</button>
53
-          <div class="domain-subtext">Domain, subdomain, or wildcard domain</div>
54
-
55
-          <div class="acme-advanced-fields">
56
-            <label><input name="acme-api-type" type="radio" value="v02" checked required>
57
-              Production
58
-            </label>
59
-            <label><input name="acme-api-type" type="radio" value="staging-v02" required>
60
-              Testing</label>
61
-            <input id="js-acme-api-url" type="url" placeholder="ACME directory url">
62
-            <br>
63
-            API Compatibility: Let's Encrypt v2 / ACME draft 15
64
-            <div>
65
-              <br>
66
-              A <a href="https://rootprojects.org/" target="_blank">Root</a> Project
67
-              | <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git)
68
-              | <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a>
69
-              | <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a>
70
-            </div>
71
-          </div>
72
-        </form>
73
-      </div>
74
-      <div class="column-row">
75
-        <div class="why-you-need">
76
-          <h2>Why you need HTTPS</h2>
77
-          SSL Certificates are required for secure login, accepting payments, and for browsers like Google Chrome to stop showing security warnings to your users.
78
-        </div>
79
-      </div>
80
-      <!-- or
90
+					<div class="acme-advanced-fields">
91
+						<label
92
+							><input
93
+								name="acme-api-type"
94
+								type="radio"
95
+								value="v02"
96
+								checked
97
+								required
98
+							/>
99
+							Production
100
+						</label>
101
+						<label
102
+							><input
103
+								name="acme-api-type"
104
+								type="radio"
105
+								value="staging-v02"
106
+								required
107
+							/>
108
+							Testing</label
109
+						>
110
+						<input
111
+							id="js-acme-api-url"
112
+							type="url"
113
+							placeholder="ACME directory url"
114
+						/>
115
+						<br />
116
+						API Compatibility: Let's Encrypt v2 / ACME draft 15
117
+						<div>
118
+							<br />
119
+							A
120
+							<a href="https://rootprojects.org/" target="_blank">Root</a>
121
+							Project |
122
+							<a
123
+								href="https://git.coolaj86.com/coolaj86/greenlock.html"
124
+								target="_blank"
125
+								>View Source</a
126
+							>
127
+							(git) |
128
+							<a href="https://rootprojects.org/legal/#terms" target="_blank"
129
+								>Terms of Service</a
130
+							>
131
+							|
132
+							<a href="https://rootprojects.org/legal/#privacy" target="_blank"
133
+								>Privacy Policy</a
134
+							>
135
+						</div>
136
+					</div>
137
+				</form>
138
+			</div>
139
+			<div class="column-row">
140
+				<div class="why-you-need">
141
+					<h2>Why you need HTTPS</h2>
142
+					SSL Certificates are required for secure login, accepting payments,
143
+					and for browsers like Google Chrome to stop showing security warnings
144
+					to your users.
145
+				</div>
146
+			</div>
147
+			<!-- or
81 148
       <pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre>
82 149
       Or view the live site code (same as live-site branch):
83 150
       <pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
84 151
       -->
85 152
 
86
-      <script src="./js/app.js"></script>
153
+			<script src="./js/app.js"></script>
87 154
 
88
-      <!-- Global site tag (gtag.js) - Google Analytics -->
89
-      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script>
90
-      <script>
91
-        window.dataLayer = window.dataLayer || [];
92
-        function gtag(){dataLayer.push(arguments);}
93
-        gtag('js', new Date());
155
+			<!-- Global site tag (gtag.js) - Google Analytics -->
156
+			<script
157
+				async
158
+				src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"
159
+			></script>
160
+			<script>
161
+				window.dataLayer = window.dataLayer || [];
162
+				function gtag() {
163
+					dataLayer.push(arguments);
164
+				}
165
+				gtag("js", new Date());
94 166
 
95
-        gtag('config', 'UA-118745161-2');
96
-      </script>
97
-    </div>
98
-  </body>
167
+				gtag("config", "UA-118745161-2");
168
+			</script>
169
+		</div>
170
+	</body>
99 171
 </html>

+ 39
- 32
js/app.js View File

@@ -1,32 +1,39 @@
1
-(function () {
2
-'use strict';
3
-
4
-  var $qs = function (s) { return window.document.querySelector(s); };
5
-
6
-  $qs('.js-javascript-warning').hidden = true;
7
-
8
-  var apiUrl = 'https://acme-{{env}}.api.letsencrypt.org/directory';
9
-
10
-  function updateApiType() {
11
-    var formData = new FormData($qs("#js-acme-form"));
12
-
13
-    console.log('ACME api type radio:');
14
-
15
-    var value = formData.get("acme-api-type");
16
-    $qs('#js-acme-api-url').value = apiUrl.replace(/{{env}}/g, value);
17
-  }
18
-
19
-  $qs('#js-acme-form').addEventListener('change', updateApiType);
20
-  //$qs('#js-acme-form').addEventListener('submit', prettyRedirect);
21
-
22
-  updateApiType();
23
-  try {
24
-    document.fonts.load().then(function() {
25
-      $qs('body').classList.add("js-app-ready");
26
-    }).catch(function(e) {
27
-      $qs('body').classList.add("js-app-ready");
28
-    });
29
-  } catch(e) {
30
-    setTimeout(function() {$qs('body').classList.add("js-app-ready");}, 200);
31
-  }
32
-}());
1
+(function() {
2
+	"use strict";
3
+
4
+	var $qs = function(s) {
5
+		return window.document.querySelector(s);
6
+	};
7
+
8
+	$qs(".js-javascript-warning").hidden = true;
9
+
10
+	var apiUrl = "https://acme-{{env}}.api.letsencrypt.org/directory";
11
+
12
+	function updateApiType() {
13
+		var formData = new FormData($qs("#js-acme-form"));
14
+
15
+		console.log("ACME api type radio:");
16
+
17
+		var value = formData.get("acme-api-type");
18
+		$qs("#js-acme-api-url").value = apiUrl.replace(/{{env}}/g, value);
19
+	}
20
+
21
+	$qs("#js-acme-form").addEventListener("change", updateApiType);
22
+	//$qs('#js-acme-form').addEventListener('submit', prettyRedirect);
23
+
24
+	updateApiType();
25
+	try {
26
+		document.fonts
27
+			.load()
28
+			.then(function() {
29
+				$qs("body").classList.add("js-app-ready");
30
+			})
31
+			.catch(function(e) {
32
+				$qs("body").classList.add("js-app-ready");
33
+			});
34
+	} catch (e) {
35
+		setTimeout(function() {
36
+			$qs("body").classList.add("js-app-ready");
37
+		}, 200);
38
+	}
39
+})();

+ 315
- 201
legal.html View File

@@ -1,201 +1,315 @@
1
-<h1>Greetings!</h1>
2
-
3
-<p>I, AJ ONeal, am not a big fan of legalize, but I am a fan of communicating
4
-clearly. I hope that this accomplish both defining some legal boundaries as well
5
-as communicating in a friendly and clear way, at least to the degree that suits
6
-our needs for the current stage of our products and services.
7
-
8
-<p>This is important because it is our intent to create sustainable open source
9
-projects, which means that we do want to create brand value, grow community,
10
-and, eventually, be able to work full time on creating more great software and services.
11
-
12
-<p>If you'd like to contact me, especially if you feel that I (or we) have made
13
-a mistake in how we operate, please do so:
14
-
15
-<ul>
16
-  <li><a href="mailto:coolaj86@gmail.com">coolaj86@gmail.com</a></li>
17
-  <li><a href="tel:+13852360466">+1 (385) 236-0466</a></li>
18
-  <li><a href="http://coolaj86.com">https://coolaj86.com</a></li>
19
-</ul>
20
-
21
-<h1>Contents</h1>
22
-<p>Here's what I've worked through so far:
23
-
24
-<ul>
25
-  <li><a href="#greenlock">Greelock Domains</a></li>
26
-  <li><a href="#licensing">Licensing</a></li>
27
-  <li><a href="#terms">Terms of Service</a></li>
28
-  <li><a href="#trademark">Trademark</a></li>
29
-  <li><a href="#privacy">Privacy</a></li>
30
-</ul>
31
-
32
-<h1 id="greenlock">Greenlock Domains&trade;</h1>
33
-
34
-<p>Greenlock Domains is a service provided by
35
-<em><a href="https://coolaj86.com">AJ</a>, Brian,
36
-  <a href="https://jshaver.net">John</a>, &amp; Josh</em>
37
-(collectively <a href="https://therootcompany.com">Root</a>)
38
-for automated TLS, SSL, and HTTPS.
39
-
40
-<ul>
41
-  <li><a href="https://greenlock.domains" target="_blank">
42
-    https://greenlock.domains</a></li>
43
-
44
-  <li><a href="https://git.coolaj86.com/coolaj86/greenlock-express.js" target="_blank">
45
-    https://git.coolaj86.com/coolaj86/greenlock-express.js</a></li>
46
-
47
-  <li><a href="https://git.coolaj86.com/coolaj86/greenlock.js" target="_blank">
48
-    https://git.coolaj86.com/coolaj86/greenlock.js</a></li>
49
-
50
-  <li><a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">
51
-    https://git.coolaj86.com/coolaj86/greenlock.html</a></li>
52
-</ul>
53
-
54
-<p>Greenlock Domains is an important product / service combo to us
55
-because it's a huge milestone on the path to a more decentralized web.
56
-We believe in <em>ownership</em> and <em>control</em> and we're
57
-building a <a href="https://therootcompany.com">Home Server</a>
58
-because we envision a world in which everyone is empowered to make
59
-the choice of whether to rent or own their stuff.
60
-
61
-<p>If we don't do this, well, with the way the cloud is headed,
62
-renting may be the only option in the future.
63
-
64
-<p>We need <em>Root</em> because we want ownership.
65
-
66
-<p>If at any time you feel that any of our messaging or practices
67
-are in conflict with our mission or these values, please let us know.
68
-
69
-<h1 id="licensing">Licensing</h1>
70
-
71
-<p>Each of our products comes with its own LICENSE file and the license(s)
72
-may alse be in some sort of manifest file (such as package.json).
73
-
74
-<p>We typically use the MIT and Apache-2.0 licenses for libraries that we
75
-actively want others to copy, modify, use and redistribute.
76
-
77
-<p>We typically use ISC and MPL-2.0 with products for which we're a little more
78
-concerned about branding or about which we have particularly strong opinions.
79
-
80
-<p>Although we do keep some of our software proprietary and we do use trademarks,
81
-because we believe in empowerment and choice we do our best to provide usable
82
-self-service forms of our products and services for personal use.
83
-
84
-<p>If at any time you feel that our Licensing is in conflict with our mission or values,
85
-please let us know.
86
-
87
-<h1 id="terms">Terms of Service</h1>
88
-
89
-<p>We want to make the world a better place.
90
-Everyone has a different definition of what "a better place" means,
91
-so the purpose of our terms is to rule out some things that
92
-we think makes the world (and particularly our world) a worse place:
93
-
94
-<p>You agree that you will use the Greenlock&trade; service, code, libraries,
95
-documentation, etc (provided by <a href="#greenlock">us</a>)
96
-primarily for securing network connections for yourself, your customers,
97
-on your and your customer's devices on internets, intranets, and... other nets.
98
-
99
-<p>You agree that you will take reasonable measures to keep up-to-date with security
100
-releases.
101
-
102
-<p>You agree to not use our products or services in a way that would cause unusual
103
-or undue burden on our servers or services, our partners servers or services, or our
104
-customers servers or services, or in a way that harms or misrepresents the reputation
105
-or brand value (including causing brand confusion) of the aforementioned parties
106
-(or really anybody).
107
-
108
-<p>This is not to say that you can't publicly have a negative opinion, but don't
109
-bite the hand that feeds and don't be vicious or misrepresentative.
110
-
111
-<p>If you have a use case that may be in violation of these terms (particularly
112
-the part about undue burden), but you feel contributes to making the world a better
113
-place, we're here to help (assuming it also aligns with our values).
114
-Although it may not be appropriate to use our services, but perhaps we can help
115
-you with a solution based on our no-cost, low-cost or open source products.
116
-
117
-<p>If at any time you feel that our Terms of Service are in conflict with our
118
-mission or values, please let us know.
119
-
120
-<h1 id="trademark">Trademark</h1>
121
-
122
-<p>"Greenlock" and the "green G lock" mark are Trademarks of
123
-<a href="https://coolaj86.com" target="_blank">AJ ONeal</a>.
124
-
125
-<p>We'll be coming out with a brand guide as to how you should use
126
-the marks. In the meantime: don't change the proportions, colors
127
-(excepting the case of greyscale and black and white).
128
-
129
-<p>It is appropriate to use the trademark in a way that promotes the
130
-brand with proper attribution, linking to the official project repositories, etc.
131
-
132
-<p>It is appropriate use the name greenlock in a plugin for Greenlock&trade;,
133
-as long as it is clear that it is a community contribution.
134
-
135
-<p>If you create a "hard" fork of our code or any products or services,
136
-you should give your fork its own name, and not use ours.
137
-That sound, we gladly welcome your suggestiosn and pull requests.
138
-
139
-<p>If you mirror our code you should make it clear that it is a mirror
140
-and link to the official repository.
141
-in association with usand the disclose that you use Greenlock
142
-
143
-<p>If at any time you feel that our Trademark policies are in conflict with our
144
-values, please let us know.
145
-
146
-<h1 id="privacy">Privacy Policy</h1>
147
-
148
-<p>What we collect and (more importantly) <em>Why</em>:
149
-
150
-<p><strong>Name</strong>:
151
-<p>In the cases that we collect your name, it's because we want to know how to address you.
152
-All four of us want to be personable if and when we reach out.
153
-
154
-<p><strong>Email</strong>:
155
-<p>There are three main purposes for which we may use your email address:
156
-
157
-<p>1. A one-time outreach to ask if you were able to do what you intended to do.
158
-We want to make a great product. Although open source projects traditionally have
159
-a <em>reactive</em> approach to communication (i.e. you file a bug and wait for a response),
160
-we believe that creating sustainable open source requires a <em>proactive</em> approach.
161
-
162
-<p>2. Security and legal notifications. It's important that we have a way to contact you
163
-if we've made a mistake or discover a mistake that needs to be addressed. This
164
-may include vulnerabilities as well as mandatory upgrades (such as when a
165
-significant change to the Let's Encrypt API is made). Making sure that our products
166
-work and are secure aligns with our values and contributes to our brand identity.
167
-
168
-<p>3. Opt-in updates. Many of you want to know when we have significant feature updates
169
-or when we have something that we believe is really valuable to share. We've created an
170
-opt-in avenue for that. And you can always opt-out as well.
171
-
172
-<p><strong>Telemetry</strong>:
173
-<p>We believe that the current open source model needs improvement - it often
174
-relies heavily on large centralized platforms which aggregate a lot of user
175
-information for the platform without appropriately targeting the relationship
176
-between authors and users of projcts (i.e. npm, github, etc). We believe that
177
-making open source sustainable means a greater focus on empowering authors
178
-and users. We've learned from other projects (Caddy, Heroku, and others) which
179
-use telemetry as part of a proactive approach to open source and we believe that
180
-it can be a great avenue for us to be proactive as well.
181
-
182
-<p>We may use telemetry about operating system, browser, node version, code version,
183
-and other system-level information to better understand how we can serve our users (you)
184
-and proactively solve problems that we might not otherwise hear about. For example, if
185
-we see many page visits in a certain browser (or installs with a new version of node),
186
-but few successful registrations, we know that something is wrong.
187
-
188
-<p><strong>Other</strong>:
189
-<p>We also use Google Analytics on our web sites for basic functionality.
190
-Other than that, nothing else comes to mind right now.
191
-As we consider what we will do in the future, it will be measured against our mission and values.
192
-We never want to come across as spammy or forceful. We want to do things that help us build
193
-our brand, acknowledge our customers; things that are proactive, and that
194
-promote sustainable source.
195
-
196
-<p>If at any time you feel that our Privacy policy is in conflict with our mission or values,
197
-please let us know.
198
-
199
-<br>
200
-<br>
201
-<p>Copyright 2018 AJ ONeal
1
+<!DOCTYPE html>
2
+<html>
3
+	<head>
4
+		<title>Root Legal</title>
5
+	</head>
6
+	<body>
7
+		<h1>Greetings!</h1>
8
+
9
+		<p>
10
+			I, AJ ONeal, am not a big fan of legalize, but I am a fan of communicating
11
+			clearly. I hope that this accomplish both defining some legal boundaries
12
+			as well as communicating in a friendly and clear way, at least to the
13
+			degree that suits our needs for the current stage of our products and
14
+			services.
15
+		</p>
16
+
17
+		<p>
18
+			This is important because it is our intent to create sustainable open
19
+			source projects, which means that we do want to create brand value, grow
20
+			community, and, eventually, be able to work full time on creating more
21
+			great software and services.
22
+		</p>
23
+
24
+		<p>
25
+			If you'd like to contact me, especially if you feel that I (or we) have
26
+			made a mistake in how we operate, please do so:
27
+		</p>
28
+
29
+		<ul>
30
+			<li><a href="mailto:coolaj86@gmail.com">coolaj86@gmail.com</a></li>
31
+			<li><a href="tel:+13852360466">+1 (385) 236-0466</a></li>
32
+			<li><a href="http://coolaj86.com">https://coolaj86.com</a></li>
33
+		</ul>
34
+
35
+		<h1>Contents</h1>
36
+		<p>Here's what I've worked through so far:</p>
37
+
38
+		<ul>
39
+			<li><a href="#greenlock">Greelock Domains</a></li>
40
+			<li><a href="#licensing">Licensing</a></li>
41
+			<li><a href="#terms">Terms of Service</a></li>
42
+			<li><a href="#trademark">Trademark</a></li>
43
+			<li><a href="#privacy">Privacy</a></li>
44
+		</ul>
45
+
46
+		<h1 id="greenlock">Greenlock Domains&trade;</h1>
47
+
48
+		<p>
49
+			Greenlock Domains is a service provided by
50
+			<em
51
+				><a href="https://coolaj86.com">AJ</a>, Brian,
52
+				<a href="https://jshaver.net">John</a>, &amp; Josh</em
53
+			>
54
+			(collectively <a href="https://therootcompany.com">Root</a>) for automated
55
+			TLS, SSL, and HTTPS.
56
+		</p>
57
+
58
+		<ul>
59
+			<li>
60
+				<a href="https://greenlock.domains" target="_blank">
61
+					https://greenlock.domains</a
62
+				>
63
+			</li>
64
+
65
+			<li>
66
+				<a
67
+					href="https://git.coolaj86.com/coolaj86/greenlock-express.js"
68
+					target="_blank"
69
+				>
70
+					https://git.coolaj86.com/coolaj86/greenlock-express.js</a
71
+				>
72
+			</li>
73
+
74
+			<li>
75
+				<a
76
+					href="https://git.coolaj86.com/coolaj86/greenlock.js"
77
+					target="_blank"
78
+				>
79
+					https://git.coolaj86.com/coolaj86/greenlock.js</a
80
+				>
81
+			</li>
82
+
83
+			<li>
84
+				<a
85
+					href="https://git.coolaj86.com/coolaj86/greenlock.html"
86
+					target="_blank"
87
+				>
88
+					https://git.coolaj86.com/coolaj86/greenlock.html</a
89
+				>
90
+			</li>
91
+		</ul>
92
+
93
+		<p>
94
+			Greenlock Domains is an important product / service combo to us because
95
+			it's a huge milestone on the path to a more decentralized web. We believe
96
+			in
97
+			<em>ownership</em> and <em>control</em> and we're building a
98
+			<a href="https://therootcompany.com">Home Server</a> because we envision a
99
+			world in which everyone is empowered to make the choice of whether to rent
100
+			or own their stuff.
101
+		</p>
102
+
103
+		<p>
104
+			If we don't do this, well, with the way the cloud is headed, renting may
105
+			be the only option in the future.
106
+		</p>
107
+
108
+		<p>We need <em>Root</em> because we want ownership.</p>
109
+
110
+		<p>
111
+			If at any time you feel that any of our messaging or practices are in
112
+			conflict with our mission or these values, please let us know.
113
+		</p>
114
+
115
+		<h1 id="licensing">Licensing</h1>
116
+
117
+		<p>
118
+			Each of our products comes with its own LICENSE file and the license(s)
119
+			may alse be in some sort of manifest file (such as package.json).
120
+		</p>
121
+
122
+		<p>
123
+			We typically use the MIT and Apache-2.0 licenses for libraries that we
124
+			actively want others to copy, modify, use and redistribute.
125
+		</p>
126
+
127
+		<p>
128
+			We typically use ISC and MPL-2.0 with products for which we're a little
129
+			more concerned about branding or about which we have particularly strong
130
+			opinions.
131
+		</p>
132
+
133
+		<p>
134
+			Although we do keep some of our software proprietary and we do use
135
+			trademarks, because we believe in empowerment and choice we do our best to
136
+			provide usable self-service forms of our products and services for
137
+			personal use.
138
+		</p>
139
+
140
+		<p>
141
+			If at any time you feel that our Licensing is in conflict with our mission
142
+			or values, please let us know.
143
+		</p>
144
+
145
+		<h1 id="terms">Terms of Service</h1>
146
+
147
+		<p>
148
+			We want to make the world a better place. Everyone has a different
149
+			definition of what "a better place" means, so the purpose of our terms is
150
+			to rule out some things that we think makes the world (and particularly
151
+			our world) a worse place:
152
+		</p>
153
+
154
+		<p>
155
+			You agree that you will use the Greenlock&trade; service, code, libraries,
156
+			documentation, etc (provided by <a href="#greenlock">us</a>) primarily for
157
+			securing network connections for yourself, your customers, on your and
158
+			your customer's devices on internets, intranets, and... other nets.
159
+		</p>
160
+
161
+		<p>
162
+			You agree that you will take reasonable measures to keep up-to-date with
163
+			security releases.
164
+		</p>
165
+
166
+		<p>
167
+			You agree to not use our products or services in a way that would cause
168
+			unusual or undue burden on our servers or services, our partners servers
169
+			or services, or our customers servers or services, or in a way that harms
170
+			or misrepresents the reputation or brand value (including causing brand
171
+			confusion) of the aforementioned parties (or really anybody).
172
+		</p>
173
+
174
+		<p>
175
+			This is not to say that you can't publicly have a negative opinion, but
176
+			don't bite the hand that feeds and don't be vicious or misrepresentative.
177
+		</p>
178
+
179
+		<p>
180
+			If you have a use case that may be in violation of these terms
181
+			(particularly the part about undue burden), but you feel contributes to
182
+			making the world a better place, we're here to help (assuming it also
183
+			aligns with our values). Although it may not be appropriate to use our
184
+			services, but perhaps we can help you with a solution based on our
185
+			no-cost, low-cost or open source products.
186
+		</p>
187
+
188
+		<p>
189
+			If at any time you feel that our Terms of Service are in conflict with our
190
+			mission or values, please let us know.
191
+		</p>
192
+
193
+		<h1 id="trademark">Trademark</h1>
194
+
195
+		<p>
196
+			"Greenlock" and the "green G lock" mark are Trademarks of
197
+			<a href="https://coolaj86.com" target="_blank">AJ ONeal</a>.
198
+		</p>
199
+
200
+		<p>
201
+			We'll be coming out with a brand guide as to how you should use the marks.
202
+			In the meantime: don't change the proportions, colors (excepting the case
203
+			of greyscale and black and white).
204
+		</p>
205
+
206
+		<p>
207
+			It is appropriate to use the trademark in a way that promotes the brand
208
+			with proper attribution, linking to the official project repositories,
209
+			etc.
210
+		</p>
211
+
212
+		<p>
213
+			It is appropriate use the name greenlock in a plugin for Greenlock&trade;,
214
+			as long as it is clear that it is a community contribution.
215
+		</p>
216
+
217
+		<p>
218
+			If you create a "hard" fork of our code or any products or services, you
219
+			should give your fork its own name, and not use ours. That sound, we
220
+			gladly welcome your suggestiosn and pull requests.
221
+		</p>
222
+
223
+		<p>
224
+			If you mirror our code you should make it clear that it is a mirror and
225
+			link to the official repository. in association with usand the disclose
226
+			that you use Greenlock
227
+		</p>
228
+
229
+		<p>
230
+			If at any time you feel that our Trademark policies are in conflict with
231
+			our values, please let us know.
232
+		</p>
233
+
234
+		<h1 id="privacy">Privacy Policy</h1>
235
+
236
+		<p>What we collect and (more importantly) <em>Why</em>:</p>
237
+
238
+		<p><strong>Name</strong>:</p>
239
+		<p>
240
+			In the cases that we collect your name, it's because we want to know how
241
+			to address you. All four of us want to be personable if and when we reach
242
+			out.
243
+		</p>
244
+
245
+		<p><strong>Email</strong>:</p>
246
+		<p>
247
+			There are three main purposes for which we may use your email address:
248
+		</p>
249
+
250
+		<p>
251
+			1. A one-time outreach to ask if you were able to do what you intended to
252
+			do. We want to make a great product. Although open source projects
253
+			traditionally have a <em>reactive</em> approach to communication (i.e. you
254
+			file a bug and wait for a response), we believe that creating sustainable
255
+			open source requires a <em>proactive</em> approach.
256
+		</p>
257
+
258
+		<p>
259
+			2. Security and legal notifications. It's important that we have a way to
260
+			contact you if we've made a mistake or discover a mistake that needs to be
261
+			addressed. This may include vulnerabilities as well as mandatory upgrades
262
+			(such as when a significant change to the Let's Encrypt API is made).
263
+			Making sure that our products work and are secure aligns with our values
264
+			and contributes to our brand identity.
265
+		</p>
266
+
267
+		<p>
268
+			3. Opt-in updates. Many of you want to know when we have significant
269
+			feature updates or when we have something that we believe is really
270
+			valuable to share. We've created an opt-in avenue for that. And you can
271
+			always opt-out as well.
272
+		</p>
273
+
274
+		<p><strong>Telemetry</strong>:</p>
275
+		<p>
276
+			We believe that the current open source model needs improvement - it often
277
+			relies heavily on large centralized platforms which aggregate a lot of
278
+			user information for the platform without appropriately targeting the
279
+			relationship between authors and users of projcts (i.e. npm, github, etc).
280
+			We believe that making open source sustainable means a greater focus on
281
+			empowering authors and users. We've learned from other projects (Caddy,
282
+			Heroku, and others) which use telemetry as part of a proactive approach to
283
+			open source and we believe that it can be a great avenue for us to be
284
+			proactive as well.
285
+		</p>
286
+
287
+		<p>
288
+			We may use telemetry about operating system, browser, node version, code
289
+			version, and other system-level information to better understand how we
290
+			can serve our users (you) and proactively solve problems that we might not
291
+			otherwise hear about. For example, if we see many page visits in a certain
292
+			browser (or installs with a new version of node), but few successful
293
+			registrations, we know that something is wrong.
294
+		</p>
295
+
296
+		<p><strong>Other</strong>:</p>
297
+		<p>
298
+			We also use Google Analytics on our web sites for basic functionality.
299
+			Other than that, nothing else comes to mind right now. As we consider what
300
+			we will do in the future, it will be measured against our mission and
301
+			values. We never want to come across as spammy or forceful. We want to do
302
+			things that help us build our brand, acknowledge our customers; things
303
+			that are proactive, and that promote sustainable source.
304
+		</p>
305
+
306
+		<p>
307
+			If at any time you feel that our Privacy policy is in conflict with our
308
+			mission or values, please let us know.
309
+		</p>
310
+
311
+		<br />
312
+		<br />
313
+		<p>Copyright 2018 AJ ONeal</p>
314
+	</body>
315
+</html>

+ 68
- 69
styles/main.css View File

@@ -1,115 +1,114 @@
1 1
 .column-row {
2
-  display: flex;
3
-  flex-direction: column;
4
-  text-align: center;
5
-  align-items: center;
2
+	display: flex;
3
+	flex-direction: column;
4
+	text-align: center;
5
+	align-items: center;
6 6
 }
7 7
 
8 8
 body {
9
-  position: relative;
10
-  margin-top: 5.777777778em;
11
-  min-height: 36em;
12
-  font-size: 18px;
13
-  font-family: 'Source Sans Pro', sans-serif;
14
-  font-stretch: normal;
15
-  line-height: 1.33;
16
-  letter-spacing:  -0.4px;
17
-  color: #1a1a1a;
18
-  opacity: 0;
9
+	position: relative;
10
+	margin-top: 5.777777778em;
11
+	min-height: 36em;
12
+	font-size: 18px;
13
+	font-family: "Source Sans Pro", sans-serif;
14
+	font-stretch: normal;
15
+	line-height: 1.33;
16
+	letter-spacing: -0.4px;
17
+	color: #1a1a1a;
18
+	opacity: 0;
19 19
 }
20 20
 
21 21
 h1 {
22
-  font-size: 2.666666667em;
23
-  max-width: 8em;
24
-  text-align: center;
22
+	font-size: 2.666666667em;
23
+	max-width: 8em;
24
+	text-align: center;
25 25
 }
26 26
 
27 27
 input {
28
-  font-size: 1em;
29
-  padding: 0.444444444em;
30
-  border: solid #d9d9d9 1px;
31
-  border-radius: 2px;
32
-  font-family: inherit;
28
+	font-size: 1em;
29
+	padding: 0.444444444em;
30
+	border: solid #d9d9d9 1px;
31
+	border-radius: 2px;
32
+	font-family: inherit;
33 33
 }
34 34
 
35 35
 button {
36
-  padding: 0.444444444em 1.2em;
37
-  font-size: 1em;
38
-  background-color: #5bc17f;
39
-  border: solid 1px #5bc17f;
40
-  border-radius: 2px;
41
-  font-weight: normal;
42
-  font-stretch: normal;
43
-  letter-spacing: -0.4px;
44
-  font-family: inherit;
45
-  text-align: center;
46
-  color: white;
47
-  height: 40px;
48
-  line-height: 1.13;
36
+	padding: 0.444444444em 1.2em;
37
+	font-size: 1em;
38
+	background-color: #5bc17f;
39
+	border: solid 1px #5bc17f;
40
+	border-radius: 2px;
41
+	font-weight: normal;
42
+	font-stretch: normal;
43
+	letter-spacing: -0.4px;
44
+	font-family: inherit;
45
+	text-align: center;
46
+	color: white;
47
+	height: 40px;
48
+	line-height: 1.13;
49 49
 }
50 50
 
51 51
 .acme-advanced-fields {
52
-  position: absolute;
53
-  bottom: 0;
54
-  padding: 1em;
55
-  text-align: center;
52
+	position: absolute;
53
+	bottom: 0;
54
+	padding: 1em;
55
+	text-align: center;
56 56
 }
57 57
 
58 58
 .domain-subtext {
59
-  font-size: 0.833333333em;
60
-  color: #666;
61
-  text-align: center;
62
-  margin: 0.5em;
59
+	font-size: 0.833333333em;
60
+	color: #666;
61
+	text-align: center;
62
+	margin: 0.5em;
63 63
 }
64 64
 
65 65
 input#acme-domains:before {
66
-  content: "Secure | https://";
66
+	content: "Secure | https://";
67 67
 }
68 68
 
69 69
 .domain-psuedo-input {
70
-  display: inline-block;
71
-  margin-right: .6666667em;
72
-  border: solid #d9d9d9 1px;
73
-  border-radius: 2px;
74
-  padding: 0.44444444em;
75
-  color: #d9d9d9;
70
+	display: inline-block;
71
+	margin-right: 0.6666667em;
72
+	border: solid #d9d9d9 1px;
73
+	border-radius: 2px;
74
+	padding: 0.44444444em;
75
+	color: #d9d9d9;
76 76
 }
77 77
 
78 78
 input#acme-domains {
79
-  border: none;
80
-  padding: 0;
81
-  padding-right: 0;
82
-  width: 17.2222222em;
83
-  color: #222;
79
+	border: none;
80
+	padding: 0;
81
+	padding-right: 0;
82
+	width: 17.2222222em;
83
+	color: #222;
84 84
 }
85 85
 
86 86
 input#acme-domains:focus {
87
-  outline: none;
87
+	outline: none;
88 88
 }
89 89
 
90 90
 span.secure-green {
91
-  color: #5bc17f;
91
+	color: #5bc17f;
92 92
 }
93 93
 
94 94
 .why-you-need {
95
-  width: 26.555556em;
95
+	width: 26.555556em;
96 96
 }
97 97
 
98 98
 body.js-app-ready {
99
-  transition: opacity 0.2s;
100
-  opacity: 1;
99
+	transition: opacity 0.2s;
100
+	opacity: 1;
101 101
 }
102 102
 
103 103
 .acme-advanced-fields > * {
104
-  margin: 0 0.5em;
104
+	margin: 0 0.5em;
105 105
 }
106 106
 
107 107
 .js-javascript-warning {
108
-  border: solid 1px red;
109
-  background-color: #ffc0cb40;
110
-  border-radius: 2px;
111
-  margin: 0.6em;
112
-  padding: 0.5em 1em;
113
-  width: 30em;
114
- }
115
- 
108
+	border: solid 1px red;
109
+	background-color: #ffc0cb40;
110
+	border-radius: 2px;
111
+	margin: 0.6em;
112
+	padding: 0.5em 1em;
113
+	width: 30em;
114
+}

Loading…
Cancel
Save