<div class="flex gap-4 justify-center items-center h-20 relative">
            <button onclick="celebrate()" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-10 rounded-full shadow-lg transition-transform active:scale-90 z-20">
                Yes
            </button>
            <button id="noBtn" onmouseover="moveBtn()" onclick="moveBtn()" ontouchstart="moveBtn()" class="bg-gray-400 text-white font-bold py-3 px-10 rounded-full transition-all duration-200 z-20 shadow-md">
                No
            </button>
        </div>
    </div>

    <script>
        function moveBtn() {
            const btn = document.getElementById('noBtn');
            const x = Math.random() * (window.innerWidth - btn.offsetWidth - 20);
            const y = Math.random() * (window.innerHeight - btn.offsetHeight - 20);
            btn.style.position = 'fixed';
            btn.style.left = x + 'px';
            btn.style.top = y + 'px';
        }

        function celebrate() {
            const card = document.getElementById('card');
            card.innerHTML = \`
                <div class="text-7xl mb-4">🥰</div>
                <h1 class="text-3xl font-bold text-pink-600 mb-2">Yay! I love you! ❤️</h1>
                <p class="text-gray-500">See you on Valentine's Day! ✨</p>
            \`;
            document.body.style.backgroundColor = "#ffe4e6";
            confettiEffect();
        }
    </script>
</body>
</html>

`, { headers: { "Content-Type": "text/html" }, }); }