Add 1 files

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Local Image Viewer</title>
-    <!-- Local Tailwind CSS -->
+    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -18,7 +18,7 @@
             }
         }
     </script>
-    <!-- Local Font Awesome -->
+    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .dropzone {
@@ -104,6 +104,17 @@
         .sort-option:hover {
             background-color: rgba(59, 130, 246, 0.1);
         }
+
+        .thumbnail-placeholder {
+            background-color: #f3f4f6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .thumbnail-placeholder i {
+            color: #9ca3af;
+        }
     </style>
 </head>
 
@@ -266,187 +277,183 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
+            // Utility functions
+            const debounce = (func, delay) => {
+                let timeoutId;
+                return (...args) => {
+                    clearTimeout(timeoutId);
+                    timeoutId = setTimeout(() => func.apply(this, args), delay);
+                };
+            };
+
+            const throttle = (func, limit) => {
+                let lastFunc;
+                let lastRan;
+                return function() {
+                    const context = this;
+                    const args = arguments;
+                    if (!lastRan) {
+                        func.apply(context, args);
+                        lastRan = Date.now();
+                    } else {
+                        clearTimeout(lastFunc);
+                        lastFunc = setTimeout(function() {
+                            if ((Date.now() - lastRan) >= limit) {
+                                func.apply(context, args);
+                                lastRan = Date.now();
+                            }
+                        }, limit - (Date.now() - lastRan));
+                    }
+                };
+            };
+
             // DOM elements
-            const dropzone = document.getElementById('dropzone');
-            const browseBtn = document.getElementById('browseBtn');
-            const fileInput = document.getElementById('fileInput');
-            const viewerArea = document.getElementById('viewerArea');
-            const fileList = document.getElementById('fileList');
-            const imageDisplay = document.getElementById('imageDisplay');
-            const fileName = document.getElementById('fileName');
-            const fileInfo = document.getElementById('fileInfo');
-            const fileCount = document.getElementById('fileCount');
-            const prevBtn = document.getElementById('prevBtn');
-            const nextBtn = document.getElementById('nextBtn');
-            const zoomInBtn = document.getElementById('zoomInBtn');
-            const zoomOutBtn = document.getElementById('zoomOutBtn');
-            const resetZoomBtn = document.getElementById('resetZoomBtn');
-            const fullscreenBtn = document.getElementById('fullscreenBtn');
-            const progressBar = document.getElementById('progressBar');
-            const currentIndex = document.getElementById('currentIndex');
-            const totalImages = document.getElementById('totalImages');
-            const sortBtn = document.getElementById('sortBtn');
-            const sortDropdown = document.getElementById('sortDropdown');
-            const fullscreenContainer = document.getElementById('fullscreenContainer');
-            const fullscreenImage = document.getElementById('fullscreenImage');
-            const fsPrevBtn = document.getElementById('fsPrevBtn');
-            const fsNextBtn = document.getElementById('fsNextBtn');
-            const fsCloseBtn = document.getElementById('fsCloseBtn');
+            const elements = {
+                dropzone: document.getElementById('dropzone'),
+                browseBtn: document.getElementById('browseBtn'),
+                fileInput: document.getElementById('fileInput'),
+                viewerArea: document.getElementById('viewerArea'),
+                fileList: document.getElementById('fileList'),
+                imageDisplay: document.getElementById('imageDisplay'),
+                fileName: document.getElementById('fileName'),
+                fileInfo: document.getElementById('fileInfo'),
+                fileCount: document.getElementById('fileCount'),
+                prevBtn: document.getElementById('prevBtn'),
+                nextBtn: document.getElementById('nextBtn'),
+                zoomInBtn: document.getElementById('zoomInBtn'),
+                zoomOutBtn: document.getElementById('zoomOutBtn'),
+                resetZoomBtn: document.getElementById('resetZoomBtn'),
+                fullscreenBtn: document.getElementById('fullscreenBtn'),
+                progressBar: document.getElementById('progressBar'),
+                currentIndex: document.getElementById('currentIndex'),
+                totalImages: document.getElementById('totalImages'),
+                sortBtn: document.getElementById('sortBtn'),
+                sortDropdown: document.getElementById('sortDropdown'),
+                fullscreenContainer: document.getElementById('fullscreenContainer'),
+                fullscreenImage: document.getElementById('fullscreenImage'),
+                fsPrevBtn: document.getElementById('fsPrevBtn'),
+                fsNextBtn: document.getElementById('fsNextBtn'),
+                fsCloseBtn: document.getElementById('fsCloseBtn')
+            };
 
             // State variables
-            let files = [];
-            let currentFileIndex = -1;
-            let zoomLevel = 1;
-            const maxZoom = 3;
-            const minZoom = 0.5;
-            const zoomStep = 0.1;
-            let currentSortMethod = 'name-asc';
-
-            // Event listeners for dropzone
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                dropzone.addEventListener(eventName, preventDefaults, false);
-            });
-
-            function preventDefaults(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropzone.addEventListener(eventName, highlight, false);
-            });
-
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropzone.addEventListener(eventName, unhighlight, false);
-            });
-
-            function highlight() {
-                dropzone.classList.add('active');
-            }
-
-            function unhighlight() {
-                dropzone.classList.remove('active');
-            }
-
-            dropzone.addEventListener('drop', handleDrop, false);
+            const state = {
+                files: [],
+                currentFileIndex: -1,
+                zoomLevel: 1,
+                maxZoom: 3,
+                minZoom: 0.5,
+                zoomStep: 0.1,
+                currentSortMethod: 'name-asc',
+                thumbnailObserver: null,
+                isDragging: false,
+                startX: 0,
+                startY: 0,
+                translateX: 0,
+                translateY: 0
+            };
+
+            // Initialize the app
+            const init = () => {
+                setupEventListeners();
+                setupThumbnailObserver();
+            };
+
+            // Set up all event listeners
+            const setupEventListeners = () => {
+                // Dropzone events
+                ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                    elements.dropzone.addEventListener(eventName, preventDefaults, false);
+                });
 
-            function handleDrop(e) {
-                const dt = e.dataTransfer;
-                const droppedFiles = dt.files;
-                handleFiles(droppedFiles);
-            }
+                ['dragenter', 'dragover'].forEach(eventName => {
+                    elements.dropzone.addEventListener(eventName, highlight, false);
+                });
 
-            // Browse button click
-            browseBtn.addEventListener('click', () => {
-                fileInput.click();
-            });
+                ['dragleave', 'drop'].forEach(eventName => {
+                    elements.dropzone.addEventListener(eventName, unhighlight, false);
+                });
 
-            // File input change
-            fileInput.addEventListener('change', () => {
-                if (fileInput.files.length > 0) {
-                    handleFiles(fileInput.files);
-                }
-            });
+                elements.dropzone.addEventListener('drop', handleDrop, false);
+                elements.browseBtn.addEventListener('click', () => elements.fileInput.click());
+                elements.fileInput.addEventListener('change', () => {
+                    if (elements.fileInput.files.length > 0) {
+                        handleFiles(elements.fileInput.files);
+                    }
+                });
 
-            // Navigation buttons
-            prevBtn.addEventListener('click', showPreviousImage);
-            nextBtn.addEventListener('click', showNextImage);
+                // Navigation events
+                elements.prevBtn.addEventListener('click', showPreviousImage);
+                elements.nextBtn.addEventListener('click', showNextImage);
 
-            // Zoom buttons
-            zoomInBtn.addEventListener('click', zoomIn);
-            zoomOutBtn.addEventListener('click', zoomOut);
-            resetZoomBtn.addEventListener('click', resetZoom);
-            fullscreenBtn.addEventListener('click', openFullscreen);
+                // Zoom events with debouncing
+                elements.zoomInBtn.addEventListener('click', debounce(zoomIn, 100));
+                elements.zoomOutBtn.addEventListener('click', debounce(zoomOut, 100));
+                elements.resetZoomBtn.addEventListener('click', resetZoom);
+                elements.fullscreenBtn.addEventListener('click', openFullscreen);
 
-            // Sort functionality
-            sortBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const isExpanded = sortDropdown.classList.toggle('hidden');
-                sortBtn.setAttribute('aria-expanded', !isExpanded);
-            });
-
-            document.querySelectorAll('.sort-option').forEach(option => {
-                option.addEventListener('click', (e) => {
-                    currentSortMethod = e.target.dataset.sort;
-                    sortFiles();
-                    updateFileList();
-                    showImage(currentFileIndex);
-                    sortDropdown.classList.add('hidden');
-                    sortBtn.setAttribute('aria-expanded', 'false');
+                // Sort events
+                elements.sortBtn.addEventListener('click', toggleSortDropdown);
+                document.querySelectorAll('.sort-option').forEach(option => {
+                    option.addEventListener('click', handleSortOptionClick);
                 });
-            });
-
-            // Close dropdown when clicking outside
-            document.addEventListener('click', () => {
-                sortDropdown.classList.add('hidden');
-                sortBtn.setAttribute('aria-expanded', 'false');
-            });
+                document.addEventListener('click', closeSortDropdown);
 
-            // Fullscreen functionality
-            fsPrevBtn.addEventListener('click', () => {
-                showPreviousImage();
-                updateFullscreenImage();
-            });
+                // Fullscreen events
+                elements.fsPrevBtn.addEventListener('click', () => {
+                    showPreviousImage();
+                    updateFullscreenImage();
+                });
+                elements.fsNextBtn.addEventListener('click', () => {
+                    showNextImage();
+                    updateFullscreenImage();
+                });
+                elements.fsCloseBtn.addEventListener('click', closeFullscreen);
+
+                // Keyboard events
+                document.addEventListener('keydown', handleKeyboardNavigation);
+            };
+
+            // Set up Intersection Observer for lazy loading thumbnails
+            const setupThumbnailObserver = () => {
+                state.thumbnailObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const thumbnail = entry.target;
+                            const index = parseInt(thumbnail.dataset.index);
+                            loadThumbnail(index);
+                            state.thumbnailObserver.unobserve(thumbnail);
+                        }
+                    });
+                }, {
+                    root: elements.fileList,
+                    rootMargin: '100px',
+                    threshold: 0.1
+                });
+            };
 
-            fsNextBtn.addEventListener('click', () => {
-                showNextImage();
-                updateFullscreenImage();
-            });
+            // Dropzone helper functions
+            const preventDefaults = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            };
 
-            fsCloseBtn.addEventListener('click', closeFullscreen);
+            const highlight = () => {
+                elements.dropzone.classList.add('active');
+            };
 
-            // Keyboard navigation
-            document.addEventListener('keydown', (e) => {
-                if (files.length === 0) return;
+            const unhighlight = () => {
+                elements.dropzone.classList.remove('active');
+            };
 
-                switch (e.key) {
-                    case 'ArrowLeft':
-                        if (fullscreenContainer.style.display === 'flex') {
-                            showPreviousImage();
-                            updateFullscreenImage();
-                        } else {
-                            showPreviousImage();
-                        }
-                        break;
-                    case 'ArrowRight':
-                        if (fullscreenContainer.style.display === 'flex') {
-                            showNextImage();
-                            updateFullscreenImage();
-                        } else {
-                            showNextImage();
-                        }
-                        break;
-                    case '+':
-                    case '=':
-                        zoomIn();
-                        break;
-                    case '-':
-                        zoomOut();
-                        break;
-                    case '0':
-                        resetZoom();
-                        break;
-                    case 'Escape':
-                        if (fullscreenContainer.style.display === 'flex') {
-                            closeFullscreen();
-                        }
-                        break;
-                    case 'f':
-                    case 'F':
-                        if (imageDisplay.querySelector('img')) {
-                            if (fullscreenContainer.style.display === 'flex') {
-                                closeFullscreen();
-                            } else {
-                                openFullscreen();
-                            }
-                        }
-                        break;
-                }
-            });
+            const handleDrop = (e) => {
+                const dt = e.dataTransfer;
+                const droppedFiles = dt.files;
+                handleFiles(droppedFiles);
+            };
 
-            // Handle dropped or selected files
-            function handleFiles(newFiles) {
-                // Filter for supported image types
+            // File handling
+            const handleFiles = (newFiles) => {
                 const supportedTypes = [
                     'image/webp',
                     'image/png',
@@ -457,10 +464,7 @@
                 ];
 
                 const imageFiles = Array.from(newFiles).filter(file => {
-                    // Check MIME type first
                     if (supportedTypes.includes(file.type)) return true;
-
-                    // Fallback for file extensions (some browsers might not recognize HEIC/AVIF MIME types)
                     const extension = file.name.split('.').pop().toLowerCase();
                     return ['webp', 'png', 'jpg', 'jpeg', 'avif', 'heic', 'heif'].includes(extension);
                 });
@@ -470,65 +474,79 @@
                     return;
                 }
 
-                files = imageFiles;
-                currentFileIndex = 0;
-                zoomLevel = 1;
+                state.files = imageFiles;
+                state.currentFileIndex = 0;
+                state.zoomLevel = 1;
 
-                // Sort files
                 sortFiles();
-
-                // Update UI
                 updateFileList();
-                showImage(currentFileIndex);
-                viewerArea.classList.remove('hidden');
-
-                // Scroll to top
+                showImage(state.currentFileIndex);
+                elements.viewerArea.classList.remove('hidden');
                 window.scrollTo(0, 0);
-            }
+            };
 
-            // Sort files based on current sort method
-            function sortFiles() {
-                switch (currentSortMethod) {
+            // Sort functionality
+            const sortFiles = () => {
+                switch (state.currentSortMethod) {
                     case 'name-asc':
-                        files.sort((a, b) => a.name.localeCompare(b.name));
+                        state.files.sort((a, b) => a.name.localeCompare(b.name));
                         break;
                     case 'name-desc':
-                        files.sort((a, b) => b.name.localeCompare(a.name));
+                        state.files.sort((a, b) => b.name.localeCompare(a.name));
                         break;
                     case 'size-asc':
-                        files.sort((a, b) => a.size - b.size);
+                        state.files.sort((a, b) => a.size - b.size);
                         break;
                     case 'size-desc':
-                        files.sort((a, b) => b.size - a.size);
+                        state.files.sort((a, b) => b.size - a.size);
                         break;
                     case 'date-asc':
-                        files.sort((a, b) => a.lastModified - b.lastModified);
+                        state.files.sort((a, b) => a.lastModified - b.lastModified);
                         break;
                     case 'date-desc':
-                        files.sort((a, b) => b.lastModified - a.lastModified);
+                        state.files.sort((a, b) => b.lastModified - a.lastModified);
                         break;
                 }
 
-                // Update current file index to maintain selection
-                if (currentFileIndex >= 0 && files.length > 0) {
-                    currentFileIndex = 0;
+                if (state.currentFileIndex >= 0 && state.files.length > 0) {
+                    state.currentFileIndex = 0;
                 }
-            }
+            };
 
-            // Update the file list sidebar
-            function updateFileList() {
-                fileList.innerHTML = '';
-                fileCount.textContent = files.length;
-                totalImages.textContent = files.length;
+            const toggleSortDropdown = (e) => {
+                e.stopPropagation();
+                const isExpanded = elements.sortDropdown.classList.toggle('hidden');
+                elements.sortBtn.setAttribute('aria-expanded', !isExpanded);
+            };
 
-                files.forEach((file, index) => {
+            const handleSortOptionClick = (e) => {
+                state.currentSortMethod = e.target.dataset.sort;
+                sortFiles();
+                updateFileList();
+                showImage(state.currentFileIndex);
+                closeSortDropdown();
+            };
+
+            const closeSortDropdown = () => {
+                elements.sortDropdown.classList.add('hidden');
+                elements.sortBtn.setAttribute('aria-expanded', 'false');
+            };
+
+            // File list management
+            const updateFileList = () => {
+                elements.fileList.innerHTML = '';
+                elements.fileCount.textContent = state.files.length;
+                elements.totalImages.textContent = state.files.length;
+
+                state.files.forEach((file, index) => {
                     const listItem = document.createElement('li');
-                    listItem.className = `file-item cursor-pointer ${index === currentFileIndex ? 'active' : ''}`;
+                    listItem.className = `file-item cursor-pointer ${index === state.currentFileIndex ? 'active' : ''}`;
                     listItem.setAttribute('role', 'listitem');
                     listItem.innerHTML = `
                         <div class="flex items-center p-3">
-                            <div class="flex-shrink-0 h-10 w-10 rounded bg-gray-200 overflow-hidden">
-                                <img src="#" alt="Thumbnail" class="h-full w-full object-cover thumbnail" data-index="${index}">
+                            <div class="flex-shrink-0 h-10 w-10 rounded overflow-hidden thumbnail-placeholder">
+                                <i class="fas fa-image text-lg"></i>
+                                <img src="#" alt="Thumbnail" class="h-full w-full object-cover hidden thumbnail" data-index="${index}">
                             </div>
                             <div class="ml-3 overflow-hidden">
                                 <p class="text-sm font-medium text-gray-900 truncate">${file.name}</p>
@@ -537,11 +555,7 @@
                         </div>
                     `;
 
-                    listItem.addEventListener('click', () => {
-                        showImage(index);
-                    });
-
-                    // Keyboard navigation for file list items
+                    listItem.addEventListener('click', () => showImage(index));
                     listItem.addEventListener('keydown', (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             e.preventDefault();
@@ -550,26 +564,35 @@
                     });
 
                     listItem.setAttribute('tabindex', '0');
-                    fileList.appendChild(listItem);
-
-                    // Load thumbnail
-                    const reader = new FileReader();
-                    reader.onload = (e) => {
-                        const thumbnails = document.querySelectorAll(`.thumbnail[data-index="${index}"]`);
-                        thumbnails.forEach(thumb => {
-                            thumb.src = e.target.result;
-                        });
-                    };
-                    reader.readAsDataURL(file);
+                    elements.fileList.appendChild(listItem);
+
+                    // Observe the thumbnail for lazy loading
+                    const thumbnail = listItem.querySelector('.thumbnail');
+                    state.thumbnailObserver.observe(thumbnail);
                 });
-            }
+            };
+
+            // Lazy load thumbnail when it comes into view
+            const loadThumbnail = (index) => {
+                const thumbnail = document.querySelector(`.thumbnail[data-index="${index}"]`);
+                if (!thumbnail || thumbnail.src !== '#') return;
+
+                const file = state.files[index];
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    thumbnail.src = e.target.result;
+                    thumbnail.classList.remove('hidden');
+                    thumbnail.previousElementSibling?.remove();
+                };
+                reader.readAsDataURL(file);
+            };
 
-            // Show image at specified index
-            function showImage(index) {
-                if (index < 0 || index >= files.length) return;
+            // Image display
+            const showImage = (index) => {
+                if (index < 0 || index >= state.files.length) return;
 
-                currentFileIndex = index;
-                const file = files[index];
+                state.currentFileIndex = index;
+                const file = state.files[index];
 
                 // Update active item in file list
                 document.querySelectorAll('.file-item').forEach((item, i) => {
@@ -583,168 +606,228 @@
                 });
 
                 // Update progress
-                currentIndex.textContent = index + 1;
-                progressBar.style.width = `${((index + 1) / files.length) * 100}%`;
+                elements.currentIndex.textContent = index + 1;
+                elements.progressBar.style.width = `${((index + 1) / state.files.length) * 100}%`;
 
                 // Display the image
                 const reader = new FileReader();
                 reader.onload = (e) => {
-                    imageDisplay.innerHTML = '';
+                    elements.imageDisplay.innerHTML = '';
 
                     const img = document.createElement('img');
                     img.src = e.target.result;
                     img.className = 'max-w-full max-h-[70vh] object-contain fade-in';
-                    img.style.transform = `scale(${zoomLevel})`;
+                    img.style.transform = `scale(${state.zoomLevel})`;
                     img.style.transformOrigin = 'center center';
                     img.style.transition = 'transform 0.2s ease';
                     img.setAttribute('alt', `Preview of ${file.name}`);
 
                     // Add drag to pan functionality
-                    let isDragging = false;
-                    let startX, startY, translateX = 0, translateY = 0;
-
-                    img.addEventListener('mousedown', (e) => {
-                        if (zoomLevel <= 1) return;
-
-                        isDragging = true;
-                        startX = e.clientX - translateX;
-                        startY = e.clientY - translateY;
-                        img.style.cursor = 'grabbing';
-                    });
-
-                    document.addEventListener('mousemove', (e) => {
-                        if (!isDragging) return;
-
-                        translateX = e.clientX - startX;
-                        translateY = e.clientY - startY;
-                        img.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
-                    });
-
-                    document.addEventListener('mouseup', () => {
-                        isDragging = false;
-                        img.style.cursor = 'grab';
-                    });
-
-                    img.addEventListener('mouseenter', () => {
-                        if (zoomLevel > 1) {
-                            img.style.cursor = 'grab';
-                        }
-                    });
+                    img.addEventListener('mousedown', handleImageMouseDown);
+                    document.addEventListener('mousemove', throttle(handleImageMouseMove, 16));
+                    document.addEventListener('mouseup', handleImageMouseUp);
+                    img.addEventListener('mouseenter', handleImageMouseEnter);
+                    img.addEventListener('mouseleave', handleImageMouseLeave);
 
-                    img.addEventListener('mouseleave', () => {
-                        img.style.cursor = 'default';
-                    });
-
-                    imageDisplay.appendChild(img);
+                    elements.imageDisplay.appendChild(img);
 
                     // Update file info
-                    fileName.textContent = file.name;
-                    fileInfo.textContent = `${getFileType(file)} • ${formatFileSize(file.size)}`;
+                    elements.fileName.textContent = file.name;
+                    elements.fileInfo.textContent = `${getFileType(file)} • ${formatFileSize(file.size)}`;
 
                     // Load image dimensions after the image is loaded
                     img.onload = () => {
-                        fileInfo.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${getFileType(file)} • ${formatFileSize(file.size)}`;
+                        elements.fileInfo.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${getFileType(file)} • ${formatFileSize(file.size)}`;
                     };
                 };
                 reader.readAsDataURL(file);
 
                 // Enable/disable navigation buttons
-                prevBtn.disabled = index === 0;
-                nextBtn.disabled = index === files.length - 1;
-            }
-
-            // Helper to get file type
-            function getFileType(file) {
-                if (file.type) {
-                    const type = file.type.split('/')[1];
-                    if (type) return type.toUpperCase();
+                elements.prevBtn.disabled = index === 0;
+                elements.nextBtn.disabled = index === state.files.length - 1;
+            };
+
+            // Image drag handlers
+            const handleImageMouseDown = (e) => {
+                if (state.zoomLevel <= 1) return;
+
+                state.isDragging = true;
+                state.startX = e.clientX - state.translateX;
+                state.startY = e.clientY - state.translateY;
+                e.target.style.cursor = 'grabbing';
+            };
+
+            const handleImageMouseMove = (e) => {
+                if (!state.isDragging) return;
+
+                state.translateX = e.clientX - state.startX;
+                state.translateY = e.clientY - state.startY;
+                
+                const img = elements.imageDisplay.querySelector('img');
+                if (img) {
+                    img.style.transform = `scale(${state.zoomLevel}) translate(${state.translateX}px, ${state.translateY}px)`;
                 }
+            };
 
-                // Fallback for file extension
-                const extension = file.name.split('.').pop().toLowerCase();
-                switch (extension) {
-                    case 'jpg':
-                    case 'jpeg': return 'JPEG';
-                    case 'png': return 'PNG';
-                    case 'webp': return 'WEBP';
-                    case 'avif': return 'AVIF';
-                    case 'heic':
-                    case 'heif': return 'HEIC';
-                    default: return extension.toUpperCase();
+            const handleImageMouseUp = () => {
+                state.isDragging = false;
+                const img = elements.imageDisplay.querySelector('img');
+                if (img) img.style.cursor = 'grab';
+            };
+
+            const handleImageMouseEnter = (e) => {
+                if (state.zoomLevel > 1) {
+                    e.target.style.cursor = 'grab';
                 }
-            }
+            };
+
+            const handleImageMouseLeave = (e) => {
+                e.target.style.cursor = 'default';
+            };
 
             // Navigation functions
-            function showPreviousImage() {
-                if (currentFileIndex > 0) {
-                    showImage(currentFileIndex - 1);
+            const showPreviousImage = () => {
+                if (state.currentFileIndex > 0) {
+                    showImage(state.currentFileIndex - 1);
                 }
-            }
+            };
 
-            function showNextImage() {
-                if (currentFileIndex < files.length - 1) {
-                    showImage(currentFileIndex + 1);
+            const showNextImage = () => {
+                if (state.currentFileIndex < state.files.length - 1) {
+                    showImage(state.currentFileIndex + 1);
                 }
-            }
+            };
 
             // Zoom functions
-            function zoomIn() {
-                if (zoomLevel < maxZoom) {
-                    zoomLevel += zoomStep;
+            const zoomIn = () => {
+                if (state.zoomLevel < state.maxZoom) {
+                    state.zoomLevel += state.zoomStep;
                     applyZoom();
                 }
-            }
+            };
 
-            function zoomOut() {
-                if (zoomLevel > minZoom) {
-                    zoomLevel -= zoomStep;
+            const zoomOut = () => {
+                if (state.zoomLevel > state.minZoom) {
+                    state.zoomLevel -= state.zoomStep;
                     applyZoom();
                 }
-            }
+            };
 
-            function resetZoom() {
-                zoomLevel = 1;
+            const resetZoom = () => {
+                state.zoomLevel = 1;
+                state.translateX = 0;
+                state.translateY = 0;
                 applyZoom();
-            }
+            };
 
-            function applyZoom() {
-                const img = imageDisplay.querySelector('img');
+            const applyZoom = () => {
+                const img = elements.imageDisplay.querySelector('img');
                 if (img) {
-                    img.style.transform = `scale(${zoomLevel})`;
+                    img.style.transform = `scale(${state.zoomLevel}) translate(${state.translateX}px, ${state.translateY}px)`;
 
                     // Reset pan position when zooming
-                    if (zoomLevel <= 1) {
-                        img.style.transform = `scale(${zoomLevel}) translate(0, 0)`;
+                    if (state.zoomLevel <= 1) {
+                        state.translateX = 0;
+                        state.translateY = 0;
+                        img.style.transform = `scale(${state.zoomLevel}) translate(0, 0)`;
                     }
                 }
-            }
+            };
 
             // Fullscreen functions
-            function openFullscreen() {
-                const img = imageDisplay.querySelector('img');
+            const openFullscreen = () => {
+                const img = elements.imageDisplay.querySelector('img');
                 if (!img) return;
 
-                fullscreenImage.src = img.src;
-                fullscreenContainer.style.display = 'flex';
+                elements.fullscreenImage.src = img.src;
+                elements.fullscreenContainer.style.display = 'flex';
                 document.body.style.overflow = 'hidden';
-                fullscreenContainer.setAttribute('aria-hidden', 'false');
-            }
+                elements.fullscreenContainer.setAttribute('aria-hidden', 'false');
+            };
 
-            function closeFullscreen() {
-                fullscreenContainer.style.display = 'none';
+            const closeFullscreen = () => {
+                elements.fullscreenContainer.style.display = 'none';
                 document.body.style.overflow = '';
-                fullscreenContainer.setAttribute('aria-hidden', 'true');
-            }
+                elements.fullscreenContainer.setAttribute('aria-hidden', 'true');
+            };
 
-            function updateFullscreenImage() {
-                const img = imageDisplay.querySelector('img');
+            const updateFullscreenImage = () => {
+                const img = elements.imageDisplay.querySelector('img');
                 if (img) {
-                    fullscreenImage.src = img.src;
+                    elements.fullscreenImage.src = img.src;
                 }
-            }
+            };
 
-            // Helper function to format file size
-            function formatFileSize(bytes) {
+            // Keyboard navigation
+            const handleKeyboardNavigation = (e) => {
+                if (state.files.length === 0) return;
+
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        if (elements.fullscreenContainer.style.display === 'flex') {
+                            showPreviousImage();
+                            updateFullscreenImage();
+                        } else {
+                            showPreviousImage();
+                        }
+                        break;
+                    case 'ArrowRight':
+                        if (elements.fullscreenContainer.style.display === 'flex') {
+                            showNextImage();
+                            updateFullscreenImage();
+                        } else {
+                            showNextImage();
+                        }
+                        break;
+                    case '+':
+                    case '=':
+                        zoomIn();
+                        break;
+                    case '-':
+                        zoomOut();
+                        break;
+                    case '0':
+                        resetZoom();
+                        break;
+                    case 'Escape':
+                        if (elements.fullscreenContainer.style.display === 'flex') {
+                            closeFullscreen();
+                        }
+                        break;
+                    case 'f':
+                    case 'F':
+                        if (elements.imageDisplay.querySelector('img')) {
+                            if (elements.fullscreenContainer.style.display === 'flex') {
+                                closeFullscreen();
+                            } else {
+                                openFullscreen();
+                            }
+                        }
+                        break;
+                }
+            };
+
+            // Helper functions
+            const getFileType = (file) => {
+                if (file.type) {
+                    const type = file.type.split('/')[1];
+                    if (type) return type.toUpperCase();
+                }
+
+                const extension = file.name.split('.').pop().toLowerCase();
+                switch (extension) {
+                    case 'jpg':
+                    case 'jpeg': return 'JPEG';
+                    case 'png': return 'PNG';
+                    case 'webp': return 'WEBP';
+                    case 'avif': return 'AVIF';
+                    case 'heic':
+                    case 'heif': return 'HEIC';
+                    default: return extension.toUpperCase();
+                }
+            };
+
+            const formatFileSize = (bytes) => {
                 if (bytes === 0) return '0 Bytes';
 
                 const k = 1024;
@@ -752,7 +835,10 @@
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
 
                 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-            }
+            };
+
+            // Initialize the application
+            init();
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jsfs11/local-image-viewer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>