src/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       /* The blinking fade in/out animation for the ticket date and time */
  30       @keyframes blink {
  31         25% {
  32           opacity: 0.5;
  33         }
  34         50% {
  35           opacity: 0;
  36         }
  37         75% {
  38           opacity: 0.5;
  39         }
  40       }
  41
  42       #tickettime, #ticketdate {
  43         animation: blink 2s linear infinite;
  44       }
  45
  46       /* Define, load, and specify the custom font we use for the ticket
  47        * date, time, and service name. */
  48       @font-face {
  49         font-family: "CharmBypass Ticket Text";
  50         src:
  51           url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
  52       }
  53
  54       #servicename, #tickettime, #ticketdate {
  55         font-family: "CharmBypass Ticket Text" !important;
  56       }
  57
  58       /************************/
  59       /* Scrolling animations */
  60       /************************/
  61       @keyframes busroll {
  62         from {
  63           transform: translate(0%, 0%);
  64         }
  65         to {
  66           transform: translate(100%, 0%);
  67         }
  68       }
  69
  70       #bus {
  71         animation: busroll 20s linear infinite;
  72       }
  73
  74       @keyframes tramroll {
  75         from {
  76           transform: translate(0%, 0%);
  77         }
  78         to {
  79           transform: translate(100%, 0%);
  80         }
  81       }
  82
  83       #tram {
  84         animation: tramroll 15s linear infinite;
  85       }
  86
  87       @keyframes cloudsfloat {
  88         from {
  89           transform: translateX(0%);
  90         }
  91         to {
  92           transform: translateX(-50%);
  93         }
  94       }
  95
  96       #clouds {
  97         animation: cloudsfloat 40s linear infinite;
  98       }
  99
 100       @keyframes cloudscopyfloat {
 101         from {
 102           transform: translateX(0%);
 103         }
 104         to {
 105           transform: translateX(-50%);
 106         }
 107       }
 108
 109       #cloudscopy {
 110         animation: cloudscopyfloat 40s linear infinite;
 111       }
 112     </style>
 113   </head>
 114
 115   <body>
 116     @SVGDATA@
 117
 118     <script>
 119       /******************************************/
 120       /* First, set up the ticket date and time */
 121       /******************************************/
 122
 123       /* There are two parameters, time and date, that we store in one
 124        * underlying "date" variable. Default both to an hour from now.  This
 125        * is sensible because the date/time shown on your ticket is its
 126        * EXPIRATION time, and tickets are valid for two hours. Having it
 127        * show one hour in the future means that you didn't just use your
 128        * ticket a second ago (if you just got caught on the light rail, for
 129        * example) but also means that it's not expiring for a while.
 130        */
 131       const date = new Date();
 132
 133       /* Add an hour. We use the low-level get/setTime to change the number
 134        * of milliseconds since the epoch that this date represents. Obviously
 135        * correct, and avoids all suspicious corner cases (well, for a few more
 136        * decades). */
 137       date.setTime(date.getTime() + (60*60*1000));
 138
 139       /* All <text> elements produced by inkscape contain a single <tspan>
 140        * that itself contains the actual text. */
 141       tt = document.getElementById("tickettime");
 142       tt.firstChild.textContent = date.toLocaleTimeString();
 143
 144       td = document.getElementById("ticketdate");
 145       const dateopts = {
 146         day: "2-digit",
 147         month: "2-digit",
 148         year: "2-digit"
 149       };
 150       td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
 151
 152
 153       /************************************************************/
 154       /* Second, add the onclick handler for the night/day switch */
 155       /************************************************************/
 156
 157       /* We always start in "day" mode */
 158       is_day = true;
 159
 160       function set_day() {
 161         sky.style.fill = "#efb02f";
 162       }
 163
 164       function set_night() {
 165         sky.style.fill = "#143b66";
 166       }
 167
 168       function swap_colors() {
 169         if (is_day) {
 170           set_night();
 171           is_day = false;
 172         }
 173         else {
 174           set_day();
 175           is_day = true;
 176         }
 177       }
 178
 179       document.body.addEventListener("click", swap_colors);
 180     </script>
 181   </body>
 182 </html>