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 Regular";
  50         src:
  51           url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
  52       }
  53
  54       #servicename, #tickettime, #ticketdate {
  55         font-family: "CharmBypass Regular";
  56       }
  57
  58       @font-face {
  59         font-family: "CharmBypass Bold";
  60         src:
  61           url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
  62       }
  63
  64       #serviceletter {
  65         font-family: "CharmBypass Bold";
  66       }
  67
  68       /************************/
  69       /* Scrolling animations */
  70       /************************/
  71
  72       /* Bus */
  73       @keyframes busroll {
  74         from {
  75           transform: translateX(0%);
  76         }
  77         to {
  78           transform: translateX(100%);
  79         }
  80       }
  81
  82       #bus {
  83         animation: busroll 23s linear infinite;
  84       }
  85
  86
  87       /* Tram */
  88       @keyframes tramroll {
  89         from {
  90           transform: translateX(0%);
  91         }
  92         to {
  93           transform: translateX(100%);
  94         }
  95       }
  96
  97       #tram {
  98         animation: tramroll 17s linear infinite;
  99       }
 100
 101
 102       /* Tram */
 103       @keyframes trainroll {
 104         from {
 105           transform: translateX(0%);
 106         }
 107         to {
 108           transform: translateX(100%);
 109         }
 110       }
 111
 112       #train {
 113         animation: trainroll 11s linear infinite;
 114       }
 115
 116
 117       /* Clouds */
 118       @keyframes cloudsfloat {
 119         from {
 120           transform: translateX(0%);
 121         }
 122         to {
 123           transform: translateX(-50%);
 124         }
 125       }
 126
 127       #clouds {
 128         animation: cloudsfloat 40s linear infinite;
 129       }
 130
 131       @keyframes cloudscopyfloat {
 132         from {
 133           transform: translateX(0%);
 134         }
 135         to {
 136           transform: translateX(-50%);
 137         }
 138       }
 139
 140       #cloudscopy {
 141         animation: cloudscopyfloat 40s linear infinite;
 142       }
 143
 144
 145       /* Trees */
 146       @keyframes treespass {
 147         from {
 148           transform: translateX(0%);
 149         }
 150         to {
 151           transform: translateX(-50%);
 152         }
 153       }
 154
 155       #trees {
 156         /* The trees move a little faster than the clouds */
 157         animation: treespass 30s linear infinite;
 158       }
 159
 160       @keyframes treescopypass {
 161         from {
 162           transform: translateX(0%);
 163         }
 164         to {
 165           transform: translateX(-50%);
 166         }
 167       }
 168
 169       #treescopy {
 170         /* The trees move a little faster than the clouds */
 171         animation: treescopypass 30s linear infinite;
 172       }
 173     </style>
 174   </head>
 175
 176   <body>
 177     @SVGDATA@
 178
 179     <script>
 180       /******************************************/
 181       /* First, set up the ticket date and time */
 182       /******************************************/
 183
 184       /* There are two parameters, time and date, that we store in one
 185        * underlying "date" variable. Default both to an hour from now.  This
 186        * is sensible because the date/time shown on your ticket is its
 187        * EXPIRATION time, and tickets are valid for two hours. Having it
 188        * show one hour in the future means that you didn't just use your
 189        * ticket a second ago (if you just got caught on the light rail, for
 190        * example) but also means that it's not expiring for a while.
 191        */
 192       const date = new Date();
 193
 194       /* Add an hour. We use the low-level get/setTime to change the number
 195        * of milliseconds since the epoch that this date represents. Obviously
 196        * correct, and avoids all suspicious corner cases (well, for a few more
 197        * decades). */
 198       date.setTime(date.getTime() + (60*60*1000));
 199
 200       /* All <text> elements produced by inkscape contain a single <tspan>
 201        * that itself contains the actual text. */
 202       tt = document.getElementById("tickettime");
 203       tt.firstChild.textContent = date.toLocaleTimeString();
 204
 205       td = document.getElementById("ticketdate");
 206       const dateopts = {
 207         day: "2-digit",
 208         month: "2-digit",
 209         year: "2-digit"
 210       };
 211       td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
 212
 213
 214       /************************************************************/
 215       /* Second, add the onclick handler for the night/day switch */
 216       /************************************************************/
 217
 218       /* We always start in "day" mode */
 219       is_day = true;
 220
 221       function set_day() {
 222         sky.style.fill = "#efb02f";
 223       }
 224
 225       function set_night() {
 226         sky.style.fill = "#143b66";
 227       }
 228
 229       function swap_colors() {
 230         if (is_day) {
 231           set_night();
 232           is_day = false;
 233         }
 234         else {
 235           set_day();
 236           is_day = true;
 237         }
 238       }
 239
 240       document.body.addEventListener("click", swap_colors);
 241     </script>
 242   </body>
 243 </html>