hany50/metareverse

1document.addEventListener('DOMContentLoaded', function() {2    const dropZone = document.getElementById('dropZone');3    const fileInput = document.getElementById('fileInput');4    const previewContainer = document.getElementById('previewContainer');5    const analyzeBtn = document.getElementById('analyzeBtn');6    const resultsSection = document.getElementById('resultsSection');7    const metadataDetails = document.getElementById('metadataDetails');8    const mapContainer = document.getElementById('mapContainer');9    const rawData = document.getElementById('rawData');10    11    let currentFile = null;12    13    // Event listeners for drag and drop14    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {15        dropZone.addEventListener(eventName, preventDefaults, false);16    });17    18    function preventDefaults(e) {19        e.preventDefault();20        e.stopPropagation();21    }22    23    ['dragenter', 'dragover'].forEach(eventName => {24        dropZone.addEventListener(eventName, highlight, false);25    });26    27    ['dragleave', 'drop'].forEach(eventName => {28        dropZone.addEventListener(eventName, unhighlight, false);29    });30    31    function highlight() {32        dropZone.classList.add('dragover');33    }34    35    function unhighlight() {36        dropZone.classList.remove('dragover');37    }38    39    // Handle dropped files40    dropZone.addEventListener('drop', handleDrop, false);41    42    function handleDrop(e) {43        const dt = e.dataTransfer;44        const files = dt.files;45        handleFiles(files);46    }47    48    // Handle file input change49    fileInput.addEventListener('change', function() {50        handleFiles(this.files);51    });52    53    // Click on drop zone triggers file input54    dropZone.addEventListener('click', () => {55        fileInput.click();56    });57    58    // Handle selected files59    function handleFiles(files) {60        if (files.length === 0) return;61        62        const file = files[0];63        if (!file.type.match('image.*')) {64            alert('الرجاء اختيار ملف صورة فقط');65            return;66        }67        68        currentFile = file;69        70        // Display preview71        const reader = new FileReader();72        reader.onload = function(e) {73            previewContainer.innerHTML = `74                <img src="${e.target.result}" alt="معاينة الصورة" class="max-h-64 mx-auto rounded-lg">75                <p class="mt-2 text-gray-700">${file.name}</p>76            `;77        };78        reader.readAsDataURL(file);79        80        // Enable analyze button81        analyzeBtn.disabled = false;82        analyzeBtn.classList.remove('opacity-50', 'cursor-not-allowed');83    }84    85    // Analyze button click handler86    analyzeBtn.addEventListener('click', function() {87        if (!currentFile) return;88        89        // Show loading state90        analyzeBtn.innerHTML = '<i data-feather="loader" class="animate-spin ml-2"></i> جاري التحليل...';91        feather.replace();92        analyzeBtn.disabled = true;93        94        // Simulate analysis delay95        setTimeout(() => {96            displayResults();97            resultsSection.classList.remove('hidden');98            window.scrollTo({ top: resultsSection.offsetTop - 100, behavior: 'smooth' });99            100            // Reset button101            analyzeBtn.innerHTML = '<i data-feather="search" class="ml-2"></i> تحليل الميتاداتا';102            feather.replace();103            analyzeBtn.disabled = false;104        }, 1500);105    });106    107    // Display mock results108    function displayResults() {109        // Mock metadata110        const metadata = [111            { label: 'اسم الملف', value: currentFile.name },112            { label: 'نوع الملف', value: currentFile.type },113            { label: 'الحجم', value: `${(currentFile.size / 1024).toFixed(2)} KB` },114            { label: 'الأبعاد', value: '4032 × 3024 بكسل' },115            { label: 'نموذج الكاميرا', value: 'Canon EOS R5' },116            { label: 'التاريخ والوقت', value: '2023:07:15 14:30:22' },117            { label: 'فتحة العدسة', value: 'f/2.8' },118            { label: 'سرعة الغالق', value: '1/500 ثانية' },119            { label: 'ISO', value: '100' },120            { label: 'الطول البؤري', value: '50mm' }121        ];122        123        // Populate metadata details124        metadataDetails.innerHTML = '';125        metadata.forEach(item => {126            const div = document.createElement('div');127            div.className = 'metadata-item';128            div.innerHTML = `129                <span class="metadata-label">${item.label}:</span>130                <span class="metadata-value">${item.value}</span>131            `;132            metadataDetails.appendChild(div);133        });134        135        // Update map container with location info136        mapContainer.innerHTML = `137            <div class="text-center">138                <i data-feather="map-pin" class="w-12 h-12 text-orange-500 mx-auto mb-3"></i>139                <h4 class="font-bold text-lg mb-2">تم التقاط الصورة في:</h4>140                <p class="text-gray-700">شاطئ جدة، المملكة العربية السعودية</p>141                <div class="mt-4 bg-gray-200 border-2 border-dashed rounded-xl w-full h-40 flex items-center justify-center">142                    <span class="text-gray-500">خريطة تفاعلية</span>143                </div>144            </div>145        `;146        feather.replace();147        148        // Populate raw data149        rawData.textContent = JSON.stringify({150            "FileName": currentFile.name,151            "FileSize": currentFile.size,152            "FileType": currentFile.type,153            "ImageWidth": 4032,154            "ImageHeight": 3024,155            "Make": "Canon",156            "Model": "EOS R5",157            "DateTime": "2023:07:15 14:30:22",158            "Aperture": "f/2.8",159            "ShutterSpeed": "1/500",160            "ISO": 100,161            "FocalLength": "50mm",162            "GPSLatitude": "21.5432° N",163            "GPSLongitude": "39.1718° E"164        }, null, 2);165    }166});