Hugging Face's logo

Spaces:
PriyaMishra
/
clockBW
Running

App Files Community
PriyaMishra commited on
Commit
95bf165
·
verified ·
1 Parent(s): f3aaf6b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +74 -24
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Ayurvedic Daily Clock (B&W)</title>
7
  <style>
8
  :root {
9
  --kapha: #dddddd;
@@ -25,8 +25,8 @@
25
  }
26
 
27
  main.clock {
28
- width: 400px;
29
- height: 400px;
30
  border-radius: 50%;
31
  position: relative;
32
  background: conic-gradient(
@@ -57,12 +57,18 @@
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
  /* Clock label positions */
67
  .l1 { top: 5%; left: 50%; transform: translateX(-50%); }
68
  .l2 { top: 20%; left: 82%; transform: translate(-50%, -50%); }
@@ -73,55 +79,99 @@
73
  .l7 { top: 50%; left: 5%; transform: translate(-50%, -50%); }
74
  .l8 { top: 20%; left: 18%; transform: translate(-50%, -50%); }
75
 
76
- /* Responsive design for smaller screens */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 (Black and White)">
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
- 🌅 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
- 🌞 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
- 🍽️ 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
- 🚶‍♂️ 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
- 🌇 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
- 🌙 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
- 🛌 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
- 🌄 3–6 AM<br>Vata ✨<br>Meditate, Create
 
125
  </section>
126
 
127
  </main>
 
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: #dddddd;
 
25
  }
26
 
27
  main.clock {
28
+ width: 420px;
29
+ height: 420px;
30
  border-radius: 50%;
31
  position: relative;
32
  background: conic-gradient(
 
57
  position: absolute;
58
  width: 110px;
59
  text-align: center;
60
+ font-size: 0.75em;
61
+ line-height: 1.3em;
62
  color: var(--text);
63
  text-shadow: 0 0 2px white;
64
  }
65
 
66
+ span.emoji {
67
+ display: block;
68
+ font-size: 1.6em;
69
+ margin-bottom: 2px;
70
+ }
71
+
72
  /* Clock label positions */
73
  .l1 { top: 5%; left: 50%; transform: translateX(-50%); }
74
  .l2 { top: 20%; left: 82%; transform: translate(-50%, -50%); }
 
79
  .l7 { top: 50%; left: 5%; transform: translate(-50%, -50%); }
80
  .l8 { top: 20%; left: 18%; transform: translate(-50%, -50%); }
81
 
82
+ /* Clock hour marker lines */
83
+ .line {
84
+ position: absolute;
85
+ width: 2px;
86
+ height: 210px;
87
+ background: #999;
88
+ top: 50%;
89
+ left: 50%;
90
+ transform-origin: top center;
91
+ z-index: 0;
92
+ opacity: 0.4;
93
+ }
94
+
95
+ .h3 { transform: rotate(45deg); }
96
+ .h6 { transform: rotate(90deg); }
97
+ .h9 { transform: rotate(135deg); }
98
+ .h12 { transform: rotate(180deg); }
99
+ .h15 { transform: rotate(225deg); }
100
+ .h18 { transform: rotate(270deg); }
101
+ .h21 { transform: rotate(315deg); }
102
+ .h0 { transform: rotate(0deg); }
103
+
104
+ /* Responsive design */
105
  @media (max-width: 500px) {
106
  main.clock {
107
  width: 90vw;
108
  height: 90vw;
109
  }
110
  section.segment {
111
+ font-size: 0.7em;
112
  width: 100px;
113
  }
114
+ span.emoji {
115
+ font-size: 1.4em;
116
+ }
117
  }
118
  </style>
119
  </head>
120
  <body>
121
 
122
+ <main class="clock" role="region" aria-label="Ayurvedic Daily Clock">
123
 
124
  <h1 class="center-label">🕉️<br>Ayurvedic<br>Daily Rhythm</h1>
125
 
126
+ <!-- Hour lines -->
127
+ <div class="line h0"></div>
128
+ <div class="line h3"></div>
129
+ <div class="line h6"></div>
130
+ <div class="line h9"></div>
131
+ <div class="line h12"></div>
132
+ <div class="line h15"></div>
133
+ <div class="line h18"></div>
134
+ <div class="line h21"></div>
135
+
136
+ <!-- Segments -->
137
+ <section class="segment l1">
138
+ <span class="emoji">🌅</span>
139
+ 6–9 AM<br>Kapha 🧘‍♂️<br>Exercise, Energize
140
  </section>
141
 
142
+ <section class="segment l2">
143
+ <span class="emoji">🌞</span>
144
+ 9–12 PM<br>Pitta 💼<br>Work, Focus
145
  </section>
146
 
147
+ <section class="segment l3">
148
+ <span class="emoji">🍽️</span>
149
+ 12–3 PM<br>Pitta 🔥<br>Main Meal, Digest
150
  </section>
151
 
152
+ <section class="segment l4">
153
+ <span class="emoji">🚶‍♂️</span>
154
+ 3–6 PM<br>Vata 💬<br>Socialize, Move
155
  </section>
156
 
157
+ <section class="segment l5">
158
+ <span class="emoji">🌇</span>
159
+ 6–9 PM<br>Kapha 🛀<br>Relax, Wind Down
160
  </section>
161
 
162
+ <section class="segment l6">
163
+ <span class="emoji">🌙</span>
164
+ 9–12 AM<br>Pitta 🛏️<br>Sleep, Process
165
  </section>
166
 
167
+ <section class="segment l7">
168
+ <span class="emoji">🛌</span>
169
+ 12–3 AM<br>Pitta 🧠<br>Deep Sleep, Repair
170
  </section>
171
 
172
+ <section class="segment l8">
173
+ <span class="emoji">🌄</span>
174
+ 3–6 AM<br>Vata ✨<br>Meditate, Create
175
  </section>
176
 
177
  </main>