Movember theme

index.html

@@ -732,10 +732,10 @@
             const minuteAngle = (minutes * 6) + (seconds * 0.1); // 6 degrees per minute + smooth seconds
             const hourAngle = (hours * 30) + (minutes * 0.5); // 30 degrees per hour + smooth minutes
 
-            // Apply rotations
-            document.getElementById(`second-hand-${cityKey}`).style.transform = `rotate(${secondAngle}deg)`;
-            document.getElementById(`minute-hand-${cityKey}`).style.transform = `rotate(${minuteAngle}deg)`;
-            document.getElementById(`hour-hand-${cityKey}`).style.transform = `rotate(${hourAngle}deg)`;
+            // Apply rotations (include translateX to keep hands centered)
+            document.getElementById(`second-hand-${cityKey}`).style.transform = `translateX(-50%) rotate(${secondAngle}deg)`;
+            document.getElementById(`minute-hand-${cityKey}`).style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
+            document.getElementById(`hour-hand-${cityKey}`).style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
         }
 
         function updateClock(cityKey) {
@@ -1248,6 +1248,24 @@
                 },
                 handGlow: '0 0 10px #39ff14, 0 0 20px #00ff00, 0 0 30px #00ff00' // Green glow effect
             },
+            movember: {
+                dateRange: { startMonth: 10, startDay: 1, endMonth: 10, endDay: 30 }, // Nov 1-30
+                clockFace: 'clock-face-movember.png',
+                clockFaceScale: 'cover',
+                background: 'planks-movember.png',
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundAttachment: 'fixed',
+                textColor: '#004394', // Blue (movember color)
+                centerDotColor: 'radial-gradient(circle, #4a2511 20%, #6b3619 40%, #8b4513 80%, #5c2e00 100%)', // Brown mustache gradient
+                centerDotBorder: '#3a1d0f', // Darker brown border
+                handColors: {
+                    hour: 'linear-gradient(to right, #4a2511, #6b3619, #4a2511)', // Brown
+                    minute: 'linear-gradient(to right, #6b3619, #8b4513, #6b3619)', // Lighter brown
+                    second: 'linear-gradient(to bottom, #4a2511, #6b3619, #4a2511)' // Brown
+                }
+            },
             christmas: {
                 dateRange: { startMonth: 11, startDay: 1, endMonth: 11, endDay: 26 }, // Dec 1-26
                 clockFace: 'clock-face-christmas.png',