\u2728 Love Calculator \u2728<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;900&family=Dancing+Script:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\r\n \r\n \/* \u2705 PAGE HEIGHT & WIDTH - 100% FIX *\/\r\n html, body {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n position: fixed;\r\n }\r\n \r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(-45deg, \r\n #ffd6e8 0%, \r\n #ffe5d4 20%, \r\n #ffe8c9 40%, \r\n #f5e0ff 60%, \r\n #d4e8ff 80%, \r\n #ffd6e8 100%);\r\n background-size: 400% 400%;\r\n animation: gradientShift 18s ease infinite;\r\n }\r\n \r\n @keyframes gradientShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n \r\n .blob {\r\n position: fixed;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n opacity: 0.5;\r\n z-index: 0;\r\n pointer-events: none;\r\n animation: floatBlob 20s ease-in-out infinite;\r\n }\r\n .blob1 { width: 400px; height: 400px; background: #ffb3d9; top: -100px; left: -100px; }\r\n .blob2 { width: 350px; height: 350px; background: #c9e4ff; bottom: -100px; right: -80px; animation-delay: 5s; }\r\n .blob3 { width: 300px; height: 300px; background: #ffe0b3; top: 40%; right: -120px; animation-delay: 10s; }\r\n .blob4 { width: 320px; height: 320px; background: #e0d4ff; bottom: 20%; left: -100px; animation-delay: 15s; }\r\n \r\n @keyframes floatBlob {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(40px, -30px) scale(1.1); }\r\n 66% { transform: translate(-30px, 40px) scale(0.95); }\r\n }\r\n \r\n .bg-petal {\r\n position: fixed;\r\n top: -60px;\r\n opacity: 0.7;\r\n animation: fall linear infinite;\r\n pointer-events: none;\r\n z-index: 1;\r\n filter: drop-shadow(0 0 6px rgba(255, 182, 214, 0.6));\r\n }\r\n \r\n @keyframes fall {\r\n 0% { transform: translateY(-60px) rotate(0deg) translateX(0); opacity: 0; }\r\n 10% { opacity: 0.8; }\r\n 50% { transform: translateY(50vh) rotate(180deg) translateX(30px); }\r\n 100% { transform: translateY(110vh) rotate(360deg) translateX(-30px); opacity: 0; }\r\n }\r\n \r\n .sparkle {\r\n position: fixed;\r\n pointer-events: none;\r\n z-index: 1;\r\n animation: twinkle 3s ease-in-out infinite;\r\n filter: drop-shadow(0 0 4px #fff);\r\n }\r\n \r\n @keyframes twinkle {\r\n 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }\r\n 50% { opacity: 1; transform: scale(1.3) rotate(180deg); }\r\n }\r\n \r\n \/* \u2705 CONTAINER - PERFECTLY CENTERED, NO PAGE SCROLL *\/\r\n .container {\r\n background: linear-gradient(145deg, \r\n rgba(255, 255, 255, 0.92) 0%, \r\n rgba(255, 250, 252, 0.88) 50%,\r\n rgba(250, 245, 255, 0.92) 100%);\r\n backdrop-filter: blur(25px) saturate(180%);\r\n -webkit-backdrop-filter: blur(25px) saturate(180%);\r\n padding: 26px 22px;\r\n border-radius: 22px;\r\n text-align: center;\r\n width: calc(100% - 24px);\r\n max-width: 380px;\r\n max-height: calc(100vh - 24px);\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 2;\r\n border: 1.5px solid rgba(255, 255, 255, 0.95);\r\n box-shadow: \r\n 0 25px 60px rgba(230, 130, 180, 0.22),\r\n 0 12px 30px rgba(180, 140, 220, 0.15),\r\n inset 0 1px 0 rgba(255, 255, 255, 1);\r\n scrollbar-width: thin;\r\n scrollbar-color: #ffb3d9 transparent;\r\n }\r\n \r\n .container::-webkit-scrollbar { width: 4px; }\r\n .container::-webkit-scrollbar-track { background: transparent; }\r\n .container::-webkit-scrollbar-thumb {\r\n background: linear-gradient(135deg, #ffb3d9, #c6a4e8);\r\n border-radius: 10px;\r\n }\r\n \r\n .container::before {\r\n content: '';\r\n position: absolute;\r\n inset: -2px;\r\n border-radius: 24px;\r\n padding: 2px;\r\n background: linear-gradient(60deg, #ffb3d9, #ffd6b3, #fff5b3, #b3ffd9, #b3d9ff, #d9b3ff, #ffb3d9);\r\n background-size: 400% 400%;\r\n animation: borderGlow 8s ease infinite;\r\n z-index: -1;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0.85;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes borderGlow {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n h1 {\r\n font-family: 'Dancing Script', cursive;\r\n font-size: 32px;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #ff9a76 25%, #c88ed4 50%, #8ea9e8 75%, #ff6b9d 100%);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: titleShine 6s ease infinite;\r\n margin-bottom: 4px;\r\n }\r\n \r\n @keyframes titleShine {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n .subtitle {\r\n color: #b89ac4;\r\n font-size: 11px;\r\n margin-bottom: 16px;\r\n font-style: italic;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n }\r\n \r\n .subtitle::before, .subtitle::after {\r\n content: '\u2726';\r\n color: #ffb3d9;\r\n font-size: 9px;\r\n }\r\n \r\n .input-wrap {\r\n position: relative;\r\n margin: 8px 0;\r\n }\r\n \r\n .input-icon {\r\n position: absolute;\r\n left: 13px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 15px;\r\n opacity: 0.7;\r\n pointer-events: none;\r\n transition: 0.35s;\r\n z-index: 2;\r\n }\r\n \r\n input[type=\"text\"] {\r\n width: 100%;\r\n padding: 12px 14px 12px 42px;\r\n border: 2px solid #f0d9ec;\r\n border-radius: 11px;\r\n font-size: 13px;\r\n outline: none;\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: linear-gradient(135deg, rgba(255, 250, 253, 0.9), rgba(253, 245, 255, 0.9));\r\n color: #4a3a5a;\r\n font-weight: 500;\r\n }\r\n \r\n input[type=\"text\"]:focus {\r\n border-color: #ff9dc4;\r\n background: linear-gradient(135deg, #fffbfd, #fef7ff);\r\n box-shadow: 0 0 0 4px rgba(255, 157, 196, 0.15), 0 8px 20px rgba(255, 157, 196, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .input-wrap:focus-within .input-icon {\r\n opacity: 1;\r\n transform: translateY(-50%) scale(1.18);\r\n }\r\n \r\n input::placeholder { color: #c8b3d4; font-weight: 400; }\r\n \r\n button.calc-btn {\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 12px;\r\n background: linear-gradient(135deg, #ff9dc4 0%, #ffb18c 35%, #c6a4e8 70%, #ff9dc4 100%);\r\n background-size: 250% 250%;\r\n color: white;\r\n border: none;\r\n border-radius: 11px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n letter-spacing: 0.8px;\r\n box-shadow: 0 10px 25px rgba(255, 157, 196, 0.4), 0 3px 8px rgba(198, 164, 232, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n animation: btnGradient 6s ease infinite;\r\n }\r\n \r\n @keyframes btnGradient {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n button.calc-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);\r\n transition: 0.7s;\r\n }\r\n \r\n button.calc-btn:hover::before { left: 100%; }\r\n \r\n button.calc-btn:hover {\r\n transform: translateY(-3px) scale(1.015);\r\n box-shadow: 0 16px 35px rgba(255, 157, 196, 0.55), 0 5px 12px rgba(198, 164, 232, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n }\r\n \r\n button.calc-btn:active { transform: translateY(-1px) scale(0.99); }\r\n \r\n .result { margin-top: 16px; display: none; }\r\n \r\n .result.show {\r\n display: block;\r\n animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .divider {\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(255, 157, 196, 0.4) 30%, rgba(198, 164, 232, 0.4) 70%, transparent);\r\n margin: 0 0 14px;\r\n }\r\n \r\n .flower-wrap {\r\n position: relative;\r\n width: 120px;\r\n height: 120px;\r\n margin: 0 auto 8px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .aura {\r\n position: absolute;\r\n width: 115px; height: 115px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 80, 120, 0.4) 0%, rgba(255, 120, 150, 0.2) 40%, transparent 70%);\r\n animation: auraPulse 2.5s ease-in-out infinite;\r\n z-index: 0;\r\n opacity: 0;\r\n transition: opacity 0.5s;\r\n }\r\n \r\n .aura.on { opacity: 1; }\r\n \r\n @keyframes auraPulse {\r\n 0%, 100% { transform: scale(1); opacity: 0.7; }\r\n 50% { transform: scale(1.15); opacity: 1; }\r\n }\r\n \r\n .flower {\r\n position: relative;\r\n width: 100px; height: 100px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n filter: drop-shadow(0 10px 22px rgba(255, 130, 180, 0.35));\r\n z-index: 1;\r\n }\r\n \r\n .petal {\r\n position: absolute;\r\n left: 50%; top: 50%;\r\n transform-origin: center 95%;\r\n opacity: 0;\r\n box-shadow: inset 0 -10px 25px rgba(0,0,0,0.25), inset 0 12px 22px rgba(255,255,255,0.35), 0 6px 15px rgba(120, 0, 30, 0.25);\r\n }\r\n \r\n .petal.outer { width: 37px; height: 55px; margin-left: -18.5px; margin-top: -50px; border-radius: 50% 50% 50% 50% \/ 70% 70% 30% 30%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }\r\n .petal.mid { width: 31px; height: 45px; margin-left: -15.5px; margin-top: -41px; border-radius: 50% 50% 50% 50% \/ 68% 68% 32% 32%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.25s; }\r\n .petal.inner { width: 24px; height: 35px; margin-left: -12px; margin-top: -31px; border-radius: 50% 50% 50% 50% \/ 65% 65% 35% 35%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.5s; }\r\n .petal.core { width: 17px; height: 25px; margin-left: -8.5px; margin-top: -22px; border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.75s; }\r\n \r\n @keyframes bloom {\r\n 0% { transform: scale(0) rotate(var(--rot)); opacity: 0; }\r\n 60% { transform: scale(1.15) rotate(var(--rot)); opacity: 1; }\r\n 100% { transform: scale(1) rotate(var(--rot)); opacity: 1; }\r\n }\r\n \r\n .flower-center {\r\n position: absolute;\r\n width: 19px; height: 19px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 35% 30%, #fff9e0 0%, #ffe087 30%, #ffb347 65%, #e87a2a 100%);\r\n box-shadow: 0 0 25px rgba(255, 179, 71, 0.9), 0 0 50px rgba(255, 140, 66, 0.5), inset -3px -3px 8px rgba(200, 100, 50, 0.4), inset 3px 3px 8px rgba(255, 255, 255, 0.8);\r\n z-index: 20;\r\n animation: centerPulse 2s ease-in-out infinite;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 9px;\r\n }\r\n \r\n @keyframes centerPulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.12); }\r\n }\r\n \r\n .falling-petal {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n font-size: 11px;\r\n pointer-events: none;\r\n z-index: 15;\r\n animation: petalFall 3.5s ease-in forwards;\r\n }\r\n \r\n @keyframes petalFall {\r\n 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }\r\n 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.6); opacity: 0; }\r\n }\r\n \r\n .flower-sparkle {\r\n position: absolute;\r\n font-size: 11px;\r\n pointer-events: none;\r\n z-index: 12;\r\n animation: sparkleFloat 2.5s ease-in-out infinite;\r\n }\r\n \r\n @keyframes sparkleFloat {\r\n 0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }\r\n 50% { opacity: 1; transform: scale(1.3) translateY(-8px); }\r\n }\r\n \r\n .rank-badge {\r\n display: inline-block;\r\n padding: 5px 15px;\r\n border-radius: 25px;\r\n color: white;\r\n font-size: 9px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 6px;\r\n box-shadow: 0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4);\r\n animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n \r\n .rank-badge.soulmates {\r\n background: linear-gradient(135deg, #ff0844, #ff4d6d, #ff8fa3) !important;\r\n animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), badgeGlow 2s ease-in-out infinite;\r\n }\r\n \r\n @keyframes badgeGlow {\r\n 0%, 100% { box-shadow: 0 8px 25px rgba(255, 8, 68, 0.5), 0 0 40px rgba(255, 80, 120, 0.4); }\r\n 50% { box-shadow: 0 8px 35px rgba(255, 8, 68, 0.8), 0 0 60px rgba(255, 80, 120, 0.7); }\r\n }\r\n \r\n @keyframes badgePop {\r\n 0% { transform: scale(0); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n \r\n .percent {\r\n font-size: 38px;\r\n font-weight: 900;\r\n line-height: 1;\r\n margin: 4px 0 4px;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #ff9a76 30%, #c88ed4 60%, #8ea9e8 100%);\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: countUp 1s cubic-bezier(0.34, 1.56, 0.64, 1), titleShine 5s ease infinite;\r\n }\r\n \r\n .percent.soulmates {\r\n background: linear-gradient(135deg, #ff0844 0%, #ff4d6d 30%, #ff8fa3 60%, #ff0844 100%);\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n @keyframes countUp {\r\n 0% { transform: scale(0.3); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n \r\n .message {\r\n font-size: 11px;\r\n color: #6a5a7a;\r\n margin-top: 4px;\r\n line-height: 1.5;\r\n padding: 0 4px;\r\n }\r\n \r\n .message.soulmates { color: #c9184a; font-weight: 600; font-size: 11.5px; }\r\n \r\n .names {\r\n font-family: 'Dancing Script', cursive;\r\n font-size: 17px;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #c88ed4 50%, #8ea9e8 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-top: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .names.soulmates {\r\n background: linear-gradient(135deg, #ff0844 0%, #ff4d6d 50%, #ff8fa3 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n font-size: 19px;\r\n }\r\n \r\n .reset-btn {\r\n background: linear-gradient(135deg, rgba(255, 250, 253, 0.8), rgba(253, 245, 255, 0.8));\r\n color: #c88ed4;\r\n border: 2px solid #e8c9e8;\r\n margin-top: 12px;\r\n font-size: 11.5px;\r\n padding: 8px;\r\n width: 100%;\r\n border-radius: 11px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: 0.35s;\r\n box-shadow: 0 4px 12px rgba(200, 142, 212, 0.15);\r\n }\r\n \r\n .reset-btn:hover {\r\n background: linear-gradient(135deg, #ff9dc4, #c88ed4);\r\n color: white;\r\n border-color: transparent;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(255, 157, 196, 0.4);\r\n }\r\n \r\n .float-heart {\r\n position: absolute;\r\n pointer-events: none;\r\n animation: floatUp 3s ease-out forwards;\r\n z-index: 5;\r\n }\r\n \r\n @keyframes floatUp {\r\n 0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }\r\n 100% { opacity: 0; transform: translateY(-130px) scale(1.9) rotate(30deg); }\r\n }\r\n \r\n \/* \u2705 MOBILE - SAME, PERFECT FIT *\/\r\n @media (max-width: 420px) {\r\n .container { padding: 22px 16px; border-radius: 18px; width: calc(100% - 16px); max-height: calc(100vh - 16px); }\r\n h1 { font-size: 28px; }\r\n .percent { font-size: 34px; }\r\n .flower-wrap { width: 110px; height: 110px; }\r\n .flower { width: 90px; height: 90px; }\r\n .petal.outer { width: 33px; height: 50px; margin-left: -16.5px; margin-top: -45px; }\r\n .petal.mid { width: 28px; height: 40px; margin-left: -14px; margin-top: -36px; }\r\n .petal.inner { width: 22px; height: 31px; margin-left: -11px; margin-top: -28px; }\r\n .petal.core { width: 15px; height: 22px; margin-left: -7.5px; margin-top: -20px; }\r\n .names { font-size: 15px; }\r\n .names.soulmates { font-size: 17px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"blob blob1\"><\/div>\r\n<div class=\"blob blob2\"><\/div>\r\n<div class=\"blob blob3\"><\/div>\r\n<div class=\"blob blob4\"><\/div>\r\n\r\n<div class=\"container\">\r\n <h1>Love Calculator<\/h1>\r\n <p class=\"subtitle\">Apna aur apne partner ka naam likhein<\/p>\r\n \r\n <div class=\"input-wrap\">\r\n <span class=\"input-icon\">\ud83d\udc95<\/span>\r\n <input type=\"text\" id=\"name1\" placeholder=\"Your Name\">\r\n <\/div>\r\n \r\n <div class=\"input-wrap\">\r\n <span class=\"input-icon\">\ud83d\udc96<\/span>\r\n <input type=\"text\" id=\"name2\" placeholder=\"Partner's Name\">\r\n <\/div>\r\n \r\n <button class=\"calc-btn\" onclick=\"calculateLove()\">Calculate Love \ud83c\udf37<\/button>\r\n \r\n <div class=\"result\" id=\"result\">\r\n <div class=\"divider\"><\/div>\r\n <div class=\"rank-badge\" id=\"badge\"><\/div>\r\n <div class=\"flower-wrap\">\r\n <div class=\"aura\" id=\"aura\"><\/div>\r\n <div class=\"flower\" id=\"flower\">\r\n <div class=\"flower-center\" id=\"center\">\u2764\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"percent\" id=\"percent\">0%<\/div>\r\n <p class=\"message\" id=\"message\"><\/p>\r\n <p class=\"names\" id=\"names\"><\/p>\r\n <button class=\"reset-btn\" onclick=\"resetCalculator()\">Try Again \ud83d\udd04<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============ BACKGROUND PETALS ============\r\nconst petalEmojis = ['\ud83c\udf38', '\ud83c\udf3a', '\ud83c\udf37', '\ud83d\udcae', '\ud83c\udff5\ufe0f', '\ud83d\udc90', '\ud83c\udf39', '\ud83c\udf3c'];\r\nfunction createBgPetals() {\r\n for (let i = 0; i < 15; i++) {\r\n const p = document.createElement('div');\r\n p.className = 'bg-petal';\r\n p.textContent = petalEmojis[Math.floor(Math.random() * petalEmojis.length)];\r\n p.style.left = Math.random() * 100 + 'vw';\r\n p.style.animationDuration = (Math.random() * 10 + 12) + 's';\r\n p.style.animationDelay = (Math.random() * 12) + 's';\r\n p.style.fontSize = (Math.random() * 14 + 16) + 'px';\r\n document.body.appendChild(p);\r\n }\r\n}\r\ncreateBgPetals();\r\n\r\n\/\/ ============ SPARKLES ============\r\nfunction createSparkles() {\r\n const sparkleChars = ['\u2728', '\u2b50', '\ud83d\udcab', '\ud83c\udf1f'];\r\n for (let i = 0; i < 12; i++) {\r\n const s = document.createElement('div');\r\n s.className = 'sparkle';\r\n s.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];\r\n s.style.left = Math.random() * 100 + 'vw';\r\n s.style.top = Math.random() * 100 + 'vh';\r\n s.style.fontSize = (Math.random() * 12 + 10) + 'px';\r\n s.style.animationDelay = (Math.random() * 3) + 's';\r\n s.style.animationDuration = (Math.random() * 2 + 2.5) + 's';\r\n document.body.appendChild(s);\r\n }\r\n}\r\ncreateSparkles();\r\n\r\n\/\/ ============ RANKINGS ============\r\nconst loveRankings = [\r\n { min: 90, petals: 5, isRose: true,\r\n petalColor: 'radial-gradient(ellipse at 35% 25%, #ff8fa3 0%, #ff4d6d 25%, #e60033 55%, #b3001b 85%, #7a0012 100%)',\r\n innerColor: 'radial-gradient(ellipse at 35% 25%, #ffb3c1 0%, #ff6b85 30%, #e60033 65%, #b3001b 100%)',\r\n coreColor: 'radial-gradient(ellipse at 35% 25%, #ffc2cc 0%, #ff6b85 40%, #d60030 80%, #8a0018 100%)',\r\n center: '\ud83c\udf39', badge: 'Soulmates',\r\n badgeColor: 'linear-gradient(135deg, #ff0844, #ff4d6d, #ff8fa3)',\r\n msg: 'Perfect Match! Aap dono ek dusre ke liye bane ho \ud83c\udf39\ud83d\udc8d' },\r\n { min: 75, petals: 4, isRose: true,\r\n petalColor: 'radial-gradient(ellipse at 35% 25%, #ffb3c1 0%, #ff6b85 30%, #e64d6d 65%, #b3003b 100%)',\r\n innerColor: 'radial-gradient(ellipse at 35% 25%, #ffd0d8 0%, #ff85a0 40%, #d63360 100%)',\r\n coreColor: 'radial-gradient(ellipse at 35% 25%, #ffd8de 0%, #ff7a95 45%, #b3003b 100%)',\r\n center: '\ud83d\udc97', badge: 'True Love',\r\n badgeColor: 'linear-gradient(135deg, #e64d6d, #ff6b85, #ffb3c1)',\r\n msg: 'Bahut pyara match hai! Rishta strong hai \ud83d\ude0d' },\r\n { min: 55, petals: 3, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #ffe5d4 0%, #ffbc94 35%, #ff9a76 70%, #e86f4a 100%)',\r\n center: '\ud83e\udde1', badge: 'Sweet Hearts',\r\n badgeColor: 'linear-gradient(135deg, #ff9a76, #ffbc94, #ffd4b3)',\r\n msg: 'Acha match hai! Thodi mehnat se sab possible \ud83d\ude0a' },\r\n { min: 35, petals: 2, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #ede0ff 0%, #d4b8f0 35%, #b88ee0 70%, #9466c4 100%)',\r\n center: '\ud83d\udc9c', badge: 'Crush Zone',\r\n badgeColor: 'linear-gradient(135deg, #b88ee0, #d4b8f0, #ede0ff)',\r\n msg: 'Dosti ke liye perfect ho, pyaar ke liye try karo \ud83d\ude05' },\r\n { min: 0, petals: 1, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #e0e8f0 0%, #c4d0e0 35%, #a0b0c4 70%, #7a8a9e 100%)',\r\n center: '\ud83e\udd0d', badge: 'Just Friends',\r\n badgeColor: 'linear-gradient(135deg, #a0b0c4, #c4d0e0, #e0e8f0)',\r\n msg: 'Koi aur dhoondo yaar, ye match nahi hai \ud83d\ude02' }\r\n];\r\n\r\nfunction getRanking(percent) {\r\n return loveRankings.find(r => percent >= r.min);\r\n}\r\n\r\n\/\/ ============ FLOATING HEARTS ============\r\nfunction spawnFloatingHearts() {\r\n const heartEmojis = ['\u2764\ufe0f', '\ud83d\udc96', '\ud83d\udc95', '\ud83d\udc97', '\ud83c\udf38', '\u2728', '\ud83d\udc9d'];\r\n const result = document.getElementById('result');\r\n for (let i = 0; i < 10; i++) {\r\n setTimeout(() => {\r\n const h = document.createElement('div');\r\n h.className = 'float-heart';\r\n h.textContent = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];\r\n h.style.left = (Math.random() * 80 + 10) + '%';\r\n h.style.top = '50%';\r\n h.style.fontSize = (Math.random() * 14 + 18) + 'px';\r\n result.appendChild(h);\r\n setTimeout(() => h.remove(), 3000);\r\n }, i * 130);\r\n }\r\n}\r\n\r\n\/\/ ============ FALLING PETALS ============\r\nfunction spawnFallingPetals() {\r\n const flowerWrap = document.querySelector('.flower-wrap');\r\n if (!flowerWrap) return;\r\n const petalIcons = ['\ud83c\udf39', '\ud83e\udd40', '\u2764\ufe0f', '\ud83c\udf3a'];\r\n for (let i = 0; i < 12; i++) {\r\n setTimeout(() => {\r\n const p = document.createElement('div');\r\n p.className = 'falling-petal';\r\n p.textContent = petalIcons[Math.floor(Math.random() * petalIcons.length)];\r\n const angle = Math.random() * Math.PI * 2;\r\n const distance = 70 + Math.random() * 60;\r\n p.style.setProperty('--dx', Math.cos(angle) * distance + 'px');\r\n p.style.setProperty('--dy', (Math.sin(angle) * distance + 40) + 'px');\r\n p.style.setProperty('--rot', (Math.random() * 720 - 360) + 'deg');\r\n p.style.animationDelay = (i * 0.15) + 's';\r\n p.style.fontSize = (Math.random() * 8 + 12) + 'px';\r\n flowerWrap.appendChild(p);\r\n setTimeout(() => p.remove(), 3500);\r\n }, i * 100);\r\n }\r\n}\r\n\r\n\/\/ ============ FLOWER SPARKLES ============\r\nfunction spawnFlowerSparkles() {\r\n const flowerWrap = document.querySelector('.flower-wrap');\r\n if (!flowerWrap) return;\r\n const sparkleIcons = ['\u2728', '\u2b50', '\ud83d\udcab', '\ud83c\udf1f'];\r\n const positions = [\r\n { top: '5%', left: '10%' }, { top: '8%', right: '12%' },\r\n { bottom: '10%', left: '8%' }, { bottom: '5%', right: '10%' },\r\n { top: '45%', left: '0%' }, { top: '48%', right: '2%' }\r\n ];\r\n positions.forEach((pos, i) => {\r\n const s = document.createElement('div');\r\n s.className = 'flower-sparkle';\r\n s.textContent = sparkleIcons[i % sparkleIcons.length];\r\n Object.assign(s.style, pos);\r\n s.style.animationDelay = (i * 0.3) + 's';\r\n flowerWrap.appendChild(s);\r\n });\r\n}\r\n\r\n\/\/ ============ BUILD FLOWER ============\r\nfunction buildFlower(rank) {\r\n const flower = document.getElementById('flower');\r\n const center = document.getElementById('center');\r\n const aura = document.getElementById('aura');\r\n flower.querySelectorAll('.petal').forEach(p => p.remove());\r\n document.querySelectorAll('.flower-sparkle').forEach(s => s.remove());\r\n \r\n if (rank.isRose) {\r\n const layers = [\r\n { count: 8, cls: 'outer', delay: 0 },\r\n { count: 6, cls: 'mid', delay: 0.25 },\r\n { count: 5, cls: 'inner', delay: 0.5 },\r\n { count: 4, cls: 'core', delay: 0.75 }\r\n ];\r\n if (rank.petals === 5) aura.classList.add('on');\r\n else aura.classList.remove('on');\r\n \r\n layers.forEach(layer => {\r\n const step = 360 \/ layer.count;\r\n for (let i = 0; i < layer.count; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = `petal ${layer.cls}`;\r\n let color;\r\n if (layer.cls === 'outer') color = rank.petalColor;\r\n else if (layer.cls === 'mid') color = rank.innerColor;\r\n else if (layer.cls === 'inner') color = rank.innerColor;\r\n else color = rank.coreColor;\r\n petal.style.background = color;\r\n const rot = i * step + (layer.cls === 'mid' ? 22 : 0);\r\n petal.style.setProperty('--rot', rot + 'deg');\r\n petal.style.animationDelay = (layer.delay + i * 0.05) + 's';\r\n petal.style.transform = `rotate(${rot}deg)`;\r\n flower.appendChild(petal);\r\n }\r\n });\r\n center.textContent = rank.center;\r\n if (rank.petals === 5) {\r\n setTimeout(spawnFallingPetals, 600);\r\n setTimeout(spawnFlowerSparkles, 900);\r\n }\r\n } else {\r\n aura.classList.remove('on');\r\n const step = 360 \/ rank.petals;\r\n for (let i = 0; i < rank.petals; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = 'petal outer';\r\n petal.style.background = rank.petalColor;\r\n petal.style.setProperty('--rot', (i * step) + 'deg');\r\n petal.style.animationDelay = (i * 0.1) + 's';\r\n petal.style.transform = `rotate(${i * step}deg)`;\r\n flower.appendChild(petal);\r\n }\r\n center.textContent = rank.center;\r\n }\r\n}\r\n\r\n\/\/ ============ MAIN ============\r\nfunction calculateLove() {\r\n const name1 = document.getElementById('name1').value.trim().toLowerCase();\r\n const name2 = document.getElementById('name2').value.trim().toLowerCase();\r\n const resultDiv = document.getElementById('result');\r\n \r\n if (!name1 || !name2) {\r\n const emptyInput = !name1 ? document.getElementById('name1') : document.getElementById('name2');\r\n emptyInput.style.animation = 'shake 0.5s';\r\n emptyInput.style.borderColor = '#ff4d8f';\r\n setTimeout(() => {\r\n emptyInput.style.animation = '';\r\n emptyInput.style.borderColor = '';\r\n }, 500);\r\n return;\r\n }\r\n \r\n const combined = (name1 + name2).split('').sort().join('');\r\n let hash = 0;\r\n for (let i = 0; i < combined.length; i++) {\r\n hash = (hash * 31 + combined.charCodeAt(i)) % 100000;\r\n }\r\n const percent = hash % 101;\r\n \r\n const rank = getRanking(percent);\r\n const isSoulmates = rank.petals === 5;\r\n \r\n document.getElementById('percent').textContent = percent + '%';\r\n document.getElementById('percent').classList.toggle('soulmates', isSoulmates);\r\n \r\n const badge = document.getElementById('badge');\r\n badge.textContent = rank.badge;\r\n badge.style.background = rank.badgeColor;\r\n badge.classList.toggle('soulmates', isSoulmates);\r\n \r\n document.getElementById('message').textContent = rank.msg;\r\n document.getElementById('message').classList.toggle('soulmates', isSoulmates);\r\n \r\n const dn1 = name1.charAt(0).toUpperCase() + name1.slice(1);\r\n const dn2 = name2.charAt(0).toUpperCase() + name2.slice(1);\r\n const namesEl = document.getElementById('names');\r\n namesEl.textContent = `${dn1} \u2764\ufe0f ${dn2}`;\r\n namesEl.classList.toggle('soulmates', isSoulmates);\r\n \r\n buildFlower(rank);\r\n \r\n resultDiv.classList.remove('show');\r\n void resultDiv.offsetWidth;\r\n resultDiv.classList.add('show');\r\n \r\n setTimeout(spawnFloatingHearts, 400);\r\n}\r\n\r\n\/\/ ============ RESET ============\r\nfunction resetCalculator() {\r\n document.getElementById('name1').value = '';\r\n document.getElementById('name2').value = '';\r\n document.getElementById('result').classList.remove('show');\r\n document.querySelectorAll('.flower-sparkle, .falling-petal').forEach(el => el.remove());\r\n document.getElementById('aura').classList.remove('on');\r\n document.getElementById('name1').focus();\r\n}\r\n\r\n\/\/ Shake animation\r\nconst style = document.createElement('style');\r\nstyle.textContent = `\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n }\r\n`;\r\ndocument.head.appendChild(style);\r\n\r\n\/\/ Enter key\r\ndocument.getElementById('name1').addEventListener('keypress', e => {\r\n if (e.key === 'Enter') document.getElementById('name2').focus();\r\n});\r\ndocument.getElementById('name2').addEventListener('keypress', e => {\r\n if (e.key === 'Enter') calculateLove();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2728 Love Calculator \u2728 Love Calculator Apna aur apne partner ka naam likhein \ud83d\udc95 \ud83d\udc96 Calculate Love \ud83c\udf37 \u2764\ufe0f 0% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"[]","_thinkrank_advanced_robots_meta":"[]","_thinkrank_exclude_from_search":0,"_thinkrank_exclude_from_archives":0,"_thinkrank_primary_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=221"}],"version-history":[{"count":28,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u2728 Love Calculator \u2728<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;900&family=Dancing+Script:wght@600;700&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\r\n \r\n \/* \u2705 PAGE HEIGHT & WIDTH - 100% FIX *\/\r\n html, body {\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n position: fixed;\r\n }\r\n \r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(-45deg, \r\n #ffd6e8 0%, \r\n #ffe5d4 20%, \r\n #ffe8c9 40%, \r\n #f5e0ff 60%, \r\n #d4e8ff 80%, \r\n #ffd6e8 100%);\r\n background-size: 400% 400%;\r\n animation: gradientShift 18s ease infinite;\r\n }\r\n \r\n @keyframes gradientShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n \r\n .blob {\r\n position: fixed;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n opacity: 0.5;\r\n z-index: 0;\r\n pointer-events: none;\r\n animation: floatBlob 20s ease-in-out infinite;\r\n }\r\n .blob1 { width: 400px; height: 400px; background: #ffb3d9; top: -100px; left: -100px; }\r\n .blob2 { width: 350px; height: 350px; background: #c9e4ff; bottom: -100px; right: -80px; animation-delay: 5s; }\r\n .blob3 { width: 300px; height: 300px; background: #ffe0b3; top: 40%; right: -120px; animation-delay: 10s; }\r\n .blob4 { width: 320px; height: 320px; background: #e0d4ff; bottom: 20%; left: -100px; animation-delay: 15s; }\r\n \r\n @keyframes floatBlob {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(40px, -30px) scale(1.1); }\r\n 66% { transform: translate(-30px, 40px) scale(0.95); }\r\n }\r\n \r\n .bg-petal {\r\n position: fixed;\r\n top: -60px;\r\n opacity: 0.7;\r\n animation: fall linear infinite;\r\n pointer-events: none;\r\n z-index: 1;\r\n filter: drop-shadow(0 0 6px rgba(255, 182, 214, 0.6));\r\n }\r\n \r\n @keyframes fall {\r\n 0% { transform: translateY(-60px) rotate(0deg) translateX(0); opacity: 0; }\r\n 10% { opacity: 0.8; }\r\n 50% { transform: translateY(50vh) rotate(180deg) translateX(30px); }\r\n 100% { transform: translateY(110vh) rotate(360deg) translateX(-30px); opacity: 0; }\r\n }\r\n \r\n .sparkle {\r\n position: fixed;\r\n pointer-events: none;\r\n z-index: 1;\r\n animation: twinkle 3s ease-in-out infinite;\r\n filter: drop-shadow(0 0 4px #fff);\r\n }\r\n \r\n @keyframes twinkle {\r\n 0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }\r\n 50% { opacity: 1; transform: scale(1.3) rotate(180deg); }\r\n }\r\n \r\n \/* \u2705 CONTAINER - PERFECTLY CENTERED, NO PAGE SCROLL *\/\r\n .container {\r\n background: linear-gradient(145deg, \r\n rgba(255, 255, 255, 0.92) 0%, \r\n rgba(255, 250, 252, 0.88) 50%,\r\n rgba(250, 245, 255, 0.92) 100%);\r\n backdrop-filter: blur(25px) saturate(180%);\r\n -webkit-backdrop-filter: blur(25px) saturate(180%);\r\n padding: 26px 22px;\r\n border-radius: 22px;\r\n text-align: center;\r\n width: calc(100% - 24px);\r\n max-width: 380px;\r\n max-height: calc(100vh - 24px);\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 2;\r\n border: 1.5px solid rgba(255, 255, 255, 0.95);\r\n box-shadow: \r\n 0 25px 60px rgba(230, 130, 180, 0.22),\r\n 0 12px 30px rgba(180, 140, 220, 0.15),\r\n inset 0 1px 0 rgba(255, 255, 255, 1);\r\n scrollbar-width: thin;\r\n scrollbar-color: #ffb3d9 transparent;\r\n }\r\n \r\n .container::-webkit-scrollbar { width: 4px; }\r\n .container::-webkit-scrollbar-track { background: transparent; }\r\n .container::-webkit-scrollbar-thumb {\r\n background: linear-gradient(135deg, #ffb3d9, #c6a4e8);\r\n border-radius: 10px;\r\n }\r\n \r\n .container::before {\r\n content: '';\r\n position: absolute;\r\n inset: -2px;\r\n border-radius: 24px;\r\n padding: 2px;\r\n background: linear-gradient(60deg, #ffb3d9, #ffd6b3, #fff5b3, #b3ffd9, #b3d9ff, #d9b3ff, #ffb3d9);\r\n background-size: 400% 400%;\r\n animation: borderGlow 8s ease infinite;\r\n z-index: -1;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0.85;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes borderGlow {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n h1 {\r\n font-family: 'Dancing Script', cursive;\r\n font-size: 32px;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #ff9a76 25%, #c88ed4 50%, #8ea9e8 75%, #ff6b9d 100%);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: titleShine 6s ease infinite;\r\n margin-bottom: 4px;\r\n }\r\n \r\n @keyframes titleShine {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n .subtitle {\r\n color: #b89ac4;\r\n font-size: 11px;\r\n margin-bottom: 16px;\r\n font-style: italic;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n }\r\n \r\n .subtitle::before, .subtitle::after {\r\n content: '\u2726';\r\n color: #ffb3d9;\r\n font-size: 9px;\r\n }\r\n \r\n .input-wrap {\r\n position: relative;\r\n margin: 8px 0;\r\n }\r\n \r\n .input-icon {\r\n position: absolute;\r\n left: 13px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 15px;\r\n opacity: 0.7;\r\n pointer-events: none;\r\n transition: 0.35s;\r\n z-index: 2;\r\n }\r\n \r\n input[type=\"text\"] {\r\n width: 100%;\r\n padding: 12px 14px 12px 42px;\r\n border: 2px solid #f0d9ec;\r\n border-radius: 11px;\r\n font-size: 13px;\r\n outline: none;\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: linear-gradient(135deg, rgba(255, 250, 253, 0.9), rgba(253, 245, 255, 0.9));\r\n color: #4a3a5a;\r\n font-weight: 500;\r\n }\r\n \r\n input[type=\"text\"]:focus {\r\n border-color: #ff9dc4;\r\n background: linear-gradient(135deg, #fffbfd, #fef7ff);\r\n box-shadow: 0 0 0 4px rgba(255, 157, 196, 0.15), 0 8px 20px rgba(255, 157, 196, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .input-wrap:focus-within .input-icon {\r\n opacity: 1;\r\n transform: translateY(-50%) scale(1.18);\r\n }\r\n \r\n input::placeholder { color: #c8b3d4; font-weight: 400; }\r\n \r\n button.calc-btn {\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 12px;\r\n background: linear-gradient(135deg, #ff9dc4 0%, #ffb18c 35%, #c6a4e8 70%, #ff9dc4 100%);\r\n background-size: 250% 250%;\r\n color: white;\r\n border: none;\r\n border-radius: 11px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n letter-spacing: 0.8px;\r\n box-shadow: 0 10px 25px rgba(255, 157, 196, 0.4), 0 3px 8px rgba(198, 164, 232, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n animation: btnGradient 6s ease infinite;\r\n }\r\n \r\n @keyframes btnGradient {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n \r\n button.calc-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);\r\n transition: 0.7s;\r\n }\r\n \r\n button.calc-btn:hover::before { left: 100%; }\r\n \r\n button.calc-btn:hover {\r\n transform: translateY(-3px) scale(1.015);\r\n box-shadow: 0 16px 35px rgba(255, 157, 196, 0.55), 0 5px 12px rgba(198, 164, 232, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n }\r\n \r\n button.calc-btn:active { transform: translateY(-1px) scale(0.99); }\r\n \r\n .result { margin-top: 16px; display: none; }\r\n \r\n .result.show {\r\n display: block;\r\n animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .divider {\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(255, 157, 196, 0.4) 30%, rgba(198, 164, 232, 0.4) 70%, transparent);\r\n margin: 0 0 14px;\r\n }\r\n \r\n .flower-wrap {\r\n position: relative;\r\n width: 120px;\r\n height: 120px;\r\n margin: 0 auto 8px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .aura {\r\n position: absolute;\r\n width: 115px; height: 115px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 80, 120, 0.4) 0%, rgba(255, 120, 150, 0.2) 40%, transparent 70%);\r\n animation: auraPulse 2.5s ease-in-out infinite;\r\n z-index: 0;\r\n opacity: 0;\r\n transition: opacity 0.5s;\r\n }\r\n \r\n .aura.on { opacity: 1; }\r\n \r\n @keyframes auraPulse {\r\n 0%, 100% { transform: scale(1); opacity: 0.7; }\r\n 50% { transform: scale(1.15); opacity: 1; }\r\n }\r\n \r\n .flower {\r\n position: relative;\r\n width: 100px; height: 100px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n filter: drop-shadow(0 10px 22px rgba(255, 130, 180, 0.35));\r\n z-index: 1;\r\n }\r\n \r\n .petal {\r\n position: absolute;\r\n left: 50%; top: 50%;\r\n transform-origin: center 95%;\r\n opacity: 0;\r\n box-shadow: inset 0 -10px 25px rgba(0,0,0,0.25), inset 0 12px 22px rgba(255,255,255,0.35), 0 6px 15px rgba(120, 0, 30, 0.25);\r\n }\r\n \r\n .petal.outer { width: 37px; height: 55px; margin-left: -18.5px; margin-top: -50px; border-radius: 50% 50% 50% 50% \/ 70% 70% 30% 30%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }\r\n .petal.mid { width: 31px; height: 45px; margin-left: -15.5px; margin-top: -41px; border-radius: 50% 50% 50% 50% \/ 68% 68% 32% 32%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.25s; }\r\n .petal.inner { width: 24px; height: 35px; margin-left: -12px; margin-top: -31px; border-radius: 50% 50% 50% 50% \/ 65% 65% 35% 35%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.5s; }\r\n .petal.core { width: 17px; height: 25px; margin-left: -8.5px; margin-top: -22px; border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%; animation: bloom 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.75s; }\r\n \r\n @keyframes bloom {\r\n 0% { transform: scale(0) rotate(var(--rot)); opacity: 0; }\r\n 60% { transform: scale(1.15) rotate(var(--rot)); opacity: 1; }\r\n 100% { transform: scale(1) rotate(var(--rot)); opacity: 1; }\r\n }\r\n \r\n .flower-center {\r\n position: absolute;\r\n width: 19px; height: 19px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 35% 30%, #fff9e0 0%, #ffe087 30%, #ffb347 65%, #e87a2a 100%);\r\n box-shadow: 0 0 25px rgba(255, 179, 71, 0.9), 0 0 50px rgba(255, 140, 66, 0.5), inset -3px -3px 8px rgba(200, 100, 50, 0.4), inset 3px 3px 8px rgba(255, 255, 255, 0.8);\r\n z-index: 20;\r\n animation: centerPulse 2s ease-in-out infinite;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 9px;\r\n }\r\n \r\n @keyframes centerPulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.12); }\r\n }\r\n \r\n .falling-petal {\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n font-size: 11px;\r\n pointer-events: none;\r\n z-index: 15;\r\n animation: petalFall 3.5s ease-in forwards;\r\n }\r\n \r\n @keyframes petalFall {\r\n 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }\r\n 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.6); opacity: 0; }\r\n }\r\n \r\n .flower-sparkle {\r\n position: absolute;\r\n font-size: 11px;\r\n pointer-events: none;\r\n z-index: 12;\r\n animation: sparkleFloat 2.5s ease-in-out infinite;\r\n }\r\n \r\n @keyframes sparkleFloat {\r\n 0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }\r\n 50% { opacity: 1; transform: scale(1.3) translateY(-8px); }\r\n }\r\n \r\n .rank-badge {\r\n display: inline-block;\r\n padding: 5px 15px;\r\n border-radius: 25px;\r\n color: white;\r\n font-size: 9px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 6px;\r\n box-shadow: 0 8px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4);\r\n animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n \r\n .rank-badge.soulmates {\r\n background: linear-gradient(135deg, #ff0844, #ff4d6d, #ff8fa3) !important;\r\n animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), badgeGlow 2s ease-in-out infinite;\r\n }\r\n \r\n @keyframes badgeGlow {\r\n 0%, 100% { box-shadow: 0 8px 25px rgba(255, 8, 68, 0.5), 0 0 40px rgba(255, 80, 120, 0.4); }\r\n 50% { box-shadow: 0 8px 35px rgba(255, 8, 68, 0.8), 0 0 60px rgba(255, 80, 120, 0.7); }\r\n }\r\n \r\n @keyframes badgePop {\r\n 0% { transform: scale(0); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n \r\n .percent {\r\n font-size: 38px;\r\n font-weight: 900;\r\n line-height: 1;\r\n margin: 4px 0 4px;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #ff9a76 30%, #c88ed4 60%, #8ea9e8 100%);\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: countUp 1s cubic-bezier(0.34, 1.56, 0.64, 1), titleShine 5s ease infinite;\r\n }\r\n \r\n .percent.soulmates {\r\n background: linear-gradient(135deg, #ff0844 0%, #ff4d6d 30%, #ff8fa3 60%, #ff0844 100%);\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n @keyframes countUp {\r\n 0% { transform: scale(0.3); opacity: 0; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n \r\n .message {\r\n font-size: 11px;\r\n color: #6a5a7a;\r\n margin-top: 4px;\r\n line-height: 1.5;\r\n padding: 0 4px;\r\n }\r\n \r\n .message.soulmates { color: #c9184a; font-weight: 600; font-size: 11.5px; }\r\n \r\n .names {\r\n font-family: 'Dancing Script', cursive;\r\n font-size: 17px;\r\n background: linear-gradient(135deg, #ff6b9d 0%, #c88ed4 50%, #8ea9e8 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-top: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .names.soulmates {\r\n background: linear-gradient(135deg, #ff0844 0%, #ff4d6d 50%, #ff8fa3 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n font-size: 19px;\r\n }\r\n \r\n .reset-btn {\r\n background: linear-gradient(135deg, rgba(255, 250, 253, 0.8), rgba(253, 245, 255, 0.8));\r\n color: #c88ed4;\r\n border: 2px solid #e8c9e8;\r\n margin-top: 12px;\r\n font-size: 11.5px;\r\n padding: 8px;\r\n width: 100%;\r\n border-radius: 11px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: 0.35s;\r\n box-shadow: 0 4px 12px rgba(200, 142, 212, 0.15);\r\n }\r\n \r\n .reset-btn:hover {\r\n background: linear-gradient(135deg, #ff9dc4, #c88ed4);\r\n color: white;\r\n border-color: transparent;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(255, 157, 196, 0.4);\r\n }\r\n \r\n .float-heart {\r\n position: absolute;\r\n pointer-events: none;\r\n animation: floatUp 3s ease-out forwards;\r\n z-index: 5;\r\n }\r\n \r\n @keyframes floatUp {\r\n 0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }\r\n 100% { opacity: 0; transform: translateY(-130px) scale(1.9) rotate(30deg); }\r\n }\r\n \r\n \/* \u2705 MOBILE - SAME, PERFECT FIT *\/\r\n @media (max-width: 420px) {\r\n .container { padding: 22px 16px; border-radius: 18px; width: calc(100% - 16px); max-height: calc(100vh - 16px); }\r\n h1 { font-size: 28px; }\r\n .percent { font-size: 34px; }\r\n .flower-wrap { width: 110px; height: 110px; }\r\n .flower { width: 90px; height: 90px; }\r\n .petal.outer { width: 33px; height: 50px; margin-left: -16.5px; margin-top: -45px; }\r\n .petal.mid { width: 28px; height: 40px; margin-left: -14px; margin-top: -36px; }\r\n .petal.inner { width: 22px; height: 31px; margin-left: -11px; margin-top: -28px; }\r\n .petal.core { width: 15px; height: 22px; margin-left: -7.5px; margin-top: -20px; }\r\n .names { font-size: 15px; }\r\n .names.soulmates { font-size: 17px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"blob blob1\"><\/div>\r\n<div class=\"blob blob2\"><\/div>\r\n<div class=\"blob blob3\"><\/div>\r\n<div class=\"blob blob4\"><\/div>\r\n\r\n<div class=\"container\">\r\n <h1>Love Calculator<\/h1>\r\n <p class=\"subtitle\">Apna aur apne partner ka naam likhein<\/p>\r\n \r\n <div class=\"input-wrap\">\r\n <span class=\"input-icon\">\ud83d\udc95<\/span>\r\n <input type=\"text\" id=\"name1\" placeholder=\"Your Name\">\r\n <\/div>\r\n \r\n <div class=\"input-wrap\">\r\n <span class=\"input-icon\">\ud83d\udc96<\/span>\r\n <input type=\"text\" id=\"name2\" placeholder=\"Partner's Name\">\r\n <\/div>\r\n \r\n <button class=\"calc-btn\" onclick=\"calculateLove()\">Calculate Love \ud83c\udf37<\/button>\r\n \r\n <div class=\"result\" id=\"result\">\r\n <div class=\"divider\"><\/div>\r\n <div class=\"rank-badge\" id=\"badge\"><\/div>\r\n <div class=\"flower-wrap\">\r\n <div class=\"aura\" id=\"aura\"><\/div>\r\n <div class=\"flower\" id=\"flower\">\r\n <div class=\"flower-center\" id=\"center\">\u2764\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"percent\" id=\"percent\">0%<\/div>\r\n <p class=\"message\" id=\"message\"><\/p>\r\n <p class=\"names\" id=\"names\"><\/p>\r\n <button class=\"reset-btn\" onclick=\"resetCalculator()\">Try Again \ud83d\udd04<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============ BACKGROUND PETALS ============\r\nconst petalEmojis = ['\ud83c\udf38', '\ud83c\udf3a', '\ud83c\udf37', '\ud83d\udcae', '\ud83c\udff5\ufe0f', '\ud83d\udc90', '\ud83c\udf39', '\ud83c\udf3c'];\r\nfunction createBgPetals() {\r\n for (let i = 0; i < 15; i++) {\r\n const p = document.createElement('div');\r\n p.className = 'bg-petal';\r\n p.textContent = petalEmojis[Math.floor(Math.random() * petalEmojis.length)];\r\n p.style.left = Math.random() * 100 + 'vw';\r\n p.style.animationDuration = (Math.random() * 10 + 12) + 's';\r\n p.style.animationDelay = (Math.random() * 12) + 's';\r\n p.style.fontSize = (Math.random() * 14 + 16) + 'px';\r\n document.body.appendChild(p);\r\n }\r\n}\r\ncreateBgPetals();\r\n\r\n\/\/ ============ SPARKLES ============\r\nfunction createSparkles() {\r\n const sparkleChars = ['\u2728', '\u2b50', '\ud83d\udcab', '\ud83c\udf1f'];\r\n for (let i = 0; i < 12; i++) {\r\n const s = document.createElement('div');\r\n s.className = 'sparkle';\r\n s.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];\r\n s.style.left = Math.random() * 100 + 'vw';\r\n s.style.top = Math.random() * 100 + 'vh';\r\n s.style.fontSize = (Math.random() * 12 + 10) + 'px';\r\n s.style.animationDelay = (Math.random() * 3) + 's';\r\n s.style.animationDuration = (Math.random() * 2 + 2.5) + 's';\r\n document.body.appendChild(s);\r\n }\r\n}\r\ncreateSparkles();\r\n\r\n\/\/ ============ RANKINGS ============\r\nconst loveRankings = [\r\n { min: 90, petals: 5, isRose: true,\r\n petalColor: 'radial-gradient(ellipse at 35% 25%, #ff8fa3 0%, #ff4d6d 25%, #e60033 55%, #b3001b 85%, #7a0012 100%)',\r\n innerColor: 'radial-gradient(ellipse at 35% 25%, #ffb3c1 0%, #ff6b85 30%, #e60033 65%, #b3001b 100%)',\r\n coreColor: 'radial-gradient(ellipse at 35% 25%, #ffc2cc 0%, #ff6b85 40%, #d60030 80%, #8a0018 100%)',\r\n center: '\ud83c\udf39', badge: 'Soulmates',\r\n badgeColor: 'linear-gradient(135deg, #ff0844, #ff4d6d, #ff8fa3)',\r\n msg: 'Perfect Match! Aap dono ek dusre ke liye bane ho \ud83c\udf39\ud83d\udc8d' },\r\n { min: 75, petals: 4, isRose: true,\r\n petalColor: 'radial-gradient(ellipse at 35% 25%, #ffb3c1 0%, #ff6b85 30%, #e64d6d 65%, #b3003b 100%)',\r\n innerColor: 'radial-gradient(ellipse at 35% 25%, #ffd0d8 0%, #ff85a0 40%, #d63360 100%)',\r\n coreColor: 'radial-gradient(ellipse at 35% 25%, #ffd8de 0%, #ff7a95 45%, #b3003b 100%)',\r\n center: '\ud83d\udc97', badge: 'True Love',\r\n badgeColor: 'linear-gradient(135deg, #e64d6d, #ff6b85, #ffb3c1)',\r\n msg: 'Bahut pyara match hai! Rishta strong hai \ud83d\ude0d' },\r\n { min: 55, petals: 3, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #ffe5d4 0%, #ffbc94 35%, #ff9a76 70%, #e86f4a 100%)',\r\n center: '\ud83e\udde1', badge: 'Sweet Hearts',\r\n badgeColor: 'linear-gradient(135deg, #ff9a76, #ffbc94, #ffd4b3)',\r\n msg: 'Acha match hai! Thodi mehnat se sab possible \ud83d\ude0a' },\r\n { min: 35, petals: 2, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #ede0ff 0%, #d4b8f0 35%, #b88ee0 70%, #9466c4 100%)',\r\n center: '\ud83d\udc9c', badge: 'Crush Zone',\r\n badgeColor: 'linear-gradient(135deg, #b88ee0, #d4b8f0, #ede0ff)',\r\n msg: 'Dosti ke liye perfect ho, pyaar ke liye try karo \ud83d\ude05' },\r\n { min: 0, petals: 1, isRose: false,\r\n petalColor: 'radial-gradient(ellipse at 30% 25%, #e0e8f0 0%, #c4d0e0 35%, #a0b0c4 70%, #7a8a9e 100%)',\r\n center: '\ud83e\udd0d', badge: 'Just Friends',\r\n badgeColor: 'linear-gradient(135deg, #a0b0c4, #c4d0e0, #e0e8f0)',\r\n msg: 'Koi aur dhoondo yaar, ye match nahi hai \ud83d\ude02' }\r\n];\r\n\r\nfunction getRanking(percent) {\r\n return loveRankings.find(r => percent >= r.min);\r\n}\r\n\r\n\/\/ ============ FLOATING HEARTS ============\r\nfunction spawnFloatingHearts() {\r\n const heartEmojis = ['\u2764\ufe0f', '\ud83d\udc96', '\ud83d\udc95', '\ud83d\udc97', '\ud83c\udf38', '\u2728', '\ud83d\udc9d'];\r\n const result = document.getElementById('result');\r\n for (let i = 0; i < 10; i++) {\r\n setTimeout(() => {\r\n const h = document.createElement('div');\r\n h.className = 'float-heart';\r\n h.textContent = heartEmojis[Math.floor(Math.random() * heartEmojis.length)];\r\n h.style.left = (Math.random() * 80 + 10) + '%';\r\n h.style.top = '50%';\r\n h.style.fontSize = (Math.random() * 14 + 18) + 'px';\r\n result.appendChild(h);\r\n setTimeout(() => h.remove(), 3000);\r\n }, i * 130);\r\n }\r\n}\r\n\r\n\/\/ ============ FALLING PETALS ============\r\nfunction spawnFallingPetals() {\r\n const flowerWrap = document.querySelector('.flower-wrap');\r\n if (!flowerWrap) return;\r\n const petalIcons = ['\ud83c\udf39', '\ud83e\udd40', '\u2764\ufe0f', '\ud83c\udf3a'];\r\n for (let i = 0; i < 12; i++) {\r\n setTimeout(() => {\r\n const p = document.createElement('div');\r\n p.className = 'falling-petal';\r\n p.textContent = petalIcons[Math.floor(Math.random() * petalIcons.length)];\r\n const angle = Math.random() * Math.PI * 2;\r\n const distance = 70 + Math.random() * 60;\r\n p.style.setProperty('--dx', Math.cos(angle) * distance + 'px');\r\n p.style.setProperty('--dy', (Math.sin(angle) * distance + 40) + 'px');\r\n p.style.setProperty('--rot', (Math.random() * 720 - 360) + 'deg');\r\n p.style.animationDelay = (i * 0.15) + 's';\r\n p.style.fontSize = (Math.random() * 8 + 12) + 'px';\r\n flowerWrap.appendChild(p);\r\n setTimeout(() => p.remove(), 3500);\r\n }, i * 100);\r\n }\r\n}\r\n\r\n\/\/ ============ FLOWER SPARKLES ============\r\nfunction spawnFlowerSparkles() {\r\n const flowerWrap = document.querySelector('.flower-wrap');\r\n if (!flowerWrap) return;\r\n const sparkleIcons = ['\u2728', '\u2b50', '\ud83d\udcab', '\ud83c\udf1f'];\r\n const positions = [\r\n { top: '5%', left: '10%' }, { top: '8%', right: '12%' },\r\n { bottom: '10%', left: '8%' }, { bottom: '5%', right: '10%' },\r\n { top: '45%', left: '0%' }, { top: '48%', right: '2%' }\r\n ];\r\n positions.forEach((pos, i) => {\r\n const s = document.createElement('div');\r\n s.className = 'flower-sparkle';\r\n s.textContent = sparkleIcons[i % sparkleIcons.length];\r\n Object.assign(s.style, pos);\r\n s.style.animationDelay = (i * 0.3) + 's';\r\n flowerWrap.appendChild(s);\r\n });\r\n}\r\n\r\n\/\/ ============ BUILD FLOWER ============\r\nfunction buildFlower(rank) {\r\n const flower = document.getElementById('flower');\r\n const center = document.getElementById('center');\r\n const aura = document.getElementById('aura');\r\n flower.querySelectorAll('.petal').forEach(p => p.remove());\r\n document.querySelectorAll('.flower-sparkle').forEach(s => s.remove());\r\n \r\n if (rank.isRose) {\r\n const layers = [\r\n { count: 8, cls: 'outer', delay: 0 },\r\n { count: 6, cls: 'mid', delay: 0.25 },\r\n { count: 5, cls: 'inner', delay: 0.5 },\r\n { count: 4, cls: 'core', delay: 0.75 }\r\n ];\r\n if (rank.petals === 5) aura.classList.add('on');\r\n else aura.classList.remove('on');\r\n \r\n layers.forEach(layer => {\r\n const step = 360 \/ layer.count;\r\n for (let i = 0; i < layer.count; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = `petal ${layer.cls}`;\r\n let color;\r\n if (layer.cls === 'outer') color = rank.petalColor;\r\n else if (layer.cls === 'mid') color = rank.innerColor;\r\n else if (layer.cls === 'inner') color = rank.innerColor;\r\n else color = rank.coreColor;\r\n petal.style.background = color;\r\n const rot = i * step + (layer.cls === 'mid' ? 22 : 0);\r\n petal.style.setProperty('--rot', rot + 'deg');\r\n petal.style.animationDelay = (layer.delay + i * 0.05) + 's';\r\n petal.style.transform = `rotate(${rot}deg)`;\r\n flower.appendChild(petal);\r\n }\r\n });\r\n center.textContent = rank.center;\r\n if (rank.petals === 5) {\r\n setTimeout(spawnFallingPetals, 600);\r\n setTimeout(spawnFlowerSparkles, 900);\r\n }\r\n } else {\r\n aura.classList.remove('on');\r\n const step = 360 \/ rank.petals;\r\n for (let i = 0; i < rank.petals; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = 'petal outer';\r\n petal.style.background = rank.petalColor;\r\n petal.style.setProperty('--rot', (i * step) + 'deg');\r\n petal.style.animationDelay = (i * 0.1) + 's';\r\n petal.style.transform = `rotate(${i * step}deg)`;\r\n flower.appendChild(petal);\r\n }\r\n center.textContent = rank.center;\r\n }\r\n}\r\n\r\n\/\/ ============ MAIN ============\r\nfunction calculateLove() {\r\n const name1 = document.getElementById('name1').value.trim().toLowerCase();\r\n const name2 = document.getElementById('name2').value.trim().toLowerCase();\r\n const resultDiv = document.getElementById('result');\r\n \r\n if (!name1 || !name2) {\r\n const emptyInput = !name1 ? document.getElementById('name1') : document.getElementById('name2');\r\n emptyInput.style.animation = 'shake 0.5s';\r\n emptyInput.style.borderColor = '#ff4d8f';\r\n setTimeout(() => {\r\n emptyInput.style.animation = '';\r\n emptyInput.style.borderColor = '';\r\n }, 500);\r\n return;\r\n }\r\n \r\n const combined = (name1 + name2).split('').sort().join('');\r\n let hash = 0;\r\n for (let i = 0; i < combined.length; i++) {\r\n hash = (hash * 31 + combined.charCodeAt(i)) % 100000;\r\n }\r\n const percent = hash % 101;\r\n \r\n const rank = getRanking(percent);\r\n const isSoulmates = rank.petals === 5;\r\n \r\n document.getElementById('percent').textContent = percent + '%';\r\n document.getElementById('percent').classList.toggle('soulmates', isSoulmates);\r\n \r\n const badge = document.getElementById('badge');\r\n badge.textContent = rank.badge;\r\n badge.style.background = rank.badgeColor;\r\n badge.classList.toggle('soulmates', isSoulmates);\r\n \r\n document.getElementById('message').textContent = rank.msg;\r\n document.getElementById('message').classList.toggle('soulmates', isSoulmates);\r\n \r\n const dn1 = name1.charAt(0).toUpperCase() + name1.slice(1);\r\n const dn2 = name2.charAt(0).toUpperCase() + name2.slice(1);\r\n const namesEl = document.getElementById('names');\r\n namesEl.textContent = `${dn1} \u2764\ufe0f ${dn2}`;\r\n namesEl.classList.toggle('soulmates', isSoulmates);\r\n \r\n buildFlower(rank);\r\n \r\n resultDiv.classList.remove('show');\r\n void resultDiv.offsetWidth;\r\n resultDiv.classList.add('show');\r\n \r\n setTimeout(spawnFloatingHearts, 400);\r\n}\r\n\r\n\/\/ ============ RESET ============\r\nfunction resetCalculator() {\r\n document.getElementById('name1').value = '';\r\n document.getElementById('name2').value = '';\r\n document.getElementById('result').classList.remove('show');\r\n document.querySelectorAll('.flower-sparkle, .falling-petal').forEach(el => el.remove());\r\n document.getElementById('aura').classList.remove('on');\r\n document.getElementById('name1').focus();\r\n}\r\n\r\n\/\/ Shake animation\r\nconst style = document.createElement('style');\r\nstyle.textContent = `\r\n @keyframes shake {\r\n 0%, 100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n }\r\n`;\r\ndocument.head.appendChild(style);\r\n\r\n\/\/ Enter key\r\ndocument.getElementById('name1').addEventListener('keypress', e => {\r\n if (e.key === 'Enter') document.getElementById('name2').focus();\r\n});\r\ndocument.getElementById('name2').addEventListener('keypress', e => {\r\n if (e.key === 'Enter') calculateLove();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2728 Love Calculator \u2728 Love Calculator Apna aur apne partner ka naam likhein \ud83d\udc95 \ud83d\udc96 Calculate Love \ud83c\udf37 \u2764\ufe0f 0% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"[]","_thinkrank_advanced_robots_meta":"[]","_thinkrank_exclude_from_search":0,"_thinkrank_exclude_from_archives":0,"_thinkrank_primary_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=221"}],"version-history":[{"count":28,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/221\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}