<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* General Styling and Background */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #fce4ec; /* Lightest pink background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.calculator-container {
width: 95%;
max-width: 1000px;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* Header (Top Pink Bar) */
.header {
background-color: #e91e63; /* Vibrant Pink */
color: white;
padding: 20px 0;
text-align: center;
}
.header h1 {
margin: 0;
font-weight: 700;
letter-spacing: 1px;
font-size: 1.8rem;
}
.header .fa-heart {
color: #ffcdd2;
margin-left: 10px;
}
/* Main Content Layout */
.content-wrapper {
display: flex;
min-height: 600px;
}
/* --- Left Section - Form --- */
.form-section {
flex: 1;
padding: 30px;
background-color: #ffffff;
border-right: 1px solid #f0f0f0;
}
.form-section h2 {
color: #e91e63;
font-size: 1.4rem;
margin-top: 0;
margin-bottom: 10px;
font-weight: 500; /* Adjusted for better match */
}
.form-section h2 .fa-heart {
margin-right: 8px;
}
.form-section p {
color: #666;
margin-bottom: 25px;
font-size: 0.9rem;
}
/* Input Group Styling */
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
font-weight: 700;
color: #333;
margin-bottom: 5px;
font-size: 0.9rem;
}
/* Two-column field group labels (Gender/DOB) */
.two-column-group > .input-group > label {
/* Special handling for two-column labels to be on one line */
display: inline-block;
}
.input-field {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
padding: 0 10px; /* Only horizontal padding for input-field container */
}
.input-field input, .input-group select {
border: none;
outline: none;
width: 100%;
padding: 12px 0; /* Vertical padding applied directly to elements */
font-size: 0.95rem;
color: #333;
background: transparent;
}
.input-field .fas {
color: #e91e63;
margin-right: 10px;
}
/* Fix for date input icon */
input[type="date"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 10px;
}
/* Select element specific styling */
.input-group select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 12px 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
width: 100%;
font-size: 0.95rem;
color: #333;
/* Remove standard select arrow */
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%23e91e63%22%20d%3D%22M287%20197.8%20146.2%2057%205.4%20197.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
padding-right: 25px; /* Make space for the custom arrow */
}
/* Two Column Layout */
.two-column-group {
display: flex;
gap: 15px;
}
.two-column-group .input-group {
flex: 1;
}
/* Button Styling */
.button-group {
display: flex;
justify-content: space-between;
margin-top: 35px; /* Increased margin to match screenshot */
}
.btn {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease;
width: 48%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn .fas {
margin-right: 5px;
}
.btn-clear {
background-color: #f44336; /* Red */
color: white;
}
.btn-clear:hover {
background-color: #d32f2f;
}
.btn-calculate {
background-color: #ff4081; /* Accent Pink */
color: white;
}
.btn-calculate:hover {
background-color: #f50057;
}
/* --- Right Section - Result --- */
.result-section {
flex: 1;
padding: 30px;
background-color: #fce4ec; /* Light Pink for the result area */
display: flex;
flex-direction: column;
}
.result-section h2 {
color: #e91e63;
font-size: 1.3rem;
border-bottom: 1px solid #e91e63;
padding-bottom: 10px;
margin-top: 0;
font-weight: 500; /* Adjusted for better match */
}
.result-section h2 .fa-file-alt {
margin-right: 8px;
}
/* Initial state of the result description */
.result-section > p {
color: #a00037;
font-style: italic;
font-size: 1rem;
margin-top: 20px;
}
#compatibility-result {
flex-grow: 1;
padding-top: 20px;
}
/* Styles for the new calculated result */
.result-header-msg {
font-size: 1.1rem;
font-weight: 500;
color: #333;
margin-bottom: 15px;
}
.result-card {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 25px;
}
.percentage-line {
font-size: 1.8rem;
font-weight: 700;
color: #e91e63;
margin-bottom: 5px;
}
.percentage-line .fa-heart {
color: #ff4081;
margin: 0 5px;
font-size: 2rem;
}
.percentage-line strong {
font-size: 3rem; /* Larger percentage font size */
font-weight: 900;
display: inline-block;
margin: 0 5px;
}
.result-message {
font-size: 0.95rem;
color: #666;
margin-top: 10px;
line-height: 1.5;
}
.result-message .fas.fa-ribbon {
color: #ff4081;
margin-left: 5px;
}
.time-together-info {
background-color: #fff; /* White background for this section, same as result card */
border-radius: 8px;
padding: 15px;
margin-bottom: 25px;
color: #333;
font-size: 0.95rem;
line-height: 1.6;
text-align: left;
border: 1px solid #f0f0f0; /* Subtle border */
}
.time-together-info p {
margin: 5px 0;
}
.time-together-info i {
margin-right: 10px;
color: #e91e63;
}
.time-together-info strong {
font-weight: 500;
}
.relationship-quote {
font-style: italic;
color: #e91e63;
padding-top: 15px;
font-size: 0.95rem;
border-top: 1px dashed #ffcdd2; /* Subtle dashed line */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
min-height: auto;
}
.form-section {
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
.two-column-group {
flex-direction: column;
gap: 0;
}
.btn {
width: 100%;
margin-bottom: 10px;
}
.button-group {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="calculator-container">
<header class="header">
<h1>Love Calculator <i class="fas fa-heart"></i></h1>
</header>
<div class="content-wrapper">
<div class="form-section">
<h2><i class="fas fa-heart"></i> Find Your Love Percentage</h2>
<p>Enter your name, gender, and date of birth to calculate your love compatibility.</p>
<form id="love-calculator-form">
<div class="input-group">
<label for="your-name">Your Name</label>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="your-name" name="your-name" placeholder="Enter your name" required>
</div>
</div>
<div class="input-group">
<label for="partner-name">Partner's Name</label>
<div class="input-field">
<i class="fas fa-user-friends"></i>
<input type="text" id="partner-name" name="partner-name" placeholder="Enter your partner's name" required>
</div>
</div>
<div class="two-column-group">
<div class="input-group">
<label for="your-gender">Your Gender</label>
<select id="your-gender" name="your-gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="input-group">
<label for="partner-gender">Partner Gender</label>
<select id="partner-gender" name="partner-gender">
<option value="female" selected>Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="input-group">
<label for="relationship-start">Relationship Start Date</label>
<div class="input-field">
<i class="fas fa-calendar-alt"></i>
<input type="date" id="relationship-start" name="relationship-start" required>
</div>
</div>
<div class="input-group">
<label for="marital-status">Marital Status</label>
<select id="marital-status" name="marital-status">
<option value="dating" selected>Dating</option>
<option value="married">Married</option>
<option value="engaged">Engaged</option>
<option value="single">Single</option>
</select>
</div>
<div class="two-column-group">
<div class="input-group">
<label for="your-dob">Your Date of Birth</label>
<div class="input-field date-input-field">
<i class="fas fa-calendar-alt"></i>
<input type="date" id="your-dob" name="your-dob" required>
</div>
</div>
<div class="input-group">
<label for="partner-dob">Partner's Date of Birth</label>
<div class="input-field date-input-field">
<i class="fas fa-calendar-alt"></i>
<input type="date" id="partner-dob" name="partner-dob" required>
</div>
</div>
</div>
<div class="button-group">
<button type="reset" class="btn btn-clear"><i class="fas fa-times"></i> Clear</button>
<button type="submit" class="btn btn-calculate"><i class="fas fa-calculator"></i> Calculate</button>
</div>
</form>
</div>
<div class="result-section">
<h2><i class="fas fa-file-alt"></i> Love Compatibility Result</h2>
<p id="initial-message" class="initial-message">Please enter all details to see your love compatibility result.</p>
<div id="compatibility-result">
</div>
</div>
</div>
</div>
<script>
function calculateTimeTogether(startDate) {
if (!startDate) return { years: 0, months: 0, days: 0, startDay: 'N/A' };
const start = new Date(startDate);
const today = new Date();
// Format start day name
const options = { weekday: 'long' };
const startDay = start.toLocaleDateString('en-US', options);
// Calculation for the duration (accurate for years and months)
let year = today.getFullYear() - start.getFullYear();
let month = today.getMonth() - start.getMonth();
let day = today.getDate() - start.getDate();
if (day < 0) {
month--;
day += new Date(today.getFullYear(), today.getMonth(), 0).getDate(); // Days in the previous month
}
if (month < 0) {
year--;
month += 12;
}
// Check for future date (though form validation should prevent this)
if (year < 0 || (year === 0 && month < 0) || (year === 0 && month === 0 && day < 0)) {
return { years: 0, months: 0, days: 0, startDay: startDay };
}
return { years: year, months: month, days: day, startDay: startDay };
}
function generateCompatibilityMessage(percentage) {
if (percentage >= 80) return "Your bond is strong and filled with beautiful moments!";
if (percentage >= 60) return "A wonderful match! Continue to nurture your relationship.";
if (percentage >= 40) return "There's potential here! Communication and effort will make it blossom.";
return "Every relationship is unique. Focus on what truly matters to both of you!";
}
function generateRelationshipQuote(percentage) {
if (percentage >= 70) return "A great relationship is built on trust, respect, and love. Keep cherishing each other!";
if (percentage >= 50) return "Love doesn't just happen, it takes work. Give it your best and enjoy the journey!";
return "Life is short. Spend it with people who make you smile. Every relationship is a chance to learn and grow.";
}
document.getElementById('love-calculator-form').addEventListener('submit', function(event) {
event.preventDefault();
// 1. Get Input Values
const yourName = document.getElementById('your-name').value.trim();
const partnerName = document.getElementById('partner-name').value.trim();
const relationshipStart = document.getElementById('relationship-start').value;
// Simple validation
if (!yourName || !partnerName || !relationshipStart) {
alert('Please fill in Your Name, Partner\'s Name, and Relationship Start Date.');
return;
}
// 2. Placeholder Calculation Logic (Using a fixed value for demonstration, like 84%)
// For a real calculator, you'd use a complex algorithm.
let lovePercentage = 84; // Fixed value to match the screenshot for testing the design
// 3. Time Together Calculation
const timeData = calculateTimeTogether(relationshipStart);
const compatibilityMessage = generateCompatibilityMessage(lovePercentage);
const relationshipQuote = generateRelationshipQuote(lovePercentage);
// 4. Update the Result Display
const resultDiv = document.getElementById('compatibility-result');
document.getElementById('initial-message').style.display = 'none';
const resultHTML = `
<p class="result-header-msg">Hello ${yourName} and ${partnerName},</p>
<div class="result-card">
<p class="percentage-line">
<i class="fas fa-heart"></i> Your Love Compatibility is <strong style="color: #e91e63;">${lovePercentage}%</strong>
<i class="fas fa-heart"></i>
</p>
<p class="result-message">
${compatibilityMessage} <i class="fas fa-ribbon"></i>
</p>
</div>
<div class="time-together-info">
<p>
<i class="fas fa-ring"></i>
<strong>Relationship Start Date:</strong> ${timeData.startDay}
</p>
<p>
<i class="fas fa-calendar-alt"></i>
<strong>Time Together:</strong> ${timeData.years} years, ${timeData.months} months, and ${timeData.days} days
</p>
</div>
<p class="relationship-quote">
"${relationshipQuote}"
</p>
`;
// Show calculation progress
resultDiv.innerHTML = '<p class="result-header-msg" style="text-align: center;">Calculating...</p>';
setTimeout(() => {
resultDiv.innerHTML = resultHTML;
}, 1000);
});
// Ensure "Clear" button resets the result too
document.querySelector('.btn-clear').addEventListener('click', function() {
// Reset fields
document.getElementById('love-calculator-form').reset();
// Reset result area
document.getElementById('compatibility-result').innerHTML = '';
document.getElementById('initial-message').style.display = 'block';
});
</script>
</body>
</html>
Comments
Post a Comment