Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Ayurvedic Daily Clock</title> | |
| <style> | |
| :root { | |
| --kapha: #a8dadc; | |
| --pitta: #f1faee; | |
| --vata: #ffb703; | |
| --text: #222; | |
| --background: #fff7e6; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| background: var(--background); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| main.clock { | |
| width: 400px; | |
| height: 400px; | |
| border-radius: 50%; | |
| position: relative; | |
| background: conic-gradient( | |
| var(--kapha) 0% 25%, | |
| var(--pitta) 25% 50%, | |
| var(--vata) 50% 75%, | |
| var(--kapha) 75% 100% | |
| ); | |
| box-shadow: 0 0 10px rgba(0,0,0,0.2); | |
| } | |
| h1.center-label { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| background: white; | |
| padding: 10px; | |
| border-radius: 10px; | |
| z-index: 2; | |
| color: var(--text); | |
| } | |
| section.segment { | |
| position: absolute; | |
| width: 110px; | |
| text-align: center; | |
| font-size: 0.85em; | |
| line-height: 1.4em; | |
| color: var(--text); | |
| text-shadow: 0 0 2px white; | |
| } | |
| /* Positioning around the clock */ | |
| .l1 { top: 5%; left: 50%; transform: translateX(-50%); } | |
| .l2 { top: 20%; left: 82%; transform: translate(-50%, -50%); } | |
| .l3 { top: 50%; left: 95%; transform: translate(-50%, -50%); } | |
| .l4 { top: 80%; left: 82%; transform: translate(-50%, -50%); } | |
| .l5 { bottom: 5%; left: 50%; transform: translateX(-50%); } | |
| .l6 { top: 80%; left: 18%; transform: translate(-50%, -50%); } | |
| .l7 { top: 50%; left: 5%; transform: translate(-50%, -50%); } | |
| .l8 { top: 20%; left: 18%; transform: translate(-50%, -50%); } | |
| /* Responsive design */ | |
| @media (max-width: 500px) { | |
| main.clock { | |
| width: 90vw; | |
| height: 90vw; | |
| } | |
| section.segment { | |
| font-size: 0.75em; | |
| width: 100px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="clock" role="region" aria-label="Ayurvedic Daily Clock"> | |
| <h1 class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</h1> | |
| <section class="segment l1" aria-label="Kapha Time 6 to 9 AM"> | |
| <span role="img" aria-label="Sunrise">🌅</span> 6–9 AM<br>Kapha 🧘♂️<br>Exercise, Energize | |
| </section> | |
| <section class="segment l2" aria-label="Pitta Time 9 to 12 PM"> | |
| <span role="img" aria-label="Sun">🌞</span> 9–12 PM<br>Pitta 💼<br>Work, Focus | |
| </section> | |
| <section class="segment l3" aria-label="Pitta Time 12 to 3 PM"> | |
| <span role="img" aria-label="Meal">🍽️</span> 12–3 PM<br>Pitta 🔥<br>Main Meal, Digest | |
| </section> | |
| <section class="segment l4" aria-label="Vata Time 3 to 6 PM"> | |
| <span role="img" aria-label="Walking">🚶♂️</span> 3–6 PM<br>Vata 💬<br>Socialize, Move | |
| </section> | |
| <section class="segment l5" aria-label="Kapha Time 6 to 9 PM"> | |
| <span role="img" aria-label="Sunset">🌇</span> 6–9 PM<br>Kapha 🛀<br>Relax, Wind Down | |
| </section> | |
| <section class="segment l6" aria-label="Pitta Time 9 PM to 12 AM"> | |
| <span role="img" aria-label="Moon">🌙</span> 9–12 AM<br>Pitta 🛏️<br>Sleep, Process | |
| </section> | |
| <section class="segment l7" aria-label="Pitta Time 12 to 3 AM"> | |
| <span role="img" aria-label="Bedtime">🛌</span> 12–3 AM<br>Pitta 🧠<br>Deep Sleep, Repair | |
| </section> | |
| <section class="segment l8" aria-label="Vata Time 3 to 6 AM"> | |
| <span role="img" aria-label="Dawn">🌄</span> 3–6 AM<br>Vata ✨<br>Meditate, Create | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |