Hugging Face's logo

Spaces:
PriyaMishra
/
clock
Running

App Files Community
PriyaMishra commited on
Commit
8e3f60f
·
verified ·
1 Parent(s): 62ec89b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +70 -21
index.html CHANGED
@@ -3,32 +3,42 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Ayurvedic Clock with Emojis</title>
7
  <style>
 
 
 
 
 
 
 
 
8
  body {
 
 
9
  font-family: Arial, sans-serif;
10
- background: #fff7e6;
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
  height: 100vh;
15
  }
16
 
17
- .clock {
18
  width: 400px;
19
  height: 400px;
20
  border-radius: 50%;
21
  position: relative;
22
  background: conic-gradient(
23
- #a8dadc 0% 25%, /* Kapha */
24
- #f1faee 25% 50%, /* Pitta */
25
- #ffb703 50% 75%, /* Vata */
26
- #a8dadc 75% 100% /* Kapha again */
27
  );
28
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
29
  }
30
 
31
- .center-label {
32
  position: absolute;
33
  top: 50%;
34
  left: 50%;
@@ -39,17 +49,21 @@
39
  background: white;
40
  padding: 10px;
41
  border-radius: 10px;
 
 
42
  }
43
 
44
- .label {
45
  position: absolute;
46
  width: 110px;
47
  text-align: center;
48
  font-size: 0.85em;
49
  line-height: 1.4em;
 
 
50
  }
51
 
52
- /* Positioning labels */
53
  .l1 { top: 5%; left: 50%; transform: translateX(-50%); }
54
  .l2 { top: 20%; left: 82%; transform: translate(-50%, -50%); }
55
  .l3 { top: 50%; left: 95%; transform: translate(-50%, -50%); }
@@ -59,23 +73,58 @@
59
  .l7 { top: 50%; left: 5%; transform: translate(-50%, -50%); }
60
  .l8 { top: 20%; left: 18%; transform: translate(-50%, -50%); }
61
 
 
 
 
 
 
 
 
 
 
 
 
62
  </style>
63
  </head>
64
  <body>
65
 
66
- <div class="clock">
67
- <div class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
 
69
- <div class="label l1">🌅 6–9 AM<br>Kapha 🧘‍♂️<br>Exercise, Energize</div>
70
- <div class="label l2">🌞 9–12 PM<br>Pitta 💼<br>Work, Focus</div>
71
- <div class="label l3">🍽️ 12–3 PM<br>Pitta 🔥<br>Main Meal, Digest</div>
72
- <div class="label l4">🚶‍♂️ 3–6 PM<br>Vata 💬<br>Socialize, Move</div>
73
- <div class="label l5">🌇 6–9 PM<br>Kapha 🛀<br>Relax, Wind Down</div>
74
- <div class="label l6">🌙 9–12 AM<br>Pitta 🛏️<br>Sleep, Process</div>
75
- <div class="label l7">🛌 12–3 AM<br>Pitta 🧠<br>Deep Sleep, Repair</div>
76
- <div class="label l8">🌄 3–6 AM<br>Vata ✨<br>Meditate, Create</div>
77
 
78
- </div>
79
 
80
  </body>
81
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Ayurvedic Daily Clock</title>
7
  <style>
8
+ :root {
9
+ --kapha: #a8dadc;
10
+ --pitta: #f1faee;
11
+ --vata: #ffb703;
12
+ --text: #222;
13
+ --background: #fff7e6;
14
+ }
15
+
16
  body {
17
+ margin: 0;
18
+ padding: 0;
19
  font-family: Arial, sans-serif;
20
+ background: var(--background);
21
  display: flex;
22
  justify-content: center;
23
  align-items: center;
24
  height: 100vh;
25
  }
26
 
27
+ main.clock {
28
  width: 400px;
29
  height: 400px;
30
  border-radius: 50%;
31
  position: relative;
32
  background: conic-gradient(
33
+ var(--kapha) 0% 25%,
34
+ var(--pitta) 25% 50%,
35
+ var(--vata) 50% 75%,
36
+ var(--kapha) 75% 100%
37
  );
38
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
39
  }
40
 
41
+ h1.center-label {
42
  position: absolute;
43
  top: 50%;
44
  left: 50%;
 
49
  background: white;
50
  padding: 10px;
51
  border-radius: 10px;
52
+ z-index: 2;
53
+ color: var(--text);
54
  }
55
 
56
+ section.segment {
57
  position: absolute;
58
  width: 110px;
59
  text-align: center;
60
  font-size: 0.85em;
61
  line-height: 1.4em;
62
+ color: var(--text);
63
+ text-shadow: 0 0 2px white;
64
  }
65
 
66
+ /* Positioning around the clock */
67
  .l1 { top: 5%; left: 50%; transform: translateX(-50%); }
68
  .l2 { top: 20%; left: 82%; transform: translate(-50%, -50%); }
69
  .l3 { top: 50%; left: 95%; transform: translate(-50%, -50%); }
 
73
  .l7 { top: 50%; left: 5%; transform: translate(-50%, -50%); }
74
  .l8 { top: 20%; left: 18%; transform: translate(-50%, -50%); }
75
 
76
+ /* Responsive design */
77
+ @media (max-width: 500px) {
78
+ main.clock {
79
+ width: 90vw;
80
+ height: 90vw;
81
+ }
82
+ section.segment {
83
+ font-size: 0.75em;
84
+ width: 100px;
85
+ }
86
+ }
87
  </style>
88
  </head>
89
  <body>
90
 
91
+ <main class="clock" role="region" aria-label="Ayurvedic Daily Clock">
92
+
93
+ <h1 class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</h1>
94
+
95
+ <section class="segment l1" aria-label="Kapha Time 6 to 9 AM">
96
+ <span role="img" aria-label="Sunrise">🌅</span> 6–9 AM<br>Kapha 🧘‍♂️<br>Exercise, Energize
97
+ </section>
98
+
99
+ <section class="segment l2" aria-label="Pitta Time 9 to 12 PM">
100
+ <span role="img" aria-label="Sun">🌞</span> 9–12 PM<br>Pitta 💼<br>Work, Focus
101
+ </section>
102
+
103
+ <section class="segment l3" aria-label="Pitta Time 12 to 3 PM">
104
+ <span role="img" aria-label="Meal">🍽️</span> 12–3 PM<br>Pitta 🔥<br>Main Meal, Digest
105
+ </section>
106
+
107
+ <section class="segment l4" aria-label="Vata Time 3 to 6 PM">
108
+ <span role="img" aria-label="Walking">🚶‍♂️</span> 3–6 PM<br>Vata 💬<br>Socialize, Move
109
+ </section>
110
+
111
+ <section class="segment l5" aria-label="Kapha Time 6 to 9 PM">
112
+ <span role="img" aria-label="Sunset">🌇</span> 6–9 PM<br>Kapha 🛀<br>Relax, Wind Down
113
+ </section>
114
+
115
+ <section class="segment l6" aria-label="Pitta Time 9 PM to 12 AM">
116
+ <span role="img" aria-label="Moon">🌙</span> 9–12 AM<br>Pitta 🛏️<br>Sleep, Process
117
+ </section>
118
+
119
+ <section class="segment l7" aria-label="Pitta Time 12 to 3 AM">
120
+ <span role="img" aria-label="Bedtime">🛌</span> 12–3 AM<br>Pitta 🧠<br>Deep Sleep, Repair
121
+ </section>
122
 
123
+ <section class="segment l8" aria-label="Vata Time 3 to 6 AM">
124
+ <span role="img" aria-label="Dawn">🌄</span> 3–6 AM<br>Vata ✨<br>Meditate, Create
125
+ </section>
 
 
 
 
 
126
 
127
+ </main>
128
 
129
  </body>
130
  </html>