From: Michael Orlitzky Date: Mon, 8 Sep 2025 21:03:35 +0000 (-0400) Subject: index.html.in: simplify day/night toggle X-Git-Url: http://gitweb.michael.orlitzky.com/?a=commitdiff_plain;h=de60ae6e79101154d74cecbb44141076d0322c95;p=charm-bypass.git index.html.in: simplify day/night toggle Whatever problem was preventing us from swapping day/night colors via CSS classes is gone. Or at least hiding in a browser that I don't have in front of me. --- diff --git a/index.html.in b/index.html.in index 2c301cd..482fa14 100644 --- a/index.html.in +++ b/index.html.in @@ -57,6 +57,11 @@ display: none; } + /* Night-time color for the sky (day is default). */ + #sky.night { + fill: #143b66; + } + /* The blinking fade in/out animation for the ticket date and time */ @keyframes blink { 25% { opacity: 0.5; } @@ -711,27 +716,16 @@ /** - * Swap the day/night sky colors. - * - * We use CSS classes to keep track of the current state because - * it's a tiny bit cleaner than a global variable, but for some - * reason we can't use those same classes to actually change the - * color. (The classes, change, but the color doesn't.) Rather - * than waste time trying to explain this, we just set the "fill" - * attribute ourselves whenever we swap classes. + * Swap day/night colors by adding/removing the "night" class + * to/from the sky element. */ function swap_day_night() { const sky = document.getElementById("sky"); - if (sky.getAttribute("class") === "night") { - sky.setAttribute("fill", "#efb02f"); - sky.setAttribute("class", "day"); + if (sky.getAttribute("class") == "night") { + sky.setAttribute("class", ""); } else { - /* Put this case second so that the first time the - * screen is tapped (when there are no classes on - * the sky element) the color still changes. */ - sky.setAttribute("fill", "#143b66"); sky.setAttribute("class", "night"); } }