index.html

[daimb612-jpg]

<title>A Special Surprise</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #ffeef2; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; }

    .container {
        text-align: center;
        background: white;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 10;
    }

    h1 { color: #d63384; font-size: 2.5rem; }
    
    .hidden { display: none; }

    button {
        background: #d63384;
        color: white;
        border: none;
        padding: 15px 30px;
        font-size: 1.2rem;
        border-radius: 50px;
        cursor: pointer;
        transition: transform 0.3s;
        margin: 10px;
    }

    button:hover { transform: scale(1.1); }

    #no-btn {
        background: #6c757d;
        position: relative;
    }

    .hearts {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
    }
</style>

<div id="page1" class="container">
    <h1>You have a new message! 💌</h1>
    <button onclick="showPage2()">Open</button>
</div>

<div id="page2" class="container hidden">
    <h1>Will you marry me? 💍</h1>
    <button onclick="showFinal()">Yes</button>
    <button id="no-btn" onmouseover="moveButton()">No</button>
</div>

<div id="final-page" class="container hidden">
    <h1 id="celebration-text">Happy Birthday! 🎂✨</h1>
    <p>I love you forever!</p>
</div>

<script>
    function showPage2() {
        document.getElementById('page1').classList.add('hidden');
        document.getElementById('page2').classList.remove('hidden');
    }

    function showFinal() {
        document.getElementById('page2').classList.add('hidden');
        document.getElementById('final-page').classList.remove('hidden');
        startConfetti();
    }

    // Yeh function "No" button ko bhaga deta hai
    function moveButton() {
        const btn = document.getElementById('no-btn');
        const x = Math.random() * (window.innerWidth - btn.offsetWidth);
        const y = Math.random() * (window.innerHeight - btn.offsetHeight);
        btn.style.position = 'absolute';
        btn.style.left = x + 'px';
        btn.style.top = y + 'px';
    }
</script>