Skip to content

Commit 37edd91

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 57
1 parent 319f122 commit 37edd91

1 file changed

Lines changed: 98 additions & 0 deletions

File tree

‎public/57/index.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
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.0" />
6+
<script src="/lib/gsap.min.js"></script>
7+
<script src="/lib/MorphSVGPlugin.min.js"></script>
8+
<link rel="icon" href="/assets/icon.png" />
9+
<title>Day 57/100</title>
10+
</head>
11+
<body>
12+
<main>
13+
<div class="like-button" id="like-button">
14+
<svg class="like-icon" id="like-icon" viewBox="0 0 21.4184 22.7134">
15+
<path
16+
id="icon"
17+
d="M0 15.0276C0 18.48 2.2065 21.3039 5.12218 21.3039L8.25294 21.3039C9.54907 21.9551 11.0778 22.3205 12.7451 22.3205L14.0847 22.3205C15.356 22.3205 16.4306 22.2428 17.1262 22.0644C18.5807 21.711 19.5159 20.6507 19.5159 19.3524C19.5159 19.1393 19.4831 18.9493 19.4307 18.7593C20.0845 18.2213 20.449 17.4618 20.449 16.6309C20.449 16.2563 20.3771 15.8878 20.2497 15.5882C20.6891 15.0986 20.9302 14.4257 20.9302 13.7141C20.9302 13.2591 20.8258 12.7966 20.6434 12.4362C20.9071 12.0118 21.0571 11.4468 21.0571 10.8431C21.0571 9.25986 19.8542 8.0441 18.2772 8.0441L14.7779 8.0441C14.6066 8.0441 14.4916 7.96197 14.504 7.79816C14.591 6.85396 16.0807 4.53325 16.0807 2.59745C16.0807 1.09277 15.0137 0 13.5645 0C12.5094 0 11.7758 0.553045 11.0984 1.84603C9.89993 4.16441 8.41164 6.20538 6.38692 8.70595L4.7613 8.70595C2.02095 8.70595 0 11.5037 0 15.0276ZM6.21229 14.9322C6.21229 12.9346 6.65885 11.6606 7.9408 9.93303C9.38477 7.99813 11.3942 5.66419 12.8413 2.78026C13.1059 2.24749 13.2906 2.12229 13.5641 2.12229C13.8868 2.12229 14.0982 2.35581 14.0982 2.76515C14.0982 4.08673 12.4935 6.45663 12.4935 8.04038C12.4935 9.24192 13.4376 10.0266 14.7656 10.0266L18.2057 10.0266C18.7025 10.0266 19.0746 10.3956 19.0746 10.8897C19.0746 11.2458 18.956 11.4762 18.6661 11.782C18.3599 12.0842 18.3186 12.5559 18.5924 12.8502C18.8362 13.2031 18.9414 13.4269 18.9414 13.7203C18.9414 14.0635 18.7736 14.3636 18.4277 14.6207C18.0474 14.8963 17.9218 15.364 18.1299 15.8092C18.3213 16.1586 18.4136 16.3388 18.4136 16.6092C18.4136 17.0234 18.1473 17.3452 17.6034 17.6316C17.2364 17.8455 17.1348 18.2697 17.2848 18.63C17.4602 19.0669 17.4864 19.1455 17.4832 19.3368C17.4832 19.7022 17.2102 20.0014 16.6136 20.1493C16.06 20.2829 15.1558 20.3477 13.9237 20.3446L12.8277 20.3415C8.86012 20.3291 6.21229 18.106 6.21229 14.9322ZM1.93907 15.0276C1.93907 12.6456 3.12034 10.7661 4.51286 10.6637C4.72775 10.6606 4.94574 10.6574 5.16062 10.6512C4.51384 11.9536 4.22664 13.3115 4.22664 14.9495C4.22664 16.6665 4.80816 18.1992 5.87221 19.4234C5.57339 19.4234 5.26261 19.4203 4.95138 19.4172C3.3072 19.3116 1.93907 17.3971 1.93907 15.0276Z"
18+
/>
19+
</svg>
20+
</div>
21+
</main>
22+
23+
<style>
24+
body {
25+
margin: 0;
26+
overflow: hidden;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
-webkit-tap-highlight-color: transparent;
31+
width: 100vw;
32+
height: 100vh;
33+
background-color: #fff;
34+
}
35+
36+
.like-button {
37+
position: relative;
38+
cursor: pointer;
39+
width: 100px;
40+
height: 100px;
41+
}
42+
43+
.like-icon {
44+
width: 100%;
45+
height: 100%;
46+
overflow: visible;
47+
fill: #000;
48+
transition: all 0.25s ease-in-out;
49+
}
50+
51+
.like-icon-lightup {
52+
fill: rgba(255, 214, 29, 1);
53+
transform: translateY(-10%);
54+
}
55+
</style>
56+
57+
<script>
58+
gsap.registerPlugin(MorphSVGPlugin);
59+
60+
const likeButton = document.getElementById("like-button");
61+
const likeIcon = document.getElementById("like-icon");
62+
63+
let animating = false;
64+
65+
const like =
66+
"M0 15.0276C0 18.48 2.2065 21.3039 5.12218 21.3039L8.25294 21.3039C9.54907 21.9551 11.0778 22.3205 12.7451 22.3205L14.0847 22.3205C15.356 22.3205 16.4306 22.2428 17.1262 22.0644C18.5807 21.711 19.5159 20.6507 19.5159 19.3524C19.5159 19.1393 19.4831 18.9493 19.4307 18.7593C20.0845 18.2213 20.449 17.4618 20.449 16.6309C20.449 16.2563 20.3771 15.8878 20.2497 15.5882C20.6891 15.0986 20.9302 14.4257 20.9302 13.7141C20.9302 13.2591 20.8258 12.7966 20.6434 12.4362C20.9071 12.0118 21.0571 11.4468 21.0571 10.8431C21.0571 9.25986 19.8542 8.0441 18.2772 8.0441L14.7779 8.0441C14.6066 8.0441 14.4916 7.96197 14.504 7.79816C14.591 6.85396 16.0807 4.53325 16.0807 2.59745C16.0807 1.09277 15.0137 0 13.5645 0C12.5094 0 11.7758 0.553045 11.0984 1.84603C9.89993 4.16441 8.41164 6.20538 6.38692 8.70595L4.7613 8.70595C2.02095 8.70595 0 11.5037 0 15.0276ZM6.21229 14.9322C6.21229 12.9346 6.65885 11.6606 7.9408 9.93303C9.38477 7.99813 11.3942 5.66419 12.8413 2.78026C13.1059 2.24749 13.2906 2.12229 13.5641 2.12229C13.8868 2.12229 14.0982 2.35581 14.0982 2.76515C14.0982 4.08673 12.4935 6.45663 12.4935 8.04038C12.4935 9.24192 13.4376 10.0266 14.7656 10.0266L18.2057 10.0266C18.7025 10.0266 19.0746 10.3956 19.0746 10.8897C19.0746 11.2458 18.956 11.4762 18.6661 11.782C18.3599 12.0842 18.3186 12.5559 18.5924 12.8502C18.8362 13.2031 18.9414 13.4269 18.9414 13.7203C18.9414 14.0635 18.7736 14.3636 18.4277 14.6207C18.0474 14.8963 17.9218 15.364 18.1299 15.8092C18.3213 16.1586 18.4136 16.3388 18.4136 16.6092C18.4136 17.0234 18.1473 17.3452 17.6034 17.6316C17.2364 17.8455 17.1348 18.2697 17.2848 18.63C17.4602 19.0669 17.4864 19.1455 17.4832 19.3368C17.4832 19.7022 17.2102 20.0014 16.6136 20.1493C16.06 20.2829 15.1558 20.3477 13.9237 20.3446L12.8277 20.3415C8.86012 20.3291 6.21229 18.106 6.21229 14.9322ZM1.93907 15.0276C1.93907 12.6456 3.12034 10.7661 4.51286 10.6637C4.72775 10.6606 4.94574 10.6574 5.16062 10.6512C4.51384 11.9536 4.22664 13.3115 4.22664 14.9495C4.22664 16.6665 4.80816 18.1992 5.87221 19.4234C5.57339 19.4234 5.26261 19.4203 4.95138 19.4172C3.3072 19.3116 1.93907 17.3971 1.93907 15.0276Z";
67+
const bulb =
68+
"M2.969 13.31c.583 0 1.092-.487 1.092-1.077 0-.596-.509-1.08-1.092-1.08h-1.9A1.09 1.09 0 0 0 0 12.233c0 .58.49 1.076 1.07 1.076Zm1.918-6.896a1.07 1.07 0 0 0 1.517 0 1.066 1.066 0 0 0 0-1.514l-1.34-1.353a1.087 1.087 0 0 0-1.524 0 1.08 1.08 0 0 0 0 1.517Zm6.267-3.435c0 .58.486 1.08 1.076 1.08.596 0 1.082-.5 1.082-1.08v-1.9A1.1 1.1 0 0 0 12.23 0a1.09 1.09 0 0 0-1.076 1.08ZM18.049 4.9a1.066 1.066 0 0 0 0 1.514 1.066 1.066 0 0 0 1.514 0l1.353-1.35a1.08 1.08 0 0 0 0-1.517 1.075 1.075 0 0 0-1.514 0Zm5.328 8.41c.583 0 1.082-.497 1.082-1.077a1.1 1.1 0 0 0-1.082-1.08h-1.9a1.09 1.09 0 0 0-1.079 1.08c0 .59.5 1.076 1.08 1.076ZM12.23 5.673c-3.504 0-6.305 2.531-6.305 5.843 0 3.454 2.02 4.516 2.546 10.312.045.528.374.852.909.852h5.7c.532 0 .86-.324.905-.852.527-5.796 2.556-6.858 2.556-10.306 0-3.315-2.817-5.85-6.311-5.85M9.285 24.908h5.889a.656.656 0 0 0 .666-.656.654.654 0 0 0-.666-.659H9.285a.654.654 0 0 0-.662.66c0 .362.29.655.662.655m2.945 2.766c1.491 0 2.687-.741 2.752-1.853h-5.52c.061 1.112 1.267 1.853 2.768 1.853";
69+
70+
likeButton.onclick = () => {
71+
if (animating) return;
72+
animating = true;
73+
likeIcon.classList.add("like-icon-lightup");
74+
gsap.to("#icon", {
75+
duration: 0.25,
76+
morphSVG: bulb,
77+
ease: "power1.inOut",
78+
onComplete: () => {
79+
setTimeout(() => {
80+
likeIcon.classList.remove("like-icon-lightup");
81+
}, 400);
82+
setTimeout(() => {
83+
gsap.to("#icon", {
84+
duration: 0.25,
85+
morphSVG: like,
86+
ease: "power1.inOut",
87+
onComplete: () => {
88+
likeIcon.classList.remove("like-icon-lightup");
89+
animating = false;
90+
},
91+
});
92+
}, 500);
93+
},
94+
});
95+
};
96+
</script>
97+
</body>
98+
</html>

0 commit comments

Comments
 (0)