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.
   8     </title>
   9
  10     <style>
  11       /*
  12        * Reset styles for the html and body elements, the only two HTML
  13        * elements we use. */
  14       html, body {
  15         margin: 0;
  16         padding: 0;
  17         border: 0;
  18         font-weight: normal;
  19         font-style: inherit;
  20         font-size: 100%;
  21         line-height: 1.5;
  22         font-family: inherit;
  23         text-align: inherit;
  24         text-decoration: none;
  25         vertical-align: baseline;
  26         background: transparent;
  27       }
  28
  29       svg {
  30         /* Set the height to 100% of the screen, which we'll keep; and the
  31          *  initial position to (0,0), which we're going to change
  32          * every time the window is resized, because the exact amount
  33          * that we have to slide the SVG to the left to get the ticket
  34          * into the center will change. */
  35         position: fixed;
  36         top: 0;
  37         left: 0;
  38         height: 100%;
  39
  40         /* Hide everything by default. We only show it once the user has
  41          * submitted the menu form */
  42         display: none;
  43       }
  44
  45       /* The blinking fade in/out animation for the ticket date and time */
  46       @keyframes blink {
  47         25% {
  48           opacity: 0.5;
  49         }
  50         50% {
  51           opacity: 0;
  52         }
  53         75% {
  54           opacity: 0.5;
  55         }
  56       }
  57
  58       #tickettime, #ticketdate {
  59         /* 300 two-second blinks is ten minutes */
  60         animation: blink 2s linear 300;
  61       }
  62
  63       /* Define, load, and specify the custom font we use for the ticket
  64        * date, time, and service name. */
  65       @font-face {
  66         font-family: "CharmBypass Regular";
  67         src:
  68           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  69       }
  70
  71       #servicename, #tickettime, #ticketdate, #codetext {
  72         font-family: "CharmBypass Regular", sans-serif;
  73       }
  74
  75       @font-face {
  76         font-family: "CharmBypass Bold";
  77         src:
  78           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  79       }
  80
  81       #serviceid {
  82         font-family: "CharmBypass Bold", sans-serif;
  83         font-weight: bold;
  84       }
  85
  86       /************************/
  87       /* Scrolling animations */
  88       /************************/
  89
  90       /* Bus */
  91       @keyframes busroll {
  92         from {
  93           transform: translateX(0%);
  94         }
  95         to {
  96           transform: translateX(-100%);
  97         }
  98       }
  99
 100       #bus {
 101         animation: busroll 23s linear infinite;
 102       }
 103
 104
 105       /* Tram */
 106       @keyframes tramroll {
 107         from {
 108           transform: translateX(0%);
 109         }
 110         to {
 111           transform: translateX(100%);
 112         }
 113       }
 114
 115       #tram {
 116         animation: tramroll 17s linear infinite;
 117       }
 118
 119
 120       /* Tram */
 121       @keyframes trainroll {
 122         from {
 123           transform: translateX(0%);
 124         }
 125         to {
 126           transform: translateX(100%);
 127         }
 128       }
 129
 130       #train {
 131         animation: trainroll 11s linear infinite;
 132       }
 133
 134
 135       /* Clouds */
 136       @keyframes cloudsfloat {
 137         from {
 138           transform: translateX(0%);
 139         }
 140         to {
 141           transform: translateX(-50%);
 142         }
 143       }
 144
 145       #clouds {
 146         animation: cloudsfloat 40s linear infinite;
 147       }
 148
 149       @keyframes cloudscopyfloat {
 150         from {
 151           transform: translateX(0%);
 152         }
 153         to {
 154           transform: translateX(-50%);
 155         }
 156       }
 157
 158       #cloudscopy {
 159         animation: cloudscopyfloat 40s linear infinite;
 160       }
 161
 162
 163       /* Trees */
 164       @keyframes treespass {
 165         from {
 166           transform: translateX(0%);
 167         }
 168         to {
 169           transform: translateX(-50%);
 170         }
 171       }
 172
 173       #trees {
 174         /* The trees move a little faster than the clouds */
 175         animation: treespass 30s linear infinite;
 176       }
 177
 178       @keyframes treescopypass {
 179         from {
 180           transform: translateX(0%);
 181         }
 182         to {
 183           transform: translateX(-50%);
 184         }
 185       }
 186
 187       #treescopy {
 188         /* The trees move a little faster than the clouds */
 189         animation: treescopypass 30s linear infinite;
 190       }
 191
 192
 193       /* City skyline */
 194       @keyframes cityscroll {
 195         from {
 196           transform: translateX(0%);
 197         }
 198         to {
 199           transform: translateX(-50%);
 200         }
 201       }
 202
 203       #city {
 204         /* The city moves faster than the clouds but slower
 205          * than the trees */
 206         animation: cityscroll 35s linear infinite;
 207       }
 208
 209       @keyframes citycopyscroll {
 210         from {
 211           transform: translateX(0%);
 212         }
 213         to {
 214           transform: translateX(-50%);
 215         }
 216       }
 217
 218       #citycopy {
 219         /* The city moves faster than the clouds but slower
 220          * than the trees */
 221         animation: citycopyscroll 35s linear infinite;
 222       }
 223     </style>
 224   </head>
 225
 226   <body>
 227     <div id="menu">
 228       <form>
 229         <fieldset>
 230           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
 231           <input type="hidden" name="servicename" value="BaltimoreLink" />
 232           <input type="submit" name="go" value="Get Ticket" />
 233         </fieldset>
 234       </form>
 235       <form>
 236         <fieldset>
 237           <legend>Commuter Bus</legend>
 238           <input type="hidden" name="serviceid" value="R" />
 239           <input type="hidden" name="servicename" value="Commuter Bus" />
 240           <div>
 241             <input type="radio" id="zone1" name="zone" value="Zone 1" />
 242             <label for="zone1">Zone 1</label>
 243           </div>
 244           <div>
 245             <input type="radio" id="zone2" name="zone" value="Zone 2" />
 246             <label for="zone2">Zone 2</label>
 247           </div>
 248           <div>
 249             <input type="radio" id="zone3" name="zone" value="Zone 3" />
 250             <label for="zone3">Zone 3</label>
 251           </div>
 252           <div>
 253             <input type="radio" id="zone4" name="zone" value="Zone 4" />
 254             <label for="zone4">Zone 4</label>
 255           </div>
 256           <div>
 257             <input type="radio" id="zone5" name="zone" value="Zone 5" />
 258             <label for="zone5">Zone 5</label>
 259           </div>
 260
 261           <input type="submit" name="go" value="Get Ticket" />
 262         </fieldset>
 263       </form>
 264       <form>
 265         <fieldset>
 266           <legend>MARC Train</legend>
 267
 268           <h3>Origin</h3>
 269           <div>
 270             <input type="radio" id="origin1" name="origin" value="BAL" />
 271             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 272           </div>
 273           <div>
 274             <input type="radio" id="origin2" name="origin" value="BCA" />
 275             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 276           </div>
 277           <div>
 278             <input type="radio" id="origin3" name="origin" value="BWE" />
 279             <label for="origin3">Bowie State (Penn Line)</label>
 280           </div>
 281           <div>
 282             <input type="radio" id="origin4" name="origin" value="BWI" />
 283             <label for="origin4">BWI Airport (Penn Line)</label>
 284           </div>
 285           <div>
 286             <input type="radio" id="origin5" name="origin" value="CPK" />
 287             <label for="origin5">College Park (Camden Line)</label>
 288           </div>
 289           <div>
 290             <input type="radio" id="origin6" name="origin" value="SEB" />
 291             <label for="origin6">Seabrook (Penn Line)</label>
 292           </div>
 293           <div>
 294             <input type="radio" id="origin7" name="origin" value="WAS" />
 295             <label for="origin7">Washington D.C.</label>
 296           </div>
 297           <div>
 298             <input type="radio" id="origin8" name="origin" value="WBL" />
 299             <label for="origin8">West Baltimore (Penn Line)</label>
 300           </div>
 301
 302           <h3>Destination</h3>
 303           <div>
 304             <input type="radio" id="destination1" name="destination" value="BAL" />
 305             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 306           </div>
 307           <div>
 308             <input type="radio" id="destination2" name="destination" value="BCA" />
 309             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 310           </div>
 311           <div>
 312             <input type="radio" id="destination3" name="destination" value="BWE" />
 313             <label for="destination3">Bowie State (Penn Line)</label>
 314           </div>
 315           <div>
 316             <input type="radio" id="destination4" name="destination" value="BWI" />
 317             <label for="destination4">BWI Airport (Penn Line)</label>
 318           </div>
 319           <div>
 320             <input type="radio" id="destination5" name="destination" value="CPK" />
 321             <label for="destination5">College Park (Camden Line)</label>
 322           </div>
 323           <div>
 324             <input type="radio" id="destination6" name="destination" value="SEB" />
 325             <label for="destination6">Seabrook (Penn Line)</label>
 326           </div>
 327           <div>
 328             <input type="radio" id="destination7" name="destination" value="WAS" />
 329             <label for="destination7">Washington D.C.</label>
 330           </div>
 331           <div>
 332             <input type="radio" id="destination8" name="destination" value="WBL" />
 333             <label for="destination8">West Baltimore (Penn Line)</label>
 334           </div>
 335
 336           <input type="hidden" name="serviceid" value="R" />
 337           <input type="hidden" name="servicename" value="MARC Train" />
 338           <input type="submit" name="go" value="Get Ticket" />
 339         </fieldset>
 340       </form>
 341     </div>
 342
 343     @SVGDATA@
 344
 345     <script>
 346
 347       /***********************************************/
 348       /* First, center the ticket within the browser */
 349       /***********************************************/
 350
 351       function center_ticket() {
 352         /* We're relying on the SVG being the full height of the
 353          * viewport already, and on the aspect ratio being
 354          * preserved. First, find the center of the ticket. */
 355         const r = document.getElementById("ticket").getBoundingClientRect();
 356         const c = r.left + (r.width / 2);
 357
 358         /* That's the center-line of the ticket. We want to move it to
 359          * the center-line of the viewport. */
 360         const vc = document.documentElement.clientWidth / 2;
 361
 362         /* This is how much we need to translate the SVG */
 363         const hdelta = vc - c;
 364
 365         /* But before we can set the absolute left-coordinate of the
 366          * SVG, we need to know where it is now. Note: without the
 367          * "px" this doesn't default to pixels like CSS does. */
 368         const svg = document.querySelector("svg");
 369         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 370       }
 371
 372
 373       /******************************/
 374       /* Set the service identifier */
 375       /******************************/
 376       function set_service_id() {
 377         const sid = document.getElementById("serviceid");
 378
 379         /* Get the "serviceid" from the querystring if it's there */
 380         const params = new URLSearchParams(document.location.search);
 381         if (params.get("serviceid")) {
 382           sid.textContent = params.get("serviceid");
 383         }
 384
 385         /* Otherwise, leave it at "F" */
 386       }
 387
 388       /******************************/
 389       /* Set the service name */
 390       /******************************/
 391       function set_service_name() {
 392         const sid = document.getElementById("servicename");
 393
 394         /* Get the "servicename" from the querystring if it's there */
 395         const params = new URLSearchParams(document.location.search);
 396         if (params.get("servicename")) {
 397           sid.textContent = params.get("servicename");
 398         }
 399
 400         /* Otherwise, leave it at "BaltimoreLink" */
 401       }
 402
 403       /****************************************/
 404       /* Set and reposition the security code */
 405       /****************************************/
 406
 407       function set_code() {
 408         const ct = document.getElementById("codetext");
 409
 410         /* Get the "code" from the querystring if it's there */
 411         const params = new URLSearchParams(document.location.search);
 412         if (params.get("code")) {
 413           ct.textContent = params.get("code");
 414         }
 415         else {
 416           /* Otherwise, use a random code */
 417           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 418                           "A","B","C","D","E","F","G","H","I","J",
 419                           "K","L","M","N","O","P","Q","R","S","T",
 420                           "U","V","W","X","Y","Z"];
 421
 422           /* Two random ints between 0 and 35 */
 423           const i1 = Math.floor(Math.random() * 36);
 424           const i2 = Math.floor(Math.random() * 36);
 425           const d1 = bucket[i1];
 426           const d2 = bucket[i2];
 427           ct.textContent = d1 + d2;
 428         }
 429       }
 430
 431
 432       function center_code() {
 433         /* Center the security code inside its red box */
 434         const ct = document.getElementById("codetext");
 435         const bg = document.getElementById("codebg");
 436
 437         /* First, find the center of the red box */
 438         const r1 = bg.getBoundingClientRect();
 439         const c1 = r1.left + (r1.width / 2);
 440
 441         /* Now the center of the code text */
 442         const r2 = ct.getBoundingClientRect();
 443         const c2 = r2.left + (r2.width / 2);
 444
 445         /* What do we add to c2 to make it equal to c1? */
 446         const hdelta = c1 - c2;
 447
 448         /* We've measured everything so far in "client rect"
 449          * coordinates, because that's the only available measurement
 450          * we have for the width of the <text> element after futzing
 451          * with its contents. But when we reposition that <text>
 452          * element, it will be by adjusting its "x" attribute, and
 453          * that attribute uses a different coordinate system than the
 454          * client rect does. Specifically, "x" refers to an offset
 455          * within the SVG's coordinate system, and the client rect
 456          * coordinates are pixels on-screen. To convert between the
 457          * two, we can take the "width" attribute of the background
 458          * element and compare it to the width of the background
 459          * element's client rect. Since the size of the background is
 460          * fixed, this should give us a multiplier that turns client recr
 461          * distances (what we have) into SVG distances (what we want) */
 462         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 463
 464         /* Convert hdelta from client rect to SVG coordinates */
 465         const svg_hdelta = hdelta * client_to_svg;
 466
 467         /* Since this <text> element has an "x" attribute it's easier for
 468          * us to shift that than it is to mess with the "left" style. */
 469         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 470       }
 471
 472       /*****************************************/
 473       /* Next, set up the ticket date and time */
 474       /*****************************************/
 475
 476       function set_ticket_expiry() {
 477         /* There are two parameters, time and date, that we store in one
 478          * underlying "date" variable. Default both to an hour and a
 479          * half from now. This is what the CharmPass app does for
 480          * one-way tickets. */
 481         const date = new Date();
 482
 483         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 484         let minutes = 90;
 485         const params = new URLSearchParams(document.location.search);
 486         if (params.get("servicename") == "Commuter Bus") {
 487           /* But commuter bus tickets are only valid for ten minutes */
 488           minutes = 10;
 489         }
 490
 491         /* We use the low-level get/setTime to change the number of
 492          * milliseconds since the epoch that this date represents
 493          * Obviously correct, and avoids all suspicious corner cases
 494          * for a few more decades. */
 495         date.setTime(date.getTime() + (minutes*60*1000));
 496
 497         tt = document.getElementById("tickettime");
 498         tt.textContent = date.toLocaleTimeString();
 499
 500         const td = document.getElementById("ticketdate");
 501         const dateopts = {
 502           day: "2-digit",
 503           month: "2-digit",
 504           year: "2-digit"
 505         };
 506         td.textContent = date.toLocaleDateString("en-US", dateopts);
 507       }
 508
 509
 510       /*********************************************************/
 511       /* Finally, the onclick handler for the night/day switch */
 512       /*********************************************************/
 513
 514       /* We always start in "day" mode */
 515       is_day = true;
 516
 517       function set_day() {
 518         sky.style.fill = "#efb02f";
 519       }
 520
 521       function set_night() {
 522         sky.style.fill = "#143b66";
 523       }
 524
 525       function swap_colors() {
 526         if (is_day) {
 527           set_night();
 528           is_day = false;
 529         }
 530         else {
 531           set_day();
 532           is_day = true;
 533         }
 534       }
 535
 536       /******************************************/
 537       /* Display the ticket (and hide the menu) */
 538       /******************************************/
 539
 540       function go() {
 541         /* To create our "window" onto the scene, we're going to slide the
 542          * SVG off the left-hand side of the screen, and we don't want
 543          * scroll bars to appear. */
 544         document.body.style.overflow = "hidden";
 545
 546         const svg = document.querySelector("svg");
 547         const menu = document.getElementById("menu");
 548         svg.style.display = "initial";
 549         menu.style.display = "none";
 550       }
 551
 552       /*****************************************************/
 553       /* Add event handlers for all of the functions above */
 554       /*****************************************************/
 555
 556       const params = new URLSearchParams(document.location.search);
 557       if (params.get("go")) {
 558         /* First unhide the SVG (swap it with the form) */
 559         window.addEventListener("load", go);
 560
 561         /* Center the ticket once when the page has loaded */
 562         window.addEventListener("load", center_ticket);
 563
 564         /* Re-center the ticket when the window is resized */
 565         window.addEventListener("resize", center_ticket);
 566
 567         /* Set the service identifier when the page has loaded */
 568         window.addEventListener("load", set_service_id);
 569
 570         /* Set the service name when the page has loaded */
 571         window.addEventListener("load", set_service_name);
 572
 573         /* Set the security code text when the page has loaded */
 574         window.addEventListener("load", set_code);
 575
 576         /* Center the security code text when the page has loaded; in
 577          * particular, after we set the code. */
 578         window.addEventListener("load", center_code);
 579
 580         /* Set the ticket expiration date/time upon page load */
 581         window.addEventListener("load", set_ticket_expiry);
 582
 583         /* Swap colors when the screen is tapped */
 584         document.body.addEventListener("click", swap_colors);
 585       }
 586
 587     </script>
 588   </body>
 589 </html>