Hugging Face's logo

Spaces:
PriyaMishra
/
clock_again
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +66 -31
index.html CHANGED
@@ -2,48 +2,83 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Ayurvedic Clock</title>
6
  <style>
7
  body {
8
- font-family: Arial, sans-serif;
 
9
  text-align: center;
10
- background: #fefbe9;
 
 
 
11
  }
12
  h1 {
13
- margin-top: 30px;
14
  color: #4b5320;
15
  }
16
- .clock {
17
- display: grid;
18
- grid-template-columns: repeat(3, 1fr);
19
- gap: 10px;
20
- margin: 30px auto;
21
- max-width: 600px;
22
- }
23
- .box {
24
- background: #fffef2;
25
- border: 2px solid #ccc;
26
- border-radius: 12px;
27
- padding: 10px;
28
- box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
29
- }
30
- .title {
31
  font-weight: bold;
32
- color: #7b3f00;
 
 
 
 
 
33
  }
34
  </style>
35
  </head>
36
  <body>
37
- <h1>🕰 Ayurvedic Clock 🌞🌙</h1>
38
- <div class="clock">
39
- <div class="box"><div class="title">🌄 2–6 AM (VATA)</div>💡 Create, 🧘 Meditate, 🚽 Elimination, 😴 Light Sleep</div>
40
- <div class="box"><div class="title">🌅 6–10 AM (KAPHA)</div>💪 Exercise, 🍵 Light Meal, 🧹 Cleanse</div>
41
- <div class="box"><div class="title">🌞 10 AM–2 PM (PITTA)</div>📈 Action, 🥗 Heaviest Meal, 🔥 High Metabolism</div>
42
- <div class="box"><div class="title">🌤 2–6 PM (VATA)</div>🧠 Communication, 🏃 Movement, 🍽 Last Meal</div>
43
- <div class="box"><div class="title">🌇 6–10 PM (KAPHA)</div>🧘 Wind Down, 🛌 Prepare Sleep, 🌌 Go Within</div>
44
- <div class="box"><div class="title">🌙 10 PM–2 AM (PITTA)</div>🛏 Deep Sleep, 🧠 Repair, 🔁 Detox</div>
45
- <div class="box"><div class="title">🌘 2–6 AM (VATA)</div>🌌 Dream State, 🧠 Subconscious Activity</div>
46
- </div>
47
- <p>🕉️ Align your lifestyle with nature's rhythm for optimal well-being 🌿</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </body>
49
  </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>