Spaces:
Running
Running
File size: 4,066 Bytes
76a5f68 8a6ce3c 76a5f68 8a6ce3c 76a5f68 8a6ce3c 9dbaaba 8a6ce3c 76a5f68 8a6ce3c 76a5f68 8a6ce3c 76a5f68 8a6ce3c 9dbaaba 8a6ce3c 76a5f68 9dbaaba 8a6ce3c 9dbaaba 8a6ce3c 9dbaaba 8a6ce3c 9dbaaba 8a6ce3c 9dbaaba 8a6ce3c 9dbaaba 8a6ce3c 9dbaaba 76a5f68 45009b4 |
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 132 133 134 135 136 137 138 139 140 141 142 143 |
<!DOCTYPE html>
<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>
|