Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Local Image Viewer</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .dropzone { | |
| border: 3px dashed #9CA3AF; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3B82F6; | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .image-container { | |
| transition: transform 0.3s ease; | |
| } | |
| .image-container:hover { | |
| transform: scale(1.01); | |
| } | |
| .nav-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .nav-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .file-item:hover { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .file-item.active { | |
| background-color: rgba(59, 130, 246, 0.2); | |
| border-left: 3px solid #3B82F6; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| #fullscreenContainer { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| #fullscreenImage { | |
| max-width: 90%; | |
| max-height: 90%; | |
| object-fit: contain; | |
| } | |
| #fullscreenControls { | |
| position: absolute; | |
| bottom: 20px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .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> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h1 class="text-3xl font-bold text-center text-gray-800 mb-2">Local Image Viewer</h1> | |
| <p class="text-center text-gray-600 mb-8">View your local WebP, PNG, JPEG, AVIF, and HEIC files with ease | |
| </p> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> | |
| <!-- Dropzone area --> | |
| <div id="dropzone" class="dropzone p-12 text-center cursor-pointer" role="region" | |
| aria-label="File drop zone"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-images text-5xl text-gray-400 mb-4" aria-hidden="true"></i> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Images Here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button id="browseBtn" | |
| class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition" | |
| aria-label="Browse files"> | |
| Browse Files | |
| </button> | |
| <input type="file" id="fileInput" class="hidden" | |
| accept=".webp,.png,.jpg,.jpeg,.avif,.heic,.heif" multiple> | |
| </div> | |
| </div> | |
| <!-- Main viewer area (hidden initially) --> | |
| <div id="viewerArea" class="hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Sidebar with file list --> | |
| <div class="w-full md:w-1/4 bg-gray-50 border-r border-gray-200 max-h-[70vh] overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-medium text-gray-700">Files (<span id="fileCount">0</span>)</h3> | |
| <div class="relative"> | |
| <button id="sortBtn" class="text-gray-600 hover:text-gray-800" | |
| aria-label="Sort options" aria-haspopup="true" aria-expanded="false"> | |
| <i class="fas fa-sort" aria-hidden="true"></i> | |
| </button> | |
| <div id="sortDropdown" | |
| class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1"> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="name-asc" role="menuitem">Name (A-Z)</div> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="name-desc" role="menuitem">Name (Z-A)</div> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="size-asc" role="menuitem">Size (Small to Large)</div> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="size-desc" role="menuitem">Size (Large to Small)</div> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="date-asc" role="menuitem">Date (Oldest First)</div> | |
| <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" | |
| data-sort="date-desc" role="menuitem">Date (Newest First)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <ul id="fileList" class="divide-y divide-gray-200" role="list"> | |
| <!-- Files will be listed here --> | |
| </ul> | |
| </div> | |
| <!-- Main image display --> | |
| <div class="w-full md:w-3/4 p-4 flex flex-col items-center justify-center"> | |
| <div class="relative w-full max-w-3xl"> | |
| <!-- Navigation buttons --> | |
| <button id="prevBtn" | |
| class="nav-btn absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-gray-800 p-3 rounded-full shadow-md ml-4 z-10" | |
| aria-label="Previous image"> | |
| <i class="fas fa-chevron-left text-xl" aria-hidden="true"></i> | |
| </button> | |
| <button id="nextBtn" | |
| class="nav-btn absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-gray-800 p-3 rounded-full shadow-md mr-4 z-10" | |
| aria-label="Next image"> | |
| <i class="fas fa-chevron-right text-xl" aria-hidden="true"></i> | |
| </button> | |
| <!-- Image display area --> | |
| <div class="image-container bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center" | |
| style="min-height: 400px;"> | |
| <div id="imageDisplay" class="p-4 w-full h-full flex items-center justify-center"> | |
| <p class="text-gray-500">Select an image to view</p> | |
| </div> | |
| </div> | |
| <!-- Image info --> | |
| <div class="mt-4 bg-gray-50 rounded-lg p-3"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 id="fileName" class="font-medium text-gray-800 truncate">No image | |
| selected</h4> | |
| <p id="fileInfo" class="text-sm text-gray-500">-</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="zoomInBtn" | |
| class="nav-btn bg-gray-200 hover:bg-gray-300 text-gray-700 p-2 rounded" | |
| aria-label="Zoom in"> | |
| <i class="fas fa-search-plus" aria-hidden="true"></i> | |
| </button> | |
| <button id="zoomOutBtn" | |
| class="nav-btn bg-gray-200 hover:bg-gray-300 text-gray-700 p-2 rounded" | |
| aria-label="Zoom out"> | |
| <i class="fas fa-search-minus" aria-hidden="true"></i> | |
| </button> | |
| <button id="resetZoomBtn" | |
| class="nav-btn bg-gray-200 hover:bg-gray-300 text-gray-700 p-2 rounded" | |
| aria-label="Reset zoom"> | |
| <i class="fas fa-expand" aria-hidden="true"></i> | |
| </button> | |
| <button id="fullscreenBtn" | |
| class="nav-btn bg-gray-200 hover:bg-gray-300 text-gray-700 p-2 rounded" | |
| aria-label="Fullscreen"> | |
| <i class="fas fa-expand-arrows-alt" aria-hidden="true"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div id="progressBar" class="bg-blue-500 h-2 rounded-full" | |
| style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span id="currentIndex">0</span> | |
| <span id="totalImages">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-500 text-sm mt-8"> | |
| <p>Use arrow keys to navigate between images</p> | |
| <p class="mt-1">Supported formats: WebP, PNG, JPEG, AVIF, HEIC</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fullscreen container --> | |
| <div id="fullscreenContainer" role="dialog" aria-modal="true" aria-label="Fullscreen image viewer"> | |
| <img id="fullscreenImage" src="" alt="Fullscreen Image"> | |
| <div id="fullscreenControls"> | |
| <button id="fsPrevBtn" class="nav-btn bg-white/20 hover:bg-white/40 text-white p-3 rounded-full" | |
| aria-label="Previous image"> | |
| <i class="fas fa-chevron-left text-xl" aria-hidden="true"></i> | |
| </button> | |
| <button id="fsCloseBtn" class="nav-btn bg-white/20 hover:bg-white/40 text-white p-3 rounded-full" | |
| aria-label="Close fullscreen"> | |
| <i class="fas fa-times text-xl" aria-hidden="true"></i> | |
| </button> | |
| <button id="fsNextBtn" class="nav-btn bg-white/20 hover:bg-white/40 text-white p-3 rounded-full" | |
| aria-label="Next image"> | |
| <i class="fas fa-chevron-right text-xl" aria-hidden="true"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <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 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 | |
| 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); | |
| }); | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| elements.dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| elements.dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| 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 events | |
| elements.prevBtn.addEventListener('click', showPreviousImage); | |
| elements.nextBtn.addEventListener('click', showNextImage); | |
| // 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 events | |
| elements.sortBtn.addEventListener('click', toggleSortDropdown); | |
| document.querySelectorAll('.sort-option').forEach(option => { | |
| option.addEventListener('click', handleSortOptionClick); | |
| }); | |
| document.addEventListener('click', closeSortDropdown); | |
| // 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 | |
| }); | |
| }; | |
| // Dropzone helper functions | |
| const preventDefaults = (e) => { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| }; | |
| const highlight = () => { | |
| elements.dropzone.classList.add('active'); | |
| }; | |
| const unhighlight = () => { | |
| elements.dropzone.classList.remove('active'); | |
| }; | |
| const handleDrop = (e) => { | |
| const dt = e.dataTransfer; | |
| const droppedFiles = dt.files; | |
| handleFiles(droppedFiles); | |
| }; | |
| // File handling | |
| const handleFiles = (newFiles) => { | |
| const supportedTypes = [ | |
| 'image/webp', | |
| 'image/png', | |
| 'image/jpeg', | |
| 'image/avif', | |
| 'image/heic', | |
| 'image/heif' | |
| ]; | |
| const imageFiles = Array.from(newFiles).filter(file => { | |
| if (supportedTypes.includes(file.type)) return true; | |
| const extension = file.name.split('.').pop().toLowerCase(); | |
| return ['webp', 'png', 'jpg', 'jpeg', 'avif', 'heic', 'heif'].includes(extension); | |
| }); | |
| if (imageFiles.length === 0) { | |
| alert('No supported image files found. Please upload WebP, PNG, JPEG, AVIF, or HEIC files.'); | |
| return; | |
| } | |
| state.files = imageFiles; | |
| state.currentFileIndex = 0; | |
| state.zoomLevel = 1; | |
| sortFiles(); | |
| updateFileList(); | |
| showImage(state.currentFileIndex); | |
| elements.viewerArea.classList.remove('hidden'); | |
| window.scrollTo(0, 0); | |
| }; | |
| // Sort functionality | |
| const sortFiles = () => { | |
| switch (state.currentSortMethod) { | |
| case 'name-asc': | |
| state.files.sort((a, b) => a.name.localeCompare(b.name)); | |
| break; | |
| case 'name-desc': | |
| state.files.sort((a, b) => b.name.localeCompare(a.name)); | |
| break; | |
| case 'size-asc': | |
| state.files.sort((a, b) => a.size - b.size); | |
| break; | |
| case 'size-desc': | |
| state.files.sort((a, b) => b.size - a.size); | |
| break; | |
| case 'date-asc': | |
| state.files.sort((a, b) => a.lastModified - b.lastModified); | |
| break; | |
| case 'date-desc': | |
| state.files.sort((a, b) => b.lastModified - a.lastModified); | |
| break; | |
| } | |
| if (state.currentFileIndex >= 0 && state.files.length > 0) { | |
| state.currentFileIndex = 0; | |
| } | |
| }; | |
| const toggleSortDropdown = (e) => { | |
| e.stopPropagation(); | |
| const isExpanded = elements.sortDropdown.classList.toggle('hidden'); | |
| elements.sortBtn.setAttribute('aria-expanded', !isExpanded); | |
| }; | |
| 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 === 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 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> | |
| <p class="text-sm text-gray-500">${formatFileSize(file.size)}</p> | |
| </div> | |
| </div> | |
| `; | |
| listItem.addEventListener('click', () => showImage(index)); | |
| listItem.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| e.preventDefault(); | |
| showImage(index); | |
| } | |
| }); | |
| listItem.setAttribute('tabindex', '0'); | |
| 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); | |
| }; | |
| // Image display | |
| const showImage = (index) => { | |
| if (index < 0 || index >= state.files.length) return; | |
| state.currentFileIndex = index; | |
| const file = state.files[index]; | |
| // Update active item in file list | |
| document.querySelectorAll('.file-item').forEach((item, i) => { | |
| if (i === index) { | |
| item.classList.add('active'); | |
| item.setAttribute('aria-selected', 'true'); | |
| } else { | |
| item.classList.remove('active'); | |
| item.setAttribute('aria-selected', 'false'); | |
| } | |
| }); | |
| // Update progress | |
| 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) => { | |
| 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(${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 | |
| img.addEventListener('mousedown', handleImageMouseDown); | |
| document.addEventListener('mousemove', throttle(handleImageMouseMove, 16)); | |
| document.addEventListener('mouseup', handleImageMouseUp); | |
| img.addEventListener('mouseenter', handleImageMouseEnter); | |
| img.addEventListener('mouseleave', handleImageMouseLeave); | |
| elements.imageDisplay.appendChild(img); | |
| // Update file info | |
| elements.fileName.textContent = file.name; | |
| elements.fileInfo.textContent = `${getFileType(file)} • ${formatFileSize(file.size)}`; | |
| // Load image dimensions after the image is loaded | |
| img.onload = () => { | |
| elements.fileInfo.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${getFileType(file)} • ${formatFileSize(file.size)}`; | |
| }; | |
| }; | |
| reader.readAsDataURL(file); | |
| // Enable/disable navigation buttons | |
| 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)`; | |
| } | |
| }; | |
| 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 | |
| const showPreviousImage = () => { | |
| if (state.currentFileIndex > 0) { | |
| showImage(state.currentFileIndex - 1); | |
| } | |
| }; | |
| const showNextImage = () => { | |
| if (state.currentFileIndex < state.files.length - 1) { | |
| showImage(state.currentFileIndex + 1); | |
| } | |
| }; | |
| // Zoom functions | |
| const zoomIn = () => { | |
| if (state.zoomLevel < state.maxZoom) { | |
| state.zoomLevel += state.zoomStep; | |
| applyZoom(); | |
| } | |
| }; | |
| const zoomOut = () => { | |
| if (state.zoomLevel > state.minZoom) { | |
| state.zoomLevel -= state.zoomStep; | |
| applyZoom(); | |
| } | |
| }; | |
| const resetZoom = () => { | |
| state.zoomLevel = 1; | |
| state.translateX = 0; | |
| state.translateY = 0; | |
| applyZoom(); | |
| }; | |
| const applyZoom = () => { | |
| const img = elements.imageDisplay.querySelector('img'); | |
| if (img) { | |
| img.style.transform = `scale(${state.zoomLevel}) translate(${state.translateX}px, ${state.translateY}px)`; | |
| // Reset pan position when zooming | |
| if (state.zoomLevel <= 1) { | |
| state.translateX = 0; | |
| state.translateY = 0; | |
| img.style.transform = `scale(${state.zoomLevel}) translate(0, 0)`; | |
| } | |
| } | |
| }; | |
| // Fullscreen functions | |
| const openFullscreen = () => { | |
| const img = elements.imageDisplay.querySelector('img'); | |
| if (!img) return; | |
| elements.fullscreenImage.src = img.src; | |
| elements.fullscreenContainer.style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| elements.fullscreenContainer.setAttribute('aria-hidden', 'false'); | |
| }; | |
| const closeFullscreen = () => { | |
| elements.fullscreenContainer.style.display = 'none'; | |
| document.body.style.overflow = ''; | |
| elements.fullscreenContainer.setAttribute('aria-hidden', 'true'); | |
| }; | |
| const updateFullscreenImage = () => { | |
| const img = elements.imageDisplay.querySelector('img'); | |
| if (img) { | |
| elements.fullscreenImage.src = img.src; | |
| } | |
| }; | |
| // 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; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; | |
| 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> | |
| </html> |