|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Happy Birthday Jennifer/Mom!</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@300;400;600&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #ffeef8 100%); |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.dancing-font { |
|
|
font-family: 'Dancing Script', cursive; |
|
|
} |
|
|
|
|
|
.heart { |
|
|
animation: heartbeat 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes heartbeat { |
|
|
0% { transform: scale(1); } |
|
|
25% { transform: scale(1.1); } |
|
|
50% { transform: scale(1); } |
|
|
75% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.message-card { |
|
|
transition: all 0.3s ease; |
|
|
transform: rotate(-2deg); |
|
|
} |
|
|
|
|
|
.message-card:hover { |
|
|
transform: rotate(0deg) scale(1.05); |
|
|
} |
|
|
|
|
|
.candle-flame { |
|
|
width: 15px; |
|
|
height: 30px; |
|
|
background: #ff9d00; |
|
|
border-radius: 50% 50% 20% 20%; |
|
|
box-shadow: 0 0 20px #ff9d00, 0 0 60px #ff9d00, 0 0 100px #ff9d00; |
|
|
animation: flicker 2s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes flicker { |
|
|
0%, 100% { transform: scale(1); opacity: 1; } |
|
|
50% { transform: scale(0.9); opacity: 0.8; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-800"> |
|
|
|
|
|
<div id="confetti-container"></div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-4xl"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<div class="floating inline-block"> |
|
|
<div class="text-6xl mb-2 dancing-font text-pink-600">Happy Birthday</div> |
|
|
<h1 class="text-5xl font-bold text-purple-800">Jennifer <span class="heart text-red-500">♥</span></h1> |
|
|
<div class="mt-4 flex justify-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-400 mx-1"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-pink-400 mx-1"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-400 mx-1"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-green-400 mx-1"></div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-400 mx-1"></div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="mb-16 text-center"> |
|
|
<div class="relative inline-block"> |
|
|
|
|
|
<div class="w-64 h-6 bg-gray-200 rounded-full mx-auto shadow-md"></div> |
|
|
|
|
|
<div class="w-56 h-24 bg-gradient-to-b from-pink-300 to-pink-400 rounded-t-lg mx-auto -mt-3 shadow-inner"></div> |
|
|
|
|
|
<div class="w-48 h-16 bg-gradient-to-b from-pink-200 to-pink-300 rounded-t-lg mx-auto -mt-1 shadow-inner"></div> |
|
|
|
|
|
<div class="w-52 h-4 bg-pink-100 rounded-full mx-auto -mt-8"></div> |
|
|
|
|
|
<div class="flex justify-center -mt-16 space-x-3"> |
|
|
<div class="relative"> |
|
|
<div class="w-3 h-16 bg-gradient-to-b from-yellow-100 to-yellow-300 mx-auto rounded-sm"></div> |
|
|
<div class="candle-flame mx-auto -mt-6"></div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="w-3 h-20 bg-gradient-to-b from-blue-100 to-blue-300 mx-auto rounded-sm"></div> |
|
|
<div class="candle-flame mx-auto -mt-6"></div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="w-3 h-18 bg-gradient-to-b from-purple-100 to-purple-300 mx-auto rounded-sm"></div> |
|
|
<div class="candle-flame mx-auto -mt-6"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="blow-candles" class="mt-8 px-6 py-3 bg-pink-500 text-white rounded-full font-semibold hover:bg-pink-600 transition-all"> |
|
|
<i class="fas fa-wind mr-2"></i> Blow Out Candles |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8 dancing-font text-purple-700">Special Wishes For You</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="message-card p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg shadow-md border-l-4 border-pink-400"> |
|
|
<div class="text-4xl text-pink-500 mb-3"><i class="fas fa-heart"></i></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-purple-800">To The World's Best Mom</h3> |
|
|
<p class="text-gray-700">Your love is the guiding light in our lives. Today we celebrate you and all the wonderful things you bring to this world.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="message-card p-6 bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg shadow-md border-l-4 border-purple-400"> |
|
|
<div class="text-4xl text-purple-500 mb-3"><i class="fas fa-star"></i></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-purple-800">Endless Appreciation</h3> |
|
|
<p class="text-gray-700">For all the sacrifices you've made, the lessons you've taught, and the unconditional love you've given - thank you!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="message-card p-6 bg-gradient-to-br from-yellow-50 to-pink-50 rounded-lg shadow-md border-l-4 border-yellow-400"> |
|
|
<div class="text-4xl text-yellow-500 mb-3"><i class="fas fa-sun"></i></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-purple-800">Your Special Day</h3> |
|
|
<p class="text-gray-700">May this year bring you as much happiness as you've brought to others. You deserve all the joy in the world!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="message-card p-6 bg-gradient-to-br from-green-50 to-blue-50 rounded-lg shadow-md border-l-4 border-blue-400"> |
|
|
<div class="text-4xl text-blue-500 mb-3"><i class="fas fa-gift"></i></div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-purple-800">The Gift of You</h3> |
|
|
<p class="text-gray-700">The greatest gift we've ever received is having you in our lives. Today we celebrate that precious gift!</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16 text-center bg-gradient-to-r from-purple-100 to-pink-100 p-8 rounded-xl shadow-inner"> |
|
|
<h2 class="text-3xl font-bold mb-6 dancing-font text-purple-700">Celebration Countdown</h2> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-md w-20"> |
|
|
<div id="days" class="text-3xl font-bold text-pink-600">00</div> |
|
|
<div class="text-sm text-gray-600">Days</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-md w-20"> |
|
|
<div id="hours" class="text-3xl font-bold text-pink-600">00</div> |
|
|
<div class="text-sm text-gray-600">Hours</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-md w-20"> |
|
|
<div id="minutes" class="text-3xl font-bold text-pink-600">00</div> |
|
|
<div class="text-sm text-gray-600">Minutes</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-md w-20"> |
|
|
<div id="seconds" class="text-3xl font-bold text-pink-600">00</div> |
|
|
<div class="text-sm text-gray-600">Seconds</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-6 text-purple-800">Until we celebrate together in person!</p> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8 dancing-font text-purple-700">Memory Lane</h2> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
|
|
|
<div class="w-32 h-32 bg-gradient-to-br from-pink-200 to-purple-200 rounded-lg flex items-center justify-center shadow-md"> |
|
|
<i class="fas fa-smile-beam text-4xl text-purple-600"></i> |
|
|
</div> |
|
|
<div class="w-32 h-32 bg-gradient-to-br from-yellow-200 to-pink-200 rounded-lg flex items-center justify-center shadow-md"> |
|
|
<i class="fas fa-laugh-beam text-4xl text-pink-600"></i> |
|
|
</div> |
|
|
<div class="w-32 h-32 bg-gradient-to-br from-blue-200 to-purple-200 rounded-lg flex items-center justify-center shadow-md"> |
|
|
<i class="fas fa-hands-helping text-4xl text-blue-600"></i> |
|
|
</div> |
|
|
<div class="w-32 h-32 bg-gradient-to-br from-green-200 to-blue-200 rounded-lg flex items-center justify-center shadow-md"> |
|
|
<i class="fas fa-heart text-4xl text-green-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-center mt-6 text-gray-700 italic"> |
|
|
"While we can't show photos here, every moment with you is a cherished memory in our hearts." |
|
|
</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="text-center py-12 bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl shadow-xl text-white"> |
|
|
<div class="max-w-2xl mx-auto px-4"> |
|
|
<div class="text-5xl mb-6 dancing-font"><i class="fas fa-glass-cheers"></i></div> |
|
|
<h2 class="text-4xl font-bold mb-4">Happy Birthday Jennifer!</h2> |
|
|
<p class="text-xl mb-6">Wishing you a day filled with love, laughter, and all the happiness you bring to others!</p> |
|
|
<div class="text-6xl"> |
|
|
<i class="fas fa-heart mx-2 heart"></i> |
|
|
<i class="fas fa-star mx-2 floating" style="animation-delay: 0.5s"></i> |
|
|
<i class="fas fa-birthday-cake mx-2 floating" style="animation-delay: 1s"></i> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722']; |
|
|
|
|
|
for (let i = 0; i < 100; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.left = Math.random() * window.innerWidth + 'px'; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
|
|
|
const animationDuration = Math.random() * 3 + 2; |
|
|
confetti.style.animation = `fall ${animationDuration}s linear forwards`; |
|
|
|
|
|
document.getElementById('confetti-container').appendChild(confetti); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.style.top = window.innerHeight + 'px'; |
|
|
confetti.style.opacity = '1'; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg) translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px)`; |
|
|
}, 10); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, animationDuration * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = ` |
|
|
@keyframes fall { |
|
|
to { |
|
|
top: 100vh; |
|
|
opacity: 0; |
|
|
transform: rotate(360deg) translate(100px, 100px); |
|
|
} |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('blow-candles').addEventListener('click', function() { |
|
|
const flames = document.querySelectorAll('.candle-flame'); |
|
|
flames.forEach(flame => { |
|
|
flame.style.animation = 'none'; |
|
|
flame.style.opacity = '0'; |
|
|
flame.style.boxShadow = 'none'; |
|
|
flame.style.transform = 'scale(0)'; |
|
|
}); |
|
|
|
|
|
createConfetti(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
alert('Happy Birthday Jennifer! Your wish will come true!'); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCountdown() { |
|
|
|
|
|
const now = new Date(); |
|
|
let birthday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); |
|
|
|
|
|
|
|
|
if (now > birthday) { |
|
|
birthday = new Date(now.getFullYear() + 1, now.getMonth(), now.getDate()); |
|
|
} |
|
|
|
|
|
const diff = birthday - now; |
|
|
|
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24)); |
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
|
|
|
|
|
document.getElementById('days').textContent = days.toString().padStart(2, '0'); |
|
|
document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); |
|
|
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); |
|
|
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(updateCountdown, 1000); |
|
|
updateCountdown(); |
|
|
|
|
|
|
|
|
const memories = document.querySelectorAll('.memory-lane div'); |
|
|
memories.forEach((memory, index) => { |
|
|
memory.style.animation = `floating ${3 + Math.random() * 2}s ease-in-out infinite`; |
|
|
memory.style.animationDelay = `${index * 0.2}s`; |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dsfijdskf/bdayt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
