.confetti-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: relative;
width: 100%;
height: 400px;
background: #f3f4f6;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#confettiCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.success-card {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
z-index: 20;
}
.check-icon {
width: 60px;
height: 60px;
background: #10b981;
color: white;
border-radius: 50%;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
button {
padding: 10px 20px;
background: #111827;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
const canvas = document.getElementById("confettiCanvas");
const ctx = canvas.getContext("2d");
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;
let confetti = [];
const colors = ["#ef4444", "#3b82f6", "#10b981", "#f59e0b", "#8b5cf6"];
function createConfetti() {
for (let i = 0; i < 100; i++) {
confetti.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height - canvas.height,
color: colors[Math.floor(Math.random() * colors.length)],
size: Math.random() * 8 + 4,
speed: Math.random() * 3 + 2,
angle: Math.random() * 6.2
});
}
}
function drawConfetti() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
confetti.forEach((p, index) => {
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
ctx.fill();
p.y += p.speed;
p.x += Math.sin(p.angle) * 2;
if (p.y > canvas.height) confetti[index].y = -10;
});
requestAnimationFrame(drawConfetti);
}
createConfetti();
drawConfetti();
document.getElementById("celebrateBtn").addEventListener("click", () => {
confetti = [];
createConfetti();
});