diff --git a/clock.js b/clock.js index 99bac7b..44e0283 100644 --- a/clock.js +++ b/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 = { diff --git a/style.css b/style.css index e577bd7..20d7f1c 100644 --- a/style.css +++ b/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; }