4 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
7 CharmBypass: you're getting transit equity whether you like it
18 /* Set the height to
100% of the screen, which we'll keep; and the
19 * initial position to (
0,
0), which we're going to change
20 * every time the window is resized, because the exact amount
21 * that we have to slide the SVG to the left to get the ticket
22 * into the center will change. */
28 /* Hide everything by default. We only show it once the user has
29 * submitted the menu form */
33 /* The blinking fade in/out animation for the ticket date and time */
46 #tickettime, #ticketdate {
47 /*
300 two-second blinks is ten minutes */
48 animation: blink
2s linear
300;
51 /* Define, load, and specify the custom font we use for the ticket
52 * date, time, and service name. */
54 font-family: "CharmBypass Regular";
56 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
59 #servicename, #tickettime, #ticketdate, #codetext {
60 font-family: "CharmBypass Regular", sans-serif;
64 font-family: "CharmBypass Bold";
66 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
70 font-family: "CharmBypass Bold", sans-serif;
74 /************************/
75 /* Scrolling animations */
76 /************************/
81 transform: translateX(
0%);
84 transform: translateX(-
100%);
89 animation: busroll
23s linear infinite;
96 transform: translateX(
0%);
99 transform: translateX(
100%);
104 animation: tramroll
17s linear infinite;
109 @keyframes trainroll {
111 transform: translateX(
0%);
114 transform: translateX(
100%);
119 animation: trainroll
11s linear infinite;
124 @keyframes cloudsfloat {
126 transform: translateX(
0%);
129 transform: translateX(-
50%);
134 animation: cloudsfloat
40s linear infinite;
137 @keyframes cloudscopyfloat {
139 transform: translateX(
0%);
142 transform: translateX(-
50%);
147 animation: cloudscopyfloat
40s linear infinite;
152 @keyframes treespass {
154 transform: translateX(
0%);
157 transform: translateX(-
50%);
162 /* The trees move a little faster than the clouds */
163 animation: treespass
30s linear infinite;
166 @keyframes treescopypass {
168 transform: translateX(
0%);
171 transform: translateX(-
50%);
176 /* The trees move a little faster than the clouds */
177 animation: treescopypass
30s linear infinite;
182 @keyframes cityscroll {
184 transform: translateX(
0%);
187 transform: translateX(-
50%);
192 /* The city moves faster than the clouds but slower
194 animation: cityscroll
35s linear infinite;
197 @keyframes citycopyscroll {
199 transform: translateX(
0%);
202 transform: translateX(-
50%);
207 /* The city moves faster than the clouds but slower
209 animation: citycopyscroll
35s linear infinite;
217 <h2>you're getting transit equity whether you like it or not
</h2>
220 <legend>BaltimoreLink (Bus, Light Rail, Metro)
</legend>
221 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
222 <input type=
"submit" name=
"go" value=
"Get Ticket" />
227 <legend>Commuter Bus
</legend>
228 <input type=
"hidden" name=
"serviceid" value=
"R" />
229 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
233 <input type=
"radio" id=
"zone1" name=
"zone" value=
"Zone 1" />
234 <label for=
"zone1">Zone
1</label>
237 <input type=
"radio" id=
"zone2" name=
"zone" value=
"Zone 2" />
238 <label for=
"zone2">Zone
2</label>
241 <input type=
"radio" id=
"zone3" name=
"zone" value=
"Zone 3" />
242 <label for=
"zone3">Zone
3</label>
245 <input type=
"radio" id=
"zone4" name=
"zone" value=
"Zone 4" />
246 <label for=
"zone4">Zone
4</label>
249 <input type=
"radio" id=
"zone5" name=
"zone" value=
"Zone 5" />
250 <label for=
"zone5">Zone
5</label>
253 <input type=
"submit" name=
"go" value=
"Get Ticket" />
258 <legend>MARC Train
</legend>
263 <input type=
"radio" id=
"origin1" name=
"origin" value=
"BAL" />
264 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
267 <input type=
"radio" id=
"origin2" name=
"origin" value=
"BCA" />
268 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
271 <input type=
"radio" id=
"origin3" name=
"origin" value=
"BWE" />
272 <label for=
"origin3">Bowie State (Penn Line)
</label>
275 <input type=
"radio" id=
"origin4" name=
"origin" value=
"BWI" />
276 <label for=
"origin4">BWI Airport (Penn Line)
</label>
279 <input type=
"radio" id=
"origin5" name=
"origin" value=
"CPK" />
280 <label for=
"origin5">College Park (Camden Line)
</label>
283 <input type=
"radio" id=
"origin6" name=
"origin" value=
"SEB" />
284 <label for=
"origin6">Seabrook (Penn Line)
</label>
287 <input type=
"radio" id=
"origin7" name=
"origin" value=
"WAS" />
288 <label for=
"origin7">Washington D.C.
</label>
291 <input type=
"radio" id=
"origin8" name=
"origin" value=
"WBL" />
292 <label for=
"origin8">West Baltimore (Penn Line)
</label>
297 <input type=
"radio" id=
"destination1" name=
"destination" value=
"BAL" />
298 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
301 <input type=
"radio" id=
"destination2" name=
"destination" value=
"BCA" />
302 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
305 <input type=
"radio" id=
"destination3" name=
"destination" value=
"BWE" />
306 <label for=
"destination3">Bowie State (Penn Line)
</label>
309 <input type=
"radio" id=
"destination4" name=
"destination" value=
"BWI" />
310 <label for=
"destination4">BWI Airport (Penn Line)
</label>
313 <input type=
"radio" id=
"destination5" name=
"destination" value=
"CPK" />
314 <label for=
"destination5">College Park (Camden Line)
</label>
317 <input type=
"radio" id=
"destination6" name=
"destination" value=
"SEB" />
318 <label for=
"destination6">Seabrook (Penn Line)
</label>
321 <input type=
"radio" id=
"destination7" name=
"destination" value=
"WAS" />
322 <label for=
"destination7">Washington D.C.
</label>
325 <input type=
"radio" id=
"destination8" name=
"destination" value=
"WBL" />
326 <label for=
"destination8">West Baltimore (Penn Line)
</label>
329 <input type=
"hidden" name=
"serviceid" value=
"R" />
330 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
331 <input type=
"submit" name=
"go" value=
"Get Ticket" />
340 /***********************************************/
341 /* First, center the ticket within the browser */
342 /***********************************************/
344 function center_ticket() {
345 /* We're relying on the SVG being the full height of the
346 * viewport already, and on the aspect ratio being
347 * preserved. First, find the center of the ticket. */
348 const r = document.getElementById("ticket").getBoundingClientRect();
349 const c = r.left + (r.width /
2);
351 /* That's the center-line of the ticket. We want to move it to
352 * the center-line of the viewport. */
353 const vc = document.documentElement.clientWidth /
2;
355 /* This is how much we need to translate the SVG */
356 const hdelta = vc - c;
358 /* But before we can set the absolute left-coordinate of the
359 * SVG, we need to know where it is now. Note: without the
360 * "px" this doesn't default to pixels like CSS does. */
361 const svg = document.querySelector("svg");
362 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
366 /******************************/
367 /* Set the service identifier */
368 /******************************/
369 function set_service_id() {
370 const sid = document.getElementById("serviceid");
372 /* Get the "serviceid" from the querystring if it's there */
373 const params = new URLSearchParams(document.location.search);
374 if (params.get("serviceid")) {
375 sid.textContent = params.get("serviceid");
378 /* Otherwise, leave it at "F" */
381 /******************************/
382 /* Set the service name */
383 /******************************/
384 function set_service_name() {
385 const sid = document.getElementById("servicename");
387 /* Get the "servicename" from the querystring if it's there */
388 const params = new URLSearchParams(document.location.search);
389 if (params.get("servicename")) {
390 sid.textContent = params.get("servicename");
393 /* Otherwise, leave it at "BaltimoreLink" */
396 /****************************************/
397 /* Set and reposition the security code */
398 /****************************************/
400 function set_code() {
401 const ct = document.getElementById("codetext");
403 /* Get the "code" from the querystring if it's there */
404 const params = new URLSearchParams(document.location.search);
405 if (params.get("code")) {
406 ct.textContent = params.get("code");
409 /* Otherwise, use a random code */
410 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
411 "A","B","C","D","E","F","G","H","I","J",
412 "K","L","M","N","O","P","Q","R","S","T",
413 "U","V","W","X","Y","Z"];
415 /* Two random ints between
0 and
35 */
416 const i1 = Math.floor(Math.random() *
36);
417 const i2 = Math.floor(Math.random() *
36);
418 const d1 = bucket[i1];
419 const d2 = bucket[i2];
420 ct.textContent = d1 + d2;
425 function center_code() {
426 /* Center the security code inside its red box */
427 const ct = document.getElementById("codetext");
428 const bg = document.getElementById("codebg");
430 /* First, find the center of the red box */
431 const r1 = bg.getBoundingClientRect();
432 const c1 = r1.left + (r1.width /
2);
434 /* Now the center of the code text */
435 const r2 = ct.getBoundingClientRect();
436 const c2 = r2.left + (r2.width /
2);
438 /* What do we add to c2 to make it equal to c1? */
439 const hdelta = c1 - c2;
441 /* We've measured everything so far in "client rect"
442 * coordinates, because that's the only available measurement
443 * we have for the width of the
<text> element after futzing
444 * with its contents. But when we reposition that
<text>
445 * element, it will be by adjusting its "x" attribute, and
446 * that attribute uses a different coordinate system than the
447 * client rect does. Specifically, "x" refers to an offset
448 * within the SVG's coordinate system, and the client rect
449 * coordinates are pixels on-screen. To convert between the
450 * two, we can take the "width" attribute of the background
451 * element and compare it to the width of the background
452 * element's client rect. Since the size of the background is
453 * fixed, this should give us a multiplier that turns client recr
454 * distances (what we have) into SVG distances (what we want) */
455 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
457 /* Convert hdelta from client rect to SVG coordinates */
458 const svg_hdelta = hdelta * client_to_svg;
460 /* Since this
<text> element has an "x" attribute it's easier for
461 * us to shift that than it is to mess with the "left" style. */
462 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
465 /*****************************************/
466 /* Next, set up the ticket date and time */
467 /*****************************************/
469 function set_ticket_expiry() {
470 /* There are two parameters, time and date, that we store in one
471 * underlying "date" variable. Default both to an hour and a
472 * half from now. This is what the CharmPass app does for
473 * one-way tickets. */
474 const date = new Date();
476 /* BaltimoreLink and MARC Train are valid for an hour and a half */
478 const params = new URLSearchParams(document.location.search);
479 if (params.get("servicename") == "Commuter Bus") {
480 /* But commuter bus tickets are only valid for ten minutes */
484 /* We use the low-level get/setTime to change the number of
485 * milliseconds since the epoch that this date represents
486 * Obviously correct, and avoids all suspicious corner cases
487 * for a few more decades. */
488 date.setTime(date.getTime() + (minutes*
60*
1000));
490 tt = document.getElementById("tickettime");
491 tt.textContent = date.toLocaleTimeString();
493 const td = document.getElementById("ticketdate");
499 td.textContent = date.toLocaleDateString("en-US", dateopts);
503 /*********************************************************/
504 /* Finally, the onclick handler for the night/day switch */
505 /*********************************************************/
507 /* We always start in "day" mode */
511 sky.style.fill = "#efb02f";
514 function set_night() {
515 sky.style.fill = "#
143b66";
518 function swap_colors() {
530 /*******************************************************/
531 /* Compute the MARC "zone" from its origin/destination */
532 /*******************************************************/
534 /* Sorted on the first component, then the second */
548 /* The default. Obviously wrong for when we don't
549 * have the necessary data. */
552 function compute_marc_zone(src, dest) {
553 /* Forward direction key for zone_map */
554 const fwd = src + "_" + dest;
556 /* Reverse direction key for zone_map. The zone_map only
557 * has them listed in one direction, so we check both
558 * directions here. */
559 const rev = dest + "_" + src;
562 zone = zone_map[fwd];
564 else if (zone_map[rev]) {
565 zone = zone_map[rev];
568 /* Convert the number to a string */
583 function set_marc_zone() {
584 const params = new URLSearchParams(document.location.search);
585 if (params.get("origin") && params.get("destination")) {
586 const src = params.get("origin");
587 const dest = params.get("destination");
588 const zone = compute_marc_zone(src, dest);
590 /* TODO: actually set the zone */
595 /******************************************/
596 /* Display the ticket (and hide the menu) */
597 /******************************************/
600 /* To create our "window" onto the scene, we're going to slide the
601 * SVG off the left-hand side of the screen, and we don't want
602 * scroll bars to appear. */
603 document.body.style.overflow = "hidden";
604 document.body.style.margin = "
0";
605 document.body.style.padding = "
0";
607 const svg = document.querySelector("svg");
608 const menu = document.getElementById("menu");
609 svg.style.display = "initial";
610 menu.style.display = "none";
613 /*****************************************************/
614 /* Add event handlers for all of the functions above */
615 /*****************************************************/
617 const params = new URLSearchParams(document.location.search);
618 if (params.get("go")) {
619 /* First unhide the SVG (swap it with the form) */
620 window.addEventListener("load", go);
622 /* Center the ticket once when the page has loaded */
623 window.addEventListener("load", center_ticket);
625 /* Re-center the ticket when the window is resized */
626 window.addEventListener("resize", center_ticket);
628 /* Set the service identifier when the page has loaded */
629 window.addEventListener("load", set_service_id);
631 /* Set the service name when the page has loaded */
632 window.addEventListener("load", set_service_name);
634 /* Set the security code text when the page has loaded */
635 window.addEventListener("load", set_code);
637 /* Center the security code text when the page has loaded; in
638 * particular, after we set the code. */
639 window.addEventListener("load", center_code);
641 /* Set the ticket expiration date/time upon page load */
642 window.addEventListener("load", set_ticket_expiry);
644 /* Set the MARC Train zone, if applicable */
645 window.addEventListener("load", set_marc_zone);
647 /* Swap colors when the screen is tapped */
648 document.body.addEventListener("click", swap_colors);