Feat: Added nightly and fixed css / time setter

RingoMar · Jan 14, 2025 · ad5622b · ad5622b
1 parent e6beeac
commit ad5622b
Show file tree

Hide file tree

Showing 7 changed files with 279 additions and 5 deletions.
diff --git a/extended/index.html b/extended/index.html
@@ -103,7 +103,6 @@
             const getDays = Math.floor(
                 (Math.floor(Date.now() / 1000) - startTimeUnix) / 86400
             );
-            console.log(getDays);
 
             if (getDays > 0) {
                 document.querySelector(".daysContaienr").classList.remove("hidden");

diff --git a/index.html b/index.html
@@ -84,7 +84,16 @@
             }
         }
 
-        const timestampParam = new URLSearchParams(window.location.search).get("time");
+        let timestampParam = new URLSearchParams(window.location.search)
+
+        if (!timestampParam.has("time")) {
+            window.location.search = `${window.location.search
+                }?time=${new Date().toISOString()}`;
+        }
+
+        timestampParam = timestampParam.get("time")
+
+
         var startTimeUnix = timestampParam
             ? Date.parse(timestampParam) / 1000
             : Date.parse(new Date().toISOString()) / 1000;

diff --git a/nightly/index.html b/nightly/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="language" content="EN" />
+    <meta name="keywords"
+        content="elapsed, obs, timer, countup, count, kai, kai cenat, elden ring, sunny, feelssunnyman, stream, streamer, chat, overlay, udner cam, white, count, countup  " />
+    <meta name="description" content="An elapse time counter for OBS" />
+    <meta name="subject" content="Elapse Time" />
+    <meta name="copyright" content="RingoMar" />
+    <meta name="url" content="ringomar.github.io/timer" />
+    <meta data-rh="true" name="twitter:card" content="summary_large_image" />
+    <meta data-rh="true" property="og:image"
+        content="https://ringomar.github.io/TheTimekeeper/img/docusaurus-social-card.jpg" />
+    <meta data-rh="true" name="twitter:image"
+        content="https://ringomar.github.io/TheTimekeeper/img/docusaurus-social-card.jpg" />
+    <meta data-rh="true" property="og:url" content="https://ringomar.github.io/timer" />
+    <meta data-rh="true" property="og:locale" content="en" />
+    <meta name="rating" content="General" />
+    <meta name="author" content="ringomar, github.com/ringomar" />
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
+    <title>Elapsed Timer - Nightly</title>
+    <link rel="stylesheet" href="./nightly.css" />
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0GS2KLZXCG"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+        gtag("js", new Date());
+
+        gtag("config", "G-0GS2KLZXCG");
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="hours_time num">00</div>
+        <div class="min_time num">00</div>
+        <div class="sec_time num">00</div>
+        <div class="hours telem">HOURS</div>
+        <div class="min telem">MINUTES</div>
+        <div class="sec telem">SECONDS</div>
+    </div>
+
+    <script src="./urlMods.js"></script>
+
+    <script src="./modifactions.js"></script>
+
+    <script>
+        const h = document.querySelector(".hours_time");
+        const m = document.querySelector(".min_time");
+        const s = document.querySelector(".sec_time");
+        function pad(num) {
+            if (num === -1) {
+                return "00";
+            } else {
+                return (num < 10 ? "0" : "") + Math.round(num);
+            }
+        }
+
+        let timestampParam = new URLSearchParams(window.location.search);
+        const stopParam = new URLSearchParams(window.location.search).get("stop");
+
+        if (!timestampParam.has("time")) {
+            window.location.search = `${window.location.search
+                }?time=${new Date().toISOString()}`;
+        }
+
+        timestampParam = timestampParam.get("time");
+
+        var startTimeUnix = timestampParam
+            ? Date.parse(timestampParam) / 1000
+            : Date.parse(new Date().toISOString()) / 1000;
+
+        function updateTimer() {
+            let currentTime;
+
+            if (stopParam) {
+                const parsedTime = Date.parse(stopParam);
+                if (!isNaN(parsedTime)) {
+                    currentTime = parsedTime / 1000; // Convert milliseconds to seconds
+                } else {
+                    console.error("Invalid date format for stopParam:", stopParam);
+                    currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
+                }
+            } else {
+                currentTime = Math.floor(Date.now() / 1000); // Fallback to current time
+            }
+
+            // Calculate elapsed time
+            var elapsedTime = currentTime - startTimeUnix;
+
+            var hours = Math.floor(elapsedTime / 3600);
+            var minutes = Math.floor((elapsedTime % 3600) / 60);
+            var seconds = elapsedTime % 60;
+
+            h.textContent = pad(hours);
+            m.textContent = pad(minutes);
+            s.textContent = pad(seconds);
+        }
+
+        updateTimer();
+
+        setInterval(updateTimer, 1000);
+    </script>
+</body>
+
+</html>
diff --git a/nightly/modifactions.js b/nightly/modifactions.js
@@ -0,0 +1,36 @@
+// @ts-nocheck
+
+const contain = document.querySelector(".container");
+
+contain.addEventListener(
+  "contextmenu",
+  function (ev) {
+    ev.preventDefault();
+
+    let stopParam = new URLSearchParams(window.location.search);
+
+    if (stopParam.has("stop")) {
+      stopParam.delete("stop");
+    } else {
+      stopParam.set("stop", new Date().toISOString());
+    }
+
+    window.location.search = stopParam.toString();
+
+    return false;
+  },
+  false
+);
+
+document.addEventListener("keydown", function (event) {
+  // Check if the pressed key is 'r' (key code 82)
+  if (event.key === "r" || event.keyCode === 82) {
+    let stopParam = new URLSearchParams(window.location.search);
+
+    if (stopParam.has("stop")) {
+      stopParam.set("stop", new Date().toISOString());
+    }
+    stopParam.set("time", new Date().toISOString());
+    window.location.search = stopParam.toString();
+  }
+});
diff --git a/nightly/nightly.css b/nightly/nightly.css
@@ -0,0 +1,98 @@
+html {
+    user-select: none;
+}
+
+body {
+    /* background-color: #212121; */
+    font-family: Arial, sans-serif;
+    margin: 0;
+    color: white;
+}
+
+.container {
+
+    transition: all 1s ease-in;
+    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;
+    overflow: hidden;
+}
+
+.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 {
+
+    color: rgba(101, 150, 159);
+    /* text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8); */
+    -webkit-text-stroke: 2px #4A5E79;
+    text-align: center;
+    font-size: 4cm;
+    font-weight: 600;
+    animation: jello-load 1s ease-in 0s 1 normal none;
+}
+
+@keyframes jello-load {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+        transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.telem {
+    color: #79ADAB;
+    /* -webkit-text-stroke: 2px #FF3434; */
+    text-align: center;
+    font-size: calc(0.3 * 4cm);
+    font-weight: 600;
+}
diff --git a/nightly/urlMods.js b/nightly/urlMods.js
@@ -0,0 +1,18 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const timestampStroke = new URLSearchParams(window.location.search).get(
+    "stroke"
+  );
+  const containerSelect = document.querySelectorAll(".num");
+
+  const strokeAmount =
+    // @ts-ignore
+    timestampStroke === null || isNaN(timestampStroke) || timestampStroke > 10
+      ? "2"
+      : timestampStroke;
+  containerSelect.forEach((i) => {
+    // @ts-ignore
+    i.style.webkitTextStroke = `${strokeAmount}px #a6ffd8`;
+    // @ts-ignore
+    i.style.textStroke = `${strokeAmount}px #a6ffd8`;
+  });
+});
diff --git a/style.css b/style.css
@@ -15,8 +15,6 @@ body {
         "hours_time min_time sec_time"
         "hours min sec";
     justify-content: space-evenly;
-    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;
 }
 
 .hours_time {
@@ -44,13 +42,17 @@ body {
 }
 
 .num {
+    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;
     text-align: center;
     font-size: 4cm;
     font-weight: 600;
 }
 
 .telem {
+    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.8);
+    -webkit-text-stroke: 1.3px rgb(20, 20, 20);
     text-align: center;
     font-size: calc(0.3 * 4cm);
     font-weight: 600;
-}
+}