Skip to content

Commit cecbfde

Browse files
KrishLalakiyaKrishLalakiya
committed
Redesign watch UI with interactive stats and improved styles #879
Enhanced the watch interface with a modern color scheme, interactive stats icons for sleep, steps, and heart rate, and improved hover effects. Refactored the layout and animations for a more engaging user experience, and updated the time/date display. The design now uses CSS variables for easier theming and includes a heartbeat animation.
1 parent 98cc7f1 commit cecbfde

File tree

1 file changed

+170
-104
lines changed

1 file changed

+170
-104
lines changed

‎watch_art/index.html‎

Lines changed: 170 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,184 +3,250 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Watch</title>
67
<style>
8+
:root {
9+
--bg-color: #1a1d2d;
10+
--highlight-color: #3d52a0;
11+
--watch-body: #4a4a4a;
12+
--watch-body-highlight: #6b6b6b;
13+
--strap-color: #ff6b6b;
14+
--text-color: #ffffff;
15+
--text-secondary: #a0a0a0;
16+
--screen-bg: #000000;
17+
--accent-green: #34c759;
18+
--accent-blue: #007aff;
19+
--accent-red: #ff3b30;
20+
}
21+
722
body {
823
margin: 0;
924
overflow: hidden;
10-
background-color: rgba(0, 128, 255, 0.5); /* Oceanic color */
11-
}
12-
13-
.watch-container {
25+
background: radial-gradient(circle, var(--highlight-color), var(--bg-color));
26+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
1427
display: flex;
1528
justify-content: center;
1629
align-items: center;
1730
height: 100vh;
31+
}
32+
33+
.watch-container {
1834
position: relative;
19-
overflow: hidden;
20-
z-index: 10;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
2138
}
22-
23-
.apple-logo {
39+
40+
.watch-container::before {
41+
content: "";
2442
position: absolute;
2543
font-size: 400px;
26-
color: rgba(0, 0, 0, 0.03);
27-
z-index: 1;
28-
content: "●";
44+
color: rgba(255, 255, 255, 0.02);
45+
z-index: -2;
2946
}
3047

3148
.watch {
3249
width: 200px;
3350
height: 240px;
34-
background: silver; /* Changed to silver */
51+
background: linear-gradient(145deg, var(--watch-body-highlight), var(--watch-body));
52+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
3553
border-radius: 40px;
3654
position: relative;
37-
transform: translateX(-1000px);
38-
animation: slideIn 1.5s forwards;
39-
cursor: pointer;
55+
cursor: default;
4056
z-index: 2;
57+
animation: slideIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
58+
transition: transform 0.4s ease, box-shadow 0.4s ease;
59+
}
60+
61+
.watch:hover {
62+
transform: scale(1.05) translateY(-10px);
63+
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5);
4164
}
4265

4366
.screen {
4467
width: 180px;
4568
height: 220px;
46-
background: silver; /* Changed to silver */
69+
background: var(--watch-body);
4770
border-radius: 35px;
4871
position: absolute;
4972
top: 10px;
5073
left: 10px;
5174
overflow: hidden;
75+
box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5);
5276
}
5377

5478
.display {
55-
width: 170px;
56-
height: 210px;
57-
background: #1a1a1a;
79+
width: 100%;
80+
height: 100%;
81+
background: var(--screen-bg);
5882
border-radius: 30px;
59-
position: absolute;
60-
top: 5px;
61-
left: 5px;
62-
display: flex;
63-
flex-direction: column;
64-
justify-content: center;
65-
align-items: center;
66-
gap: 10px;
67-
transition: box-shadow 0.3s;
68-
}
69-
70-
.watch:hover .display {
71-
box-shadow: inset 0 0 20px rgba(0, 128, 255, 0.3);
83+
position: relative;
84+
transition: box-shadow 0.4s ease;
7285
}
73-
74-
.side-button {
75-
width: 5px;
76-
height: 40px;
77-
background: #444;
86+
87+
.side-button, .crown {
88+
background: linear-gradient(to right, var(--watch-body), var(--watch-body-highlight));
7889
position: absolute;
79-
right: -5px;
80-
top: 60px;
81-
border-radius: 0 3px 3px 0;
90+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
8291
}
92+
93+
.side-button { width: 5px; height: 40px; right: -5px; top: 60px; border-radius: 0 3px 3px 0; }
94+
.crown { width: 8px; height: 25px; right: -8px; top: 110px; border-radius: 0 5px 5px 0; }
8395

84-
.crown {
85-
width: 8px;
86-
height: 15px;
87-
background: #444;
96+
.strap-top, .strap-bottom { width: 160px; height: 100px; background: var(--strap-color); position: absolute; left: 20px; z-index: -1; }
97+
.strap-top { top: -80px; border-radius: 20px 20px 0 0; }
98+
.strap-bottom { bottom: -80px; border-radius: 0 0 20px 20px; }
99+
100+
.time-container {
88101
position: absolute;
89-
right: -8px;
90-
top: 110px;
91-
border-radius: 0 5px 5px 0;
102+
top: 40px;
103+
left: 0;
104+
width: 100%;
105+
text-align: center;
106+
opacity: 0;
107+
transition: opacity 0.4s ease 0.1s, top 0.4s ease;
108+
z-index: 5;
92109
}
93-
94-
.strap-top, .strap-bottom {
95-
width: 160px;
96-
height: 100px;
97-
background: lime; /* Changed to lime yellow */
98-
position: absolute;
99-
left: 20px;
110+
.time {
111+
color: var(--text-color);
112+
font-size: 38px;
113+
font-weight: 600;
100114
}
101-
102-
.strap-top {
103-
top: -80px;
104-
border-radius: 10px 10px 0 0;
115+
.date {
116+
font-size: 16px;
117+
font-weight: 500;
118+
color: var(--text-secondary);
105119
}
106-
107-
.strap-bottom {
108-
bottom: -80px;
109-
border-radius: 0 0 10px 10px;
120+
121+
.watch:hover .display {
122+
box-shadow: inset 0 0 15px rgba(0, 122, 255, 0.3);
110123
}
111124

112-
.default-text {
113-
color: #fff;
114-
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
115-
font-size: 16px;
125+
.watch:hover .time-container, .watch:hover .stats-container {
116126
opacity: 1;
117-
position: absolute;
118-
transition: opacity 0.3s;
119127
}
120-
121-
.time {
122-
color: #fff;
123-
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
124-
font-size: 32px;
125-
opacity: 0;
128+
129+
.stats-container {
126130
position: absolute;
127-
transition: opacity 0.3s;
131+
bottom: 20px;
132+
left: 0;
133+
width: 100%;
134+
display: flex;
135+
justify-content: center;
136+
gap: 20px;
137+
opacity: 0;
138+
transition: opacity 0.5s ease 0.2s;
139+
}
140+
141+
.icon-group {
142+
position: relative;
143+
width: 40px;
144+
height: 40px;
145+
display: flex;
146+
justify-content: center;
147+
align-items: center;
148+
font-size: 22px;
149+
cursor: pointer;
150+
color: var(--text-color);
151+
transition: color 0.3s ease;
152+
z-index: 10;
128153
}
129154

130-
.date {
131-
color: #888;
132-
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
133-
font-size: 16px;
134-
opacity: 0;
155+
.detail-text {
135156
position: absolute;
136-
transform: translateY(30px);
137-
transition: opacity 0.3s;
157+
top: -65px;
158+
width: 150px;
159+
text-align: center;
160+
font-size: 24px;
161+
font-weight: 500;
162+
opacity: 0;
163+
transition: opacity 0.3s ease, transform 0.3s ease;
164+
pointer-events: none;
165+
transform: translateY(10px);
138166
}
167+
168+
.sleep .detail-text { left: 5px; }
169+
.steps .detail-text { left: -55px; }
170+
.heart .detail-text { left: -115px; }
139171

140-
.stats {
141-
color: #fff;
142-
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
143-
font-size: 16px;
144-
opacity: 0;
145-
position: absolute;
146-
transform: translateY(60px); /* Adjusted for spacing */
147-
transition: opacity 0.3s;
172+
173+
.detail-text small {
174+
font-size: 14px;
175+
color: var(--text-secondary);
176+
display: block;
148177
}
149178

150-
.watch:hover .default-text {
151-
opacity: 0;
179+
.sleep-detail { color: var(--accent-blue); }
180+
.heart-detail { color: var(--accent-red); }
181+
.steps-detail { color: var(--accent-green); }
182+
183+
.stats-container:hover ~ .time-container {
184+
top: 20px;
185+
opacity: 0.6;
152186
}
153187

154-
.watch:hover .time,
155-
.watch:hover .date,
156-
.watch:hover .stats {
188+
.icon-group:hover .detail-text {
157189
opacity: 1;
190+
transform: translateY(0);
158191
}
192+
193+
.icon-group.sleep:hover { color: var(--accent-blue); }
194+
.icon-group.heart:hover { color: var(--accent-red); }
195+
.icon-group.steps:hover { color: var(--accent-green); }
159196

160-
@keyframes slideIn {
161-
to {
162-
transform: translateX(0);
163-
}
197+
/* --- New animation for the heartbeat --- */
198+
.heart-detail::before {
199+
content: "68 BPM"; /* Default starting content */
200+
animation: heartbeat-flicker 4s linear infinite;
164201
}
202+
203+
@keyframes heartbeat-flicker {
204+
0% { content: "68 BPM"; }
205+
25% { content: "71 BPM"; }
206+
50% { content: "67 BPM"; }
207+
75% { content: "70 BPM"; }
208+
100% { content: "68 BPM"; }
209+
}
210+
211+
@keyframes slideIn { to { transform: translateX(0); } }
165212
</style>
166213
</head>
167214
<body>
215+
168216
<div class="watch-container">
169-
<div class="apple-logo">●</div>
170217
<div class="watch">
171218
<div class="strap-top"></div>
172219
<div class="screen">
173220
<div class="display">
174-
<div class="default-text">Hover to wake</div>
175-
<div class="time">12:00</div>
176-
<div class="date">Monday, Oct 30</div>
177-
<div class="stats">1276 steps | 348 cal 🔥</div>
221+
222+
<div class="stats-container">
223+
<div class="icon-group sleep">
224+
<span>🌙</span>
225+
<div class="detail-text sleep-detail">8h 15m <small>Sleep</small></div>
226+
</div>
227+
228+
<div class="icon-group steps">
229+
<span>🚶‍♂</span>
230+
<div class="detail-text steps-detail">8,124 <small>Steps</small></div>
231+
</div>
232+
233+
<div class="icon-group heart">
234+
<span>❤️</span>
235+
<div class="detail-text heart-detail"></div>
236+
</div>
237+
</div>
238+
239+
<div class="time-container">
240+
<div class="time">11:47</div>
241+
<div class="date">Tue, Oct 14</div>
242+
</div>
178243
</div>
179244
</div>
180245
<div class="side-button"></div>
181246
<div class="crown"></div>
182247
<div class="strap-bottom"></div>
183248
</div>
184249
</div>
250+
185251
</body>
186252
</html>

0 commit comments

Comments
 (0)