diff --git a/Art/Ajish777_watch_animation/index.html b/Art/Ajish777_watch_animation/index.html new file mode 100644 index 000000000..26d1b6e7b --- /dev/null +++ b/Art/Ajish777_watch_animation/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + +
+ +
+
+
+
+
Hover to wake
+
12:00
+
Monday, Oct 30
+
1276 steps | 348 cal 🔥
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Art/Ajish777_watch_animation/meta.json b/Art/Ajish777_watch_animation/meta.json new file mode 100644 index 000000000..2c6dbfe88 --- /dev/null +++ b/Art/Ajish777_watch_animation/meta.json @@ -0,0 +1,4 @@ +{ + "githubHandle": "Ajish777", + "artName": "Smartwatch Animation" +} \ No newline at end of file diff --git a/Art/Ajish777_watch_animation/style.css b/Art/Ajish777_watch_animation/style.css new file mode 100644 index 000000000..349428329 --- /dev/null +++ b/Art/Ajish777_watch_animation/style.css @@ -0,0 +1,158 @@ +body { + margin: 0; + overflow: hidden; + background-color: rgba(0, 128, 255, 0.5); /* Oceanic color */ +} + +.watch-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + position: relative; + overflow: hidden; + z-index: 10; +} + +.apple-logo { + position: absolute; + font-size: 400px; + color: rgba(0, 0, 0, 0.03); + z-index: 1; + content: "●"; +} + +.watch { + width: 200px; + height: 240px; + background: silver; /* Changed to silver */ + border-radius: 40px; + position: relative; + transform: translateX(-1000px); + animation: slideIn 1.5s forwards; + cursor: pointer; + z-index: 2; +} + +.screen { + width: 180px; + height: 220px; + background: silver; /* Changed to silver */ + border-radius: 35px; + position: absolute; + top: 10px; + left: 10px; + overflow: hidden; +} + +.display { + width: 170px; + height: 210px; + background: #1a1a1a; + border-radius: 30px; + position: absolute; + top: 5px; + left: 5px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + transition: box-shadow 0.3s; +} + +.watch:hover .display { + box-shadow: inset 0 0 20px rgba(0, 128, 255, 0.3); +} + +.side-button { + width: 5px; + height: 40px; + background: #444; + position: absolute; + right: -5px; + top: 60px; + border-radius: 0 3px 3px 0; +} + +.crown { + width: 8px; + height: 15px; + background: #444; + position: absolute; + right: -8px; + top: 110px; + border-radius: 0 5px 5px 0; +} + +.strap-top, .strap-bottom { + width: 160px; + height: 100px; + background: lime; /* Changed to lime yellow */ + position: absolute; + left: 20px; +} + +.strap-top { + top: -80px; + border-radius: 10px 10px 0 0; +} + +.strap-bottom { + bottom: -80px; + border-radius: 0 0 10px 10px; +} + +.default-text { + color: #fff; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + opacity: 1; + position: absolute; + transition: opacity 0.3s; +} + +.time { + color: #fff; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 32px; + opacity: 0; + position: absolute; + transition: opacity 0.3s; +} + +.date { + color: #888; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + opacity: 0; + position: absolute; + transform: translateY(30px); + transition: opacity 0.3s; +} + +.stats { + color: #fff; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + opacity: 0; + position: absolute; + transform: translateY(60px); /* Adjusted for spacing */ + transition: opacity 0.3s; +} + +.watch:hover .default-text { + opacity: 0; +} + +.watch:hover .time, +.watch:hover .date, +.watch:hover .stats { + opacity: 1; +} + +@keyframes slideIn { + to { + transform: translateX(0); + } +} \ No newline at end of file