Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Ayurvedic Clock (SVG)</title> | |
| <style> | |
| body { | |
| background-color: #fefbe9; | |
| font-family: 'Segoe UI', sans-serif; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| svg { | |
| max-width: 100%; | |
| } | |
| h1 { | |
| color: #4b5320; | |
| } | |
| .segment-title { | |
| font-size: 14px; | |
| font-weight: bold; | |
| text-anchor: middle; | |
| } | |
| .segment-desc { | |
| font-size: 11px; | |
| text-anchor: middle; | |
| fill: #555; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🌿 Ayurvedic Clock 🕰️</h1> | |
| <svg width="500" height="500" viewBox="0 0 500 500"> | |
| <circle cx="250" cy="250" r="200" fill="none" stroke="#ccc" stroke-width="2"/> | |
| <!-- Center Label --> | |
| <text x="250" y="245" font-size="16" text-anchor="middle" fill="#4b5320" font-weight="bold">Ayurvedic</text> | |
| <text x="250" y="265" font-size="14" text-anchor="middle" fill="#4b5320">Daily Rhythm</text> | |
| <!-- Segment labels --> | |
| <!-- Each block uses rotate for placement but keeps text upright --> | |
| <!-- 6 AM - Kapha --> | |
| <g transform="translate(250,250) rotate(-90) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌅 6–10 AM (Kapha)</text> | |
| <text class="segment-desc" y="15">💪 Exercise • 🍵 Light Meal</text> | |
| </g> | |
| <!-- 10 AM - Pitta --> | |
| <g transform="translate(250,250) rotate(-45) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌞 10 AM–2 PM (Pitta)</text> | |
| <text class="segment-desc" y="15">📈 Action • 🥗 Main Meal</text> | |
| </g> | |
| <!-- 2 PM - Vata --> | |
| <g transform="translate(250,250) rotate(0) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌤 2–6 PM (Vata)</text> | |
| <text class="segment-desc" y="15">📞 Comm. • 🏃 Movement</text> | |
| </g> | |
| <!-- 6 PM - Kapha --> | |
| <g transform="translate(250,250) rotate(45) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌇 6–10 PM (Kapha)</text> | |
| <text class="segment-desc" y="15">🧘 Wind Down • 🛏 Sleep Prep</text> | |
| </g> | |
| <!-- 10 PM - Pitta --> | |
| <g transform="translate(250,250) rotate(90) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌙 10 PM–2 AM (Pitta)</text> | |
| <text class="segment-desc" y="15">💤 Deep Sleep • 🔁 Detox</text> | |
| </g> | |
| <!-- 2 AM - Vata --> | |
| <g transform="translate(250,250) rotate(135) translate(0,-180)"> | |
| <text class="segment-title" y="0">🌌 2–6 AM (Vata)</text> | |
| <text class="segment-desc" y="15">🧠 Dream • 🧘 Meditate</text> | |
| </g> | |
| <!-- Optional inner circle lines --> | |
| <circle cx="250" cy="250" r="140" fill="none" stroke="#eee" stroke-dasharray="4 2"/> | |
| </svg> | |
| <p>🧭 Align your daily rhythm with nature for harmony and health.</p> | |
| </body> | |
| </html> | |