X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=b1d73c312dcc2d364ee38659afab5e8850382541;hb=bdfc1265da676cf3b856e0d48776a08c27ee3129;hp=13a10e350010e8622ba9885abff4f83fbda8bb81;hpb=3c16d5f593e3b76485861c361328b460a6517c17;p=charm-bypass.git diff --git a/index.html.in b/index.html.in index 13a10e3..b1d73c3 100644 --- a/index.html.in +++ b/index.html.in @@ -71,8 +71,8 @@ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2") } - #servicename, #tickettime, #ticketdate { - font-family: "CharmBypass Regular"; + #servicename, #tickettime, #ticketdate, #codetext { + font-family: "CharmBypass Regular", sans-serif; } @font-face { @@ -82,7 +82,7 @@ } #serviceletter { - font-family: "CharmBypass Bold"; + font-family: "CharmBypass Bold", sans-serif; } /************************/ @@ -246,56 +246,99 @@ const vc = document.documentElement.clientWidth / 2; /* This is how much we need to translate the SVG */ - const delta = vc - c; + const hdelta = vc - c; /* But before we can set the absolute left-coordinate of the * SVG, we need to know where it is now. Note: without the * "px" this doesn't default to pixels like CSS does. */ const svg = document.querySelector("svg"); - svg.style.left = (svg.getBoundingClientRect().left + delta) + "px"; + svg.style.left = (svg.getBoundingClientRect().left + hdelta) + "px"; } - /* Re-center it when the window is resized */ - window.addEventListener("resize", center_ticket); - /* Center it once when the page has loaded, too */ - window.addEventListener("load", center_ticket); + /****************************************/ + /* Set and reposition the security code */ + /****************************************/ + + function set_code() { + const ct = document.getElementById("codetext"); + + /* Get the "code" from the querystring if it's there */ + let params = new URLSearchParams(document.location.search); + if (params.get("code")) { + ct.textContent = params.get("code"); + } + else { + /* Otherwise, use a random code */ + const bucket = ["0","1","2","3","4","5","6","7","8","9", + "A","B","C","D","E","F","G","H","I","J", + "K","L","M","N","O","P","Q","R","S","T", + "U","V","W","X","Y","Z"]; + + /* Two random ints between 0 and 35 */ + const i1 = Math.floor(Math.random() * 36); + const i2 = Math.floor(Math.random() * 36); + const d1 = bucket[i1]; + const d2 = bucket[i2]; + ct.textContent = d1 + d2; + } + } + + + function center_code() { + /* Center the security code inside its red box */ + const ct = document.getElementById("codetext"); + + /* First, find the center of the red box */ + const r1 = document.getElementById("codebg").getBoundingClientRect(); + const c1 = r1.left + (r1.width / 2); + + /* Now the center of the code text */ + const r2 = ct.getBoundingClientRect(); + const c2 = r2.left + (r2.width / 2); + + /* What do we add to c2 to make it equal to c1? */ + const hdelta = c1 - c2; + + /* Since this element has an "x" attribute it's easier for + * us to shift that than it is to mess with the "left" style. */ + ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta); + } /*****************************************/ /* Next, set up the ticket date and time */ /*****************************************/ - /* There are two parameters, time and date, that we store in one - * underlying "date" variable. Default both to an hour and a - * half from now. This is what the CharmPass app does for - * one-way tickets. - */ - const date = new Date(); - - /* Add an hour and a half. We use the low-level get/setTime to - * change the number of milliseconds since the epoch that this - * date represents. Obviously correct, and avoids all suspicious - * corner cases (well, for a few more decades). */ - date.setTime(date.getTime() + (90*60*1000)); - - /* All elements produced by inkscape contain a single - * that itself contains the actual text. */ - tt = document.getElementById("tickettime"); - tt.firstChild.textContent = date.toLocaleTimeString(); - - const td = document.getElementById("ticketdate"); - const dateopts = { - day: "2-digit", - month: "2-digit", - year: "2-digit" - }; - td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts); - - - /*************************************************************/ - /* Finally, add the onclick handler for the night/day switch */ - /*************************************************************/ + function set_ticket_expiry() { + /* There are two parameters, time and date, that we store in one + * underlying "date" variable. Default both to an hour and a + * half from now. This is what the CharmPass app does for + * one-way tickets. */ + const date = new Date(); + + /* Add an hour and a half. We use the low-level get/setTime to + * change the number of milliseconds since the epoch that this + * date represents. Obviously correct, and avoids all suspicious + * corner cases (well, for a few more decades). */ + date.setTime(date.getTime() + (90*60*1000)); + + tt = document.getElementById("tickettime"); + tt.textContent = date.toLocaleTimeString(); + + const td = document.getElementById("ticketdate"); + const dateopts = { + day: "2-digit", + month: "2-digit", + year: "2-digit" + }; + td.textContent = date.toLocaleDateString("en-US", dateopts); + } + + + /*********************************************************/ + /* Finally, the onclick handler for the night/day switch */ + /*********************************************************/ /* We always start in "day" mode */ is_day = true; @@ -319,6 +362,32 @@ } } + + /*****************************************************/ + /* Add event handlers for all of the functions above */ + /*****************************************************/ + + /* Center the ticket once when the page has loaded */ + window.addEventListener("load", center_ticket); + + /* Re-center the ticket when the window is resized */ + window.addEventListener("resize", center_ticket); + + /* Set the security code text when the page has loaded */ + window.addEventListener("load", set_code); + + /* Center the security code text when the page has loaded; + in particular, after we set it */ + window.addEventListener("load", center_code); + + /* Re-center the security code when the window is resized, + and in particular after the ticket is re-centered */ + window.addEventListener("resize", center_code); + + /* Set the ticket expiration date/time upon page load */ + window.addEventListener("load", set_ticket_expiry); + + /* Swap colors when the screen is tapped */ document.body.addEventListener("click", swap_colors);