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
16 /* For consistency with the SVG */
17 font-family: sans-serif;
35 /* Set the height to
100% of the screen, which we'll keep; and the
36 * initial position to (
0,
0), which we're going to change
37 * every time the window is resized, because the exact amount
38 * that we have to slide the SVG to the left to get the ticket
39 * into the center will change. */
45 /* Hide everything by default. We only show it once the user has
46 * submitted the menu form */
50 /* The blinking fade in/out animation for the ticket date and time */
57 #tickettime, #ticketdate {
58 /*
300 two-second blinks is ten minutes */
59 animation: blink
2s linear
300;
62 /* Define, load, and specify the custom font we use for the ticket
63 * date, time, and service name. */
65 font-family: "CharmBypass Regular";
67 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
70 #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
71 font-family: "CharmBypass Regular", sans-serif;
75 font-family: "CharmBypass Bold";
77 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
81 font-family: "CharmBypass Bold", sans-serif;
84 /************************/
85 /* Scrolling animations */
86 /************************/
90 from { transform: translateX(
0%); }
91 to { transform: translateX(-
100%); }
95 animation: busroll
23s linear infinite;
100 @keyframes tramroll {
101 from { transform: translateX(
0%); }
102 to { transform: translateX(
100%); }
106 animation: tramroll
17s linear infinite;
111 @keyframes trainroll {
112 from { transform: translateX(
0%); }
113 to { transform: translateX(
100%); }
117 animation: trainroll
11s linear infinite;
122 @keyframes cloudsfloat {
123 from { transform: translateX(
0%); }
124 to { transform: translateX(-
50%); }
128 animation: cloudsfloat
40s linear infinite;
131 @keyframes cloudscopyfloat {
132 from { transform: translateX(
0%); }
133 to { transform: translateX(-
50%); }
137 animation: cloudscopyfloat
40s linear infinite;
142 @keyframes treespass {
143 from { transform: translateX(
0%); }
144 to { transform: translateX(-
50%); }
148 /* The trees move a little faster than the clouds */
149 animation: treespass
30s linear infinite;
152 @keyframes treescopypass {
153 from { transform: translateX(
0%); }
154 to { transform: translateX(-
50%); }
158 /* The trees move a little faster than the clouds */
159 animation: treescopypass
30s linear infinite;
164 @keyframes cityscroll {
165 from { transform: translateX(
0%); }
166 to { transform: translateX(-
50%); }
170 /* The city moves faster than the clouds but slower
172 animation: cityscroll
35s linear infinite;
175 @keyframes citycopyscroll {
176 from { transform: translateX(
0%); }
177 to { transform: translateX(-
50%); }
181 /* The city moves faster than the clouds but slower
183 animation: citycopyscroll
35s linear infinite;
191 <h2>it's transit equity y'all
</h2>
194 <em>Hint:
</em> If you think the driver or fare inspector will
195 actually check it, the daily security code is the same on a
196 $
2.00 BaltimoreLink ticket as it is on a $
9.00 MARC Train
197 ticket. It's also the same on your friend's phone, or for
198 anyone else in Maryland that day.
203 <legend>Local Bus, Light Rail, or Metro
</legend>
206 Daily security code (optional):
214 pattern=
"[a-zA-Z0-9]*" />
216 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
217 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
222 <legend>Commuter Bus
</legend>
223 <input type=
"hidden" name=
"serviceid" value=
"R" />
224 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
228 Daily security code (optional):
236 pattern=
"[a-zA-Z0-9]*" />
241 <input type=
"radio" required
245 <label for=
"zone1">Zone
1</label>
248 <input type=
"radio" required
252 <label for=
"zone2">Zone
2</label>
255 <input type=
"radio" required checked
259 <label for=
"zone3">Zone
3</label>
262 <input type=
"radio" required
266 <label for=
"zone4">Zone
4</label>
269 <input type=
"radio" required
273 <label for=
"zone5">Zone
5</label>
276 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
281 <legend>MARC Train
</legend>
285 Daily security code (optional):
293 pattern=
"[a-zA-Z0-9]*" />
298 <input type=
"radio" required checked
302 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
305 <input type=
"radio" required
309 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
312 <input type=
"radio" required
316 <label for=
"origin3">Bowie State (Penn Line)
</label>
319 <input type=
"radio" required
323 <label for=
"origin4">BWI Airport (Penn Line)
</label>
326 <input type=
"radio" required
330 <label for=
"origin5">College Park (Camden Line)
</label>
333 <input type=
"radio" required
337 <label for=
"origin6">Seabrook (Penn Line)
</label>
340 <input type=
"radio" required
344 <label for=
"origin7">Washington D.C.
</label>
347 <input type=
"radio" required
351 <label for=
"origin8">West Baltimore (Penn Line)
</label>
356 <input type=
"radio" required
360 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
363 <input type=
"radio" required
367 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
370 <input type=
"radio" required
374 <label for=
"destination3">Bowie State (Penn Line)
</label>
377 <input type=
"radio" required
381 <label for=
"destination4">BWI Airport (Penn Line)
</label>
384 <input type=
"radio" required
388 <label for=
"destination5">College Park (Camden Line)
</label>
391 <input type=
"radio" required
395 <label for=
"destination6">Seabrook (Penn Line)
</label>
398 <input type=
"radio" required checked
402 <label for=
"destination7">Washington D.C.
</label>
405 <input type=
"radio" required
409 <label for=
"destination8">West Baltimore (Penn Line)
</label>
412 <input type=
"hidden" name=
"serviceid" value=
"R" />
413 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
414 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
424 * Center the ticket within the browser by translating the SVG
425 * until the ticket and the viewport centerlines coincide.
427 function center_ticket() {
428 /* We're relying on the SVG being the full height of the
429 * viewport already, and on the aspect ratio being
430 * preserved. First, find the center of the ticket. */
431 const r = document.getElementById("ticket").getBoundingClientRect();
432 const c = r.left + (r.width /
2);
434 /* That's the center-line of the ticket. We want to move it to
435 * the center-line of the viewport. */
436 const vc = document.documentElement.clientWidth /
2;
438 /* This is how much we need to translate the SVG */
439 const hdelta = vc - c;
441 /* But before we can set the absolute left-coordinate of the
442 * SVG, we need to know where it is now. Note: without the
443 * "px" this doesn't default to pixels like CSS does. */
444 const svg = document.querySelector("svg");
445 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
450 * Set the service identifier from the querystring if it's there.
451 * Otherwise, leave it at the default of "F".
453 function set_service_id() {
454 const sid = document.getElementById("serviceid");
456 /* Get the "serviceid" from the querystring if it's there */
457 const params = new URLSearchParams(document.location.search);
458 if (params.get("serviceid")) {
459 sid.textContent = params.get("serviceid");
465 * Set the service name from the querystring if it's there.
466 * Otherwise, leave it at the default of "BaltimoreLink".
468 function set_service_name() {
469 const sid = document.getElementById("servicename");
471 /* Get the "servicename" from the querystring if it's there */
472 const params = new URLSearchParams(document.location.search);
473 if (params.get("servicename")) {
474 sid.textContent = params.get("servicename");
480 * Set the zone from the given "zone" parameter and then unhide it.
482 function set_zone(zone) {
483 const z = document.getElementById("zone");
485 z.textContent = zone;
486 z.style.display = "block"; /* hidden by default */
491 * Resize the ticket background based on the service name.
492 * The BaltimoreLink, Commuter Bus, and MARC Train tickets
493 * are all different heights and are arranged vertically a
496 * Rather than design three completelty separate tickets and
497 * then have to keep track of which one we're using, I have
498 * instead decided to use one ticket and to reposition it
499 * on-the-fly based on the service name. This is necessarily
500 * a bit ugly because it involves a lot of magic numbers that
501 * can only be explained if you open up inkscape with a CharmPass
502 * screenshot to see where things belong and how to get them there.
504 * The SVG was designed with BaltimoreLink in mind, so this
505 * is a no-op if the service is BaltimoreLink.
507 function resize_ticket() {
508 /* Get the "servicename" from the querystring if it's there */
509 const params = new URLSearchParams(document.location.search);
510 const tbg = document.getElementById("ticketbg");
511 const t = document.getElementById("ticket");
512 const sn = document.getElementById("servicename");
514 if (params.get("servicename") === "Commuter Bus") {
515 /* The top of the background is initially at y=
246.859, and
516 * we scale it by a factor of
1.12 to y=
276.482 for a change
517 * of
29.623. So after we scale it, we translate it upwards
518 * by that amount to put it back where it started. */
519 tbg.setAttribute("transform", "translate(
0 -
29.623) scale(
1 1.12)");
521 /* Now translate the entire ticket up by the magic amount,
1/
5
522 * of the size change we made to the background. This ratio
523 * was found by measuring pixels in side-by-side screenshots
524 * of BaltimoreLink and Commuter Bus tickets. */
525 t.setAttribute("transform", "translate(
0 -
9.33)");
527 /* More magic numbers discovered by comparing the two
528 * tickets overlayed in inkscape */
529 sn.setAttribute("transform", "translate(
0 64.28)");
531 else if (params.get("servicename") === "MARC Train") {
532 /* insane tricks are explained above */
533 tbg.setAttribute("transform",
534 "translate(
0 -
72.378) scale(
1 1.2932)");
535 t.setAttribute("transform", "translate(
0 -
67.17)");
536 sn.setAttribute("transform", "translate(
0 131.0)");
542 * Set the security code from the querystring if it was given;
543 * otherwise generate a random code.
545 function set_code() {
546 const ct = document.getElementById("codetext");
548 /* Get the "code" from the querystring if it's there */
549 const params = new URLSearchParams(document.location.search);
550 if (params.get("code")) {
551 ct.textContent = params.get("code").toUpperCase();
554 /* Otherwise, use a random code */
555 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
556 "A","B","C","D","E","F","G","H","I","J",
557 "K","L","M","N","O","P","Q","R","S","T",
558 "U","V","W","X","Y","Z"];
560 /* Two random ints between
0 and
35 */
561 const i1 = Math.floor(Math.random() *
36);
562 const i2 = Math.floor(Math.random() *
36);
563 const d1 = bucket[i1];
564 const d2 = bucket[i2];
565 ct.textContent = d1 + d2;
571 * Center the security code within its container.
573 * Some codes like "II" and "WW" can take up wildly different
574 * amounts of horizonetal space, but they should always be
575 * centered inside their little red box. This turns out to be
576 * harder than it sounds because we can only find the width of
577 * the code in browser coordinates, whereas its "x" coordinate
578 * is in SVG coordinates. Anyway, we do it.
580 function center_code() {
581 /* Center the security code inside its red box */
582 const ct = document.getElementById("codetext");
583 const bg = document.getElementById("codebg");
585 /* First, find the center of the red box */
586 const r1 = bg.getBoundingClientRect();
587 const c1 = r1.left + (r1.width /
2);
589 /* Now the center of the code text */
590 const r2 = ct.getBoundingClientRect();
591 const c2 = r2.left + (r2.width /
2);
593 /* What do we add to c2 to make it equal to c1? */
594 const hdelta = c1 - c2;
596 /* We've measured everything so far in "client rect"
597 * coordinates, because that's the only available measurement
598 * we have for the width of the
<text> element. But when we
599 * reposition that
<text> element, it will be by adjusting its
600 * "x" attribute, and that attribute uses a different coordinate
601 * system than the client rect does. Specifically, "x" refers to
602 * an offset within the SVG's coordinate system, and the client
603 * rect coordinates are pixels on-screen. To convert between the
604 * two, we can take the "width" attribute of the background
605 * element and compare it to the width of the background
606 * element's client rect. Since the size of the background is
607 * fixed, this should give us a multiplier that turns client rect
608 * distances (what we have) into SVG distances (what we want) */
609 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
611 /* Convert hdelta from client rect to SVG coordinates */
612 const svg_hdelta = hdelta * client_to_svg;
614 /* Since this
<text> element has an "x" attribute it's easier for
615 * us to shift that than it is to mess with the "left" style. */
616 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
620 * Set the ticket's expiration date and time.
622 * BaltimoreLink and MARC Train tickets expire after
90 minutes;
623 * while Commuter Bus tickets expire after
10 minutes.
625 function set_ticket_expiry() {
626 /* There are two parameters, time and date, that we store in one
627 * underlying "date" variable. */
628 const date = new Date();
630 /* BaltimoreLink and MARC Train */
632 const params = new URLSearchParams(document.location.search);
633 if (params.get("servicename") === "Commuter Bus") {
634 /* Commuter bus tickets are only valid for ten minutes */
638 /* We use the low-level get/setTime to change the number of
639 * milliseconds since the epoch that this date represents
640 * Obviously correct, and avoids all suspicious corner cases
641 * for a few more decades. */
642 date.setTime(date.getTime() + (minutes*
60*
1000));
644 tt = document.getElementById("tickettime");
645 tt.textContent = date.toLocaleTimeString();
647 const td = document.getElementById("ticketdate");
653 td.textContent = date.toLocaleDateString("en-US", dateopts);
658 * Swap the day/night sky colors.
660 * We use CSS classes to keep track of the current state because
661 * it's a tiny bit cleaner than a global variable, but for some
662 * reason we can't use those same classes to actually change the
663 * color. (The classes, change, but the color doesn't.) Rather
664 * than waste time trying to explain this, we just set the "fill"
665 * attribute ourselves whenever we swap classes.
667 function swap_day_night() {
668 const sky = document.getElementById("sky");
670 if (sky.getAttribute("class") === "night") {
671 sky.setAttribute("fill", "#efb02f");
672 sky.setAttribute("class", "day");
675 /* Put this case second so that the first time the
676 * screen is tapped (when there are no classes on
677 * the sky element) the color still changes. */
678 sky.setAttribute("fill", "#
143b66");
679 sky.setAttribute("class", "night");
685 * Compute the zone (string) for the given origin/destination pair.
687 * If we don't know it or if you chose in invalid pair (destination
688 * not on the same line as your origin?) then null is returned.
690 function compute_marc_zone(src, dest) {
692 /* Sorted on the first component, then the second */
709 /* Forward direction key for zone_map */
710 const fwd = src + "_" + dest;
712 /* Reverse direction key for zone_map. The zone_map only
713 * has them listed in one direction, so we check both
714 * directions here. */
715 const rev = dest + "_" + src;
717 /* The default. Obviously wrong for when we don't
718 * have the necessary data. */
722 zone = zone_map[fwd];
724 else if (zone_map[rev]) {
725 zone = zone_map[rev];
728 /* Convert the number to a string */
745 * Compute and set the zone.
747 * We can be given a zone in two ways. First, on Commuter Bus
748 * tickets, it is given explicitly via the querystring. But
749 * It can also be specified implicitly via the origin and
750 * destination on a MARC Train ticket. Here we try both and
751 * then call set_zone() with the result if something worked.
753 function compute_and_set_zone() {
754 const params = new URLSearchParams(document.location.search);
755 const src = params.get("origin");
756 const dest = params.get("destination");
759 /* MARC Train. We can assume that compute_marc_zone() doesn't
760 * return null because that's part of our form validation. */
761 const zone = compute_marc_zone(src, dest);
764 else if (params.get("zone")) {
766 set_zone(params.get("zone"));
772 * Set the origin and destination for the MARC Train if they
773 * were provided, and unhide them if so.
775 function set_marc_origin_destination() {
776 const params = new URLSearchParams(document.location.search);
777 if (!params.get("origin") || !params.get("destination")) {
781 const src = params.get("origin");
782 const dest = params.get("destination");
784 /* origindest contains both the origin and destination */
785 const origindest = document.getElementById("origindest");
787 const origin = document.getElementById("origin");
788 const destination = document.getElementById("destination");
790 origin.textContent = params.get("origin");
791 destination.textContent = params.get("destination");
793 origindest.style.display = "block"; /* hidden by default */
798 * Hide the menu and display the ticket. This is what happens
799 * when you submit the form.
802 /* To create our "window" onto the scene, we're going to slide the
803 * SVG off the left-hand side of the screen, and we don't want
804 * scroll bars to appear. */
805 document.body.style.overflow = "hidden";
806 document.body.style.margin = "
0";
807 document.body.style.padding = "
0";
809 const svg = document.querySelector("svg");
810 const menu = document.getElementById("menu");
811 svg.style.display = "initial";
812 menu.style.display = "none";
816 * Validate the MARC form's origin/destination.
818 * We don't want the user to be able to choose a pair of stops that
819 * aren't actually connected by the same MARC line. If we don't have
820 * zone information for the (origin,destination) pair, that indicates
821 * that it's probably not a valid choice; otherwise I would have
822 * filled in the information from the CharmPass app already.
824 function validate_origin_destination(event) {
825 const origins = document.getElementsByName("origin");
826 const destinations = document.getElementsByName("destination");
830 origins.forEach((x) =
> { if (x.checked) src = x; })
831 destinations.forEach((x) =
> {
832 if (x.checked) dest = x;
834 /* clear all errors before possibly setting one */
835 x.setCustomValidity('');
838 if (src.value === dest.value) {
839 let err = "Origin and destination are the same!";
840 dest.setCustomValidity(err);
842 else if (compute_marc_zone(src.value, dest.value) === null) {
843 let err = "Origin and destination are on different lines!";
844 dest.setCustomValidity(err);
848 /*****************************************************/
849 /* Add event handlers for all of the functions above */
850 /*****************************************************/
852 const params = new URLSearchParams(document.location.search);
853 if (params.get("go")) {
854 /* First unhide the SVG (swap it with the form) */
855 window.addEventListener("load", go);
857 /* Center the ticket once when the page has loaded */
858 window.addEventListener("load", center_ticket);
860 /* Re-center the ticket when the window is resized */
861 window.addEventListener("resize", center_ticket);
863 /* Set the service identifier when the page has loaded */
864 window.addEventListener("load", set_service_id);
866 /* Set the service name when the page has loaded */
867 window.addEventListener("load", set_service_name);
869 /* Resize the ticket background if necessary */
870 window.addEventListener("load", resize_ticket);
872 /* Set the security code text when the page has loaded */
873 window.addEventListener("load", set_code);
875 /* Center the security code text when the page has loaded; in
876 * particular, after we set the code. */
877 window.addEventListener("load", center_code);
879 /* Set the ticket expiration date/time upon page load */
880 window.addEventListener("load", set_ticket_expiry);
882 /* Set the MARC Train origin and destination, if applicable */
883 window.addEventListener("load", set_marc_origin_destination);
885 /* Compute and set the zone, if applicable */
886 window.addEventListener("load", compute_and_set_zone);
888 /* Swap colors when the screen is tapped */
889 document.body.addEventListener("click", swap_day_night);
892 /* If we haven't submitted the form yet, set up change handlers
893 * for the origin/destination radio buttons that validate that
894 * the origin and destination are on the same line. */
895 document.getElementsByName("origin").forEach(
896 (x) =
> x.addEventListener("change", validate_origin_destination)
898 document.getElementsByName("destination").forEach(
899 (x) =
> x.addEventListener("change", validate_origin_destination)
902 /* Also do it when the page loads, because firefox likes to
903 * remember your selection even after the page reloads. */
904 window.addEventListener("load", validate_origin_destination);