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 Regular";
51 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
54 #servicename, #tickettime, #ticketdate {
55 font-family: "CharmBypass Regular";
59 font-family: "CharmBypass Bold";
61 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
65 font-family: "CharmBypass Bold";
68 /************************/
69 /* Scrolling animations */
70 /************************/
75 transform: translateX(
0%);
78 transform: translateX(
100%);
83 animation: busroll
23s linear infinite;
90 transform: translateX(
0%);
93 transform: translateX(
100%);
98 animation: tramroll
17s linear infinite;
103 @keyframes trainroll {
105 transform: translateX(
0%);
108 transform: translateX(
100%);
113 animation: trainroll
11s linear infinite;
118 @keyframes cloudsfloat {
120 transform: translateX(
0%);
123 transform: translateX(-
50%);
128 animation: cloudsfloat
40s linear infinite;
131 @keyframes cloudscopyfloat {
133 transform: translateX(
0%);
136 transform: translateX(-
50%);
141 animation: cloudscopyfloat
40s linear infinite;
146 @keyframes treespass {
148 transform: translateX(
0%);
151 transform: translateX(-
50%);
156 /* The trees move a little faster than the clouds */
157 animation: treespass
30s linear infinite;
160 @keyframes treescopypass {
162 transform: translateX(
0%);
165 transform: translateX(-
50%);
170 /* The trees move a little faster than the clouds */
171 animation: treescopypass
30s linear infinite;
176 @keyframes cityscroll {
178 transform: translateX(
0%);
181 transform: translateX(-
50%);
186 /* The city moves faster than the clouds but slower
188 animation: cityscroll
35s linear infinite;
191 @keyframes citycopyscroll {
193 transform: translateX(
0%);
196 transform: translateX(-
50%);
201 /* The city moves faster than the clouds but slower
203 animation: citycopyscroll
35s linear infinite;
212 /******************************************/
213 /* First, set up the ticket date and time */
214 /******************************************/
216 /* There are two parameters, time and date, that we store in one
217 * underlying "date" variable. Default both to an hour from now. This
218 * is sensible because the date/time shown on your ticket is its
219 * EXPIRATION time, and tickets are valid for two hours. Having it
220 * show one hour in the future means that you didn't just use your
221 * ticket a second ago (if you just got caught on the light rail, for
222 * example) but also means that it's not expiring for a while.
224 const date = new Date();
226 /* Add an hour. We use the low-level get/setTime to change the number
227 * of milliseconds since the epoch that this date represents. Obviously
228 * correct, and avoids all suspicious corner cases (well, for a few more
230 date.setTime(date.getTime() + (
60*
60*
1000));
232 /* All
<text> elements produced by inkscape contain a single
<tspan>
233 * that itself contains the actual text. */
234 tt = document.getElementById("tickettime");
235 tt.firstChild.textContent = date.toLocaleTimeString();
237 td = document.getElementById("ticketdate");
243 td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
246 /************************************************************/
247 /* Second, add the onclick handler for the night/day switch */
248 /************************************************************/
250 /* We always start in "day" mode */
254 sky.style.fill = "#efb02f";
257 function set_night() {
258 sky.style.fill = "#
143b66";
261 function swap_colors() {
272 document.body.addEventListener("click", swap_colors);