Procházet zdrojové kódy

Progress bar is in place.

master
John Shaver před 1 rokem
rodič
revize
fe530836c7

binární
app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2 Zobrazit soubor


binární
app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2 Zobrazit soubor


img/greenlock-mark-400x400.png → app/img/greenlock-mark-400x400.png Zobrazit soubor


+ 80
- 16
app/index.html Zobrazit soubor

@@ -2,17 +2,81 @@
2 2
   <head>
3 3
     <title>Greenlock&trade;</title>
4 4
     <meta property="og:image" content="https://greenlock.ppl.family/img/greenlock-mark-400x400.png" />
5
-    <link href="style/main.css" rel="stylesheet">
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
+    </style>
23
+
24
+    <link href="styles/main.css" rel="stylesheet">
25
+    
6 26
   </head>
7 27
   <body hidden>
28
+    <!-- let's define our SVG that we will reuse -->
29
+
30
+    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
31
+      <defs>
32
+        <g id="svg-check">
33
+          <path fill="none" d="M0 0h24v24H0z"/>
34
+          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
35
+        </g>
36
+      </defs>
37
+    </svg>
8 38
     <div class="column-container wide">
9 39
       <div class="column-row">
10
-        <img src="../img/greenlock-820x150.png">
40
+        <div id="js-progress-bar" class="progress-bar">
41
+          <div class="progress-bar-step">
42
+            <div class="circle">
43
+              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
44
+                <use xlink:href="#svg-check"></use>
45
+              </svg>
46
+            </div>
47
+            <div class="progress-step-label"><div>Details</div></div>
48
+          </div>
49
+          <div class="progress-bar-step">
50
+            <div class="circle">
51
+              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
52
+                <use xlink:href="#svg-check"></use>
53
+              </svg>
54
+            </div>
55
+            <div class="progress-step-label"><div>Verify domain</div></div>
56
+          </div>
57
+          <div class="progress-bar-step">
58
+            <div class="circle">
59
+              <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
60
+                <use xlink:href="#svg-check"></use>
61
+              </svg>
62
+            </div>
63
+            <div class="progress-step-label"><div>Install certificates</div></div>
64
+          </div>
65
+          <!-- hide until the steps are all updated
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>Done</div></div>
73
+          </div>
74
+          -->
75
+        </div>
76
+        <div class="greenlock-logo-badge"><img src="./img/greenlock-mark-400x400.png"></div>
77
+        <div class="greenlock-name">Greenlock</div>
11 78
       </div>
12 79
       <div class="column-row">
13
-          <h1>Get the green lock for your website</h1>
14
-
15
-        <!-- Step 1 Choose Domain(s) -->
16 80
         <form class="js-acme-form js-acme-form-domains">
17 81
           <h1><label>What's your domain?</label></h1>
18 82
           <h4>Certificates are valid for 90 days. Renewal is free :)</h4>
@@ -159,18 +223,18 @@
159 223
         <!-- Step 5 Get Certs -->
160 224
         <form class="js-acme-form js-acme-form-download">
161 225
           <div>
162
-          <h2><label>privkey.pem</label></h2>
163
-          <textarea cols="80" rows="10" class="js-privkey">-</textarea>
164
-          </div>
226
+            <h2><label>privkey.pem</label></h2>
227
+            <textarea cols="80" rows="10" class="js-privkey">-</textarea>
228
+            </div>
165 229
 
166
-          <div>
167
-          <h2><label>fullchain.pem</label></h2>
168
-          <textarea cols="80" rows="60" class="js-fullchain">-</textarea>
169
-          </div>
230
+            <div>
231
+            <h2><label>fullchain.pem</label></h2>
232
+            <textarea cols="80" rows="60" class="js-fullchain">-</textarea>
233
+            </div>
170 234
 
171
-          <div>
172
-          <h3>node.js https server example</h3>
173
-          <pre><code>'use strict';
235
+            <div>
236
+            <h3>node.js https server example</h3>
237
+            <pre><code>'use strict';
174 238
 
175 239
     var https = require('https');
176 240
     var server = https.createServer({
@@ -181,7 +245,7 @@
181 245
     }).listen(443, function () {
182 246
       console.log('Listening on', this.address());
183 247
     })
184
-    </code></pre>
248
+            </code></pre>
185 249
           </div>
186 250
 
187 251
           <!--

+ 22
- 1
app/js/app.js Zobrazit soubor

@@ -29,9 +29,26 @@
29 29
     });
30 30
   }
31 31
 
32
+  function updateProgress(currentStep) {
33
+    var progressSteps = $qs("#js-progress-bar").children;
34
+    for(var j = 0; j < progressSteps.length; j++) {
35
+      if(j < currentStep) {
36
+        progressSteps[j].classList.add("js-progress-step-complete");
37
+        progressSteps[j].classList.remove("js-progress-step-started");
38
+      } else if(j === currentStep) {
39
+        progressSteps[j].classList.remove("js-progress-step-complete");
40
+        progressSteps[j].classList.add("js-progress-step-started");
41
+      } else {
42
+        progressSteps[j].classList.remove("js-progress-step-complete");
43
+        progressSteps[j].classList.remove("js-progress-step-started");
44
+      }
45
+    };
46
+  }
47
+
32 48
   function submitForm(ev) {
33 49
     var j = i;
34 50
     i += 1;
51
+    
35 52
     steps[j].submit(ev);
36 53
   }
37 54
   $qsa('.js-acme-form').forEach(function ($el) {
@@ -83,6 +100,7 @@
83 100
   }
84 101
 
85 102
   steps[1] = function () {
103
+    updateProgress(0);
86 104
     hideForms();
87 105
     $qs('.js-acme-form-domains').hidden = false;
88 106
   };
@@ -108,13 +126,13 @@
108 126
   };
109 127
 
110 128
   steps[2] = function () {
129
+    updateProgress(0);
111 130
     hideForms();
112 131
     $qs('.js-acme-form-account').hidden = false;
113 132
   };
114 133
   steps[2].submit = function () {
115 134
     var email = $qs('.js-acme-account-email').value.toLowerCase().trim();
116 135
 
117
-
118 136
     info.contact = [ 'mailto:' + email ];
119 137
     info.agree = $qs('.js-acme-account-tos').checked;
120 138
     info.greenlockAgree = $qs('.js-gl-tos').checked;
@@ -290,6 +308,7 @@
290 308
   };
291 309
 
292 310
   steps[3] = function () {
311
+    updateProgress(1);
293 312
     hideForms();
294 313
     $qs('.js-acme-form-challenges').hidden = false;
295 314
   };
@@ -374,6 +393,7 @@
374 393
 
375 394
   // spinner
376 395
   steps[4] = function () {
396
+    updateProgress(1);
377 397
     hideForms();
378 398
     $qs('.js-acme-form-poll').hidden = false;
379 399
   }
@@ -505,6 +525,7 @@
505 525
   };
506 526
 
507 527
   steps[5] = function () {
528
+    updateProgress(2)
508 529
     hideForms();
509 530
     $qs('.js-acme-form-download').hidden = false;
510 531
   }

+ 90
- 0
app/styles/main.css Zobrazit soubor

@@ -0,0 +1,90 @@
1
+.column-row {
2
+  width: 22.222222em;
3
+}
4
+
5
+.column-container {
6
+  display: flex;
7
+  flex-direction: column;
8
+  align-items: center;
9
+}
10
+
11
+.progress-bar {
12
+  height: 0;
13
+  border: solid 1px #5bc17f;
14
+  display: flex;
15
+  justify-content: space-between;
16
+  align-items: center;
17
+  width: 22em;
18
+  margin: 1.388888889em auto;
19
+}
20
+
21
+.greenlock-logo-badge > img {
22
+  width: 100%;
23
+}
24
+
25
+.greenlock-logo-badge {
26
+  display: inline-block;
27
+  border: solid 1px #d9d9d9;
28
+  border-radius: 500px;
29
+  width: 5.333333333em;
30
+  height: 5.333333333em;
31
+  margin-top: 4.277777778em;
32
+}
33
+
34
+.column-row {
35
+  text-align: center;
36
+}
37
+
38
+.progress-bar-step {position: relative;margin: -0.722222222em -0.166666667em;display: inline-block;background-color: white;/* border-radius: 100%; */padding: 0 0.111111em;}
39
+
40
+.progress-bar-step > .circle {
41
+  content: "";
42
+  display: inline-block;
43
+  border: solid 0.111111111em #5bc17f;
44
+  width: 0.888888889em;
45
+  height: 0.888888889em;
46
+  border-radius: 100%;
47
+  background: white;
48
+}
49
+
50
+.progress-step-label {
51
+  text-align: center;
52
+  position: absolute;
53
+  left: 50%;
54
+  =: block
55
+  font-size:;
56
+  top: 139%;
57
+  font-size: 0.722222222em;
58
+  white-space: nowrap;
59
+}
60
+
61
+.progress-step-label > div {
62
+  position: relative;
63
+  right: 50%;
64
+}
65
+
66
+body {
67
+  font-size: 18px;
68
+  font-family: Source Sans Pro, sans-serif;
69
+  margin: 0;
70
+  line-height: 1.33;
71
+}
72
+
73
+.greenlock-name {
74
+  color: #808080;
75
+}
76
+
77
+.js-progress-step-complete > .circle, .js-progress-step-started > .circle {
78
+    background-color: #5bc17f;
79
+}
80
+
81
+.progress-bar-step.js-progress-step-complete svg {
82
+    fill: white;
83
+    /* stroke: none; */
84
+    display: initial;
85
+}
86
+
87
+svg {
88
+}
89
+
90
+.js-progress-step-complete > .circle {}

Načítá se…
Zrušit
Uložit