April

index.html

@@ -654,6 +654,7 @@
                 <option value="spring">Spring</option>
                 <option value="waffle">Waffle Day</option>
                 <option value="easter">Easter</option>
+                <option value="april">April</option>
             </select>
         </div>
         <div class="theme-date-range" id="theme-date-info"></div>
@@ -1564,7 +1565,7 @@
                 }
             },
             easter: {
-                dateRange: { startMonth: 2, startDay: 26, endMonth: 3, endDay: 5 }, // Mar 26 - Apr 5
+                dateRange: { startMonth: 2, startDay: 26, endMonth: 3, endDay: 7 }, // Mar 26 - Apr 7
                 clockFace: 'clock-face-easter.png',
                 clockFaceScale: 'cover',
                 background: 'easter-bg.png',
@@ -1589,6 +1590,32 @@
                 },
                 handGlow: '0 0 6px rgba(60,44,10,0.45)'
             },
+            april: {
+                dateRange: { startMonth: 3, startDay: 8, endMonth: 3, endDay: 30 }, // Apr 8 - Apr 30
+                clockFace: 'clock-face-april.png',
+                clockFaceScale: 'cover',
+                background: 'april-bg.png',
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundAttachment: 'fixed',
+                textColor: '#E8E6E0',
+                centerDotColor: 'radial-gradient(circle, #EAF7C9 20%, #BEE08A 45%, #78B46A 75%, #3E6A3E 100%)', // Spring green gradient
+                centerDotBorder: '#2F3437',
+                handColors: {
+                    hour: '#2F3437', 
+                    minute: '#2F3437', 
+                    second: '#3A3F44' 
+                },
+                clockContainer: {
+                    background: 'rgba(0, 0, 0, 0.15)',
+                    backdropFilter: 'blur(5px)',
+                    borderRadius: '20px',
+                    border: '1px solid rgba(126, 158, 112, 0.5)',
+                    boxShadow: '0 8px 32px rgba(79, 122, 79, 0.28)'
+                },
+                handGlow: '0 0 8px rgba(79,122,79,0.35)'
+            },
             default: {
                 clockFace: 'clock-face.png',
                 clockFaceScale: 'cover',