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 {
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;
73 /************************/
74 /* Scrolling animations */
75 /************************/
80 transform: translateX(
0%);
83 transform: translateX(-
100%);
88 animation: busroll
23s linear infinite;
95 transform: translateX(
0%);
98 transform: translateX(
100%);
103 animation: tramroll
17s linear infinite;
108 @keyframes trainroll {
110 transform: translateX(
0%);
113 transform: translateX(
100%);
118 animation: trainroll
11s linear infinite;
123 @keyframes cloudsfloat {
125 transform: translateX(
0%);
128 transform: translateX(-
50%);
133 animation: cloudsfloat
40s linear infinite;
136 @keyframes cloudscopyfloat {
138 transform: translateX(
0%);
141 transform: translateX(-
50%);
146 animation: cloudscopyfloat
40s linear infinite;
151 @keyframes treespass {
153 transform: translateX(
0%);
156 transform: translateX(-
50%);
161 /* The trees move a little faster than the clouds */
162 animation: treespass
30s linear infinite;
165 @keyframes treescopypass {
167 transform: translateX(
0%);
170 transform: translateX(-
50%);
175 /* The trees move a little faster than the clouds */
176 animation: treescopypass
30s linear infinite;
181 @keyframes cityscroll {
183 transform: translateX(
0%);
186 transform: translateX(-
50%);
191 /* The city moves faster than the clouds but slower
193 animation: cityscroll
35s linear infinite;
196 @keyframes citycopyscroll {
198 transform: translateX(
0%);
201 transform: translateX(-
50%);
206 /* The city moves faster than the clouds but slower
208 animation: citycopyscroll
35s linear infinite;
216 <h2>doing transit equity whether they like it or not
</h2>
219 <em>Hint:
</em> If you think the driver or fare inspector will
220 actually check it, the daily security code is the same on a
221 $
2.00 BaltimoreLink ticket as it is on a $
9.00 MARC Train
222 ticket. It's also the same on your friend's phone, or for
223 anyone else in Maryland that day.
228 <legend>BaltimoreLink (Bus, Light Rail, Metro)
</legend>
231 Daily security code (optional):
238 pattern=
"[a-zA-Z0-9]+" />
240 <input type=
"hidden" name=
"servicename" value=
"BaltimoreLink" />
241 <input type=
"submit" name=
"go" value=
"Get Ticket" />
246 <legend>Commuter Bus
</legend>
247 <input type=
"hidden" name=
"serviceid" value=
"R" />
248 <input type=
"hidden" name=
"servicename" value=
"Commuter Bus" />
252 Daily security code (optional):
259 pattern=
"[a-zA-Z0-9]+" />
264 <input required
type=
"radio" id=
"zone1" name=
"zone" value=
"Zone 1" />
265 <label for=
"zone1">Zone
1</label>
268 <input required
type=
"radio" id=
"zone2" name=
"zone" value=
"Zone 2" />
269 <label for=
"zone2">Zone
2</label>
272 <input required
type=
"radio" id=
"zone3" name=
"zone" value=
"Zone 3" />
273 <label for=
"zone3">Zone
3</label>
276 <input required
type=
"radio" id=
"zone4" name=
"zone" value=
"Zone 4" />
277 <label for=
"zone4">Zone
4</label>
280 <input required
type=
"radio" id=
"zone5" name=
"zone" value=
"Zone 5" />
281 <label for=
"zone5">Zone
5</label>
284 <input type=
"submit" name=
"go" value=
"Get Ticket" />
289 <legend>MARC Train
</legend>
293 Daily security code (optional):
300 pattern=
"[a-zA-Z0-9]+" />
306 <input required
type=
"radio" id=
"origin1" name=
"origin" value=
"BAL" />
307 <label for=
"origin1">Baltimore/Penn (Penn Line)
</label>
310 <input required
type=
"radio" id=
"origin2" name=
"origin" value=
"BCA" />
311 <label for=
"origin2">Baltimore/Camden (Camden Line)
</label>
314 <input required
type=
"radio" id=
"origin3" name=
"origin" value=
"BWE" />
315 <label for=
"origin3">Bowie State (Penn Line)
</label>
318 <input required
type=
"radio" id=
"origin4" name=
"origin" value=
"BWI" />
319 <label for=
"origin4">BWI Airport (Penn Line)
</label>
322 <input required
type=
"radio" id=
"origin5" name=
"origin" value=
"CPK" />
323 <label for=
"origin5">College Park (Camden Line)
</label>
326 <input required
type=
"radio" id=
"origin6" name=
"origin" value=
"SEB" />
327 <label for=
"origin6">Seabrook (Penn Line)
</label>
330 <input required
type=
"radio" id=
"origin7" name=
"origin" value=
"WAS" />
331 <label for=
"origin7">Washington D.C.
</label>
334 <input required
type=
"radio" id=
"origin8" name=
"origin" value=
"WBL" />
335 <label for=
"origin8">West Baltimore (Penn Line)
</label>
340 <input required
type=
"radio" id=
"destination1" name=
"destination" value=
"BAL" />
341 <label for=
"destination1">Baltimore/Penn (Penn Line)
</label>
344 <input required
type=
"radio" id=
"destination2" name=
"destination" value=
"BCA" />
345 <label for=
"destination2">Baltimore/Camden (Camden Line)
</label>
348 <input required
type=
"radio" id=
"destination3" name=
"destination" value=
"BWE" />
349 <label for=
"destination3">Bowie State (Penn Line)
</label>
352 <input required
type=
"radio" id=
"destination4" name=
"destination" value=
"BWI" />
353 <label for=
"destination4">BWI Airport (Penn Line)
</label>
356 <input required
type=
"radio" id=
"destination5" name=
"destination" value=
"CPK" />
357 <label for=
"destination5">College Park (Camden Line)
</label>
360 <input required
type=
"radio" id=
"destination6" name=
"destination" value=
"SEB" />
361 <label for=
"destination6">Seabrook (Penn Line)
</label>
364 <input required
type=
"radio" id=
"destination7" name=
"destination" value=
"WAS" />
365 <label for=
"destination7">Washington D.C.
</label>
368 <input required
type=
"radio" id=
"destination8" name=
"destination" value=
"WBL" />
369 <label for=
"destination8">West Baltimore (Penn Line)
</label>
372 <input type=
"hidden" name=
"serviceid" value=
"R" />
373 <input type=
"hidden" name=
"servicename" value=
"MARC Train" />
374 <input type=
"submit" name=
"go" value=
"Get Ticket" />
383 /***********************************************/
384 /* First, center the ticket within the browser */
385 /***********************************************/
387 function center_ticket() {
388 /* We're relying on the SVG being the full height of the
389 * viewport already, and on the aspect ratio being
390 * preserved. First, find the center of the ticket. */
391 const r = document.getElementById("ticket").getBoundingClientRect();
392 const c = r.left + (r.width /
2);
394 /* That's the center-line of the ticket. We want to move it to
395 * the center-line of the viewport. */
396 const vc = document.documentElement.clientWidth /
2;
398 /* This is how much we need to translate the SVG */
399 const hdelta = vc - c;
401 /* But before we can set the absolute left-coordinate of the
402 * SVG, we need to know where it is now. Note: without the
403 * "px" this doesn't default to pixels like CSS does. */
404 const svg = document.querySelector("svg");
405 svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
409 /******************************/
410 /* Set the service identifier */
411 /******************************/
412 function set_service_id() {
413 const sid = document.getElementById("serviceid");
415 /* Get the "serviceid" from the querystring if it's there */
416 const params = new URLSearchParams(document.location.search);
417 if (params.get("serviceid")) {
418 sid.textContent = params.get("serviceid");
421 /* Otherwise, leave it at "F" */
424 /******************************/
425 /* Set the service name */
426 /******************************/
427 function set_service_name() {
428 const sid = document.getElementById("servicename");
430 /* Get the "servicename" from the querystring if it's there */
431 const params = new URLSearchParams(document.location.search);
432 if (params.get("servicename")) {
433 sid.textContent = params.get("servicename");
436 /* Otherwise, leave it at "BaltimoreLink" */
439 /****************************************/
440 /* Set and reposition the security code */
441 /****************************************/
443 function set_code() {
444 const ct = document.getElementById("codetext");
446 /* Get the "code" from the querystring if it's there */
447 const params = new URLSearchParams(document.location.search);
448 if (params.get("code")) {
449 ct.textContent = params.get("code").toUpperCase();
452 /* Otherwise, use a random code */
453 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
454 "A","B","C","D","E","F","G","H","I","J",
455 "K","L","M","N","O","P","Q","R","S","T",
456 "U","V","W","X","Y","Z"];
458 /* Two random ints between
0 and
35 */
459 const i1 = Math.floor(Math.random() *
36);
460 const i2 = Math.floor(Math.random() *
36);
461 const d1 = bucket[i1];
462 const d2 = bucket[i2];
463 ct.textContent = d1 + d2;
468 function center_code() {
469 /* Center the security code inside its red box */
470 const ct = document.getElementById("codetext");
471 const bg = document.getElementById("codebg");
473 /* First, find the center of the red box */
474 const r1 = bg.getBoundingClientRect();
475 const c1 = r1.left + (r1.width /
2);
477 /* Now the center of the code text */
478 const r2 = ct.getBoundingClientRect();
479 const c2 = r2.left + (r2.width /
2);
481 /* What do we add to c2 to make it equal to c1? */
482 const hdelta = c1 - c2;
484 /* We've measured everything so far in "client rect"
485 * coordinates, because that's the only available measurement
486 * we have for the width of the
<text> element after futzing
487 * with its contents. But when we reposition that
<text>
488 * element, it will be by adjusting its "x" attribute, and
489 * that attribute uses a different coordinate system than the
490 * client rect does. Specifically, "x" refers to an offset
491 * within the SVG's coordinate system, and the client rect
492 * coordinates are pixels on-screen. To convert between the
493 * two, we can take the "width" attribute of the background
494 * element and compare it to the width of the background
495 * element's client rect. Since the size of the background is
496 * fixed, this should give us a multiplier that turns client recr
497 * distances (what we have) into SVG distances (what we want) */
498 const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
500 /* Convert hdelta from client rect to SVG coordinates */
501 const svg_hdelta = hdelta * client_to_svg;
503 /* Since this
<text> element has an "x" attribute it's easier for
504 * us to shift that than it is to mess with the "left" style. */
505 ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
508 /*****************************************/
509 /* Next, set up the ticket date and time */
510 /*****************************************/
512 function set_ticket_expiry() {
513 /* There are two parameters, time and date, that we store in one
514 * underlying "date" variable. Default both to an hour and a
515 * half from now. This is what the CharmPass app does for
516 * one-way tickets. */
517 const date = new Date();
519 /* BaltimoreLink and MARC Train are valid for an hour and a half */
521 const params = new URLSearchParams(document.location.search);
522 if (params.get("servicename") == "Commuter Bus") {
523 /* But commuter bus tickets are only valid for ten minutes */
527 /* We use the low-level get/setTime to change the number of
528 * milliseconds since the epoch that this date represents
529 * Obviously correct, and avoids all suspicious corner cases
530 * for a few more decades. */
531 date.setTime(date.getTime() + (minutes*
60*
1000));
533 tt = document.getElementById("tickettime");
534 tt.textContent = date.toLocaleTimeString();
536 const td = document.getElementById("ticketdate");
542 td.textContent = date.toLocaleDateString("en-US", dateopts);
546 /*********************************************************/
547 /* Finally, the onclick handler for the night/day switch */
548 /*********************************************************/
550 /* We always start in "day" mode */
554 sky.style.fill = "#efb02f";
557 function set_night() {
558 sky.style.fill = "#
143b66";
561 function swap_colors() {
573 /*******************************************************/
574 /* Compute the MARC "zone" from its origin/destination */
575 /*******************************************************/
577 /* Sorted on the first component, then the second */
591 /* Compute the zone (string) for the given origin/destination pair.
592 * If we don't know it or if you chose in invalid pair (destination
593 * not on the same line as your origin?) then the empty string is
595 function compute_marc_zone(src, dest) {
596 /* Forward direction key for zone_map */
597 const fwd = src + "_" + dest;
599 /* Reverse direction key for zone_map. The zone_map only
600 * has them listed in one direction, so we check both
601 * directions here. */
602 const rev = dest + "_" + src;
604 /* The default. Obviously wrong for when we don't
605 * have the necessary data. */
609 zone = zone_map[fwd];
611 else if (zone_map[rev]) {
612 zone = zone_map[rev];
615 /* Convert the number to a string */
630 function set_marc_zone() {
631 const params = new URLSearchParams(document.location.search);
632 if (params.get("origin") && params.get("destination")) {
633 const src = params.get("origin");
634 const dest = params.get("destination");
635 const zone = compute_marc_zone(src, dest);
637 /* TODO: actually set the zone */
642 /******************************************/
643 /* Display the ticket (and hide the menu) */
644 /******************************************/
647 /* To create our "window" onto the scene, we're going to slide the
648 * SVG off the left-hand side of the screen, and we don't want
649 * scroll bars to appear. */
650 document.body.style.overflow = "hidden";
651 document.body.style.margin = "
0";
652 document.body.style.padding = "
0";
654 const svg = document.querySelector("svg");
655 const menu = document.getElementById("menu");
656 svg.style.display = "initial";
657 menu.style.display = "none";
660 /*****************************************************/
661 /* Add event handlers for all of the functions above */
662 /*****************************************************/
664 const params = new URLSearchParams(document.location.search);
665 if (params.get("go")) {
666 /* First unhide the SVG (swap it with the form) */
667 window.addEventListener("load", go);
669 /* Center the ticket once when the page has loaded */
670 window.addEventListener("load", center_ticket);
672 /* Re-center the ticket when the window is resized */
673 window.addEventListener("resize", center_ticket);
675 /* Set the service identifier when the page has loaded */
676 window.addEventListener("load", set_service_id);
678 /* Set the service name when the page has loaded */
679 window.addEventListener("load", set_service_name);
681 /* Set the security code text when the page has loaded */
682 window.addEventListener("load", set_code);
684 /* Center the security code text when the page has loaded; in
685 * particular, after we set the code. */
686 window.addEventListener("load", center_code);
688 /* Set the ticket expiration date/time upon page load */
689 window.addEventListener("load", set_ticket_expiry);
691 /* Set the MARC Train zone, if applicable */
692 window.addEventListener("load", set_marc_zone);
694 /* Swap colors when the screen is tapped */
695 document.body.addEventListener("click", swap_colors);