Love Compatibility Calculator 2025 ❤️

Love Compatibility Calculator 2025 /* Base styles for body and overall layout */ body { font-family: 'Poppins', sans-serif; /* Softer, more harmonious pink/purple gradient background */ background: linear-gradient(to bottom right, #fce4ec, #f8bbd0, #f48fb1); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; color: #333; overflow-x: hidden; /* Prevent horizontal scroll */ } /* Main container styling - responsive max-widths */ .container { background-color: white; padding: 2rem; border-radius: 1.5rem; /* Rounded corners */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Soft shadow */ width: 100%; /* Full width on small screens */ max-width: 400px; /* Max width for mobile */ margin-bottom: 2rem; animation: fadeIn 0.8s ease-out; /* Fade-in animation */ } /* Responsive adjustments for container max-width */ @media (min-width: 640px) { /* Small screens (sm) */ .container { max-width: 600px; } } @media (min-width: 768px) { /* Medium screens (md) */ .container { max-width: 768px; } } @media (min-width: 1024px) { /* Large screens (lg) */ .container { max-width: 900px; } } /* Fade-in animation for containers */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Input field styling */ input[type="text"], input[type="date"] { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; /* Rounded corners */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } /* Input focus styling */ input[type="text"]:focus, input[type="date"]:focus { outline: none; border-color: #d81b60; /* Vibrant pink focus */ box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.2); } /* Primary button styling (Calculate Compatibility) */ .btn-primary { background: linear-gradient(to right, #e91e63, #c2185b); /* Deep pink/rose gradient */ color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(194, 24, 91, 0.3); cursor: pointer; width: 100%; border: none; } /* Primary button hover effects */ .btn-primary:hover { background: linear-gradient(to right, #c2185b, #e91e63); box-shadow: 0 6px 15px rgba(194, 24, 91, 0.4); transform: translateY(-2px); } /* Result section styling */ .result-section { /* Lighter, softer pink gradient for results */ background: linear-gradient(to top left, #ffebee, #f8bbd0); padding: 2rem; border-radius: 1.5rem; box-shadow: 0 10px 25px rgba(248, 187, 208, 0.4); margin-top: 2rem; animation: slideInUp 0.8s ease-out forwards; /* Slide-in animation */ opacity: 0; /* Initially hidden */ transform: translateY(50px); /* Initially off-screen */ border: 2px solid #d81b60; /* Vibrant pink border */ } /* Slide-in animation for result section */ @keyframes slideInUp { to { opacity: 1; transform: translateY(0); } } /* Heart icon styling and pulse animation */ .heart-icon { color: #d81b60; /* Vibrant pink */ font-size: 2.5rem; margin-bottom: 1rem; text-align: center; animation: pulse 1.5s infinite alternate; } @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } } /* Donate button styling */ .donate-btn { background: linear-gradient(to right, #8e24aa, #4a148c); /* Deep purple gradient */ color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(74, 20, 140, 0.3); cursor: pointer; width: 100%; border: none; margin-top: 2rem; animation: glow 2s infinite alternate; } /* Donate button hover effects */ .donate-btn:hover { background: linear-gradient(to right, #4a148c, #8e24aa); box-shadow: 0 6px 15px rgba(74, 20, 140, 0.4); transform: translateY(-2px); } /* Glow animation for donate button */ @keyframes glow { from { box-shadow: 0 0 5px #8e24aa, 0 0 10px #8e24aa; } to { box-shadow: 0 0 15px #4a148c, 0 0 25px #4a148c; } } /* Custom Message Box Styles */ #messageBox { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #333; color: white; padding: 1rem 2rem; border-radius: 0.75rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; max-width: 90%; text-align: center; } #messageBox.show { opacity: 1; visibility: visible; } #messageBox.error { background-color: #ef4444; /* Red for errors */ } #messageBox.success { background-color: #22c55e; /* Green for success */ } Love Compatibility Calculator 2025 ❤️ Your Name: Your Birthdate: Partner's Name: Partner's Birthdate: Calculate Compatibility ❤️ Compatibility Result Qualities: Improvement Tips: Qualities: Improvement Tips: Export as PDF Share on WhatsApp Save Result Load Saved Result Donate to Support Developer Bank Transfer Details: Name: Majid Farooq Bank: Habib Bank Limited IBAN: PK40HABB0001947100292703 Country: Pakistan Scan to donate! Developed with ❤️ by Majid Farooq // Use window.onload to ensure the DOM is fully loaded before the script runs window.onload = function() { // Zodiac data and compatibility scores remain the same const zodiacData = { "Aries": { "traits": ["Bold", "Energetic", "Adventurous", "Confident", "Passionate"], "improvements": ["Patience", "Listening", "Avoiding Impulsiveness", "Staying Grounded"], "element": "Fire" }, "Taurus": { "traits": ["Reliable", "Patient", "Practical", "Devoted", "Responsible"], "improvements": ["Flexibility", "Openness to Change", "Releasing Control", "Spontaneity"], "element": "Earth" }, "Gemini": { "traits": ["Adaptable", "Expressive", "Intelligent", "Curious", "Social"], "improvements": ["Focus", "Decision-making", "Consistency", "Deep Listening"], "element": "Air" }, "Cancer": { "traits": ["Nurturing", "Intuitive", "Compassionate", "Protective", "Loyal"], "improvements": ["Emotional Boundaries", "Letting Go", "Self-care", "Direct Communication"], "element": "Water" }, "Leo": { "traits": ["Generous", "Creative", "Enthusiastic", "Broad-minded", "Warm-hearted"], "improvements": ["Humility", "Sharing Spotlight", "Listening to Feedback", "Self-reflection"], "element": "Fire" }, "Virgo": { "traits": ["Analytical", "Practical", "Diligent", "Kind", "Methodical"], "improvements": ["Self-acceptance", "Relaxation", "Delegation", "Avoiding Overthinking"], "element": "Earth" }, "Libra": { "traits": ["Gracious", "Fair-minded", "Social", "Diplomatic", "Idealistic"], "improvements": ["Assertiveness", "Decision-making", "Conflict Resolution", "Avoiding People-Pleasing"], "element": "Air" }, "Scorpio": { "traits": ["Resourceful", "Brave", "Passionate", "Stubborn", "True Friend"], "improvements": ["Trust", "Forgiveness", "Vulnerability", "Emotional Control"], "element": "Water" }, "Sagittarius": { "traits": ["Generous", "Idealistic", "Great Sense of Humor", "Optimistic", "Adventurous"], "improvements": ["Patience", "Tact", "Following Through", "Attention to Detail"], "element": "Fire" }, "Capricorn": { "traits": ["Responsible", "Disciplined", "Self-control", "Good Managers", "Practical"], "improvements": ["Relaxation", "Flexibility", "Emotional Expression", "Work-life Balance"], "element": "Earth" }, "Aquarius": { "traits": ["Progressive", "Original", "Independent", "Humanitarian", "Intellectual"], "improvements": ["Emotional Connection", "Practicality", "Compromise", "Grounding"], "element": "Air" }, "Pisces": { "traits": ["Compassionate", "Artistic", "Intuitive", "Gentle", "Wise"], "improvements": ["Boundaries", "Self-assertion", "Practicality", "Avoiding Escapism"], "element": "Water" } }; // Element compatibility scores (out of 100) const elementCompatibility = { "Fire": { "Fire": 80, "Earth": 40, "Air": 90, "Water": 30 }, "Earth": { "Fire": 40, "Earth": 85, "Air": 50, "Water": 95 }, "Air": { "Fire": 90, "Earth": 50, "Air": 80, "Water": 60 }, "Water": { "Fire": 30, "Earth": 95, "Air": 60, "Water": 85 } }; // Get elements from the DOM const yourNameInput = document.getElementById('yourName'); const yourBirthdateInput = document.getElementById('yourBirthdate'); const partnerNameInput = document.getElementById('partnerName'); const partnerBirthdateInput = document.getElementById('partnerBirthdate'); const calculateBtn = document.getElementById('calculateBtn'); const resultSection = document.getElementById('resultSection'); const matchScoreDisplay = document.getElementById('matchScore'); const compatibilityMessageDisplay = document.getElementById('compatibilityMessage'); const yourZodiacHeader = document.getElementById('yourZodiacHeader'); const yourQualitiesList = document.getElementById('yourQualities'); const yourImprovementsList = document.getElementById('yourImprovements'); const partnerZodiacHeader = document.getElementById('partnerZodiacHeader'); const partnerQualitiesList = document.getElementById('partnerQualities'); const partnerImprovementsList = document.getElementById('partnerImprovements'); const donateBtn = document.getElementById('donateBtn'); const donateDetails = document.getElementById('donateDetails'); const pdfExportBtn = document.getElementById('pdfExportBtn'); const whatsappShareBtn = document.getElementById('whatsappShareBtn'); const saveResultBtn = document.getElementById('saveResultBtn'); const loadResultBtn = document.getElementById('loadResultBtn'); const messageBox = document.getElementById('messageBox'); // Function to show custom message box function showMessage(message, type = 'info') { messageBox.textContent = message; messageBox.className = 'rounded-lg'; // Reset classes messageBox.classList.add('show'); if (type === 'error') { messageBox.classList.add('error'); } else if (type === 'success') { messageBox.classList.add('success'); } else { messageBox.style.backgroundColor = '#333'; // Default info color } setTimeout(() => { messageBox.classList.remove('show'); }, 3000); // Hide after 3 seconds } // Helper function to calculate zodiac sign from birthdate function getZodiacSign(dateString) { const date = new Date(dateString); const month = date.getMonth() + 1; // getMonth() is 0-indexed const day = date.getDate(); if ((month == 1 && day >= 20) || (month == 2 && day = 19) || (month == 3 && day = 21) || (month == 4 && day = 20) || (month == 5 && day = 21) || (month == 6 && day = 21) || (month == 7 && day = 23) || (month == 8 && day = 23) || (month == 9 && day = 23) || (month == 10 && day = 23) || (month == 11 && day = 22) || (month == 12 && day = 22) || (month == 1 && day total += parseInt(digit)); String(month).split('').forEach(digit => total += parseInt(digit)); String(day).split('').forEach(digit => total += parseInt(digit)); while (total > 9) { total = String(total).split('').reduce((sum, digit) => sum + parseInt(digit), 0); } return total; } // Simple name matching logic function getNameCompatibility(name1, name2) { const cleanName1 = name1.toLowerCase().replace(/[^a-z]/g, ''); const cleanName2 = name2.toLowerCase().replace(/[^a-z]/g, ''); let commonChars = 0; const charCount1 = {}; const charCount2 = {}; for (let char of cleanName1) { charCount1[char] = (charCount1[char] || 0) + 1; } for (let char of cleanName2) { charCount2[char] = (charCount2[char] || 0) + 1; } for (let char in charCount1) { if (charCount2[char]) { commonChars += Math.min(charCount1[char], charCount2[char]); } } const maxLength = Math.max(cleanName1.length, cleanName2.length); if (maxLength === 0) return 0; // Avoid division by zero return (commonChars / maxLength) * 100; // Returns a percentage } // Main calculation logic function calculateCompatibility() { const yourName = yourNameInput.value.trim(); const yourBirthdate = yourBirthdateInput.value; const partnerName = partnerNameInput.value.trim(); const partnerBirthdate = partnerBirthdateInput.value; if (!yourName || !yourBirthdate || !partnerName || !partnerBirthdate) { showMessage("Please fill in all fields to calculate compatibility!", 'error'); return; } const yourZodiac = getZodiacSign(yourBirthdate); const partnerZodiac = getZodiacSign(partnerBirthdate); // Check if zodiac data exists for the calculated signs if (!zodiacData[yourZodiac] || !zodiacData[partnerZodiac]) { showMessage("Could not determine zodiac signs for one or both birthdates. Please check the dates.", 'error'); return; } const yourNumerology = getNumerology(yourBirthdate); const partnerNumerology = getNumerology(partnerBirthdate); // Calculate scores let zodiacScore = 0; const yourElement = zodiacData[yourZodiac].element; const partnerElement = zodiacData[partnerZodiac].element; zodiacScore = elementCompatibility[yourElement][partnerElement] || 50; // Default if not found // Simple numerology score (closer numbers are more compatible) let numerologyScore = 100 - (Math.abs(yourNumerology - partnerNumerology) * 10); // Max 90 points diff -> 10% numerologyScore = Math.max(0, numerologyScore); // Ensure score is not negative // Name compatibility score const nameScore = getNameCompatibility(yourName, partnerName); // Combine scores with different weights // Zodiac: 50%, Numerology: 30%, Name: 20% const totalScore = (zodiacScore * 0.5) + (numerologyScore * 0.3) + (nameScore * 0.2); const finalScore = Math.round(totalScore); let compatibilityMessage = ""; if (finalScore >= 80) { compatibilityMessage = "You both are Very Compatible! A match made in heaven!"; } else if (finalScore >= 50) { compatibilityMessage = "You both have Average Compatibility. With effort, your bond can strengthen!"; } else { compatibilityMessage = "Your compatibility is Challenging but Worth It! Love conquers all!"; } displayResults(finalScore, compatibilityMessage, yourZodiac, partnerZodiac, yourName, partnerName); } // Function to display results function displayResults(score, message, yourZodiac, partnerZodiac, yourName, partnerName) { matchScoreDisplay.textContent = `${score}% Match Score`; compatibilityMessageDisplay.textContent = message; // Display your zodiac qualities and improvements yourZodiacHeader.textContent = `${yourName}'s Zodiac: ${yourZodiac}`; yourQualitiesList.innerHTML = ''; zodiacData[yourZodiac].traits.forEach(trait => { const li = document.createElement('li'); li.textContent = trait; yourQualitiesList.appendChild(li); }); yourImprovementsList.innerHTML = ''; zodiacData[yourZodiac].improvements.forEach(tip => { const li = document.createElement('li'); li.textContent = tip; yourImprovementsList.appendChild(li); }); // Display partner's zodiac qualities and improvements partnerZodiacHeader.textContent = `${partnerName}'s Zodiac: ${partnerZodiac}`; partnerQualitiesList.innerHTML = ''; zodiacData[partnerZodiac].traits.forEach(trait => { const li = document.createElement('li'); li.textContent = trait; partnerQualitiesList.appendChild(li); }); partnerImprovementsList.innerHTML = ''; zodiacData[partnerZodiac].improvements.forEach(tip => { const li = document.createElement('li'); li.textContent = tip; partnerImprovementsList.appendChild(li); }); resultSection.classList.remove('hidden'); resultSection.style.opacity = '0'; // Reset for animation resultSection.style.transform = 'translateY(50px)'; // Reset for animation setTimeout(() => { resultSection.style.opacity = '1'; resultSection.style.transform = 'translateY(0)'; }, 100); // Small delay to ensure CSS transition applies } // Event Listeners - Now correctly placed inside window.onload calculateBtn.addEventListener('click', calculateCompatibility); donateBtn.addEventListener('click', () => { donateDetails.classList.toggle('hidden'); }); pdfExportBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFont("helvetica"); doc.setFontSize(22); doc.setTextColor(216, 27, 96); // Vibrant pink color doc.text("Love Compatibility Report", 105, 20, null, null, "center"); doc.setFontSize(14); doc.setTextColor(51, 51, 51); // Dark gray doc.text(`Your Name: ${yourNameInput.value}`, 20, 40); doc.text(`Your Birthdate: ${yourBirthdateInput.value}`, 20, 47); doc.text(`Partner's Name: ${partnerNameInput.value}`, 20, 54); doc.text(`Partner's Birthdate: ${partnerBirthdateInput.value}`, 20, 61); doc.setFontSize(18); doc.setTextColor(194, 24, 91); // Deep pink doc.text(`Compatibility Score: ${matchScoreDisplay.textContent}`, 105, 80, null, null, "center"); doc.setFontSize(14); doc.text(compatibilityMessageDisplay.textContent, 105, 90, null, null, "center"); let yOffset = 110; const addSection = (title, qualities, improvements) => { doc.setFontSize(16); doc.setTextColor(216, 27, 96); doc.text(title, 20, yOffset); yOffset += 7; doc.setFontSize(12); doc.setTextColor(51, 51, 51); doc.text("Qualities:", 25, yOffset); yOffset += 7; qualities.forEach(item => { doc.text(`- ${item}`, 30, yOffset); yOffset += 7; }); yOffset += 5; // Extra space doc.text("Improvement Tips:", 25, yOffset); yOffset += 7; improvements.forEach(item => { doc.text(`- ${item}`, 30, yOffset); yOffset += 7; }); yOffset += 10; // Space between sections }; const yourZodiac = getZodiacSign(yourBirthdateInput.value); const partnerZodiac = getZodiacSign(partnerBirthdateInput.value); addSection(`${yourNameInput.value}'s Zodiac: ${yourZodiac}`, zodiacData[yourZodiac].traits, zodiacData[yourZodiac].improvements); addSection(`${partnerNameInput.value}'s Zodiac: ${partnerZodiac}`, zodiacData[partnerZodiac].traits, zodiacData[partnerZodiac].improvements); doc.save("Love_Compatibility_Report.pdf"); showMessage('PDF report generated successfully!', 'success'); }); whatsappShareBtn.addEventListener('click', () => { const yourName = yourNameInput.value.trim(); const partnerName = partnerNameInput.value.trim(); const score = matchScoreDisplay.textContent; const message = compatibilityMessageDisplay.textContent; if (!yourName || !partnerName || !score) { showMessage("Please calculate compatibility first to share!", 'error'); return; } const shareText = `💖 Love Compatibility Report for ${yourName} & ${partnerName}:\n${score}\n${message}\n\nCheck your compatibility at: ${window.location.href}`; const whatsappUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(shareText)}`; window.open(whatsappUrl, '_blank'); }); saveResultBtn.addEventListener('click', () => { if (!matchScoreDisplay.textContent) { showMessage("Please calculate compatibility first to save the result!", 'error'); return; } const result = { yourName: yourNameInput.value, yourBirthdate: yourBirthdateInput.value, partnerName: partnerNameInput.value, partnerBirthdate: partnerBirthdateInput.value, matchScore: matchScoreDisplay.textContent, compatibilityMessage: compatibilityMessageDisplay.textContent, yourZodiac: getZodiacSign(yourBirthdateInput.value), partnerZodiac: getZodiacSign(partnerBirthdateInput.value) }; localStorage.setItem('loveCompatibilityResult', JSON.stringify(result)); showMessage('Compatibility result saved to your browser!', 'success'); }); loadResultBtn.addEventListener('click', () => { const savedResult = localStorage.getItem('loveCompatibilityResult'); if (savedResult) { const result = JSON.parse(savedResult); yourNameInput.value = result.yourName; yourBirthdateInput.value = result.yourBirthdate; partnerNameInput.value = result.partnerName; partnerBirthdateInput.value = result.partnerBirthdate; displayResults( parseInt(result.matchScore.replace('% Match Score', '')), result.compatibilityMessage, result.yourZodiac, result.partnerZodiac, result.yourName, result.partnerName ); showMessage('Saved compatibility result loaded!', 'success'); } else { showMessage('No saved result found.', 'info'); } }); };