X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=61578bd3ddb5aebef95767ae34ec8d49ebc097b6;hb=daa695e8bd114cd6a323cb4ae2499d26e9abb349;hp=0bec5e720a4efcf39df02f38e87054e7866d37c1;hpb=238dc11dae659a7bd7207cc606f60e7801fd5409;p=charm-bypass.git diff --git a/index.html.in b/index.html.in index 0bec5e7..61578bd 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; } /************************/ @@ -255,75 +255,97 @@ svg.style.left = (svg.getBoundingClientRect().left + delta) + "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 */ + /****************************************/ - /*************************/ - /* Set the security code */ - /*************************/ + function set_code() { + /* All elements produced by inkscape contain a single + * that itself contains the actual text. This does something real + * sneaky, and actually OVERWRITES that tspan with our own text + * content. This turns out to be what we need anyway because trying + * to center a (display: inline) tspan is a pain in the butt. */ + const ct = document.getElementById("codetext"); - /* All elements produced by inkscape contain a single - * that itself contains the actual text. */ - 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"]; - /* Get the "code" from the querystring if it's there */ - let params = new URLSearchParams(document.location.search); - if (params.get("code")) { - ct.firstChild.textContent = params.get("code"); + /* 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; + } } - 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.firstChild.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 code_delta = 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")) + code_delta); } + /*****************************************/ /* 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)); + + /* All elements produced by inkscape contain a single + * that itself contains the actual text. */ + tt = document.getElementById("tickettime").firstChild; + 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; @@ -347,6 +369,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);