Spaces:
Running
Running
| <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"> | |
| <!-- Generated names will appear here --> | |
| </div> | |
| <div class="favorites-section"> | |
| <h2>❤️ Favorite Names</h2> | |
| <div id="favoritesList"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Extended name database with meanings and trait associations | |
| 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'] | |
| } | |
| }; | |
| // Name meanings database | |
| const nameMeanings = { | |
| 'Alexander': 'Defender of the people', | |
| 'Sophia': 'Wisdom', | |
| 'Luna': 'Moon', | |
| 'Ethan': 'Strong, enduring', | |
| 'Grace': 'Elegance and divine favor', | |
| // Add more meanings as needed | |
| }; | |
| let favorites = new Set(); | |
| let selectedTraits = { | |
| mother: new Set(), | |
| father: new Set() | |
| }; | |
| // Setup trait selection | |
| 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]; | |
| // Generate names based on selected traits | |
| 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(); // Refresh current results | |
| } | |
| 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); | |
| }); | |
| } | |
| // Initialize with empty results | |
| generateNames(); | |
| </script> | |
| </body> | |
| </html> |