Baby-Name-Generator

Running

File size: 17,324 Bytes

<!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">
            <!-- 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>