Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday Muskan! 💖</title>
<style>
:root {
--primary-red: #ff2a5f;
--primary-pink: #ff758c;
--soft-pink: #ff7eb3;
--bg-dark: #0f051d;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none;
}
body {
background-color: var(--bg-dark);
color: var(--white);
overflow: hidden;
height: 100vh;
width: 100vw;
}
/* Screen Layout */
.screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
text-align: center;
padding: 20px;
z-index: 1;
pointer-events: none;
}
.screen.active {
opacity: 1;
visibility: visible;
z-index: 5;
pointer-events: auto;
}
/* Canvas */
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Buttons */
.btn {
background: linear-gradient(135deg, var(--primary-red), var(--primary-pink));
color: white;
border: none;
padding: 14px 28px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(255, 42, 95, 0.4);
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 25px;
}
.btn:active {
transform: scale(0.95);
}
/* Screen 1 */
#screen1 {
background: radial-gradient(circle, #2a0845 0%, #0f051d 100%);
}
.gift-container {
cursor: pointer;
text-align: center;
padding: 20px;
}
.gift-box {
font-size: 100px;
animation: bounce 2s infinite;
display: inline-block;
}
.gift-text {
font-size: 1.5rem;
color: var(--soft-pink);
margin-top: 15px;
text-shadow: 0 0 10px rgba(255, 126, 179, 0.5);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-25px); }
60% { transform: translateY(-12px); }
}
/* Screen 2 */
.glowing-title {
font-size: 2.5rem;
color: #fff;
text-shadow: 0 0 10px var(--primary-pink), 0 0 20px var(--primary-red);
margin-bottom: 20px;
}
/* Screen 3 */
.letter-container {
background: linear-gradient(145deg, #ffffff, #ffe6eb);
color: #333;
padding: 25px;
border-radius: 15px;
max-width: 450px;
width: 90%;
box-shadow: 0 10px 30px rgba(255, 117, 140, 0.3);
border: 2px solid var(--primary-pink);
}
.letter-container h3 {
color: var(--primary-red);
font-size: 1.6rem;
margin-bottom: 12px;
}
.letter-container p {
font-size: 1.1rem;
line-height: 1.5;
}
/* Screen 4 */
.slideshow-container {
position: relative;
width: 280px;
height: 380px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
border: 4px solid var(--primary-pink);
background: #2a0845;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
object-fit: cover;
}
.slide.active-slide {
opacity: 1;
}
/* Screen 5 */
.cake {
position: relative;
width: 180px;
height: 180px;
margin-top: 40px;
}
.layer {
position: absolute;
border-radius: 10px 10px 0 0;
left: 50%;
transform: translateX(-50%);
}
.layer-1 { height: 45px; width: 160px; background: #ff758c; bottom: 0; }
.layer-2 { height: 35px; width: 120px; background: #ff2a5f; bottom: 45px; }
.layer-3 { height: 30px; width: 90px; background: #ffffff; bottom: 80px; }
.candles {
position: absolute;
bottom: 110px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
}
.candle {
width: 8px;
height: 25px;
background: repeating-linear-gradient(45deg, #fff, #fff 4px, var(--primary-red) 4px, var(--primary-red) 8px);
position: relative;
}
.flame {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 12px;
background: orange;
border-radius: 50% 50% 20% 20%;
box-shadow: 0 0 8px gold;
}
.flame.off {
display: none;
}
/* Screen 6 */
.final-title {
font-size: 2.8rem;
color: #ff2a5f;
text-shadow: 0 0 15px #ff758c;
margin-bottom: 20px;
}
/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 5, 29, 0.95);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
z-index: 20;
padding: 20px;
}
.modal.active {
opacity: 1;
pointer-events: auto;
}
.modal-content {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 25px;
border-radius: 20px;
max-width: 450px;
text-align: center;
}
.modal-content p {
font-size: 1.2rem;
line-height: 1.5;
color: #fff;
}
.close-btn {
margin-top: 18px;
background: transparent;
border: 1px solid #fff;
color: #fff;
padding: 8px 18px;
border-radius: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="bg-canvas"></canvas>
<audio id="bg-music" loop preload="auto">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
<div class="screen active" id="screen1">
<div class="gift-container" onclick="openGift()">
<div class="gift-box">🎁</div>
<div class="gift-text">Tap to Open Your Surprise 🎁</div>
</div>
</div>
<div class="screen" id="screen2">
<h1 class="glowing-title">🎂 Happy Birthday<br>Muskan Verma 🎂</h1>
<p style="font-size: 1.1rem; color: #ff7eb3;">Floating balloons, sparkles & magic await! ✨</p>
<button class="btn" onclick="nextScreen(3)">Next ➔</button>
</div>
<div class="screen" id="screen3">
<div class="letter-container">
💌
<h3>Happy Birthday My Love</h3>
<p>May God always bless you with endless happiness, success, and laughter. You bring so much light into my world. ❤️</p>
</div>
<button class="btn" onclick="nextScreen(4)">See Memories ➔</button>
</div>
<div class="screen" id="screen4">
<h2 style="margin-bottom: 15px; color: var(--soft-pink);">Our Special Memories 📸</h2>
<div class="slideshow-container">
<img src="1000007254.jpg" class="slide active-slide" alt="Memory 1">
<img src="1000006596.jpg" class="slide" alt="Memory 2">
<img src="1000006593.jpg" class="slide" alt="Memory 3">
<img src="1000006590.jpg" class="slide" alt="Memory 4">
</div>
<button class="btn" onclick="nextScreen(5)">Time for Cake 🎂</button>
</div>
<div class="screen" id="screen5">
<h2 style="color: var(--soft-pink);">Make a Wish! 🕯️</h2>
<div class="cake">
<div class="candles">
<div class="candle"><div class="flame"></div></div>
<div class="candle"><div class="flame"></div></div>
<div class="candle"><div class="flame"></div></div>
</div>
<div class="layer layer-3"></div>
<div class="layer layer-2"></div>
<div class="layer layer-1"></div>
</div>
<button class="btn" id="blow-btn" onclick="blowCandles()">Blow the Candles 🌬️</button>
<button class="btn" id="cake-next-btn" style="display: none;" onclick="nextScreen(6)">Final Surprise ➔</button>
</div>
<div class="screen" id="screen6">
<h1 class="final-title">Love You Forever...! ❤️</h1>
<p style="color: #ff7eb3; font-size: 1.1rem;">Every moment with you is a gift.</p>
<button class="btn" onclick="showLastSurprise()">One Last Surprise 💝</button>
</div>
<div class="modal" id="surpriseModal">
<div class="modal-content">
<p>"No matter where life takes us, you'll always be the most special person in my heart. Happy Birthday, Muskan. ❤️"</p>
<button class="close-btn" onclick="closeLastSurprise()">Close ✨</button>
</div>
</div>
<script>
// --- SAFE NAVIGATION ---
function nextScreen(screenNumber) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
const target = document.getElementById(`screen${screenNumber}`);
if (target) {
target.classList.add('active');
}
}
// --- SCREEN 1 ACTION (FIXED) ---
function openGift() {
// Safe audio play without blocking script execution
try {
const audio = document.getElementById('bg-music');
if (audio) {
audio.play().catch(e => console.log("Audio notice:", e));
}
} catch (err) {
console.log("Audio error caught:", err);
}
burstParticles(40);
// Fast transition to ensure it never hangs
setTimeout(() =>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
2
Domains
12KB
Transfer Size
13KB
Content Size
97.0ms
Dom Content Loaded
216.0ms
First Paint
1,050.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...