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: you're getting transit equity whether you like it
   8       or not
   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       #servicename, #tickettime, #ticketdate, #codetext {
  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         font-weight: bold;
  72       }
  73
  74       /************************/
  75       /* Scrolling animations */
  76       /************************/
  77
  78       /* Bus */
  79       @keyframes busroll {
  80         from {
  81           transform: translateX(0%);
  82         }
  83         to {
  84           transform: translateX(-100%);
  85         }
  86       }
  87
  88       #bus {
  89         animation: busroll 23s linear infinite;
  90       }
  91
  92
  93       /* Tram */
  94       @keyframes tramroll {
  95         from {
  96           transform: translateX(0%);
  97         }
  98         to {
  99           transform: translateX(100%);
 100         }
 101       }
 102
 103       #tram {
 104         animation: tramroll 17s linear infinite;
 105       }
 106
 107
 108       /* Tram */
 109       @keyframes trainroll {
 110         from {
 111           transform: translateX(0%);
 112         }
 113         to {
 114           transform: translateX(100%);
 115         }
 116       }
 117
 118       #train {
 119         animation: trainroll 11s linear infinite;
 120       }
 121
 122
 123       /* Clouds */
 124       @keyframes cloudsfloat {
 125         from {
 126           transform: translateX(0%);
 127         }
 128         to {
 129           transform: translateX(-50%);
 130         }
 131       }
 132
 133       #clouds {
 134         animation: cloudsfloat 40s linear infinite;
 135       }
 136
 137       @keyframes cloudscopyfloat {
 138         from {
 139           transform: translateX(0%);
 140         }
 141         to {
 142           transform: translateX(-50%);
 143         }
 144       }
 145
 146       #cloudscopy {
 147         animation: cloudscopyfloat 40s linear infinite;
 148       }
 149
 150
 151       /* Trees */
 152       @keyframes treespass {
 153         from {
 154           transform: translateX(0%);
 155         }
 156         to {
 157           transform: translateX(-50%);
 158         }
 159       }
 160
 161       #trees {
 162         /* The trees move a little faster than the clouds */
 163         animation: treespass 30s linear infinite;
 164       }
 165
 166       @keyframes treescopypass {
 167         from {
 168           transform: translateX(0%);
 169         }
 170         to {
 171           transform: translateX(-50%);
 172         }
 173       }
 174
 175       #treescopy {
 176         /* The trees move a little faster than the clouds */
 177         animation: treescopypass 30s linear infinite;
 178       }
 179
 180
 181       /* City skyline */
 182       @keyframes cityscroll {
 183         from {
 184           transform: translateX(0%);
 185         }
 186         to {
 187           transform: translateX(-50%);
 188         }
 189       }
 190
 191       #city {
 192         /* The city moves faster than the clouds but slower
 193          * than the trees */
 194         animation: cityscroll 35s linear infinite;
 195       }
 196
 197       @keyframes citycopyscroll {
 198         from {
 199           transform: translateX(0%);
 200         }
 201         to {
 202           transform: translateX(-50%);
 203         }
 204       }
 205
 206       #citycopy {
 207         /* The city moves faster than the clouds but slower
 208          * than the trees */
 209         animation: citycopyscroll 35s linear infinite;
 210       }
 211     </style>
 212   </head>
 213
 214   <body>
 215     <div id="menu">
 216       <h1>CharmBypass</h1>
 217       <h2>you're getting transit equity whether you like it or not</h2>
 218       <form>
 219         <fieldset>
 220           <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
 221           <div>
 222             <label for="code1">
 223               Daily security code (optional):
 224             </label>
 225             <input id="code1"
 226                    name="code"
 227                    type="text"
 228                    minlength="2"
 229                    maxlength="2"
 230                    pattern="[a-zA-Z0-9]+" />
 231           </div>
 232           <input type="hidden" name="servicename" value="BaltimoreLink" />
 233           <input type="submit" name="go" value="Get Ticket" />
 234         </fieldset>
 235       </form>
 236       <form>
 237         <fieldset>
 238           <legend>Commuter Bus</legend>
 239           <input type="hidden" name="serviceid" value="R" />
 240           <input type="hidden" name="servicename" value="Commuter Bus" />
 241
 242           <div>
 243             <label for="code2">
 244               Daily security code (optional):
 245             </label>
 246             <input id="code2"
 247                    name="code"
 248                    type="text"
 249                    minlength="2"
 250                    maxlength="2"
 251                    pattern="[a-zA-Z0-9]+" />
 252           </div>
 253
 254           <h3>Zone</h3>
 255           <div>
 256             <input required type="radio" id="zone1" name="zone" value="Zone 1" />
 257             <label for="zone1">Zone 1</label>
 258           </div>
 259           <div>
 260             <input required type="radio" id="zone2" name="zone" value="Zone 2" />
 261             <label for="zone2">Zone 2</label>
 262           </div>
 263           <div>
 264             <input required type="radio" id="zone3" name="zone" value="Zone 3" />
 265             <label for="zone3">Zone 3</label>
 266           </div>
 267           <div>
 268             <input required type="radio" id="zone4" name="zone" value="Zone 4" />
 269             <label for="zone4">Zone 4</label>
 270           </div>
 271           <div>
 272             <input required type="radio" id="zone5" name="zone" value="Zone 5" />
 273             <label for="zone5">Zone 5</label>
 274           </div>
 275
 276           <input type="submit" name="go" value="Get 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                    minlength="2"
 291                    maxlength="2"
 292                    pattern="[a-zA-Z0-9]+" />
 293           </div>
 294
 295           <h3>Origin</h3>
 296
 297           <div>
 298             <input required type="radio" id="origin1" name="origin" value="BAL" />
 299             <label for="origin1">Baltimore/Penn (Penn Line)</label>
 300           </div>
 301           <div>
 302             <input required type="radio" id="origin2" name="origin" value="BCA" />
 303             <label for="origin2">Baltimore/Camden (Camden Line)</label>
 304           </div>
 305           <div>
 306             <input required type="radio" id="origin3" name="origin" value="BWE" />
 307             <label for="origin3">Bowie State (Penn Line)</label>
 308           </div>
 309           <div>
 310             <input required type="radio" id="origin4" name="origin" value="BWI" />
 311             <label for="origin4">BWI Airport (Penn Line)</label>
 312           </div>
 313           <div>
 314             <input required type="radio" id="origin5" name="origin" value="CPK" />
 315             <label for="origin5">College Park (Camden Line)</label>
 316           </div>
 317           <div>
 318             <input required type="radio" id="origin6" name="origin" value="SEB" />
 319             <label for="origin6">Seabrook (Penn Line)</label>
 320           </div>
 321           <div>
 322             <input required type="radio" id="origin7" name="origin" value="WAS" />
 323             <label for="origin7">Washington D.C.</label>
 324           </div>
 325           <div>
 326             <input required type="radio" id="origin8" name="origin" value="WBL" />
 327             <label for="origin8">West Baltimore (Penn Line)</label>
 328           </div>
 329
 330           <h3>Destination</h3>
 331           <div>
 332             <input required type="radio" id="destination1" name="destination" value="BAL" />
 333             <label for="destination1">Baltimore/Penn (Penn Line)</label>
 334           </div>
 335           <div>
 336             <input required type="radio" id="destination2" name="destination" value="BCA" />
 337             <label for="destination2">Baltimore/Camden (Camden Line)</label>
 338           </div>
 339           <div>
 340             <input required type="radio" id="destination3" name="destination" value="BWE" />
 341             <label for="destination3">Bowie State (Penn Line)</label>
 342           </div>
 343           <div>
 344             <input required type="radio" id="destination4" name="destination" value="BWI" />
 345             <label for="destination4">BWI Airport (Penn Line)</label>
 346           </div>
 347           <div>
 348             <input required type="radio" id="destination5" name="destination" value="CPK" />
 349             <label for="destination5">College Park (Camden Line)</label>
 350           </div>
 351           <div>
 352             <input required type="radio" id="destination6" name="destination" value="SEB" />
 353             <label for="destination6">Seabrook (Penn Line)</label>
 354           </div>
 355           <div>
 356             <input required type="radio" id="destination7" name="destination" value="WAS" />
 357             <label for="destination7">Washington D.C.</label>
 358           </div>
 359           <div>
 360             <input required type="radio" id="destination8" name="destination" value="WBL" />
 361             <label for="destination8">West Baltimore (Penn Line)</label>
 362           </div>
 363
 364           <input type="hidden" name="serviceid" value="R" />
 365           <input type="hidden" name="servicename" value="MARC Train" />
 366           <input type="submit" name="go" value="Get Ticket" />
 367         </fieldset>
 368       </form>
 369     </div>
 370
 371     @SVGDATA@
 372
 373     <script>
 374
 375       /***********************************************/
 376       /* First, center the ticket within the browser */
 377       /***********************************************/
 378
 379       function center_ticket() {
 380         /* We're relying on the SVG being the full height of the
 381          * viewport already, and on the aspect ratio being
 382          * preserved. First, find the center of the ticket. */
 383         const r = document.getElementById("ticket").getBoundingClientRect();
 384         const c = r.left + (r.width / 2);
 385
 386         /* That's the center-line of the ticket. We want to move it to
 387          * the center-line of the viewport. */
 388         const vc = document.documentElement.clientWidth / 2;
 389
 390         /* This is how much we need to translate the SVG */
 391         const hdelta = vc - c;
 392
 393         /* But before we can set the absolute left-coordinate of the
 394          * SVG, we need to know where it is now. Note: without the
 395          * "px" this doesn't default to pixels like CSS does. */
 396         const svg = document.querySelector("svg");
 397         svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px";
 398       }
 399
 400
 401       /******************************/
 402       /* Set the service identifier */
 403       /******************************/
 404       function set_service_id() {
 405         const sid = document.getElementById("serviceid");
 406
 407         /* Get the "serviceid" from the querystring if it's there */
 408         const params = new URLSearchParams(document.location.search);
 409         if (params.get("serviceid")) {
 410           sid.textContent = params.get("serviceid");
 411         }
 412
 413         /* Otherwise, leave it at "F" */
 414       }
 415
 416       /******************************/
 417       /* Set the service name */
 418       /******************************/
 419       function set_service_name() {
 420         const sid = document.getElementById("servicename");
 421
 422         /* Get the "servicename" from the querystring if it's there */
 423         const params = new URLSearchParams(document.location.search);
 424         if (params.get("servicename")) {
 425           sid.textContent = params.get("servicename");
 426         }
 427
 428         /* Otherwise, leave it at "BaltimoreLink" */
 429       }
 430
 431       /****************************************/
 432       /* Set and reposition the security code */
 433       /****************************************/
 434
 435       function set_code() {
 436         const ct = document.getElementById("codetext");
 437
 438         /* Get the "code" from the querystring if it's there */
 439         const params = new URLSearchParams(document.location.search);
 440         if (params.get("code")) {
 441           ct.textContent = params.get("code").toUpperCase();
 442         }
 443         else {
 444           /* Otherwise, use a random code */
 445           const bucket = ["0","1","2","3","4","5","6","7","8","9",
 446                           "A","B","C","D","E","F","G","H","I","J",
 447                           "K","L","M","N","O","P","Q","R","S","T",
 448                           "U","V","W","X","Y","Z"];
 449
 450           /* Two random ints between 0 and 35 */
 451           const i1 = Math.floor(Math.random() * 36);
 452           const i2 = Math.floor(Math.random() * 36);
 453           const d1 = bucket[i1];
 454           const d2 = bucket[i2];
 455           ct.textContent = d1 + d2;
 456         }
 457       }
 458
 459
 460       function center_code() {
 461         /* Center the security code inside its red box */
 462         const ct = document.getElementById("codetext");
 463         const bg = document.getElementById("codebg");
 464
 465         /* First, find the center of the red box */
 466         const r1 = bg.getBoundingClientRect();
 467         const c1 = r1.left + (r1.width / 2);
 468
 469         /* Now the center of the code text */
 470         const r2 = ct.getBoundingClientRect();
 471         const c2 = r2.left + (r2.width / 2);
 472
 473         /* What do we add to c2 to make it equal to c1? */
 474         const hdelta = c1 - c2;
 475
 476         /* We've measured everything so far in "client rect"
 477          * coordinates, because that's the only available measurement
 478          * we have for the width of the <text> element after futzing
 479          * with its contents. But when we reposition that <text>
 480          * element, it will be by adjusting its "x" attribute, and
 481          * that attribute uses a different coordinate system than the
 482          * client rect does. Specifically, "x" refers to an offset
 483          * within the SVG's coordinate system, and the client rect
 484          * coordinates are pixels on-screen. To convert between the
 485          * two, we can take the "width" attribute of the background
 486          * element and compare it to the width of the background
 487          * element's client rect. Since the size of the background is
 488          * fixed, this should give us a multiplier that turns client recr
 489          * distances (what we have) into SVG distances (what we want) */
 490         const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
 491
 492         /* Convert hdelta from client rect to SVG coordinates */
 493         const svg_hdelta = hdelta * client_to_svg;
 494
 495         /* Since this <text> element has an "x" attribute it's easier for
 496          * us to shift that than it is to mess with the "left" style. */
 497         ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
 498       }
 499
 500       /*****************************************/
 501       /* Next, set up the ticket date and time */
 502       /*****************************************/
 503
 504       function set_ticket_expiry() {
 505         /* There are two parameters, time and date, that we store in one
 506          * underlying "date" variable. Default both to an hour and a
 507          * half from now. This is what the CharmPass app does for
 508          * one-way tickets. */
 509         const date = new Date();
 510
 511         /* BaltimoreLink and MARC Train are valid for an hour and a half */
 512         let minutes = 90;
 513         const params = new URLSearchParams(document.location.search);
 514         if (params.get("servicename") == "Commuter Bus") {
 515           /* But commuter bus tickets are only valid for ten minutes */
 516           minutes = 10;
 517         }
 518
 519         /* We use the low-level get/setTime to change the number of
 520          * milliseconds since the epoch that this date represents
 521          * Obviously correct, and avoids all suspicious corner cases
 522          * for a few more decades. */
 523         date.setTime(date.getTime() + (minutes*60*1000));
 524
 525         tt = document.getElementById("tickettime");
 526         tt.textContent = date.toLocaleTimeString();
 527
 528         const td = document.getElementById("ticketdate");
 529         const dateopts = {
 530           day: "2-digit",
 531           month: "2-digit",
 532           year: "2-digit"
 533         };
 534         td.textContent = date.toLocaleDateString("en-US", dateopts);
 535       }
 536
 537
 538       /*********************************************************/
 539       /* Finally, the onclick handler for the night/day switch */
 540       /*********************************************************/
 541
 542       /* We always start in "day" mode */
 543       is_day = true;
 544
 545       function set_day() {
 546         sky.style.fill = "#efb02f";
 547       }
 548
 549       function set_night() {
 550         sky.style.fill = "#143b66";
 551       }
 552
 553       function swap_colors() {
 554         if (is_day) {
 555           set_night();
 556           is_day = false;
 557         }
 558         else {
 559           set_day();
 560           is_day = true;
 561         }
 562       }
 563
 564
 565       /*******************************************************/
 566       /* Compute the MARC "zone" from its origin/destination */
 567       /*******************************************************/
 568
 569       /* Sorted on the first component, then the second */
 570       const zone_map = {
 571         BAL_BWE: 2,
 572         BAL_BWI: 1,
 573         BAL_SEB: 3,
 574         BAL_WAS: 4,
 575         BAL_WBL: 1,
 576         BCA_CPK_: 3,
 577         BCA_WAS_: 4,
 578         BWI_BWE: 1,
 579         BWI_WAS: 3,
 580         BWI_WBL: 1
 581       };
 582
 583       /* Compute the zone (string) for the given origin/destination pair.
 584        * If we don't know it or if you chose in invalid pair (destination
 585        * not on the same line as your origin?) then the empty string is
 586        * returned. */
 587       function compute_marc_zone(src, dest) {
 588         /* Forward direction key for zone_map */
 589         const fwd = src + "_" +  dest;
 590
 591         /* Reverse direction key for zone_map. The zone_map only
 592          * has them listed in one direction, so we check both
 593          * directions here. */
 594         const rev = dest + "_" +  src;
 595
 596         /* The default. Obviously wrong for when we don't
 597          * have the necessary data. */
 598         let zone = -1;
 599
 600         if (zone_map[fwd]) {
 601           zone = zone_map[fwd];
 602         }
 603         else if (zone_map[rev]) {
 604           zone = zone_map[rev];
 605         }
 606
 607         /* Convert the number to a string */
 608         switch (zone) {
 609           case 1:
 610             return "One Zone";
 611           case 2:
 612             return "Two Zone";
 613           case 3:
 614             return "Three Zone";
 615           case 4:
 616             return "Four Zone";
 617           default:
 618             return "";
 619         }
 620       }
 621
 622       function set_marc_zone() {
 623         const params = new URLSearchParams(document.location.search);
 624         if (params.get("origin") && params.get("destination")) {
 625           const src = params.get("origin");
 626           const dest = params.get("destination");
 627           const zone = compute_marc_zone(src, dest);
 628
 629           /* TODO: actually set the zone */
 630           alert(zone);
 631         }
 632       }
 633
 634       /******************************************/
 635       /* Display the ticket (and hide the menu) */
 636       /******************************************/
 637
 638       function go() {
 639         /* To create our "window" onto the scene, we're going to slide the
 640          * SVG off the left-hand side of the screen, and we don't want
 641          * scroll bars to appear. */
 642         document.body.style.overflow = "hidden";
 643         document.body.style.margin = "0";
 644         document.body.style.padding = "0";
 645
 646         const svg = document.querySelector("svg");
 647         const menu = document.getElementById("menu");
 648         svg.style.display = "initial";
 649         menu.style.display = "none";
 650       }
 651
 652       /*****************************************************/
 653       /* Add event handlers for all of the functions above */
 654       /*****************************************************/
 655
 656       const params = new URLSearchParams(document.location.search);
 657       if (params.get("go")) {
 658         /* First unhide the SVG (swap it with the form) */
 659         window.addEventListener("load", go);
 660
 661         /* Center the ticket once when the page has loaded */
 662         window.addEventListener("load", center_ticket);
 663
 664         /* Re-center the ticket when the window is resized */
 665         window.addEventListener("resize", center_ticket);
 666
 667         /* Set the service identifier when the page has loaded */
 668         window.addEventListener("load", set_service_id);
 669
 670         /* Set the service name when the page has loaded */
 671         window.addEventListener("load", set_service_name);
 672
 673         /* Set the security code text when the page has loaded */
 674         window.addEventListener("load", set_code);
 675
 676         /* Center the security code text when the page has loaded; in
 677          * particular, after we set the code. */
 678         window.addEventListener("load", center_code);
 679
 680         /* Set the ticket expiration date/time upon page load */
 681         window.addEventListener("load", set_ticket_expiry);
 682
 683        /* Set the MARC Train zone, if applicable */
 684        window.addEventListener("load", set_marc_zone);
 685
 686         /* Swap colors when the screen is tapped */
 687         document.body.addEventListener("click", swap_colors);
 688       }
 689
 690     </script>
 691   </body>
 692 </html>