Fix marker positioning for fullscreen analog clock

clock.js

@@ -62,18 +62,28 @@
 
   function placeMarkers() {
     const clock = document.getElementById('clock');
-    const radius = clock.offsetWidth / 2 - 20;
+    let markers = clock.querySelectorAll('.marker');
+
+    // Create markers if they don't exist yet
+    if (markers.length === 0) {
       for (let i = 0; i < 16; i++) {
-      const angle = (i / 16) * 2 * Math.PI;
-      const x = radius * Math.sin(angle);
-      const y = -radius * Math.cos(angle);
         const m = document.createElement('div');
         m.className = 'marker';
         m.textContent = i.toString(16).toUpperCase();
-      m.style.left = `${clock.offsetWidth / 2 + x}px`;
-      m.style.top = `${clock.offsetHeight / 2 + y}px`;
         clock.appendChild(m);
       }
+      markers = clock.querySelectorAll('.marker');
+    }
+
+    // Position markers based on the current clock size
+    const radius = clock.offsetWidth / 2 - 20;
+    markers.forEach((m, i) => {
+      const angle = (i / 16) * 2 * Math.PI;
+      const x = radius * Math.sin(angle);
+      const y = -radius * Math.cos(angle);
+      m.style.left = `${clock.offsetWidth / 2 + x}px`;
+      m.style.top = `${clock.offsetHeight / 2 + y}px`;
+    });
   }
 
   function updateClock() {
@@ -95,8 +105,11 @@
     if (clk) {
       clk.addEventListener('click', () => {
         document.body.classList.toggle('fullscreen-clock');
+        // Re-position markers after toggling fullscreen
+        requestAnimationFrame(placeMarkers);
       });
     }
+    window.addEventListener('resize', placeMarkers);
   }
 
   if (document.readyState === 'loading') {