4 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
7 CharmBypass: doing transit equity whether they like it or not
17 /* Set the height to
100% of the screen, which we'll keep; and the
18 * initial position to (
0,
0), which we're going to change
19 * every time the window is resized, because the exact amount
20 * that we have to slide the SVG to the left to get the ticket
21 * into the center will change. */
27 /* Hide everything by default. We only show it once the user has
28 * submitted the menu form */
32 /* The blinking fade in/out animation for the ticket date and time */
45 #tickettime, #ticketdate {
46 /*
300 two-second blinks is ten minutes */
47 animation: blink
2s linear
300;
50 /* Define, load, and specify the custom font we use for the ticket
51 * date, time, and service name. */
53 font-family: "CharmBypass Regular";
55 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
58 #servicename, #tickettime, #ticketdate, #codetext, #zone {
59 font-family: "CharmBypass Regular", sans-serif;
63 font-family: "CharmBypass Bold";
65 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
69 font-family: "CharmBypass Bold", sans-serif;
72 /************************/
73 /* Scrolling animations */
74 /************************/
79 transform: translateX(
0%);
82 transform: translateX(-
100%);
87 animation: busroll
23s linear infinite;
94 transform: translateX(
0%);
97 transform: translateX(
100%);
102 animation: tramroll
17s linear infinite;
107 @keyframes trainroll {
109 transform: translateX(
0%);
112 transform: translateX(
100%);
117 animation: trainroll
11s linear infinite;
122 @keyframes cloudsfloat {
124 transform: translateX(
0%);
127 transform: translateX(-
50%);
132 animation: cloudsfloat
40s linear infinite;
135 @keyframes cloudscopyfloat {
137 transform: translateX(
0%);
140 transform: translateX(-
50%);
145 animation: cloudscopyfloat
40s linear infinite;
150 @keyframes treespass {
152 transform: translateX(
0%);
155 transform: translateX(-
50%);
160 /* The trees move a little faster than the clouds */
161 animation: treespass
30s linear infinite;
164 @keyframes treescopypass {
166 transform: translateX(
0%);
169 transform: translateX(-
50%);
174 /* The trees move a little faster than the clouds */
175 animation: treescopypass
30s linear infinite;
180 @keyframes cityscroll {
182 transform: translateX(
0%);
185 transform: translateX(-
50%);
190 /* The city moves faster than the clouds but slower
192 animation: cityscroll
35s linear infinite;
195 @keyframes citycopyscroll {
197 transform: translateX(
0%);
200 transform: translateX(-
50%);
205 /* The city moves faster than the clouds but slower
207 animation: citycopyscroll
35s linear infinite;
215 <h2>doing transit equity whether they like it or not
</h2>
218 <em>Hint:
</em> If you think the driver or fare inspector will
219 actually check it, the daily security code is the same on a
220 $
2.00 BaltimoreLink ticket as it is on a $
9.00 MARC Train
221 ticket. It's also the same on your friend's phone, or for
222 anyone else in Maryland that day.
227 <legend>BaltimoreLink (Bus, Light Rail, Metro)
</legend>
230 Daily security code (optional):
237 pattern=
"[a-zA-Z0-9]*" />
239 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
240 <input type=
"submit" name=
"go" value=
"Get Ticket" />
245 <legend>Commuter Bus
</legend>
246 <input type=
"hidden" name=
"serviceid" value=
"R" />
247 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
251 Daily security code (optional):
258 pattern=
"[a-zA-Z0-9]*" />
263 <input required
type=
"radio" id=
"zone1" name=
"zone" value=
"Zone 1" />
264 <label for=
"zone1">Zone
1</label>
267 <input required
type=
"radio" id=
"zone2" name=
"zone" value=
"Zone 2" />
268 <label for=
"zone2">Zone
2</label>
271 <input required
type=
"radio" id=
"zone3" name=
"zone" value=
"Zone 3" />
272 <label for=
"zone3">Zone
3</label>
275 <input required
type=
"radio" id=
"zone4" name=
"zone" value=
"Zone 4" />
276 <label for=
"zone4">Zone
4</label>
279 <input required
type=
"radio" id=
"zone5" name=
"zone" value=
"Zone 5" />
280 <label for=
"zone5">Zone
5</label>
283 <input type=
"submit" name=
"go" value=
"Get Ticket" />
288 <legend>MARC Train
</legend>
292 Daily security code (optional):
299 pattern=
"[a-zA-Z0-9]*" />
305 <input required
type=
"radio" id=
"origin1" name=
"origin" value=
"BAL" />
306 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
309 <input required
type=
"radio" id=
"origin2" name=
"origin" value=
"BCA" />
310 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
313 <input required
type=
"radio" id=
"origin3" name=
"origin" value=
"BWE" />
314 <label for=
"origin3">Bowie State (Penn Line)
</label>
317 <input required
type=
"radio" id=
"origin4" name=
"origin" value=
"BWI" />
318 <label for=
"origin4">BWI Airport (Penn Line)
</label>
321 <input required
type=
"radio" id=
"origin5" name=
"origin" value=
"CPK" />
322 <label for=
"origin5">College Park (Camden Line)
</label>
325 <input required
type=
"radio" id=
"origin6" name=
"origin" value=
"SEB" />
326 <label for=
"origin6">Seabrook (Penn Line)
</label>
329 <input required
type=
"radio" id=
"origin7" name=
"origin" value=
"WAS" />
330 <label for=
"origin7">Washington D.C.
</label>
333 <input required
type=
"radio" id=
"origin8" name=
"origin" value=
"WBL" />
334 <label for=
"origin8">West Baltimore (Penn Line)
</label>
339 <input required
type=
"radio" id=
"destination1" name=
"destination" value=
"BAL" />
340 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
343 <input required
type=
"radio" id=
"destination2" name=
"destination" value=
"BCA" />
344 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
347 <input required
type=
"radio" id=
"destination3" name=
"destination" value=
"BWE" />
348 <label for=
"destination3">Bowie State (Penn Line)
</label>
351 <input required
type=
"radio" id=
"destination4" name=
"destination" value=
"BWI" />
352 <label for=
"destination4">BWI Airport (Penn Line)
</label>
355 <input required
type=
"radio" id=
"destination5" name=
"destination" value=
"CPK" />
356 <label for=
"destination5">College Park (Camden Line)
</label>
359 <input required
type=
"radio" id=
"destination6" name=
"destination" value=
"SEB" />
360 <label for=
"destination6">Seabrook (Penn Line)
</label>
363 <input required
type=
"radio" id=
"destination7" name=
"destination" value=
"WAS" />
364 <label for=
"destination7">Washington D.C.
</label>
367 <input required
type=
"radio" id=
"destination8" name=
"destination" value=
"WBL" />
368 <label for=
"destination8">West Baltimore (Penn Line)
</label>
371 <input type=
"hidden" name=
"serviceid" value=
"R" />
372 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
373 <input type=
"submit" name=
"go" value=
"Get Ticket" />
382 /***********************************************/
383 /* First, center the ticket within the browser */
384 /***********************************************/
386 function center_ticket() {
387 /* We're relying on the SVG being the full height of the
388 * viewport already, and on the aspect ratio being
389 * preserved. First, find the center of the ticket. */
390 const r = document.getElementById("ticket").getBoundingClientRect();
391 const c = r.left + (r.width /
2);
393 /* That's the center-line of the ticket. We want to move it to
394 * the center-line of the viewport. */
395 const vc = document.documentElement.clientWidth /
2;
397 /* This is how much we need to translate the SVG */
398 const hdelta = vc - c;
400 /* But before we can set the absolute left-coordinate of the
401 * SVG, we need to know where it is now. Note: without the
402 * "px" this doesn't default to pixels like CSS does. */
403 const svg = document.querySelector("svg");
404 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
408 /******************************/
409 /* Set the service identifier */
410 /******************************/
411 function set_service_id() {
412 const sid = document.getElementById("serviceid");
414 /* Get the "serviceid" from the querystring if it's there */
415 const params = new URLSearchParams(document.location.search);
416 if (params.get("serviceid")) {
417 sid.textContent = params.get("serviceid");
420 /* Otherwise, leave it at "F" */
423 /************************/
424 /* Set the service name */
425 /************************/
426 function set_service_name() {
427 const sid = document.getElementById("servicename");
429 /* Get the "servicename" from the querystring if it's there */
430 const params = new URLSearchParams(document.location.search);
431 if (params.get("servicename")) {
432 sid.textContent = params.get("servicename");
435 /* Otherwise, leave it at "BaltimoreLink" */
439 /************************/
440 /* Set the service zone */
441 /************************/
442 function set_service_zone(zone) {
443 /* We can take the zone as a parameter too; this allows
444 * us to use this function for the (computed) MARC Train
445 * zone and not just the querystring Commuter Bus zone */
446 const z = document.getElementById("zone");
447 const params = new URLSearchParams(document.location.search);
450 z.textContent = zone;
451 z.style.display = "block"; /* It's hidden by default */
453 else if (params.get("zone")) {
454 /* Get the "zone" from the querystring if it's there */
455 z.textContent = params.get("zone");
456 z.style.display = "block"; /* It's hidden by default */
459 /* Otherwise, leave it blank (and hidden) */
462 /***********************************************************/
463 /* Resize the ticket background based on the service name */
464 /***********************************************************/
466 function resize_ticket() {
467 /* Get the "servicename" from the querystring if it's there */
468 const params = new URLSearchParams(document.location.search);
469 const tbg = document.getElementById("ticketbg");
470 const t = document.getElementById("ticket");
471 const sn = document.getElementById("servicename");
473 if (params.get("servicename") == "Commuter Bus") {
474 /* The top of the background is initially at y=
246.859, and
475 * we scale it by a factor of
1.12 to y=
276.482 for a change
476 * of
29.623. So after we scale it, we translate it upwards
477 * by that amount to put it back where it started. */
478 tbg.setAttribute("transform", "translate(
0 -
29.623) scale(
1 1.12)");
480 /* Now translate the entire ticket up by the magic amount,
1/
5
481 * of the size change we made to the background. This ratio
482 * was found by measuring pixels in side-by-side screenshots
483 * of BaltimoreLink and Commuter Bus tickets. */
484 t.setAttribute("transform", "translate(
0 -
9.33)");
486 /* More magic numbers discovered by comparing the two
487 * tickets overlayed in inkscape */
488 sn.setAttribute("transform", "translate(
0 64.28)");
490 else if (params.get("servicename") == "MARC Train") {
491 /* insane tricks are explained above */
492 tbg.setAttribute("transform",
493 "translate(
0 -
72.378) scale(
1 1.2932)");
494 t.setAttribute("transform", "translate(
0 -
67.17)");
495 sn.setAttribute("transform", "translate(
0 131.0)");
498 /* Otherwise, leave it alone. The SVG was designed with the
499 * BaltimoreLink ticket in mind */
502 /****************************************/
503 /* Set and reposition the security code */
504 /****************************************/
506 function set_code() {
507 const ct = document.getElementById("codetext");
509 /* Get the "code" from the querystring if it's there */
510 const params = new URLSearchParams(document.location.search);
511 if (params.get("code")) {
512 ct.textContent = params.get("code").toUpperCase();
515 /* Otherwise, use a random code */
516 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
517 "A","B","C","D","E","F","G","H","I","J",
518 "K","L","M","N","O","P","Q","R","S","T",
519 "U","V","W","X","Y","Z"];
521 /* Two random ints between
0 and
35 */
522 const i1 = Math.floor(Math.random() *
36);
523 const i2 = Math.floor(Math.random() *
36);
524 const d1 = bucket[i1];
525 const d2 = bucket[i2];
526 ct.textContent = d1 + d2;
531 function center_code() {
532 /* Center the security code inside its red box */
533 const ct = document.getElementById("codetext");
534 const bg = document.getElementById("codebg");
536 /* First, find the center of the red box */
537 const r1 = bg.getBoundingClientRect();
538 const c1 = r1.left + (r1.width /
2);
540 /* Now the center of the code text */
541 const r2 = ct.getBoundingClientRect();
542 const c2 = r2.left + (r2.width /
2);
544 /* What do we add to c2 to make it equal to c1? */
545 const hdelta = c1 - c2;
547 /* We've measured everything so far in "client rect"
548 * coordinates, because that's the only available measurement
549 * we have for the width of the
<text> element after futzing
550 * with its contents. But when we reposition that
<text>
551 * element, it will be by adjusting its "x" attribute, and
552 * that attribute uses a different coordinate system than the
553 * client rect does. Specifically, "x" refers to an offset
554 * within the SVG's coordinate system, and the client rect
555 * coordinates are pixels on-screen. To convert between the
556 * two, we can take the "width" attribute of the background
557 * element and compare it to the width of the background
558 * element's client rect. Since the size of the background is
559 * fixed, this should give us a multiplier that turns client recr
560 * distances (what we have) into SVG distances (what we want) */
561 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
563 /* Convert hdelta from client rect to SVG coordinates */
564 const svg_hdelta = hdelta * client_to_svg;
566 /* Since this
<text> element has an "x" attribute it's easier for
567 * us to shift that than it is to mess with the "left" style. */
568 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
571 /*****************************************/
572 /* Next, set up the ticket date and time */
573 /*****************************************/
575 function set_ticket_expiry() {
576 /* There are two parameters, time and date, that we store in one
577 * underlying "date" variable. Default both to an hour and a
578 * half from now. This is what the CharmPass app does for
579 * one-way tickets. */
580 const date = new Date();
582 /* BaltimoreLink and MARC Train are valid for an hour and a half */
584 const params = new URLSearchParams(document.location.search);
585 if (params.get("servicename") == "Commuter Bus") {
586 /* But commuter bus tickets are only valid for ten minutes */
590 /* We use the low-level get/setTime to change the number of
591 * milliseconds since the epoch that this date represents
592 * Obviously correct, and avoids all suspicious corner cases
593 * for a few more decades. */
594 date.setTime(date.getTime() + (minutes*
60*
1000));
596 tt = document.getElementById("tickettime");
597 tt.textContent = date.toLocaleTimeString();
599 const td = document.getElementById("ticketdate");
605 td.textContent = date.toLocaleDateString("en-US", dateopts);
609 /*********************************************************/
610 /* Finally, the onclick handler for the night/day switch */
611 /*********************************************************/
613 /* We always start in "day" mode */
617 sky.style.fill = "#efb02f";
620 function set_night() {
621 sky.style.fill = "#
143b66";
624 function swap_colors() {
636 /*******************************************************/
637 /* Compute the MARC "zone" from its origin/destination */
638 /*******************************************************/
640 /* Sorted on the first component, then the second */
654 /* Compute the zone (string) for the given origin/destination pair.
655 * If we don't know it or if you chose in invalid pair (destination
656 * not on the same line as your origin?) then the empty string is
658 function compute_marc_zone(src, dest) {
659 /* Forward direction key for zone_map */
660 const fwd = src + "_" + dest;
662 /* Reverse direction key for zone_map. The zone_map only
663 * has them listed in one direction, so we check both
664 * directions here. */
665 const rev = dest + "_" + src;
667 /* The default. Obviously wrong for when we don't
668 * have the necessary data. */
672 zone = zone_map[fwd];
674 else if (zone_map[rev]) {
675 zone = zone_map[rev];
678 /* Convert the number to a string */
693 function set_marc_zone() {
694 const params = new URLSearchParams(document.location.search);
695 if (params.get("origin") && params.get("destination")) {
696 const src = params.get("origin");
697 const dest = params.get("destination");
698 const zone = compute_marc_zone(src, dest);
700 set_service_zone(zone);
704 /******************************************/
705 /* Display the ticket (and hide the menu) */
706 /******************************************/
709 /* To create our "window" onto the scene, we're going to slide the
710 * SVG off the left-hand side of the screen, and we don't want
711 * scroll bars to appear. */
712 document.body.style.overflow = "hidden";
713 document.body.style.margin = "
0";
714 document.body.style.padding = "
0";
716 const svg = document.querySelector("svg");
717 const menu = document.getElementById("menu");
718 svg.style.display = "initial";
719 menu.style.display = "none";
722 /*****************************************************/
723 /* Add event handlers for all of the functions above */
724 /*****************************************************/
726 const params = new URLSearchParams(document.location.search);
727 if (params.get("go")) {
728 /* First unhide the SVG (swap it with the form) */
729 window.addEventListener("load", go);
731 /* Center the ticket once when the page has loaded */
732 window.addEventListener("load", center_ticket);
734 /* Re-center the ticket when the window is resized */
735 window.addEventListener("resize", center_ticket);
737 /* Set the service identifier when the page has loaded */
738 window.addEventListener("load", set_service_id);
740 /* Set the service name when the page has loaded */
741 window.addEventListener("load", set_service_name);
743 /* Set the service zone when the page has loaded */
744 window.addEventListener("load", set_service_zone);
746 /* Resize the ticket background if necessary */
747 window.addEventListener("load", resize_ticket);
749 /* Set the security code text when the page has loaded */
750 window.addEventListener("load", set_code);
752 /* Center the security code text when the page has loaded; in
753 * particular, after we set the code. */
754 window.addEventListener("load", center_code);
756 /* Set the ticket expiration date/time upon page load */
757 window.addEventListener("load", set_ticket_expiry);
759 /* Set the MARC Train zone, if applicable */
760 window.addEventListener("load", set_marc_zone);
762 /* Swap colors when the screen is tapped */
763 document.body.addEventListener("click", swap_colors);