]> gitweb.michael.orlitzky.com - charm-bypass.git/blob - index.html.in
index.html.in: don't re-center the security code on window resize
[charm-bypass.git] / index.html.in
1 <!doctype html>
2 <html lang="en-US">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1" />
5
6 <title>
7 CharmBypass.
8 </title>
9
10 <style>
11 /*
12 * Reset styles for the html and body elements, the only two HTML
13 * elements we use. */
14 html, body {
15 margin: 0;
16 padding: 0;
17 border: 0;
18 font-weight: normal;
19 font-style: inherit;
20 font-size: 100%;
21 line-height: 1.5;
22 font-family: inherit;
23 text-align: inherit;
24 text-decoration: none;
25 vertical-align: baseline;
26 background: transparent;
27 }
28
29 html, body {
30 /* To create our "window" onto the scene, we're going to slide the
31 * SVG off the left-hand side of the screen, and we don't want
32 * scroll bars to appear. */
33 overflow: hidden;
34 }
35
36 svg {
37 /* Set the height to 100% of the screen, which we'll keep; and the
38 * initial position to (0,0), which we're going to change
39 * every time the window is resized, because the exact amount
40 * that we have to slide the SVG to the left to get the ticket
41 * into the center will change. */
42 position: fixed;
43 top: 0;
44 left: 0;
45 height: 100%;
46 }
47
48 /* The blinking fade in/out animation for the ticket date and time */
49 @keyframes blink {
50 25% {
51 opacity: 0.5;
52 }
53 50% {
54 opacity: 0;
55 }
56 75% {
57 opacity: 0.5;
58 }
59 }
60
61 #tickettime, #ticketdate {
62 /* 300 two-second blinks is ten minutes */
63 animation: blink 2s linear 300;
64 }
65
66 /* Define, load, and specify the custom font we use for the ticket
67 * date, time, and service name. */
68 @font-face {
69 font-family: "CharmBypass Regular";
70 src:
71 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
72 }
73
74 #servicename, #tickettime, #ticketdate, #codetext {
75 font-family: "CharmBypass Regular", sans-serif;
76 }
77
78 @font-face {
79 font-family: "CharmBypass Bold";
80 src:
81 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
82 }
83
84 #serviceletter {
85 font-family: "CharmBypass Bold", sans-serif;
86 font-weight: bold;
87 }
88
89 /************************/
90 /* Scrolling animations */
91 /************************/
92
93 /* Bus */
94 @keyframes busroll {
95 from {
96 transform: translateX(0%);
97 }
98 to {
99 transform: translateX(-100%);
100 }
101 }
102
103 #bus {
104 animation: busroll 23s linear infinite;
105 }
106
107
108 /* Tram */
109 @keyframes tramroll {
110 from {
111 transform: translateX(0%);
112 }
113 to {
114 transform: translateX(100%);
115 }
116 }
117
118 #tram {
119 animation: tramroll 17s linear infinite;
120 }
121
122
123 /* Tram */
124 @keyframes trainroll {
125 from {
126 transform: translateX(0%);
127 }
128 to {
129 transform: translateX(100%);
130 }
131 }
132
133 #train {
134 animation: trainroll 11s linear infinite;
135 }
136
137
138 /* Clouds */
139 @keyframes cloudsfloat {
140 from {
141 transform: translateX(0%);
142 }
143 to {
144 transform: translateX(-50%);
145 }
146 }
147
148 #clouds {
149 animation: cloudsfloat 40s linear infinite;
150 }
151
152 @keyframes cloudscopyfloat {
153 from {
154 transform: translateX(0%);
155 }
156 to {
157 transform: translateX(-50%);
158 }
159 }
160
161 #cloudscopy {
162 animation: cloudscopyfloat 40s linear infinite;
163 }
164
165
166 /* Trees */
167 @keyframes treespass {
168 from {
169 transform: translateX(0%);
170 }
171 to {
172 transform: translateX(-50%);
173 }
174 }
175
176 #trees {
177 /* The trees move a little faster than the clouds */
178 animation: treespass 30s linear infinite;
179 }
180
181 @keyframes treescopypass {
182 from {
183 transform: translateX(0%);
184 }
185 to {
186 transform: translateX(-50%);
187 }
188 }
189
190 #treescopy {
191 /* The trees move a little faster than the clouds */
192 animation: treescopypass 30s linear infinite;
193 }
194
195
196 /* City skyline */
197 @keyframes cityscroll {
198 from {
199 transform: translateX(0%);
200 }
201 to {
202 transform: translateX(-50%);
203 }
204 }
205
206 #city {
207 /* The city moves faster than the clouds but slower
208 * than the trees */
209 animation: cityscroll 35s linear infinite;
210 }
211
212 @keyframes citycopyscroll {
213 from {
214 transform: translateX(0%);
215 }
216 to {
217 transform: translateX(-50%);
218 }
219 }
220
221 #citycopy {
222 /* The city moves faster than the clouds but slower
223 * than the trees */
224 animation: citycopyscroll 35s linear infinite;
225 }
226 </style>
227 </head>
228
229 <body>
230 @SVGDATA@
231
232 <script>
233
234 /***********************************************/
235 /* First, center the ticket within the browser */
236 /***********************************************/
237
238 function center_ticket() {
239 /* We're relying on the SVG being the full height of the
240 * viewport already, and on the aspect ratio being
241 * preserved. First, find the center of the ticket. */
242 const r = document.getElementById("ticket").getBoundingClientRect();
243 const c = r.left + (r.width / 2);
244
245 /* That's the center-line of the ticket. We want to move it to
246 * the center-line of the viewport. */
247 const vc = document.documentElement.clientWidth / 2;
248
249 /* This is how much we need to translate the SVG */
250 const hdelta = vc - c;
251
252 /* But before we can set the absolute left-coordinate of the
253 * SVG, we need to know where it is now. Note: without the
254 * "px" this doesn't default to pixels like CSS does. */
255 const svg = document.querySelector("svg");
256 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
257 }
258
259
260 /****************************************/
261 /* Set and reposition the security code */
262 /****************************************/
263
264 function set_code() {
265 const ct = document.getElementById("codetext");
266
267 /* Get the "code" from the querystring if it's there */
268 let params = new URLSearchParams(document.location.search);
269 if (params.get("code")) {
270 ct.textContent = params.get("code");
271 }
272 else {
273 /* Otherwise, use a random code */
274 const bucket = ["0","1","2","3","4","5","6","7","8","9",
275 "A","B","C","D","E","F","G","H","I","J",
276 "K","L","M","N","O","P","Q","R","S","T",
277 "U","V","W","X","Y","Z"];
278
279 /* Two random ints between 0 and 35 */
280 const i1 = Math.floor(Math.random() * 36);
281 const i2 = Math.floor(Math.random() * 36);
282 const d1 = bucket[i1];
283 const d2 = bucket[i2];
284 ct.textContent = d1 + d2;
285 }
286 }
287
288
289 function center_code() {
290 /* Center the security code inside its red box */
291 const ct = document.getElementById("codetext");
292
293 /* First, find the center of the red box */
294 const r1 = document.getElementById("codebg").getBoundingClientRect();
295 const c1 = r1.left + (r1.width / 2);
296
297 /* Now the center of the code text */
298 const r2 = ct.getBoundingClientRect();
299 const c2 = r2.left + (r2.width / 2);
300
301 /* What do we add to c2 to make it equal to c1? */
302 const hdelta = c1 - c2;
303
304 /* Since this <text> element has an "x" attribute it's easier for
305 * us to shift that than it is to mess with the "left" style. */
306 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta);
307 }
308
309 function center_code_repeatedly() {
310 /* Lets us call center_code five times on page load. Why we
311 * need to do this is an interesting (i.e. stupid) topic for
312 * conversation. */
313 center_code();
314 center_code();
315 center_code();
316 center_code();
317 center_code();
318 }
319
320 /*****************************************/
321 /* Next, set up the ticket date and time */
322 /*****************************************/
323
324 function set_ticket_expiry() {
325 /* There are two parameters, time and date, that we store in one
326 * underlying "date" variable. Default both to an hour and a
327 * half from now. This is what the CharmPass app does for
328 * one-way tickets. */
329 const date = new Date();
330
331 /* Add an hour and a half. We use the low-level get/setTime to
332 * change the number of milliseconds since the epoch that this
333 * date represents. Obviously correct, and avoids all suspicious
334 * corner cases (well, for a few more decades). */
335 date.setTime(date.getTime() + (90*60*1000));
336
337 tt = document.getElementById("tickettime");
338 tt.textContent = date.toLocaleTimeString();
339
340 const td = document.getElementById("ticketdate");
341 const dateopts = {
342 day: "2-digit",
343 month: "2-digit",
344 year: "2-digit"
345 };
346 td.textContent = date.toLocaleDateString("en-US", dateopts);
347 }
348
349
350 /*********************************************************/
351 /* Finally, the onclick handler for the night/day switch */
352 /*********************************************************/
353
354 /* We always start in "day" mode */
355 is_day = true;
356
357 function set_day() {
358 sky.style.fill = "#efb02f";
359 }
360
361 function set_night() {
362 sky.style.fill = "#143b66";
363 }
364
365 function swap_colors() {
366 if (is_day) {
367 set_night();
368 is_day = false;
369 }
370 else {
371 set_day();
372 is_day = true;
373 }
374 }
375
376
377 /*****************************************************/
378 /* Add event handlers for all of the functions above */
379 /*****************************************************/
380
381 /* Center the ticket once when the page has loaded */
382 window.addEventListener("load", center_ticket);
383
384 /* Re-center the ticket when the window is resized */
385 window.addEventListener("resize", center_ticket);
386
387 /* Set the security code text when the page has loaded */
388 window.addEventListener("load", set_code);
389
390 /* Center the security code text when the page has loaded; in
391 * particular, after we set it. And then center it again. And
392 * again and again and again. Why? I'm glad you asked. Because
393 * it doesn't actually get centered the first time; it's off by
394 * a few pixels. But then if we center it _again_, it moves a
395 * little closer to the true center. Do that enough times and
396 * any errors become unnoticeable. */
397 window.addEventListener("load", center_code_repeatedly);
398
399 /* Set the ticket expiration date/time upon page load */
400 window.addEventListener("load", set_ticket_expiry);
401
402 /* Swap colors when the screen is tapped */
403 document.body.addEventListener("click", swap_colors);
404
405 </script>
406 </body>
407 </html>