5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
8 href=
"data:image/svg+xml;base64,@FAVICON@" />
11 CharmBypass: got that transit equity
16 /* For consistency with the SVG */
17 font-family: sans-serif;
34 /* Display form errors for the one browser that doesn't support
35 * them natively, mobile Firefox. We use "visibility" to toggle
36 * it on and off, but "display" to hide it completely in non-
37 * stupid web browsers. */
45 /* Set the height to
100% of the screen, which we'll keep; and the
46 * initial position to (
0,
0), which we're going to change
47 * every time the window is resized, because the exact amount
48 * that we have to slide the SVG to the left to get the ticket
49 * into the center will change. */
55 /* Hide everything by default. We only show it once the user has
56 * submitted the menu form */
60 /* The blinking fade in/out animation for the ticket date and time */
67 #tickettime, #ticketdate {
68 /*
300 two-second blinks is ten minutes */
69 animation: blink
2s linear
300;
72 /* Define, load, and specify the custom font we use for the ticket
73 * date, time, and service name. */
75 font-family: "CharmBypass Regular";
77 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
80 #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
81 font-family: "CharmBypass Regular", sans-serif;
85 font-family: "CharmBypass Bold";
87 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
91 font-family: "CharmBypass Bold", sans-serif;
94 /************************/
95 /* Scrolling animations */
96 /************************/
100 from { transform: translateX(
0%); }
101 to { transform: translateX(-
100%); }
105 animation: busroll
15s linear infinite;
110 @keyframes tramroll {
111 from { transform: translateX(
0%); }
112 to { transform: translateX(
100%); }
116 animation: tramroll
15s linear infinite;
121 @keyframes trainroll {
122 from { transform: translateX(
0%); }
123 to { transform: translateX(
100%); }
127 animation: trainroll
10s linear infinite;
132 @keyframes cloudsfloat {
133 from { transform: translateX(
0%); }
134 to { transform: translateX(-
50%); }
138 animation: cloudsfloat
25s linear infinite;
141 @keyframes cloudscopyfloat {
142 from { transform: translateX(
0%); }
143 to { transform: translateX(-
50%); }
147 animation: cloudscopyfloat
25s linear infinite;
152 @keyframes treespass {
153 from { transform: translateX(
0%); }
154 to { transform: translateX(-
50%); }
158 /* The trees move a little faster than the clouds */
159 animation: treespass
16s linear infinite;
162 @keyframes treescopypass {
163 from { transform: translateX(
0%); }
164 to { transform: translateX(-
50%); }
168 /* The trees move a little faster than the clouds */
169 animation: treescopypass
16s linear infinite;
174 @keyframes cityscroll {
175 from { transform: translateX(
0%); }
176 to { transform: translateX(-
50%); }
180 /* The city moves faster than the clouds but slower
182 animation: cityscroll
20s linear infinite;
185 @keyframes citycopyscroll {
186 from { transform: translateX(
0%); }
187 to { transform: translateX(-
50%); }
191 /* The city moves faster than the clouds but slower
193 animation: citycopyscroll
20s linear infinite;
201 <p><strong>got that
<em>transit equity
</em></strong></p>
205 <legend>Local Bus, Light Rail, or Metro
</legend>
208 Daily security code (
<a href=
"https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional
</a>):
216 pattern=
"[a-zA-Z0-9]*" />
218 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
219 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
224 <legend>Commuter Bus
</legend>
225 <input type=
"hidden" name=
"serviceid" value=
"R" />
226 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
230 Daily security code (
<a href=
"https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional
</a>):
238 pattern=
"[a-zA-Z0-9]*" />
242 Zone
<sup>†</sup>:
245 <input type=
"radio" required
249 <label for=
"zone1">Zone
1</label>
252 <input type=
"radio" required
256 <label for=
"zone2">Zone
2</label>
259 <input type=
"radio" required checked
263 <label for=
"zone3">Zone
3</label>
266 <input type=
"radio" required
270 <label for=
"zone4">Zone
4</label>
273 <input type=
"radio" required
277 <label for=
"zone5">Zone
5</label>
280 <input type=
"submit" name=
"go" value=
"Generate Ticket" />
284 On the MTA's PDF schedule for your route
290 <legend>MARC Train
</legend>
294 Daily security code (
<a href=
"https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml#daily-security-code">optional
</a>):
302 pattern=
"[a-zA-Z0-9]*" />
307 <input type=
"radio" required checked
311 <label for=
"origin_BAL">Baltimore/Penn (Penn Line)
</label>
314 <input type=
"radio" required
318 <label for=
"origin_BCA">Baltimore/Camden (Camden Line)
</label>
321 <input type=
"radio" required
325 <label for=
"origin_BWE">Bowie State (Penn Line)
</label>
328 <input type=
"radio" required
332 <label for=
"origin_BWI">BWI Airport (Penn Line)
</label>
335 <input type=
"radio" required
339 <label for=
"origin_CPK">College Park (Camden Line)
</label>
342 <input type=
"radio" required
346 <label for=
"origin_FRC">Frederick (Brunswick Line)
</label>
349 <input type=
"radio" required
353 <label for=
"origin_HAE">Halethorpe (Penn Line)
</label>
356 <input type=
"radio" required
360 <label for=
"origin_SEB">Seabrook (Penn Line)
</label>
363 <input type=
"radio" required
367 <label for=
"origin_WAS">Washington D.C.
</label>
370 <input type=
"radio" required
374 <label for=
"origin_WBL">West Baltimore (Penn Line)
</label>
379 <input type=
"radio" required
383 <label for=
"destination_BAL">Baltimore/Penn (Penn Line)
</label>
386 <input type=
"radio" required
390 <label for=
"destination_BCA">Baltimore/Camden (Camden Line)
</label>
393 <input type=
"radio" required
397 <label for=
"destination_BWE">Bowie State (Penn Line)
</label>
400 <input type=
"radio" required
404 <label for=
"destination_BWI">BWI Airport (Penn Line)
</label>
407 <input type=
"radio" required
411 <label for=
"destination_CPK">College Park (Camden Line)
</label>
414 <input type=
"radio" required
418 <label for=
"destination_FRC">Frederick (Brunswick Line)
</label>
421 <input type=
"radio" required
425 <label for=
"destination_HAE">Halethorpe (Penn Line)
</label>
428 <input type=
"radio" required
432 <label for=
"destination_SEB">Seabrook (Penn Line)
</label>
435 <input type=
"radio" required checked
439 <label for=
"destination_WAS">Washington D.C.
</label>
442 <input type=
"radio" required
446 <label for=
"destination_WBL">West Baltimore (Penn Line)
</label>
449 <p id=
"marc-form-errors">OK
</p>
451 <input type=
"hidden" name=
"serviceid" value=
"R" />
452 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
456 value=
"Generate Ticket" />
465 <a href=
"https://michael.orlitzky.com/articles/charmbypass_pt._1%3A_introduction.xhtml">
470 <a href=
"https://michael.orlitzky.com/articles/charmbypass_pt._2%3A_analysis.xhtml">
482 * Center the ticket within the browser by translating the SVG
483 * until the ticket and the viewport centerlines coincide.
485 function center_ticket() {
486 /* We're relying on the SVG being the full height of the
487 * viewport already, and on the aspect ratio being
488 * preserved. First, find the center of the ticket. */
489 const r = document.getElementById("ticket").getBoundingClientRect();
490 const c = r.left + (r.width /
2);
492 /* That's the center-line of the ticket. We want to move it to
493 * the center-line of the viewport. */
494 const vc = document.documentElement.clientWidth /
2;
496 /* This is how much we need to translate the SVG */
497 const hdelta = vc - c;
499 /* But before we can set the absolute left-coordinate of the
500 * SVG, we need to know where it is now. Note: without the
501 * "px" this doesn't default to pixels like CSS does. */
502 const svg = document.querySelector("svg");
503 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
508 * Set the service identifier from the querystring if it's there.
509 * Otherwise, leave it at the default of "F".
511 function set_service_id() {
512 const sid = document.getElementById("serviceid");
514 /* Get the "serviceid" from the querystring if it's there */
515 const params = new URLSearchParams(document.location.search);
516 if (params.get("serviceid")) {
517 sid.textContent = params.get("serviceid");
523 * Set the service name from the querystring if it's there.
524 * Otherwise, leave it at the default of "BaltimoreLink".
526 function set_service_name() {
527 const sid = document.getElementById("servicename");
529 /* Get the "servicename" from the querystring if it's there */
530 const params = new URLSearchParams(document.location.search);
531 if (params.get("servicename")) {
532 sid.textContent = params.get("servicename");
538 * Set the zone from the given "zone" parameter and then unhide it.
540 function set_zone(zone) {
541 const z = document.getElementById("zone");
543 z.textContent = zone;
544 z.style.display = "block"; /* hidden by default */
549 * Resize the ticket background based on the service name.
550 * The BaltimoreLink, Commuter Bus, and MARC Train tickets
551 * are all different heights and are arranged vertically a
554 * Rather than design three completelty separate tickets and
555 * then have to keep track of which one we're using, I have
556 * instead decided to use one ticket and to reposition it
557 * on-the-fly based on the service name. This is necessarily
558 * a bit ugly because it involves a lot of magic numbers that
559 * can only be explained if you open up inkscape with a CharmPass
560 * screenshot to see where things belong and how to get them there.
562 * The SVG was designed with BaltimoreLink in mind, so this
563 * is a no-op if the service is BaltimoreLink.
565 function resize_ticket() {
566 /* Get the "servicename" from the querystring if it's there */
567 const params = new URLSearchParams(document.location.search);
568 const tbg = document.getElementById("ticketbg");
569 const t = document.getElementById("ticket");
570 const sn = document.getElementById("servicename");
572 if (params.get("servicename") === "Commuter Bus") {
573 /* The top of the background is initially at y=
246.859, and
574 * we scale it by a factor of
1.12 to y=
276.482 for a change
575 * of
29.623. So after we scale it, we translate it upwards
576 * by that amount to put it back where it started. */
577 tbg.setAttribute("transform", "translate(
0 -
29.623) scale(
1 1.12)");
579 /* Now translate the entire ticket up by the magic amount,
1/
5
580 * of the size change we made to the background. This ratio
581 * was found by measuring pixels in side-by-side screenshots
582 * of BaltimoreLink and Commuter Bus tickets. */
583 t.setAttribute("transform", "translate(
0 -
9.33)");
585 /* More magic numbers discovered by comparing the two
586 * tickets overlayed in inkscape */
587 sn.setAttribute("transform", "translate(
0 64.28)");
589 else if (params.get("servicename") === "MARC Train") {
590 /* insane tricks are explained above */
591 tbg.setAttribute("transform",
592 "translate(
0 -
72.378) scale(
1 1.2932)");
593 t.setAttribute("transform", "translate(
0 -
67.17)");
594 sn.setAttribute("transform", "translate(
0 131.0)");
600 * Set the security code from the querystring if it was given;
601 * otherwise generate a random code.
603 function set_code() {
604 const ct = document.getElementById("codetext");
606 /* Get the "code" from the querystring if it's there */
607 const params = new URLSearchParams(document.location.search);
608 if (params.get("code")) {
609 ct.textContent = params.get("code").toUpperCase();
612 /* Otherwise, use a random code */
613 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
614 "A","B","C","D","E","F","G","H","I","J",
615 "K","L","M","N","O","P","Q","R","S","T",
616 "U","V","W","X","Y","Z"];
618 /* Two random ints between
0 and
35 */
619 const i1 = Math.floor(Math.random() *
36);
620 const i2 = Math.floor(Math.random() *
36);
621 const d1 = bucket[i1];
622 const d2 = bucket[i2];
623 ct.textContent = d1 + d2;
629 * Center the security code within its container.
631 * Some codes like "II" and "WW" can take up wildly different
632 * amounts of horizonetal space, but they should always be
633 * centered inside their little red box. This turns out to be
634 * harder than it sounds because we can only find the width of
635 * the code in browser coordinates, whereas its "x" coordinate
636 * is in SVG coordinates. Anyway, we do it.
638 function center_code() {
639 /* Center the security code inside its red box */
640 const ct = document.getElementById("codetext");
641 const bg = document.getElementById("codebg");
643 /* First, find the center of the red box */
644 const r1 = bg.getBoundingClientRect();
645 const c1 = r1.left + (r1.width /
2);
647 /* Now the center of the code text */
648 const r2 = ct.getBoundingClientRect();
649 const c2 = r2.left + (r2.width /
2);
651 /* What do we add to c2 to make it equal to c1? */
652 const hdelta = c1 - c2;
654 /* We've measured everything so far in "client rect"
655 * coordinates, because that's the only available measurement
656 * we have for the width of the
<text> element. But when we
657 * reposition that
<text> element, it will be by adjusting its
658 * "x" attribute, and that attribute uses a different coordinate
659 * system than the client rect does. Specifically, "x" refers to
660 * an offset within the SVG's coordinate system, and the client
661 * rect coordinates are pixels on-screen. To convert between the
662 * two, we can take the "width" attribute of the background
663 * element and compare it to the width of the background
664 * element's client rect. Since the size of the background is
665 * fixed, this should give us a multiplier that turns client rect
666 * distances (what we have) into SVG distances (what we want) */
667 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
669 /* Convert hdelta from client rect to SVG coordinates */
670 const svg_hdelta = hdelta * client_to_svg;
672 /* Since this
<text> element has an "x" attribute it's easier for
673 * us to shift that than it is to mess with the "left" style. */
674 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
678 * Set the ticket's expiration date and time.
680 * BaltimoreLink and MARC Train tickets expire after
90 minutes;
681 * while Commuter Bus tickets expire after
10 minutes.
683 function set_ticket_expiry() {
684 /* There are two parameters, time and date, that we store in one
685 * underlying "date" variable. */
686 const date = new Date();
688 /* BaltimoreLink and MARC Train */
690 const params = new URLSearchParams(document.location.search);
691 if (params.get("servicename") === "Commuter Bus") {
692 /* Commuter bus tickets are only valid for ten minutes */
696 /* We use the low-level get/setTime to change the number of
697 * milliseconds since the epoch that this date represents
698 * Obviously correct, and avoids all suspicious corner cases
699 * for a few more decades. */
700 date.setTime(date.getTime() + (minutes*
60*
1000));
702 tt = document.getElementById("tickettime");
703 tt.textContent = date.toLocaleTimeString();
705 const td = document.getElementById("ticketdate");
711 td.textContent = date.toLocaleDateString("en-US", dateopts);
716 * Swap the day/night sky colors.
718 * We use CSS classes to keep track of the current state because
719 * it's a tiny bit cleaner than a global variable, but for some
720 * reason we can't use those same classes to actually change the
721 * color. (The classes, change, but the color doesn't.) Rather
722 * than waste time trying to explain this, we just set the "fill"
723 * attribute ourselves whenever we swap classes.
725 function swap_day_night() {
726 const sky = document.getElementById("sky");
728 if (sky.getAttribute("class") === "night") {
729 sky.setAttribute("fill", "#efb02f");
730 sky.setAttribute("class", "day");
733 /* Put this case second so that the first time the
734 * screen is tapped (when there are no classes on
735 * the sky element) the color still changes. */
736 sky.setAttribute("fill", "#
143b66");
737 sky.setAttribute("class", "night");
743 * Compute the zone (string) for the given origin/destination pair.
745 * If we don't know it or if you chose in invalid pair (destination
746 * not on the same line as your origin?) then null is returned.
748 function compute_marc_zone(src, dest) {
750 /* Sorted on the first component, then the second.
786 /* Forward direction key for zone_map */
787 const fwd = src +
"_" + dest;
789 /* Reverse direction key for zone_map. The zone_map only
790 * has them listed in one direction, so we check both
791 * directions here. */
792 const rev = dest +
"_" + src;
794 /* The default. Obviously wrong for when we don't
795 * have the necessary data. */
799 zone = zone_map[fwd];
801 else if (zone_map[rev]) {
802 zone = zone_map[rev];
805 /* Convert the number to a string */
822 * Compute and set the zone.
824 * We can be given a zone in two ways. First, on Commuter Bus
825 * tickets, it is given explicitly via the querystring. But
826 * It can also be specified implicitly via the origin and
827 * destination on a MARC Train ticket. Here we try both and
828 * then call set_zone() with the result if something worked.
830 function compute_and_set_zone() {
831 const params = new URLSearchParams(document.location.search);
832 const src = params.get(
"origin");
833 const dest = params.get(
"destination");
836 /* MARC Train. We can assume that compute_marc_zone() doesn't
837 * return null because that's part of our form validation. */
838 const zone = compute_marc_zone(src, dest);
841 else if (params.get(
"zone")) {
843 set_zone(params.get(
"zone"));
849 * Set the origin and destination for the MARC Train if they
850 * were provided, and unhide them if so.
852 function set_marc_origin_destination() {
853 const params = new URLSearchParams(document.location.search);
854 if (!params.get(
"origin") || !params.get(
"destination")) {
858 const src = params.get(
"origin");
859 const dest = params.get(
"destination");
861 /* origindest contains both the origin and destination */
862 const origindest = document.getElementById(
"origindest");
864 const origin = document.getElementById(
"origin");
865 const destination = document.getElementById(
"destination");
867 origin.textContent = params.get(
"origin");
868 destination.textContent = params.get(
"destination");
870 origindest.style.display =
"block"; /* hidden by default */
875 * Hide the menu and display the ticket. This is what happens
876 * when you submit the form.
879 /* To create our
"window" onto the scene, we're going to slide the
880 * SVG off the left-hand side of the screen, and we don't want
881 * scroll bars to appear. */
882 document.body.style.overflow =
"hidden";
883 document.body.style.margin =
"0";
884 document.body.style.padding =
"0";
886 const svg = document.querySelector(
"svg");
887 const menu = document.getElementById(
"menu");
888 svg.style.display =
"initial";
889 menu.style.display =
"none";
893 * Determine if the user agent is mobile Firefox.
895 function ua_is_mobile_ff() {
896 const ua = navigator.userAgent.toLowerCase();
897 return (ua.includes(
"firefox") && ua.includes(
"mobile"));
901 * Validate the MARC form's origin/destination.
903 * We don't want the user to be able to choose a pair of stops that
904 * aren't actually connected by the same MARC line. If we don't have
905 * zone information for the (origin,destination) pair, that indicates
906 * that it's probably not a valid choice; otherwise I would have
907 * filled in the information from the CharmPass app already.
909 * All browsers except mobile Firefox let us call setCustomValidity()
910 * to provide an error message that is displayed if the user tries
911 * to submit invalid choices. But amazingly, mobile Firefox does not:
913 * https://bugzilla.mozilla.org/show_bug.cgi?id=
1510450
915 * Instead we have to work around it (in that one browser) by
916 * showing/hiding a paragraph that we fill with the errors.
918 function validate_origin_destination(event) {
919 const origins = document.getElementsByName(
"origin");
920 const destinations = document.getElementsByName(
"destination");
921 const mfe = document.getElementById(
"marc-form-errors");
922 const marcsubmit = document.getElementById(
"marc-submit");
924 if (ua_is_mobile_ff()) {
925 /* Even though this is only for one browser, empty paragraphs
926 * are handled inconsistently and should be avoided as a rule.
927 * So, we make it say
"OK" before we hide it. */
928 mfe.textContent =
"OK";
929 mfe.style.visibility =
"hidden";
930 marcsubmit.disabled = false;
935 origins.forEach((x) =
> { if (x.checked) src = x; })
936 destinations.forEach((x) =
> {
937 if (x.checked) dest = x;
939 /* clear all errors before possibly setting one */
940 x.setCustomValidity('');
943 if (src.value === dest.value) {
944 let err = "Origin and destination are the same";
945 dest.setCustomValidity(err);
947 if (ua_is_mobile_ff()) {
948 mfe.textContent = err;
949 mfe.style.visibility = "visible";
950 marcsubmit.disabled = true;
953 else if (compute_marc_zone(src.value, dest.value) === null) {
954 let err = "Origin and destination are on different lines";
955 dest.setCustomValidity(err);
957 if (ua_is_mobile_ff()) {
958 mfe.textContent = err;
959 mfe.style.visibility = "visible";
960 marcsubmit.disabled = true;
965 /*****************************************************/
966 /* Add event handlers for all of the functions above */
967 /*****************************************************/
969 const params = new URLSearchParams(document.location.search);
970 if (params.get("go")) {
971 /* First unhide the SVG (swap it with the form) */
972 window.addEventListener("load", go);
974 /* Center the ticket once when the page has loaded */
975 window.addEventListener("load", center_ticket);
977 /* Re-center the ticket when the window is resized */
978 window.addEventListener("resize", center_ticket);
980 /* Set the service identifier when the page has loaded */
981 window.addEventListener("load", set_service_id);
983 /* Set the service name when the page has loaded */
984 window.addEventListener("load", set_service_name);
986 /* Resize the ticket background if necessary */
987 window.addEventListener("load", resize_ticket);
989 /* Set the security code text when the page has loaded */
990 window.addEventListener("load", set_code);
992 /* Center the security code text when the page has loaded; in
993 * particular, after we set the code. */
994 window.addEventListener("load", center_code);
996 /* Set the ticket expiration date/time upon page load */
997 window.addEventListener("load", set_ticket_expiry);
999 /* Set the MARC Train origin and destination, if applicable */
1000 window.addEventListener("load", set_marc_origin_destination);
1002 /* Compute and set the zone, if applicable */
1003 window.addEventListener("load", compute_and_set_zone);
1005 /* Swap colors when the screen is tapped */
1006 document.body.addEventListener("click", swap_day_night);
1009 /* If we haven't submitted the form yet, set up change handlers
1010 * for the origin/destination radio buttons that validate that
1011 * the origin and destination are on the same line. */
1012 document.getElementsByName("origin").forEach(
1013 (x) =
> x.addEventListener("change", validate_origin_destination)
1015 document.getElementsByName("destination").forEach(
1016 (x) =
> x.addEventListener("change", validate_origin_destination)
1019 /* Also do it when the page loads, because firefox likes to
1020 * remember your selection even after the page reloads. */
1021 window.addEventListener("load", validate_origin_destination);
1023 /* Finally, we have to babysit mobile Firefox, who doesn't
1024 * support HTML5 form validation going into
2024. Turn on
1025 * the little form errors paragraph so we can toggle its
1026 * visibility (and make it display the error) when the user
1027 * makes an invalid selection. */
1028 window.addEventListener("load", () =
> {
1029 if (ua_is_mobile_ff()) {
1030 const mfe = document.getElementById("marc-form-errors");
1031 mfe.style.display = "block";