index.html.in

   1 <!doctype html>
   2 <html lang="en-US">
   3   <head>
   4     <meta name="viewport" content="width=device-width, initial-scale=1" />
   5
   6     <title>
   7       CharmBypass: doing transit equity whether they like it or not
   8     </title>
   9
  10     <style>
  11       input[type=submit] {
  12         margin-top: 1em;
  13         margin-bottom: 1em;
  14       }
  15
  16       svg {
  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. */
  22         position: fixed;
  23         top: 0;
  24         left: 0;
  25         height: 100%;
  26
  27         /* Hide everything by default. We only show it once the user has
  28          * submitted the menu form */
  29         display: none;
  30       }
  31
  32       /* The blinking fade in/out animation for the ticket date and time */
  33       @keyframes blink {
  34         25% {
  35           opacity: 0.5;
  36         }
  37         50% {
  38           opacity: 0;
  39         }
  40         75% {
  41           opacity: 0.5;
  42         }
  43       }
  44
  45       #tickettime, #ticketdate {
  46         /* 300 two-second blinks is ten minutes */
  47         animation: blink 2s linear 300;
  48       }
  49
  50       /* Define, load, and specify the custom font we use for the ticket
  51        * date, time, and service name. */
  52       @font-face {
  53         font-family: "CharmBypass Regular";
  54         src:
  55           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  56       }
  57
  58       #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
  59         font-family: "CharmBypass Regular", sans-serif;
  60       }
  61
  62       @font-face {
  63         font-family: "CharmBypass Bold";
  64         src:
  65           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  66       }
  67
  68       #serviceid {
  69         font-family: "CharmBypass Bold", sans-serif;
  70       }
  71
  72       /************************/
  73       /* Scrolling animations */
  74       /************************/
  75
  76       /* Bus */
  77       @keyframes busroll {
  78         from {
  79           transform: translateX(0%);
  80         }
  81         to {
  82           transform: translateX(-100%);
  83         }
  84       }
  85
  86       #bus {
  87         animation: busroll 23s linear infinite;
  88       }
  89
  90
  91       /* Tram */
  92       @keyframes tramroll {
  93         from {
  94           transform: translateX(0%);
  95         }
  96         to {
  97           transform: translateX(100%);
  98         }
  99       }
 100
 101       #tram {
 102         animation: tramroll 17s linear infinite;
 103       }
 104
 105
 106       /* Tram */
 107       @keyframes trainroll {
 108         from {
 109           transform: translateX(0%);
 110         }
 111         to {
 112           transform: translateX(100%);
 113         }
 114       }
 115
 116       #train {
 117         animation: trainroll 11s linear infinite;
 118       }
 119
 120
 121       /* Clouds */
 122       @keyframes cloudsfloat {
 123         from {
 124           transform: translateX(0%);
 125         }
 126         to {
 127           transform: translateX(-50%);
 128         }
 129       }
 130
 131       #clouds {
 132         animation: cloudsfloat 40s linear infinite;
 133       }
 134
 135       @keyframes cloudscopyfloat {
 136         from {
 137           transform: translateX(0%);
 138         }
 139         to {
 140           transform: translateX(-50%);
 141         }
 142       }
 143
 144       #cloudscopy {
 145         animation: cloudscopyfloat 40s linear infinite;
 146       }
 147
 148
 149       /* Trees */
 150       @keyframes treespass {
 151         from {
 152           transform: translateX(0%);
 153         }
 154         to {
 155           transform: translateX(-50%);
 156         }
 157       }
 158
 159       #trees {
 160         /* The trees move a little faster than the clouds */
 161         animation: treespass 30s linear infinite;
 162       }
 163
 164       @keyframes treescopypass {
 165         from {
 166           transform: translateX(0%);
 167         }
 168         to {
 169           transform: translateX(-50%);
 170         }
 171       }
 172
 173       #treescopy {
 174         /* The trees move a little faster than the clouds */
 175         animation: treescopypass 30s linear infinite;
 176       }
 177
 178
 179       /* City skyline */
 180       @keyframes cityscroll {
 181         from {
 182           transform: translateX(0%);
 183         }
 184         to {
 185           transform: translateX(-50%);
 186         }
 187       }
 188
 189       #city {
 190         /* The city moves faster than the clouds but slower
 191          * than the trees */
 192         animation: cityscroll 35s linear infinite;
 193       }
 194
 195       @keyframes citycopyscroll {
 196         from {
 197           transform: translateX(0%);
 198         }
 199         to {
 200           transform: translateX(-50%);
 201         }
 202       }
 203
 204       #citycopy {
 205         /* The city moves faster than the clouds but slower
 206          * than the trees */
 207         animation: citycopyscroll 35s linear infinite;
 208       }
 209     </style>
 210   </head>
 211
 212   <body>
 213     <div id="menu">
 214       <h1>CharmBypass</h1>
 215       <h2>doing transit equity whether they like it or not</h2>
 216
 217       <p>
 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.
 223       </p>
 224
 225       <form>
 226         <fieldset>
 227           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
 228           <div>
 229             <label for="code1">
 230               Daily security code (optional):
 231             </label>
 232             <input id="code1"
 233                    name="code"
 234                    type="text"
 235                    minlength="2"
 236                    maxlength="2"
 237                    pattern="[a-zA-Z0-9]*" />
 238           </div>
 239           <input type="hidden" name="servicename" value="BaltimoreLink" />
 240           <input type="submit" name="go" value="Get Ticket" />
 241         </fieldset>
 242       </form>
 243       <form>
 244         <fieldset>
 245           <legend>Commuter Bus</legend>
 246           <input type="hidden" name="serviceid" value="R" />
 247           <input type="hidden" name="servicename" value="Commuter Bus" />
 248
 249           <div>
 250             <label for="code2">
 251               Daily security code (optional):
 252             </label>
 253             <input id="code2"
 254                    name="code"
 255                    type="text"
 256                    minlength="2"
 257                    maxlength="2"
 258                    pattern="[a-zA-Z0-9]*" />
 259           </div>
 260
 261           <h3>Zone</h3>
 262           <div>
 263             <input required type="radio" id="zone1" name="zone" value="Zone 1" />
 264             <label for="zone1">Zone 1</label>
 265           </div>
 266           <div>
 267             <input required type="radio" id="zone2" name="zone" value="Zone 2" />
 268             <label for="zone2">Zone 2</label>
 269           </div>
 270           <div>
 271             <input required type="radio" id="zone3" name="zone" value="Zone 3" />
 272             <label for="zone3">Zone 3</label>
 273           </div>
 274           <div>
 275             <input required type="radio" id="zone4" name="zone" value="Zone 4" />
 276             <label for="zone4">Zone 4</label>
 277           </div>
 278           <div>
 279             <input required type="radio" id="zone5" name="zone" value="Zone 5" />
 280             <label for="zone5">Zone 5</label>
 281           </div>
 282
 283           <input type="submit" name="go" value="Get Ticket" />
 284         </fieldset>
 285       </form>
 286       <form>
 287         <fieldset>
 288           <legend>MARC Train</legend>
 289
 290           <div>
 291             <label for="code3">
 292               Daily security code (optional):
 293             </label>
 294             <input id="code3"
 295                    name="code"
 296                    type="text"
 297                    minlength="2"
 298                    maxlength="2"
 299                    pattern="[a-zA-Z0-9]*" />
 300           </div>
 301
 302           <h3>Origin</h3>
 303
 304           <div>
 305             <input required type="radio" id="origin1" name="origin" value="BAL" />
 306             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 307           </div>
 308           <div>
 309             <input required type="radio" id="origin2" name="origin" value="BCA" />
 310             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 311           </div>
 312           <div>
 313             <input required type="radio" id="origin3" name="origin" value="BWE" />
 314             <label for="origin3">Bowie State (Penn Line)</label>
 315           </div>
 316           <div>
 317             <input required type="radio" id="origin4" name="origin" value="BWI" />
 318             <label for="origin4">BWI Airport (Penn Line)</label>
 319           </div>
 320           <div>
 321             <input required type="radio" id="origin5" name="origin" value="CPK" />
 322             <label for="origin5">College Park (Camden Line)</label>
 323           </div>
 324           <div>
 325             <input required type="radio" id="origin6" name="origin" value="SEB" />
 326             <label for="origin6">Seabrook (Penn Line)</label>
 327           </div>
 328           <div>
 329             <input required type="radio" id="origin7" name="origin" value="WAS" />
 330             <label for="origin7">Washington D.C.</label>
 331           </div>
 332           <div>
 333             <input required type="radio" id="origin8" name="origin" value="WBL" />
 334             <label for="origin8">West Baltimore (Penn Line)</label>
 335           </div>
 336
 337           <h3>Destination</h3>
 338           <div>
 339             <input required type="radio" id="destination1" name="destination" value="BAL" />
 340             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 341           </div>
 342           <div>
 343             <input required type="radio" id="destination2" name="destination" value="BCA" />
 344             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 345           </div>
 346           <div>
 347             <input required type="radio" id="destination3" name="destination" value="BWE" />
 348             <label for="destination3">Bowie State (Penn Line)</label>
 349           </div>
 350           <div>
 351             <input required type="radio" id="destination4" name="destination" value="BWI" />
 352             <label for="destination4">BWI Airport (Penn Line)</label>
 353           </div>
 354           <div>
 355             <input required type="radio" id="destination5" name="destination" value="CPK" />
 356             <label for="destination5">College Park (Camden Line)</label>
 357           </div>
 358           <div>
 359             <input required type="radio" id="destination6" name="destination" value="SEB" />
 360             <label for="destination6">Seabrook (Penn Line)</label>
 361           </div>
 362           <div>
 363             <input required type="radio" id="destination7" name="destination" value="WAS" />
 364             <label for="destination7">Washington D.C.</label>
 365           </div>
 366           <div>
 367             <input required type="radio" id="destination8" name="destination" value="WBL" />
 368             <label for="destination8">West Baltimore (Penn Line)</label>
 369           </div>
 370
 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" />
 374         </fieldset>
 375       </form>
 376     </div>
 377
 378     @SVGDATA@
 379
 380     <script>
 381
 382       /***********************************************/
 383       /* First, center the ticket within the browser */
 384       /***********************************************/
 385
 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);
 392
 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;
 396
 397         /* This is how much we need to translate the SVG */
 398         const hdelta = vc - c;
 399
 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";
 405       }
 406
 407
 408       /******************************/
 409       /* Set the service identifier */
 410       /******************************/
 411       function set_service_id() {
 412         const sid = document.getElementById("serviceid");
 413
 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");
 418         }
 419
 420         /* Otherwise, leave it at "F" */
 421       }
 422
 423       /************************/
 424       /* Set the service name */
 425       /************************/
 426       function set_service_name() {
 427         const sid = document.getElementById("servicename");
 428
 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");
 433         }
 434
 435         /* Otherwise, leave it at "BaltimoreLink" */
 436       }
 437
 438
 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);
 448
 449         if (zone) {
 450           z.textContent = zone;
 451           z.style.display = "block"; /* It's hidden by default */
 452         }
 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 */
 457         }
 458
 459         /* Otherwise, leave it blank (and hidden) */
 460       }
 461
 462       /***********************************************************/
 463       /* Resize the  ticket background based on the service name */
 464       /***********************************************************/
 465
 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");
 472
 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)");
 479
 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)");
 485
 486           /* More magic numbers discovered by comparing the two
 487            * tickets overlayed in inkscape */
 488           sn.setAttribute("transform", "translate(0 64.28)");
 489         }
 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)");
 496         }
 497
 498         /* Otherwise, leave it alone. The SVG was designed with the
 499          * BaltimoreLink ticket in mind */
 500       }
 501
 502       /****************************************/
 503       /* Set and reposition the security code */
 504       /****************************************/
 505
 506       function set_code() {
 507         const ct = document.getElementById("codetext");
 508
 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();
 513         }
 514         else {
 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"];
 520
 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;
 527         }
 528       }
 529
 530
 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");
 535
 536         /* First, find the center of the red box */
 537         const r1 = bg.getBoundingClientRect();
 538         const c1 = r1.left + (r1.width / 2);
 539
 540         /* Now the center of the code text */
 541         const r2 = ct.getBoundingClientRect();
 542         const c2 = r2.left + (r2.width / 2);
 543
 544         /* What do we add to c2 to make it equal to c1? */
 545         const hdelta = c1 - c2;
 546
 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;
 562
 563         /* Convert hdelta from client rect to SVG coordinates */
 564         const svg_hdelta = hdelta * client_to_svg;
 565
 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);
 569       }
 570
 571       /*****************************************/
 572       /* Next, set up the ticket date and time */
 573       /*****************************************/
 574
 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();
 581
 582         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 583         let minutes = 90;
 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 */
 587           minutes = 10;
 588         }
 589
 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));
 595
 596         tt = document.getElementById("tickettime");
 597         tt.textContent = date.toLocaleTimeString();
 598
 599         const td = document.getElementById("ticketdate");
 600         const dateopts = {
 601           day: "2-digit",
 602           month: "2-digit",
 603           year: "2-digit"
 604         };
 605         td.textContent = date.toLocaleDateString("en-US", dateopts);
 606       }
 607
 608
 609       /*********************************************************/
 610       /* Finally, the onclick handler for the night/day switch */
 611       /*********************************************************/
 612
 613       /* We always start in "day" mode */
 614       is_day = true;
 615
 616       function set_day() {
 617         sky.style.fill = "#efb02f";
 618       }
 619
 620       function set_night() {
 621         sky.style.fill = "#143b66";
 622       }
 623
 624       function swap_colors() {
 625         if (is_day) {
 626           set_night();
 627           is_day = false;
 628         }
 629         else {
 630           set_day();
 631           is_day = true;
 632         }
 633       }
 634
 635
 636       /*******************************************************/
 637       /* Compute the MARC "zone" from its origin/destination */
 638       /*******************************************************/
 639
 640       /* Sorted on the first component, then the second */
 641       const zone_map = {
 642         BAL_BWE: 2,
 643         BAL_BWI: 1,
 644         BAL_SEB: 3,
 645         BAL_WAS: 4,
 646         BAL_WBL: 1,
 647         BCA_CPK_: 3,
 648         BCA_WAS_: 4,
 649         BWI_BWE: 1,
 650         BWI_WAS: 3,
 651         BWI_WBL: 1
 652       };
 653
 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
 657        * returned. */
 658       function compute_marc_zone(src, dest) {
 659         /* Forward direction key for zone_map */
 660         const fwd = src + "_" +  dest;
 661
 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;
 666
 667         /* The default. Obviously wrong for when we don't
 668          * have the necessary data. */
 669         let zone = -1;
 670
 671         if (zone_map[fwd]) {
 672           zone = zone_map[fwd];
 673         }
 674         else if (zone_map[rev]) {
 675           zone = zone_map[rev];
 676         }
 677
 678         /* Convert the number to a string */
 679         switch (zone) {
 680           case 1:
 681             return "One Zone";
 682           case 2:
 683             return "Two Zone";
 684           case 3:
 685             return "Three Zone";
 686           case 4:
 687             return "Four Zone";
 688           default:
 689             return "";
 690         }
 691       }
 692
 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);
 699
 700           set_service_zone(zone);
 701         }
 702       }
 703
 704
 705       /*****************************************************/
 706       /* Set the origin and destination for the MARC Train */
 707       /*****************************************************/
 708
 709       function set_marc_origin_destination() {
 710         const params = new URLSearchParams(document.location.search);
 711         if (!params.get("origin") || !params.get("destination")) {
 712           return;
 713         }
 714
 715         const src = params.get("origin");
 716         const dest = params.get("destination");
 717
 718         /* origindest contains both the origin and destination */
 719         const origindest = document.getElementById("origindest");
 720
 721         const origin = document.getElementById("origin");
 722         const destination = document.getElementById("destination");
 723
 724         origin.textContent = params.get("origin");
 725         destination.textContent = params.get("destination");
 726
 727         origindest.style.display = "block"; /* It's hidden by default */
 728       }
 729
 730       /******************************************/
 731       /* Display the ticket (and hide the menu) */
 732       /******************************************/
 733
 734       function go() {
 735         /* To create our "window" onto the scene, we're going to slide the
 736          * SVG off the left-hand side of the screen, and we don't want
 737          * scroll bars to appear. */
 738         document.body.style.overflow = "hidden";
 739         document.body.style.margin = "0";
 740         document.body.style.padding = "0";
 741
 742         const svg = document.querySelector("svg");
 743         const menu = document.getElementById("menu");
 744         svg.style.display = "initial";
 745         menu.style.display = "none";
 746       }
 747
 748       /*****************************************************/
 749       /* Add event handlers for all of the functions above */
 750       /*****************************************************/
 751
 752       const params = new URLSearchParams(document.location.search);
 753       if (params.get("go")) {
 754         /* First unhide the SVG (swap it with the form) */
 755         window.addEventListener("load", go);
 756
 757         /* Center the ticket once when the page has loaded */
 758         window.addEventListener("load", center_ticket);
 759
 760         /* Re-center the ticket when the window is resized */
 761         window.addEventListener("resize", center_ticket);
 762
 763         /* Set the service identifier when the page has loaded */
 764         window.addEventListener("load", set_service_id);
 765
 766         /* Set the service name when the page has loaded */
 767         window.addEventListener("load", set_service_name);
 768
 769         /* Set the service zone when the page has loaded */
 770         window.addEventListener("load", set_service_zone);
 771
 772         /* Resize the ticket background if necessary */
 773         window.addEventListener("load", resize_ticket);
 774
 775         /* Set the security code text when the page has loaded */
 776         window.addEventListener("load", set_code);
 777
 778         /* Center the security code text when the page has loaded; in
 779          * particular, after we set the code. */
 780         window.addEventListener("load", center_code);
 781
 782         /* Set the ticket expiration date/time upon page load */
 783         window.addEventListener("load", set_ticket_expiry);
 784
 785         /* Set the MARC Train origin and destination, if applicable */
 786         window.addEventListener("load", set_marc_origin_destination);
 787
 788         /* Set the MARC Train zone, if applicable */
 789         window.addEventListener("load", set_marc_zone);
 790
 791         /* Swap colors when the screen is tapped */
 792         document.body.addEventListener("click", swap_colors);
 793       }
 794
 795     </script>
 796   </body>
 797 </html>