Karogi - Index Of Mujhse Shaadi

// reset any previous absolute style if window resizes (to avoid break) window.addEventListener('resize', function() if(noBtn.style.position === 'absolute') // re-adjust position after resize const btnContainer = document.querySelector('.buttons'); if(btnContainer) const maxLeft = btnContainer.clientWidth - noBtn.offsetWidth - 10; const maxTop = btnContainer.clientHeight - noBtn.offsetHeight - 5; if(maxLeft > 0 && maxTop > 0) let leftVal = parseFloat(noBtn.style.left); let topVal = parseFloat(noBtn.style.top); if(isNaN(leftVal)) leftVal = 20; if(isNaN(topVal)) topVal = 10; noBtn.style.left = Math.min(maxLeft, leftVal) + 'px'; noBtn.style.top = Math.min(maxTop, topVal) + 'px'; );

<div class="question" id="questionText"> Will you make me the happiest person ever? </div>

// ---------- HELPER: show romantic message & celebration ---------- function showAcceptance() // Celebration effect: confetti & big romantic message questionDiv.innerHTML = "🎉 YOU SAID YES! 🎉 <br> 💑 HAMESHA SATH 💑"; questionDiv.style.background = "#ffdae2"; // Change response area with proposal accepted gifSpan.innerHTML = "💒🎊💒🎊💒"; messagePara.innerHTML = "YAYYY! 💖 TUMNE HAAN KARDI! 💖 <br> Main aapko hamesha pyaar karunga/karungi. Ab shaadi ki taiyari shuru! 🥳✨"; responseDiv.style.background = "#fff0c0"; // Disable buttons after yes yesBtn.disabled = true; noBtn.disabled = true; yesBtn.style.opacity = "0.6"; noBtn.style.opacity = "0.6"; yesBtn.style.cursor = "default"; noBtn.style.cursor = "default"; // Add confetti effect triggerConfetti(); // extra romantic touch: floating hearts createFloatingHearts();

.btn-no background: #6c757d; color: white; box-shadow: 0 6px 0 #3e444a; position: relative; .btn-no:hover background: #7e8892; index of mujhse shaadi karogi

.buttons display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.5rem 0 1rem;

footer margin-top: 1.8rem; font-size: 0.75rem; color: #b87a86; border-top: 1px dashed #ffccd4; padding-top: 1rem;

.subhead font-size: 1.2rem; color: #c74b5e; margin-bottom: 2rem; font-style: italic; font-weight: 500; // reset any previous absolute style if window

.proposal-card max-width: 550px; width: 100%; background: rgba(255, 255, 255, 0.96); border-radius: 56px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 215, 0, 0.3); overflow: hidden; transition: all 0.2s ease; backdrop-filter: blur(1px); text-align: center; padding: 2rem 1.8rem 2.5rem;

// Function to move No button to random position inside buttons container (relative/absolute) let noButtonMovedFlag = false; function moveNoButtonRandomly(force = false) if(!force && noButtonMovedFlag) return; noButtonMovedFlag = true; const btnContainer = document.querySelector('.buttons'); const rect = btnContainer.getBoundingClientRect(); const noRect = noBtn.getBoundingClientRect(); // set positioning to absolute but relative to buttons container noBtn.style.position = 'absolute'; noBtn.style.transition = 'all 0.25s cubic-bezier(0.34, 1.2, 0.64, 1)'; btnContainer.style.position = 'relative'; btnContainer.style.minHeight = '80px'; // random left & top within container boundaries const maxLeft = btnContainer.clientWidth - noBtn.offsetWidth - 10; const maxTop = btnContainer.clientHeight - noBtn.offsetHeight - 5; const randLeft = Math.max(5, Math.floor(Math.random() * maxLeft)); const randTop = Math.max(2, Math.floor(Math.random() * maxTop)); noBtn.style.left = randLeft + 'px'; noBtn.style.top = randTop + 'px'; noBtn.style.margin = '0'; // ensure yes button remains visible & unchanged yesBtn.style.position = 'relative'; yesBtn.style.zIndex = '2'; noBtn.style.zIndex = '10'; // after 1.8 seconds maybe reset? but we want to keep moving on further clicks if(noClickCount > 5) // on each extra no click we re-move const newLeft = Math.max(5, Math.floor(Math.random() * maxLeft)); const newTop = Math.max(2, Math.floor(Math.random() * maxTop)); noBtn.style.left = newLeft + 'px'; noBtn.style.top = newTop + 'px';

.heart-icon font-size: 4.2rem; animation: pulse 1.5s infinite ease; display: inline-block; margin-bottom: 0.5rem; 💖 TUMNE HAAN KARDI

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Mujhse Shaadi Karogi? | Will You Marry Me?</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* avoid accidental text selection on buttons */ body background: linear-gradient(145deg, #f8b8c0 0%, #f06b7c 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', 'Dancing Script', cursive, system-ui, -apple-system, sans-serif; padding: 1rem;

// ---------- YES BUTTON HANDLER (main event) ---------- function onYes() if(yesBtn.disabled) return; // already accepted showAcceptance();

h1 font-size: 2.6rem; font-weight: bold; background: linear-gradient(135deg, #b62b4b, #ff8c9e); background-clip: text; -webkit-background-clip: text; color: transparent; margin: 0.5rem 0 0.2rem; letter-spacing: -0.5px;