Update static/embed.js

static/embed.js

@@ -1,47 +1,64 @@
+/*  embed.js  –– digital-clock styling  */
 (() => {
   const API = "https://ntdservices-debt-clock.hf.space/api/debt";
   const CLS = "ntd-debt-clock";
 
+  /* ── 1. load a free 7-segment web-font once per page ───────────── */
+  if (!document.getElementById("dseg-font")) {
+    const link = document.createElement("link");
+    link.id   = "dseg-font";
+    link.rel  = "stylesheet";
+    link.href = "https://cdn.jsdelivr.net/npm/@fontsource-variable/dseg7-classic/index.min.css";
+    document.head.appendChild(link);
+  }
+
+  /* ── 2. mount logic ─────────────────────────────────────────────── */
   function mount(el) {
     Object.assign(el.style, {
-      font: "bold 2.5rem monospace",
-      color: "#0f0",
-      background: "#000a",
-      padding: "12px 20px",
-      borderRadius: "8px",
-      boxShadow: "0 0 10px #0f0",
+      font: "900 5.5rem 'DSEG7 Classic', monospace",
+      color: "#ffb400",                     // amber LEDs
+      textShadow: "0 0 6px rgba(255,180,0,.8)",
+      background: "rgba(0,0,0,.65)",
+      padding: "8px 14px",
+      borderRadius: "6px",
       whiteSpace: "nowrap",
+      letterSpacing: ".08em",
       position: "absolute",
-      top: "10%",
+      top: "40%",
       left: "50%",
-      transform: "translateX(-50%)",
+      transform: "translate(-50%, -50%)",
+      userSelect: "none",
     });
 
+    /* fetch current debt + per-second rate */
     fetch(API)
-      .then((r) => r.json())
-      .then((d) => {
+      .then(r => r.json())
+      .then(d => {
         let debt = d.startingDebt;
         const rate = d.ratePerSecond;
         let last = performance.now();
 
-        function tick(now) {
-          const dt = (now - last) / 1000;
+        /* update 4×/sec for a mild “tick” */
+        setInterval(() => {
+          const now = performance.now();
+          const dt  = (now - last) / 1000;
           last = now;
           debt += rate * dt;
-          el.textContent = "$" + debt.toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          });
-          requestAnimationFrame(tick);
-        }
 
-        requestAnimationFrame(tick);
+          /* split into 3-digit groups to mimic signage */
+          const parts = Math.round(debt)
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+            .split(",");
+
+          el.textContent = "$" + parts.join(",");
+        }, 250);
       })
-      .catch((err) => {
-        console.error("Failed to fetch debt:", err);
+      .catch(err => {
+        console.error("Debt fetch failed:", err);
         el.textContent = "N/A";
       });
   }
 
   document.querySelectorAll("." + CLS).forEach(mount);
-})();
+})();