diff --git a/clock-face-movember.png b/clock-face-movember.png new file mode 100644 index 0000000..c3fddda Binary files /dev/null and b/clock-face-movember.png differ diff --git a/index.html b/index.html index dbe7554..5996784 100644 --- a/index.html +++ b/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', diff --git a/planks-movember.png b/planks-movember.png new file mode 100644 index 0000000..583930e Binary files /dev/null and b/planks-movember.png differ