|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Personalized Baby Name Generator</title> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #FF9FB0; |
|
|
--secondary: #A6D9F7; |
|
|
--accent: #B6E6BD; |
|
|
--dark: #2D3748; |
|
|
--light: #F7FAFC; |
|
|
--shadow: rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Arial, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #f6f8fc 0%, #fff 100%); |
|
|
color: var(--dark); |
|
|
min-height: 100vh; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
padding: 2rem; |
|
|
background: white; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 4px 6px var(--shadow); |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
color: var(--primary); |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.generator-form { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.form-section { |
|
|
background: white; |
|
|
padding: 1.5rem; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 4px 6px var(--shadow); |
|
|
} |
|
|
|
|
|
.form-section h2 { |
|
|
color: var(--secondary); |
|
|
margin-bottom: 1rem; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.input-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
color: var(--dark); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
select, input { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border: 2px solid #E2E8F0; |
|
|
border-radius: 0.5rem; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
select:focus, input:focus { |
|
|
border-color: var(--primary); |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(255, 159, 176, 0.2); |
|
|
} |
|
|
|
|
|
.traits-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
|
|
gap: 0.5rem; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.trait-chip { |
|
|
padding: 0.5rem; |
|
|
background: var(--light); |
|
|
border: 1px solid #E2E8F0; |
|
|
border-radius: 2rem; |
|
|
cursor: pointer; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.trait-chip.selected { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
.generate-btn { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 1rem 2rem; |
|
|
border-radius: 0.5rem; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
width: 100%; |
|
|
transition: all 0.3s ease; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.generate-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(255, 159, 176, 0.3); |
|
|
} |
|
|
|
|
|
.results-section { |
|
|
margin-top: 2rem; |
|
|
background: white; |
|
|
padding: 2rem; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 4px 6px var(--shadow); |
|
|
} |
|
|
|
|
|
.name-card { |
|
|
background: var(--light); |
|
|
padding: 1.5rem; |
|
|
border-radius: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.name-card:hover { |
|
|
transform: translateX(5px); |
|
|
background: #F0F7FF; |
|
|
} |
|
|
|
|
|
.name-details h3 { |
|
|
color: var(--primary); |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.name-meaning { |
|
|
font-size: 0.9rem; |
|
|
color: #666; |
|
|
} |
|
|
|
|
|
.personality-tags { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
flex-wrap: wrap; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.personality-tag { |
|
|
background: var(--secondary); |
|
|
color: white; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 1rem; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.favorite-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.favorite-btn:hover { |
|
|
transform: scale(1.2); |
|
|
} |
|
|
|
|
|
.favorites-section { |
|
|
margin-top: 2rem; |
|
|
background: white; |
|
|
padding: 2rem; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 4px 6px var(--shadow); |
|
|
} |
|
|
|
|
|
.favorites-section h2 { |
|
|
color: var(--primary); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.name-card { |
|
|
animation: fadeIn 0.5s ease forwards; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.generator-form { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>👶 Personalized Baby Name Generator</h1> |
|
|
<p>Create the perfect name based on your family's unique characteristics</p> |
|
|
</div> |
|
|
|
|
|
<div class="generator-form"> |
|
|
<div class="form-section"> |
|
|
<h2>Basic Information</h2> |
|
|
<div class="input-group"> |
|
|
<label for="gender">Baby's Gender</label> |
|
|
<select id="gender"> |
|
|
<option value="all">All</option> |
|
|
<option value="boy">Boy</option> |
|
|
<option value="girl">Girl</option> |
|
|
<option value="neutral">Gender Neutral</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="input-group"> |
|
|
<label for="origin">Cultural Background</label> |
|
|
<select id="origin" multiple> |
|
|
<option value="english">English</option> |
|
|
<option value="french">French</option> |
|
|
<option value="spanish">Spanish</option> |
|
|
<option value="italian">Italian</option> |
|
|
<option value="greek">Greek</option> |
|
|
<option value="celtic">Celtic</option> |
|
|
<option value="nordic">Nordic</option> |
|
|
<option value="hebrew">Hebrew</option> |
|
|
<option value="arabic">Arabic</option> |
|
|
<option value="persian">Persian</option> |
|
|
<option value="indian">Indian</option> |
|
|
<option value="chinese">Chinese</option> |
|
|
<option value="japanese">Japanese</option> |
|
|
<option value="korean">Korean</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
|
<h2>Mother's Characteristics</h2> |
|
|
<div class="input-group"> |
|
|
<label>Select Personality Traits</label> |
|
|
<div class="traits-container" id="motherTraits"> |
|
|
<div class="trait-chip" data-trait="creative">Creative</div> |
|
|
<div class="trait-chip" data-trait="intelligent">Intelligent</div> |
|
|
<div class="trait-chip" data-trait="caring">Caring</div> |
|
|
<div class="trait-chip" data-trait="strong">Strong</div> |
|
|
<div class="trait-chip" data-trait="artistic">Artistic</div> |
|
|
<div class="trait-chip" data-trait="adventurous">Adventurous</div> |
|
|
<div class="trait-chip" data-trait="peaceful">Peaceful</div> |
|
|
<div class="trait-chip" data-trait="wise">Wise</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-section"> |
|
|
<h2>Father's Characteristics</h2> |
|
|
<div class="input-group"> |
|
|
<label>Select Personality Traits</label> |
|
|
<div class="traits-container" id="fatherTraits"> |
|
|
<div class="trait-chip" data-trait="protective">Protective</div> |
|
|
<div class="trait-chip" data-trait="loyal">Loyal</div> |
|
|
<div class="trait-chip" data-trait="brave">Brave</div> |
|
|
<div class="trait-chip" data-trait="gentle">Gentle</div> |
|
|
<div class="trait-chip" data-trait="ambitious">Ambitious</div> |
|
|
<div class="trait-chip" data-trait="wise">Wise</div> |
|
|
<div class="trait-chip" data-trait="humorous">Humorous</div> |
|
|
<div class="trait-chip" data-trait="athletic">Athletic</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="generate-btn" onclick="generateNames()">Generate Perfect Names</button> |
|
|
|
|
|
<div class="results-section" id="results"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="favorites-section"> |
|
|
<h2>❤️ Favorite Names</h2> |
|
|
<div id="favoritesList"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const nameDatabase = { |
|
|
boy: { |
|
|
creative: ['Leonardo', 'Byron', 'Vincent', 'Aiden'], |
|
|
intelligent: ['Solomon', 'Ethan', 'Adrian', 'Theodore'], |
|
|
strong: ['Alexander', 'Thor', 'Viktor', 'Bruno'], |
|
|
protective: ['William', 'Guardian', 'Ward', 'Reign'], |
|
|
brave: ['Valor', 'Leo', 'Wyatt', 'Ethan'], |
|
|
gentle: ['Oliver', 'Liam', 'Noah', 'Benjamin'], |
|
|
wise: ['Sage', 'Solomon', 'Alvis', 'Kenneth'] |
|
|
}, |
|
|
girl: { |
|
|
creative: ['Luna', 'Aurora', 'Aria', 'Maya'], |
|
|
intelligent: ['Sophia', 'Athena', 'Claire', 'Ada'], |
|
|
caring: ['Grace', 'Hannah', 'Lily', 'Mira'], |
|
|
artistic: ['Melody', 'Violet', 'Iris', 'Aria'], |
|
|
peaceful: ['Serena', 'Dove', 'Paz', 'Shanti'], |
|
|
wise: ['Sophia', 'Minerva', 'Sage', 'Alena'] |
|
|
}, |
|
|
neutral: { |
|
|
creative: ['Alex', 'River', 'Sky', 'Phoenix'], |
|
|
strong: ['Morgan', 'Kai', 'Atlas', 'Storm'], |
|
|
wise: ['Sage', 'Quinn', 'Blair', 'Eden'], |
|
|
peaceful: ['Harmony', 'Peace', 'Robin', 'Dawn'] |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const nameMeanings = { |
|
|
'Alexander': 'Defender of the people', |
|
|
'Sophia': 'Wisdom', |
|
|
'Luna': 'Moon', |
|
|
'Ethan': 'Strong, enduring', |
|
|
'Grace': 'Elegance and divine favor', |
|
|
|
|
|
}; |
|
|
|
|
|
let favorites = new Set(); |
|
|
let selectedTraits = { |
|
|
mother: new Set(), |
|
|
father: new Set() |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.trait-chip').forEach(chip => { |
|
|
chip.addEventListener('click', () => { |
|
|
const parent = chip.parentElement.id; |
|
|
const trait = chip.dataset.trait; |
|
|
const traitSet = parent === 'motherTraits' ? selectedTraits.mother : selectedTraits.father; |
|
|
|
|
|
chip.classList.toggle('selected'); |
|
|
if (traitSet.has(trait)) { |
|
|
traitSet.delete(trait); |
|
|
} else { |
|
|
traitSet.add(trait); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
function generateNames() { |
|
|
const gender = document.getElementById('gender').value; |
|
|
const origins = Array.from(document.getElementById('origin').selectedOptions).map(option => option.value); |
|
|
|
|
|
let names = new Set(); |
|
|
const traits = [...selectedTraits.mother, ...selectedTraits.father]; |
|
|
|
|
|
|
|
|
traits.forEach(trait => { |
|
|
if (gender === 'all' || gender === 'neutral') { |
|
|
if (nameDatabase.neutral[trait]) { |
|
|
nameDatabase.neutral[trait].forEach(name => names.add(name)); |
|
|
} |
|
|
} |
|
|
if (gender === 'all' || gender === 'boy') { |
|
|
if (nameDatabase.boy[trait]) { |
|
|
nameDatabase.boy[trait].forEach(name => names.add(name)); |
|
|
} |
|
|
} |
|
|
if (gender === 'all' || gender === 'girl') { |
|
|
if (nameDatabase.girl[trait]) { |
|
|
nameDatabase.girl[trait].forEach(name => names.add(name)); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
displayResults(Array.from(names)); |
|
|
} |
|
|
|
|
|
function displayResults(names) { |
|
|
const resultsDiv = document.getElementById('results'); |
|
|
resultsDiv.innerHTML = '<h2>Suggested Names</h2>'; |
|
|
|
|
|
if (names.length === 0) { |
|
|
resultsDiv.innerHTML += '<p>No names match your criteria. Try selecting different traits.</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
names.forEach((name, index) => { |
|
|
const nameCard = document.createElement('div'); |
|
|
nameCard.className = 'name-card'; |
|
|
nameCard.style.animationDelay = `${index * 0.1}s`; |
|
|
|
|
|
const relatedTraits = findRelatedTraits(name); |
|
|
const meaning = nameMeanings[name] || 'A beautiful name'; |
|
|
|
|
|
nameCard.innerHTML = ` |
|
|
<div class="name-details"> |
|
|
<h3>${name}</h3> |
|
|
<div class="name-meaning">${meaning}</div> |
|
|
<div class="personality-tags"> |
|
|
${relatedTraits.map(trait => |
|
|
`<span class="personality-tag">${trait}</span>` |
|
|
).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<button class="favorite-btn" onclick="toggleFavorite('${name}')"> |
|
|
${favorites.has(name) ? '❤️' : '🤍'} |
|
|
</button> |
|
|
`; |
|
|
|
|
|
resultsDiv.appendChild(nameCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
function findRelatedTraits(name) { |
|
|
let traits = new Set(); |
|
|
|
|
|
Object.entries(nameDatabase).forEach(([gender, traitGroups]) => { |
|
|
Object.entries(traitGroups).forEach(([trait, names]) => { |
|
|
if (names.includes(name)) { |
|
|
traits.add(trait); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
return Array.from(traits); |
|
|
} |
|
|
|
|
|
function toggleFavorite(name) { |
|
|
if (favorites.has(name)) { |
|
|
favorites.delete(name); |
|
|
} else { |
|
|
favorites.add(name); |
|
|
} |
|
|
updateFavorites(); |
|
|
generateNames(); |
|
|
} |
|
|
|
|
|
function updateFavorites() { |
|
|
const favoritesList = document.getElementById('favoritesList'); |
|
|
favoritesList.innerHTML = ''; |
|
|
|
|
|
if (favorites.size === 0) { |
|
|
favoritesList.innerHTML = '<p>No favorite names yet</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
[...favorites].forEach(name => { |
|
|
const nameCard = document.createElement('div'); |
|
|
nameCard.className = 'name-card'; |
|
|
const relatedTraits = findRelatedTraits(name); |
|
|
const meaning = nameMeanings[name] || 'A beautiful name'; |
|
|
|
|
|
nameCard.innerHTML = ` |
|
|
<div class="name-details"> |
|
|
<h3>${name}</h3> |
|
|
<div class="name-meaning">${meaning}</div> |
|
|
<div class="personality-tags"> |
|
|
${relatedTraits.map(trait => |
|
|
`<span class="personality-tag">${trait}</span>` |
|
|
).join('')} |
|
|
</div> |
|
|
</div> |
|
|
<button class="favorite-btn" onclick="toggleFavorite('${name}')">❤️</button> |
|
|
`; |
|
|
|
|
|
favoritesList.appendChild(nameCard); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
generateNames(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
