3D-GAME

Running

App Files Files Community

ginipick commited on 13 days ago

Commit

12bcf64

verified ·

1 Parent(s): db432b2

Update index.html

Browse files

Files changed (1) hide show

index.html +395 -283

index.html CHANGED Viewed

@@ -3,190 +3,228 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Screen Analysis & OCR Tool</title>
-    <!-- Include Tesseract.js for OCR -->
-    <script src="https://unpkg.com/[email protected]/dist/tesseract.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: Arial, sans-serif;
         }
         body {
-            background: #f0f2f5;
-            padding: 20px;
         }
         .container {
-            max-width: 1200px;
             margin: 0 auto;
         }
         .header {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            margin-bottom: 20px;
             text-align: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .controls {
             background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
         }
-        button {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            min-width: 120px;
-            justify-content: center;
         }
-        .start-btn {
-            background: #4CAF50;
-            color: white;
         }
-        .stop-btn {
-            background: #f44336;
-            color: white;
         }
-        .clear-btn {
-            background: #2196F3;
-            color: white;
         }
-        button:disabled {
-            background: #ccc;
-            cursor: not-allowed;
         }
-        .preview-area {
-            background: black;
-            border-radius: 8px;
-            overflow: hidden;
-            margin-bottom: 20px;
-            position: relative;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        #preview {
             width: 100%;
-            aspect-ratio: 16/9;
-            object-fit: contain;
         }
-        .recording-dot {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            width: 12px;
-            height: 12px;
-            background: red;
-            border-radius: 50%;
-            animation: pulse 1s infinite;
         }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
         }
-        .logs {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            overflow: hidden;
         }
-        .log-entry {
-            padding: 20px;
-            border-bottom: 1px solid #eee;
-            display: grid;
-            grid-template-columns: 300px 1fr;
-            gap: 20px;
         }
-        .screenshot-container {
-            position: relative;
         }
-        .screenshot {
-            width: 100%;
-            border-radius: 4px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        .change-highlight {
-            position: absolute;
-            border: 2px solid red;
-            background: rgba(255,0,0,0.2);
-            pointer-events: none;
         }
-        .info-panel {
             display: flex;
-            flex-direction: column;
-            gap: 15px;
         }
-        .timestamp {
-            color: #666;
-            font-size: 14px;
         }
-        .text-content {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 4px;
-            font-size: 14px;
-            line-height: 1.5;
-            max-height: 200px;
-            overflow-y: auto;
         }
-        .actions {
             display: flex;
-            gap: 10px;
-            margin-top: 10px;
         }
-        .download-btn {
-            background: #4CAF50;
             color: white;
-            padding: 8px 16px;
-            border-radius: 4px;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 5px;
-            font-size: 14px;
         }
-        .processing {
-            color: #666;
-            font-style: italic;
         }
         @media (max-width: 768px) {
-            .log-entry {
                 grid-template-columns: 1fr;
             }
         }
@@ -195,200 +233,274 @@
 <body>
     <div class="container">
         <div class="header">
-            <h1>Screen Analysis & OCR Tool</h1>
-            <p>Capture, analyze, and extract text from your screen</p>
         </div>
-        <div class="controls">
-            <button id="startBtn" class="start-btn">▶ Start Capture</button>
-            <button id="stopBtn" class="stop-btn" disabled>⬛ Stop</button>
-            <button id="clearBtn" class="clear-btn">🗑 Clear Logs</button>
         </div>
-        <div class="preview-area">
-            <video id="preview" autoplay></video>
-            <div class="recording-dot" style="display: none;"></div>
         </div>
-        <div class="logs" id="logContainer"></div>
     </div>
     <script>
-        let mediaStream = null;
-        let captureInterval = null;
-        let lastImageData = null;
-        // Initialize Tesseract
-        const worker = Tesseract.createWorker();
-        (async () => {
-            await worker.load();
-            await worker.loadLanguage('eng');
-            await worker.initialize('eng');
-        })();
-        const startBtn = document.getElementById('startBtn');
-        const stopBtn = document.getElementById('stopBtn');
-        const clearBtn = document.getElementById('clearBtn');
-        const preview = document.getElementById('preview');
-        const logContainer = document.getElementById('logContainer');
-        const recordingDot = document.querySelector('.recording-dot');
-        async function startCapture() {
-            try {
-                mediaStream = await navigator.mediaDevices.getDisplayMedia({
-                    video: { cursor: "always" }
-                });
-                preview.srcObject = mediaStream;
-                startBtn.disabled = true;
-                stopBtn.disabled = false;
-                recordingDot.style.display = 'block';
-                captureInterval = setInterval(captureAndAnalyze, 1000);
-                mediaStream.getVideoTracks()[0].onended = stopCapture;
-            } catch (err) {
-                console.error("Error starting capture:", err);
             }
-        }
-        function stopCapture() {
-            if (mediaStream) {
-                mediaStream.getTracks().forEach(track => track.stop());
-                preview.srcObject = null;
-            }
-            clearInterval(captureInterval);
-            startBtn.disabled = false;
-            stopBtn.disabled = true;
-            recordingDot.style.display = 'none';
-            lastImageData = null;
-        }
-        function detectChanges(current, last) {
-            const blockSize = 20;
-            const threshold = 30;
-            const changes = [];
-            const width = current.width;
-            const height = current.height;
-            for (let y = 0; y < height; y += blockSize) {
-                for (let x = 0; x < width; x += blockSize) {
-                    let diffCount = 0;
-                    const maxY = Math.min(y + blockSize, height);
-                    const maxX = Math.min(x + blockSize, width);
-                    for (let py = y; py < maxY; py++) {
-                        for (let px = x; px < maxX; px++) {
-                            const i = (py * width + px) * 4;
-                            if (Math.abs(current.data[i] - last.data[i]) > threshold ||
-                                Math.abs(current.data[i + 1] - last.data[i + 1]) > threshold ||
-                                Math.abs(current.data[i + 2] - last.data[i + 2]) > threshold) {
-                                diffCount++;
-                            }
-                        }
                     }
-                    if (diffCount > (blockSize * blockSize * 0.3)) {
-                        changes.push({
-                            x: x / width * 100,
-                            y: y / height * 100,
-                            width: Math.min(blockSize / width * 100, 100 - x / width * 100),
-                            height: Math.min(blockSize / height * 100, 100 - y / height * 100)
-                        });
                     }
                 }
-            }
-            return changes;
         }
-        async function captureAndAnalyze() {
-            const canvas = document.createElement('canvas');
-            canvas.width = preview.videoWidth;
-            canvas.height = preview.videoHeight;
-            const ctx = canvas.getContext('2d');
-            ctx.drawImage(preview, 0, 0);
-            const currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-            let changes = [];
-            if (lastImageData) {
-                changes = detectChanges(currentImageData, lastImageData);
             }
-            lastImageData = currentImageData;
-            if (changes.length > 0 || !lastImageData) {
-                const imageUrl = canvas.toDataURL('image/jpeg', 0.8);
-                await addLogEntry(imageUrl, changes);
-            }
         }
-        async function performOCR(imageUrl) {
-            try {
-                const result = await worker.recognize(imageUrl);
-                return result.data.text;
-            } catch (error) {
-                console.error('OCR Error:', error);
-                return 'Error performing OCR';
             }
         }
-        async function addLogEntry(imageUrl, changes) {
-            const logEntry = document.createElement('div');
-            logEntry.className = 'log-entry';
-            const timestamp = new Date().toLocaleString();
-            // Create initial structure with loading state
-            logEntry.innerHTML = `
-                <div class="screenshot-container">
-                    <img class="screenshot" src="${imageUrl}" alt="Screenshot">
-                    ${changes.map(change => `
-                        <div class="change-highlight" style="
-                            left: ${change.x}%;
-                            top: ${change.y}%;
-                            width: ${change.width}%;
-                            height: ${change.height}%;
-                        "></div>
-                    `).join('')}
-                </div>
-                <div class="info-panel">
-                    <div class="timestamp">${timestamp}</div>
-                    <div class="text-content processing">Processing text extraction...</div>
-                    <div class="actions">
-                        <a href="${imageUrl}" download="screenshot-${Date.now()}.jpg" class="download-btn">
-                            💾 Download Image
-                        </a>
-                    </div>
-                </div>
-            `;
-            logContainer.insertBefore(logEntry, logContainer.firstChild);
-            // Perform OCR
-            const extractedText = await performOCR(imageUrl);
-            // Update text content
-            const textContent = logEntry.querySelector('.text-content');
-            textContent.classList.remove('processing');
-            textContent.textContent = extractedText || 'No text detected';
         }
-        clearBtn.addEventListener('click', () => {
-            logContainer.innerHTML = '';
-        });
-        startBtn.addEventListener('click', startCapture);
-        stopBtn.addEventListener('click', stopCapture);
-        // Cleanup when page is closed
-        window.addEventListener('beforeunload', () => {
-            worker.terminate();
-        });
     </script>
 </body>
 </html>

 <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;
             }
         }
 <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>