Spaces:
Running
Running
File size: 4,822 Bytes
d7de3e7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<!DOCTYPE html>
<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> |