| <!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> |
