Skip to content

Commit 36f8d38

Browse files
Ajish777Ajeesh AmreetLaurelineP
authored
Added smart watch animation (#2866)
* Added smart watch animation * Removed icon.png as requested --------- Co-authored-by: Ajeesh Amreet <[email protected]> Co-authored-by: Laureline Paris <[email protected]>
1 parent 478c514 commit 36f8d38

File tree

3 files changed

+192
-0
lines changed

3 files changed

+192
-0
lines changed

‎Art/Ajish777_watch_animation/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title></title>
7+
<link href="./styles.css" rel="stylesheet"/>
8+
</head>
9+
10+
<body>
11+
12+
<div class="watch-container"></div>
13+
<div class="apple-logo">●</div>
14+
<div class="watch">
15+
<div class="strap-top"></div>
16+
<div class="screen">
17+
<div class="display">
18+
<div class="default-text">Hover to wake</div>
19+
<div class="time">12:00</div>
20+
<div class="date">Monday, Oct 30</div>
21+
<div class="stats">1276 steps | 348 cal 🔥</div>
22+
</div>
23+
</div>
24+
<div class="side-button"></div>
25+
<div class="crown"></div>
26+
<div class="strap-bottom"></div>
27+
</div>
28+
</div>
29+
</body>
30+
</html>

‎Art/Ajish777_watch_animation/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"githubHandle": "Ajish777",
3+
"artName": "Smartwatch Animation"
4+
}

‎Art/Ajish777_watch_animation/style.css

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
body {
2+
margin: 0;
3+
overflow: hidden;
4+
background-color: rgba(0, 128, 255, 0.5); /* Oceanic color */
5+
}
6+
7+
.watch-container {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
position: relative;
13+
overflow: hidden;
14+
z-index: 10;
15+
}
16+
17+
.apple-logo {
18+
position: absolute;
19+
font-size: 400px;
20+
color: rgba(0, 0, 0, 0.03);
21+
z-index: 1;
22+
content: "●";
23+
}
24+
25+
.watch {
26+
width: 200px;
27+
height: 240px;
28+
background: silver; /* Changed to silver */
29+
border-radius: 40px;
30+
position: relative;
31+
transform: translateX(-1000px);
32+
animation: slideIn 1.5s forwards;
33+
cursor: pointer;
34+
z-index: 2;
35+
}
36+
37+
.screen {
38+
width: 180px;
39+
height: 220px;
40+
background: silver; /* Changed to silver */
41+
border-radius: 35px;
42+
position: absolute;
43+
top: 10px;
44+
left: 10px;
45+
overflow: hidden;
46+
}
47+
48+
.display {
49+
width: 170px;
50+
height: 210px;
51+
background: #1a1a1a;
52+
border-radius: 30px;
53+
position: absolute;
54+
top: 5px;
55+
left: 5px;
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: center;
59+
align-items: center;
60+
gap: 10px;
61+
transition: box-shadow 0.3s;
62+
}
63+
64+
.watch:hover .display {
65+
box-shadow: inset 0 0 20px rgba(0, 128, 255, 0.3);
66+
}
67+
68+
.side-button {
69+
width: 5px;
70+
height: 40px;
71+
background: #444;
72+
position: absolute;
73+
right: -5px;
74+
top: 60px;
75+
border-radius: 0 3px 3px 0;
76+
}
77+
78+
.crown {
79+
width: 8px;
80+
height: 15px;
81+
background: #444;
82+
position: absolute;
83+
right: -8px;
84+
top: 110px;
85+
border-radius: 0 5px 5px 0;
86+
}
87+
88+
.strap-top, .strap-bottom {
89+
width: 160px;
90+
height: 100px;
91+
background: lime; /* Changed to lime yellow */
92+
position: absolute;
93+
left: 20px;
94+
}
95+
96+
.strap-top {
97+
top: -80px;
98+
border-radius: 10px 10px 0 0;
99+
}
100+
101+
.strap-bottom {
102+
bottom: -80px;
103+
border-radius: 0 0 10px 10px;
104+
}
105+
106+
.default-text {
107+
color: #fff;
108+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
109+
font-size: 16px;
110+
opacity: 1;
111+
position: absolute;
112+
transition: opacity 0.3s;
113+
}
114+
115+
.time {
116+
color: #fff;
117+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
118+
font-size: 32px;
119+
opacity: 0;
120+
position: absolute;
121+
transition: opacity 0.3s;
122+
}
123+
124+
.date {
125+
color: #888;
126+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
127+
font-size: 16px;
128+
opacity: 0;
129+
position: absolute;
130+
transform: translateY(30px);
131+
transition: opacity 0.3s;
132+
}
133+
134+
.stats {
135+
color: #fff;
136+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
137+
font-size: 16px;
138+
opacity: 0;
139+
position: absolute;
140+
transform: translateY(60px); /* Adjusted for spacing */
141+
transition: opacity 0.3s;
142+
}
143+
144+
.watch:hover .default-text {
145+
opacity: 0;
146+
}
147+
148+
.watch:hover .time,
149+
.watch:hover .date,
150+
.watch:hover .stats {
151+
opacity: 1;
152+
}
153+
154+
@keyframes slideIn {
155+
to {
156+
transform: translateX(0);
157+
}
158+
}

0 commit comments

Comments
 (0)