Add tick marks and longer hands for analog clock

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 = {