5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
8 href=
"data:image/svg+xml;base64,@FAVICON@" />
11 CharmBypass: it's transit equity y'all
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 */
52 #tickettime, #ticketdate {
53 /*
300 two-second blinks is ten minutes */
54 animation: blink
2s linear
300;
57 /* Define, load, and specify the custom font we use for the ticket
58 * date, time, and service name. */
60 font-family: "CharmBypass Regular";
62 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
65 #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
66 font-family: "CharmBypass Regular", sans-serif;
70 font-family: "CharmBypass Bold";
72 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
76 font-family: "CharmBypass Bold", sans-serif;
79 /************************/
80 /* Scrolling animations */
81 /************************/
85 from { transform: translateX(
0%); }
86 to { transform: translateX(-
100%); }
90 animation: busroll
23s linear infinite;
96 from { transform: translateX(
0%); }
97 to { transform: translateX(
100%); }
101 animation: tramroll
17s linear infinite;
106 @keyframes trainroll {
107 from { transform: translateX(
0%); }
108 to { transform: translateX(
100%); }
112 animation: trainroll
11s linear infinite;
117 @keyframes cloudsfloat {
118 from { transform: translateX(
0%); }
119 to { transform: translateX(-
50%); }
123 animation: cloudsfloat
40s linear infinite;
126 @keyframes cloudscopyfloat {
127 from { transform: translateX(
0%); }
128 to { transform: translateX(-
50%); }
132 animation: cloudscopyfloat
40s linear infinite;
137 @keyframes treespass {
138 from { transform: translateX(
0%); }
139 to { transform: translateX(-
50%); }
143 /* The trees move a little faster than the clouds */
144 animation: treespass
30s linear infinite;
147 @keyframes treescopypass {
148 from { transform: translateX(
0%); }
149 to { transform: translateX(-
50%); }
153 /* The trees move a little faster than the clouds */
154 animation: treescopypass
30s linear infinite;
159 @keyframes cityscroll {
160 from { transform: translateX(
0%); }
161 to { transform: translateX(-
50%); }
165 /* The city moves faster than the clouds but slower
167 animation: cityscroll
35s linear infinite;
170 @keyframes citycopyscroll {
171 from { transform: translateX(
0%); }
172 to { transform: translateX(-
50%); }
176 /* The city moves faster than the clouds but slower
178 animation: citycopyscroll
35s linear infinite;
186 <h2>it's transit equity y'all
</h2>
189 <em>Hint:
</em> If you think the driver or fare inspector will
190 actually check it, the daily security code is the same on a
191 $
2.00 BaltimoreLink ticket as it is on a $
9.00 MARC Train
192 ticket. It's also the same on your friend's phone, or for
193 anyone else in Maryland that day.
198 <legend>Local Bus, Light Rail, or Metro
</legend>
201 Daily security code (optional):
209 pattern=
"[a-zA-Z0-9]*" />
211 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
212 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
217 <legend>Commuter Bus
</legend>
218 <input type=
"hidden" name=
"serviceid" value=
"R" />
219 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
223 Daily security code (optional):
231 pattern=
"[a-zA-Z0-9]*" />
236 <input type=
"radio" required
240 <label for=
"zone1">Zone
1</label>
243 <input type=
"radio" required
247 <label for=
"zone2">Zone
2</label>
250 <input type=
"radio" required checked
254 <label for=
"zone3">Zone
3</label>
257 <input type=
"radio" required
261 <label for=
"zone4">Zone
4</label>
264 <input type=
"radio" required
268 <label for=
"zone5">Zone
5</label>
271 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
276 <legend>MARC Train
</legend>
280 Daily security code (optional):
288 pattern=
"[a-zA-Z0-9]*" />
293 <input type=
"radio" required checked
297 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
300 <input type=
"radio" required
304 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
307 <input type=
"radio" required
311 <label for=
"origin3">Bowie State (Penn Line)
</label>
314 <input type=
"radio" required
318 <label for=
"origin4">BWI Airport (Penn Line)
</label>
321 <input type=
"radio" required
325 <label for=
"origin5">College Park (Camden Line)
</label>
328 <input type=
"radio" required
332 <label for=
"origin6">Seabrook (Penn Line)
</label>
335 <input type=
"radio" required
339 <label for=
"origin7">Washington D.C.
</label>
342 <input type=
"radio" required
346 <label for=
"origin8">West Baltimore (Penn Line)
</label>
351 <input type=
"radio" required
355 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
358 <input type=
"radio" required
362 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
365 <input type=
"radio" required
369 <label for=
"destination3">Bowie State (Penn Line)
</label>
372 <input type=
"radio" required
376 <label for=
"destination4">BWI Airport (Penn Line)
</label>
379 <input type=
"radio" required
383 <label for=
"destination5">College Park (Camden Line)
</label>
386 <input type=
"radio" required
390 <label for=
"destination6">Seabrook (Penn Line)
</label>
393 <input type=
"radio" required checked
397 <label for=
"destination7">Washington D.C.
</label>
400 <input type=
"radio" required
404 <label for=
"destination8">West Baltimore (Penn Line)
</label>
407 <input type=
"hidden" name=
"serviceid" value=
"R" />
408 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
409 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
419 * Center the ticket within the browser by translating the SVG
420 * until the ticket and the viewport centerlines coincide.
422 function center_ticket() {
423 /* We're relying on the SVG being the full height of the
424 * viewport already, and on the aspect ratio being
425 * preserved. First, find the center of the ticket. */
426 const r = document.getElementById("ticket").getBoundingClientRect();
427 const c = r.left + (r.width /
2);
429 /* That's the center-line of the ticket. We want to move it to
430 * the center-line of the viewport. */
431 const vc = document.documentElement.clientWidth /
2;
433 /* This is how much we need to translate the SVG */
434 const hdelta = vc - c;
436 /* But before we can set the absolute left-coordinate of the
437 * SVG, we need to know where it is now. Note: without the
438 * "px" this doesn't default to pixels like CSS does. */
439 const svg = document.querySelector("svg");
440 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
445 * Set the service identifier from the querystring if it's there.
446 * Otherwise, leave it at the default of "F".
448 function set_service_id() {
449 const sid = document.getElementById("serviceid");
451 /* Get the "serviceid" from the querystring if it's there */
452 const params = new URLSearchParams(document.location.search);
453 if (params.get("serviceid")) {
454 sid.textContent = params.get("serviceid");
460 * Set the service name from the querystring if it's there.
461 * Otherwise, leave it at the default of "BaltimoreLink".
463 function set_service_name() {
464 const sid = document.getElementById("servicename");
466 /* Get the "servicename" from the querystring if it's there */
467 const params = new URLSearchParams(document.location.search);
468 if (params.get("servicename")) {
469 sid.textContent = params.get("servicename");
475 * Set the zone from the given "zone" parameter and then unhide it.
477 function set_zone(zone) {
478 const z = document.getElementById("zone");
480 z.textContent = zone;
481 z.style.display = "block"; /* hidden by default */
486 * Resize the ticket background based on the service name.
487 * The BaltimoreLink, Commuter Bus, and MARC Train tickets
488 * are all different heights and are arranged vertically a
491 * Rather than design three completelty separate tickets and
492 * then have to keep track of which one we're using, I have
493 * instead decided to use one ticket and to reposition it
494 * on-the-fly based on the service name. This is necessarily
495 * a bit ugly because it involves a lot of magic numbers that
496 * can only be explained if you open up inkscape with a CharmPass
497 * screenshot to see where things belong and how to get them there.
499 * The SVG was designed with BaltimoreLink in mind, so this
500 * is a no-op if the service is BaltimoreLink.
502 function resize_ticket() {
503 /* Get the "servicename" from the querystring if it's there */
504 const params = new URLSearchParams(document.location.search);
505 const tbg = document.getElementById("ticketbg");
506 const t = document.getElementById("ticket");
507 const sn = document.getElementById("servicename");
509 if (params.get("servicename") === "Commuter Bus") {
510 /* The top of the background is initially at y=
246.859, and
511 * we scale it by a factor of
1.12 to y=
276.482 for a change
512 * of
29.623. So after we scale it, we translate it upwards
513 * by that amount to put it back where it started. */
514 tbg.setAttribute("transform", "translate(
0 -
29.623) scale(
1 1.12)");
516 /* Now translate the entire ticket up by the magic amount,
1/
5
517 * of the size change we made to the background. This ratio
518 * was found by measuring pixels in side-by-side screenshots
519 * of BaltimoreLink and Commuter Bus tickets. */
520 t.setAttribute("transform", "translate(
0 -
9.33)");
522 /* More magic numbers discovered by comparing the two
523 * tickets overlayed in inkscape */
524 sn.setAttribute("transform", "translate(
0 64.28)");
526 else if (params.get("servicename") === "MARC Train") {
527 /* insane tricks are explained above */
528 tbg.setAttribute("transform",
529 "translate(
0 -
72.378) scale(
1 1.2932)");
530 t.setAttribute("transform", "translate(
0 -
67.17)");
531 sn.setAttribute("transform", "translate(
0 131.0)");
537 * Set the security code from the querystring if it was given;
538 * otherwise generate a random code.
540 function set_code() {
541 const ct = document.getElementById("codetext");
543 /* Get the "code" from the querystring if it's there */
544 const params = new URLSearchParams(document.location.search);
545 if (params.get("code")) {
546 ct.textContent = params.get("code").toUpperCase();
549 /* Otherwise, use a random code */
550 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
551 "A","B","C","D","E","F","G","H","I","J",
552 "K","L","M","N","O","P","Q","R","S","T",
553 "U","V","W","X","Y","Z"];
555 /* Two random ints between
0 and
35 */
556 const i1 = Math.floor(Math.random() *
36);
557 const i2 = Math.floor(Math.random() *
36);
558 const d1 = bucket[i1];
559 const d2 = bucket[i2];
560 ct.textContent = d1 + d2;
566 * Center the security code within its container.
568 * Some codes like "II" and "WW" can take up wildly different
569 * amounts of horizonetal space, but they should always be
570 * centered inside their little red box. This turns out to be
571 * harder than it sounds because we can only find the width of
572 * the code in browser coordinates, whereas its "x" coordinate
573 * is in SVG coordinates. Anyway, we do it.
575 function center_code() {
576 /* Center the security code inside its red box */
577 const ct = document.getElementById("codetext");
578 const bg = document.getElementById("codebg");
580 /* First, find the center of the red box */
581 const r1 = bg.getBoundingClientRect();
582 const c1 = r1.left + (r1.width /
2);
584 /* Now the center of the code text */
585 const r2 = ct.getBoundingClientRect();
586 const c2 = r2.left + (r2.width /
2);
588 /* What do we add to c2 to make it equal to c1? */
589 const hdelta = c1 - c2;
591 /* We've measured everything so far in "client rect"
592 * coordinates, because that's the only available measurement
593 * we have for the width of the
<text> element. But when we
594 * reposition that
<text> element, it will be by adjusting its
595 * "x" attribute, and that attribute uses a different coordinate
596 * system than the client rect does. Specifically, "x" refers to
597 * an offset within the SVG's coordinate system, and the client
598 * rect coordinates are pixels on-screen. To convert between the
599 * two, we can take the "width" attribute of the background
600 * element and compare it to the width of the background
601 * element's client rect. Since the size of the background is
602 * fixed, this should give us a multiplier that turns client rect
603 * distances (what we have) into SVG distances (what we want) */
604 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
606 /* Convert hdelta from client rect to SVG coordinates */
607 const svg_hdelta = hdelta * client_to_svg;
609 /* Since this
<text> element has an "x" attribute it's easier for
610 * us to shift that than it is to mess with the "left" style. */
611 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
615 * Set the ticket's expiration date and time.
617 * BaltimoreLink and MARC Train tickets expire after
90 minutes;
618 * while Commuter Bus tickets expire after
10 minutes.
620 function set_ticket_expiry() {
621 /* There are two parameters, time and date, that we store in one
622 * underlying "date" variable. */
623 const date = new Date();
625 /* BaltimoreLink and MARC Train */
627 const params = new URLSearchParams(document.location.search);
628 if (params.get("servicename") === "Commuter Bus") {
629 /* Commuter bus tickets are only valid for ten minutes */
633 /* We use the low-level get/setTime to change the number of
634 * milliseconds since the epoch that this date represents
635 * Obviously correct, and avoids all suspicious corner cases
636 * for a few more decades. */
637 date.setTime(date.getTime() + (minutes*
60*
1000));
639 tt = document.getElementById("tickettime");
640 tt.textContent = date.toLocaleTimeString();
642 const td = document.getElementById("ticketdate");
648 td.textContent = date.toLocaleDateString("en-US", dateopts);
653 * Swap the day/night sky colors.
655 * We use CSS classes to keep track of the current state because
656 * it's a tiny bit cleaner than a global variable, but for some
657 * reason we can't use those same classes to actually change the
658 * color. (The classes, change, but the color doesn't.) Rather
659 * than waste time trying to explain this, we just set the "fill"
660 * attribute ourselves whenever we swap classes.
662 function swap_day_night() {
663 const sky = document.getElementById("sky");
665 if (sky.getAttribute("class") === "night") {
666 sky.setAttribute("fill", "#efb02f");
667 sky.setAttribute("class", "day");
670 /* Put this case second so that the first time the
671 * screen is tapped (when there are no classes on
672 * the sky element) the color still changes. */
673 sky.setAttribute("fill", "#
143b66");
674 sky.setAttribute("class", "night");
680 * Compute the zone (string) for the given origin/destination pair.
682 * If we don't know it or if you chose in invalid pair (destination
683 * not on the same line as your origin?) then the empty string is
686 function compute_marc_zone(src, dest) {
688 /* Sorted on the first component, then the second */
705 /* Forward direction key for zone_map */
706 const fwd = src + "_" + dest;
708 /* Reverse direction key for zone_map. The zone_map only
709 * has them listed in one direction, so we check both
710 * directions here. */
711 const rev = dest + "_" + src;
713 /* The default. Obviously wrong for when we don't
714 * have the necessary data. */
718 zone = zone_map[fwd];
720 else if (zone_map[rev]) {
721 zone = zone_map[rev];
724 /* Convert the number to a string */
741 * Compute and set the zone.
743 * We can be given a zone in two ways. First, on Commuter Bus
744 * tickets, it is given explicitly via the querystring. But
745 * It can also be specified implicitly via the origin and
746 * destination on a MARC Train ticket. Here we try both and
747 * then call set_zone() with the result if something worked.
749 function compute_and_set_zone() {
750 const params = new URLSearchParams(document.location.search);
751 const src = params.get("origin");
752 const dest = params.get("destination");
756 const zone = compute_marc_zone(src, dest);
759 else if (params.get("zone")) {
761 set_zone(params.get("zone"));
767 * Set the origin and destination for the MARC Train if they
768 * were provided, and unhide them if so.
770 function set_marc_origin_destination() {
771 const params = new URLSearchParams(document.location.search);
772 if (!params.get("origin") || !params.get("destination")) {
776 const src = params.get("origin");
777 const dest = params.get("destination");
779 /* origindest contains both the origin and destination */
780 const origindest = document.getElementById("origindest");
782 const origin = document.getElementById("origin");
783 const destination = document.getElementById("destination");
785 origin.textContent = params.get("origin");
786 destination.textContent = params.get("destination");
788 origindest.style.display = "block"; /* hidden by default */
793 * Hide the menu and display the ticket. This is what happens
794 * when you submit the form.
797 /* To create our "window" onto the scene, we're going to slide the
798 * SVG off the left-hand side of the screen, and we don't want
799 * scroll bars to appear. */
800 document.body.style.overflow = "hidden";
801 document.body.style.margin = "
0";
802 document.body.style.padding = "
0";
804 const svg = document.querySelector("svg");
805 const menu = document.getElementById("menu");
806 svg.style.display = "initial";
807 menu.style.display = "none";
811 /*****************************************************/
812 /* Add event handlers for all of the functions above */
813 /*****************************************************/
815 const params = new URLSearchParams(document.location.search);
816 if (params.get("go")) {
817 /* First unhide the SVG (swap it with the form) */
818 window.addEventListener("load", go);
820 /* Center the ticket once when the page has loaded */
821 window.addEventListener("load", center_ticket);
823 /* Re-center the ticket when the window is resized */
824 window.addEventListener("resize", center_ticket);
826 /* Set the service identifier when the page has loaded */
827 window.addEventListener("load", set_service_id);
829 /* Set the service name when the page has loaded */
830 window.addEventListener("load", set_service_name);
832 /* Resize the ticket background if necessary */
833 window.addEventListener("load", resize_ticket);
835 /* Set the security code text when the page has loaded */
836 window.addEventListener("load", set_code);
838 /* Center the security code text when the page has loaded; in
839 * particular, after we set the code. */
840 window.addEventListener("load", center_code);
842 /* Set the ticket expiration date/time upon page load */
843 window.addEventListener("load", set_ticket_expiry);
845 /* Set the MARC Train origin and destination, if applicable */
846 window.addEventListener("load", set_marc_origin_destination);
848 /* Compute and set the zone, if applicable */
849 window.addEventListener("load", compute_and_set_zone);
851 /* Swap colors when the screen is tapped */
852 document.body.addEventListener("click", swap_day_night);