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 /* Set the height to
100% of the screen, which we'll keep; and the
31 * initial position to (
0,
0), which we're going to change
32 * every time the window is resized, because the exact amount
33 * that we have to slide the SVG to the left to get the ticket
34 * into the center will change. */
40 /* Hide everything by default. We only show it once the user has
41 * submitted the menu form */
45 /* The blinking fade in/out animation for the ticket date and time */
58 #tickettime, #ticketdate {
59 /*
300 two-second blinks is ten minutes */
60 animation: blink
2s linear
300;
63 /* Define, load, and specify the custom font we use for the ticket
64 * date, time, and service name. */
66 font-family: "CharmBypass Regular";
68 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
71 #servicename, #tickettime, #ticketdate, #codetext {
72 font-family: "CharmBypass Regular", sans-serif;
76 font-family: "CharmBypass Bold";
78 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
82 font-family: "CharmBypass Bold", sans-serif;
86 /************************/
87 /* Scrolling animations */
88 /************************/
93 transform: translateX(
0%);
96 transform: translateX(-
100%);
101 animation: busroll
23s linear infinite;
106 @keyframes tramroll {
108 transform: translateX(
0%);
111 transform: translateX(
100%);
116 animation: tramroll
17s linear infinite;
121 @keyframes trainroll {
123 transform: translateX(
0%);
126 transform: translateX(
100%);
131 animation: trainroll
11s linear infinite;
136 @keyframes cloudsfloat {
138 transform: translateX(
0%);
141 transform: translateX(-
50%);
146 animation: cloudsfloat
40s linear infinite;
149 @keyframes cloudscopyfloat {
151 transform: translateX(
0%);
154 transform: translateX(-
50%);
159 animation: cloudscopyfloat
40s linear infinite;
164 @keyframes treespass {
166 transform: translateX(
0%);
169 transform: translateX(-
50%);
174 /* The trees move a little faster than the clouds */
175 animation: treespass
30s linear infinite;
178 @keyframes treescopypass {
180 transform: translateX(
0%);
183 transform: translateX(-
50%);
188 /* The trees move a little faster than the clouds */
189 animation: treescopypass
30s linear infinite;
194 @keyframes cityscroll {
196 transform: translateX(
0%);
199 transform: translateX(-
50%);
204 /* The city moves faster than the clouds but slower
206 animation: cityscroll
35s linear infinite;
209 @keyframes citycopyscroll {
211 transform: translateX(
0%);
214 transform: translateX(-
50%);
219 /* The city moves faster than the clouds but slower
221 animation: citycopyscroll
35s linear infinite;
230 <legend>BaltimoreLink (Bus, Light Rail, Metro)
</legend>
231 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
232 <input type=
"submit" name=
"go" value=
"Get Ticket" />
237 <legend>Commuter Bus
</legend>
238 <input type=
"hidden" name=
"serviceid" value=
"R" />
239 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
241 <input type=
"radio" id=
"zone1" name=
"zone" value=
"Zone 1" />
242 <label for=
"zone1">Zone
1</label>
245 <input type=
"radio" id=
"zone2" name=
"zone" value=
"Zone 2" />
246 <label for=
"zone2">Zone
2</label>
249 <input type=
"radio" id=
"zone3" name=
"zone" value=
"Zone 3" />
250 <label for=
"zone3">Zone
3</label>
253 <input type=
"radio" id=
"zone4" name=
"zone" value=
"Zone 4" />
254 <label for=
"zone4">Zone
4</label>
257 <input type=
"radio" id=
"zone5" name=
"zone" value=
"Zone 5" />
258 <label for=
"zone5">Zone
5</label>
261 <input type=
"submit" name=
"go" value=
"Get Ticket" />
266 <legend>MARC Train
</legend>
270 <input type=
"radio" id=
"origin1" name=
"origin" value=
"BAL" />
271 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
274 <input type=
"radio" id=
"origin2" name=
"origin" value=
"BCA" />
275 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
278 <input type=
"radio" id=
"origin3" name=
"origin" value=
"BWE" />
279 <label for=
"origin3">Bowie State (Penn Line)
</label>
282 <input type=
"radio" id=
"origin4" name=
"origin" value=
"BWI" />
283 <label for=
"origin4">BWI Airport (Penn Line)
</label>
286 <input type=
"radio" id=
"origin5" name=
"origin" value=
"CPK" />
287 <label for=
"origin5">College Park (Camden Line)
</label>
290 <input type=
"radio" id=
"origin6" name=
"origin" value=
"SEB" />
291 <label for=
"origin6">Seabrook (Penn Line)
</label>
294 <input type=
"radio" id=
"origin7" name=
"origin" value=
"WAS" />
295 <label for=
"origin7">Washington D.C.
</label>
298 <input type=
"radio" id=
"origin8" name=
"origin" value=
"WBL" />
299 <label for=
"origin8">West Baltimore (Penn Line)
</label>
304 <input type=
"radio" id=
"destination1" name=
"destination" value=
"BAL" />
305 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
308 <input type=
"radio" id=
"destination2" name=
"destination" value=
"BCA" />
309 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
312 <input type=
"radio" id=
"destination3" name=
"destination" value=
"BWE" />
313 <label for=
"destination3">Bowie State (Penn Line)
</label>
316 <input type=
"radio" id=
"destination4" name=
"destination" value=
"BWI" />
317 <label for=
"destination4">BWI Airport (Penn Line)
</label>
320 <input type=
"radio" id=
"destination5" name=
"destination" value=
"CPK" />
321 <label for=
"destination5">College Park (Camden Line)
</label>
324 <input type=
"radio" id=
"destination6" name=
"destination" value=
"SEB" />
325 <label for=
"destination6">Seabrook (Penn Line)
</label>
328 <input type=
"radio" id=
"destination7" name=
"destination" value=
"WAS" />
329 <label for=
"destination7">Washington D.C.
</label>
332 <input type=
"radio" id=
"destination8" name=
"destination" value=
"WBL" />
333 <label for=
"destination8">West Baltimore (Penn Line)
</label>
336 <input type=
"hidden" name=
"serviceid" value=
"R" />
337 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
338 <input type=
"submit" name=
"go" value=
"Get Ticket" />
347 /***********************************************/
348 /* First, center the ticket within the browser */
349 /***********************************************/
351 function center_ticket() {
352 /* We're relying on the SVG being the full height of the
353 * viewport already, and on the aspect ratio being
354 * preserved. First, find the center of the ticket. */
355 const r = document.getElementById("ticket").getBoundingClientRect();
356 const c = r.left + (r.width /
2);
358 /* That's the center-line of the ticket. We want to move it to
359 * the center-line of the viewport. */
360 const vc = document.documentElement.clientWidth /
2;
362 /* This is how much we need to translate the SVG */
363 const hdelta = vc - c;
365 /* But before we can set the absolute left-coordinate of the
366 * SVG, we need to know where it is now. Note: without the
367 * "px" this doesn't default to pixels like CSS does. */
368 const svg = document.querySelector("svg");
369 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
373 /******************************/
374 /* Set the service identifier */
375 /******************************/
376 function set_service_id() {
377 const sid = document.getElementById("serviceid");
379 /* Get the "serviceid" from the querystring if it's there */
380 const params = new URLSearchParams(document.location.search);
381 if (params.get("serviceid")) {
382 sid.textContent = params.get("serviceid");
385 /* Otherwise, leave it at "F" */
388 /******************************/
389 /* Set the service name */
390 /******************************/
391 function set_service_name() {
392 const sid = document.getElementById("servicename");
394 /* Get the "servicename" from the querystring if it's there */
395 const params = new URLSearchParams(document.location.search);
396 if (params.get("servicename")) {
397 sid.textContent = params.get("servicename");
400 /* Otherwise, leave it at "BaltimoreLink" */
403 /****************************************/
404 /* Set and reposition the security code */
405 /****************************************/
407 function set_code() {
408 const ct = document.getElementById("codetext");
410 /* Get the "code" from the querystring if it's there */
411 const params = new URLSearchParams(document.location.search);
412 if (params.get("code")) {
413 ct.textContent = params.get("code");
416 /* Otherwise, use a random code */
417 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
418 "A","B","C","D","E","F","G","H","I","J",
419 "K","L","M","N","O","P","Q","R","S","T",
420 "U","V","W","X","Y","Z"];
422 /* Two random ints between
0 and
35 */
423 const i1 = Math.floor(Math.random() *
36);
424 const i2 = Math.floor(Math.random() *
36);
425 const d1 = bucket[i1];
426 const d2 = bucket[i2];
427 ct.textContent = d1 + d2;
432 function center_code() {
433 /* Center the security code inside its red box */
434 const ct = document.getElementById("codetext");
435 const bg = document.getElementById("codebg");
437 /* First, find the center of the red box */
438 const r1 = bg.getBoundingClientRect();
439 const c1 = r1.left + (r1.width /
2);
441 /* Now the center of the code text */
442 const r2 = ct.getBoundingClientRect();
443 const c2 = r2.left + (r2.width /
2);
445 /* What do we add to c2 to make it equal to c1? */
446 const hdelta = c1 - c2;
448 /* We've measured everything so far in "client rect"
449 * coordinates, because that's the only available measurement
450 * we have for the width of the
<text> element after futzing
451 * with its contents. But when we reposition that
<text>
452 * element, it will be by adjusting its "x" attribute, and
453 * that attribute uses a different coordinate system than the
454 * client rect does. Specifically, "x" refers to an offset
455 * within the SVG's coordinate system, and the client rect
456 * coordinates are pixels on-screen. To convert between the
457 * two, we can take the "width" attribute of the background
458 * element and compare it to the width of the background
459 * element's client rect. Since the size of the background is
460 * fixed, this should give us a multiplier that turns client recr
461 * distances (what we have) into SVG distances (what we want) */
462 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
464 /* Convert hdelta from client rect to SVG coordinates */
465 const svg_hdelta = hdelta * client_to_svg;
467 /* Since this
<text> element has an "x" attribute it's easier for
468 * us to shift that than it is to mess with the "left" style. */
469 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
472 /*****************************************/
473 /* Next, set up the ticket date and time */
474 /*****************************************/
476 function set_ticket_expiry() {
477 /* There are two parameters, time and date, that we store in one
478 * underlying "date" variable. Default both to an hour and a
479 * half from now. This is what the CharmPass app does for
480 * one-way tickets. */
481 const date = new Date();
483 /* BaltimoreLink and MARC Train are valid for an hour and a half */
485 const params = new URLSearchParams(document.location.search);
486 if (params.get("servicename") == "Commuter Bus") {
487 /* But commuter bus tickets are only valid for ten minutes */
491 /* We use the low-level get/setTime to change the number of
492 * milliseconds since the epoch that this date represents
493 * Obviously correct, and avoids all suspicious corner cases
494 * for a few more decades. */
495 date.setTime(date.getTime() + (minutes*
60*
1000));
497 tt = document.getElementById("tickettime");
498 tt.textContent = date.toLocaleTimeString();
500 const td = document.getElementById("ticketdate");
506 td.textContent = date.toLocaleDateString("en-US", dateopts);
510 /*********************************************************/
511 /* Finally, the onclick handler for the night/day switch */
512 /*********************************************************/
514 /* We always start in "day" mode */
518 sky.style.fill = "#efb02f";
521 function set_night() {
522 sky.style.fill = "#
143b66";
525 function swap_colors() {
536 /******************************************/
537 /* Display the ticket (and hide the menu) */
538 /******************************************/
541 /* To create our "window" onto the scene, we're going to slide the
542 * SVG off the left-hand side of the screen, and we don't want
543 * scroll bars to appear. */
544 document.body.style.overflow = "hidden";
546 const svg = document.querySelector("svg");
547 const menu = document.getElementById("menu");
548 svg.style.display = "initial";
549 menu.style.display = "none";
552 /*****************************************************/
553 /* Add event handlers for all of the functions above */
554 /*****************************************************/
556 const params = new URLSearchParams(document.location.search);
557 if (params.get("go")) {
558 /* First unhide the SVG (swap it with the form) */
559 window.addEventListener("load", go);
561 /* Center the ticket once when the page has loaded */
562 window.addEventListener("load", center_ticket);
564 /* Re-center the ticket when the window is resized */
565 window.addEventListener("resize", center_ticket);
567 /* Set the service identifier when the page has loaded */
568 window.addEventListener("load", set_service_id);
570 /* Set the service name when the page has loaded */
571 window.addEventListener("load", set_service_name);
573 /* Set the security code text when the page has loaded */
574 window.addEventListener("load", set_code);
576 /* Center the security code text when the page has loaded; in
577 * particular, after we set the code. */
578 window.addEventListener("load", center_code);
580 /* Set the ticket expiration date/time upon page load */
581 window.addEventListener("load", set_ticket_expiry);
583 /* Swap colors when the screen is tapped */
584 document.body.addEventListener("click", swap_colors);