Spaces:
Running
Running
File size: 3,803 Bytes
62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 8e3f60f 62ec89b 63f5af0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE html>
<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>
|