<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday Falak 🎂💖</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(135deg, #ffb6f0, #ffe6f7);
text-align: center;
overflow: hidden;
}
h1 {
font-size: 2.5em;
color: #ff2e63;
margin-top: 50px;
animation: fadeIn 2s ease-in-out;
}
.start-btn, .gift-btn {
display: inline-block;
margin: 15px;
padding: 15px 25px;
background: #ff2e63;
color: white;
border-radius: 12px;
font-size: 1.2em;
cursor: pointer;
transition: transform 0.2s;
}
.start-btn:hover, .gift-btn:hover {
transform: scale(1.1);
background: #ff4081;
}
.hidden { display: none; }
.message {
margin: 20px auto;
max-width: 600px;
font-size: 1.3em;
color: #d63384;
background: #fff;
border-radius: 20px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
animation: slideUp 1s ease-in-out;
}
.heart {
position: absolute;
color: #ff2e63;
font-size: 20px;
animation: float 6s infinite;
}
@keyframes float {
0% {transform: translateY(0) rotate(0deg); opacity: 1;}
100% {transform: translateY(-800px) rotate(720deg); opacity: 0;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes slideUp {
from {transform: translateY(50px); opacity: 0;}
to {transform: translateY(0); opacity: 1;}
}
</style>
</head>
<body>
<h1>🎉 Happy Birthday, Falak 🎂💖</h1>
<!-- Start Button -->
<div id="start">
<button class="start-btn" onclick="showGifts()">Open Your Surprises 🎁</button>
</div>
<!-- Gift Buttons -->
<div id="gifts" class="hidden">
<button class="gift-btn" onclick="openGift(1)">🎁 Gift 1</button>
<button class="gift-btn" onclick="openGift(2)">🎁 Gift 2</button>
<button class="gift-btn" onclick="openGift(3)">🎁 Gift 3</button>
<button class="gift-btn" onclick="openGift(4)">🎁 Gift 4</button>
<button class="gift-btn" onclick="openGift(5)">🎁 Gift 5</button>
</div>
<!-- Messages -->
<div id="messages"></div>
<!-- Final Thank You -->
<div id="final" class="hidden">
<div class="message">
💖 Thank you for being in my life, Falak.<br>
Thank you for being my girlfriend.<br>
I love you forever.<br>
~ Yours, Shawal 💕
</div>
</div>
<!-- Floating hearts -->
<script>
function createHeart(){
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '❤';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.top = '100vh';
heart.style.fontSize = Math.random() * 20 + 15 + 'px';
heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
document.body.appendChild(heart);
setTimeout(() => {heart.remove();}, 6000);
}
setInterval(createHeart, 500);
// Gift system
let opened = 0;
function showGifts(){
document.getElementById('start').classList.add('hidden');
document.getElementById('gifts').classList.remove('hidden');
}
function openGift(num){
const messages =