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: #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: 10px; | |
| border-radius: 10px; | |
| z-index: 2; | |
| color: var(--text); | |
| } | |
| section.segment { | |
| position: absolute; | |
| width: 110px; | |
| text-align: center; | |
| font-size: 0.75em; | |
| line-height: 1.3em; | |
| color: var(--text); | |
| text-shadow: 0 0 2px white; | |
| } | |
| span.emoji { | |
| display: block; | |
| font-size: 1.6em; | |
| margin-bottom: 2px; | |
| } | |
| /* Clock label positions */ | |
| .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%); } | |
| /* Clock hour marker lines */ | |
| .line { | |
| position: absolute; | |
| width: 2px; | |
| height: 210px; | |
| background: #999; | |
| top: 50%; | |
| left: 50%; | |
| transform-origin: top center; | |
| z-index: 0; | |
| opacity: 0.4; | |
| } | |
| .h3 { transform: rotate(45deg); } | |
| .h6 { transform: rotate(90deg); } | |
| .h9 { transform: rotate(135deg); } | |
| .h12 { transform: rotate(180deg); } | |
| .h15 { transform: rotate(225deg); } | |
| .h18 { transform: rotate(270deg); } | |
| .h21 { transform: rotate(315deg); } | |
| .h0 { transform: rotate(0deg); } | |
| /* Responsive design */ | |
| @media (max-width: 500px) { | |
| main.clock { | |
| width: 90vw; | |
| height: 90vw; | |
| } | |
| section.segment { | |
| font-size: 1.0em; | |
| width: 100px; | |
| } | |
| span.emoji { | |
| font-size: 1.4em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="clock" role="region" aria-label="Ayurvedic Daily Clock"> | |
| <h1 class="center-label"><br>Ayurvedic<br>Daily Rhythm</h1> | |
| <!-- Hour lines --> | |
| <div class="line h0"></div> | |
| <div class="line h3"></div> | |
| <div class="line h6"></div> | |
| <div class="line h9"></div> | |
| <div class="line h12"></div> | |
| <div class="line h15"></div> | |
| <div class="line h18"></div> | |
| <div class="line h21"></div> | |
| <!-- Segments --> | |
| <section class="segment l1"> | |
| <span class="emoji">🌅</span> | |
| 6–9 AM<br>Kapha 🧘♂️<br>Exercise, Energize | |
| </section> | |
| <section class="segment l2"> | |
| <span class="emoji">🌞</span> | |
| 9–12 PM<br>Pitta 💼<br>Work, Focus | |
| </section> | |
| <section class="segment l3"> | |
| <span class="emoji">🍽️</span> | |
| 12–3 PM<br>Pitta 🔥<br>Main Meal, Digest | |
| </section> | |
| <section class="segment l4"> | |
| <span class="emoji">🚶♂️</span> | |
| 3–6 PM<br>Vata 💬<br>Socialize, Move | |
| </section> | |
| <section class="segment l5"> | |
| <span class="emoji">🌇</span> | |
| 6–9 PM<br>Kapha 🛀<br>Relax, Wind Down | |
| </section> | |
| <section class="segment l6"> | |
| <span class="emoji">🌙</span> | |
| 9–12 AM<br>Pitta 🛏️<br>Sleep, Process | |
| </section> | |
| <section class="segment l7"> | |
| <span class="emoji">🛌</span> | |
| 12–3 AM<br>Pitta 🧠<br>Deep Sleep, Repair | |
| </section> | |
| <section class="segment l8"> | |
| <span class="emoji">🌄</span> | |
| 3–6 AM<br>Vata ✨<br>Meditate, Create | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |