Feat: Add white version

RingoMar · RingoMar · commit 2da5d18816f8 · 2024-11-25T23:20:51.000-04:00
diff --git a/down.html b/down.html
@@ -14,11 +14,11 @@
     <meta name="author" content="ringomar, github.com/ringomar" />
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     <title>Remaining Timer</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styles_down.css" />
 </head>
 
 <body>
-    <div class="container">
+    <div class="container shadow">
         <div class="hours_time num">00</div>
         <div class="min_time num">00</div>
         <div class="sec_time num">00</div>
@@ -27,13 +27,70 @@
         <div class="sec telem">SECONDS</div>
     </div>
 
+    <script>
+        // configurations
+
+        /*
+        Stroke: Number
+        Set the outline of the numbers & text of the timer
+        */
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const timestampStroke = new URLSearchParams(window.location.search).get(
+                "stroke"
+            );
+            const resetWhite = new URLSearchParams(window.location.search).get(
+                "white"
+            );
+
+            const containerSelect = document.querySelectorAll(".num");
+            const containers = document.querySelectorAll(".container");
+
+
+
+            if (resetWhite === "true") {
+                containers.forEach(i => {
+                    i.classList.remove('shadow');
+                    
+                    i.style.webkitTextStroke = "0 !important";
+                    i.style.textStroke = "0 !important";
+                });
+
+            } else {
+
+                const strokeAmount =
+                    timestampStroke === null || isNaN(timestampStroke) || timestampStroke > 10
+                        ? "2"
+                        : timestampStroke;
+                containerSelect.forEach(i => {
+
+                    i.style.webkitTextStroke = `${strokeAmount}px black`;
+                    i.style.textStroke = `${strokeAmount}px black`;
+                });
+            }
+        });
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const whiteparams = new URLSearchParams(window.location.search).get(
+                "white"
+            );
+
+            if (whiteparams) {
+                document.getElementsByClassName("container")[0].style.textShadow = "None !important";
+            }
+        });
+
+    </script>
+
     <script>
         const s = document.querySelector(".sec_time");
         const m = document.querySelector(".min_time");
         const h = document.querySelector(".hours_time");
 
         function pad(num) {
-            return (num < 10 ? "0" : "") + num;
+            return ((num < 10 ? "0" : "") + num);
         }
 
         function updateTimer() {
diff --git a/styles_down.css b/styles_down.css
@@ -0,0 +1,65 @@
+body {
+    /* background-color: #212121; */
+    font-family: Arial, sans-serif;
+    margin: 0;
+    color: white;
+}
+
+.no-shadow {
+
+    text-shadow: None !important;
+    -webkit-text-stroke: None !important;
+}
+
+.shadow {
+    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
+    -webkit-text-stroke: 2px black;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1.5fr 0.5fr;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "hours_time min_time sec_time"
+        "hours min sec";
+    justify-content: space-evenly;
+}
+
+.hours_time {
+    grid-area: hours_time;
+}
+
+.min_time {
+    grid-area: min_time;
+}
+
+.sec_time {
+    grid-area: sec_time;
+}
+
+.hours {
+    grid-area: hours;
+}
+
+.min {
+    grid-area: min;
+}
+
+.sec {
+    grid-area: sec;
+}
+
+.num {
+    text-align: center;
+    font-size: 4cm;
+    font-weight: 600;
+}
+
+.telem {
+    text-align: center;
+    font-size: calc(0.3 * 4cm);
+    font-weight: 600;
+}
