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;
30 /* To create our "window" onto the scene, we're going to slide the
31 * SVG off the left-hand side of the screen, and we don't want
32 * scroll bars to appear. */
37 /* Set the height to
100% of the screen, which we'll keep; and the
38 * initial position to (
0,
0), which we're going to change
39 * every time the window is resized, because the exact amount
40 * that we have to slide the SVG to the left to get the ticket
41 * into the center will change. */
48 /* The blinking fade in/out animation for the ticket date and time */
61 #tickettime, #ticketdate {
62 /*
300 two-second blinks is ten minutes */
63 animation: blink
2s linear
300;
66 /* Define, load, and specify the custom font we use for the ticket
67 * date, time, and service name. */
69 font-family: "CharmBypass Regular";
71 url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
74 #servicename, #tickettime, #ticketdate {
75 font-family: "CharmBypass Regular";
79 font-family: "CharmBypass Bold";
81 url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
85 font-family: "CharmBypass Bold";
88 /************************/
89 /* Scrolling animations */
90 /************************/
95 transform: translateX(
0%);
98 transform: translateX(
100%);
103 animation: busroll
23s linear infinite;
108 @keyframes tramroll {
110 transform: translateX(
0%);
113 transform: translateX(
100%);
118 animation: tramroll
17s linear infinite;
123 @keyframes trainroll {
125 transform: translateX(
0%);
128 transform: translateX(
100%);
133 animation: trainroll
11s linear infinite;
138 @keyframes cloudsfloat {
140 transform: translateX(
0%);
143 transform: translateX(-
50%);
148 animation: cloudsfloat
40s linear infinite;
151 @keyframes cloudscopyfloat {
153 transform: translateX(
0%);
156 transform: translateX(-
50%);
161 animation: cloudscopyfloat
40s linear infinite;
166 @keyframes treespass {
168 transform: translateX(
0%);
171 transform: translateX(-
50%);
176 /* The trees move a little faster than the clouds */
177 animation: treespass
30s linear infinite;
180 @keyframes treescopypass {
182 transform: translateX(
0%);
185 transform: translateX(-
50%);
190 /* The trees move a little faster than the clouds */
191 animation: treescopypass
30s linear infinite;
196 @keyframes cityscroll {
198 transform: translateX(
0%);
201 transform: translateX(-
50%);
206 /* The city moves faster than the clouds but slower
208 animation: cityscroll
35s linear infinite;
211 @keyframes citycopyscroll {
213 transform: translateX(
0%);
216 transform: translateX(-
50%);
221 /* The city moves faster than the clouds but slower
223 animation: citycopyscroll
35s linear infinite;
233 /***********************************************/
234 /* First, center the ticket within the browser */
235 /***********************************************/
237 function center_ticket() {
238 /* We're relying on the SVG being the full height of the
239 * viewport already, and on the aspect ratio being
240 * preserved. First, find the center of the ticket. */
241 const r = document.getElementById("ticket").getBoundingClientRect();
242 const c = r.left + (r.width /
2);
244 /* That's the center-line of the ticket. We want to move it to
245 * the center-line of the viewport. */
246 const vc = document.documentElement.clientWidth /
2;
248 /* This is how much we need to translate the SVG */
249 const delta = vc - c;
251 /* But before we can set the absolute left-coordinate of the
252 * SVG, we need to know where it is now. Note: without the
253 * "px" this doesn't default to pixels like CSS does. */
254 const svg = document.querySelector("svg");
255 svg.style.left = (svg.getBoundingClientRect().left + delta) + "px";
258 /* Re-center it when the window is resized */
259 window.addEventListener("resize", center_ticket);
261 /* Center it once when the page has loaded, too */
262 window.addEventListener("load", center_ticket);
265 /*************************/
266 /* Set the security code */
267 /*************************/
269 /* All
<text> elements produced by inkscape contain a single
<tspan>
270 * that itself contains the actual text. */
271 const ct = document.getElementById("codetext");
273 /* Get the "code" from the querystring if it's there */
274 let params = new URLSearchParams(document.location.search);
275 if (params.get("code")) {
276 ct.firstChild.textContent = params.get("code");
279 /* Otherwise, use a random code */
280 const bucket = ["
0","
1","
2","
3","
4","
5","
6","
7","
8","
9",
281 "A","B","C","D","E","F","G","H","I","J",
282 "K","L","M","N","O","P","Q","R","S","T",
283 "U","V","W","X","Y","Z"];
285 /* Two random ints between
0 and
35 */
286 const i1 = Math.floor(Math.random() *
36);
287 const i2 = Math.floor(Math.random() *
36);
288 const d1 = bucket[i1];
289 const d2 = bucket[i2];
290 ct.firstChild.textContent = d1 + d2;
293 /*****************************************/
294 /* Next, set up the ticket date and time */
295 /*****************************************/
297 /* There are two parameters, time and date, that we store in one
298 * underlying "date" variable. Default both to an hour and a
299 * half from now. This is what the CharmPass app does for
302 const date = new Date();
304 /* Add an hour and a half. We use the low-level get/setTime to
305 * change the number of milliseconds since the epoch that this
306 * date represents. Obviously correct, and avoids all suspicious
307 * corner cases (well, for a few more decades). */
308 date.setTime(date.getTime() + (
90*
60*
1000));
310 /* All
<text> elements produced by inkscape contain a single
<tspan>
311 * that itself contains the actual text. */
312 tt = document.getElementById("tickettime");
313 tt.firstChild.textContent = date.toLocaleTimeString();
315 const td = document.getElementById("ticketdate");
321 td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
324 /*************************************************************/
325 /* Finally, add the onclick handler for the night/day switch */
326 /*************************************************************/
328 /* We always start in "day" mode */
332 sky.style.fill = "#efb02f";
335 function set_night() {
336 sky.style.fill = "#
143b66";
339 function swap_colors() {
350 document.body.addEventListener("click", swap_colors);