Hugging Face's logo

Spaces:
PriyaMishra
/
clock_again
Running

App Files Community
PriyaMishra commited on
Commit
8a6ce3c
·
verified ·
1 Parent(s): 9dbaaba

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +119 -61
index.html CHANGED
@@ -1,84 +1,142 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Ayurvedic Clock (SVG)</title>
 
6
  <style>
 
 
 
 
 
 
 
7
  body {
8
- background-color: #fefbe9;
9
- font-family: 'Segoe UI', sans-serif;
10
- text-align: center;
11
- padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  }
13
- svg {
14
- max-width: 100%;
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
- h1 {
17
- color: #4b5320;
 
 
 
 
 
 
18
  }
19
- .segment-title {
20
- font-size: 14px;
 
 
 
 
 
 
 
 
 
 
 
 
21
  font-weight: bold;
22
- text-anchor: middle;
 
 
 
 
23
  }
24
- .segment-desc {
25
- font-size: 11px;
26
- text-anchor: middle;
27
- fill: #555;
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
  </style>
30
  </head>
31
  <body>
32
- <h1>🌿 Ayurvedic Clock 🕰️</h1>
33
- <svg width="500" height="500" viewBox="0 0 500 500">
34
- <circle cx="250" cy="250" r="200" fill="none" stroke="#ccc" stroke-width="2"/>
35
-
36
- <!-- Center Label -->
37
- <text x="250" y="245" font-size="16" text-anchor="middle" fill="#4b5320" font-weight="bold">Ayurvedic</text>
38
- <text x="250" y="265" font-size="14" text-anchor="middle" fill="#4b5320">Daily Rhythm</text>
39
-
40
- <!-- Segment labels -->
41
- <!-- Each block uses rotate for placement but keeps text upright -->
42
 
43
- <!-- 6 AM - Kapha -->
44
- <g transform="translate(250,250) rotate(-90) translate(0,-180)">
45
- <text class="segment-title" y="0">🌅 6–10 AM (Kapha)</text>
46
- <text class="segment-desc" y="15">💪 Exercise • 🍵 Light Meal</text>
47
- </g>
48
 
49
- <!-- 10 AM - Pitta -->
50
- <g transform="translate(250,250) rotate(-45) translate(0,-180)">
51
- <text class="segment-title" y="0">🌞 10 AM–2 PM (Pitta)</text>
52
- <text class="segment-desc" y="15">📈 Action • 🥗 Main Meal</text>
53
- </g>
54
 
55
- <!-- 2 PM - Vata -->
56
- <g transform="translate(250,250) rotate(0) translate(0,-180)">
57
- <text class="segment-title" y="0">🌤 2–6 PM (Vata)</text>
58
- <text class="segment-desc" y="15">📞 Comm. • 🏃 Movement</text>
59
- </g>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
 
61
- <!-- 6 PM - Kapha -->
62
- <g transform="translate(250,250) rotate(45) translate(0,-180)">
63
- <text class="segment-title" y="0">🌇 6–10 PM (Kapha)</text>
64
- <text class="segment-desc" y="15">🧘 Wind Down • 🛏 Sleep Prep</text>
65
- </g>
66
 
67
- <!-- 10 PM - Pitta -->
68
- <g transform="translate(250,250) rotate(90) translate(0,-180)">
69
- <text class="segment-title" y="0">🌙 10 PM–2 AM (Pitta)</text>
70
- <text class="segment-desc" y="15">💤 Deep Sleep • 🔁 Detox</text>
71
- </g>
72
 
73
- <!-- 2 AM - Vata -->
74
- <g transform="translate(250,250) rotate(135) translate(0,-180)">
75
- <text class="segment-title" y="0">🌌 2–6 AM (Vata)</text>
76
- <text class="segment-desc" y="15">🧠 Dream • 🧘 Meditate</text>
77
- </g>
78
 
79
- <!-- Optional inner circle lines -->
80
- <circle cx="250" cy="250" r="140" fill="none" stroke="#eee" stroke-dasharray="4 2"/>
81
- </svg>
82
- <p>🧭 Align your daily rhythm with nature for harmony and health.</p>
83
  </body>
84
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Complete Ayurvedic Clock</title>
7
  <style>
8
+ :root {
9
+ --kapha: #dddddd;
10
+ --pitta: #bbbbbb;
11
+ --vata: #eeeeee;
12
+ --text: #111111;
13
+ --background: #ffffff;
14
+ }
15
  body {
16
+ margin: 0;
17
+ padding: 0;
18
+ font-family: Arial, sans-serif;
19
+ background: var(--background);
20
+ display: flex;
21
+ justify-content: center;
22
+ align-items: center;
23
+ height: 100vh;
24
+ }
25
+ main.clock {
26
+ width: 420px;
27
+ height: 420px;
28
+ border-radius: 50%;
29
+ position: relative;
30
+ background: conic-gradient(
31
+ var(--kapha) 0% 25%,
32
+ var(--pitta) 25% 50%,
33
+ var(--vata) 50% 75%,
34
+ var(--kapha) 75% 100%
35
+ );
36
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
37
  }
38
+ h1.center-label {
39
+ position: absolute;
40
+ top: 50%;
41
+ left: 50%;
42
+ transform: translate(-50%, -50%);
43
+ text-align: center;
44
+ font-weight: bold;
45
+ font-size: 1.2em;
46
+ background: white;
47
+ padding: 12px;
48
+ border-radius: 10px;
49
+ z-index: 2;
50
+ color: var(--text);
51
  }
52
+ section.segment {
53
+ position: absolute;
54
+ width: 120px;
55
+ text-align: center;
56
+ font-size: 0.75em;
57
+ line-height: 1.3em;
58
+ color: var(--text);
59
+ text-shadow: 0 0 2px white;
60
  }
61
+
62
+ /* Positions for outer segments */
63
+ .l1 { top: 2%; left: 50%; transform: translateX(-50%); }
64
+ .l2 { top: 18%; left: 83%; transform: translate(-50%, -50%); }
65
+ .l3 { top: 50%; left: 97%; transform: translate(-50%, -50%); }
66
+ .l4 { top: 80%; left: 83%; transform: translate(-50%, -50%); }
67
+ .l5 { bottom: 2%; left: 50%; transform: translateX(-50%); }
68
+ .l6 { top: 80%; left: 17%; transform: translate(-50%, -50%); }
69
+ .l7 { top: 50%; left: 3%; transform: translate(-50%, -50%); }
70
+ .l8 { top: 18%; left: 17%; transform: translate(-50%, -50%); }
71
+
72
+ /* Time-of-Day Labels */
73
+ .timeofday {
74
+ position: absolute;
75
  font-weight: bold;
76
+ font-size: 0.8em;
77
+ background: white;
78
+ padding: 4px 6px;
79
+ border-radius: 5px;
80
+ color: var(--text);
81
  }
82
+ .dawn { top: -10px; left: 50%; transform: translateX(-50%); }
83
+ .day { top: 50%; right: -35px; transform: translateY(-50%); }
84
+ .dusk { bottom: -10px; left: 50%; transform: translateX(-50%); }
85
+ .night { top: 50%; left: -35px; transform: translateY(-50%); }
86
+
87
+ /* Responsive design */
88
+ @media (max-width: 500px) {
89
+ main.clock {
90
+ width: 90vw;
91
+ height: 90vw;
92
+ }
93
+ section.segment {
94
+ font-size: 0.65em;
95
+ width: 100px;
96
+ }
97
  }
98
  </style>
99
  </head>
100
  <body>
 
 
 
 
 
 
 
 
 
 
101
 
102
+ <main class="clock" role="region" aria-label="Complete Ayurvedic Daily Clock">
 
 
 
 
103
 
104
+ <h1 class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</h1>
 
 
 
 
105
 
106
+ <!-- Segment Labels -->
107
+ <section class="segment l1">
108
+ 🌅 6–9 AM<br>Kapha 🧘‍♂️<br>Exercise<br>Elimination<br>Light Meal
109
+ </section>
110
+ <section class="segment l2">
111
+ 🌞 9–12 PM<br>Pitta 💼<br>Work<br>Organize<br>Plan
112
+ </section>
113
+ <section class="segment l3">
114
+ 🍽️ 12–3 PM<br>Pitta 🔥<br>Heaviest Meal<br>Digest<br>High Metabolism
115
+ </section>
116
+ <section class="segment l4">
117
+ 🚶‍♂️ 3–6 PM<br>Vata 💬<br>Socialize<br>Movement<br>Communication
118
+ </section>
119
+ <section class="segment l5">
120
+ 🌇 6–9 PM<br>Kapha 🛀<br>Dinner (Light)<br>Relax<br>Prepare to Sleep
121
+ </section>
122
+ <section class="segment l6">
123
+ 🌙 9–12 AM<br>Pitta 🛏️<br>Sleep<br>Cell Repair<br>Dream
124
+ </section>
125
+ <section class="segment l7">
126
+ 🛌 12–3 AM<br>Pitta 🧠<br>Deep Sleep<br>Digestion<br>Rejuvenation
127
+ </section>
128
+ <section class="segment l8">
129
+ 🌄 3–6 AM<br>Vata ✨<br>Meditate<br>Visualize<br>Create
130
 
131
+ </section>
 
 
 
 
132
 
133
+ <!-- Time of Day Markers -->
134
+ <div class="timeofday dawn">DAWN</div>
135
+ <div class="timeofday day">DAY</div>
136
+ <div class="timeofday dusk">DUSK</div>
137
+ <div class="timeofday night">NIGHT</div>
138
 
139
+ </main>
 
 
 
 
140
 
 
 
 
 
141
  </body>
142
  </html>