HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
24.2 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="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Birthday Amri! 🎂</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root { --pink: #ffb7c5; --soft-pink: #ffe4e6; --dark-pink: #ff6b8b; }
        body { 
            margin: 0; 
            font-family: 'Quicksand', sans-serif; 
            background: var(--soft-pink); 
            overflow: hidden; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            color: #555;
        }
        .container { 
            text-align: center; 
            z-index: 10; 
            padding: 30px; 
            background: rgba(255, 255, 255, 0.4);
            border-radius: 30px;
            backdrop-filter: blur(5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            max-width: 80%;
        }
        h1, p { margin-bottom: 20px; }
        button { 
            padding: 15px 30px; 
            font-size: 1.1rem; 
            border: none; 
            border-radius: 50px; 
            cursor: pointer; 
            background: var(--dark-pink); 
            color: white; 
            margin: 10px; 
            transition: 0.3s; 
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(255, 107, 139, 0.3);
        }
        button:hover { transform: scale(1.1); background: #ff4771; }
        #runaway { position: absolute; transition: 0.2s ease; z-index: 999; }
        .hidden { display: none !important; }
        #bg-canvas { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
        .photo-preview { max-width: 150px; border-radius: 20px; margin: 20px auto; border: 5px solid white; display: block; }
        
        /* Slider Styles */
        #slider-wrapper { 
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
            overflow-x: auto; display: flex; scroll-snap-type: x mandatory; 
            background: var(--soft-pink); z-index: 100; scroll-behavior: smooth;
        }
        .slide { 
            min-width: 100vw; height: 100vh; display: flex; 
            flex-direction: column; justify-content: center; 
            align-items: center; scroll-snap-align: start; 
            text-align: center; padding: 20px; box-sizing: border-box;
        }
        .slide h1 { font-size: 2rem; color: #d63384; }
        .hint { font-size: 0.8rem; color: #888; margin-top: 20px; animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
    </style>
</head>
<body>
    <canvas id="bg-canvas"></canvas>
    
    <!-- Step 1: Opening -->
    <div id="step1" class="container">
        <h1>Hai Amri 😼</h1>
        <button onclick="nextStep(2)">Mulai!</button>
    </div>

    <!-- Step 2: Question 1 -->
    <div id="step2" class="container hidden">
        <p>Hari ini tau ga hari apa?</p>
        <button onclick="nextStep(3)">Tau dong!</button>
        <button onclick="nextStep(3)">Gatau... 🙄</button>
    </div>

    <!-- Step 3: Question 2 -->
    <div id="step3" class="container hidden">
        <p>Yakin gatau? Masa lupa sih...</p>
        <button onclick="nextStep(4)">Iya iya, kasih tau!</button>
    </div>

    <!-- Step 4: Reveal -->
    <div id="step4" class="container hidden">
        <p>Hari ini hari spesial kamu loh... 🎂</p>
        <button onclick="nextStep(5)">Masa? Seneng ga ya?</button>
    </div>

    <!-- Step 5: Interactive Buttons -->
    <div id="step5" class="container hidden">
        <p>Seneng ga hari ini?</p>
        <button onclick="nextStep(6)">Seneng 😊</button>
        <button id="runaway" onmouseover="moveButton()" onclick="moveButton()">B aja 😜</button>
    </div>

    <!-- Step 6: Photo Upload -->
    <div id="step6" class="container hidden">
        <p>Sebelum lanjut, upload satu foto terganteng kamu!</p>
        <input type="file" id="photoInput" accept="image/*" style="margin-bottom: 20px;">
        <img id="preview" class="photo-preview hidden">
        <button id="btnFinal" class="hidden" onclick="startSlides()">Lihat Kejutan ✨</button>
    </div>

    <!-- Slides Section -->
    <div id="slider-wrapper" class="hidden">
        <div class="slide"><h1>Happy Birthday Amri 🎂</h1><p class="hint">Geser ke kanan >></p></div>
        <div class="slide"><h1>Semoga panjang umur 💕</h1></div>
        <div class="slide"><h1>Jangan nyebelin terus 😤</h1></div>
        <div class="slide"><h1>Tapi tetep aku sayang 😌</h1></div>
        <div class="slide">
            <h1>Stay with me ya 💖</h1>
            <img id="finalImg" class="photo-preview">
        </div>
        <div class="slide" style="background: #ffecf1;">
            <h1 style="font-size: 4rem;">1000% 💖</h1>
            <p>You are loved!</p>
        </div>
    </div>

    <script>
        // Web Audio API untuk suara klik
        function playClick() {
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                let osc = audioCtx.createOscillator();
                let gain = audioCtx.createGain();
                osc.connect(gain);
                gain.connect(audioCtx.destination);
                osc.frequency.value = 600;
                gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
                osc.start();
                osc.stop(audioCtx.currentTime + 0.1);
            } catch(e) { console.log("Audio bit blocked by browser"); }
        }

        // Navigasi Antar Step
        function nextStep(s) {
            playClick();
            document.querySelectorAll('.container').forEach(el => el.classList.add('hidden'));
            document.getElementById('step' + s).classList.remove('hidden');
        }

        // Fungsi Tombol Kabur
        function moveButton() {
            const btn = document.getElementById('runaway');
            const x = Math.random() * (window.innerWidth - btn.offsetWidth);
            const y = Math.random() * (window.innerHeight - btn.offsetHeight);
            btn.style.left = x + 'px';
            btn.style.top = y + 'px';
        }

        // Handle Upload Foto
        document.getElementById('photoInput').onchange = function(e) {
            const reader = new FileReader();
            reader.onload = (event) => {
                const preview = document.getElementById('preview');
                const finalImg = document.getElementById('finalImg');
                preview.src = event.target.result;
                finalImg.src = event.target.result;
                preview.classList.remove('hidden');
                document.getElementById('btnFinal').classList.remove('hidden');
            }
            reader.readAsDataURL(e.target.files[0]);
        }

        // Munculkan Slider Akhir
        function startSlides() {
            playClick();
            document.getElementById('slider-wrapper').classList.remove('hidden');
            createConfetti();
        }

        // Animasi Bunga Sakura Sederhana
        const canvas = document.getElementById('bg-canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const petals = [];
        for(let i = 0; i < 30; i++) {
            petals.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                s: Math.random() * 2 + 1,
                r: Math.random() * 5
            });
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#ffb7c5";
            petals.forEach(p => {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.s * 2, 0, Math.PI * 2);
                ctx.fill();
                p.y += p.s;
                p.x += Math.sin(p.y / 20);
                if(p.y > canvas.height) p.y = -10;
            });
            requestAnimationFrame(draw);
        }
        draw();

        // Bonus: Confetti saat selesai
        function createConfetti() {
            for(let i=0; i<50; i++) {
                setTimeout(() => {
                    const dot = document.createElement('div');
                    dot.innerHTML = "🌸";
                    dot.style.position = "fixed";
                    dot.style.left = Math.random() * 100 + "vw";
                    dot.style.top = "-5vh";
                    dot.style.fontSize = "20px";
                    dot.style.zIndex = "200";
                    dot.style.transition = "transform 3s linear, top 3s linear";
                    document.body.appendChild(dot);
                    setTimeout(() => {
                        dot.style.top = "105vh";
                        dot.style.transform = `rotate(${Math.random()*360}deg)`;
                    }, 10);
                }, i * 100);
            }
        }
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
38KB
Transfer Size
39KB
Content Size
170.0ms
Dom Content Loaded
220.0ms
First Paint
304.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