Spaces:

NitinBot001
/

PhoneArena

Sleeping

File size: 25,253 Bytes

6333fb8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Specifications Search</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }
        
        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .header p {
            font-size: 1.2rem;
            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-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;
        }
        
        .search-input {
            padding: 15px;
            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);
        }
        
        .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;
        }
        
        .btn {
            padding: 15px 30px;
            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;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary: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;
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .results-container {
            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);
        }
        
        .phone-header {
            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%);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .phone-images {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .phone-image {
            width: 150px;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }
        
        .specs-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .spec-category {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        
        .spec-category h3 {
            color: #495057;
            margin-bottom: 15px;
            font-size: 1.2rem;
            border-bottom: 2px solid #dee2e6;
            padding-bottom: 5px;
        }
        
        .spec-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        
        .spec-item:last-child {
            border-bottom: none;
        }
        
        .spec-label {
            font-weight: 600;
            color: #495057;
        }
        
        .spec-value {
            color: #6c757d;
            text-align: right;
            max-width: 60%;
        }
        
        .multiple-phones-section {
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .multiple-phones-section h2 {
            margin-bottom: 20px;
            color: #333;
        }
        
        .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;
        }
        
        .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;
        }
        
        .alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .alert-error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .export-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #e9ecef;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .search-container,
            .multiple-phones-section {
                padding: 20px;
            }
            
            .button-group {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
            
            .phone-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .specs-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📱 Phone Specifications Search</h1>
            <p>Search and compare 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="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>
                
                <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>
        </div>

        <!-- Loading indicator -->
        <div id="loading" class="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>
    </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}
                `;
            }
        }
        
        // 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;
            
            if (!phoneName) {
                alert('Please enter a phone name');
                return;
            }
            
            showLoading(true);
            clearResults();
            
            try {
                const response = await fetch(`${API_BASE}/api/search`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        phone_name: phoneName,
                        source: source
                    })
                });
                
                const data = await response.json();
                
                if (data.success && data.data) {
                    displayPhoneResults([data.data]);
                } else {
                    showError(data.message || 'No results 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;
            
            if (!phoneList) {
                alert('Please enter phone names');
                return;
            }
            
            const phoneNames = phoneList.split('\n')
                .map(name => name.trim())
                .filter(name => name.length > 0);
            
            if (phoneNames.length === 0) {
                alert('Please enter valid phone names');
                return;
            }
            
            showLoading(true);
            clearResults();
            
            try {
                const response = await fetch(`${API_BASE}/api/search/multiple`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        phone_names: phoneNames,
                        source: source
                    })
                });
                
                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`);
                } else {
                    showError(data.message || 'No results found');
                }
            } catch (error) {
                showError('Error searching for phones: ' + error.message);
            } finally {
                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 = '';
            
            phones.forEach(phone => {
                const phoneCard = createPhoneCard(phone);
                resultsContainer.appendChild(phoneCard);
            });
            
            resultsContainer.style.display = 'block';
        }
        
        // Create phone card
        function createPhoneCard(phone) {
            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('');
            
            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
                    </button>
                    <a href="${phone.source_url}" target="_blank" class="btn btn-secondary">
                        🔗 View Source
                    </a>
                </div>
            `;
            
            return card;
        }
        
        // Export phone data
        async function exportPhoneData(phoneName) {
            try {
                const source = document.querySelector('input[name="source"]:checked').value;
                window.open(`${API_BASE}/api/export/${encodeURIComponent(phoneName)}?source=${source}`, '_blank');
            } catch (error) {
                showError('Error exporting data: ' + error.message);
            }
        }
        
        // Utility functions
        function showLoading(show) {
            document.getElementById('loading').style.display = show ? 'block' : 'none';
        }
        
        function clearResults() {
            document.getElementById('results').style.display = 'none';
            document.getElementById('results').innerHTML = '';
        }
        
        function showSuccess(message) {
            showAlert(message, 'success');
        }
        
        function showError(message) {
            showAlert(message, 'error');
        }
        
        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);
        }
    </script>
</body>
</html>