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     <link rel="icon" href="favicon.svg" />
   6
   7     <title>
   8       CharmBypass: it's transit equity y'all
   9     </title>
  10
  11     <style>
  12       input[type=submit] {
  13         margin-top: 1em;
  14         margin-bottom: 1em;
  15       }
  16
  17       svg {
  18         /* Set the height to 100% of the screen, which we'll keep; and the
  19          *  initial position to (0,0), which we're going to change
  20          * every time the window is resized, because the exact amount
  21          * that we have to slide the SVG to the left to get the ticket
  22          * into the center will change. */
  23         position: fixed;
  24         top: 0;
  25         left: 0;
  26         height: 100%;
  27
  28         /* Hide everything by default. We only show it once the user has
  29          * submitted the menu form */
  30         display: none;
  31       }
  32
  33       /* The blinking fade in/out animation for the ticket date and time */
  34       @keyframes blink {
  35         25% {
  36           opacity: 0.5;
  37         }
  38         50% {
  39           opacity: 0;
  40         }
  41         75% {
  42           opacity: 0.5;
  43         }
  44       }
  45
  46       #tickettime, #ticketdate {
  47         /* 300 two-second blinks is ten minutes */
  48         animation: blink 2s linear 300;
  49       }
  50
  51       /* Define, load, and specify the custom font we use for the ticket
  52        * date, time, and service name. */
  53       @font-face {
  54         font-family: "CharmBypass Regular";
  55         src:
  56           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  57       }
  58
  59       #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
  60         font-family: "CharmBypass Regular", sans-serif;
  61       }
  62
  63       @font-face {
  64         font-family: "CharmBypass Bold";
  65         src:
  66           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  67       }
  68
  69       #serviceid {
  70         font-family: "CharmBypass Bold", sans-serif;
  71       }
  72
  73       /************************/
  74       /* Scrolling animations */
  75       /************************/
  76
  77       /* Bus */
  78       @keyframes busroll {
  79         from {
  80           transform: translateX(0%);
  81         }
  82         to {
  83           transform: translateX(-100%);
  84         }
  85       }
  86
  87       #bus {
  88         animation: busroll 23s linear infinite;
  89       }
  90
  91
  92       /* Tram */
  93       @keyframes tramroll {
  94         from {
  95           transform: translateX(0%);
  96         }
  97         to {
  98           transform: translateX(100%);
  99         }
 100       }
 101
 102       #tram {
 103         animation: tramroll 17s linear infinite;
 104       }
 105
 106
 107       /* Tram */
 108       @keyframes trainroll {
 109         from {
 110           transform: translateX(0%);
 111         }
 112         to {
 113           transform: translateX(100%);
 114         }
 115       }
 116
 117       #train {
 118         animation: trainroll 11s linear infinite;
 119       }
 120
 121
 122       /* Clouds */
 123       @keyframes cloudsfloat {
 124         from {
 125           transform: translateX(0%);
 126         }
 127         to {
 128           transform: translateX(-50%);
 129         }
 130       }
 131
 132       #clouds {
 133         animation: cloudsfloat 40s linear infinite;
 134       }
 135
 136       @keyframes cloudscopyfloat {
 137         from {
 138           transform: translateX(0%);
 139         }
 140         to {
 141           transform: translateX(-50%);
 142         }
 143       }
 144
 145       #cloudscopy {
 146         animation: cloudscopyfloat 40s linear infinite;
 147       }
 148
 149
 150       /* Trees */
 151       @keyframes treespass {
 152         from {
 153           transform: translateX(0%);
 154         }
 155         to {
 156           transform: translateX(-50%);
 157         }
 158       }
 159
 160       #trees {
 161         /* The trees move a little faster than the clouds */
 162         animation: treespass 30s linear infinite;
 163       }
 164
 165       @keyframes treescopypass {
 166         from {
 167           transform: translateX(0%);
 168         }
 169         to {
 170           transform: translateX(-50%);
 171         }
 172       }
 173
 174       #treescopy {
 175         /* The trees move a little faster than the clouds */
 176         animation: treescopypass 30s linear infinite;
 177       }
 178
 179
 180       /* City skyline */
 181       @keyframes cityscroll {
 182         from {
 183           transform: translateX(0%);
 184         }
 185         to {
 186           transform: translateX(-50%);
 187         }
 188       }
 189
 190       #city {
 191         /* The city moves faster than the clouds but slower
 192          * than the trees */
 193         animation: cityscroll 35s linear infinite;
 194       }
 195
 196       @keyframes citycopyscroll {
 197         from {
 198           transform: translateX(0%);
 199         }
 200         to {
 201           transform: translateX(-50%);
 202         }
 203       }
 204
 205       #citycopy {
 206         /* The city moves faster than the clouds but slower
 207          * than the trees */
 208         animation: citycopyscroll 35s linear infinite;
 209       }
 210     </style>
 211   </head>
 212
 213   <body>
 214     <div id="menu">
 215       <h1>CharmBypass</h1>
 216       <h2>it's transit equity y'all</h2>
 217
 218       <p>
 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.
 224       </p>
 225
 226       <form>
 227         <fieldset>
 228           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
 229           <div>
 230             <label for="code1">
 231               Daily security code (optional):
 232             </label>
 233             <input id="code1"
 234                    name="code"
 235                    type="text"
 236                    size="2"
 237                    minlength="2"
 238                    maxlength="2"
 239                    pattern="[a-zA-Z0-9]*" />
 240           </div>
 241           <input type="hidden" name="servicename" value="BaltimoreLink" />
 242           <input type="submit" name="go" value="Get Ticket" />
 243         </fieldset>
 244       </form>
 245       <form>
 246         <fieldset>
 247           <legend>Commuter Bus</legend>
 248           <input type="hidden" name="serviceid" value="R" />
 249           <input type="hidden" name="servicename" value="Commuter Bus" />
 250
 251           <div>
 252             <label for="code2">
 253               Daily security code (optional):
 254             </label>
 255             <input id="code2"
 256                    name="code"
 257                    type="text"
 258                    size="2"
 259                    minlength="2"
 260                    maxlength="2"
 261                    pattern="[a-zA-Z0-9]*" />
 262           </div>
 263
 264           <h3>Zone</h3>
 265           <div>
 266             <input required type="radio" id="zone1" name="zone" value="Zone 1" />
 267             <label for="zone1">Zone 1</label>
 268           </div>
 269           <div>
 270             <input required type="radio" id="zone2" name="zone" value="Zone 2" />
 271             <label for="zone2">Zone 2</label>
 272           </div>
 273           <div>
 274             <input required type="radio" id="zone3" name="zone" value="Zone 3" />
 275             <label for="zone3">Zone 3</label>
 276           </div>
 277           <div>
 278             <input required type="radio" id="zone4" name="zone" value="Zone 4" />
 279             <label for="zone4">Zone 4</label>
 280           </div>
 281           <div>
 282             <input required type="radio" id="zone5" name="zone" value="Zone 5" />
 283             <label for="zone5">Zone 5</label>
 284           </div>
 285
 286           <input type="submit" name="go" value="Get Ticket" />
 287         </fieldset>
 288       </form>
 289       <form>
 290         <fieldset>
 291           <legend>MARC Train</legend>
 292
 293           <div>
 294             <label for="code3">
 295               Daily security code (optional):
 296             </label>
 297             <input id="code3"
 298                    name="code"
 299                    type="text"
 300                    size="2"
 301                    minlength="2"
 302                    maxlength="2"
 303                    pattern="[a-zA-Z0-9]*" />
 304           </div>
 305
 306           <h3>Origin</h3>
 307
 308           <div>
 309             <input required type="radio" id="origin1" name="origin" value="BAL" />
 310             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 311           </div>
 312           <div>
 313             <input required type="radio" id="origin2" name="origin" value="BCA" />
 314             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 315           </div>
 316           <div>
 317             <input required type="radio" id="origin3" name="origin" value="BWE" />
 318             <label for="origin3">Bowie State (Penn Line)</label>
 319           </div>
 320           <div>
 321             <input required type="radio" id="origin4" name="origin" value="BWI" />
 322             <label for="origin4">BWI Airport (Penn Line)</label>
 323           </div>
 324           <div>
 325             <input required type="radio" id="origin5" name="origin" value="CPK" />
 326             <label for="origin5">College Park (Camden Line)</label>
 327           </div>
 328           <div>
 329             <input required type="radio" id="origin6" name="origin" value="SEB" />
 330             <label for="origin6">Seabrook (Penn Line)</label>
 331           </div>
 332           <div>
 333             <input required type="radio" id="origin7" name="origin" value="WAS" />
 334             <label for="origin7">Washington D.C.</label>
 335           </div>
 336           <div>
 337             <input required type="radio" id="origin8" name="origin" value="WBL" />
 338             <label for="origin8">West Baltimore (Penn Line)</label>
 339           </div>
 340
 341           <h3>Destination</h3>
 342           <div>
 343             <input required type="radio" id="destination1" name="destination" value="BAL" />
 344             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 345           </div>
 346           <div>
 347             <input required type="radio" id="destination2" name="destination" value="BCA" />
 348             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 349           </div>
 350           <div>
 351             <input required type="radio" id="destination3" name="destination" value="BWE" />
 352             <label for="destination3">Bowie State (Penn Line)</label>
 353           </div>
 354           <div>
 355             <input required type="radio" id="destination4" name="destination" value="BWI" />
 356             <label for="destination4">BWI Airport (Penn Line)</label>
 357           </div>
 358           <div>
 359             <input required type="radio" id="destination5" name="destination" value="CPK" />
 360             <label for="destination5">College Park (Camden Line)</label>
 361           </div>
 362           <div>
 363             <input required type="radio" id="destination6" name="destination" value="SEB" />
 364             <label for="destination6">Seabrook (Penn Line)</label>
 365           </div>
 366           <div>
 367             <input required type="radio" id="destination7" name="destination" value="WAS" />
 368             <label for="destination7">Washington D.C.</label>
 369           </div>
 370           <div>
 371             <input required type="radio" id="destination8" name="destination" value="WBL" />
 372             <label for="destination8">West Baltimore (Penn Line)</label>
 373           </div>
 374
 375           <input type="hidden" name="serviceid" value="R" />
 376           <input type="hidden" name="servicename" value="MARC Train" />
 377           <input type="submit" name="go" value="Get Ticket" />
 378         </fieldset>
 379       </form>
 380     </div>
 381
 382     @SVGDATA@
 383
 384     <script>
 385
 386       /***********************************************/
 387       /* First, center the ticket within the browser */
 388       /***********************************************/
 389
 390       function center_ticket() {
 391         /* We're relying on the SVG being the full height of the
 392          * viewport already, and on the aspect ratio being
 393          * preserved. First, find the center of the ticket. */
 394         const r = document.getElementById("ticket").getBoundingClientRect();
 395         const c = r.left + (r.width / 2);
 396
 397         /* That's the center-line of the ticket. We want to move it to
 398          * the center-line of the viewport. */
 399         const vc = document.documentElement.clientWidth / 2;
 400
 401         /* This is how much we need to translate the SVG */
 402         const hdelta = vc - c;
 403
 404         /* But before we can set the absolute left-coordinate of the
 405          * SVG, we need to know where it is now. Note: without the
 406          * "px" this doesn't default to pixels like CSS does. */
 407         const svg = document.querySelector("svg");
 408         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 409       }
 410
 411
 412       /******************************/
 413       /* Set the service identifier */
 414       /******************************/
 415       function set_service_id() {
 416         const sid = document.getElementById("serviceid");
 417
 418         /* Get the "serviceid" from the querystring if it's there */
 419         const params = new URLSearchParams(document.location.search);
 420         if (params.get("serviceid")) {
 421           sid.textContent = params.get("serviceid");
 422         }
 423
 424         /* Otherwise, leave it at "F" */
 425       }
 426
 427       /************************/
 428       /* Set the service name */
 429       /************************/
 430       function set_service_name() {
 431         const sid = document.getElementById("servicename");
 432
 433         /* Get the "servicename" from the querystring if it's there */
 434         const params = new URLSearchParams(document.location.search);
 435         if (params.get("servicename")) {
 436           sid.textContent = params.get("servicename");
 437         }
 438
 439         /* Otherwise, leave it at "BaltimoreLink" */
 440       }
 441
 442
 443       /************************/
 444       /* Set the service zone */
 445       /************************/
 446       function set_service_zone(event, zone) {
 447         /* We can take the zone as a parameter too; this allows us to
 448          * use this function for the (computed) MARC Train zone and
 449          * not just the querystring Commuter Bus zone. The extra
 450          * "event" parameter is there for the event listener, which
 451          * would otherwise stuff an onload event into the zone
 452          * parameter. "Thankfully" javascript lets us call a
 453          * two-argument function with one argument and thereby abuse
 454          * the event handler for this. */
 455         const z = document.getElementById("zone");
 456         const params = new URLSearchParams(document.location.search);
 457
 458         if (zone) {
 459           z.textContent = zone;
 460           z.style.display = "block"; /* It's hidden by default */
 461         }
 462         else if (params.get("zone")) {
 463           /* Get the "zone" from the querystring if it's there */
 464           z.textContent = params.get("zone");
 465           z.style.display = "block"; /* It's hidden by default */
 466         }
 467
 468         /* Otherwise, leave it blank (and hidden) */
 469       }
 470
 471       /***********************************************************/
 472       /* Resize the  ticket background based on the service name */
 473       /***********************************************************/
 474
 475       function resize_ticket() {
 476         /* Get the "servicename" from the querystring if it's there */
 477         const params = new URLSearchParams(document.location.search);
 478         const tbg = document.getElementById("ticketbg");
 479         const t = document.getElementById("ticket");
 480         const sn = document.getElementById("servicename");
 481
 482         if (params.get("servicename") == "Commuter Bus") {
 483           /* The top of the background is initially at y=246.859, and
 484            * we scale it by a factor of 1.12 to y=276.482 for a change
 485            * of 29.623. So after we scale it, we translate it upwards
 486            * by that amount to put it back where it started. */
 487           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 488
 489           /* Now translate the entire ticket up by the magic amount, 1/5
 490            * of the size change we made to the background. This ratio
 491            * was found by measuring pixels in side-by-side screenshots
 492            * of BaltimoreLink and Commuter Bus tickets. */
 493           t.setAttribute("transform", "translate(0 -9.33)");
 494
 495           /* More magic numbers discovered by comparing the two
 496            * tickets overlayed in inkscape */
 497           sn.setAttribute("transform", "translate(0 64.28)");
 498         }
 499         else if (params.get("servicename") == "MARC Train") {
 500           /* insane tricks are explained above */
 501           tbg.setAttribute("transform",
 502                            "translate(0 -72.378) scale(1 1.2932)");
 503           t.setAttribute("transform", "translate(0 -67.17)");
 504           sn.setAttribute("transform", "translate(0 131.0)");
 505         }
 506
 507         /* Otherwise, leave it alone. The SVG was designed with the
 508          * BaltimoreLink ticket in mind */
 509       }
 510
 511       /****************************************/
 512       /* Set and reposition the security code */
 513       /****************************************/
 514
 515       function set_code() {
 516         const ct = document.getElementById("codetext");
 517
 518         /* Get the "code" from the querystring if it's there */
 519         const params = new URLSearchParams(document.location.search);
 520         if (params.get("code")) {
 521           ct.textContent = params.get("code").toUpperCase();
 522         }
 523         else {
 524           /* Otherwise, use a random code */
 525           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 526                           "A","B","C","D","E","F","G","H","I","J",
 527                           "K","L","M","N","O","P","Q","R","S","T",
 528                           "U","V","W","X","Y","Z"];
 529
 530           /* Two random ints between 0 and 35 */
 531           const i1 = Math.floor(Math.random() * 36);
 532           const i2 = Math.floor(Math.random() * 36);
 533           const d1 = bucket[i1];
 534           const d2 = bucket[i2];
 535           ct.textContent = d1 + d2;
 536         }
 537       }
 538
 539
 540       function center_code() {
 541         /* Center the security code inside its red box */
 542         const ct = document.getElementById("codetext");
 543         const bg = document.getElementById("codebg");
 544
 545         /* First, find the center of the red box */
 546         const r1 = bg.getBoundingClientRect();
 547         const c1 = r1.left + (r1.width / 2);
 548
 549         /* Now the center of the code text */
 550         const r2 = ct.getBoundingClientRect();
 551         const c2 = r2.left + (r2.width / 2);
 552
 553         /* What do we add to c2 to make it equal to c1? */
 554         const hdelta = c1 - c2;
 555
 556         /* We've measured everything so far in "client rect"
 557          * coordinates, because that's the only available measurement
 558          * we have for the width of the <text> element after futzing
 559          * with its contents. But when we reposition that <text>
 560          * element, it will be by adjusting its "x" attribute, and
 561          * that attribute uses a different coordinate system than the
 562          * client rect does. Specifically, "x" refers to an offset
 563          * within the SVG's coordinate system, and the client rect
 564          * coordinates are pixels on-screen. To convert between the
 565          * two, we can take the "width" attribute of the background
 566          * element and compare it to the width of the background
 567          * element's client rect. Since the size of the background is
 568          * fixed, this should give us a multiplier that turns client recr
 569          * distances (what we have) into SVG distances (what we want) */
 570         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 571
 572         /* Convert hdelta from client rect to SVG coordinates */
 573         const svg_hdelta = hdelta * client_to_svg;
 574
 575         /* Since this <text> element has an "x" attribute it's easier for
 576          * us to shift that than it is to mess with the "left" style. */
 577         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 578       }
 579
 580       /*****************************************/
 581       /* Next, set up the ticket date and time */
 582       /*****************************************/
 583
 584       function set_ticket_expiry() {
 585         /* There are two parameters, time and date, that we store in one
 586          * underlying "date" variable. Default both to an hour and a
 587          * half from now. This is what the CharmPass app does for
 588          * one-way tickets. */
 589         const date = new Date();
 590
 591         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 592         let minutes = 90;
 593         const params = new URLSearchParams(document.location.search);
 594         if (params.get("servicename") == "Commuter Bus") {
 595           /* But commuter bus tickets are only valid for ten minutes */
 596           minutes = 10;
 597         }
 598
 599         /* We use the low-level get/setTime to change the number of
 600          * milliseconds since the epoch that this date represents
 601          * Obviously correct, and avoids all suspicious corner cases
 602          * for a few more decades. */
 603         date.setTime(date.getTime() + (minutes*60*1000));
 604
 605         tt = document.getElementById("tickettime");
 606         tt.textContent = date.toLocaleTimeString();
 607
 608         const td = document.getElementById("ticketdate");
 609         const dateopts = {
 610           day: "2-digit",
 611           month: "2-digit",
 612           year: "2-digit"
 613         };
 614         td.textContent = date.toLocaleDateString("en-US", dateopts);
 615       }
 616
 617
 618       /*********************************************************/
 619       /* Finally, the onclick handler for the night/day switch */
 620       /*********************************************************/
 621
 622       /* We always start in "day" mode */
 623       is_day = true;
 624
 625       function set_day() {
 626         sky.style.fill = "#efb02f";
 627       }
 628
 629       function set_night() {
 630         sky.style.fill = "#143b66";
 631       }
 632
 633       function swap_colors() {
 634         if (is_day) {
 635           set_night();
 636           is_day = false;
 637         }
 638         else {
 639           set_day();
 640           is_day = true;
 641         }
 642       }
 643
 644
 645       /*******************************************************/
 646       /* Compute the MARC "zone" from its origin/destination */
 647       /*******************************************************/
 648
 649       /* Sorted on the first component, then the second */
 650       const zone_map = {
 651         BAL_BWE: 2,
 652         BAL_BWI: 1,
 653         BAL_SEB: 3,
 654         BAL_WAS: 4,
 655         BAL_WBL: 1,
 656         BCA_CPK_: 3,
 657         BCA_WAS_: 4,
 658         BWI_BWE: 1,
 659         BWI_WAS: 3,
 660         BWI_WBL: 1
 661       };
 662
 663       /* Compute the zone (string) for the given origin/destination pair.
 664        * If we don't know it or if you chose in invalid pair (destination
 665        * not on the same line as your origin?) then the empty string is
 666        * returned. */
 667       function compute_marc_zone(src, dest) {
 668         /* Forward direction key for zone_map */
 669         const fwd = src + "_" +  dest;
 670
 671         /* Reverse direction key for zone_map. The zone_map only
 672          * has them listed in one direction, so we check both
 673          * directions here. */
 674         const rev = dest + "_" +  src;
 675
 676         /* The default. Obviously wrong for when we don't
 677          * have the necessary data. */
 678         let zone = -1;
 679
 680         if (zone_map[fwd]) {
 681           zone = zone_map[fwd];
 682         }
 683         else if (zone_map[rev]) {
 684           zone = zone_map[rev];
 685         }
 686
 687         /* Convert the number to a string */
 688         switch (zone) {
 689           case 1:
 690             return "One Zone";
 691           case 2:
 692             return "Two Zone";
 693           case 3:
 694             return "Three Zone";
 695           case 4:
 696             return "Four Zone";
 697           default:
 698             return "";
 699         }
 700       }
 701
 702       function set_marc_zone() {
 703         const params = new URLSearchParams(document.location.search);
 704         if (params.get("origin") && params.get("destination")) {
 705           const src = params.get("origin");
 706           const dest = params.get("destination");
 707           const zone = compute_marc_zone(src, dest);
 708
 709           set_service_zone(null, zone);
 710         }
 711       }
 712
 713
 714       /*****************************************************/
 715       /* Set the origin and destination for the MARC Train */
 716       /*****************************************************/
 717
 718       function set_marc_origin_destination() {
 719         const params = new URLSearchParams(document.location.search);
 720         if (!params.get("origin") || !params.get("destination")) {
 721           return;
 722         }
 723
 724         const src = params.get("origin");
 725         const dest = params.get("destination");
 726
 727         /* origindest contains both the origin and destination */
 728         const origindest = document.getElementById("origindest");
 729
 730         const origin = document.getElementById("origin");
 731         const destination = document.getElementById("destination");
 732
 733         origin.textContent = params.get("origin");
 734         destination.textContent = params.get("destination");
 735
 736         origindest.style.display = "block"; /* It's hidden by default */
 737       }
 738
 739       /******************************************/
 740       /* Display the ticket (and hide the menu) */
 741       /******************************************/
 742
 743       function go() {
 744         /* To create our "window" onto the scene, we're going to slide the
 745          * SVG off the left-hand side of the screen, and we don't want
 746          * scroll bars to appear. */
 747         document.body.style.overflow = "hidden";
 748         document.body.style.margin = "0";
 749         document.body.style.padding = "0";
 750
 751         const svg = document.querySelector("svg");
 752         const menu = document.getElementById("menu");
 753         svg.style.display = "initial";
 754         menu.style.display = "none";
 755       }
 756
 757       /*****************************************************/
 758       /* Add event handlers for all of the functions above */
 759       /*****************************************************/
 760
 761       const params = new URLSearchParams(document.location.search);
 762       if (params.get("go")) {
 763         /* First unhide the SVG (swap it with the form) */
 764         window.addEventListener("load", go);
 765
 766         /* Center the ticket once when the page has loaded */
 767         window.addEventListener("load", center_ticket);
 768
 769         /* Re-center the ticket when the window is resized */
 770         window.addEventListener("resize", center_ticket);
 771
 772         /* Set the service identifier when the page has loaded */
 773         window.addEventListener("load", set_service_id);
 774
 775         /* Set the service name when the page has loaded */
 776         window.addEventListener("load", set_service_name);
 777
 778         /* Set the service zone when the page has loaded */
 779         window.addEventListener("load", set_service_zone);
 780
 781         /* Resize the ticket background if necessary */
 782         window.addEventListener("load", resize_ticket);
 783
 784         /* Set the security code text when the page has loaded */
 785         window.addEventListener("load", set_code);
 786
 787         /* Center the security code text when the page has loaded; in
 788          * particular, after we set the code. */
 789         window.addEventListener("load", center_code);
 790
 791         /* Set the ticket expiration date/time upon page load */
 792         window.addEventListener("load", set_ticket_expiry);
 793
 794         /* Set the MARC Train origin and destination, if applicable */
 795         window.addEventListener("load", set_marc_origin_destination);
 796
 797         /* Set the MARC Train zone, if applicable */
 798         window.addEventListener("load", set_marc_zone);
 799
 800         /* Swap colors when the screen is tapped */
 801         document.body.addEventListener("click", swap_colors);
 802       }
 803
 804     </script>
 805   </body>
 806 </html>