init

2025-05-24 17:58:54 -05:00 · 2025-05-24 17:58:54 -05:00 · 8631733274
commit 8631733274
14 changed files with 1719 additions and 0 deletions
--- a/clock/index.html
+++ b/clock/index.html
@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Large Web Clock</title>
+  <meta property="og:title" content="Large Web Clock" />
+  <meta property="og:image" content="http://shots.wayl.one/shot/?url=https://clock.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=630&selectors=" />
+  <meta property="og:description" content="A large display clock, it just shows the time." />
+  <meta property="og:url" content="https://clock.wayl.one/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="Large Web Clock" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Large Web Clock" />
+  <meta name="twitter:description" content="A large display clock, it just shows the time." />
+  <meta name="twitter:image" content="http://shots.wayl.one/shot/?url=https://clock.wayl.one/&height=630&width=1200&scaled_width=1200&scaled_height=640&selectors=" />
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: black;
+
+      background: black url('/triangles.svg') center/cover;
+      color: lime;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: monospace;
+      user-select: none;
+    }
+
+    #clock {
+      font-size: 10vw;
+      padding: 0 5vw;
+      text-align: center;
+      white-space: nowrap; /* Prevent line breaks */
+    }
+  </style>
+</head>
+<body>
+  <div id="clock">12:00:00&nbsp;AM</div>
+
+  <script>
+    const clock = document.getElementById("clock");
+
+    function updateClock() {
+      const now = new Date();
+      let hours = now.getHours();
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      const ampm = hours >= 12 ? "PM" : "AM";
+
+      hours = hours % 12;
+      hours = hours ? hours : 12; // Convert 0 to 12
+
+      const formatted = `${String(hours).padStart(2, "0")}:${minutes}:${seconds}&nbsp;${ampm}`;
+      clock.innerHTML = formatted; // innerHTML to support &nbsp;
+    }
+
+    setInterval(updateClock, 1000);
+    updateClock();
+
+    // Wake Lock support
+    let wakeLock = null;
+    async function requestWakeLock() {
+      try {
+        if ('wakeLock' in navigator) {
+          wakeLock = await navigator.wakeLock.request('screen');
+          console.log("Wake lock acquired");
+        }
+      } catch (err) {
+        console.error("Wake lock error:", err);
+      }
+    }
+
+    document.addEventListener("visibilitychange", () => {
+      if (wakeLock !== null && document.visibilityState === "visible") {
+        requestWakeLock();
+      }
+    });
+
+    requestWakeLock();
+  </script>
+</body>
+</html>
+