🎉✨🎈
00:00:00
🍀🌟🎊
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body>
<div style="width: 100%; max-width: 400px; height: 100vh; max-height: 400px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f8ff;">
<div onclick="animateEmoji()" style="font-size: 50px; cursor: pointer;">🎉✨🎈</div>
<div id="timer" style="font-size: 40px; margin: 20px 0;">00:00:00</div>
<div onclick="animateEmoji()" style="font-size: 50px; cursor: pointer;">🍀🌟🎊</div>
<input type="button" value="🎯 Start Countdown 🎯" onclick="startCountdown()" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #ff69b4; color: white; cursor: pointer; animation: bounce 2s infinite;">
<canvas id="confetti" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
</div>
<script>
let countdown;
function startCountdown() {
clearInterval(countdown);
const targetDate = new Date();
targetDate.setSeconds(targetDate.getSeconds() + 3600);
countdown = setInterval(() => {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance < 0) {
clearInterval(countdown);
document.getElementById('timer').innerHTML = "🎊 Time's Up! 🎊";
triggerConfetti();
return;
}
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('timer').innerHTML = `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
}, 1000);
}
function addZero(num) {
return num < 10 ? '0' + num : num;
}
function animateEmoji() {
const emojis = document.querySelectorAll('div[onclick="animateEmoji()"]');
emojis.forEach(emoji => {
emoji.style.animation = 'sparkle 1s infinite';
setTimeout(() => {
emoji.style.animation = '';
}, 1000);
});
}
function triggerConfetti() {
const canvas = document.getElementById('confetti');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
const particles = [];
for(let i=0;i<100;i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 4 + 1,
d: Math.random() * 50
});
}
let angle = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = '10px Arial';
for(let i=0; i<particles.length; i++) {
const p = particles[i];
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
ctx.fill();
}
angle += 0.01;
}
setInterval(draw, 20);
}
</script>
</body>
</html>
```