Skip to content

Commit 4cae266

Browse files
DanTheWizardDanTheWizard
committed
Added some confetti
1 parent 0f475a6 commit 4cae266

File tree

1 file changed

+78
-33
lines changed

1 file changed

+78
-33
lines changed

‎grad-countdown.html‎

Lines changed: 78 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
<!-- Not gonna lie agin, this was made with AI as a proof of concept -->
2-
31
<!DOCTYPE html>
42
<html lang="en">
53
<head>
64
<meta charset="UTF-8">
75
<meta name="viewport" content="width=device-width, initial-scale=1.0">
86
<title>Graduation Countdown</title>
97
<style>
10-
* {
8+
* {
119
margin: 0;
1210
padding: 0;
1311
box-sizing: border-box;
@@ -16,15 +14,30 @@
1614

1715
body {
1816
background: white;
17+
overflow: hidden;
18+
height: 100vh;
19+
width: 100vw;
1920
display: flex;
2021
justify-content: center;
2122
align-items: center;
23+
position: relative;
24+
}
25+
26+
/* 🎉 Confetti background canvas */
27+
#confetti-canvas {
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
width: 100vw;
2232
height: 100vh;
23-
overflow: hidden;
33+
pointer-events: none;
34+
z-index: 0;
2435
}
2536

37+
/* 🎓 Countdown overlay */
2638
#countdown-container {
2739
position: relative;
40+
z-index: 1;
2841
width: min(90vw, 700px);
2942
aspect-ratio: 1 / 1;
3043
display: flex;
@@ -69,7 +82,7 @@
6982
font-size: clamp(1.4rem, 4vw, 3rem);
7083
font-weight: 700;
7184
line-height: 1.1;
72-
transform: translateY(-0.07em);
85+
transform: translateY(-0.07em); /* 👌 your tuned offset */
7386
}
7487

7588
.time-label {
@@ -92,8 +105,11 @@
92105
</head>
93106
<body>
94107

108+
<!-- 🎉 Confetti Canvas -->
109+
<canvas id="confetti-canvas"></canvas>
110+
111+
<!-- 🎓 Countdown Content -->
95112
<div id="countdown-container">
96-
<!-- purple flipped hat -->
97113
<svg class="cap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
98114
<g id="Graduation">
99115
<polygon points="445.055 384.794 445.055 221.864 418.805 234.989 418.805 384.777 401.301 429.785 462.551 429.785 445.055 384.794"/>
@@ -102,28 +118,23 @@
102118
</g>
103119
</svg>
104120

105-
<!-- timer -->
106121
<div id="timer">
107122
<div class="time-group">
108123
<div class="time-value" id="days">--</div>
109124
<div class="time-label">DAYS</div>
110125
</div>
111-
112126
<div class="time-group">
113127
<div class="time-colon">:</div>
114128
<div class="time-label">&nbsp;</div>
115129
</div>
116-
117130
<div class="time-group">
118131
<div class="time-value" id="hours">--</div>
119132
<div class="time-label">HOURS</div>
120133
</div>
121-
122134
<div class="time-group">
123135
<div class="time-colon">:</div>
124136
<div class="time-label">&nbsp;</div>
125137
</div>
126-
127138
<div class="time-group">
128139
<div class="time-value" id="minutes">--</div>
129140
<div class="time-label">MIN</div>
@@ -133,33 +144,67 @@
133144
<div id="label">Graduation Countdown</div>
134145
</div>
135146

136-
<script>
147+
<!-- 🎉 Confetti Library -->
148+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
149+
150+
<script>
151+
/* 🎓 Countdown Logic */
137152
function updateCountdown() {
138-
const target = new Date("Jun 11, 2026 15:00:00 GMT").getTime();
139-
const now = new Date().getTime();
140-
const diff = target - now;
141-
142-
if (diff <= 0) {
143-
document.getElementById("days").textContent = "🎓";
144-
document.getElementById("hours").textContent = "";
145-
document.getElementById("minutes").textContent = "";
146-
document.getElementById("label").textContent = "It's Graduation Day!";
147-
document.querySelectorAll(".time-colon").forEach(c => c.style.display = "none");
148-
return;
153+
const target = new Date("Jun 11, 2026 15:00:00 GMT").getTime();
154+
const now = new Date().getTime();
155+
const diff = target - now;
156+
157+
if (diff <= 0) {
158+
document.getElementById("days").textContent = "🎓";
159+
document.getElementById("hours").textContent = "";
160+
document.getElementById("minutes").textContent = "";
161+
document.getElementById("label").textContent = "It's Graduation Day!";
162+
document.querySelectorAll(".time-colon").forEach(c => c.style.display = "none");
163+
return;
164+
}
165+
166+
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
167+
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
168+
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
169+
170+
document.getElementById("days").textContent = days;
171+
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
172+
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
149173
}
150174

151-
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
152-
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
153-
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
175+
setInterval(updateCountdown, 1000);
176+
updateCountdown();
154177

155-
document.getElementById("days").textContent = days;
156-
document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
157-
document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
158-
}
178+
/* 🎉 Confetti Setup */
179+
const confettiCanvas = document.getElementById('confetti-canvas');
180+
const myConfetti = confetti.create(confettiCanvas, { resize: true, useWorker: true });
181+
182+
function randomInRange(min, max) {
183+
return Math.random() * (max - min) + min;
184+
}
159185

160-
setInterval(updateCountdown, 1000);
161-
updateCountdown();
162-
</script>
186+
let skew = 1;
187+
(function frame() {
188+
skew = Math.max(0.8, skew - 0.001);
189+
190+
myConfetti({
191+
particleCount: 2,
192+
startVelocity: 0,
193+
ticks: 300,
194+
origin: {
195+
x: Math.random(),
196+
y: (Math.random() * skew) - 0.2
197+
},
198+
colors: ['#5A2D81', '#000000', '#FFFFFF', '#C0C0C0'],
199+
gravity: randomInRange(0.4, 0.6),
200+
scalar: randomInRange(0.6, 1.2),
201+
drift: randomInRange(-0.4, 0.4),
202+
shapes: ['square', 'circle']
203+
});
204+
205+
requestAnimationFrame(frame);
206+
})();
207+
</script>
163208

164209
</body>
165210
</html>

0 commit comments

Comments
 (0)