// ---------- 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();
<div class="question" id="questionText"> Will you make me the happiest person ever? </div>
.proposer-pic background: #ffe0e5; width: 120px; height: 120px; border-radius: 100px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 4rem; box-shadow: 0 8px 18px rgba(0,0,0,0.1); border: 3px solid #ffb7c3; index of mujhse shaadi karogi
// ---------- Attach events ---------- yesBtn.addEventListener('click', onYes); noBtn.addEventListener('click', handleNoClick); // additional hover effect for yes button yesBtn.addEventListener('mouseenter', () => if(!yesBtn.disabled) yesBtn.style.transform = 'scale(1.02)'; ); yesBtn.addEventListener('mouseleave', () => yesBtn.style.transform = ''; ); // preload fun message: optional but nice. setTimeout(() => const msg = "💕 Your answer? I'll wait for eternity... 💕"; if(!yesBtn.disabled) messagePara.innerHTML = msg; , 1000); // small fallback to keep no button from going out of container setInterval(() => if(noBtn.style.position === 'absolute' && !yesBtn.disabled) const container = document.querySelector('.buttons'); if(container) const maxLeft = container.clientWidth - noBtn.offsetWidth - 8; const maxTop = container.clientHeight - noBtn.offsetHeight - 5; let leftNow = parseFloat(noBtn.style.left); let topNow = parseFloat(noBtn.style.top); if (isNaN(leftNow)) leftNow = 10; if (isNaN(topNow)) topNow = 10; if (leftNow > maxLeft) noBtn.style.left = Math.max(5, maxLeft - 5) + 'px'; if (topNow > maxTop) noBtn.style.top = Math.max(2, maxTop - 4) + 'px'; if (leftNow < 2) noBtn.style.left = '8px'; if (topNow < 2) noBtn.style.top = '8px'; , 500); )();
@keyframes pulse 0% transform: scale(1); opacity: 0.9; text-shadow: 0 0 0 rgba(255,80,120,0.4); 50% transform: scale(1.12); opacity: 1; text-shadow: 0 0 12px #ff3366; 100% transform: scale(1); opacity: 0.9; // ---------- HELPER: show romantic message & celebration
.heart-icon font-size: 4.2rem; animation: pulse 1.5s infinite ease; display: inline-block; margin-bottom: 0.5rem;
// ---------- YES BUTTON HANDLER (main event) ---------- function onYes() if(yesBtn.disabled) return; // already accepted showAcceptance(); 💖 <br> Main aapko hamesha pyaar karunga/karungi
// ----- State for the "No" button trick (playful) ----- let noClickCount = 0; let originalNoText = noBtn.innerHTML; let moved = false;
// simple floating heart creator function createFloatingHearts() for(let i=0;i<18;i++) let heart = document.createElement('div'); heart.innerHTML = '❤️'; heart.style.position = 'fixed'; heart.style.bottom = '-20px'; heart.style.left = Math.random() * 100 + '%'; heart.style.fontSize = (Math.random() * 24 + 16) + 'px'; heart.style.opacity = '0.8'; heart.style.pointerEvents = 'none'; heart.style.zIndex = '9998'; heart.style.transition = 'transform 4s linear, opacity 3s ease-out'; heart.style.animation = `floatHeart $Math.random() * 3 + 3s linear forwards`; document.body.appendChild(heart); setTimeout(() => heart.remove(); , 5000); // add keyframes dynamically if not exist if(!document.querySelector('#floatHeartStyle')) const styleSheet = document.createElement("style"); styleSheet.id = "floatHeartStyle"; styleSheet.textContent = `@keyframes floatHeart 0% transform: translateY(0) rotate(0deg); opacity: 1; 100% transform: translateY(-100vh) rotate(20deg); opacity: 0; `; document.head.appendChild(styleSheet);
.subhead font-size: 1.2rem; color: #c74b5e; margin-bottom: 2rem; font-style: italic; font-weight: 500;