Update templates/index.html

templates/index.html

@@ -10,347 +10,325 @@
             padding: 0;
             box-sizing: border-box;
         }
-        
+
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
-            color: #333;
+            padding: 20px;
         }
-        
+
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 20px;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
         }
-        
+
         .header {
-            text-align: center;
-            margin-bottom: 40px;
+            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
             color: white;
+            padding: 30px;
+            text-align: center;
         }
-        
+
         .header h1 {
-            font-size: 3rem;
+            font-size: 2.5rem;
             margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            font-weight: 700;
         }
-        
+
         .header p {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             opacity: 0.9;
         }
-        
-        .search-container {
-            background: white;
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            margin-bottom: 30px;
+
+        .search-section {
+            padding: 40px;
+            background: #f8f9fa;
         }
-        
+
         .search-form {
             display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        
-        .input-group {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        
-        .input-group label {
-            font-weight: 600;
-            color: #555;
+            gap: 15px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
         }
-        
+
         .search-input {
-            padding: 15px;
+            flex: 1;
+            min-width: 250px;
+            padding: 15px 20px;
             border: 2px solid #e1e5e9;
             border-radius: 10px;
             font-size: 16px;
             transition: all 0.3s ease;
         }
-        
+
         .search-input:focus {
             outline: none;
             border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
-        
-        .source-selector {
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
-        
-        .source-option {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .source-option input[type="radio"] {
-            accent-color: #667eea;
-        }
-        
-        .button-group {
-            display: flex;
-            gap: 15px;
-            flex-wrap: wrap;
+
+        .source-select {
+            padding: 15px 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 16px;
+            background: white;
+            min-width: 150px;
         }
-        
-        .btn {
+
+        .search-btn, .multiple-btn {
             padding: 15px 30px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
             border: none;
             border-radius: 10px;
             font-size: 16px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+            white-space: nowrap;
         }
-        
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-        }
-        
-        .btn-primary:hover {
+
+        .search-btn:hover, .multiple-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102,126,234,0.3);
-        }
-        
-        .btn-secondary {
-            background: #f8f9fa;
-            color: #495057;
-            border: 2px solid #e9ecef;
-        }
-        
-        .btn-secondary:hover {
-            background: #e9ecef;
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
         }
-        
-        .btn:disabled {
+
+        .search-btn:disabled, .multiple-btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
-            transform: none !important;
+            transform: none;
+        }
+
+        .multiple-search {
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #e1e5e9;
+        }
+
+        .multiple-input {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 16px;
+            resize: vertical;
+            min-height: 100px;
+            margin-bottom: 15px;
         }
-        
+
         .loading {
             display: none;
             text-align: center;
-            padding: 20px;
+            padding: 40px;
         }
-        
+
         .spinner {
             border: 4px solid #f3f3f3;
             border-top: 4px solid #667eea;
             border-radius: 50%;
-            width: 40px;
-            height: 40px;
+            width: 50px;
+            height: 50px;
             animation: spin 1s linear infinite;
-            margin: 0 auto 10px;
+            margin: 0 auto 20px;
         }
-        
+
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        
-        .results-container {
+
+        .results-section {
+            padding: 40px;
             display: none;
         }
-        
+
         .phone-card {
             background: white;
             border-radius: 15px;
-            padding: 25px;
-            margin-bottom: 20px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            transition: transform 0.3s ease;
-        }
-        
-        .phone-card:hover {
-            transform: translateY(-5px);
+            margin-bottom: 30px;
+            overflow: hidden;
+            border: 1px solid #e1e5e9;
         }
-        
+
         .phone-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 25px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
             flex-wrap: wrap;
-            gap: 15px;
         }
-        
+
         .phone-title {
             font-size: 1.8rem;
             font-weight: 700;
-            color: #333;
         }
-        
+
         .phone-brand {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-size: 1rem;
+            opacity: 0.9;
+            margin-top: 5px;
+        }
+
+        .export-btn {
+            background: rgba(255,255,255,0.2);
             color: white;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 0.9rem;
-            font-weight: 600;
+            border: 1px solid rgba(255,255,255,0.3);
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
         }
-        
-        .phone-images {
+
+        .export-btn:hover {
+            background: rgba(255,255,255,0.3);
+        }
+
+        .phone-content {
             display: flex;
-            gap: 15px;
-            margin-bottom: 20px;
-            overflow-x: auto;
-            padding-bottom: 10px;
+            gap: 30px;
+            padding: 30px;
+            flex-wrap: wrap;
+        }
+
+        .phone-images {
+            flex: 0 0 300px;
+            min-width: 250px;
         }
-        
+
         .phone-image {
-            width: 150px;
-            height: 200px;
-            object-fit: cover;
+            width: 100%;
+            height: 400px;
+            object-fit: contain;
             border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-            flex-shrink: 0;
+            background: #f8f9fa;
+            border: 1px solid #e1e5e9;
+            margin-bottom: 10px;
         }
-        
-        .specs-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
+
+        .image-nav {
+            display: flex;
+            gap: 5px;
+            justify-content: center;
         }
-        
-        .spec-category {
-            background: #f8f9fa;
-            border-radius: 10px;
-            padding: 20px;
+
+        .image-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #ddd;
+            cursor: pointer;
+            transition: all 0.3s ease;
         }
-        
-        .spec-category h3 {
-            color: #495057;
-            margin-bottom: 15px;
-            font-size: 1.2rem;
-            border-bottom: 2px solid #dee2e6;
-            padding-bottom: 5px;
+
+        .image-dot.active {
+            background: #667eea;
         }
-        
-        .spec-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 8px 0;
-            border-bottom: 1px solid #e9ecef;
+
+        .specs-container {
+            flex: 1;
+            min-width: 300px;
         }
-        
-        .spec-item:last-child {
-            border-bottom: none;
+
+        .specs-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
         }
-        
-        .spec-label {
+
+        .specs-table th {
+            background: #f8f9fa;
+            color: #2c3e50;
             font-weight: 600;
-            color: #495057;
+            padding: 15px 20px;
+            text-align: left;
+            border-bottom: 2px solid #e1e5e9;
+            font-size: 16px;
         }
-        
-        .spec-value {
-            color: #6c757d;
-            text-align: right;
-            max-width: 60%;
+
+        .specs-table td {
+            padding: 12px 20px;
+            border-bottom: 1px solid #e1e5e9;
+            vertical-align: top;
         }
-        
-        .multiple-phones-section {
-            background: white;
-            border-radius: 20px;
-            padding: 30px;
-            margin-top: 30px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+
+        .specs-table tr:hover {
+            background: #f8f9fa;
         }
-        
-        .multiple-phones-section h2 {
-            margin-bottom: 20px;
-            color: #333;
+
+        .spec-category {
+            font-weight: 600;
+            color: #667eea;
+            background: #f0f2ff !important;
         }
-        
-        .phone-list-input {
-            width: 100%;
-            min-height: 100px;
-            padding: 15px;
-            border: 2px solid #e1e5e9;
-            border-radius: 10px;
-            font-size: 16px;
-            resize: vertical;
-            margin-bottom: 20px;
+
+        .spec-key {
+            font-weight: 500;
+            color: #2c3e50;
+            width: 30%;
         }
-        
-        .status-indicator {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-        
-        .status-healthy { background-color: #28a745; }
-        .status-error { background-color: #dc3545; }
-        
-        .alert {
-            padding: 15px;
-            border-radius: 10px;
-            margin-bottom: 20px;
+
+        .spec-value {
+            color: #555;
+            line-height: 1.5;
         }
-        
-        .alert-success {
-            background-color: #d4edda;
-            border: 1px solid #c3e6cb;
-            color: #155724;
+
+        .error-message {
+            background: #fee;
+            border: 1px solid #fcc;
+            color: #c33;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+            text-align: center;
         }
-        
-        .alert-error {
-            background-color: #f8d7da;
-            border: 1px solid #f5c6cb;
-            color: #721c24;
+
+        .success-message {
+            background: #efe;
+            border: 1px solid #cfc;
+            color: #363;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+            text-align: center;
         }
-        
-        .export-section {
-            margin-top: 20px;
-            padding-top: 20px;
-            border-top: 2px solid #e9ecef;
+
+        .multiple-results {
+            display: grid;
+            gap: 20px;
         }
-        
+
         @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-            
-            .header h1 {
-                font-size: 2rem;
+            .search-form {
+                flex-direction: column;
             }
-            
-            .search-container,
-            .multiple-phones-section {
-                padding: 20px;
+
+            .search-input, .source-select {
+                min-width: 100%;
             }
-            
-            .button-group {
+
+            .phone-content {
                 flex-direction: column;
             }
-            
-            .btn {
-                width: 100%;
-                justify-content: center;
+
+            .phone-images {
+                flex: none;
             }
-            
+
             .phone-header {
                 flex-direction: column;
                 align-items: flex-start;
-            }
-            
-            .specs-container {
-                grid-template-columns: 1fr;
+                gap: 15px;
             }
         }
     </style>
@@ -358,146 +336,70 @@
 <body>
     <div class="container">
         <div class="header">
-            <h1>📱 Phone Specifications Search</h1>
-            <p>Search and compare phone specifications from multiple sources</p>
+            <h1>📱 Phone Specifications</h1>
+            <p>Search and compare detailed phone specifications from multiple sources</p>
         </div>
 
-        <!-- API Status -->
-        <div id="api-status" class="alert alert-success">
-            <span class="status-indicator status-healthy"></span>
-            API Status: Checking...
-        </div>
-
-        <!-- Single Phone Search -->
-        <div class="search-container">
-            <h2>Search Single Phone</h2>
-            <form class="search-form" id="single-search-form">
-                <div class="input-group">
-                    <label for="phone-name">Phone Name</label>
-                    <input 
-                        type="text" 
-                        id="phone-name" 
-                        class="search-input" 
-                        placeholder="e.g., iPhone 15 Pro, Samsung Galaxy S24, OnePlus 12"
-                        required
-                    >
-                </div>
+        <div class="search-section">
+            <div class="search-form">
+                <input type="text" 
+                       class="search-input" 
+                       id="phoneSearch" 
+                       placeholder="Enter phone name (e.g., iPhone 15 Pro, Samsung Galaxy S24)"
+                       onkeypress="handleKeyPress(event)">
                 
-                <div class="input-group">
-                    <label>Data Source</label>
-                    <div class="source-selector">
-                        <div class="source-option">
-                            <input type="radio" id="gsmarena" name="source" value="gsmarena" checked>
-                            <label for="gsmarena">GSMArena</label>
-                        </div>
-                        <div class="source-option">
-                            <input type="radio" id="phonedb" name="source" value="phonedb">
-                            <label for="phonedb">PhoneDB</label>
-                        </div>
-                    </div>
-                </div>
+                <select class="source-select" id="sourceSelect">
+                    <option value="gsmarena">GSMArena</option>
+                    <option value="phonedb">PhoneDB</option>
+                </select>
                 
-                <div class="button-group">
-                    <button type="submit" class="btn btn-primary">
-                        🔍 Search Phone
-                    </button>
-                    <button type="button" class="btn btn-secondary" onclick="clearResults()">
-                        🗑️ Clear Results
-                    </button>
-                </div>
-            </form>
+                <button class="search-btn" onclick="searchPhone()" id="searchBtn">
+                    🔍 Search Phone
+                </button>
+            </div>
+
+            <div class="multiple-search">
+                <h3 style="margin-bottom: 15px; color: #2c3e50;">Search Multiple Phones</h3>
+                <textarea class="multiple-input" 
+                          id="multiplePhones" 
+                          placeholder="Enter phone names, one per line:&#10;iPhone 15 Pro&#10;Samsung Galaxy S24&#10;Google Pixel 8"></textarea>
+                <button class="multiple-btn" onclick="searchMultiplePhones()" id="multipleBt">
+                    🔍 Search Multiple Phones
+                </button>
+            </div>
         </div>
 
-        <!-- Loading indicator -->
-        <div id="loading" class="loading">
+        <div class="loading" id="loading">
             <div class="spinner"></div>
             <p>Searching for phone specifications...</p>
         </div>
 
-        <!-- Results container -->
-        <div id="results" class="results-container"></div>
-
-        <!-- Multiple Phones Search -->
-        <div class="multiple-phones-section">
-            <h2>Search Multiple Phones</h2>
-            <p style="margin-bottom: 20px; color: #6c757d;">Enter phone names separated by new lines (one phone per line)</p>
-            
-            <textarea 
-                id="phone-list" 
-                class="phone-list-input" 
-                placeholder="iPhone 15 Pro&#10;Samsung Galaxy S24&#10;OnePlus 12&#10;Google Pixel 8"
-            ></textarea>
-            
-            <div class="input-group">
-                <label>Data Source</label>
-                <div class="source-selector">
-                    <div class="source-option">
-                        <input type="radio" id="gsmarena-multi" name="source-multi" value="gsmarena" checked>
-                        <label for="gsmarena-multi">GSMArena</label>
-                    </div>
-                    <div class="source-option">
-                        <input type="radio" id="phonedb-multi" name="source-multi" value="phonedb">
-                        <label for="phonedb-multi">PhoneDB</label>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="button-group">
-                <button class="btn btn-primary" onclick="searchMultiplePhones()">
-                    🔍 Search All Phones
-                </button>
-                <button class="btn btn-secondary" onclick="startBackgroundSearch()">
-                    ⏱️ Background Search
-                </button>
-            </div>
+        <div class="results-section" id="results">
+            <!-- Results will be populated here -->
         </div>
     </div>
 
     <script>
         const API_BASE = window.location.origin;
-        
-        // Check API health on load
-        window.addEventListener('load', checkApiHealth);
-        
-        async function checkApiHealth() {
-            try {
-                const response = await fetch(`${API_BASE}/health`);
-                const data = await response.json();
-                
-                const statusEl = document.getElementById('api-status');
-                if (data.success) {
-                    statusEl.className = 'alert alert-success';
-                    statusEl.innerHTML = `
-                        <span class="status-indicator status-healthy"></span>
-                        API Status: Healthy (GSMArena: ${data.data.scrapers.gsmarena ? '✅' : '❌'}, PhoneDB: ${data.data.scrapers.phonedb ? '✅' : '❌'})
-                    `;
-                } else {
-                    throw new Error('API not healthy');
-                }
-            } catch (error) {
-                const statusEl = document.getElementById('api-status');
-                statusEl.className = 'alert alert-error';
-                statusEl.innerHTML = `
-                    <span class="status-indicator status-error"></span>
-                    API Status: Error - ${error.message}
-                `;
+        let currentResults = [];
+
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                searchPhone();
             }
         }
-        
-        // Single phone search
-        document.getElementById('single-search-form').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
-            const phoneName = document.getElementById('phone-name').value.trim();
-            const source = document.querySelector('input[name="source"]:checked').value;
+
+        async function searchPhone() {
+            const phoneSearching = document.getElementById('phoneSearch').value.trim();
+            const source = document.getElementById('sourceSelect').value;
             
-            if (!phoneName) {
-                alert('Please enter a phone name');
+            if (!phoneSearching) {
+                showError('Please enter a phone name');
                 return;
             }
-            
+
             showLoading(true);
-            clearResults();
+            hideResults();
             
             try {
                 const response = await fetch(`${API_BASE}/api/search`, {
@@ -506,46 +408,47 @@
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        phone_name: phoneName,
+                        phone_name: phoneSearching,
                         source: source
                     })
                 });
+
+                const result = await response.json();
                 
-                const data = await response.json();
-                
-                if (data.success && data.data) {
-                    displayPhoneResults([data.data]);
+                if (result.success && result.data) {
+                    currentResults = [result.data];
+                    displayResults([result.data]);
+                    showSuccess(`Found specifications for ${result.data.name}`);
                 } else {
-                    showError(data.message || 'No results found');
+                    showError(result.message || 'Phone not found');
                 }
             } catch (error) {
                 showError('Error searching for phone: ' + error.message);
             } finally {
                 showLoading(false);
             }
-        });
-        
-        // Multiple phones search
+        }
+
         async function searchMultiplePhones() {
-            const phoneList = document.getElementById('phone-list').value.trim();
-            const source = document.querySelector('input[name="source-multi"]:checked').value;
+            const phonesText = document.getElementById('multiplePhones').value.trim();
+            const source = document.getElementById('sourceSelect').value;
             
-            if (!phoneList) {
-                alert('Please enter phone names');
+            if (!phonesText) {
+                showError('Please enter phone names');
                 return;
             }
-            
-            const phoneNames = phoneList.split('\n')
+
+            const phoneNames = phonesText.split('\n')
                 .map(name => name.trim())
                 .filter(name => name.length > 0);
-            
+
             if (phoneNames.length === 0) {
-                alert('Please enter valid phone names');
+                showError('Please enter valid phone names');
                 return;
             }
-            
+
             showLoading(true);
-            clearResults();
+            hideResults();
             
             try {
                 const response = await fetch(`${API_BASE}/api/search/multiple`, {
@@ -558,14 +461,15 @@
                         source: source
                     })
                 });
+
+                const result = await response.json();
                 
-                const data = await response.json();
-                
-                if (data.success && data.data.phones.length > 0) {
-                    displayPhoneResults(data.data.phones);
-                    showSuccess(`Successfully found ${data.data.success_count}/${data.data.total_count} phones`);
+                if (result.success && result.data && result.data.phones) {
+                    currentResults = result.data.phones;
+                    displayResults(result.data.phones);
+                    showSuccess(`Found ${result.data.success_count} out of ${result.data.total_count} phones`);
                 } else {
-                    showError(data.message || 'No results found');
+                    showError(result.message || 'No phones found');
                 }
             } catch (error) {
                 showError('Error searching for phones: ' + error.message);
@@ -573,198 +477,197 @@
                 showLoading(false);
             }
         }
-        
-        // Background search
-        async function startBackgroundSearch() {
-            const phoneList = document.getElementById('phone-list').value.trim();
-            const source = document.querySelector('input[name="source-multi"]:checked').value;
-            
-            if (!phoneList) {
-                alert('Please enter phone names');
-                return;
-            }
-            
-            const phoneNames = phoneList.split('\n')
-                .map(name => name.trim())
-                .filter(name => name.length > 0);
-            
-            try {
-                const response = await fetch(`${API_BASE}/api/scrape/background`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        phone_names: phoneNames,
-                        source: source
-                    })
-                });
-                
-                const data = await response.json();
-                
-                if (data.success) {
-                    const jobId = data.data.job_id;
-                    showSuccess(`Background job started: ${jobId}`);
-                    monitorBackgroundJob(jobId);
-                } else {
-                    showError('Failed to start background job');
-                }
-            } catch (error) {
-                showError('Error starting background job: ' + error.message);
-            }
-        }
-        
-        // Monitor background job
-        async function monitorBackgroundJob(jobId) {
-            const checkStatus = async () => {
-                try {
-                    const response = await fetch(`${API_BASE}/api/scrape/status/${jobId}`);
-                    const data = await response.json();
-                    
-                    if (data.success) {
-                        const job = data.data;
-                        const progress = `${job.progress}/${job.total}`;
-                        
-                        if (job.status === 'completed') {
-                            displayPhoneResults(job.results);
-                            showSuccess(`Background job completed: ${progress} phones processed`);
-                            return;
-                        } else if (job.status === 'failed') {
-                            showError(`Background job failed: ${job.error || 'Unknown error'}`);
-                            return;
-                        } else {
-                            showSuccess(`Background job running: ${progress} phones processed${job.current_phone ? ` (Current: ${job.current_phone})` : ''}`);
-                            setTimeout(checkStatus, 3000); // Check every 3 seconds
-                        }
-                    }
-                } catch (error) {
-                    showError('Error monitoring job: ' + error.message);
-                }
-            };
-            
-            checkStatus();
-        }
-        
-        // Display results
-        function displayPhoneResults(phones) {
-            const resultsContainer = document.getElementById('results');
-            resultsContainer.innerHTML = '';
+
+        function displayResults(phones) {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = '';
             
-            phones.forEach(phone => {
-                const phoneCard = createPhoneCard(phone);
-                resultsContainer.appendChild(phoneCard);
+            phones.forEach((phone, index) => {
+                const phoneCard = createPhoneCard(phone, index);
+                resultsDiv.appendChild(phoneCard);
             });
             
-            resultsContainer.style.display = 'block';
+            showResults();
         }
-        
-        // Create phone card
-        function createPhoneCard(phone) {
+
+        function createPhoneCard(phone, index) {
             const card = document.createElement('div');
             card.className = 'phone-card';
             
-            // Images HTML
-            const imagesHtml = phone.images && phone.images.length > 0 
-                ? `<div class="phone-images">
-                     ${phone.images.map(img => `<img src="${img}" alt="${phone.name}" class="phone-image" onerror="this.style.display='none'">`).join('')}
-                   </div>`
-                : '';
-            
-            // Specifications HTML
-            const specsHtml = Object.entries(phone.specifications || {})
-                .map(([category, specs]) => {
-                    if (typeof specs === 'object' && specs !== null) {
-                        const specItems = Object.entries(specs)
-                            .map(([key, value]) => `
-                                <div class="spec-item">
-                                    <span class="spec-label">${key}</span>
-                                    <span class="spec-value">${value}</span>
-                                </div>
-                            `).join('');
-                        
-                        return `
-                            <div class="spec-category">
-                                <h3>${category}</h3>
-                                ${specItems}
-                            </div>
-                        `;
-                    }
-                    return '';
-                }).join('');
+            const images = phone.images && phone.images.length > 0 ? phone.images : ['/api/placeholder/300/400'];
             
             card.innerHTML = `
                 <div class="phone-header">
-                    <h2 class="phone-title">${phone.name}</h2>
-                    <span class="phone-brand">${phone.brand}</span>
-                </div>
-                
-                ${imagesHtml}
-                
-                <div class="specs-container">
-                    ${specsHtml}
-                </div>
-                
-                <div class="export-section">
-                    <button class="btn btn-secondary" onclick="exportPhoneData('${phone.name}')">
-                        💾 Export JSON
+                    <div>
+                        <div class="phone-title">${phone.name || 'Unknown Phone'}</div>
+                        <div class="phone-brand">${phone.brand || 'Unknown Brand'}</div>
+                    </div>
+                    <button class="export-btn" onclick="exportPhoneData('${phone.name}')">
+                        📥 Export JSON
                     </button>
-                    <a href="${phone.source_url}" target="_blank" class="btn btn-secondary">
-                        🔗 View Source
-                    </a>
+                </div>
+                <div class="phone-content">
+                    <div class="phone-images">
+                        <img class="phone-image" id="phoneImage${index}" src="${images[0]}" alt="${phone.name}" 
+                             onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDMwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjhGOUZBIi8+CjxwYXRoIGQ9Ik0xMjUgMTc1SDE3NVYyMjVIMTI1VjE3NVoiIGZpbGw9IiNEREREREQiLz4KPHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJMMTEgMTRMMTUgMTBNMjEgMTJDMjEgMTYuOTcwNiAxNi45NzA2IDIxIDEyIDIxQzcuMDI5NDQgMjEgMyAxNi45NzA2IDMgMTJDMyA3LjAyOTQ0IDcuMDI5NDQgMyAxMiAzQzE2Ljk3MDYgMyAyMSA3LjAyOTQ0IDIxIDEyWiIgc3Ryb2tlPSIjREREREREIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K'">
+                        ${images.length > 1 ? createImageNavigation(images, index) : ''}
+                    </div>
+                    <div class="specs-container">
+                        ${createSpecsTable(phone.specifications)}
+                    </div>
                 </div>
             `;
             
             return card;
         }
-        
-        // Export phone data
+
+        function createImageNavigation(images, phoneIndex) {
+            const dots = images.map((_, imgIndex) => 
+                `<div class="image-dot ${imgIndex === 0 ? 'active' : ''}" 
+                      onclick="changeImage(${phoneIndex}, ${imgIndex})"></div>`
+            ).join('');
+            
+            return `<div class="image-nav">${dots}</div>`;
+        }
+
+        function changeImage(phoneIndex, imageIndex) {
+            const phone = currentResults[phoneIndex];
+            const imgElement = document.getElementById(`phoneImage${phoneIndex}`);
+            imgElement.src = phone.images[imageIndex];
+            
+            // Update active dot
+            const card = imgElement.closest('.phone-card');
+            const dots = card.querySelectorAll('.image-dot');
+            dots.forEach((dot, index) => {
+                dot.classList.toggle('active', index === imageIndex);
+            });
+        }
+
+        function createSpecsTable(specs) {
+            if (!specs || typeof specs !== 'object') {
+                return '<p>No specifications available</p>';
+            }
+
+            let tableHTML = '<table class="specs-table"><thead><tr><th colspan="2">Specifications</th></tr></thead><tbody>';
+            
+            Object.entries(specs).forEach(([category, categorySpecs]) => {
+                if (categorySpecs && typeof categorySpecs === 'object') {
+                    // Category header
+                    tableHTML += `<tr class="spec-category"><td colspan="2">${formatCategoryName(category)}</td></tr>`;
+                    
+                    // Category specifications
+                    Object.entries(categorySpecs).forEach(([key, value]) => {
+                        if (value) {
+                            tableHTML += `
+                                <tr>
+                                    <td class="spec-key">${formatSpecName(key)}</td>
+                                    <td class="spec-value">${formatSpecValue(value)}</td>
+                                </tr>
+                            `;
+                        }
+                    });
+                } else if (categorySpecs) {
+                    // Direct specification
+                    tableHTML += `
+                        <tr>
+                            <td class="spec-key">${formatSpecName(category)}</td>
+                            <td class="spec-value">${formatSpecValue(categorySpecs)}</td>
+                        </tr>
+                    `;
+                }
+            });
+            
+            tableHTML += '</tbody></table>';
+            return tableHTML;
+        }
+
+        function formatCategoryName(name) {
+            return name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+        }
+
+        function formatSpecName(name) {
+            return name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+        }
+
+        function formatSpecValue(value) {
+            if (Array.isArray(value)) {
+                return value.join(', ');
+            }
+            if (typeof value === 'object') {
+                return JSON.stringify(value, null, 2);
+            }
+            return value.toString();
+        }
+
         async function exportPhoneData(phoneName) {
+            const source = document.getElementById('sourceSelect').value;
             try {
-                const source = document.querySelector('input[name="source"]:checked').value;
-                window.open(`${API_BASE}/api/export/${encodeURIComponent(phoneName)}?source=${source}`, '_blank');
+                const response = await fetch(`${API_BASE}/api/export/${encodeURIComponent(phoneName)}?source=${source}`);
+                
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `${phoneName.replace(/\s+/g, '_')}_specs.json`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+                    showSuccess('Phone data exported successfully!');
+                } else {
+                    showError('Failed to export phone data');
+                }
             } catch (error) {
-                showError('Error exporting data: ' + error.message);
+                showError('Error exporting phone data: ' + error.message);
             }
         }
-        
-        // Utility functions
+
         function showLoading(show) {
-            document.getElementById('loading').style.display = show ? 'block' : 'none';
+            const loading = document.getElementById('loading');
+            const searchBtn = document.getElementById('searchBtn');
+            const multipleBtn = document.getElementById('multipleBt');
+            
+            loading.style.display = show ? 'block' : 'none';
+            searchBtn.disabled = show;
+            multipleBtn.disabled = show;
         }
-        
-        function clearResults() {
-            document.getElementById('results').style.display = 'none';
-            document.getElementById('results').innerHTML = '';
+
+        function showResults() {
+            document.getElementById('results').style.display = 'block';
         }
-        
-        function showSuccess(message) {
-            showAlert(message, 'success');
+
+        function hideResults() {
+            document.getElementById('results').style.display = 'none';
         }
-        
+
         function showError(message) {
-            showAlert(message, 'error');
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = `<div class="error-message">❌ ${message}</div>`;
+            showResults();
         }
-        
-        function showAlert(message, type) {
-            // Remove existing alerts
-            const existingAlerts = document.querySelectorAll('.alert:not(#api-status)');
-            existingAlerts.forEach(alert => alert.remove());
-            
-            const alert = document.createElement('div');
-            alert.className = `alert alert-${type}`;
-            alert.textContent = message;
-            
-            const container = document.querySelector('.container');
-            const apiStatus = document.getElementById('api-status');
-            container.insertBefore(alert, apiStatus.nextSibling);
-            
-            // Auto remove after 5 seconds
-            setTimeout(() => {
-                if (alert.parentNode) {
-                    alert.remove();
-                }
-            }, 5000);
+
+        function showSuccess(message) {
+            const resultsDiv = document.getElementById('results');
+            const existingContent = resultsDiv.innerHTML;
+            resultsDiv.innerHTML = `<div class="success-message">✅ ${message}</div>` + existingContent;
+            showResults();
         }
+
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check API health on load
+            fetch(`${API_BASE}/health`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        console.log('API is healthy:', data.data);
+                    }
+                })
+                .catch(error => {
+                    console.error('API health check failed:', error);
+                });
+        });
     </script>
 </body>
 </html>