Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>For Bushra 🌹</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes sparkle { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(5deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .name-animation { | |
| background: linear-gradient(45deg, #9f7aea, #667eea, #764ba2); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: gradient 5s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .sparkle { | |
| animation: sparkle 1.5s infinite; | |
| } | |
| .floating { | |
| animation: float 3s infinite ease-in-out; | |
| } | |
| .letter { | |
| display: inline-block; | |
| transition: transform 0.3s; | |
| } | |
| .letter:hover { | |
| transform: translateY(-10px) rotate(10deg); | |
| color: #9f7aea; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-purple-50"> | |
| <div class="min-h-screen flex flex-col items-center justify-center p-4"> | |
| <!-- Main Card --> | |
| <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center"> | |
| <!-- Animated Name --> | |
| <div class="mb-8"> | |
| <h1 class="text-6xl font-bold name-animation mb-2" id="nameContainer"> | |
| <span class="letter">B</span> | |
| <span class="letter">U</span> | |
| <span class="letter">S</span> | |
| <span class="letter">H</span> | |
| <span class="letter">R</span> | |
| <span class="letter">A</span> | |
| </h1> | |
| <div class="text-2xl sparkle">✨ My Everything ✨</div> | |
| </div> | |
| <!-- Message --> | |
| <h2 class="text-3xl font-bold text-purple-600 mb-4">I'm Sorry</h2> | |
| <p class="text-gray-700 mb-6">My dearest Bushra, I know I made a mistake and I truly regret it. You're the most precious person in my life, as beautiful as the morning star. Please forgive me.</p> | |
| <!-- Reasons --> | |
| <div class="space-y-4 mb-8"> | |
| <div class="text-purple-500 font-semibold">Why Bushra is Special ✨</div> | |
| <ul class="text-gray-600" id="loveList"> | |
| <li class="hover:transform hover:scale-105 transition-all duration-300">Your beautiful name means 'Good News' 🌟</li> | |
| <li class="hover:transform hover:scale-105 transition-all duration-300">Your eyes sparkle like stars ✨</li> | |
| <li class="hover:transform hover:scale-105 transition-all duration-300">Your smile lights up my world 🌸</li> | |
| <li class="hover:transform hover:scale-105 transition-all duration-300">Every moment with you is magical ⭐</li> | |
| </ul> | |
| </div> | |
| <!-- Button --> | |
| <button id="forgiveMeBtn" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| Forgive Me, Bushra? 🌹 | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| const btn = document.getElementById('forgiveMeBtn'); | |
| btn.addEventListener('click', () => { | |
| const messages = [ | |
| "Bushra, you're my shining star ⭐", | |
| "You make my world beautiful 🌸", | |
| "Your smile is my favorite view ✨", | |
| "You mean everything to me 🌹", | |
| "Can't imagine life without you 🌺" | |
| ]; | |
| const message = messages[Math.floor(Math.random() * messages.length)]; | |
| alert(message + "\nI promise to make it up to you!"); | |
| }); | |
| // Add hover effect to each letter | |
| document.querySelectorAll('.letter').forEach(letter => { | |
| letter.addEventListener('mouseover', () => { | |
| letter.style.color = `hsl(${Math.random() * 360}, 70%, 50%)`; | |
| }); | |
| letter.addEventListener('mouseout', () => { | |
| letter.style.color = ''; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |