Merge pull request #35 from ok2/codex/adjust-clock-hands-and-markers-size

clock.js

@@ -14,6 +14,7 @@
   function placeMarkers() {
     const clock = document.getElementById('clock');
     let markers = clock.querySelectorAll('.marker');
+    let ticks = clock.querySelectorAll('.tick');
 
     // Create markers if they don't exist yet
     if (markers.length === 0) {
@@ -26,6 +27,19 @@
       markers = clock.querySelectorAll('.marker');
     }
 
+    // Create tick marks once
+    if (ticks.length === 0) {
+      for (let i = 0; i < 256; i++) {
+        const t = document.createElement('div');
+        t.classList.add('tick');
+        if (i % 16 === 0) t.classList.add('big');
+        else if (i % 8 === 0) t.classList.add('mid');
+        // insert before markers so digits sit on top
+        clock.insertBefore(t, clock.firstChild);
+      }
+      ticks = clock.querySelectorAll('.tick');
+    }
+
     // Position markers based on the current clock size
     const radius = clock.offsetWidth / 2 - 20;
     markers.forEach((m, i) => {
@@ -35,6 +49,25 @@
       m.style.left = `${clock.offsetWidth / 2 + x}px`;
       m.style.top = `${clock.offsetHeight / 2 + y}px`;
     });
+
+    // Tick lengths based on radius
+    const lenBig = radius * 0.12;
+    const lenMid = radius * 0.08;
+    const lenSmall = radius * 0.05;
+
+    ticks.forEach((t, i) => {
+      let len = lenSmall;
+      if (t.classList.contains('big')) len = lenBig;
+      else if (t.classList.contains('mid')) len = lenMid;
+      const innerR = radius - len;
+      const angle = (i / 256) * 2 * Math.PI;
+      const x = innerR * Math.sin(angle);
+      const y = -innerR * Math.cos(angle);
+      t.style.height = `${len}px`;
+      t.style.left = `${clock.offsetWidth / 2 + x}px`;
+      t.style.top = `${clock.offsetHeight / 2 + y}px`;
+      t.style.transform = `rotate(${angle}rad)`;
+    });
   }
 
   const lastAngles = {

style.css

@@ -446,9 +446,25 @@ body.fullscreen-clock .clock-label {
   text-shadow: 0 0 6px rgba(0, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7);
   box-shadow: none;
   transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.tick {
+  position: absolute;
+  width: 2px;
+  background: #00ffff;
+  transform-origin: center top;
   z-index: 0;
 }
 
+.tick.mid {
+  background: #66ffff;
+}
+
+.tick.big {
+  background: #ffffff;
+}
+
 .hand {
   position: absolute;
   bottom: 50%;
@@ -462,35 +478,35 @@ body.fullscreen-clock .clock-label {
 
 .hand.xeno {
   width: 2px;
-  height: 40%;
+  height: 42%;
   background: linear-gradient(to top, #66ccff, #0044ff);
   box-shadow: 0 0 8px #66ccff;
 }
 
 .hand.quantic {
   width: 3px;
-  height: 34%;
+  height: 36%;
   background: linear-gradient(to top, #ff66ff, #9900ff);
   box-shadow: 0 0 8px #ff66ff;
 }
 
 .hand.chronon {
   width: 4px;
-  height: 30%;
+  height: 32%;
   background: linear-gradient(to top, #ff4444, #880000);
   box-shadow: 0 0 8px #ff4444;
 }
 
 .hand.eonstrip {
   width: 5px;
-  height: 20%;
+  height: 22%;
   background: linear-gradient(to top, #33ff99, #006633);
   box-shadow: 0 0 8px #33ff99;
 }
 
 .hand.megasequence {
   width: 6px;
-  height: 16%;
+  height: 18%;
   background: linear-gradient(to top, #ffbb33, #aa5500);
   box-shadow: 0 0 8px #ffbb33;
 }