Hugging Face's logo

Spaces:
PriyaMishra
/
clockBW
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +129 -18
index.html CHANGED
@@ -1,19 +1,130 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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>Ayurvedic Daily Clock (B&W)</title>
7
+ <style>
8
+ :root {
9
+ --kapha: #dddddd;
10
+ --pitta: #bbbbbb;
11
+ --vata: #eeeeee;
12
+ --text: #111111;
13
+ --background: #ffffff;
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%;
45
+ transform: translate(-50%, -50%);
46
+ text-align: center;
47
+ font-weight: bold;
48
+ font-size: 1.2em;
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
+ /* Clock label positions */
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%); }
70
+ .l4 { top: 80%; left: 82%; transform: translate(-50%, -50%); }
71
+ .l5 { bottom: 5%; left: 50%; transform: translateX(-50%); }
72
+ .l6 { top: 80%; left: 18%; 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 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>
128
+
129
+ </body>
130
  </html>