index.html.in

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