<div class="container">
<div class="emoji">🎉</div>
<h1 id="title">Happy Birthday!</h1>
<p class="wish-text" id="wish">
Wishing you a day filled with love, laughter, and endless joy.
May this year bring you success, happiness, and all your heart desires!
</p>
<button class="button" onclick="generateWish()">Generate New Wish</button>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #3D0C02 0%, #8B1E3F 50%, #3D0C02 100%);
overflow: hidden;
}
.container {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 600px;
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
h1 {
font-size: 3rem;
color: #fff;
margin-bottom: 20px;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
.wish-text {
font-size: 1.2rem;
color: #f0f0f0;
line-height: 1.8;
margin-bottom: 30px;
opacity: 0;
animation: slideIn 1s ease-out 0.5s forwards;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.button {
padding: 12px 30px;
font-size: 1rem;
background: linear-gradient(135deg, #8B1E3F, #C73659);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(139, 30, 63, 0.4);
}
.button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(139, 30, 63, 0.6);
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: #fff;
position: absolute;
animation: fall 3s linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.emoji {
font-size: 3rem;
display: inline-block;
animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(15deg); }
}
const wishes = [
"Wishing you a day filled with love, laughter, and endless joy. May this year bring you success, happiness, and all your heart desires!",
"Happy Birthday! May your special day be as wonderful as you are. Here's to another year of amazing adventures!",
"Cheers to you on your birthday! May your dreams come true and your heart be filled with joy today and always.",
"Another year older, another year wiser! Wishing you health, wealth, and endless happiness on your special day.",
"Happy Birthday! May this year be your best one yet, filled with love, laughter, and unforgettable memories.",
"Sending you warm wishes on your birthday! May every moment of your day be filled with joy and celebration.",
"It's your special day! May you be surrounded by love, blessed with happiness, and inspired by endless possibilities.",
"Happy Birthday! Here's to celebrating you today and the incredible person you've become. Enjoy every moment!"
];
function generateWish() {
const wishElement = document.getElementById('wish');
const randomWish = wishes[Math.floor(Math.random() * wishes.length)];
wishElement.style.animation = 'none';
setTimeout(() => {
wishElement.textContent = randomWish;
wishElement.style.animation = 'slideIn 1s ease-out forwards';
}, 50);
createConfetti();
}
function createConfetti() {
const colors = ['#FFD700', '#FF69B4', '#87CEEB', '#98FB98', '#DDA0DD'];
for (let i = 0; i < 30; i++) {
setTimeout(() => {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 2 + 's';
confetti.style.width = Math.random() * 10 + 5 + 'px';
confetti.style.height = confetti.style.width;
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}, i * 50);
}
}
// Initial confetti on load
window.addEventListener('load', () => {
setTimeout(createConfetti, 1000);
});
No comments yet. Be the first!