Untitled
unknown
plain_text
3 months ago
34 kB
8
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday Aaysha! 🎉</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4d96ff);
background-size: 400% 400%;
animation: gradientShift 10s ease infinite;
height: 100vh; overflow: hidden; position: relative;
display: flex; justify-content: center; align-items: center;
}
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { text-align: center; color: white; z-index: 10; position: relative; }
h1 { font-size: 4rem; text-shadow: 3px 3px 0 #000; margin-bottom: 1rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } }
.message { font-size: 1.5rem; margin: 2rem 0; line-height: 1.6; opacity: 0; animation: fadeInUp 1s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.cake { font-size: 6rem; animation: wiggle 3s infinite; margin: 1rem 0; }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
.heart { position: absolute; font-size: 2rem; color: #ff1493; animation: float 6s infinite linear; }
.heart:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.heart:nth-child(2) { top: 30%; right: 15%; animation-delay: 1s; }
.heart:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 2s; }
@keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } }
button { background: #ff4757; color: white; border: none; padding: 1rem 2rem; font-size: 1.2rem; border-radius: 50px; cursor: pointer; margin: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: all 0.3s; }
button:hover { transform: scale(1.1); background: #ff3742; }
.share-btn { background: #00d2d3; }
.share-btn:hover { background: #00b5b6; }
audio { display: none; }
</style>
</head>
<body>
<!-- Floating Hearts -->
<div class="heart">💖</div>
<div class="heart">💕</div>
<div class="heart">💗</div>
<div class="container">
<h1>Happy Birthday Aaysha! 🎉🥳</h1>
<div class="cake">🎂</div>
<p class="message">Hey Bestie! From our crazy adventures, late-night laughs, and unbreakable bond... You're my rock, my vibe, my everything! 🌟</p>
<p class="message">Wishing you epic wins, endless joy, all the cake, and dreams coming true! Love you to the moon & back! 💕</p>
<p class="message">#AayshaTheQueen</p>
<button onclick="playMusic()">▶️ Play Birthday Song</button>
<button class="share-btn" onclick="shareWish()">📱 Share with Aaysha</button>
</div>
<!-- Background Music (Happy Birthday tune - replace src with your audio if needed) -->
<audio id="birthdayMusic" loop>
<source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSq+0/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSq+0/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSq+0=" type="audio/wav">
</audio>
<script>
// Auto-generate floating hearts
function createHearts() {
for (let i = 0; i < 20; i++) {
setTimeout(() => {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = ['💖','💕','💗','💝','🌟'][Math.floor(Math.random()*5)];
heart.style.left = Math.random() * 100 + '%';
heart.style.animationDuration = (Math.random() * 3 + 4) + 's';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 7000);
}, i * 300);
}
}
createHearts();
setInterval(createHearts, 5000);
function playMusic() {
const audio = document.getElementById('birthdayMusic');
audio.play().catch(e => console.log('Autoplay blocked'));
document.querySelector('h1').style.animation = 'bounce 1s infinite, glow 2s infinite';
}
function shareWish() {
if (navigator.share) {
navigator.share({
title: 'Happy Birthday Aaysha! 🎉',
text: 'Check out this epic birthday wish for my bestie! 🥳',
url: window.location.href
});
} else {
alert('Copy this link & send to Aaysha: ' + window.location.href);
navigator.clipboard.writeText(window.location.href);
}
}
// Add glow effect
const style = document.createElement('style');
style.textContent = '@keyframes glow { 0%, 100% { text-shadow: 0 0 20px #fff, 3px 3px 0 #000; } 50% { text-shadow: 0 0 30px #ff0, 3px 3px 0 #000; } }';
document.head.appendChild(style);
</script>
</body>
</html>
}
})
}
}
}
})
}
}
}Editor is loading...
Leave a Comment