Proposal for My Darling<\/title>\n <style>\n \/* CSS Variables for easy customization *\/\n :root {\n --primary-pink: #ff6b93;\n --primary-blue: #48cae4;\n --text-dark: #333344;\n --text-light: #ffffff;\n --transition-speed: 0.5s;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', system-ui, sans-serif;\n min-height: 100vh;\n background: linear-gradient(135deg, #ffe8f0 0%, #ffd6e0 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--text-dark);\n transition: background var(--transition-speed) ease;\n padding: 20px;\n overflow-x: hidden;\n }\n\n \/* Main container - always visible *\/\n .proposal-container {\n max-width: 800px;\n width: 100%;\n text-align: center;\n position: relative;\n }\n\n \/* Question state - initially visible *\/\n .question-state {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 24px;\n padding: 60px 40px;\n box-shadow: \n 0 20px 60px rgba(255, 107, 147, 0.15),\n 0 5px 15px rgba(0, 0, 0, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.8);\n transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .proposal-title {\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 800;\n margin-bottom: 20px;\n background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1.2;\n }\n\n .darling-name {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n color: var(--primary-pink);\n margin-bottom: 40px;\n position: relative;\n display: inline-block;\n }\n\n .darling-name::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--primary-pink), transparent);\n }\n\n .question-text {\n font-size: clamp(1.5rem, 3vw, 2rem);\n margin-bottom: 50px;\n color: var(--text-dark);\n line-height: 1.4;\n }\n\n \/* Button styles *\/\n .options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n }\n\n .response-btn {\n padding: 22px 30px;\n font-size: 1.5rem;\n font-weight: 600;\n border: none;\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .response-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: inherit;\n z-index: -1;\n }\n\n .response-btn::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .response-btn:hover::after {\n opacity: 1;\n }\n\n .yes-btn {\n background: linear-gradient(135deg, #4CAF50, #2E7D32);\n color: white;\n box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);\n }\n\n .yes-btn:hover {\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);\n }\n\n .no-btn {\n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: white;\n box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3);\n }\n\n .no-btn:hover {\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 15px 40px rgba(255, 152, 0, 0.4);\n }\n\n \/* Hint text *\/\n .hint-text {\n font-size: 1rem;\n color: #888;\n font-style: italic;\n opacity: 0.8;\n }\n\n \/* Result state - initially hidden *\/\n .result-state {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 10;\n padding: 40px;\n }\n\n .result-state.active {\n opacity: 1;\n pointer-events: all;\n }\n\n .result-card {\n background: rgba(255, 255, 255, 0.98);\n border-radius: 24px;\n padding: 60px 40px;\n width: 100%;\n max-width: 700px;\n box-shadow: \n 0 30px 80px rgba(0, 0, 0, 0.15),\n inset 0 0 0 1px rgba(255, 255, 255, 0.8);\n text-align: center;\n transform: translateY(20px);\n transition: transform var(--transition-speed) ease;\n }\n\n .result-state.active .result-card {\n transform: translateY(0);\n }\n\n .result-emoji {\n font-size: clamp(4rem, 8vw, 6rem);\n margin-bottom: 30px;\n display: block;\n }\n\n .result-message {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n margin-bottom: 20px;\n line-height: 1.3;\n }\n\n .result-signature {\n font-size: 1.5rem;\n color: var(--text-dark);\n opacity: 0.8;\n margin-bottom: 40px;\n font-style: italic;\n }\n\n .back-btn {\n background: var(--text-dark);\n color: white;\n border: none;\n padding: 16px 40px;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n }\n\n .back-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);\n background: #222233;\n }\n\n \/* Animations *\/\n .celebrate-emoji {\n animation: celebrate 2s ease-in-out infinite;\n }\n\n .nervous-emoji {\n animation: nervous 1.2s ease-in-out infinite;\n }\n\n .confetti {\n position: fixed;\n width: 15px;\n height: 15px;\n pointer-events: none;\n opacity: 0;\n z-index: 100;\n }\n\n @keyframes celebrate {\n 0%, 100% { transform: scale(1) rotate(0deg); }\n 25% { transform: scale(1.2) rotate(5deg); }\n 50% { transform: scale(1.1) rotate(-5deg); }\n 75% { transform: scale(1.15) rotate(3deg); }\n }\n\n @keyframes nervous {\n 0%, 100% { transform: translateX(0) scale(1); }\n 33% { transform: translateX(-5px) scale(0.98); }\n 66% { transform: translateX(5px) scale(1.02); }\n }\n\n \/* Responsive design *\/\n @media (max-width: 768px) {\n .proposal-container {\n max-width: 95%;\n }\n \n .question-state,\n .result-card {\n padding: 40px 25px;\n }\n \n .options-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \n .response-btn {\n padding: 20px;\n font-size: 1.3rem;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 15px;\n }\n \n .question-state,\n .result-card {\n padding: 30px 20px;\n }\n \n .proposal-title {\n font-size: 2rem;\n }\n \n .darling-name {\n font-size: 1.8rem;\n }\n \n .question-text {\n font-size: 1.3rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"proposal-container\">\n \n <div class=\"question-state\">\n <h1 class=\"proposal-title\">Proposal Day<\/h1>\n <div class=\"darling-name\">For My Anu Darling<\/div>\n <p class=\"question-text\">Will you be mine for rest of life?<\/p>\n \n <div class=\"options-grid\">\n <button class=\"response-btn yes-btn\" id=\"yesBtn\">\n YES! \ud83d\udc96\n <\/button>\n <button class=\"response-btn no-btn\" id=\"noBtn\">\n NO \ud83d\ude05\n <\/button>\n <\/div>\n \n <p class=\"hint-text\">Choose carefully… but either way, I have something special for you<\/p>\n <\/div>\n\n \n <div class=\"result-state\" id=\"yesResult\">\n <div class=\"result-card\">\n <div class=\"result-emoji celebrate-emoji\">\ud83d\udc90\u2728\ud83e\udd70\ud83d\udc96<\/div>\n <div class=\"result-message\">Anu Darling, I love you!<\/div>\n <div class=\"result-signature\">With all my heart, forever and always<\/div>\n <button class=\"back-btn\" id=\"backFromYes\">Go Back<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"result-state\" id=\"noResult\">\n <div class=\"result-card\">\n <div class=\"result-emoji nervous-emoji\">\ud83d\ude05\ud83d\udc94\u2764\ufe0f\ud83e\ude79<\/div>\n <div class=\"result-message\">Anu Darling, I… I still love you!<\/div>\n <div class=\"result-signature\">(My heart won’t give up that easily)<\/div>\n <button class=\"back-btn\" id=\"backFromNo\">Go Back<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ State management\n const states = {\n question: document.querySelector('.question-state'),\n yesResult: document.getElementById('yesResult'),\n noResult: document.getElementById('noResult'),\n body: document.body\n };\n\n \/\/ Button elements\n const yesBtn = document.getElementById('yesBtn');\n const noBtn = document.getElementById('noBtn');\n const backFromYes = document.getElementById('backFromYes');\n const backFromNo = document.getElementById('backFromNo');\n\n \/\/ Event handlers\n function showYesResult() {\n states.question.style.opacity = '0';\n states.question.style.pointerEvents = 'none';\n states.yesResult.classList.add('active');\n states.body.style.background = 'linear-gradient(135deg, #ffafcc 0%, #ffc8dd 100%)';\n createConfetti();\n }\n\n function showNoResult() {\n states.question.style.opacity = '0';\n states.question.style.pointerEvents = 'none';\n states.noResult.classList.add('active');\n states.body.style.background = 'linear-gradient(135deg, #a2d2ff 0%, #cdb4db 100%)';\n }\n\n function resetToQuestion() {\n states.question.style.opacity = '1';\n states.question.style.pointerEvents = 'all';\n states.yesResult.classList.remove('active');\n states.noResult.classList.remove('active');\n states.body.style.background = 'linear-gradient(135deg, #ffe8f0 0%, #ffd6e0 100%)';\n }\n\n \/\/ Make NO button playful\n noBtn.addEventListener('mouseover', function() {\n const maxMove = 20;\n const x = Math.random() * (maxMove * 2) - maxMove;\n const y = Math.random() * (maxMove * 2) - maxMove;\n this.style.transform = `translate(${x}px, ${y}px)`;\n });\n\n noBtn.addEventListener('mouseout', function() {\n this.style.transform = 'translate(0, 0)';\n });\n\n \/\/ Event listeners\n yesBtn.addEventListener('click', showYesResult);\n noBtn.addEventListener('click', showNoResult);\n backFromYes.addEventListener('click', resetToQuestion);\n backFromNo.addEventListener('click', resetToQuestion);\n\n \/\/ Optional: Confetti effect for YES response\n function createConfetti() {\n const colors = ['#ff6b93', '#48cae4', '#4CAF50', '#FF9800', '#9c27b0'];\n for (let i = 0; i < 50; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + 'vw';\n confetti.style.top = '-20px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n document.body.appendChild(confetti);\n\n \/\/ Animation\n const animation = confetti.animate([\n { \n transform: `translate(0, 0) rotate(0deg)`,\n opacity: 1 \n },\n { \n transform: `translate(${Math.random() * 200 - 100}px, 100vh) rotate(${Math.random() * 360}deg)`,\n opacity: 0 \n }\n ], {\n duration: Math.random() * 3000 + 2000,\n easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'\n });\n\n animation.onfinish = () => confetti.remove();\n }\n }\n\n \/\/ Touch support for mobile\n let touchStart = null;\n states.question.addEventListener('touchstart', (e) => {\n touchStart = e.touches[0].clientX;\n });\n\n states.question.addEventListener('touchend', (e) => {\n if (!touchStart) return;\n const touchEnd = e.changedTouches[0].clientX;\n const diff = touchStart - touchEnd;\n \n \/\/ Swipe right for YES, left for NO\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n showYesResult();\n } else {\n showNoResult();\n }\n }\n touchStart = null;\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Proposal for My Darling Proposal Day For My Anu Darling Will you be mine for rest of life? YES! \ud83d\udc96 NO \ud83d\ude05 Choose carefully… but either way, I have something special for you \ud83d\udc90\u2728\ud83e\udd70\ud83d\udc96 Anu Darling, I love you! With all my heart, forever and always Go Back \ud83d\ude05\ud83d\udc94\u2764\ufe0f\ud83e\ude79 Anu Darling, I… I still love […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":7,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2026-01-10T16:13:10","date_gmt":"2026-01-10T16:13:10","guid":{"rendered":"https:\/\/ayukgroup.com\/?page_id=2"},"modified":"2026-02-08T08:01:16","modified_gmt":"2026-02-08T08:01:16","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/ayukgroup.com\/?page_id=2","title":{"rendered":"Happy Propose Day"},"content":{"rendered":"\n\n\n\n \n \n Proposal for My Darling<\/title>\n <style>\n \/* CSS Variables for easy customization *\/\n :root {\n --primary-pink: #ff6b93;\n --primary-blue: #48cae4;\n --text-dark: #333344;\n --text-light: #ffffff;\n --transition-speed: 0.5s;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', system-ui, sans-serif;\n min-height: 100vh;\n background: linear-gradient(135deg, #ffe8f0 0%, #ffd6e0 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--text-dark);\n transition: background var(--transition-speed) ease;\n padding: 20px;\n overflow-x: hidden;\n }\n\n \/* Main container - always visible *\/\n .proposal-container {\n max-width: 800px;\n width: 100%;\n text-align: center;\n position: relative;\n }\n\n \/* Question state - initially visible *\/\n .question-state {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 24px;\n padding: 60px 40px;\n box-shadow: \n 0 20px 60px rgba(255, 107, 147, 0.15),\n 0 5px 15px rgba(0, 0, 0, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.8);\n transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .proposal-title {\n font-size: clamp(2.5rem, 5vw, 4rem);\n font-weight: 800;\n margin-bottom: 20px;\n background: linear-gradient(135deg, var(--primary-pink), var(--primary-blue));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1.2;\n }\n\n .darling-name {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n color: var(--primary-pink);\n margin-bottom: 40px;\n position: relative;\n display: inline-block;\n }\n\n .darling-name::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--primary-pink), transparent);\n }\n\n .question-text {\n font-size: clamp(1.5rem, 3vw, 2rem);\n margin-bottom: 50px;\n color: var(--text-dark);\n line-height: 1.4;\n }\n\n \/* Button styles *\/\n .options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n }\n\n .response-btn {\n padding: 22px 30px;\n font-size: 1.5rem;\n font-weight: 600;\n border: none;\n border-radius: 16px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n overflow: hidden;\n z-index: 1;\n }\n\n .response-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: inherit;\n z-index: -1;\n }\n\n .response-btn::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .response-btn:hover::after {\n opacity: 1;\n }\n\n .yes-btn {\n background: linear-gradient(135deg, #4CAF50, #2E7D32);\n color: white;\n box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);\n }\n\n .yes-btn:hover {\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);\n }\n\n .no-btn {\n background: linear-gradient(135deg, #FF9800, #F57C00);\n color: white;\n box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3);\n }\n\n .no-btn:hover {\n transform: translateY(-5px) scale(1.05);\n box-shadow: 0 15px 40px rgba(255, 152, 0, 0.4);\n }\n\n \/* Hint text *\/\n .hint-text {\n font-size: 1rem;\n color: #888;\n font-style: italic;\n opacity: 0.8;\n }\n\n \/* Result state - initially hidden *\/\n .result-state {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 10;\n padding: 40px;\n }\n\n .result-state.active {\n opacity: 1;\n pointer-events: all;\n }\n\n .result-card {\n background: rgba(255, 255, 255, 0.98);\n border-radius: 24px;\n padding: 60px 40px;\n width: 100%;\n max-width: 700px;\n box-shadow: \n 0 30px 80px rgba(0, 0, 0, 0.15),\n inset 0 0 0 1px rgba(255, 255, 255, 0.8);\n text-align: center;\n transform: translateY(20px);\n transition: transform var(--transition-speed) ease;\n }\n\n .result-state.active .result-card {\n transform: translateY(0);\n }\n\n .result-emoji {\n font-size: clamp(4rem, 8vw, 6rem);\n margin-bottom: 30px;\n display: block;\n }\n\n .result-message {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 700;\n margin-bottom: 20px;\n line-height: 1.3;\n }\n\n .result-signature {\n font-size: 1.5rem;\n color: var(--text-dark);\n opacity: 0.8;\n margin-bottom: 40px;\n font-style: italic;\n }\n\n .back-btn {\n background: var(--text-dark);\n color: white;\n border: none;\n padding: 16px 40px;\n font-size: 1.1rem;\n font-weight: 600;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n }\n\n .back-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);\n background: #222233;\n }\n\n \/* Animations *\/\n .celebrate-emoji {\n animation: celebrate 2s ease-in-out infinite;\n }\n\n .nervous-emoji {\n animation: nervous 1.2s ease-in-out infinite;\n }\n\n .confetti {\n position: fixed;\n width: 15px;\n height: 15px;\n pointer-events: none;\n opacity: 0;\n z-index: 100;\n }\n\n @keyframes celebrate {\n 0%, 100% { transform: scale(1) rotate(0deg); }\n 25% { transform: scale(1.2) rotate(5deg); }\n 50% { transform: scale(1.1) rotate(-5deg); }\n 75% { transform: scale(1.15) rotate(3deg); }\n }\n\n @keyframes nervous {\n 0%, 100% { transform: translateX(0) scale(1); }\n 33% { transform: translateX(-5px) scale(0.98); }\n 66% { transform: translateX(5px) scale(1.02); }\n }\n\n \/* Responsive design *\/\n @media (max-width: 768px) {\n .proposal-container {\n max-width: 95%;\n }\n \n .question-state,\n .result-card {\n padding: 40px 25px;\n }\n \n .options-grid {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \n .response-btn {\n padding: 20px;\n font-size: 1.3rem;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 15px;\n }\n \n .question-state,\n .result-card {\n padding: 30px 20px;\n }\n \n .proposal-title {\n font-size: 2rem;\n }\n \n .darling-name {\n font-size: 1.8rem;\n }\n \n .question-text {\n font-size: 1.3rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"proposal-container\">\n \n <div class=\"question-state\">\n <h1 class=\"proposal-title\">Proposal Day<\/h1>\n <div class=\"darling-name\">For My Anu Darling<\/div>\n <p class=\"question-text\">Will you be mine for rest of life?<\/p>\n \n <div class=\"options-grid\">\n <button class=\"response-btn yes-btn\" id=\"yesBtn\">\n YES! \ud83d\udc96\n <\/button>\n <button class=\"response-btn no-btn\" id=\"noBtn\">\n NO \ud83d\ude05\n <\/button>\n <\/div>\n \n <p class=\"hint-text\">Choose carefully… but either way, I have something special for you<\/p>\n <\/div>\n\n \n <div class=\"result-state\" id=\"yesResult\">\n <div class=\"result-card\">\n <div class=\"result-emoji celebrate-emoji\">\ud83d\udc90\u2728\ud83e\udd70\ud83d\udc96<\/div>\n <div class=\"result-message\">Anu Darling, I love you!<\/div>\n <div class=\"result-signature\">With all my heart, forever and always<\/div>\n <button class=\"back-btn\" id=\"backFromYes\">Go Back<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"result-state\" id=\"noResult\">\n <div class=\"result-card\">\n <div class=\"result-emoji nervous-emoji\">\ud83d\ude05\ud83d\udc94\u2764\ufe0f\ud83e\ude79<\/div>\n <div class=\"result-message\">Anu Darling, I… I still love you!<\/div>\n <div class=\"result-signature\">(My heart won’t give up that easily)<\/div>\n <button class=\"back-btn\" id=\"backFromNo\">Go Back<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ State management\n const states = {\n question: document.querySelector('.question-state'),\n yesResult: document.getElementById('yesResult'),\n noResult: document.getElementById('noResult'),\n body: document.body\n };\n\n \/\/ Button elements\n const yesBtn = document.getElementById('yesBtn');\n const noBtn = document.getElementById('noBtn');\n const backFromYes = document.getElementById('backFromYes');\n const backFromNo = document.getElementById('backFromNo');\n\n \/\/ Event handlers\n function showYesResult() {\n states.question.style.opacity = '0';\n states.question.style.pointerEvents = 'none';\n states.yesResult.classList.add('active');\n states.body.style.background = 'linear-gradient(135deg, #ffafcc 0%, #ffc8dd 100%)';\n createConfetti();\n }\n\n function showNoResult() {\n states.question.style.opacity = '0';\n states.question.style.pointerEvents = 'none';\n states.noResult.classList.add('active');\n states.body.style.background = 'linear-gradient(135deg, #a2d2ff 0%, #cdb4db 100%)';\n }\n\n function resetToQuestion() {\n states.question.style.opacity = '1';\n states.question.style.pointerEvents = 'all';\n states.yesResult.classList.remove('active');\n states.noResult.classList.remove('active');\n states.body.style.background = 'linear-gradient(135deg, #ffe8f0 0%, #ffd6e0 100%)';\n }\n\n \/\/ Make NO button playful\n noBtn.addEventListener('mouseover', function() {\n const maxMove = 20;\n const x = Math.random() * (maxMove * 2) - maxMove;\n const y = Math.random() * (maxMove * 2) - maxMove;\n this.style.transform = `translate(${x}px, ${y}px)`;\n });\n\n noBtn.addEventListener('mouseout', function() {\n this.style.transform = 'translate(0, 0)';\n });\n\n \/\/ Event listeners\n yesBtn.addEventListener('click', showYesResult);\n noBtn.addEventListener('click', showNoResult);\n backFromYes.addEventListener('click', resetToQuestion);\n backFromNo.addEventListener('click', resetToQuestion);\n\n \/\/ Optional: Confetti effect for YES response\n function createConfetti() {\n const colors = ['#ff6b93', '#48cae4', '#4CAF50', '#FF9800', '#9c27b0'];\n for (let i = 0; i < 50; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + 'vw';\n confetti.style.top = '-20px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n document.body.appendChild(confetti);\n\n \/\/ Animation\n const animation = confetti.animate([\n { \n transform: `translate(0, 0) rotate(0deg)`,\n opacity: 1 \n },\n { \n transform: `translate(${Math.random() * 200 - 100}px, 100vh) rotate(${Math.random() * 360}deg)`,\n opacity: 0 \n }\n ], {\n duration: Math.random() * 3000 + 2000,\n easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'\n });\n\n animation.onfinish = () => confetti.remove();\n }\n }\n\n \/\/ Touch support for mobile\n let touchStart = null;\n states.question.addEventListener('touchstart', (e) => {\n touchStart = e.touches[0].clientX;\n });\n\n states.question.addEventListener('touchend', (e) => {\n if (!touchStart) return;\n const touchEnd = e.changedTouches[0].clientX;\n const diff = touchStart - touchEnd;\n \n \/\/ Swipe right for YES, left for NO\n if (Math.abs(diff) > 50) {\n if (diff > 0) {\n showYesResult();\n } else {\n showNoResult();\n }\n }\n touchStart = null;\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Proposal for My Darling Proposal Day For My Anu Darling Will you be mine for rest of life? YES! \ud83d\udc96 NO \ud83d\ude05 Choose carefully… but either way, I have something special for you \ud83d\udc90\u2728\ud83e\udd70\ud83d\udc96 Anu Darling, I love you! With all my heart, forever and always Go Back \ud83d\ude05\ud83d\udc94\u2764\ufe0f\ud83e\ude79 Anu Darling, I… I still love […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":7,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/ayukgroup.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/ayukgroup.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}