Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Complete Ayurvedic Clock</title> | |
| <style> | |
| :root { | |
| --kapha: #dddddd; | |
| --pitta: #bbbbbb; | |
| --vata: #eeeeee; | |
| --text: #111111; | |
| --background: #ffffff; | |
| } | |
| 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: 420px; | |
| height: 420px; | |
| 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: 12px; | |
| border-radius: 10px; | |
| z-index: 2; | |
| color: var(--text); | |
| } | |
| section.segment { | |
| position: absolute; | |
| width: 120px; | |
| text-align: center; | |
| font-size: 0.75em; | |
| line-height: 1.3em; | |
| color: var(--text); | |
| text-shadow: 0 0 2px white; | |
| } | |
| /* Positions for outer segments */ | |
| .l1 { top: 2%; left: 50%; transform: translateX(-50%); } | |
| .l2 { top: 18%; left: 83%; transform: translate(-50%, -50%); } | |
| .l3 { top: 50%; left: 97%; transform: translate(-50%, -50%); } | |
| .l4 { top: 80%; left: 83%; transform: translate(-50%, -50%); } | |
| .l5 { bottom: 2%; left: 50%; transform: translateX(-50%); } | |
| .l6 { top: 80%; left: 17%; transform: translate(-50%, -50%); } | |
| .l7 { top: 50%; left: 3%; transform: translate(-50%, -50%); } | |
| .l8 { top: 18%; left: 17%; transform: translate(-50%, -50%); } | |
| /* Time-of-Day Labels */ | |
| .timeofday { | |
| position: absolute; | |
| font-weight: bold; | |
| font-size: 0.8em; | |
| background: white; | |
| padding: 4px 6px; | |
| border-radius: 5px; | |
| color: var(--text); | |
| } | |
| .dawn { top: -10px; left: 50%; transform: translateX(-50%); } | |
| .day { top: 50%; right: -35px; transform: translateY(-50%); } | |
| .dusk { bottom: -10px; left: 50%; transform: translateX(-50%); } | |
| .night { top: 50%; left: -35px; transform: translateY(-50%); } | |
| /* Responsive design */ | |
| @media (max-width: 500px) { | |
| main.clock { | |
| width: 90vw; | |
| height: 90vw; | |
| } | |
| section.segment { | |
| font-size: 0.65em; | |
| width: 100px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="clock" role="region" aria-label="Complete Ayurvedic Daily Clock"> | |
| <h1 class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</h1> | |
| <!-- Segment Labels --> | |
| <section class="segment l1"> | |
| 🌅 6–9 AM<br>Kapha 🧘♂️<br>Exercise<br>Elimination<br>Light Meal | |
| </section> | |
| <section class="segment l2"> | |
| 🌞 9–12 PM<br>Pitta 💼<br>Work<br>Organize<br>Plan | |
| </section> | |
| <section class="segment l3"> | |
| 🍽️ 12–3 PM<br>Pitta 🔥<br>Heaviest Meal<br>Digest<br>High Metabolism | |
| </section> | |
| <section class="segment l4"> | |
| 🚶♂️ 3–6 PM<br>Vata 💬<br>Socialize<br>Movement<br>Communication | |
| </section> | |
| <section class="segment l5"> | |
| 🌇 6–9 PM<br>Kapha 🛀<br>Dinner (Light)<br>Relax<br>Prepare to Sleep | |
| </section> | |
| <section class="segment l6"> | |
| 🌙 9–12 AM<br>Pitta 🛏️<br>Sleep<br>Cell Repair<br>Dream | |
| </section> | |
| <section class="segment l7"> | |
| 🛌 12–3 AM<br>Pitta 🧠<br>Deep Sleep<br>Digestion<br>Rejuvenation | |
| </section> | |
| <section class="segment l8"> | |
| 🌄 3–6 AM<br>Vata ✨<br>Meditate<br>Visualize<br>Create | |
| </section> | |
| <!-- Time of Day Markers --> | |
| <div class="timeofday dawn">DAWN</div> | |
| <div class="timeofday day">DAY</div> | |
| <div class="timeofday dusk">DUSK</div> | |
| <div class="timeofday night">NIGHT</div> | |
| </main> | |
| </body> | |
| </html> | |