4 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
12 * Reset styles for the html and body elements, the only two HTML
24 text-decoration: none;
25 vertical-align: baseline;
26 background: transparent;
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. */
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. */
48 /* The blinking fade in/out animation for the ticket date and time */
61 #tickettime, #ticketdate {
62 /*
300 two-second blinks is ten minutes */
63 animation: blink
2s linear
300;
66 /* Define, load, and specify the custom font we use for the ticket
67 * date, time, and service name. */
69 font-family: "CharmBypass Regular";
71 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
74 #servicename, #tickettime, #ticketdate, #codetext {
75 font-family: "CharmBypass Regular", sans-serif;
79 font-family: "CharmBypass Bold";
81 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
85 font-family: "CharmBypass Bold", sans-serif;
89 /************************/
90 /* Scrolling animations */
91 /************************/
96 transform: translateX(
0%);
99 transform: translateX(-
100%);
104 animation: busroll
23s linear infinite;
109 @keyframes tramroll {
111 transform: translateX(
0%);
114 transform: translateX(
100%);
119 animation: tramroll
17s linear infinite;
124 @keyframes trainroll {
126 transform: translateX(
0%);
129 transform: translateX(
100%);
134 animation: trainroll
11s linear infinite;
139 @keyframes cloudsfloat {
141 transform: translateX(
0%);
144 transform: translateX(-
50%);
149 animation: cloudsfloat
40s linear infinite;
152 @keyframes cloudscopyfloat {
154 transform: translateX(
0%);
157 transform: translateX(-
50%);
162 animation: cloudscopyfloat
40s linear infinite;
167 @keyframes treespass {
169 transform: translateX(
0%);
172 transform: translateX(-
50%);
177 /* The trees move a little faster than the clouds */
178 animation: treespass
30s linear infinite;
181 @keyframes treescopypass {
183 transform: translateX(
0%);
186 transform: translateX(-
50%);
191 /* The trees move a little faster than the clouds */
192 animation: treescopypass
30s linear infinite;
197 @keyframes cityscroll {
199 transform: translateX(
0%);
202 transform: translateX(-
50%);
207 /* The city moves faster than the clouds but slower
209 animation: cityscroll
35s linear infinite;
212 @keyframes citycopyscroll {
214 transform: translateX(
0%);
217 transform: translateX(-
50%);
222 /* The city moves faster than the clouds but slower
224 animation: citycopyscroll
35s linear infinite;
234 /***********************************************/
235 /* First, center the ticket within the browser */
236 /***********************************************/
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);
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;
249 /* This is how much we need to translate the SVG */
250 const hdelta = vc - c;
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";
260 /******************************/
261 /* Set the service identifier */
262 /******************************/
263 function set_service_id() {
264 const sid = document.getElementById("serviceid");
266 /* Get the "serviceid" from the querystring if it's there */
267 let params = new URLSearchParams(document.location.search);
268 if (params.get("serviceid")) {
269 sid.textContent = params.get("serviceid");
272 /* Otherwise, leave it at "F" */
275 /******************************/
276 /* Set the service name */
277 /******************************/
278 function set_service_name() {
279 const sid = document.getElementById("servicename");
281 /* Get the "servicename" from the querystring if it's there */
282 let params = new URLSearchParams(document.location.search);
283 if (params.get("servicename")) {
284 sid.textContent = params.get("servicename");
287 /* Otherwise, leave it at "BaltimoreLink" */
290 /****************************************/
291 /* Set and reposition the security code */
292 /****************************************/
294 function set_code() {
295 const ct = document.getElementById("codetext");
297 /* Get the "code" from the querystring if it's there */
298 let params = new URLSearchParams(document.location.search);
299 if (params.get("code")) {
300 ct.textContent = params.get("code");
303 /* Otherwise, use a random code */
304 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
305 "A","B","C","D","E","F","G","H","I","J",
306 "K","L","M","N","O","P","Q","R","S","T",
307 "U","V","W","X","Y","Z"];
309 /* Two random ints between
0 and
35 */
310 const i1 = Math.floor(Math.random() *
36);
311 const i2 = Math.floor(Math.random() *
36);
312 const d1 = bucket[i1];
313 const d2 = bucket[i2];
314 ct.textContent = d1 + d2;
319 function center_code() {
320 /* Center the security code inside its red box */
321 const ct = document.getElementById("codetext");
322 const bg = document.getElementById("codebg");
324 /* First, find the center of the red box */
325 const r1 = bg.getBoundingClientRect();
326 const c1 = r1.left + (r1.width /
2);
328 /* Now the center of the code text */
329 const r2 = ct.getBoundingClientRect();
330 const c2 = r2.left + (r2.width /
2);
332 /* What do we add to c2 to make it equal to c1? */
333 const hdelta = c1 - c2;
335 /* We've measured everything so far in "client rect"
336 * coordinates, because that's the only available measurement
337 * we have for the width of the
<text> element after futzing
338 * with its contents. But when we reposition that
<text>
339 * element, it will be by adjusting its "x" attribute, and
340 * that attribute uses a different coordinate system than the
341 * client rect does. Specifically, "x" refers to an offset
342 * within the SVG's coordinate system, and the client rect
343 * coordinates are pixels on-screen. To convert between the
344 * two, we can take the "width" attribute of the background
345 * element and compare it to the width of the background
346 * element's client rect. Since the size of the background is
347 * fixed, this should give us a multiplier that turns client recr
348 * distances (what we have) into SVG distances (what we want) */
349 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
351 /* Convert hdelta from client rect to SVG coordinates */
352 const svg_hdelta = hdelta * client_to_svg;
354 /* Since this
<text> element has an "x" attribute it's easier for
355 * us to shift that than it is to mess with the "left" style. */
356 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
359 /*****************************************/
360 /* Next, set up the ticket date and time */
361 /*****************************************/
363 function set_ticket_expiry() {
364 /* There are two parameters, time and date, that we store in one
365 * underlying "date" variable. Default both to an hour and a
366 * half from now. This is what the CharmPass app does for
367 * one-way tickets. */
368 const date = new Date();
370 /* Add an hour and a half. We use the low-level get/setTime to
371 * change the number of milliseconds since the epoch that this
372 * date represents. Obviously correct, and avoids all suspicious
373 * corner cases (well, for a few more decades). */
374 date.setTime(date.getTime() + (
90*
60*
1000));
376 tt = document.getElementById("tickettime");
377 tt.textContent = date.toLocaleTimeString();
379 const td = document.getElementById("ticketdate");
385 td.textContent = date.toLocaleDateString("en-US", dateopts);
389 /*********************************************************/
390 /* Finally, the onclick handler for the night/day switch */
391 /*********************************************************/
393 /* We always start in "day" mode */
397 sky.style.fill = "#efb02f";
400 function set_night() {
401 sky.style.fill = "#
143b66";
404 function swap_colors() {
416 /*****************************************************/
417 /* Add event handlers for all of the functions above */
418 /*****************************************************/
420 /* Center the ticket once when the page has loaded */
421 window.addEventListener("load", center_ticket);
423 /* Re-center the ticket when the window is resized */
424 window.addEventListener("resize", center_ticket);
426 /* Set the service identifier when the page has loaded */
427 window.addEventListener("load", set_service_id);
429 /* Set the service name when the page has loaded */
430 window.addEventListener("load", set_service_name);
432 /* Set the security code text when the page has loaded */
433 window.addEventListener("load", set_code);
435 /* Center the security code text when the page has loaded; in
436 * particular, after we set the code. */
437 window.addEventListener("load", center_code);
439 /* Set the ticket expiration date/time upon page load */
440 window.addEventListener("load", set_ticket_expiry);
442 /* Swap colors when the screen is tapped */
443 document.body.addEventListener("click", swap_colors);