-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathwinner.html
121 lines (116 loc) · 4.04 KB
/
winner.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html>
<head>
<title>Winner!!!</title>
<style>
*, *::after, *::before {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
background: black;
font-family: Geneva, Tahoma, sans-serif;
}
.winner-container {
display: grid;
place-items: center;
}
.cover {
width: 200px;
height: 200px;
background: linear-gradient(to right, darkorange, gray);
position: absolute;
border-radius: 10px;
display: grid;
place-items: center;
padding: 1rem;
text-align: center;
font-size: 2rem;
cursor: pointer;
perspective: 500px;
}
@keyframes reveal {
100% {
transform: rotate(720deg) rotateY(90deg);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes color-shift {
0%, 100% { color: red; }
16% { color: orange; }
32% { color: yellow; }
48% { color: green; }
64% { color: blue; }
80% { color: purple; }
}
.winner {
font-size: 2rem;
opacity: 0;
}
</style>
</head>
<body>
<div id="winner-container" class="winner-container" style="display: none;">
<h1 class="winner" id="winner">Madhava</h1>
<div id="cover-card" class="cover">Hover to reveal the giveaway winner!</div>
</div>
<!-- Script -->
<script>
const coverBox = document.getElementById("cover-card"),
winnerContainer = document.getElementById("winner-container"),
winnerText = document.getElementById("winner");
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(cname) == 0) {
return c.substring(cname.length, c.length);
}
}
return "";
}
if (getCookie("revealedWinner") !== "true") {
// Display the cover to reveal the winner
winnerContainer.style.display = "grid";
coverBox.addEventListener("mouseenter", () => {
coverBox.style.animation = "reveal 5s forwards cubic-bezier(.65,-0.15,.38,.93)";
winnerText.style.animation = "fade-in 1s forwards 4.5s, color-shift 3s infinite linear";
setCookie("revealedWinner", "true", 7); // Set cookie to expire in 7 days
});
} else {
// If the winner has already been revealed, skip the animation
winnerContainer.style.display = "grid";
coverBox.innerHTML = ""; // Remove cover text
coverBox.style.background = "none"; // Clear background of cover box
winnerText.style.opacity = "1"; // Immediately show the winner name
winnerText.style.animation = "color-shift 3s infinite linear"; // Keep the color shift animation
// Optional: Allow clicking the box to directly show the winner
coverBox.addEventListener("click", () => {
winnerText.style.opacity = "1";
});
}
</script>
</body>
</html>