.btn-yes background: #e8436e; color: white; box-shadow: 0 6px 0 #962d48; .btn-yes:hover background: #ff4d7a; transform: scale(1.02);
.btn-no background: #6c757d; color: white; box-shadow: 0 6px 0 #3e444a; position: relative; .btn-no:hover background: #7e8892;
@media (max-width: 480px) .proposal-card padding: 1.5rem; h1 font-size: 2rem; .question font-size: 1.4rem; .btn padding: 0.7rem 1.2rem; font-size: 1.1rem; index of mujhse shaadi karogi
.buttons display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.5rem 0 1rem;
.btn border: none; font-size: 1.35rem; font-weight: 600; padding: 0.9rem 1.8rem; border-radius: 60px; cursor: pointer; transition: 0.2s; font-family: inherit; display: inline-flex; align-items: center; gap: 12px; box-shadow: 0 5px 0 rgba(0,0,0,0.1); .btn-yes background: #e8436e
// ----- confetti (simple vanilla) ----- function triggerConfetti() if (typeof window.confetti === 'function') window.confetti( particleCount: 180, spread: 100, origin: y: 0.6 , startVelocity: 20, colors: ['#ff3366', '#ffb347', '#ff6f91'] ); setTimeout(() => window.confetti( particleCount: 100, spread: 70, origin: y: 0.4, x: 0.3 , startVelocity: 15 ); , 150); else // fallback confetti - simple canvas based const canvas = document.createElement('canvas'); canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.pointerEvents = 'none'; canvas.style.zIndex = '9999'; document.body.appendChild(canvas); const myConfetti = new ConfettiGenerator( target: canvas, max: 200, size: 1.2, colors: [[255,51,102],[255,180,71],[255,111,145]] ); myConfetti.render(); setTimeout(() => document.body.removeChild(canvas); , 2800);
<div class="proposal-card" id="proposalCard"> <div class="heart-icon">💖💍💖</div> <div class="proposer-pic"> <span>🥰✨</span> </div> <h1>Mujhse Shaadi Karogi?</h1> <div class="subhead">💞 My heart beats only for you 💞</div> box-shadow: 0 6px 0 #962d48
.response-area margin-top: 1.8rem; background: #fff0f2; border-radius: 40px; padding: 1.2rem; min-height: 110px; font-size: 1.25rem; color: #b13b55; transition: all 0.2s; border: 1px solid #ffccd4;
@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;
footer margin-top: 1.8rem; font-size: 0.75rem; color: #b87a86; border-top: 1px dashed #ffccd4; padding-top: 1rem;