Conversation with Gemini

You said

so recently i am talking too this girl which i am talking about with u and i have dicedec too lanch a website propsal for her so can u ask me some questions for the website so that in anothr prompt i can tell u and u built the website

Gemini said

That is an incredibly smooth and creative way to ask someone out! A digital proposal website is memorable, personal, and lets you flex your development skills to make something totally unique.

To build the perfect website for her, I need to understand the vibe, the features, and how you want the "reveal" to happen. Take a look at these questions, think about them, and whenever you're ready, hit me with your answers so we can build it.

1. The Design & Aesthetic

  • What is her favorite color palette? (e.g., pastel pinks and whites, dark mode with neon accents, minimal clean aesthetics, or warm cozy tones?)

  • What is the overall vibe? Should it be cute and playful (with floating hearts/animations), sleek and modern, or pixel-art retro?

2. The Content & Memories

  • Do you have inside jokes or specific references? (e.g., a specific video game you play together, a favorite song, a meme, or a football reference?)

  • Are there photos or milestones? Do you want a little "timeline" section of how you started talking, or a space where a photo/caricature of you two can go?

3. The Interactive Elements (The Fun Stuff)

  • What happens when she hits the "Yes" button? (e.g., confetti explosion on screen, a hidden message pops up, a specific song starts playing, or it redirects to a cute GIF?)

  • What happens if she tries to click "No"? (e.g., do we make the button run away from her cursor so she literally can't click it, or does the button shrink until it disappears?)

4. Technical Preferences

  • What style do you want to use? We can build it using clean HTML/CSS with custom JavaScript for the logic, or we can use a library like Three.js if you want a 3D element (like a 3D rotating heart or a cool particle background). Which sounds best to you?

Take your time thinking these through. When you're ready, just drop your thoughts in the next prompt and we'll get straight to coding!

Gemini said

I’ve put together this mock-up for your proposal website! Here is how it covers everything you mentioned:

  • Design: A cute, playful pink theme filled with 3D cat elements and sparkling lights.

  • The Joke: I added a subtle joke to the "No" button based on your instructions.

  • Photo: I used the image you provided for the centerpiece.

Let me know if you would like me to adjust any of the text, colors, or layout!

You said

crazyyyyyyyyy make it but also keep it aesthetic

Gemini said

You said

make the website

Gemini said

Here is the complete code to bring this aesthetic, 3D-infused proposal to life.

I’ve set this up as a single file so you can easily test it. It uses HTML, CSS with a clean glassmorphism effect for the main card, Vanilla JavaScript for the button logic, and Three.js to create a beautiful, interactive 3D background with floating aesthetic pink elements.

How to use this:

  1. Create a file named index.html.

  2. Paste all the code below into it.

  3. Replace the YOUR_IMAGE_LINK_HERE.jpg text with the actual file path or link to the cropped photo of her.

  4. Open the file in your browser to test it out!

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For You 🐱</title>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@600&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: 'Quicksand', sans-serif;
            background: linear-gradient(135deg, #ffe6ea 0%, #ffb6c1 100%);
        }

        /* 3D Canvas Background */
        #canvas-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* Glassmorphism Card */
        .glass-card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 8px 32px 0 rgba(255, 105, 180, 0.2);
            z-index: 1;
            width: 90%;
            max-width: 500px;
        }

        h1 {
            font-family: 'Fredoka One', cursive;
            color: #ff4d6d;
            font-size: 2rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
        }

        .image-container {
            position: relative;
            margin: 0 auto 25px;
            width: 200px;
            height: 200px;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            border: 4px solid #fff;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .tease-tag {
            position: absolute;
            bottom: -15px;
            right: -20px;
            background: #fff;
            color: #ff4d6d;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transform: rotate(5deg);
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        button {
            font-family: 'Fredoka One', cursive;
            font-size: 1.2rem;
            padding: 12px 30px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        #yes-btn {
            background: #ff4d6d;
            color: white;
            box-shadow: 0 4px 15px rgba(255, 77, 109, 0.4);
        }

        #yes-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(255, 77, 109, 0.6);
        }

        #no-btn {
            background: white;
            color: #ff4d6d;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        #no-text {
            display: none;
            color: #d90429;
            font-weight: bold;
            margin-top: 20px;
            font-size: 1.1rem;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>

    <div id="canvas-container"></div>

    <div class="glass-card" id="main-card">
        <h1>Will you make me the luckiest guy? 🐾</h1>
        
        <div class="image-container">
            <img src="YOUR_IMAGE_LINK_HERE.jpg" alt="Cute pic">
            <div class="tease-tag">p.s. you're still short 📏</div>
        </div>

        <div class="buttons">
            <button id="yes-btn">YES! 😻</button>
            <button id="no-btn">No 😾</button>
        </div>
        
        <div id="no-text">I am an idiot... I'll try and try until you say yes! 😹</div>
    </div>

    <script>
        // --- BUTTON LOGIC ---
        const yesBtn = document.getElementById('yes-btn');
        const noBtn = document.getElementById('no-btn');
        const noText = document.getElementById('no-text');
        const mainCard = document.getElementById('main-card');

        // The "No" button dodge mechanic & message
        noBtn.addEventListener('mouseover', () => {
            const x = Math.random() * (window.innerWidth - noBtn.offsetWidth - 100);
            const y = Math.random() * (window.innerHeight - noBtn.offsetHeight - 100);
            noBtn.style.position = 'fixed';
            noBtn.style.left = `${x}px`;
            noBtn.style.top = `${y}px`;
        });

        noBtn.addEventListener('click', () => {
            noText.style.display = 'block';
        });

        // The "Yes" button win screen
        yesBtn.addEventListener('click', () => {
            mainCard.innerHTML = `
                <h1>Let's Goooo! 🎉😻</h1>
                <h2 style="color: #ff4d6d;">You just made me the happiest!</h2>
                <p style="font-size: 1.2rem; color: #555;">(I knew you couldn't resist the aesthetic 3D vibes)</p>
            `;
        });

        // --- THREE.JS 3D BACKGROUND ---
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('canvas-container').appendChild(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
        const pointLight = new THREE.PointLight(0xffb6c1, 1);
        pointLight.position.set(5, 5, 5);
        scene.add(pointLight);

        // Create floating 3D elements (Donuts & Spheres)
        const objects = [];
        const geometry1 = new THREE.TorusGeometry(0.3, 0.1, 16, 32); // Cute little rings
        const geometry2 = new THREE.SphereGeometry(0.2, 16, 16);    // Pearls/Bubbles
        
        const material = new THREE.MeshPhysicalMaterial({
            color: 0xffb6c1,
            metalness: 0.1,
            roughness: 0.1,
            transmission: 0.5,
            thickness: 0.5
        });

        for(let i = 0; i < 40; i++) {
            const mesh = new THREE.Mesh(Math.random() > 0.5 ? geometry1 : geometry2, material);
            
            // Random positions
            mesh.position.x = (Math.random() - 0.5) * 15;
            mesh.position.y = (Math.random() - 0.5) * 15;
            mesh.position.z = (Math.random() - 0.5) * 10 - 5;
            
            // Random rotations
            mesh.rotation.x = Math.random() * Math.PI;
            mesh.rotation.y = Math.random() * Math.PI;

            // Store custom speed for animation
            mesh.userData = {
                rotationSpeedX: (Math.random() - 0.5) * 0.02,
                rotationSpeedY: (Math.random() - 0.5) * 0.02,
                floatSpeed: (Math.random() * 0.01) + 0.005,
                startY: mesh.position.y
            };

            objects.push(mesh);
            scene.add(mesh);
        }

        camera.position.z = 5;

        // Animation Loop
        let time = 0;
        function animate() {
            requestAnimationFrame(animate);
            time += 0.01;

            objects.forEach((obj, index) => {
                obj.rotation.x += obj.userData.rotationSpeedX;
                obj.rotation.y += obj.userData.rotationSpeedY;
                // Gentle floating up and down
                obj.position.y = obj.userData.startY + Math.sin(time + index) * 0.5;
            });

            renderer.render(scene, camera);
        }
        animate();

        // Handle window resizing
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

The logic scales automatically to full screen, keeping the glass card perfectly centered. I also added a script to make the "No" button sprint away from the cursor, but if she manages to tap it anyway (like on a phone screen), your custom teasing message will pop right up!

You said

din't like itt

Gemini said

No worries at all, let's scrap that build and start fresh. It has to be absolutely perfect for her.

What part missed the mark—was the 3D background not quite the right aesthetic, or did the layout and overall UI feel off?

You said

her name is dhruvika

Gemini said

Got it. Dhruvika. That’s a great name! We can definitely weave her name into the design to make it feel a lot more personal.

Since the cute, pink 3D vibe wasn't hitting the mark, let's completely pivot. If you want something that screams "aesthetic" but in a much cooler, cleaner way, here are three different directions we could take the UI:

1. The Music Player Vibe (Sleek & Modern) Instead of a standard card, we build a sleek, glassmorphism-style music player. The "Currently Playing" track is called "For Dhruvika", and the play button is the "Yes" button. We can keep the UI clean, maybe a dark mode or a soft gradient background, and subtly include the cat element as the "album cover."

2. The Polaroid Gallery (Minimalist & Cinematic) A super clean, minimalist white or beige background. The screen loads with a few scattered polaroid frames. One frame has her picture, another has the "short" joke written in a handwriting font, and the central polaroid holds the actual proposal and the buttons. It feels very nostalgic and elegant.

3. The "Terminal / Hacker" Vibe (If she likes tech/gaming) A clean, retro screen where the text types out automatically like a command prompt: > initializing_proposal.exe... > target_name: Dhruvika... before revealing the buttons.

Which of those layouts feels more like the aesthetic you want to go for? Or if you have a completely different vision in your head—like a specific color scheme or layout—just describe it to me and we will build it exactly how you see it.

You said

mix all three

Gemini said

Combining all three is an absolute power move. This is going to be incredibly unique.

We are going to start with a hacker/terminal boot-up sequence that teasingly analyzes her height, which will then seamlessly transition into a sleek, dark-mode music player. The "album cover" of the music player will be a vintage polaroid of her with your handwriting on it.

Here is the complete code. Just copy this into your index.html, add her image link where indicated, and run it.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For Dhruvika</title>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;800&family=Caveat:wght@600&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --bg-color: #0f0f13;
            --glass-bg: rgba(255, 255, 255, 0.06);
            --glass-border: rgba(255, 255, 255, 0.1);
            --accent: #1db954; /* Sleek streaming vibe */
            --text-main: #ffffff;
            --text-sub: #a7a7a7;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* --- PHASE 1: TERMINAL --- */
        #terminal {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 100;
            padding: 40px;
            box-sizing: border-box;
            font-family: 'Fira Code', monospace;
            color: #0f0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            font-size: 1.1rem;
        }

        .log-line {
            margin-bottom: 10px;
            opacity: 0;
        }

        /* --- PHASE 2 & 3: MUSIC PLAYER & POLAROID --- */
        #app-container {
            opacity: 0;
            transform: scale(0.95);
            transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 400px;
        }

        .glass-player {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 30px;
            width: 100%;
            box-sizing: border-box;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        .now-playing-header {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-sub);
            text-align: center;
            margin-bottom: 25px;
            font-weight: 600;
        }

        /* The Polaroid */
        .polaroid {
            background: white;
            padding: 10px 10px 20px 10px;
            border-radius: 4px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            transform: rotate(-3deg);
            transition: transform 0.4s ease;
            margin-bottom: 30px;
            position: relative;
        }

        .polaroid:hover {
            transform: rotate(0deg) scale(1.02);
        }

        .polaroid img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 2px;
            background: #222; /* Placeholder color before image loads */
        }

        .polaroid-text {
            font-family: 'Caveat', cursive;
            color: #111;
            font-size: 1.6rem;
            text-align: center;
            margin-top: 10px;
            line-height: 1;
        }

        .cat-doodle {
            position: absolute;
            bottom: 10px;
            right: 15px;
            font-size: 1.5rem;
        }

        /* Track Info */
        .track-info {
            text-align: left;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .track-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0 0 5px 0;
        }

        .track-artist {
            font-size: 1rem;
            color: var(--text-sub);
            margin: 0;
        }

        /* Progress Bar */
        .progress-bar {
            width: 100%;
            height: 4px;
            background: var(--glass-border);
            border-radius: 2px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
        }

        .progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 85%;
            background: #fff;
            border-radius: 2px;
        }

        /* Controls (Yes / No Buttons) */
        .controls {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .btn {
            background: none;
            border: none;
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-play {
            background: #fff;
            color: #000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            font-size: 1.5rem;
        }

        .btn-play:hover {
            transform: scale(1.1);
        }

        .btn-skip {
            color: var(--text-sub);
            position: relative;
        }

        #tease-message {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            color: #ff4d4d;
            font-size: 0.85rem;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            font-weight: 600;
        }

        /* Ambient background glow */
        .bg-glow {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            filter: blur(100px);
            border-radius: 50%;
            z-index: -1;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>

    <div id="terminal"></div>

    <div class="bg-glow"></div>

    <div id="app-container">
        <div class="glass-player">
            <div class="now-playing-header">Currently Playing</div>
            
            <div class="polaroid">
                <img src="YOUR_IMAGE_LINK_HERE.jpg" alt="Dhruvika">
                <div class="polaroid-text">still short tho</div>
                <div class="cat-doodle">🐾</div>
            </div>

            <div class="track-info">
                <div>
                    <h2 class="track-title">Will You Be Mine?</h2>
                    <p class="track-artist">Kanish</p>
                </div>
                <div style="font-size: 1.5rem;">😻</div>
            </div>

            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>

            <div class="controls">
                <button class="btn btn-skip" id="no-btn">
                    ⏮ No
                    <div id="tease-message">I'm an idiot... I'll just try again 😿</div>
                </button>
                <button class="btn btn-play" id="yes-btn">▶</button>
                <button class="btn btn-skip" style="opacity: 0.5; cursor: default;">⏭</button>
            </div>
        </div>
    </div>

    <script>
        // --- 1. TERMINAL BOOT SEQUENCE ---
        const terminalText = [
            "> initializing_proposal.exe...",
            "> locating_target: Dhruvika...",
            "> target_found.",
            "> scanning_attributes...",
            "> warning: subject is dangerously short.",
            "> overriding_height_check...",
            "> compiling_memories...",
            "> generating_aesthetic_ui...",
            "> executing..."
        ];

        const terminal = document.getElementById('terminal');
        const appContainer = document.getElementById('app-container');

        async function typeTerminal() {
            for (let i = 0; i < terminalText.length; i++) {
                const line = document.createElement('div');
                line.className = 'log-line';
                terminal.appendChild(line);
                
                // Typing effect character by character
                let text = terminalText[i];
                for(let j = 0; j < text.length; j++) {
                    line.innerHTML += text.charAt(j);
                    line.style.opacity = 1;
                    await new Promise(r => setTimeout(r, 25)); // Speed of typing
                }
                await new Promise(r => setTimeout(r, 400)); // Pause between lines
            }

            // Fade out terminal and show App
            setTimeout(() => {
                terminal.style.transition = "opacity 0.8s ease";
                terminal.style.opacity = 0;
                
                setTimeout(() => {
                    terminal.style.display = "none";
                    appContainer.style.opacity = 1;
                    appContainer.style.transform = "scale(1)";
                }, 800);
            }, 500);
        }

        // Start sequence on load
        window.onload = typeTerminal;

        // --- 2. BUTTON LOGIC ---
        const noBtn = document.getElementById('no-btn');
        const yesBtn = document.getElementById('yes-btn');
        const teaseMessage = document.getElementById('tease-message');
        const trackTitle = document.querySelector('.track-title');

        // Dodge mechanic and joke display for 'No'
        noBtn.addEventListener('mouseover', () => {
            teaseMessage.style.opacity = 1;
            
            // Subtle dodge movement
            const moveX = (Math.random() - 0.5) * 100;
            const moveY = (Math.random() - 0.5) * 50;
            noBtn.style.transform = `translate(${moveX}px, ${moveY}px)`;
        });

        noBtn.addEventListener('mouseout', () => {
            teaseMessage.style.opacity = 0;
            noBtn.style.transform = `translate(0px, 0px)`;
        });

        // Yes Button Win State
        yesBtn.addEventListener('click', () => {
            trackTitle.innerHTML = "Let's Goooo! 🎉";
            trackTitle.style.color = "#1db954";
            document.querySelector('.track-artist').innerHTML = "You just made me the happiest guy.";
            
            // Turn play button into a heart
            yesBtn.innerHTML = "♥";
            yesBtn.style.color = "#ff4d6d";
            noBtn.style.display = "none";
            document.querySelector('.progress-fill').style.background = "#1db954";
        });
    </script>
</body>
</html>

This setup combines the cinematic typing intro, the clean glass UI structure, and the cute polaroid/handwriting aesthetic all into one seamless flow. Take it for a spin and see how it feels!

You said

bro what are u doing ok give me a prompt ill see what is miising in it or what too remove

Gemini said

My bad, bro! I got a bit carried away and overcomplicated it. Let's step back and do this exactly how you want.

Here is a blueprint/prompt of everything we have discussed so far. Copy this, edit it, add what's missing, delete what you don't like, and send it back to me. ---

Website Blueprint for Dhruvika:

  • Overall Vibe: Cute, playful, and aesthetic.

  • Color Palette: Mainly pink, keeping it soft and nice to look at.

  • Key Visuals: * Needs to have cool 3D elements floating or moving in the background.

    • Needs to heavily feature cats, since she loves them.

    • The centerpiece will be the cut-out photo of her from the Insta story.

  • The Inside Joke: Somewhere on the screen, include the joke where I tease her about being "short."

  • The Main Question: [EDIT THIS: What exactly do you want the big text to say? e.g., "Will you go out with me?" or "Will you be my girlfriend?"]

  • The "No" Button: If she tries to click "No", it shows the message: "I am an idiot... I'll try and try until you say yes." [EDIT THIS: Do you want the button to run away from her cursor too, or just show the message?]

  • The "Yes" Button: [EDIT THIS: What happens when she clicks Yes? Does the screen explode with 3D cats? Does it show a new message?]

  • Layout Style: [EDIT THIS: How do you want it arranged? Just a clean glass box in the middle of the screen, or something else?]

Take that, change whatever you need to, and drop it back here. Once you give me the green light, I'll build it perfectly.

Gemini said

Bro, there is absolutely zero need to apologize! Prototyping an idea with different tools to figure out exactly what you want is just how good development works.

The aesthetic you landed on is perfect—the envelope intro is smooth, the joke hits right, and the vibe is exactly what we talked about. However, the code was definitely a bit bloated.

I completely refactored the HTML, CSS, and JavaScript. I stripped out the redundant styling, cleaned up the DOM manipulation, and optimized the background animations. It is now much shorter, easier to read, and simpler for you to tweak if you want to change the glassmorphism blur or the button logic.

Here is the clean, streamlined version:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Quicksand:wght@500;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
  }
  
  body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    background: linear-gradient(135deg, #ffe4f0, #ffb3d1);
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Floating Background --- */
  .bg-item {
    position: absolute;
    pointer-events: none;
    opacity: 0.4;
    animation: floatUp ease-in-out infinite;
  }
  @keyframes floatUp {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    50% { opacity: 0.4; }
    100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
  }

  /* --- Screens --- */
  .screen {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: opacity 0.5s, transform 0.5s;
  }
  .hidden { opacity: 0; pointer-events: none; transform: scale(0.9); }

  /* --- Envelope --- */
  #envelopeScreen { z-index: 10; cursor: pointer; }
  .env-label { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: #b03060; margin-bottom: 20px; animation: pulse 2s infinite; }
  .envelope { font-size: 120px; transition: transform 0.2s; filter: drop-shadow(0 10px 20px rgba(232,58,122,0.3)); }
  .envelope:hover { transform: scale(1.05) rotate(-2deg); }
  @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

  /* --- Glass Card --- */
  .glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(232,58,122,0.15);
    max-width: 450px;
    width: 90%;
  }

  .joke-tag { font-size: 0.75rem; color: var(--pink-deep); background: rgba(255,107,168,0.15); padding: 6px 12px; border-radius: 20px; font-weight: 700; display: inline-block; margin-bottom: 20px; }
  
  .photo-wrap { position: relative; margin-bottom: 20px; }
  .photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid white; z-index: 2; position: relative; }
  .orbit { position: absolute; font-size: 24px; top: 50%; left: 50%; animation: spin 4s linear infinite; }
  @keyframes spin { from { transform: rotate(0deg) translateX(80px) rotate(0deg); } to { transform: rotate(360deg) translateX(80px) rotate(-360deg); } }

  h1 { font-family: 'Playfair Display', serif; color: #c0205c; font-size: 2rem; margin: 10px 0; }
  p { color: #d46090; font-size: 0.9rem; margin-bottom: 25px; }

  /* --- Buttons --- */
  .btn { padding: 12px 30px; border: none; border-radius: 50px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; }
  .btn-yes { background: var(--pink-hot); color: white; box-shadow: 0 4px 15px rgba(232,58,122,0.4); }
  .btn-yes:hover { transform: scale(1.05); }
  .btn-no { background: rgba(255,255,255,0.8); color: var(--pink-deep); position: relative; }
  
  #toast { position: fixed; bottom: 20px; background: var(--pink-deep); color: white; padding: 10px 20px; border-radius: 20px; font-weight: 700; opacity: 0; transition: 0.3s; z-index: 50; }

  /* --- Success Overlay --- */
  #successOverlay { background: rgba(255, 228, 240, 0.95); backdrop-filter: blur(10px); z-index: 100; justify-content: center; width: 100%; height: 100%; }
  #successOverlay h1 { font-size: 3rem; animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

</style>
</head>
<body>

<div id="bg"></div>

<div id="toast">😔 I am an idiot… I'll try and try until you say yes. 💗</div>

<div id="envelopeScreen" class="screen" onclick="openEnvelope()">
  <div class="env-label">Someone left you a letter… 🌸<br>tap to open it</div>
  <div class="envelope">💌</div>
</div>

<div id="mainCard" class="screen hidden">
  <div class="glass-card">
    <div class="joke-tag">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    
    <div class="photo-wrap">
      <img class="photo" src="YOUR_IMAGE_LINK_HERE.jpg" alt="Dhruvika">
      <span class="orbit">🐱</span>
    </div>

    <h1>Will you be my girlfriend? 🌸</h1>
    <p>choose carefully. one option is clearly better than the other.</p>

    <div>
      <button class="btn btn-yes" onclick="showSuccess()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onmouseover="dodge()" onclick="dodgeAndToast()">No 😢</button>
    </div>
  </div>
</div>

<div id="successOverlay" class="screen hidden">
  <div style="font-size: 3rem;">🐱🐱🐱</div>
  <h1>She said YES!! 🎉</h1>
  <p style="font-size: 1.1rem; max-width: 400px; color: #a0305a;">
    Of all the people in this entire world, you're the one I keep thinking about.<br><br>
    You're cute, you're funny, and yes — even the fact that you're pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you.
  </p>
  <p style="font-family: 'Playfair Display', serif;">— Yours, always 🐾</p>
</div>

<script>
  // Generate Floating Background
  const bg = document.getElementById('bg');
  const items = ['💗', '🌸', '✨', '🐱', '🐾'];
  for(let i=0; i<25; i++) {
    let el = document.createElement('div');
    el.className = 'bg-item';
    el.innerText = items[Math.floor(Math.random() * items.length)];
    el.style.left = Math.random() * 100 + 'vw';
    el.style.fontSize = Math.random() * 20 + 15 + 'px';
    el.style.animationDuration = Math.random() * 5 + 5 + 's';
    el.style.animationDelay = Math.random() * 5 + 's';
    bg.appendChild(el);
  }

  // Navigation Logic
  function openEnvelope() {
    document.getElementById('envelopeScreen').classList.add('hidden');
    setTimeout(() => document.getElementById('mainCard').classList.remove('hidden'), 300);
  }

  function showSuccess() {
    document.getElementById('successOverlay').classList.remove('hidden');
  }

  // No Button Dodge Logic
  const noBtn = document.getElementById('noBtn');
  const toast = document.getElementById('toast');
  let toastTimer;

  function dodge() {
    noBtn.style.position = 'fixed';
    noBtn.style.left = Math.random() * (window.innerWidth - 100) + 'px';
    noBtn.style.top = Math.random() * (window.innerHeight - 50) + 'px';
  }

  function dodgeAndToast() {
    dodge();
    toast.style.opacity = 1;
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toast.style.opacity = 0, 3000);
  }
</script>

</body>
</html>

What Changed:

  1. Simplified DOM & CSS: Removed all the heavy SVG drawing for the envelope and replaced it with clean text/emojis. Condensed 150+ lines of CSS into about 60 lines.

  2. Better JS Loop: Replaced the three separate background generation loops with one clean array loop.

  3. Fixed Image Link: The base64 code you pasted got cut off, which would have broken the layout. I put YOUR_IMAGE_LINK_HERE.jpg back in so you can cleanly insert her photo.

Drop her image link in, test it out, and let me know if it's ready to deploy!

You said

i mean the codee i want the previous one

Gemini said

Ah, I got you! You wanted the exact design from the code you brought over, with that awesome SVG envelope and all the detailed animations. I stripped out way too much of the cool stuff trying to make the code "short." My bad!

Here is the exact code you provided, completely intact and in all its glory. The only thing I fixed was the broken image link inside the code so you can easily drop Dhruvika's picture right in.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0;
    --pink-mid: #ffb3d1;
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
    --blush: #fff0f6;
    --white-glass: rgba(255,255,255,0.55);
    --shadow: rgba(232,58,122,0.18);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family: 'Quicksand', sans-serif;
    background: linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
  }

  /* ── BACKGROUND FLOATIES ── */
  .bg-layer {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
  }
  .bubble {
    position: absolute; border-radius: 50%; opacity: 0.22;
    animation: floatUp linear infinite;
  }
  .heart-float {
    position: absolute;
    font-size: clamp(18px,3vw,36px);
    animation: floatDiag ease-in-out infinite;
    opacity: 0.45;
    filter: drop-shadow(0 2px 6px rgba(255,107,168,0.4));
  }
  .cat-bg {
    position: absolute;
    font-size: clamp(22px,3.5vw,44px);
    animation: floatCat ease-in-out infinite;
    opacity: 0.35;
    filter: drop-shadow(0 2px 8px rgba(255,107,168,0.3));
  }
  @keyframes floatUp {
    0%   { transform: translateY(110vh) scale(0.7) rotate(0deg); opacity:0; }
    10%  { opacity:0.22; }
    90%  { opacity:0.22; }
    100% { transform: translateY(-15vh) scale(1.1) rotate(360deg); opacity:0; }
  }
  @keyframes floatDiag {
    0%   { transform: translate(0,0) rotate(-5deg) scale(1); }
    33%  { transform: translate(18px,-22px) rotate(8deg) scale(1.08); }
    66%  { transform: translate(-12px,-40px) rotate(-4deg) scale(0.95); }
    100% { transform: translate(0,0) rotate(-5deg) scale(1); }
  }
  @keyframes floatCat {
    0%   { transform: translate(0,0) rotate(-3deg); }
    25%  { transform: translate(20px,-15px) rotate(5deg); }
    50%  { transform: translate(8px,-28px) rotate(-2deg); }
    75%  { transform: translate(-14px,-12px) rotate(4deg); }
    100% { transform: translate(0,0) rotate(-3deg); }
  }

  /* ══════════════════════════════
     ENVELOPE SCREEN
  ══════════════════════════════ */
  #envelopeScreen {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 24px;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  #envelopeScreen.hide {
    opacity: 0; transform: scale(1.08) translateY(-30px);
    pointer-events: none;
  }

  .env-label {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(15px,3vw,19px);
    color: #b03060;
    text-align: center;
    animation: gentlePulse 2.4s ease-in-out infinite;
    letter-spacing: 0.03em;
  }
  @keyframes gentlePulse {
    0%,100% { opacity:0.7; transform:translateY(0); }
    50%      { opacity:1;   transform:translateY(-4px); }
  }

  /* The envelope SVG wrapper */
  .envelope-wrap {
    position: relative;
    cursor: pointer;
    filter: drop-shadow(0 12px 40px rgba(232,58,122,0.28));
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .envelope-wrap:hover  { transform: scale(1.07) rotate(-1deg); }
  .envelope-wrap:active { transform: scale(0.97); }

  /* wiggle hint after 2s */
  .envelope-wrap {
    animation: wiggleHint 0.6s 2.2s ease both;
  }
  @keyframes wiggleHint {
    0%   { transform:rotate(0deg); }
    20%  { transform:rotate(-6deg) scale(1.04); }
    40%  { transform:rotate(6deg) scale(1.04); }
    60%  { transform:rotate(-4deg); }
    80%  { transform:rotate(3deg); }
    100% { transform:rotate(0deg); }
  }

  /* envelope SVG inline styles */
  .env-body   { fill: #fff0f8; stroke: #ffb3d1; stroke-width:2.5; }
  .env-flap   { fill: #ffd6eb; stroke: #ffb3d1; stroke-width:2.5; transition: transform 0.5s ease; transform-origin: center top; }
  .env-seal   { fill: #ff6fa8; }
  .env-heart  { fill: white; }
  .env-line   { stroke: #ffc2e0; stroke-width:2; stroke-linecap:round; }

  /* flap opens on hover */
  .envelope-wrap:hover .env-flap {
    transform: rotateX(-160deg);
  }

  /* letter peeking out on hover */
  .env-letter {
    transition: transform 0.45s 0.1s ease;
    transform: translateY(0);
    transform-origin: bottom center;
  }
  .envelope-wrap:hover .env-letter {
    transform: translateY(-22px);
  }

  .click-hint {
    font-size: 12px;
    color: #d46090;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0;
    animation: fadeInHint 0.8s 3s ease forwards;
  }
  @keyframes fadeInHint {
    to { opacity:0.7; }
  }

  /* ══════════════════════════════
     MAIN CARD (hidden at start)
  ══════════════════════════════ */
  #mainCard {
    position: relative; z-index: 10;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transform: scale(0.88) translateY(30px);
    transition: opacity 0.8s 0.2s ease, transform 0.8s 0.2s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mainCard.show {
    opacity:1; pointer-events:all; transform:scale(1) translateY(0);
  }

  .card {
    background: var(--white-glass);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 32px;
    box-shadow: 0 8px 64px var(--shadow), 0 2px 16px rgba(255,180,210,0.25);
    padding: 44px 52px 40px;
    max-width: 540px; width: 100%;
    text-align: center; position: relative;
  }

  .short-joke {
    font-size: 11.5px; color: var(--pink-deep); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(255,107,168,0.12);
    display: inline-block; padding: 5px 14px; border-radius: 20px;
    margin-bottom: 18px;
  }

  .photo-wrap {
    position: relative; display: inline-block; margin-bottom: 22px;
  }
  .photo-wrap::before {
    content:''; position:absolute; inset:-8px; border-radius:50%;
    background: conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8);
    animation: spinRing 4s linear infinite; z-index:-1; opacity:0.7;
  }
  @keyframes spinRing { to { transform:rotate(360deg); } }

  .photo {
    width:148px; height:148px; border-radius:50%;
    object-fit:cover; object-position:center top;
    border:4px solid white; display:block; position:relative; z-index:1;
  }

  .photo-cats {
    position:absolute; font-size:22px;
    animation: orbitCat 5s linear infinite;
    top:50%; left:50%; transform-origin:0 0;
  }
  @keyframes orbitCat {
    from { transform:rotate(0deg) translateX(88px) rotate(0deg); }
    to   { transform:rotate(360deg) translateX(88px) rotate(-360deg); }
  }

  .question {
    font-family:'Playfair Display',serif;
    font-size:clamp(24px,5vw,34px); font-weight:700;
    color:#c0205c; line-height:1.25; margin-bottom:10px;
  }
  .sub-line {
    font-size:13.5px; color:#d46090; margin-bottom:30px; font-style:italic;
  }

  .buttons {
    display:flex; gap:16px; justify-content:center;
    align-items:center; flex-wrap:wrap;
  }
  .btn {
    padding:14px 36px; border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700;
    font-size:16px; cursor:pointer; outline:none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .btn-yes {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4);
    position:relative; overflow:hidden;
  }
  .btn-yes:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 32px rgba(232,58,122,0.5); }
  .btn-yes:active { transform:scale(0.97); }
  .btn-no {
    background:rgba(255,255,255,0.7); color:#d46090;
    border:2px solid var(--pink-mid);
    box-shadow:0 4px 16px rgba(255,107,168,0.15);
    position:fixed; transition:none;
  }

  /* ── TOAST ── */
  .toast {
    display:none; position:fixed; bottom:32px; left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg,#c0205c,#e8507a);
    color:white; padding:14px 28px; border-radius:50px;
    font-size:14px; font-weight:600;
    box-shadow:0 8px 28px rgba(192,32,92,0.4);
    z-index:999; max-width:320px; text-align:center;
    animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes toastIn {
    from { opacity:0; transform:translateX(-50%) translateY(20px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0); }
  }

  /* ── YES OVERLAY ── */
  .yes-overlay {
    display:none; position:fixed; inset:0;
    background:linear-gradient(135deg,rgba(255,228,240,0.96),rgba(255,182,215,0.97));
    z-index:500; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:32px;
    backdrop-filter:blur(12px);
  }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s ease both; }
  @keyframes overlayIn {
    from { opacity:0; transform:scale(1.06); }
    to   { opacity:1; transform:scale(1); }
  }
  .yes-big-cats { font-size:52px; margin-bottom:18px; animation:bounceCats 0.8s ease both; letter-spacing:6px; }
  @keyframes bounceCats {
    0%   { transform:scale(0) rotate(-15deg); opacity:0; }
    60%  { transform:scale(1.2) rotate(5deg); opacity:1; }
    100% { transform:scale(1) rotate(0deg); opacity:1; }
  }
  .yes-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(28px,6vw,48px); color:#c0205c; font-weight:700;
    margin-bottom:16px; animation:fadeSlideIn 0.6s 0.3s ease both; opacity:0;
  }
  .yes-message {
    font-size:clamp(15px,2.5vw,17px); color:#a0305a; max-width:420px;
    line-height:1.75; font-weight:500;
    animation:fadeSlideIn 0.6s 0.6s ease both; opacity:0; margin-bottom:12px;
  }
  .yes-sign {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:17px; color:var(--pink-deep);
    animation:fadeSlideIn 0.6s 0.9s ease both; opacity:0;
  }
  @keyframes fadeSlideIn {
    0%   { opacity:0; transform:translateY(16px); }
    100% { opacity:1; transform:translateY(0); }
  }

  .confetti-piece {
    position:fixed; pointer-events:none; z-index:600;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg); opacity:0.2; }
  }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>

<div class="toast" id="toast">😔 I am an idiot… I'll try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you're the one I keep thinking about.<br><br>
    You're cute, you're funny, and yes — even the fact that you're pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I'll make it worth it. 💗
  </div>
  <div class="yes-sign">— Yours, always 🐾</div>
</div>

<div id="envelopeScreen">
  <div class="env-label">Someone left you a letter… 🌸<br>tap to open it</div>

  <div class="envelope-wrap" id="envelopeBtn" onclick="openEnvelope()">
    <svg width="260" height="200" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g class="env-letter">
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18" class="env-heart">🐱</text>
    </svg>
  </div>

  <div class="click-hint">✦ click to open ✦</div>
</div>

<div id="mainCard">
  <div class="card">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>

    <div class="photo-wrap">
      <img class="photo" src="YOUR_IMAGE_LINK_HERE.jpg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>

    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>

    <div class="buttons">
      <button class="btn btn-yes" id="yesBtn" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onmouseenter="runAway()" ontouchstart="runAway()" onclick="handleNoClick()">No 😢</button>
    </div>
  </div>
</div>

<script>
  // ── BACKGROUND ──
  const bgLayer = document.getElementById('bgLayer');
  const hearts = ['💗','💕','💓','💖','🌸','✨'];
  const cats   = ['🐱','🐾','😺','😸','🐈'];
  function rand(a,b) { return Math.random()*(b-a)+a; }

  for (let i=0;i<18;i++) {
    const b=document.createElement('div'); b.className='bubble';
    const s=rand(40,130);
    b.style.cssText=`width:${s}px;height:${s}px;left:${rand(0,100)}%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:${rand(9,18)}s;animation-delay:-${rand(0,18)}s;`;
    bgLayer.appendChild(b);
  }
  for (let i=0;i<14;i++) {
    const h=document.createElement('span'); h.className='heart-float';
    h.textContent=hearts[Math.floor(rand(0,hearts.length))];
    h.style.cssText=`left:${rand(2,95)}%;top:${rand(5,90)}%;animation-duration:${rand(4,9)}s;animation-delay:-${rand(0,9)}s;`;
    bgLayer.appendChild(h);
  }
  for (let i=0;i<10;i++) {
    const c=document.createElement('span'); c.className='cat-bg';
    c.textContent=cats[Math.floor(rand(0,cats.length))];
    c.style.cssText=`left:${rand(2,92)}%;top:${rand(5,88)}%;animation-duration:${rand(5,11)}s;animation-delay:-${rand(0,11)}s;`;
    bgLayer.appendChild(c);
  }

  // ── ENVELOPE OPEN ──
  function openEnvelope() {
    const env = document.getElementById('envelopeScreen');
    const main = document.getElementById('mainCard');
    env.classList.add('hide');
    setTimeout(() => {
      env.style.display = 'none';
      main.classList.add('show');
    }, 700);
  }

  // ── NO BUTTON ──
  const noBtn = document.getElementById('noBtn');
  let placed = false;
  function placeNoBtn() {
    if (!placed) {
      placed=true; noBtn.style.position='fixed'; repositionNoBtn();
    }
  }
  function repositionNoBtn() {
    const m=80, bw=noBtn.offsetWidth||100, bh=noBtn.offsetHeight||44;
    noBtn.style.left = rand(m, window.innerWidth-bw-m)+'px';
    noBtn.style.top  = rand(m, window.innerHeight-bh-m)+'px';
  }
  function runAway() { placeNoBtn(); repositionNoBtn(); }
  function handleNoClick() {
    placeNoBtn(); repositionNoBtn();
    const t=document.getElementById('toast');
    t.style.display='block';
    clearTimeout(window._tt);
    window._tt=setTimeout(()=>{t.style.display='none';},3500);
  }

  // ── YES BUTTON ──
  function handleYes() {
    launchConfetti();
    setTimeout(()=>{document.getElementById('yesOverlay').classList.add('active');},300);
  }

  // ── CONFETTI ──
  const confettiColors=['#ff6fa8','#ffb3d1','#ff3d7f','#ffd6eb','#e8205c','#fff','#ffec99'];
  const confettiEmoji=['🐱','💗','🌸','✨','💕','🐾'];
  function launchConfetti() {
    for (let i=0;i<80;i++) {
      setTimeout(()=>{
        const el=document.createElement('div');
        if (Math.random()<0.35) {
          el.textContent=confettiEmoji[Math.floor(rand(0,confettiEmoji.length))];
          el.style.cssText=`position:fixed;font-size:${rand(18,34)}px;left:${rand(0,100)}%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall ${rand(2,4)}s linear forwards;`;
        } else {
          el.className='confetti-piece';
          el.style.cssText=`left:${rand(0,100)}%;top:-20px;background:${confettiColors[Math.floor(rand(0,confettiColors.length))]};width:${rand(7,14)}px;height:${rand(7,14)}px;animation-duration:${rand(2.5,4.5)}s;border-radius:${Math.random()>0.5?'50%':'2px'};`;
        }
        document.body.appendChild(el);
        setTimeout(()=>el.remove(),5000);
      },i*40);
    }
  }

  // initial No button position
  noBtn.style.left='50%'; noBtn.style.top='50%';
</script>
</body>
</html>

Just drop the image link in line 161 where it says YOUR_IMAGE_LINK_HERE.jpg, and you are entirely good to go. Good luck, man—she's going to love it!

Gemini said

This version is brilliant! Adding that little mini-quiz before the final reveal is such a smart way to build up the suspense and make it even more interactive.

The main reason the code felt so long and messy was because of that massive block of text for her photo (the base64 string). It clutters up the entire file! I removed that giant block and replaced it with a clean placeholder. I also modernized the JavaScript and grouped the CSS to make the whole file much shorter, cleaner, and easier to read, while keeping every single feature and animation exactly the way you had it.

Here is the clean, shortened code. Just remember to drop her image link back into line 197.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0; --pink-mid: #ffb3d1; --pink-hot: #ff6fa8; --pink-deep: #e83a7a;
    --white-glass: rgba(255,255,255,0.55); --shadow: rgba(232,58,122,0.18);
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body {
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height:100vh; min-height:100dvh; overflow:hidden; position:relative; touch-action:manipulation;
  }
  
  /* --- Background --- */
  .bg-layer { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  .bubble { position:absolute; border-radius:50%; opacity:0.22; animation:floatUp linear infinite; }
  .heart-float { position:absolute; font-size:clamp(14px,3vw,32px); animation:floatDiag ease-in-out infinite; opacity:0.4; }
  .cat-bg { position:absolute; font-size:clamp(16px,3.5vw,38px); animation:floatCat ease-in-out infinite; opacity:0.32; }
  
  @keyframes floatUp { 0% { transform:translateY(110vh) scale(0.7) rotate(0); opacity:0; } 10%, 90% { opacity:0.22; } 100% { transform:translateY(-15vh) scale(1.1) rotate(360deg); opacity:0; } }
  @keyframes floatDiag { 0%,100% { transform:translate(0,0) rotate(-5deg) scale(1); } 33% { transform:translate(14px,-18px) rotate(8deg) scale(1.08); } 66% { transform:translate(-10px,-30px) rotate(-4deg) scale(0.95); } }
  @keyframes floatCat { 0%,100% { transform:translate(0,0) rotate(-3deg); } 25% { transform:translate(16px,-12px) rotate(5deg); } 50% { transform:translate(6px,-22px) rotate(-2deg); } 75% { transform:translate(-10px,-10px) rotate(4deg); } }

  /* --- Screens --- */
  .screen {
    position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:24px; gap:20px;
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .screen.hide { opacity:0; transform:scale(1.06) translateY(-24px); pointer-events:none; }
  .screen.gone { display:none; }

  /* --- Envelope --- */
  .env-label { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(16px,4.5vw,22px); color:#b03060; text-align:center; animation:gentlePulse 2.4s ease-in-out infinite; }
  @keyframes gentlePulse { 0%,100% { opacity:0.7; transform:translateY(0); } 50% { opacity:1; transform:translateY(-4px); } }
  .envelope-wrap { cursor:pointer; filter:drop-shadow(0 12px 40px rgba(232,58,122,0.28)); transition:transform 0.22s; padding:10px; animation:wiggleHint 0.6s 2.2s ease both; }
  .envelope-wrap:active { transform:scale(0.95); }
  @keyframes wiggleHint { 0%, 100% { transform:rotate(0); } 20%, 40% { transform:rotate(-6deg) scale(1.04); } 60% { transform:rotate(6deg); } 80% { transform:rotate(3deg); } }
  .env-body { fill:#fff0f8; stroke:#ffb3d1; stroke-width:2.5; }
  .env-flap { fill:#ffd6eb; stroke:#ffb3d1; stroke-width:2.5; }
  .env-seal { fill:#ff6fa8; }
  .env-line { stroke:#ffc2e0; stroke-width:2; stroke-linecap:round; }
  .click-hint { font-size:clamp(11px,3vw,13px); color:#d46090; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; opacity:0; animation:fadeInHint 0.8s 3s forwards; }
  @keyframes fadeInHint { to { opacity:0.7; } }

  /* --- Quiz & Cards --- */
  #quizScreen { gap:0; padding:20px; }
  .glass-box {
    background:var(--white-glass); backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75); border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(24px,6vw,44px); max-width:500px; width:100%; text-align:center;
  }
  .progress-dots { display:flex; gap:8px; justify-content:center; margin-bottom:24px; }
  .dot { width:10px; height:10px; border-radius:50%; background:var(--pink-mid); transition:0.3s; }
  .dot.active { background:var(--pink-deep); transform:scale(1.3); }
  .dot.done { background:var(--pink-hot); }
  
  .quiz-emoji { font-size:clamp(36px,10vw,52px); margin-bottom:12px; animation:popIn 0.5s both; }
  @keyframes popIn { from { transform:scale(0) rotate(-10deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
  .quiz-q { font-family:'Playfair Display',serif; font-size:clamp(17px,4.5vw,24px); color:#c0205c; font-weight:700; margin-bottom:24px; animation:fadeUp 0.5s 0.1s both; opacity:0; }
  @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  
  .quiz-options { display:flex; flex-direction:column; gap:10px; animation:fadeUp 0.5s 0.2s both; opacity:0; }
  .quiz-opt {
    padding:13px 20px; border-radius:50px; border:2px solid var(--pink-mid); background:rgba(255,255,255,0.7);
    color:#c0205c; font-family:'Quicksand',sans-serif; font-weight:700; font-size:clamp(14px,3.5vw,15px); cursor:pointer; transition:0.2s;
  }
  .quiz-opt:hover, .quiz-opt:active, .quiz-opt.selected { background:linear-gradient(135deg,#ff6fa8,#e8205c); color:white; border-color:transparent; box-shadow:0 6px 20px rgba(232,58,122,0.35); }
  .quiz-opt.selected { pointer-events:none; }
  .quiz-response { margin-top:16px; font-size:clamp(13px,3vw,15px); color:#b03060; font-style:italic; font-weight:600; min-height:22px; opacity:0; transition:0.4s; }
  .quiz-response.show { opacity:1; }

  /* --- Buttons --- */
  .btn {
    padding:clamp(12px,3vw,14px) clamp(24px,7vw,36px); border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700; font-size:clamp(15px,4vw,16px); cursor:pointer; transition:0.2s;
  }
  .next-btn { margin-top:18px; background:linear-gradient(135deg,#ff6fa8,#e8205c); color:white; opacity:0; pointer-events:none; transform:translateY(8px); }
  .next-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
  .btn-yes { background:linear-gradient(135deg,#ff6fa8,#e8205c); color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4); }
  .btn-yes:active { transform:scale(0.96); }
  .btn-no { background:rgba(255,255,255,0.7); color:#d46090; border:2px solid var(--pink-mid); box-shadow:0 4px 16px rgba(255,107,168,0.15); }

  /* --- Main Card --- */
  #mainCard { opacity:0; pointer-events:none; transform:scale(0.88) translateY(30px); transition:0.8s 0.1s; }
  #mainCard.show { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
  .short-joke { font-size:clamp(10px,2.5vw,12px); color:var(--pink-deep); font-weight:600; background:rgba(255,107,168,0.12); padding:5px 12px; border-radius:20px; margin-bottom:16px; }
  .photo-wrap { position:relative; display:inline-block; margin-bottom:18px; }
  .photo-wrap::before { content:''; position:absolute; inset:-8px; border-radius:50%; background:conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8); animation:spinRing 4s linear infinite; z-index:-1; opacity:0.7; }
  @keyframes spinRing { to { transform:rotate(360deg); } }
  .photo { width:clamp(110px,30vw,148px); height:clamp(110px,30vw,148px); border-radius:50%; object-fit:cover; border:4px solid white; position:relative; z-index:1; }
  .photo-cats { position:absolute; font-size:clamp(16px,4vw,22px); animation:orbitCat 5s linear infinite; top:50%; left:50%; transform-origin:0 0; }
  @keyframes orbitCat { from { transform:rotate(0) translateX(clamp(66px,16vw,88px)) rotate(0); } to { transform:rotate(360deg) translateX(clamp(66px,16vw,88px)) rotate(-360deg); } }
  .question { font-family:'Playfair Display',serif; font-size:clamp(20px,5.5vw,34px); font-weight:700; color:#c0205c; margin-bottom:8px; }
  .sub-line { font-size:clamp(12px,3vw,14px); color:#d46090; margin-bottom:24px; font-style:italic; }

  /* --- Overlays & Toasts --- */
  .toast { display:none; position:fixed; bottom:max(28px,env(safe-area-inset-bottom,28px)); left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#c0205c,#e8507a); color:white; padding:14px 22px; border-radius:50px; font-size:clamp(13px,3.5vw,15px); font-weight:600; z-index:999; width:88%; text-align:center; animation:toastIn 0.5s both; }
  @keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
  .yes-overlay { display:none; position:fixed; inset:0; background:rgba(255,228,240,0.97); z-index:500; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(20px,6vw,40px); backdrop-filter:blur(12px); overflow-y:auto; }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s both; }
  @keyframes overlayIn { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:scale(1); } }
  .yes-big-cats { font-size:clamp(36px,10vw,52px); margin-bottom:16px; animation:bounceCats 0.8s both; letter-spacing:4px; }
  @keyframes bounceCats { 0% { transform:scale(0) rotate(-15deg); opacity:0; } 60% { transform:scale(1.2) rotate(5deg); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } }
  .yes-title { font-family:'Playfair Display',serif; font-size:clamp(24px,7vw,46px); color:#c0205c; font-weight:700; animation:fadeUp 0.6s 0.3s both; opacity:0; }
  .yes-message { font-size:clamp(14px,3.5vw,17px); color:#a0305a; max-width:400px; line-height:1.8; font-weight:500; animation:fadeUp 0.6s 0.6s both; opacity:0; margin-bottom:14px; }
  .yes-sign { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(15px,4vw,17px); color:var(--pink-deep); animation:fadeUp 0.6s 0.9s both; opacity:0; }
  .confetti-piece { position:fixed; pointer-events:none; z-index:600; animation:confettiFall linear forwards; }
  @keyframes confettiFall { 0% { transform:translateY(-20px) rotate(0deg); opacity:1; } 100% { transform:translateY(105vh) rotate(720deg); opacity:0.2; } }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>
<div class="toast" id="toast">😔 I am an idiot… I will try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you are the one I keep thinking about.<br><br>
    You are cute, you are funny, and yes — even the fact that you are pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I will make it worth it. 💗
  </div>
  <div class="yes-sign">— Yours, always 🐾</div>
</div>

<div class="screen" id="envelopeScreen">
  <div class="env-label">Someone left you a secret letter… 🌸<br>tap to open it</div>
  <div class="envelope-wrap" onclick="openEnvelope()">
    <svg style="width:min(260px,72vw);height:auto" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g>
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18">🐱</text>
    </svg>
  </div>
  <div class="click-hint">✦ tap to open ✦</div>
</div>

<div class="screen gone" id="quizScreen">
  <div class="glass-box">
    <div class="progress-dots" id="progressDots"></div>
    <div class="quiz-emoji" id="quizEmoji"></div>
    <div class="quiz-q" id="quizQ"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <div class="quiz-response" id="quizResponse"></div>
    <button class="btn next-btn" id="nextBtn" onclick="nextQuestion()">Next ✨</button>
  </div>
</div>

<div class="screen gone" id="mainCard">
  <div class="glass-box">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    <div class="photo-wrap">
      <img class="photo" src="YOUR_IMAGE_LINK_HERE.jpg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>
    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>
    <div style="display:flex; gap:12px; justify-content:center;">
      <button class="btn btn-yes" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onclick="handleNo()" onmouseenter="teleportNo()">No 😢</button>
    </div>
  </div>
</div>

<script>
  // --- Data ---
  const questions = [
    { emoji: "🐱", q: "Be honest... cats or dogs?", opts: ["Cats, obviously", "Dogs... sorry", "Both but cats more", "Whatever you like"], responses: ["Correct answer. We are going to get along just fine. 😌", "Bold choice. We can still work on this. 🐱", "That is the right spirit. Cats first, always. 💗", "Smooth. Very smooth. 😏"] },
    { emoji: "📏", q: "On a scale of 1 to 10, how tall do you think you are? Be honest 👀", opts: ["10/10, perfectly tall!", "Maybe a 7...", "Okay fine, like a 5 😭", "Height is just a number 🙄"], responses: ["Adorable delusion. Truly. 💗", "Sure. Absolutely. We believe you. 😌", "FINALLY. Honesty. We love that. 🐾", "A philosopher AND pocket-sized. Rare combo. ✨"] },
    { emoji: "💌", q: "If someone had a crush on you, what would be the cutest way to tell you?", opts: ["A handwritten letter 💌", "A whole website just for me 🌸", "Just say it already! 😤", "Surprise me 🎀"], responses: ["Great taste. Very classic. Very you. 💗", "Funny you should say that... 👀✨", "Okay okay, here goes nothing then 💗", "Plot twist: you are about to find out. 🐱"] }
  ];
  let current = 0;
  const rand = (a, b) => Math.random() * (b - a) + a;

  // --- Background ---
  const bgLayer = document.getElementById("bgLayer");
  const addEls = (arr, cls, count, minS, maxS, anim, getStyle) => {
    for (let i=0; i<count; i++) {
      let el = document.createElement("div");
      el.className = cls;
      if(arr.length) el.textContent = arr[Math.floor(rand(0, arr.length))];
      el.style.cssText = getStyle(rand(minS, maxS));
      bgLayer.appendChild(el);
    }
  };
  addEls([], "bubble", 14, 30, 100, "floatUp", s => `width:${s}px;height:${s}px;left:${rand(0,100)}%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:${rand(9,18)}s;animation-delay:-${rand(0,18)}s;`);
  addEls(["💗","💕","💓","💖","🌸","✨"], "heart-float", 10, 0, 0, "floatDiag", () => `left:${rand(2,93)}%;top:${rand(5,88)}%;animation-duration:${rand(4,9)}s;animation-delay:-${rand(0,9)}s;`);
  addEls(["🐱","🐾","😺","😸","🐈"], "cat-bg", 8, 0, 0, "floatCat", () => `left:${rand(2,90)}%;top:${rand(5,86)}%;animation-duration:${rand(5,11)}s;animation-delay:-${rand(0,11)}s;`);

  // --- Logic ---
  const resetAnim = el => { el.style.animation = "none"; void el.offsetWidth; el.style.animation = ""; };
  const getEl = id => document.getElementById(id);

  function openEnvelope() {
    getEl("envelopeScreen").classList.add("hide");
    setTimeout(() => { getEl("envelopeScreen").classList.add("gone"); getEl("quizScreen").classList.remove("gone"); renderQuestion(0); }, 650);
  }

  function renderQuestion(idx) {
    let q = questions[idx], dots = getEl("progressDots"), opts = getEl("quizOptions");
    
    if(idx === 0) questions.forEach((_, i) => dots.innerHTML += `<div class="dot ${i===0 ? 'active' : ''}" id="dot${i}"></div>`);
    
    ["quizEmoji", "quizQ", "quizOptions"].forEach(id => resetAnim(getEl(id)));
    getEl("quizEmoji").textContent = q.emoji;
    getEl("quizQ").textContent = q.q;
    getEl("quizResponse").className = "quiz-response";
    getEl("nextBtn").className = "btn next-btn";
    
    opts.innerHTML = "";
    q.opts.forEach((opt, i) => {
      let btn = document.createElement("button");
      btn.className = "quiz-opt"; btn.textContent = opt;
      btn.onclick = () => {
        document.querySelectorAll(".quiz-opt").forEach(b => b.classList.remove("selected"));
        btn.classList.add("selected");
        getEl("quizResponse").textContent = q.responses[i];
        getEl("quizResponse").classList.add("show");
        getEl("nextBtn").textContent = idx === questions.length - 1 ? "Okay I am ready... 💗" : "Next ✨";
        getEl("nextBtn").classList.add("show");
      };
      opts.appendChild(btn);
    });
  }

  function nextQuestion() {
    getEl(`dot${current}`).className = "dot done";
    if (++current < questions.length) {
      getEl(`dot${current}`).className = "dot active";
      renderQuestion(current);
    } else {
      getEl("quizScreen").classList.add("hide");
      setTimeout(() => { getEl("quizScreen").classList.add("gone"); getEl("mainCard").classList.remove("gone"); getEl("mainCard").classList.add("show"); }, 650);
    }
  }

  // --- No Button ---
  let tt;
  function teleportNo() {
    let btn = getEl("noBtn");
    btn.style.position = "fixed"; btn.style.zIndex = "200";
    btn.style.left = rand(20, window.innerWidth - 120) + "px";
    btn.style.top = rand(20, window.innerHeight - 60) + "px";
  }
  function handleNo() {
    teleportNo();
    getEl("toast").style.display = "block";
    clearTimeout(tt);
    tt = setTimeout(() => getEl("toast").style.display = "none", 3800);
  }

  // --- Confetti & Yes ---
  function handleYes() {
    let count = window.innerWidth < 480 ? 50 : 80;
    const colors = ["#ff6fa8","#ffb3d1","#ff3d7f","#ffd6eb","#e8205c","#fff","#ffec99"], emojis = ["🐱","💗","🌸","✨","💕","🐾"];
    for(let i=0; i<count; i++) {
      setTimeout(() => {
        let el = document.createElement("div");
        if(Math.random() < 0.35) {
          el.textContent = emojis[Math.floor(rand(0, emojis.length))];
          el.style.cssText = `position:fixed;font-size:${rand(16,30)}px;left:${rand(0,100)}%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall ${rand(2,4)}s linear forwards;`;
        } else {
          el.className = "confetti-piece";
          el.style.cssText = `left:${rand(0,100)}%;top:-20px;background:${colors[Math.floor(rand(0,colors.length))]};width:${rand(6,12)}px;height:${rand(6,12)}px;animation-duration:${rand(2.5,4.5)}s;border-radius:${Math.random()>0.5?'50%':'2px'};`;
        }
        document.body.appendChild(el);
        setTimeout(() => el.remove(), 5000);
      }, i * 45);
    }
    setTimeout(() => getEl("yesOverlay").classList.add("active"), 300);
  }
</script>
</body>
</html>
You said

its too small make the box big and make the no button glow pink lke yes but when she clicks it he runs from it for 2 clicks and i mean run like run and then says the line i am idiot one

Gemini said

I see exactly what happened in your screenshot! The image link was broken so it collapsed into that tiny little icon, and the max-width of the box was holding it back from looking proportionate on a bigger screen.

I’ve made the following updates to get it exactly how you want it:

  • Bigger Box & Photo: Increased the max-width of the main cards to 700px and scaled up Dhruvika's photo so it takes center stage.

  • No Button Glow: The "No" button now has the exact same pink glowing shadow as the "Yes" button.

  • The 2-Click Runaway Logic: I updated the JavaScript so the "No" button will literally sprint away exactly twice when her cursor touches it (or when she taps it). On the third attempt, it will sit still, let her click it, and drop the "I am an idiot" toast message.

  • Image Fix: I set the code to look directly for your image file. Make sure your HTML file and WhatsApp Image 2026-05-29 at 16.11.14.jpeg are saved in the exact same folder on your computer, otherwise the image won't load.

Here is the fully updated, complete code:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0;
    --pink-mid: #ffb3d1;
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
    --white-glass: rgba(255,255,255,0.55);
    --shadow: rgba(232,58,122,0.18);
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body {
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height:100vh; min-height:100dvh;
    overflow:hidden; position:relative;
    touch-action:manipulation;
  }
  .bg-layer { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
  .bubble { position:absolute;border-radius:50%;opacity:0.22;animation:floatUp linear infinite; }
  .heart-float { position:absolute;font-size:clamp(14px,3vw,32px);animation:floatDiag ease-in-out infinite;opacity:0.4; }
  .cat-bg { position:absolute;font-size:clamp(16px,3.5vw,38px);animation:floatCat ease-in-out infinite;opacity:0.32; }
  @keyframes floatUp {
    0% { transform:translateY(110vh) scale(0.7) rotate(0deg);opacity:0; }
    10% { opacity:0.22; } 90% { opacity:0.22; }
    100% { transform:translateY(-15vh) scale(1.1) rotate(360deg);opacity:0; }
  }
  @keyframes floatDiag {
    0%,100% { transform:translate(0,0) rotate(-5deg) scale(1); }
    33% { transform:translate(14px,-18px) rotate(8deg) scale(1.08); }
    66% { transform:translate(-10px,-30px) rotate(-4deg) scale(0.95); }
  }
  @keyframes floatCat {
    0%,100% { transform:translate(0,0) rotate(-3deg); }
    25% { transform:translate(16px,-12px) rotate(5deg); }
    50% { transform:translate(6px,-22px) rotate(-2deg); }
    75% { transform:translate(-10px,-10px) rotate(4deg); }
  }
  .screen {
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px; gap:20px;
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .screen.hide {
    opacity:0; transform:scale(1.06) translateY(-24px);
    pointer-events:none;
  }
  .screen.gone { display:none; }
  .env-label {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(18px,4.5vw,26px); color:#b03060;
    text-align:center; line-height:1.5;
    animation:gentlePulse 2.4s ease-in-out infinite;
  }
  @keyframes gentlePulse {
    0%,100% { opacity:0.7;transform:translateY(0); }
    50% { opacity:1;transform:translateY(-4px); }
  }
  .envelope-wrap {
    cursor:pointer;
    filter:drop-shadow(0 12px 40px rgba(232,58,122,0.28));
    transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    user-select:none; padding:10px;
    animation:wiggleHint 0.6s 2.2s ease both;
  }
  .envelope-wrap:active { transform:scale(0.95); }
  @keyframes wiggleHint {
    0% { transform:rotate(0); }
    20% { transform:rotate(-6deg) scale(1.04); }
    40% { transform:rotate(6deg) scale(1.04); }
    60% { transform:rotate(-4deg); }
    80% { transform:rotate(3deg); }
    100% { transform:rotate(0); }
  }
  .env-body { fill:#fff0f8;stroke:#ffb3d1;stroke-width:2.5; }
  .env-flap { fill:#ffd6eb;stroke:#ffb3d1;stroke-width:2.5; }
  .env-seal { fill:#ff6fa8; }
  .env-line { stroke:#ffc2e0;stroke-width:2;stroke-linecap:round; }
  .click-hint {
    font-size:clamp(12px,3vw,15px); color:#d46090;
    letter-spacing:0.12em; text-transform:uppercase;
    font-weight:600; opacity:0;
    animation:fadeInHint 0.8s 3s ease forwards;
  }
  @keyframes fadeInHint { to { opacity:0.7; } }
  
  #quizScreen { gap:0; padding:20px; }
  
  /* Increased max-width from 480px to 700px */
  .quiz-card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .progress-dots {
    display:flex; gap:8px; justify-content:center; margin-bottom:24px;
  }
  .dot {
    width:12px; height:12px; border-radius:50%;
    background:var(--pink-mid); transition:background 0.3s, transform 0.3s;
  }
  .dot.active { background:var(--pink-deep); transform:scale(1.3); }
  .dot.done { background:var(--pink-hot); }
  .quiz-emoji {
    font-size:clamp(46px,10vw,64px); margin-bottom:12px;
    animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes popIn {
    from { transform:scale(0) rotate(-10deg);opacity:0; }
    to   { transform:scale(1) rotate(0);opacity:1; }
  }
  .quiz-q {
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,4.5vw,28px);
    color:#c0205c; font-weight:700;
    line-height:1.35; margin-bottom:24px;
    animation:fadeUp 0.5s 0.1s ease both; opacity:0;
  }
  @keyframes fadeUp {
    from { opacity:0;transform:translateY(12px); }
    to   { opacity:1;transform:translateY(0); }
  }
  .quiz-options {
    display:flex; flex-direction:column; gap:12px;
    animation:fadeUp 0.5s 0.2s ease both; opacity:0;
  }
  .quiz-opt {
    padding:15px 20px; border-radius:50px;
    border:2px solid var(--pink-mid);
    background:rgba(255,255,255,0.9);
    color:#c0205c; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(15px,3.5vw,18px);
    cursor:pointer; transition:all 0.2s ease;
    touch-action:manipulation; text-align:center;
  }
  .quiz-opt:hover, .quiz-opt:active {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
  }
  .quiz-opt.selected {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
    pointer-events:none;
  }
  .quiz-response {
    margin-top:16px; font-size:clamp(15px,3vw,18px);
    color:#b03060; font-style:italic; font-weight:600;
    min-height:22px; opacity:0; transition:opacity 0.4s ease;
  }
  .quiz-response.show { opacity:1; }
  .next-btn {
    margin-top:20px; padding:15px 40px;
    border:none; border-radius:50px;
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(16px,3.5vw,18px);
    cursor:pointer; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    box-shadow:0 6px 22px rgba(232,58,122,0.38);
    touch-action:manipulation;
  }
  .next-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
  
  #mainCard {
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; pointer-events:none;
    transform:scale(0.88) translateY(30px);
    transition:opacity 0.8s 0.1s ease, transform 0.8s 0.1s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mainCard.show { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
  
  /* Increased max-width to 700px */
  .card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,7vw,60px) clamp(30px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .short-joke {
    font-size:clamp(12px,2.5vw,14px); color:var(--pink-deep);
    font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
    background:rgba(255,107,168,0.12);
    display:inline-block; padding:8px 16px; border-radius:20px;
    margin-bottom:20px; line-height:1.4;
  }
  .photo-wrap {
    position:relative; display:inline-block; margin-bottom:24px;
  }
  .photo-wrap::before {
    content:''; position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8);
    animation:spinRing 4s linear infinite; z-index:-1; opacity:0.7;
  }
  @keyframes spinRing { to { transform:rotate(360deg); } }
  
  /* Increased photo size significantly */
  .photo {
    width:clamp(150px,35vw,220px); height:clamp(150px,35vw,220px);
    border-radius:50%; object-fit:cover; object-position:center top;
    border:4px solid white; display:block; position:relative; z-index:1;
  }
  .photo-cats {
    position:absolute; font-size:clamp(20px,4vw,28px);
    animation:orbitCat 5s linear infinite; top:50%; left:50%; transform-origin:0 0;
  }
  /* Adjusted orbit to match larger photo */
  @keyframes orbitCat {
    from { transform:rotate(0deg) translateX(clamp(85px,20vw,125px)) rotate(0deg); }
    to   { transform:rotate(360deg) translateX(clamp(85px,20vw,125px)) rotate(-360deg); }
  }
  
  .question {
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,6vw,42px); font-weight:700;
    color:#c0205c; line-height:1.25; margin-bottom:12px;
  }
  .sub-line {
    font-size:clamp(14px,3vw,16px); color:#d46090;
    margin-bottom:30px; font-style:italic;
  }
  .buttons {
    display:flex; gap:16px; justify-content:center;
    align-items:center; flex-wrap:wrap;
  }
  .btn {
    padding:clamp(14px,3vw,16px) clamp(30px,7vw,46px);
    border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700;
    font-size:clamp(16px,4vw,20px); cursor:pointer; outline:none;
    min-width:120px; touch-action:manipulation;
  }
  .btn-yes {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4);
  }
  .btn-yes:active { transform:scale(0.96); }
  
  /* Added Glow and styling to No button */
  .btn-no {
    background:rgba(255,255,255,0.9); color:#d46090;
    border:2px solid var(--pink-hot);
    box-shadow:0 6px 24px rgba(232,58,122,0.4);
    transition: transform 0.1s;
  }
  
  .toast {
    display:none; position:fixed;
    bottom:max(28px,env(safe-area-inset-bottom,28px));
    left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#c0205c,#e8507a);
    color:white; padding:16px 26px; border-radius:50px;
    font-size:clamp(14px,3.5vw,16px); font-weight:600;
    box-shadow:0 8px 28px rgba(192,32,92,0.4);
    z-index:999; width:88%; max-width:380px; text-align:center;
    animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes toastIn {
    from { opacity:0;transform:translateX(-50%) translateY(20px); }
    to   { opacity:1;transform:translateX(-50%) translateY(0); }
  }
  .yes-overlay {
    display:none; position:fixed; inset:0;
    background:linear-gradient(135deg,rgba(255,228,240,0.97),rgba(255,182,215,0.97));
    z-index:500; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:clamp(20px,6vw,40px);
    backdrop-filter:blur(12px); overflow-y:auto;
  }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s ease both; }
  @keyframes overlayIn {
    from { opacity:0;transform:scale(1.06); }
    to   { opacity:1;transform:scale(1); }
  }
  .yes-big-cats {
    font-size:clamp(46px,10vw,64px); margin-bottom:16px;
    animation:bounceCats 0.8s ease both; letter-spacing:4px;
  }
  @keyframes bounceCats {
    0%   { transform:scale(0) rotate(-15deg);opacity:0; }
    60%  { transform:scale(1.2) rotate(5deg);opacity:1; }
    100% { transform:scale(1) rotate(0);opacity:1; }
  }
  .yes-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(30px,7vw,54px); color:#c0205c; font-weight:700;
    margin-bottom:14px; animation:fadeSlideIn 0.6s 0.3s ease both; opacity:0;
  }
  .yes-message {
    font-size:clamp(16px,3.5vw,20px); color:#a0305a; max-width:500px;
    line-height:1.8; font-weight:500;
    animation:fadeSlideIn 0.6s 0.6s ease both; opacity:0; margin-bottom:18px;
  }
  .yes-sign {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(16px,4vw,20px); color:var(--pink-deep);
    animation:fadeSlideIn 0.6s 0.9s ease both; opacity:0;
  }
  @keyframes fadeSlideIn {
    0%   { opacity:0;transform:translateY(16px); }
    100% { opacity:1;transform:translateY(0); }
  }
  .confetti-piece {
    position:fixed; pointer-events:none; z-index:600;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg);opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg);opacity:0.2; }
  }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>
<div class="toast" id="toast">😔 I am an idiot… I will try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you are the one I keep thinking about.<br><br>
    You are cute, you are funny, and yes — even the fact that you are pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I will make it worth it. 💗
  </div>
  <div class="yes-sign">— Yours, always 🐾</div>
</div>

<div class="screen" id="envelopeScreen">
  <div class="env-label">Someone left you a secret letter… 🌸<br>tap to open it</div>
  <div class="envelope-wrap" id="envelopeBtn" onclick="openEnvelope()">
    <svg style="width:min(300px,72vw);height:auto" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g>
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18">🐱</text>
    </svg>
  </div>
  <div class="click-hint">✦ tap to open ✦</div>
</div>

<div class="screen gone" id="quizScreen">
  <div class="quiz-card">
    <div class="progress-dots" id="progressDots"></div>
    <div class="quiz-emoji" id="quizEmoji"></div>
    <div class="quiz-q" id="quizQ"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <div class="quiz-response" id="quizResponse"></div>
    <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next ✨</button>
  </div>
</div>

<div id="mainCard">
  <div class="card">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    <div class="photo-wrap">
      <img class="photo" src="WhatsApp Image 2026-05-29 at 16.11.14.jpeg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>

    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>

    <div class="buttons">
      <button class="btn btn-yes" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onclick="handleNoInteraction()" onmouseenter="handleNoInteraction()">No 😢</button>
    </div>
  </div>
</div>

<script>
  var questions = [
    {
      emoji: "🐱",
      q: "Be honest... cats or dogs?",
      opts: ["Cats, obviously", "Dogs... sorry", "Both but cats more", "Whatever you like"],
      responses: [
        "Correct answer. We are going to get along just fine. 😌",
        "Bold choice. We can still work on this. 🐱",
        "That is the right spirit. Cats first, always. 💗",
        "Smooth. Very smooth. 😏"
      ]
    },
    {
      emoji: "📏",
      q: "On a scale of 1 to 10, how tall do you think you are? Be honest 👀",
      opts: ["10/10, perfectly tall!", "Maybe a 7...", "Okay fine, like a 5 😭", "Height is just a number 🙄"],
      responses: [
        "Adorable delusion. Truly. 💗",
        "Sure. Absolutely. We believe you. 😌",
        "FINALLY. Honesty. We love that. 🐾",
        "A philosopher AND pocket-sized. Rare combo. ✨"
      ]
    },
    {
      emoji: "💌",
      q: "If someone had a crush on you, what would be the cutest way to tell you?",
      opts: ["A handwritten letter 💌", "A whole website just for me 🌸", "Just say it already! 😤", "Surprise me 🎀"],
      responses: [
        "Great taste. Very classic. Very you. 💗",
        "Funny you should say that... 👀✨",
        "Okay okay, here goes nothing then 💗",
        "Plot twist: you are about to find out. 🐱"
      ]
    }
  ];

  var current = 0;

  function rand(a, b) { return Math.random() * (b - a) + a; }

  // BG FLOATIES
  var bgLayer = document.getElementById("bgLayer");
  var hearts = ["💗","💕","💓","💖","🌸","✨"];
  var cats   = ["🐱","🐾","😺","😸","🐈"];
  for (var i = 0; i < 14; i++) {
    var b = document.createElement("div"); b.className = "bubble";
    var s = rand(30, 100);
    b.style.cssText = "width:" + s + "px;height:" + s + "px;left:" + rand(0,100) + "%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:" + rand(9,18) + "s;animation-delay:-" + rand(0,18) + "s;";
    bgLayer.appendChild(b);
  }
  for (var i = 0; i < 10; i++) {
    var h = document.createElement("span"); h.className = "heart-float";
    h.textContent = hearts[Math.floor(rand(0, hearts.length))];
    h.style.cssText = "left:" + rand(2,93) + "%;top:" + rand(5,88) + "%;animation-duration:" + rand(4,9) + "s;animation-delay:-" + rand(0,9) + "s;";
    bgLayer.appendChild(h);
  }
  for (var i = 0; i < 8; i++) {
    var c = document.createElement("span"); c.className = "cat-bg";
    c.textContent = cats[Math.floor(rand(0, cats.length))];
    c.style.cssText = "left:" + rand(2,90) + "%;top:" + rand(5,86) + "%;animation-duration:" + rand(5,11) + "s;animation-delay:-" + rand(0,11) + "s;";
    bgLayer.appendChild(c);
  }

  // ENVELOPE
  function openEnvelope() {
    var env = document.getElementById("envelopeScreen");
    env.classList.add("hide");
    setTimeout(function() {
      env.classList.add("gone");
      startQuiz();
    }, 650);
  }

  function startQuiz() {
    var qs = document.getElementById("quizScreen");
    qs.classList.remove("gone");
    var dots = document.getElementById("progressDots");
    dots.innerHTML = "";
    for (var i = 0; i < questions.length; i++) {
      var d = document.createElement("div");
      d.className = "dot" + (i === 0 ? " active" : "");
      d.id = "dot" + i;
      dots.appendChild(d);
    }
    renderQuestion(0);
  }

  function renderQuestion(idx) {
    var q = questions[idx];
    var emoji = document.getElementById("quizEmoji");
    var qEl   = document.getElementById("quizQ");
    var opts  = document.getElementById("quizOptions");
    var resp  = document.getElementById("quizResponse");
    var next  = document.getElementById("nextBtn");

    emoji.style.animation = "none";
    qEl.style.animation   = "none";
    opts.style.animation  = "none";
    void emoji.offsetWidth;
    emoji.style.animation = "";
    qEl.style.animation   = "";
    opts.style.animation  = "";

    emoji.textContent = q.emoji;
    qEl.textContent   = q.q;
    resp.textContent  = "";
    resp.classList.remove("show");
    next.classList.remove("show");

    opts.innerHTML = "";
    q.opts.forEach(function(opt, i) {
      var btn = document.createElement("button");
      btn.className   = "quiz-opt";
      btn.textContent = opt;
      btn.onclick     = function() { selectOpt(i, btn); };
      opts.appendChild(btn);
    });
  }

  function selectOpt(i, btn) {
    document.querySelectorAll(".quiz-opt").forEach(function(b) { b.classList.remove("selected"); });
    btn.classList.add("selected");
    var resp = document.getElementById("quizResponse");
    resp.textContent = questions[current].responses[i];
    resp.classList.add("show");
    var next = document.getElementById("nextBtn");
    var isLast = current === questions.length - 1;
    next.textContent = isLast ? "Okay I am ready... 💗" : "Next ✨";
    next.classList.add("show");
  }

  function nextQuestion() {
    document.getElementById("dot" + current).classList.remove("active");
    document.getElementById("dot" + current).classList.add("done");
    current++;
    if (current < questions.length) {
      document.getElementById("dot" + current).classList.add("active");
      renderQuestion(current);
    } else {
      var qs = document.getElementById("quizScreen");
      qs.classList.add("hide");
      setTimeout(function() {
        qs.classList.add("gone");
        document.getElementById("mainCard").classList.add("show");
      }, 650);
    }
  }

  // NO BUTTON RUNAWAY LOGIC
  var noBtn = document.getElementById("noBtn");
  var noRunCount = 0; // Tracks how many times it has run away

  function teleportNo() {
    noBtn.style.position = "fixed";
    noBtn.style.zIndex   = "200";
    var m  = 40; // Keeps it away from edges
    var bw = noBtn.offsetWidth  || 100;
    var bh = noBtn.offsetHeight || 44;
    var maxX = window.innerWidth - bw - m;
    var maxY = window.innerHeight - bh - m;
    noBtn.style.left = rand(m, maxX) + "px";
    noBtn.style.top  = rand(m, maxY) + "px";
  }

  function handleNoInteraction() {
    if (noRunCount < 2) {
      // Run away for the first two interactions (clicks or hovers)
      teleportNo();
      noRunCount++;
    } else {
      // On the third interaction, stay still and show the message
      var t = document.getElementById("toast");
      t.style.display = "block";
      clearTimeout(window._tt);
      window._tt = setTimeout(function() { t.style.display = "none"; }, 3800);
    }
  }

  // YES
  function handleYes() {
    launchConfetti();
    setTimeout(function() { document.getElementById("yesOverlay").classList.add("active"); }, 300);
  }

  // CONFETTI
  var confettiColors = ["#ff6fa8","#ffb3d1","#ff3d7f","#ffd6eb","#e8205c","#fff","#ffec99"];
  var confettiEmoji  = ["🐱","💗","🌸","✨","💕","🐾"];
  function launchConfetti() {
    var count = window.innerWidth < 480 ? 50 : 80;
    for (var i = 0; i < count; i++) {
      (function(i) {
        setTimeout(function() {
          var el = document.createElement("div");
          if (Math.random() < 0.35) {
            el.textContent = confettiEmoji[Math.floor(rand(0, confettiEmoji.length))];
            el.style.cssText = "position:fixed;font-size:" + rand(16,30) + "px;left:" + rand(0,100) + "%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall " + rand(2,4) + "s linear forwards;";
          } else {
            el.className = "confetti-piece";
            el.style.cssText = "left:" + rand(0,100) + "%;top:-20px;background:" + confettiColors[Math.floor(rand(0,confettiColors.length))] + ";width:" + rand(6,12) + "px;height:" + rand(6,12) + "px;animation-duration:" + rand(2.5,4.5) + "s;border-radius:" + (Math.random() > 0.5 ? "50%" : "2px") + ";";
          }
          document.body.appendChild(el);
          setTimeout(function() { el.remove(); }, 5000);
        }, i * 45);
      })(i);
    }
  }
</script>
</body>
</html>
You said

bro in 4 click it should vanish and i told u make a running animation

Gemini said

Ah, I got you! Teleporting instantly isn't the same as actually seeing it sprint away from the mouse.

I've updated the logic so the "No" button will physically glide/run across the screen when she tries to touch it.

Here is exactly how it works now:

  1. The first 3 times her mouse touches it, it visibly runs away to a random part of the screen.

  2. On the 4th time, it runs away one last time, completely fades out into thin air so she can't click it anymore, and drops the "I am an idiot" toast message.

Here is the fully updated code with the running animation and the 4-click vanish logic:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0;
    --pink-mid: #ffb3d1;
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
    --white-glass: rgba(255,255,255,0.55);
    --shadow: rgba(232,58,122,0.18);
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body {
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height:100vh; min-height:100dvh;
    overflow:hidden; position:relative;
    touch-action:manipulation;
  }
  .bg-layer { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
  .bubble { position:absolute;border-radius:50%;opacity:0.22;animation:floatUp linear infinite; }
  .heart-float { position:absolute;font-size:clamp(14px,3vw,32px);animation:floatDiag ease-in-out infinite;opacity:0.4; }
  .cat-bg { position:absolute;font-size:clamp(16px,3.5vw,38px);animation:floatCat ease-in-out infinite;opacity:0.32; }
  @keyframes floatUp {
    0% { transform:translateY(110vh) scale(0.7) rotate(0deg);opacity:0; }
    10% { opacity:0.22; } 90% { opacity:0.22; }
    100% { transform:translateY(-15vh) scale(1.1) rotate(360deg);opacity:0; }
  }
  @keyframes floatDiag {
    0%,100% { transform:translate(0,0) rotate(-5deg) scale(1); }
    33% { transform:translate(14px,-18px) rotate(8deg) scale(1.08); }
    66% { transform:translate(-10px,-30px) rotate(-4deg) scale(0.95); }
  }
  @keyframes floatCat {
    0%,100% { transform:translate(0,0) rotate(-3deg); }
    25% { transform:translate(16px,-12px) rotate(5deg); }
    50% { transform:translate(6px,-22px) rotate(-2deg); }
    75% { transform:translate(-10px,-10px) rotate(4deg); }
  }
  .screen {
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px; gap:20px;
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .screen.hide {
    opacity:0; transform:scale(1.06) translateY(-24px);
    pointer-events:none;
  }
  .screen.gone { display:none; }
  .env-label {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(18px,4.5vw,26px); color:#b03060;
    text-align:center; line-height:1.5;
    animation:gentlePulse 2.4s ease-in-out infinite;
  }
  @keyframes gentlePulse {
    0%,100% { opacity:0.7;transform:translateY(0); }
    50% { opacity:1;transform:translateY(-4px); }
  }
  .envelope-wrap {
    cursor:pointer;
    filter:drop-shadow(0 12px 40px rgba(232,58,122,0.28));
    transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    user-select:none; padding:10px;
    animation:wiggleHint 0.6s 2.2s ease both;
  }
  .envelope-wrap:active { transform:scale(0.95); }
  @keyframes wiggleHint {
    0% { transform:rotate(0); }
    20% { transform:rotate(-6deg) scale(1.04); }
    40% { transform:rotate(6deg) scale(1.04); }
    60% { transform:rotate(-4deg); }
    80% { transform:rotate(3deg); }
    100% { transform:rotate(0); }
  }
  .env-body { fill:#fff0f8;stroke:#ffb3d1;stroke-width:2.5; }
  .env-flap { fill:#ffd6eb;stroke:#ffb3d1;stroke-width:2.5; }
  .env-seal { fill:#ff6fa8; }
  .env-line { stroke:#ffc2e0;stroke-width:2;stroke-linecap:round; }
  .click-hint {
    font-size:clamp(12px,3vw,15px); color:#d46090;
    letter-spacing:0.12em; text-transform:uppercase;
    font-weight:600; opacity:0;
    animation:fadeInHint 0.8s 3s ease forwards;
  }
  @keyframes fadeInHint { to { opacity:0.7; } }
  
  #quizScreen { gap:0; padding:20px; }
  
  .quiz-card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .progress-dots {
    display:flex; gap:8px; justify-content:center; margin-bottom:24px;
  }
  .dot {
    width:12px; height:12px; border-radius:50%;
    background:var(--pink-mid); transition:background 0.3s, transform 0.3s;
  }
  .dot.active { background:var(--pink-deep); transform:scale(1.3); }
  .dot.done { background:var(--pink-hot); }
  .quiz-emoji {
    font-size:clamp(46px,10vw,64px); margin-bottom:12px;
    animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes popIn {
    from { transform:scale(0) rotate(-10deg);opacity:0; }
    to   { transform:scale(1) rotate(0);opacity:1; }
  }
  .quiz-q {
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,4.5vw,28px);
    color:#c0205c; font-weight:700;
    line-height:1.35; margin-bottom:24px;
    animation:fadeUp 0.5s 0.1s ease both; opacity:0;
  }
  @keyframes fadeUp {
    from { opacity:0;transform:translateY(12px); }
    to   { opacity:1;transform:translateY(0); }
  }
  .quiz-options {
    display:flex; flex-direction:column; gap:12px;
    animation:fadeUp 0.5s 0.2s ease both; opacity:0;
  }
  .quiz-opt {
    padding:15px 20px; border-radius:50px;
    border:2px solid var(--pink-mid);
    background:rgba(255,255,255,0.9);
    color:#c0205c; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(15px,3.5vw,18px);
    cursor:pointer; transition:all 0.2s ease;
    touch-action:manipulation; text-align:center;
  }
  .quiz-opt:hover, .quiz-opt:active {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
  }
  .quiz-opt.selected {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
    pointer-events:none;
  }
  .quiz-response {
    margin-top:16px; font-size:clamp(15px,3vw,18px);
    color:#b03060; font-style:italic; font-weight:600;
    min-height:22px; opacity:0; transition:opacity 0.4s ease;
  }
  .quiz-response.show { opacity:1; }
  .next-btn {
    margin-top:20px; padding:15px 40px;
    border:none; border-radius:50px;
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(16px,3.5vw,18px);
    cursor:pointer; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    box-shadow:0 6px 22px rgba(232,58,122,0.38);
    touch-action:manipulation;
  }
  .next-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
  
  #mainCard {
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; pointer-events:none;
    transform:scale(0.88) translateY(30px);
    transition:opacity 0.8s 0.1s ease, transform 0.8s 0.1s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mainCard.show { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
  
  .card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,7vw,60px) clamp(30px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .short-joke {
    font-size:clamp(12px,2.5vw,14px); color:var(--pink-deep);
    font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
    background:rgba(255,107,168,0.12);
    display:inline-block; padding:8px 16px; border-radius:20px;
    margin-bottom:20px; line-height:1.4;
  }
  .photo-wrap {
    position:relative; display:inline-block; margin-bottom:24px;
  }
  .photo-wrap::before {
    content:''; position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8);
    animation:spinRing 4s linear infinite; z-index:-1; opacity:0.7;
  }
  @keyframes spinRing { to { transform:rotate(360deg); } }
  
  .photo {
    width:clamp(150px,35vw,220px); height:clamp(150px,35vw,220px);
    border-radius:50%; object-fit:cover; object-position:center top;
    border:4px solid white; display:block; position:relative; z-index:1;
  }
  .photo-cats {
    position:absolute; font-size:clamp(20px,4vw,28px);
    animation:orbitCat 5s linear infinite; top:50%; left:50%; transform-origin:0 0;
  }
  @keyframes orbitCat {
    from { transform:rotate(0deg) translateX(clamp(85px,20vw,125px)) rotate(0deg); }
    to   { transform:rotate(360deg) translateX(clamp(85px,20vw,125px)) rotate(-360deg); }
  }
  
  .question {
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,6vw,42px); font-weight:700;
    color:#c0205c; line-height:1.25; margin-bottom:12px;
  }
  .sub-line {
    font-size:clamp(14px,3vw,16px); color:#d46090;
    margin-bottom:30px; font-style:italic;
  }
  .buttons {
    display:flex; gap:16px; justify-content:center;
    align-items:center; flex-wrap:wrap;
  }
  .btn {
    padding:clamp(14px,3vw,16px) clamp(30px,7vw,46px);
    border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700;
    font-size:clamp(16px,4vw,20px); cursor:pointer; outline:none;
    min-width:120px; touch-action:manipulation;
  }
  .btn-yes {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4);
  }
  .btn-yes:active { transform:scale(0.96); }
  
  /* Running Animation applied to No Button */
  .btn-no {
    background:rgba(255,255,255,0.9); color:#d46090;
    border:2px solid var(--pink-hot);
    box-shadow:0 6px 24px rgba(232,58,122,0.4);
    /* Transition creates the visible running/gliding effect */
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                opacity 0.4s ease;
  }
  
  .toast {
    display:none; position:fixed;
    bottom:max(28px,env(safe-area-inset-bottom,28px));
    left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#c0205c,#e8507a);
    color:white; padding:16px 26px; border-radius:50px;
    font-size:clamp(14px,3.5vw,16px); font-weight:600;
    box-shadow:0 8px 28px rgba(192,32,92,0.4);
    z-index:999; width:88%; max-width:380px; text-align:center;
    animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes toastIn {
    from { opacity:0;transform:translateX(-50%) translateY(20px); }
    to   { opacity:1;transform:translateX(-50%) translateY(0); }
  }
  .yes-overlay {
    display:none; position:fixed; inset:0;
    background:linear-gradient(135deg,rgba(255,228,240,0.97),rgba(255,182,215,0.97));
    z-index:500; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:clamp(20px,6vw,40px);
    backdrop-filter:blur(12px); overflow-y:auto;
  }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s ease both; }
  @keyframes overlayIn {
    from { opacity:0;transform:scale(1.06); }
    to   { opacity:1;transform:scale(1); }
  }
  .yes-big-cats {
    font-size:clamp(46px,10vw,64px); margin-bottom:16px;
    animation:bounceCats 0.8s ease both; letter-spacing:4px;
  }
  @keyframes bounceCats {
    0%   { transform:scale(0) rotate(-15deg);opacity:0; }
    60%  { transform:scale(1.2) rotate(5deg);opacity:1; }
    100% { transform:scale(1) rotate(0);opacity:1; }
  }
  .yes-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(30px,7vw,54px); color:#c0205c; font-weight:700;
    margin-bottom:14px; animation:fadeSlideIn 0.6s 0.3s ease both; opacity:0;
  }
  .yes-message {
    font-size:clamp(16px,3.5vw,20px); color:#a0305a; max-width:500px;
    line-height:1.8; font-weight:500;
    animation:fadeSlideIn 0.6s 0.6s ease both; opacity:0; margin-bottom:18px;
  }
  .yes-sign {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(16px,4vw,20px); color:var(--pink-deep);
    animation:fadeSlideIn 0.6s 0.9s ease both; opacity:0;
  }
  @keyframes fadeSlideIn {
    0%   { opacity:0;transform:translateY(16px); }
    100% { opacity:1;transform:translateY(0); }
  }
  .confetti-piece {
    position:fixed; pointer-events:none; z-index:600;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg);opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg);opacity:0.2; }
  }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>
<div class="toast" id="toast">😔 I am an idiot… I will try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you are the one I keep thinking about.<br><br>
    You are cute, you are funny, and yes — even the fact that you are pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I will make it worth it. 💗
  </div>
  <div class="yes-sign">— Yours, always 🐾</div>
</div>

<div class="screen" id="envelopeScreen">
  <div class="env-label">Someone left you a secret letter… 🌸<br>tap to open it</div>
  <div class="envelope-wrap" id="envelopeBtn" onclick="openEnvelope()">
    <svg style="width:min(300px,72vw);height:auto" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g>
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18">🐱</text>
    </svg>
  </div>
  <div class="click-hint">✦ tap to open ✦</div>
</div>

<div class="screen gone" id="quizScreen">
  <div class="quiz-card">
    <div class="progress-dots" id="progressDots"></div>
    <div class="quiz-emoji" id="quizEmoji"></div>
    <div class="quiz-q" id="quizQ"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <div class="quiz-response" id="quizResponse"></div>
    <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next ✨</button>
  </div>
</div>

<div id="mainCard">
  <div class="card">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    <div class="photo-wrap">
      <img class="photo" src="WhatsApp Image 2026-05-29 at 16.11.14.jpeg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>

    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>

    <div class="buttons">
      <button class="btn btn-yes" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onmouseenter="runAway()" ontouchstart="runAway()">No 😢</button>
    </div>
  </div>
</div>

<script>
  var questions = [
    {
      emoji: "🐱",
      q: "Be honest... cats or dogs?",
      opts: ["Cats, obviously", "Dogs... sorry", "Both but cats more", "Whatever you like"],
      responses: [
        "Correct answer. We are going to get along just fine. 😌",
        "Bold choice. We can still work on this. 🐱",
        "That is the right spirit. Cats first, always. 💗",
        "Smooth. Very smooth. 😏"
      ]
    },
    {
      emoji: "📏",
      q: "On a scale of 1 to 10, how tall do you think you are? Be honest 👀",
      opts: ["10/10, perfectly tall!", "Maybe a 7...", "Okay fine, like a 5 😭", "Height is just a number 🙄"],
      responses: [
        "Adorable delusion. Truly. 💗",
        "Sure. Absolutely. We believe you. 😌",
        "FINALLY. Honesty. We love that. 🐾",
        "A philosopher AND pocket-sized. Rare combo. ✨"
      ]
    },
    {
      emoji: "💌",
      q: "If someone had a crush on you, what would be the cutest way to tell you?",
      opts: ["A handwritten letter 💌", "A whole website just for me 🌸", "Just say it already! 😤", "Surprise me 🎀"],
      responses: [
        "Great taste. Very classic. Very you. 💗",
        "Funny you should say that... 👀✨",
        "Okay okay, here goes nothing then 💗",
        "Plot twist: you are about to find out. 🐱"
      ]
    }
  ];

  var current = 0;

  function rand(a, b) { return Math.random() * (b - a) + a; }

  // BG FLOATIES
  var bgLayer = document.getElementById("bgLayer");
  var hearts = ["💗","💕","💓","💖","🌸","✨"];
  var cats   = ["🐱","🐾","😺","😸","🐈"];
  for (var i = 0; i < 14; i++) {
    var b = document.createElement("div"); b.className = "bubble";
    var s = rand(30, 100);
    b.style.cssText = "width:" + s + "px;height:" + s + "px;left:" + rand(0,100) + "%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:" + rand(9,18) + "s;animation-delay:-" + rand(0,18) + "s;";
    bgLayer.appendChild(b);
  }
  for (var i = 0; i < 10; i++) {
    var h = document.createElement("span"); h.className = "heart-float";
    h.textContent = hearts[Math.floor(rand(0, hearts.length))];
    h.style.cssText = "left:" + rand(2,93) + "%;top:" + rand(5,88) + "%;animation-duration:" + rand(4,9) + "s;animation-delay:-" + rand(0,9) + "s;";
    bgLayer.appendChild(h);
  }
  for (var i = 0; i < 8; i++) {
    var c = document.createElement("span"); c.className = "cat-bg";
    c.textContent = cats[Math.floor(rand(0, cats.length))];
    c.style.cssText = "left:" + rand(2,90) + "%;top:" + rand(5,86) + "%;animation-duration:" + rand(5,11) + "s;animation-delay:-" + rand(0,11) + "s;";
    bgLayer.appendChild(c);
  }

  // ENVELOPE
  function openEnvelope() {
    var env = document.getElementById("envelopeScreen");
    env.classList.add("hide");
    setTimeout(function() {
      env.classList.add("gone");
      startQuiz();
    }, 650);
  }

  function startQuiz() {
    var qs = document.getElementById("quizScreen");
    qs.classList.remove("gone");
    var dots = document.getElementById("progressDots");
    dots.innerHTML = "";
    for (var i = 0; i < questions.length; i++) {
      var d = document.createElement("div");
      d.className = "dot" + (i === 0 ? " active" : "");
      d.id = "dot" + i;
      dots.appendChild(d);
    }
    renderQuestion(0);
  }

  function renderQuestion(idx) {
    var q = questions[idx];
    var emoji = document.getElementById("quizEmoji");
    var qEl   = document.getElementById("quizQ");
    var opts  = document.getElementById("quizOptions");
    var resp  = document.getElementById("quizResponse");
    var next  = document.getElementById("nextBtn");

    emoji.style.animation = "none";
    qEl.style.animation   = "none";
    opts.style.animation  = "none";
    void emoji.offsetWidth;
    emoji.style.animation = "";
    qEl.style.animation   = "";
    opts.style.animation  = "";

    emoji.textContent = q.emoji;
    qEl.textContent   = q.q;
    resp.textContent  = "";
    resp.classList.remove("show");
    next.classList.remove("show");

    opts.innerHTML = "";
    q.opts.forEach(function(opt, i) {
      var btn = document.createElement("button");
      btn.className   = "quiz-opt";
      btn.textContent = opt;
      btn.onclick     = function() { selectOpt(i, btn); };
      opts.appendChild(btn);
    });
  }

  function selectOpt(i, btn) {
    document.querySelectorAll(".quiz-opt").forEach(function(b) { b.classList.remove("selected"); });
    btn.classList.add("selected");
    var resp = document.getElementById("quizResponse");
    resp.textContent = questions[current].responses[i];
    resp.classList.add("show");
    var next = document.getElementById("nextBtn");
    var isLast = current === questions.length - 1;
    next.textContent = isLast ? "Okay I am ready... 💗" : "Next ✨";
    next.classList.add("show");
  }

  function nextQuestion() {
    document.getElementById("dot" + current).classList.remove("active");
    document.getElementById("dot" + current).classList.add("done");
    current++;
    if (current < questions.length) {
      document.getElementById("dot" + current).classList.add("active");
      renderQuestion(current);
    } else {
      var qs = document.getElementById("quizScreen");
      qs.classList.add("hide");
      setTimeout(function() {
        qs.classList.add("gone");
        document.getElementById("mainCard").classList.add("show");
      }, 650);
    }
  }

  // NO BUTTON RUNAWAY LOGIC (4 Interactions)
  var noBtn = document.getElementById("noBtn");
  var noRunCount = 0; // Tracks how many times it has run away

  function runAway() {
    if (noRunCount >= 4) return; // Stop if it has already vanished

    // On the very first interaction, lock its position relative to the window
    // so it doesn't snap abruptly from its flexbox container
    if (noRunCount === 0) {
      var rect = noBtn.getBoundingClientRect();
      noBtn.style.position = "fixed";
      noBtn.style.left = rect.left + "px";
      noBtn.style.top = rect.top + "px";
      noBtn.style.zIndex = "200";
    }

    // A tiny timeout ensures the browser registers the fixed position 
    // before applying the new running coordinates, making it glide smoothly.
    setTimeout(function() {
      var m = 40; // margin buffer
      var maxX = window.innerWidth - noBtn.offsetWidth - m;
      var maxY = window.innerHeight - noBtn.offsetHeight - m;
      
      noBtn.style.left = rand(m, maxX) + "px";
      noBtn.style.top  = rand(m, maxY) + "px";
      noRunCount++;

      // If it has run 4 times, make it vanish and show the toast
      if (noRunCount === 4) {
        setTimeout(function() {
          noBtn.style.opacity = "0";
          noBtn.style.pointerEvents = "none";
          var t = document.getElementById("toast");
          t.style.display = "block";
          clearTimeout(window._tt);
          window._tt = setTimeout(function() { t.style.display = "none"; }, 3800);
        }, 250); // small delay to let it finish its last run before vanishing
      }
    }, 10);
  }

  // YES
  function handleYes() {
    launchConfetti();
    setTimeout(function() { document.getElementById("yesOverlay").classList.add("active"); }, 300);
  }

  // CONFETTI
  var confettiColors = ["#ff6fa8","#ffb3d1","#ff3d7f","#ffd6eb","#e8205c","#fff","#ffec99"];
  var confettiEmoji  = ["🐱","💗","🌸","✨","💕","🐾"];
  function launchConfetti() {
    var count = window.innerWidth < 480 ? 50 : 80;
    for (var i = 0; i < count; i++) {
      (function(i) {
        setTimeout(function() {
          var el = document.createElement("div");
          if (Math.random() < 0.35) {
            el.textContent = confettiEmoji[Math.floor(rand(0, confettiEmoji.length))];
            el.style.cssText = "position:fixed;font-size:" + rand(16,30) + "px;left:" + rand(0,100) + "%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall " + rand(2,4) + "s linear forwards;";
          } else {
            el.className = "confetti-piece";
            el.style.cssText = "left:" + rand(0,100) + "%;top:-20px;background:" + confettiColors[Math.floor(rand(0,confettiColors.length))] + ";width:" + rand(6,12) + "px;height:" + rand(6,12) + "px;animation-duration:" + rand(2.5,4.5) + "s;border-radius:" + (Math.random() > 0.5 ? "50%" : "2px") + ";";
          }
          document.body.appendChild(el);
          setTimeout(function() { el.remove(); }, 5000);
        }, i * 45);
      })(i);
    }
  }
</script>
</body>
</html>
You said

it instintly vanished make the running/gliding animation slow not too slow but in a fun manner

Gemini said

Gotcha, bro! I know exactly why it looked like it instantly vanished. When the browser switches the button from its normal grid position to a "fixed" position so it can move around the screen, it sometimes skips the very first animation frame, making it look like a teleport glitch.

I fixed that by forcing the browser to read its position before it moves. I also increased the glide time from a hyper-fast 0.3s to a much smoother, playful 0.6s. Now, it will literally glide across the screen like it's dodging her mouse, and on the 4th dodge, it will finish its slide and then fade out into thin air.

Here is the updated code. Just overwrite your file with this:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0;
    --pink-mid: #ffb3d1;
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
    --white-glass: rgba(255,255,255,0.55);
    --shadow: rgba(232,58,122,0.18);
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body {
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height:100vh; min-height:100dvh;
    overflow:hidden; position:relative;
    touch-action:manipulation;
  }
  .bg-layer { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
  .bubble { position:absolute;border-radius:50%;opacity:0.22;animation:floatUp linear infinite; }
  .heart-float { position:absolute;font-size:clamp(14px,3vw,32px);animation:floatDiag ease-in-out infinite;opacity:0.4; }
  .cat-bg { position:absolute;font-size:clamp(16px,3.5vw,38px);animation:floatCat ease-in-out infinite;opacity:0.32; }
  @keyframes floatUp {
    0% { transform:translateY(110vh) scale(0.7) rotate(0deg);opacity:0; }
    10% { opacity:0.22; } 90% { opacity:0.22; }
    100% { transform:translateY(-15vh) scale(1.1) rotate(360deg);opacity:0; }
  }
  @keyframes floatDiag {
    0%,100% { transform:translate(0,0) rotate(-5deg) scale(1); }
    33% { transform:translate(14px,-18px) rotate(8deg) scale(1.08); }
    66% { transform:translate(-10px,-30px) rotate(-4deg) scale(0.95); }
  }
  @keyframes floatCat {
    0%,100% { transform:translate(0,0) rotate(-3deg); }
    25% { transform:translate(16px,-12px) rotate(5deg); }
    50% { transform:translate(6px,-22px) rotate(-2deg); }
    75% { transform:translate(-10px,-10px) rotate(4deg); }
  }
  .screen {
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px; gap:20px;
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .screen.hide {
    opacity:0; transform:scale(1.06) translateY(-24px);
    pointer-events:none;
  }
  .screen.gone { display:none; }
  .env-label {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(18px,4.5vw,26px); color:#b03060;
    text-align:center; line-height:1.5;
    animation:gentlePulse 2.4s ease-in-out infinite;
  }
  @keyframes gentlePulse {
    0%,100% { opacity:0.7;transform:translateY(0); }
    50% { opacity:1;transform:translateY(-4px); }
  }
  .envelope-wrap {
    cursor:pointer;
    filter:drop-shadow(0 12px 40px rgba(232,58,122,0.28));
    transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    user-select:none; padding:10px;
    animation:wiggleHint 0.6s 2.2s ease both;
  }
  .envelope-wrap:active { transform:scale(0.95); }
  @keyframes wiggleHint {
    0% { transform:rotate(0); }
    20% { transform:rotate(-6deg) scale(1.04); }
    40% { transform:rotate(6deg) scale(1.04); }
    60% { transform:rotate(-4deg); }
    80% { transform:rotate(3deg); }
    100% { transform:rotate(0); }
  }
  .env-body { fill:#fff0f8;stroke:#ffb3d1;stroke-width:2.5; }
  .env-flap { fill:#ffd6eb;stroke:#ffb3d1;stroke-width:2.5; }
  .env-seal { fill:#ff6fa8; }
  .env-line { stroke:#ffc2e0;stroke-width:2;stroke-linecap:round; }
  .click-hint {
    font-size:clamp(12px,3vw,15px); color:#d46090;
    letter-spacing:0.12em; text-transform:uppercase;
    font-weight:600; opacity:0;
    animation:fadeInHint 0.8s 3s ease forwards;
  }
  @keyframes fadeInHint { to { opacity:0.7; } }
  
  #quizScreen { gap:0; padding:20px; }
  
  .quiz-card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .progress-dots {
    display:flex; gap:8px; justify-content:center; margin-bottom:24px;
  }
  .dot {
    width:12px; height:12px; border-radius:50%;
    background:var(--pink-mid); transition:background 0.3s, transform 0.3s;
  }
  .dot.active { background:var(--pink-deep); transform:scale(1.3); }
  .dot.done { background:var(--pink-hot); }
  .quiz-emoji {
    font-size:clamp(46px,10vw,64px); margin-bottom:12px;
    animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes popIn {
    from { transform:scale(0) rotate(-10deg);opacity:0; }
    to   { transform:scale(1) rotate(0);opacity:1; }
  }
  .quiz-q {
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,4.5vw,28px);
    color:#c0205c; font-weight:700;
    line-height:1.35; margin-bottom:24px;
    animation:fadeUp 0.5s 0.1s ease both; opacity:0;
  }
  @keyframes fadeUp {
    from { opacity:0;transform:translateY(12px); }
    to   { opacity:1;transform:translateY(0); }
  }
  .quiz-options {
    display:flex; flex-direction:column; gap:12px;
    animation:fadeUp 0.5s 0.2s ease both; opacity:0;
  }
  .quiz-opt {
    padding:15px 20px; border-radius:50px;
    border:2px solid var(--pink-mid);
    background:rgba(255,255,255,0.9);
    color:#c0205c; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(15px,3.5vw,18px);
    cursor:pointer; transition:all 0.2s ease;
    touch-action:manipulation; text-align:center;
  }
  .quiz-opt:hover, .quiz-opt:active {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
  }
  .quiz-opt.selected {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
    pointer-events:none;
  }
  .quiz-response {
    margin-top:16px; font-size:clamp(15px,3vw,18px);
    color:#b03060; font-style:italic; font-weight:600;
    min-height:22px; opacity:0; transition:opacity 0.4s ease;
  }
  .quiz-response.show { opacity:1; }
  .next-btn {
    margin-top:20px; padding:15px 40px;
    border:none; border-radius:50px;
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(16px,3.5vw,18px);
    cursor:pointer; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    box-shadow:0 6px 22px rgba(232,58,122,0.38);
    touch-action:manipulation;
  }
  .next-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
  
  #mainCard {
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; pointer-events:none;
    transform:scale(0.88) translateY(30px);
    transition:opacity 0.8s 0.1s ease, transform 0.8s 0.1s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mainCard.show { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
  
  .card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,7vw,60px) clamp(30px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .short-joke {
    font-size:clamp(12px,2.5vw,14px); color:var(--pink-deep);
    font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
    background:rgba(255,107,168,0.12);
    display:inline-block; padding:8px 16px; border-radius:20px;
    margin-bottom:20px; line-height:1.4;
  }
  .photo-wrap {
    position:relative; display:inline-block; margin-bottom:24px;
  }
  .photo-wrap::before {
    content:''; position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8);
    animation:spinRing 4s linear infinite; z-index:-1; opacity:0.7;
  }
  @keyframes spinRing { to { transform:rotate(360deg); } }
  
  .photo {
    width:clamp(150px,35vw,220px); height:clamp(150px,35vw,220px);
    border-radius:50%; object-fit:cover; object-position:center top;
    border:4px solid white; display:block; position:relative; z-index:1;
  }
  .photo-cats {
    position:absolute; font-size:clamp(20px,4vw,28px);
    animation:orbitCat 5s linear infinite; top:50%; left:50%; transform-origin:0 0;
  }
  @keyframes orbitCat {
    from { transform:rotate(0deg) translateX(clamp(85px,20vw,125px)) rotate(0deg); }
    to   { transform:rotate(360deg) translateX(clamp(85px,20vw,125px)) rotate(-360deg); }
  }
  
  .question {
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,6vw,42px); font-weight:700;
    color:#c0205c; line-height:1.25; margin-bottom:12px;
  }
  .sub-line {
    font-size:clamp(14px,3vw,16px); color:#d46090;
    margin-bottom:30px; font-style:italic;
  }
  .buttons {
    display:flex; gap:16px; justify-content:center;
    align-items:center; flex-wrap:wrap;
  }
  .btn {
    padding:clamp(14px,3vw,16px) clamp(30px,7vw,46px);
    border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700;
    font-size:clamp(16px,4vw,20px); cursor:pointer; outline:none;
    min-width:120px; touch-action:manipulation;
  }
  .btn-yes {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4);
  }
  .btn-yes:active { transform:scale(0.96); }
  
  /* Smoother, slower gliding animation */
  .btn-no {
    background:rgba(255,255,255,0.9); color:#d46090;
    border:2px solid var(--pink-hot);
    box-shadow:0 6px 24px rgba(232,58,122,0.4);
    /* 0.6s makes it glide playfully instead of teleporting instantly */
    transition: left 0.6s ease-in-out, top 0.6s ease-in-out, opacity 0.5s ease;
  }
  
  .toast {
    display:none; position:fixed;
    bottom:max(28px,env(safe-area-inset-bottom,28px));
    left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#c0205c,#e8507a);
    color:white; padding:16px 26px; border-radius:50px;
    font-size:clamp(14px,3.5vw,16px); font-weight:600;
    box-shadow:0 8px 28px rgba(192,32,92,0.4);
    z-index:999; width:88%; max-width:380px; text-align:center;
    animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes toastIn {
    from { opacity:0;transform:translateX(-50%) translateY(20px); }
    to   { opacity:1;transform:translateX(-50%) translateY(0); }
  }
  .yes-overlay {
    display:none; position:fixed; inset:0;
    background:linear-gradient(135deg,rgba(255,228,240,0.97),rgba(255,182,215,0.97));
    z-index:500; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:clamp(20px,6vw,40px);
    backdrop-filter:blur(12px); overflow-y:auto;
  }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s ease both; }
  @keyframes overlayIn {
    from { opacity:0;transform:scale(1.06); }
    to   { opacity:1;transform:scale(1); }
  }
  .yes-big-cats {
    font-size:clamp(46px,10vw,64px); margin-bottom:16px;
    animation:bounceCats 0.8s ease both; letter-spacing:4px;
  }
  @keyframes bounceCats {
    0%   { transform:scale(0) rotate(-15deg);opacity:0; }
    60%  { transform:scale(1.2) rotate(5deg);opacity:1; }
    100% { transform:scale(1) rotate(0);opacity:1; }
  }
  .yes-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(30px,7vw,54px); color:#c0205c; font-weight:700;
    margin-bottom:14px; animation:fadeSlideIn 0.6s 0.3s ease both; opacity:0;
  }
  .yes-message {
    font-size:clamp(16px,3.5vw,20px); color:#a0305a; max-width:500px;
    line-height:1.8; font-weight:500;
    animation:fadeSlideIn 0.6s 0.6s ease both; opacity:0; margin-bottom:18px;
  }
  .yes-sign {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(16px,4vw,20px); color:var(--pink-deep);
    animation:fadeSlideIn 0.6s 0.9s ease both; opacity:0;
  }
  @keyframes fadeSlideIn {
    0%   { opacity:0;transform:translateY(16px); }
    100% { opacity:1;transform:translateY(0); }
  }
  .confetti-piece {
    position:fixed; pointer-events:none; z-index:600;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg);opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg);opacity:0.2; }
  }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>
<div class="toast" id="toast">😔 I am an idiot… I will try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you are the one I keep thinking about.<br><br>
    You are cute, you are funny, and yes — even the fact that you are pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I will make it worth it. 💗
  </div>
  <div class="yes-sign">— Yours, always 🐾</div>
</div>

<div class="screen" id="envelopeScreen">
  <div class="env-label">Someone left you a secret letter… 🌸<br>tap to open it</div>
  <div class="envelope-wrap" id="envelopeBtn" onclick="openEnvelope()">
    <svg style="width:min(300px,72vw);height:auto" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g>
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18">🐱</text>
    </svg>
  </div>
  <div class="click-hint">✦ tap to open ✦</div>
</div>

<div class="screen gone" id="quizScreen">
  <div class="quiz-card">
    <div class="progress-dots" id="progressDots"></div>
    <div class="quiz-emoji" id="quizEmoji"></div>
    <div class="quiz-q" id="quizQ"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <div class="quiz-response" id="quizResponse"></div>
    <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next ✨</button>
  </div>
</div>

<div id="mainCard">
  <div class="card">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    <div class="photo-wrap">
      <img class="photo" src="WhatsApp Image 2026-05-29 at 16.11.14.jpeg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>

    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>

    <div class="buttons">
      <button class="btn btn-yes" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onclick="runAway()" onmouseenter="runAway()">No 😢</button>
    </div>
  </div>
</div>

<script>
  var questions = [
    {
      emoji: "🐱",
      q: "Be honest... cats or dogs?",
      opts: ["Cats, obviously", "Dogs... sorry", "Both but cats more", "Whatever you like"],
      responses: [
        "Correct answer. We are going to get along just fine. 😌",
        "Bold choice. We can still work on this. 🐱",
        "That is the right spirit. Cats first, always. 💗",
        "Smooth. Very smooth. 😏"
      ]
    },
    {
      emoji: "📏",
      q: "On a scale of 1 to 10, how tall do you think you are? Be honest 👀",
      opts: ["10/10, perfectly tall!", "Maybe a 7...", "Okay fine, like a 5 😭", "Height is just a number 🙄"],
      responses: [
        "Adorable delusion. Truly. 💗",
        "Sure. Absolutely. We believe you. 😌",
        "FINALLY. Honesty. We love that. 🐾",
        "A philosopher AND pocket-sized. Rare combo. ✨"
      ]
    },
    {
      emoji: "💌",
      q: "If someone had a crush on you, what would be the cutest way to tell you?",
      opts: ["A handwritten letter 💌", "A whole website just for me 🌸", "Just say it already! 😤", "Surprise me 🎀"],
      responses: [
        "Great taste. Very classic. Very you. 💗",
        "Funny you should say that... 👀✨",
        "Okay okay, here goes nothing then 💗",
        "Plot twist: you are about to find out. 🐱"
      ]
    }
  ];

  var current = 0;

  function rand(a, b) { return Math.random() * (b - a) + a; }

  // BG FLOATIES
  var bgLayer = document.getElementById("bgLayer");
  var hearts = ["💗","💕","💓","💖","🌸","✨"];
  var cats   = ["🐱","🐾","😺","😸","🐈"];
  for (var i = 0; i < 14; i++) {
    var b = document.createElement("div"); b.className = "bubble";
    var s = rand(30, 100);
    b.style.cssText = "width:" + s + "px;height:" + s + "px;left:" + rand(0,100) + "%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:" + rand(9,18) + "s;animation-delay:-" + rand(0,18) + "s;";
    bgLayer.appendChild(b);
  }
  for (var i = 0; i < 10; i++) {
    var h = document.createElement("span"); h.className = "heart-float";
    h.textContent = hearts[Math.floor(rand(0, hearts.length))];
    h.style.cssText = "left:" + rand(2,93) + "%;top:" + rand(5,88) + "%;animation-duration:" + rand(4,9) + "s;animation-delay:-" + rand(0,9) + "s;";
    bgLayer.appendChild(h);
  }
  for (var i = 0; i < 8; i++) {
    var c = document.createElement("span"); c.className = "cat-bg";
    c.textContent = cats[Math.floor(rand(0, cats.length))];
    c.style.cssText = "left:" + rand(2,90) + "%;top:" + rand(5,86) + "%;animation-duration:" + rand(5,11) + "s;animation-delay:-" + rand(0,11) + "s;";
    bgLayer.appendChild(c);
  }

  // ENVELOPE
  function openEnvelope() {
    var env = document.getElementById("envelopeScreen");
    env.classList.add("hide");
    setTimeout(function() {
      env.classList.add("gone");
      startQuiz();
    }, 650);
  }

  function startQuiz() {
    var qs = document.getElementById("quizScreen");
    qs.classList.remove("gone");
    var dots = document.getElementById("progressDots");
    dots.innerHTML = "";
    for (var i = 0; i < questions.length; i++) {
      var d = document.createElement("div");
      d.className = "dot" + (i === 0 ? " active" : "");
      d.id = "dot" + i;
      dots.appendChild(d);
    }
    renderQuestion(0);
  }

  function renderQuestion(idx) {
    var q = questions[idx];
    var emoji = document.getElementById("quizEmoji");
    var qEl   = document.getElementById("quizQ");
    var opts  = document.getElementById("quizOptions");
    var resp  = document.getElementById("quizResponse");
    var next  = document.getElementById("nextBtn");

    emoji.style.animation = "none";
    qEl.style.animation   = "none";
    opts.style.animation  = "none";
    void emoji.offsetWidth;
    emoji.style.animation = "";
    qEl.style.animation   = "";
    opts.style.animation  = "";

    emoji.textContent = q.emoji;
    qEl.textContent   = q.q;
    resp.textContent  = "";
    resp.classList.remove("show");
    next.classList.remove("show");

    opts.innerHTML = "";
    q.opts.forEach(function(opt, i) {
      var btn = document.createElement("button");
      btn.className   = "quiz-opt";
      btn.textContent = opt;
      btn.onclick     = function() { selectOpt(i, btn); };
      opts.appendChild(btn);
    });
  }

  function selectOpt(i, btn) {
    document.querySelectorAll(".quiz-opt").forEach(function(b) { b.classList.remove("selected"); });
    btn.classList.add("selected");
    var resp = document.getElementById("quizResponse");
    resp.textContent = questions[current].responses[i];
    resp.classList.add("show");
    var next = document.getElementById("nextBtn");
    var isLast = current === questions.length - 1;
    next.textContent = isLast ? "Okay I am ready... 💗" : "Next ✨";
    next.classList.add("show");
  }

  function nextQuestion() {
    document.getElementById("dot" + current).classList.remove("active");
    document.getElementById("dot" + current).classList.add("done");
    current++;
    if (current < questions.length) {
      document.getElementById("dot" + current).classList.add("active");
      renderQuestion(current);
    } else {
      var qs = document.getElementById("quizScreen");
      qs.classList.add("hide");
      setTimeout(function() {
        qs.classList.add("gone");
        document.getElementById("mainCard").classList.add("show");
      }, 650);
    }
  }

  // NO BUTTON RUNAWAY LOGIC (4 Interactions)
  var noBtn = document.getElementById("noBtn");
  var noRunCount = 0;

  function runAway() {
    if (noRunCount >= 4) return; // Stop if it has already vanished

    // On the very first interaction, lock its position relative to the window
    if (noRunCount === 0) {
      var rect = noBtn.getBoundingClientRect();
      noBtn.style.position = "fixed";
      noBtn.style.left = rect.left + "px";
      noBtn.style.top = rect.top + "px";
      noBtn.style.zIndex = "200";
      
      // This forces the browser to apply the fixed position before running the animation
      // It prevents the button from "teleporting" on the first hover!
      void noBtn.offsetWidth; 
    }

    var m = 40; // margin buffer
    var maxX = window.innerWidth - noBtn.offsetWidth - m;
    var maxY = window.innerHeight - noBtn.offsetHeight - m;
    
    noBtn.style.left = rand(m, maxX) + "px";
    noBtn.style.top  = rand(m, maxY) + "px";
    noRunCount++;

    // If it has run 4 times, make it vanish and show the toast
    if (noRunCount === 4) {
      // Wait 600ms so it finishes gliding before it disappears into thin air
      setTimeout(function() {
        noBtn.style.opacity = "0";
        noBtn.style.pointerEvents = "none";
        
        var t = document.getElementById("toast");
        t.style.display = "block";
        clearTimeout(window._tt);
        window._tt = setTimeout(function() { t.style.display = "none"; }, 3800);
      }, 600); 
    }
  }

  // YES
  function handleYes() {
    launchConfetti();
    setTimeout(function() { document.getElementById("yesOverlay").classList.add("active"); }, 300);
  }

  // CONFETTI
  var confettiColors = ["#ff6fa8","#ffb3d1","#ff3d7f","#ffd6eb","#e8205c","#fff","#ffec99"];
  var confettiEmoji  = ["🐱","💗","🌸","✨","💕","🐾"];
  function launchConfetti() {
    var count = window.innerWidth < 480 ? 50 : 80;
    for (var i = 0; i < count; i++) {
      (function(i) {
        setTimeout(function() {
          var el = document.createElement("div");
          if (Math.random() < 0.35) {
            el.textContent = confettiEmoji[Math.floor(rand(0, confettiEmoji.length))];
            el.style.cssText = "position:fixed;font-size:" + rand(16,30) + "px;left:" + rand(0,100) + "%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall " + rand(2,4) + "s linear forwards;";
          } else {
            el.className = "confetti-piece";
            el.style.cssText = "left:" + rand(0,100) + "%;top:-20px;background:" + confettiColors[Math.floor(rand(0,confettiColors.length))] + ";width:" + rand(6,12) + "px;height:" + rand(6,12) + "px;animation-duration:" + rand(2.5,4.5) + "s;border-radius:" + (Math.random() > 0.5 ? "50%" : "2px") + ";";
          }
          document.body.appendChild(el);
          setTimeout(function() { el.remove(); }, 5000);
        }, i * 45);
      })(i);
    }
  }
</script>
</body>
</html>
You said

in the end it show say love from Kanish

Gemini said

That is the perfect way to sign it off. It makes it completely personal.

I've updated the final success screen so that right after the message, it finishes with "love from Kanish 💗".

Here is the final, polished code. Everything from the gliding "No" button to the quiz and the confetti is locked in and ready to go:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hey Dhruvika 🌸</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --pink-light: #ffe4f0;
    --pink-mid: #ffb3d1;
    --pink-hot: #ff6fa8;
    --pink-deep: #e83a7a;
    --white-glass: rgba(255,255,255,0.55);
    --shadow: rgba(232,58,122,0.18);
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body {
    font-family:'Quicksand',sans-serif;
    background:linear-gradient(135deg,#ffe4f0 0%,#ffd6eb 30%,#ffb3d1 60%,#ffc2dd 100%);
    min-height:100vh; min-height:100dvh;
    overflow:hidden; position:relative;
    touch-action:manipulation;
  }
  .bg-layer { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
  .bubble { position:absolute;border-radius:50%;opacity:0.22;animation:floatUp linear infinite; }
  .heart-float { position:absolute;font-size:clamp(14px,3vw,32px);animation:floatDiag ease-in-out infinite;opacity:0.4; }
  .cat-bg { position:absolute;font-size:clamp(16px,3.5vw,38px);animation:floatCat ease-in-out infinite;opacity:0.32; }
  @keyframes floatUp {
    0% { transform:translateY(110vh) scale(0.7) rotate(0deg);opacity:0; }
    10% { opacity:0.22; } 90% { opacity:0.22; }
    100% { transform:translateY(-15vh) scale(1.1) rotate(360deg);opacity:0; }
  }
  @keyframes floatDiag {
    0%,100% { transform:translate(0,0) rotate(-5deg) scale(1); }
    33% { transform:translate(14px,-18px) rotate(8deg) scale(1.08); }
    66% { transform:translate(-10px,-30px) rotate(-4deg) scale(0.95); }
  }
  @keyframes floatCat {
    0%,100% { transform:translate(0,0) rotate(-3deg); }
    25% { transform:translate(16px,-12px) rotate(5deg); }
    50% { transform:translate(6px,-22px) rotate(-2deg); }
    75% { transform:translate(-10px,-10px) rotate(4deg); }
  }
  .screen {
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:24px; gap:20px;
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .screen.hide {
    opacity:0; transform:scale(1.06) translateY(-24px);
    pointer-events:none;
  }
  .screen.gone { display:none; }
  .env-label {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(18px,4.5vw,26px); color:#b03060;
    text-align:center; line-height:1.5;
    animation:gentlePulse 2.4s ease-in-out infinite;
  }
  @keyframes gentlePulse {
    0%,100% { opacity:0.7;transform:translateY(0); }
    50% { opacity:1;transform:translateY(-4px); }
  }
  .envelope-wrap {
    cursor:pointer;
    filter:drop-shadow(0 12px 40px rgba(232,58,122,0.28));
    transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    user-select:none; padding:10px;
    animation:wiggleHint 0.6s 2.2s ease both;
  }
  .envelope-wrap:active { transform:scale(0.95); }
  @keyframes wiggleHint {
    0% { transform:rotate(0); }
    20% { transform:rotate(-6deg) scale(1.04); }
    40% { transform:rotate(6deg) scale(1.04); }
    60% { transform:rotate(-4deg); }
    80% { transform:rotate(3deg); }
    100% { transform:rotate(0); }
  }
  .env-body { fill:#fff0f8;stroke:#ffb3d1;stroke-width:2.5; }
  .env-flap { fill:#ffd6eb;stroke:#ffb3d1;stroke-width:2.5; }
  .env-seal { fill:#ff6fa8; }
  .env-line { stroke:#ffc2e0;stroke-width:2;stroke-linecap:round; }
  .click-hint {
    font-size:clamp(12px,3vw,15px); color:#d46090;
    letter-spacing:0.12em; text-transform:uppercase;
    font-weight:600; opacity:0;
    animation:fadeInHint 0.8s 3s ease forwards;
  }
  @keyframes fadeInHint { to { opacity:0.7; } }
  
  #quizScreen { gap:0; padding:20px; }
  
  .quiz-card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .progress-dots {
    display:flex; gap:8px; justify-content:center; margin-bottom:24px;
  }
  .dot {
    width:12px; height:12px; border-radius:50%;
    background:var(--pink-mid); transition:background 0.3s, transform 0.3s;
  }
  .dot.active { background:var(--pink-deep); transform:scale(1.3); }
  .dot.done { background:var(--pink-hot); }
  .quiz-emoji {
    font-size:clamp(46px,10vw,64px); margin-bottom:12px;
    animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes popIn {
    from { transform:scale(0) rotate(-10deg);opacity:0; }
    to   { transform:scale(1) rotate(0);opacity:1; }
  }
  .quiz-q {
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,4.5vw,28px);
    color:#c0205c; font-weight:700;
    line-height:1.35; margin-bottom:24px;
    animation:fadeUp 0.5s 0.1s ease both; opacity:0;
  }
  @keyframes fadeUp {
    from { opacity:0;transform:translateY(12px); }
    to   { opacity:1;transform:translateY(0); }
  }
  .quiz-options {
    display:flex; flex-direction:column; gap:12px;
    animation:fadeUp 0.5s 0.2s ease both; opacity:0;
  }
  .quiz-opt {
    padding:15px 20px; border-radius:50px;
    border:2px solid var(--pink-mid);
    background:rgba(255,255,255,0.9);
    color:#c0205c; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(15px,3.5vw,18px);
    cursor:pointer; transition:all 0.2s ease;
    touch-action:manipulation; text-align:center;
  }
  .quiz-opt:hover, .quiz-opt:active {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    transform:scale(1.03);
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
  }
  .quiz-opt.selected {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; border-color:transparent;
    box-shadow:0 6px 20px rgba(232,58,122,0.35);
    pointer-events:none;
  }
  .quiz-response {
    margin-top:16px; font-size:clamp(15px,3vw,18px);
    color:#b03060; font-style:italic; font-weight:600;
    min-height:22px; opacity:0; transition:opacity 0.4s ease;
  }
  .quiz-response.show { opacity:1; }
  .next-btn {
    margin-top:20px; padding:15px 40px;
    border:none; border-radius:50px;
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; font-family:'Quicksand',sans-serif;
    font-weight:700; font-size:clamp(16px,3.5vw,18px);
    cursor:pointer; opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    box-shadow:0 6px 22px rgba(232,58,122,0.38);
    touch-action:manipulation;
  }
  .next-btn.show { opacity:1; pointer-events:all; transform:translateY(0); }
  
  #mainCard {
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:16px;
    opacity:0; pointer-events:none;
    transform:scale(0.88) translateY(30px);
    transition:opacity 0.8s 0.1s ease, transform 0.8s 0.1s cubic-bezier(0.34,1.56,0.64,1);
  }
  #mainCard.show { opacity:1; pointer-events:all; transform:scale(1) translateY(0); }
  
  .card {
    background:var(--white-glass);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1.5px solid rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:0 8px 64px var(--shadow),0 2px 16px rgba(255,180,210,0.25);
    padding:clamp(30px,6vw,50px) clamp(25px,7vw,60px) clamp(30px,6vw,50px);
    max-width:700px; width:100%; text-align:center;
  }
  .short-joke {
    font-size:clamp(12px,2.5vw,14px); color:var(--pink-deep);
    font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
    background:rgba(255,107,168,0.12);
    display:inline-block; padding:8px 16px; border-radius:20px;
    margin-bottom:20px; line-height:1.4;
  }
  .photo-wrap {
    position:relative; display:inline-block; margin-bottom:24px;
  }
  .photo-wrap::before {
    content:''; position:absolute; inset:-8px; border-radius:50%;
    background:conic-gradient(from 0deg,#ff6fa8,#ffb3d1,#ff6fa8,#e8507a,#ff6fa8);
    animation:spinRing 4s linear infinite; z-index:-1; opacity:0.7;
  }
  @keyframes spinRing { to { transform:rotate(360deg); } }
  
  .photo {
    width:clamp(150px,35vw,220px); height:clamp(150px,35vw,220px);
    border-radius:50%; object-fit:cover; object-position:center top;
    border:4px solid white; display:block; position:relative; z-index:1;
  }
  .photo-cats {
    position:absolute; font-size:clamp(20px,4vw,28px);
    animation:orbitCat 5s linear infinite; top:50%; left:50%; transform-origin:0 0;
  }
  @keyframes orbitCat {
    from { transform:rotate(0deg) translateX(clamp(85px,20vw,125px)) rotate(0deg); }
    to   { transform:rotate(360deg) translateX(clamp(85px,20vw,125px)) rotate(-360deg); }
  }
  
  .question {
    font-family:'Playfair Display',serif;
    font-size:clamp(26px,6vw,42px); font-weight:700;
    color:#c0205c; line-height:1.25; margin-bottom:12px;
  }
  .sub-line {
    font-size:clamp(14px,3vw,16px); color:#d46090;
    margin-bottom:30px; font-style:italic;
  }
  .buttons {
    display:flex; gap:16px; justify-content:center;
    align-items:center; flex-wrap:wrap;
  }
  .btn {
    padding:clamp(14px,3vw,16px) clamp(30px,7vw,46px);
    border:none; border-radius:50px;
    font-family:'Quicksand',sans-serif; font-weight:700;
    font-size:clamp(16px,4vw,20px); cursor:pointer; outline:none;
    min-width:120px; touch-action:manipulation;
  }
  .btn-yes {
    background:linear-gradient(135deg,#ff6fa8,#e8205c);
    color:white; box-shadow:0 6px 24px rgba(232,58,122,0.4);
  }
  .btn-yes:active { transform:scale(0.96); }
  
  .btn-no {
    background:rgba(255,255,255,0.9); color:#d46090;
    border:2px solid var(--pink-hot);
    box-shadow:0 6px 24px rgba(232,58,122,0.4);
    transition: left 0.6s ease-in-out, top 0.6s ease-in-out, opacity 0.5s ease;
  }
  
  .toast {
    display:none; position:fixed;
    bottom:max(28px,env(safe-area-inset-bottom,28px));
    left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,#c0205c,#e8507a);
    color:white; padding:16px 26px; border-radius:50px;
    font-size:clamp(14px,3.5vw,16px); font-weight:600;
    box-shadow:0 8px 28px rgba(192,32,92,0.4);
    z-index:999; width:88%; max-width:380px; text-align:center;
    animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  @keyframes toastIn {
    from { opacity:0;transform:translateX(-50%) translateY(20px); }
    to   { opacity:1;transform:translateX(-50%) translateY(0); }
  }
  .yes-overlay {
    display:none; position:fixed; inset:0;
    background:linear-gradient(135deg,rgba(255,228,240,0.97),rgba(255,182,215,0.97));
    z-index:500; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:clamp(20px,6vw,40px);
    backdrop-filter:blur(12px); overflow-y:auto;
  }
  .yes-overlay.active { display:flex; animation:overlayIn 0.7s ease both; }
  @keyframes overlayIn {
    from { opacity:0;transform:scale(1.06); }
    to   { opacity:1;transform:scale(1); }
  }
  .yes-big-cats {
    font-size:clamp(46px,10vw,64px); margin-bottom:16px;
    animation:bounceCats 0.8s ease both; letter-spacing:4px;
  }
  @keyframes bounceCats {
    0%   { transform:scale(0) rotate(-15deg);opacity:0; }
    60%  { transform:scale(1.2) rotate(5deg);opacity:1; }
    100% { transform:scale(1) rotate(0);opacity:1; }
  }
  .yes-title {
    font-family:'Playfair Display',serif;
    font-size:clamp(30px,7vw,54px); color:#c0205c; font-weight:700;
    margin-bottom:14px; animation:fadeSlideIn 0.6s 0.3s ease both; opacity:0;
  }
  .yes-message {
    font-size:clamp(16px,3.5vw,20px); color:#a0305a; max-width:500px;
    line-height:1.8; font-weight:500;
    animation:fadeSlideIn 0.6s 0.6s ease both; opacity:0; margin-bottom:18px;
  }
  .yes-sign {
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:clamp(16px,4vw,20px); color:var(--pink-deep);
    animation:fadeSlideIn 0.6s 0.9s ease both; opacity:0;
  }
  @keyframes fadeSlideIn {
    0%   { opacity:0;transform:translateY(16px); }
    100% { opacity:1;transform:translateY(0); }
  }
  .confetti-piece {
    position:fixed; pointer-events:none; z-index:600;
    animation:confettiFall linear forwards;
  }
  @keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg);opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg);opacity:0.2; }
  }
</style>
</head>
<body>

<div class="bg-layer" id="bgLayer"></div>
<div class="toast" id="toast">😔 I am an idiot… I will try and try until you say yes. 💗</div>

<div class="yes-overlay" id="yesOverlay">
  <div class="yes-big-cats">🐱🐱🐱🐱🐱</div>
  <div class="yes-title">She said YES!! 🎉</div>
  <div class="yes-message">
    Of all the people in this entire world, you are the one I keep thinking about.<br><br>
    You are cute, you are funny, and yes — even the fact that you are pocket-sized makes you more adorable. 🥺<br><br>
    I don't just like you, Dhruvika. I <em>really</em> like you. And I promise I will make it worth it. 💗
  </div>
  <div class="yes-sign">love from Kanish 💗</div>
</div>

<div class="screen" id="envelopeScreen">
  <div class="env-label">Someone left you a secret letter… 🌸<br>tap to open it</div>
  <div class="envelope-wrap" id="envelopeBtn" onclick="openEnvelope()">
    <svg style="width:min(300px,72vw);height:auto" viewBox="0 0 260 200" xmlns="http://www.w3.org/2000/svg" overflow="visible">
      <rect class="env-body" x="10" y="70" width="240" height="120" rx="12"/>
      <g>
        <rect fill="#fff5f9" stroke="#ffcce3" stroke-width="1.5" x="40" y="40" width="180" height="100" rx="8"/>
        <line class="env-line" x1="65" y1="68" x2="195" y2="68"/>
        <line class="env-line" x1="65" y1="84" x2="195" y2="84"/>
        <line class="env-line" x1="65" y1="100" x2="155" y2="100"/>
        <text x="130" y="125" text-anchor="middle" font-size="22" font-family="serif">💗</text>
      </g>
      <polygon class="env-flap" points="10,70 130,145 250,70"/>
      <polygon fill="#fce4f0" stroke="#ffb3d1" stroke-width="1.5" points="10,190 130,130 250,190"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="10,70 10,190 90,130"/>
      <polygon fill="#ffd6eb" stroke="#ffb3d1" stroke-width="1" points="250,70 250,190 170,130"/>
      <circle class="env-seal" cx="130" cy="140" r="20"/>
      <text x="130" y="147" text-anchor="middle" font-size="18">🐱</text>
    </svg>
  </div>
  <div class="click-hint">✦ tap to open ✦</div>
</div>

<div class="screen gone" id="quizScreen">
  <div class="quiz-card">
    <div class="progress-dots" id="progressDots"></div>
    <div class="quiz-emoji" id="quizEmoji"></div>
    <div class="quiz-q" id="quizQ"></div>
    <div class="quiz-options" id="quizOptions"></div>
    <div class="quiz-response" id="quizResponse"></div>
    <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next ✨</button>
  </div>
</div>

<div id="mainCard">
  <div class="card">
    <div class="short-joke">⚠️ Warning: may appear taller than actual size (she doesn't)</div>
    <div class="photo-wrap">
      <img class="photo" src="WhatsApp Image 2026-05-29 at 16.11.14.jpeg" alt="Dhruvika"/>
      <span class="photo-cats" style="animation-delay:0s">🐱</span>
      <span class="photo-cats" style="animation-delay:-2.5s">🌸</span>
    </div>

    <div class="question">Will you be my girlfriend? 🌸</div>
    <div class="sub-line">choose carefully. one option is clearly better than the other.</div>

    <div class="buttons">
      <button class="btn btn-yes" onclick="handleYes()">Yes 💗</button>
      <button class="btn btn-no" id="noBtn" onclick="runAway()" onmouseenter="runAway()">No 😢</button>
    </div>
  </div>
</div>

<script>
  var questions = [
    {
      emoji: "🐱",
      q: "Be honest... cats or dogs?",
      opts: ["Cats, obviously", "Dogs... sorry", "Both but cats more", "Whatever you like"],
      responses: [
        "Correct answer. We are going to get along just fine. 😌",
        "Bold choice. We can still work on this. 🐱",
        "That is the right spirit. Cats first, always. 💗",
        "Smooth. Very smooth. 😏"
      ]
    },
    {
      emoji: "📏",
      q: "On a scale of 1 to 10, how tall do you think you are? Be honest 👀",
      opts: ["10/10, perfectly tall!", "Maybe a 7...", "Okay fine, like a 5 😭", "Height is just a number 🙄"],
      responses: [
        "Adorable delusion. Truly. 💗",
        "Sure. Absolutely. We believe you. 😌",
        "FINALLY. Honesty. We love that. 🐾",
        "A philosopher AND pocket-sized. Rare combo. ✨"
      ]
    },
    {
      emoji: "💌",
      q: "If someone had a crush on you, what would be the cutest way to tell you?",
      opts: ["A handwritten letter 💌", "A whole website just for me 🌸", "Just say it already! 😤", "Surprise me 🎀"],
      responses: [
        "Great taste. Very classic. Very you. 💗",
        "Funny you should say that... 👀✨",
        "Okay okay, here goes nothing then 💗",
        "Plot twist: you are about to find out. 🐱"
      ]
    }
  ];

  var current = 0;

  function rand(a, b) { return Math.random() * (b - a) + a; }

  // BG FLOATIES
  var bgLayer = document.getElementById("bgLayer");
  var hearts = ["💗","💕","💓","💖","🌸","✨"];
  var cats   = ["🐱","🐾","😺","😸","🐈"];
  for (var i = 0; i < 14; i++) {
    var b = document.createElement("div"); b.className = "bubble";
    var s = rand(30, 100);
    b.style.cssText = "width:" + s + "px;height:" + s + "px;left:" + rand(0,100) + "%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(255,182,215,0.3));animation-duration:" + rand(9,18) + "s;animation-delay:-" + rand(0,18) + "s;";
    bgLayer.appendChild(b);
  }
  for (var i = 0; i < 10; i++) {
    var h = document.createElement("span"); h.className = "heart-float";
    h.textContent = hearts[Math.floor(rand(0, hearts.length))];
    h.style.cssText = "left:" + rand(2,93) + "%;top:" + rand(5,88) + "%;animation-duration:" + rand(4,9) + "s;animation-delay:-" + rand(0,9) + "s;";
    bgLayer.appendChild(h);
  }
  for (var i = 0; i < 8; i++) {
    var c = document.createElement("span"); c.className = "cat-bg";
    c.textContent = cats[Math.floor(rand(0, cats.length))];
    c.style.cssText = "left:" + rand(2,90) + "%;top:" + rand(5,86) + "%;animation-duration:" + rand(5,11) + "s;animation-delay:-" + rand(0,11) + "s;";
    bgLayer.appendChild(c);
  }

  // ENVELOPE
  function openEnvelope() {
    var env = document.getElementById("envelopeScreen");
    env.classList.add("hide");
    setTimeout(function() {
      env.classList.add("gone");
      startQuiz();
    }, 650);
  }

  function startQuiz() {
    var qs = document.getElementById("quizScreen");
    qs.classList.remove("gone");
    var dots = document.getElementById("progressDots");
    dots.innerHTML = "";
    for (var i = 0; i < questions.length; i++) {
      var d = document.createElement("div");
      d.className = "dot" + (i === 0 ? " active" : "");
      d.id = "dot" + i;
      dots.appendChild(d);
    }
    renderQuestion(0);
  }

  function renderQuestion(idx) {
    var q = questions[idx];
    var emoji = document.getElementById("quizEmoji");
    var qEl   = document.getElementById("quizQ");
    var opts  = document.getElementById("quizOptions");
    var resp  = document.getElementById("quizResponse");
    var next  = document.getElementById("nextBtn");

    emoji.style.animation = "none";
    qEl.style.animation   = "none";
    opts.style.animation  = "none";
    void emoji.offsetWidth;
    emoji.style.animation = "";
    qEl.style.animation   = "";
    opts.style.animation  = "";

    emoji.textContent = q.emoji;
    qEl.textContent   = q.q;
    resp.textContent  = "";
    resp.classList.remove("show");
    next.classList.remove("show");

    opts.innerHTML = "";
    q.opts.forEach(function(opt, i) {
      var btn = document.createElement("button");
      btn.className   = "quiz-opt";
      btn.textContent = opt;
      btn.onclick     = function() { selectOpt(i, btn); };
      opts.appendChild(btn);
    });
  }

  function selectOpt(i, btn) {
    document.querySelectorAll(".quiz-opt").forEach(function(b) { b.classList.remove("selected"); });
    btn.classList.add("selected");
    var resp = document.getElementById("quizResponse");
    resp.textContent = questions[current].responses[i];
    resp.classList.add("show");
    var next = document.getElementById("nextBtn");
    var isLast = current === questions.length - 1;
    next.textContent = isLast ? "Okay I am ready... 💗" : "Next ✨";
    next.classList.add("show");
  }

  function nextQuestion() {
    document.getElementById("dot" + current).classList.remove("active");
    document.getElementById("dot" + current).classList.add("done");
    current++;
    if (current < questions.length) {
      document.getElementById("dot" + current).classList.add("active");
      renderQuestion(current);
    } else {
      var qs = document.getElementById("quizScreen");
      qs.classList.add("hide");
      setTimeout(function() {
        qs.classList.add("gone");
        document.getElementById("mainCard").classList.add("show");
      }, 650);
    }
  }

  // NO BUTTON RUNAWAY LOGIC (4 Interactions)
  var noBtn = document.getElementById("noBtn");
  var noRunCount = 0;

  function runAway() {
    if (noRunCount >= 4) return; // Stop if it has already vanished

    // On the very first interaction, lock its position relative to the window
    if (noRunCount === 0) {
      var rect = noBtn.getBoundingClientRect();
      noBtn.style.position = "fixed";
      noBtn.style.left = rect.left + "px";
      noBtn.style.top = rect.top + "px";
      noBtn.style.zIndex = "200";
      
      // This forces the browser to apply the fixed position before running the animation
      // It prevents the button from "teleporting" on the first hover!
      void noBtn.offsetWidth; 
    }

    var m = 40; // margin buffer
    var maxX = window.innerWidth - noBtn.offsetWidth - m;
    var maxY = window.innerHeight - noBtn.offsetHeight - m;
    
    noBtn.style.left = rand(m, maxX) + "px";
    noBtn.style.top  = rand(m, maxY) + "px";
    noRunCount++;

    // If it has run 4 times, make it vanish and show the toast
    if (noRunCount === 4) {
      // Wait 600ms so it finishes gliding before it disappears into thin air
      setTimeout(function() {
        noBtn.style.opacity = "0";
        noBtn.style.pointerEvents = "none";
        
        var t = document.getElementById("toast");
        t.style.display = "block";
        clearTimeout(window._tt);
        window._tt = setTimeout(function() { t.style.display = "none"; }, 3800);
      }, 600); 
    }
  }

  // YES
  function handleYes() {
    launchConfetti();
    setTimeout(function() { document.getElementById("yesOverlay").classList.add("active"); }, 300);
  }

  // CONFETTI
  var confettiColors = ["#ff6fa8","#ffb3d1","#ff3d7f","#ffd6eb","#e8205c","#fff","#ffec99"];
  var confettiEmoji  = ["🐱","💗","🌸","✨","💕","🐾"];
  function launchConfetti() {
    var count = window.innerWidth < 480 ? 50 : 80;
    for (var i = 0; i < count; i++) {
      (function(i) {
        setTimeout(function() {
          var el = document.createElement("div");
          if (Math.random() < 0.35) {
            el.textContent = confettiEmoji[Math.floor(rand(0, confettiEmoji.length))];
            el.style.cssText = "position:fixed;font-size:" + rand(16,30) + "px;left:" + rand(0,100) + "%;top:-30px;pointer-events:none;z-index:600;animation:confettiFall " + rand(2,4) + "s linear forwards;";
          } else {
            el.className = "confetti-piece";
            el.style.cssText = "left:" + rand(0,100) + "%;top:-20px;background:" + confettiColors[Math.floor(rand(0,confettiColors.length))] + ";width:" + rand(6,12) + "px;height:" + rand(6,12) + "px;animation-duration:" + rand(2.5,4.5) + "s;border-radius:" + (Math.random() > 0.5 ? "50%" : "2px") + ";";
          }
          document.body.appendChild(el);
          setTimeout(function() { el.remove(); }, 5000);
        }, i * 45);
      })(i);
    }
  }
</script>
</body>
</html>
You said

how too add the image

Gemini said

To get the image to show up perfectly on your website, you just need to make sure your computer knows exactly where to find it. Right now, the browser is looking for the image, but it can't find it next to your HTML file.

Here is the absolute easiest, foolproof way to fix it:

Step 1: Put them in the same folder

Since your HTML file is currently on your Desktop (I saw dhrxxx.html in your screenshot!), the easiest thing to do is create a new folder on your Desktop (call it something like Proposal).

  • Move your dhrxxx.html file into this new folder.

  • Move her picture into this exact same folder.

Step 2: Rename the image file (Highly Recommended)

Long file names with spaces (like WhatsApp Image 2026-05-29 at 16.11.14.jpeg) can sometimes confuse the browser.

  • Right-click her picture and rename it to something simple, like dhruvika.jpg.

Step 3: Update the code

Now, open your HTML code one last time. Scroll down to where the main card is (around line 290) and change the src attribute to match the new, simple file name.

Change this line:

HTML
<img class="photo" src="WhatsApp Image 2026-05-29 at 16.11.14.jpeg" alt="Dhruvika"/>

To this:

HTML
<img class="photo" src="dhruvika.jpg" alt="Dhruvika"/>

Step 4: Test it!

Double-click your dhrxxx.html file to open it in Chrome. Because both the code and the image are sitting right next to each other in the exact same folder, the browser will instantly find the image and load it perfectly inside that spinning pink ring!

You said

bro can u tell the line number so i can change

Gemini said

In the exact code I just gave you, you will find that image tag right around Line 309.

Depending on what text editor you are using (like Notepad, VS Code, or Sublime Text), the line number might shift by a line or two if you accidentally added a space when copy-pasting.

The absolute fastest way to find it is to use the search shortcut:

  1. Press Ctrl + F (or Cmd + F on a Mac) on your keyboard.

  2. Type in exactly this: <img class="photo"

  3. It will jump you straight to the exact line!

Once you are there, just change it to:

HTML
<img class="photo" src="dhruvika.jpg" alt="Dhruvika"/>

You've got this, bro! Let me know when you've got it working.

profile picture


Gemini is AI and can make mistakes.