HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
745 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!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;
        }

        /* Common 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.8s ease-in-out, visibility 0.8s;
            text-align: center;
            padding: 20px;
            z-index: 1;
        }

        .screen.active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        /* Floating Background 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:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(255, 42, 95, 0.6);
        }

        /* --- SCREEN 1: GIFT BOX --- */
        #screen1 {
            background: radial-gradient(circle, #2a0845 0%, #0f051d 100%);
        }

        .gift-container {
            cursor: pointer;
            text-align: center;
        }

        .gift-box {
            font-size: 100px;
            animation: bounce 2s infinite;
            display: inline-block;
            transition: transform 0.5s ease;
        }

        .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(-30px); }
            60% { transform: translateY(-15px); }
        }

        /* --- SCREEN 2: HAPPY BIRTHDAY --- */
        .glowing-title {
            font-size: 2.8rem;
            color: #fff;
            text-shadow: 0 0 10px var(--primary-pink), 0 0 20px var(--primary-pink), 0 0 30px var(--primary-red);
            margin-bottom: 20px;
            animation: pulse 2s infinite alternate;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.03); }
        }

        /* --- SCREEN 3: MESSAGE --- */
        .letter-container {
            background: linear-gradient(145deg, #ffffff, #ffe6eb);
            color: #333;
            padding: 30px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(255, 117, 140, 0.3);
            border: 2px solid var(--primary-pink);
            transform: translateY(20px);
            animation: slideUp 0.8s forwards;
        }

        .letter-container h3 {
            color: var(--primary-red);
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

        .letter-container p {
            font-size: 1.2rem;
            line-height: 1.6;
        }

        @keyframes slideUp {
            to { transform: translateY(0); }
        }

        /* --- SCREEN 4: MEMORIES --- */
        .slideshow-container {
            position: relative;
            width: 320px;
            height: 420px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            border: 4px solid var(--primary-pink);
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out, transform 1s ease-in-out;
            background-size: cover;
            background-position: center;
            transform: scale(1.1);
        }

        .slide.active-slide {
            opacity: 1;
            transform: scale(1);
        }

        .slide-placeholder {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background: #2a0845;
            color: var(--soft-pink);
            font-size: 1.2rem;
            padding: 20px;
        }

        /* --- SCREEN 5: CAKE --- */
        .cake {
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 50px;
        }

        .layer {
            position: absolute;
            width: 100%;
            border-radius: 10px 10px 0 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .layer-1 { height: 50px; width: 180px; background: #ff758c; bottom: 0; }
        .layer-2 { height: 40px; width: 140px; background: #ff2a5f; bottom: 50px; }
        .layer-3 { height: 35px; width: 100px; background: #ffffff; bottom: 90px; }

        .candles {
            position: absolute;
            bottom: 125px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
        }

        .candle {
            width: 8px;
            height: 30px;
            background: repeating-linear-gradient(45deg, #fff, #fff 5px, var(--primary-red) 5px, var(--primary-red) 10px);
            position: relative;
        }

        .flame {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 15px;
            background: orange;
            border-radius: 50% 50% 20% 20%;
            box-shadow: 0 0 10px gold;
            animation: flicker 0.2s infinite alternate;
        }

        .flame.off {
            display: none;
        }

        .smoke {
            position: absolute;
            top: -20px;
            left: 50%;
            width: 6px;
            height: 6px;
            background: rgba(200, 200, 200, 0.8);
            border-radius: 50%;
            opacity: 0;
        }

        .smoke.active {
            animation: smokeRise 2s forwards;
        }

        @keyframes flicker {
            0% { transform: translateX(-50%) scale(1); }
            100% { transform: translateX(-50%) scale(1.1); }
        }

        @keyframes smokeRise {
            0% { opacity: 0.8; transform: translate(-50%, 0) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -40px) scale(3); }
        }

        /* --- SCREEN 6: FINAL SURPRISE --- */
        .final-title {
            font-size: 3rem;
            color: #ff2a5f;
            text-shadow: 0 0 15px #ff758c;
            margin-bottom: 20px;
        }

        /* Modal for Last Surprise */
        .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.5s ease;
            z-index: 10;
            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: 30px;
            border-radius: 20px;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 0 30px rgba(255, 42, 95, 0.3);
        }

        .modal-content p {
            font-size: 1.3rem;
            line-height: 1.6;
            color: #fff;
        }

        .close-btn {
            margin-top: 20px;
            background: transparent;
            border: 1px solid #fff;
            color: #fff;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <canvas id="bg-canvas"></canvas>

    <audio id="bg-music" loop>
        <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.2rem; 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: 20px; color: var(--soft-pink);">Our Special Memories 📸</h2>
        <div class="slideshow-container" id="slideshow">
            <div class="slide active-slide">
                <div class="slide-placeholder">Memory 1<br>(Add Muskan's Photo)</div>
            </div>
            <div class="slide">
                <div class="slide-placeholder">Memory 2<br>(Add Muskan's Photo)</div>
            </div>
            <div class="slide">
                <div class="slide-placeholder">Memory 3<br>(Add Muskan's Photo)</div>
            </div>
        </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 class="smoke"></div></div>
                <div class="candle"><div class="flame"></div><div class="smoke"></div></div>
                <div class="candle"><div class="flame"></div><div class="smoke"></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.2rem; max-width: 80%;">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>
        // --- SCREEN NAVIGATION ---
        function nextScreen(screenNumber) {
            document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
            document.getElementById(`screen${screenNumber}`).classList.add('active');
        }

        // --- SCREEN 1 ACTION ---
        function openGift() {
            // Play background audio
            const audio = document.getElementById('bg-music');
            audio.play().catch(() => console.log("Audio autoplay restricted."));

            // Trigger burst effects
            burstParticles(50);

            // Move to Screen 2 after short delay
            setTimeout(() => {
                nextScreen(2);
            }, 1200);
        }

        // --- SCREEN 4 SLIDESHOW ---
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        
        function rotateSlides() {
            slides[currentSlide].classList.remove('active-slide');
            currentSlide = (currentSlide + 1) % slides.length;
            slides[currentSlide].classList.add('active-slide');
        }
        setInterval(rotateSlides, 3500);

        // --- SCREEN 5 CANDLE BLOWING ---
        function blowCandles() {
            const flames = document.querySelectorAll('.flame');
            const smokes = document.querySelectorAll('.smoke');
            
            flames.forEach(flame => flame.classList.add('off'));
            smokes.forEach(smoke => smoke.classList.add('active'));

            burstParticles(40);

            document.getElementById('blow-btn').style.display = 'none';
            document.getElementById('cake-next-btn').style.display = 'inline-block';
        }

        // --- EXTRA SURPRISE MODAL ---
        function showLastSurprise() {
            document.getElementById('surpriseModal').classList.add('active');
            burstParticles(100);
        }

        function closeLastSurprise() {
            document.getElementById('surpriseModal').classList.remove('active');
        }

        // --- BACKGROUND CANVAS ANIMATIONS (Stars, Hearts, Particles) ---
        const canvas = document.getElementById('bg-canvas');
        const ctx = canvas.getContext('2d');
        
        let width, height;
        let elements = [];

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        class FloatingElement {
            constructor(x, y, isBurst = false) {
                this.x = x || Math.random() * width;
                this.y = y || (isBurst ? height / 2 : height + 20);
                this.size = Math.random() * 15 + 10;
                this.speedY = isBurst ? (Math.random() - 0.5) * 10 : - (Math.random() * 1.5 + 0.5);
                this.speedX = isBurst ? (Math.random() - 0.5) * 10 : (Math.random() - 0.5) * 1;
                this.type = Math.random() > 0.4 ? 'heart' : 'star';
                this.color = `hsl(${Math.random() * 40 + 330}, 100%, 65%)`;
                this.opacity = 1;
                this.isBurst = isBurst;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                if (this.isBurst) {
                    this.opacity -= 0.015;
                } else if (this.y < -20) {
                    this.y = height + 20;
                    this.x = Math.random() * width;
                }
            }

            draw() {
                ctx.save();
                ctx.globalAlpha = Math.max(0, this.opacity);
                ctx.fillStyle = this.color;
                ctx.font = `${this.size}px serif`;
                ctx.fillText(this.type === 'heart' ? '❤️' : '✨', this.x, this.y);
                ctx.restore();
            }
        }

        // Create initial floating ambient elements
        for (let i = 0; i < 30; i++) {
            elements.push(new FloatingElement(Math.random() * width, Math.random() * height));
        }

        function burstParticles(amount) {
            for (let i = 0; i < amount; i++) {
                elements.push(new FloatingElement(width / 2, height / 2, true));
            }
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);
            
            elements.forEach((el, index) => {
                el.update();
                el.draw();
                if (el.isBurst && el.opacity <= 0) {
                    elements.splice(index, 1);
                }
            });

            requestAnimationFrame(animate);
        }
        animate();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
18KB
Transfer Size
18KB
Content Size
319.0ms
Dom Content Loaded
308.0ms
First Paint
1,181.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests