4 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
12 * Reset styles for the html and body elements, the only two HTML
24 text-decoration: none;
25 vertical-align: baseline;
26 background: transparent;
29 /* The blinking fade in/out animation for the ticket date and time */
42 #tickettime, #ticketdate {
43 animation: blink
2s linear infinite;
46 /* Define, load, and specify the custom font we use for the ticket
47 * date, time, and service name. */
49 font-family: "CharmBypass Ticket Text";
51 url("data:font/woff2;base64,@TICKETFONT@") format("woff2")
54 #servicename, #tickettime, #ticketdate {
55 font-family: "CharmBypass Ticket Text" !important;
58 /************************/
59 /* Scrolling animations */
60 /************************/
65 transform: translateX(
0%);
68 transform: translateX(
100%);
73 animation: busroll
20s linear infinite;
80 transform: translateX(
0%);
83 transform: translateX(
100%);
88 animation: tramroll
15s linear infinite;
93 @keyframes trainroll {
95 transform: translateX(
0%);
98 transform: translateX(
100%);
103 animation: trainroll
10s linear infinite;
108 @keyframes cloudsfloat {
110 transform: translateX(
0%);
113 transform: translateX(-
50%);
118 animation: cloudsfloat
40s linear infinite;
121 @keyframes cloudscopyfloat {
123 transform: translateX(
0%);
126 transform: translateX(-
50%);
131 animation: cloudscopyfloat
40s linear infinite;
136 @keyframes treespass {
138 transform: translateX(
0%);
141 transform: translateX(-
50%);
146 /* The trees move a little faster than the clouds */
147 animation: treespass
30s linear infinite;
150 @keyframes treescopypass {
152 transform: translateX(
0%);
155 transform: translateX(-
50%);
160 /* The trees move a little faster than the clouds */
161 animation: treescopypass
30s linear infinite;
170 /******************************************/
171 /* First, set up the ticket date and time */
172 /******************************************/
174 /* There are two parameters, time and date, that we store in one
175 * underlying "date" variable. Default both to an hour from now. This
176 * is sensible because the date/time shown on your ticket is its
177 * EXPIRATION time, and tickets are valid for two hours. Having it
178 * show one hour in the future means that you didn't just use your
179 * ticket a second ago (if you just got caught on the light rail, for
180 * example) but also means that it's not expiring for a while.
182 const date = new Date();
184 /* Add an hour. We use the low-level get/setTime to change the number
185 * of milliseconds since the epoch that this date represents. Obviously
186 * correct, and avoids all suspicious corner cases (well, for a few more
188 date.setTime(date.getTime() + (
60*
60*
1000));
190 /* All
<text> elements produced by inkscape contain a single
<tspan>
191 * that itself contains the actual text. */
192 tt = document.getElementById("tickettime");
193 tt.firstChild.textContent = date.toLocaleTimeString();
195 td = document.getElementById("ticketdate");
201 td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
204 /************************************************************/
205 /* Second, add the onclick handler for the night/day switch */
206 /************************************************************/
208 /* We always start in "day" mode */
212 sky.style.fill = "#efb02f";
215 function set_night() {
216 sky.style.fill = "#
143b66";
219 function swap_colors() {
230 document.body.addEventListener("click", swap_colors);