Add 1 files

index.html

@@ -4,7 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Local Image Viewer</title>
+    <!-- Local Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Local Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .dropzone {
@@ -77,19 +90,19 @@
     <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, and JPEG files with ease</p>
+            <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">
+                <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"></i>
+                        <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">
+                        <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" multiple>
+                        <input type="file" id="fileInput" class="hidden" accept=".webp,.png,.jpg,.jpeg,.avif,.heic,.heif" multiple>
                     </div>
                 </div>
                 
@@ -101,20 +114,20 @@
                             <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">
-                                        <i class="fas fa-sort"></i>
+                                    <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">Name (A-Z)</div>
-                                        <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" data-sort="name-desc">Name (Z-A)</div>
-                                        <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" data-sort="size-asc">Size (Small to Large)</div>
-                                        <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" data-sort="size-desc">Size (Large to Small)</div>
-                                        <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" data-sort="date-asc">Date (Oldest First)</div>
-                                        <div class="sort-option px-4 py-2 text-sm text-gray-700 cursor-pointer" data-sort="date-desc">Date (Newest First)</div>
+                                        <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">
+                            <ul id="fileList" class="divide-y divide-gray-200" role="list">
                                 <!-- Files will be listed here -->
                             </ul>
                         </div>
@@ -123,12 +136,12 @@
                         <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">
-                                    <i class="fas fa-chevron-left text-xl"></i>
+                                <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">
-                                    <i class="fas fa-chevron-right text-xl"></i>
+                                <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 -->
@@ -146,17 +159,17 @@
                                             <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">
-                                                <i class="fas fa-search-plus"></i>
+                                            <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">
-                                                <i class="fas fa-search-minus"></i>
+                                            <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">
-                                                <i class="fas fa-expand"></i>
+                                            <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">
-                                                <i class="fas fa-expand-arrows-alt"></i>
+                                            <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>
@@ -178,23 +191,23 @@
             
             <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</p>
+                <p class="mt-1">Supported formats: WebP, PNG, JPEG, AVIF, HEIC</p>
             </div>
         </div>
     </div>
 
     <!-- Fullscreen container -->
-    <div id="fullscreenContainer">
+    <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">
-                <i class="fas fa-chevron-left text-xl"></i>
+            <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">
-                <i class="fas fa-times text-xl"></i>
+            <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">
-                <i class="fas fa-chevron-right text-xl"></i>
+            <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>
@@ -296,7 +309,8 @@
             // Sort functionality
             sortBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
-                sortDropdown.classList.toggle('hidden');
+                const isExpanded = sortDropdown.classList.toggle('hidden');
+                sortBtn.setAttribute('aria-expanded', !isExpanded);
             });
             
             document.querySelectorAll('.sort-option').forEach(option => {
@@ -306,12 +320,14 @@
                     updateFileList();
                     showImage(currentFileIndex);
                     sortDropdown.classList.add('hidden');
+                    sortBtn.setAttribute('aria-expanded', 'false');
                 });
             });
             
             // Close dropdown when clicking outside
             document.addEventListener('click', () => {
                 sortDropdown.classList.add('hidden');
+                sortBtn.setAttribute('aria-expanded', 'false');
             });
             
             // Fullscreen functionality
@@ -379,13 +395,26 @@
             // Handle dropped or selected files
             function handleFiles(newFiles) {
                 // Filter for supported image types
-                const supportedTypes = ['image/webp', 'image/png', 'image/jpeg'];
-                const imageFiles = Array.from(newFiles).filter(file => 
-                    supportedTypes.includes(file.type)
-                );
+                const supportedTypes = [
+                    'image/webp', 
+                    'image/png', 
+                    'image/jpeg',
+                    'image/avif',
+                    'image/heic',
+                    'image/heif'
+                ];
+                
+                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);
+                });
                 
                 if (imageFiles.length === 0) {
-                    alert('No supported image files found. Please upload WebP, PNG, or JPEG files.');
+                    alert('No supported image files found. Please upload WebP, PNG, JPEG, AVIF, or HEIC files.');
                     return;
                 }
                 
@@ -443,6 +472,7 @@
                 files.forEach((file, index) => {
                     const listItem = document.createElement('li');
                     listItem.className = `file-item cursor-pointer ${index === 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">
@@ -459,6 +489,15 @@
                         showImage(index);
                     });
                     
+                    // Keyboard navigation for file list items
+                    listItem.addEventListener('keydown', (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            showImage(index);
+                        }
+                    });
+                    
+                    listItem.setAttribute('tabindex', '0');
                     fileList.appendChild(listItem);
                     
                     // Load thumbnail
@@ -484,8 +523,10 @@
                 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');
                     }
                 });
                 
@@ -504,6 +545,7 @@
                     img.style.transform = `scale(${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;
@@ -545,11 +587,11 @@
                     
                     // Update file info
                     fileName.textContent = file.name;
-                    fileInfo.textContent = `${file.type.split('/')[1].toUpperCase()} • ${formatFileSize(file.size)}`;
+                    fileInfo.textContent = `${getFileType(file)} • ${formatFileSize(file.size)}`;
                     
                     // Load image dimensions after the image is loaded
                     img.onload = () => {
-                        fileInfo.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${file.type.split('/')[1].toUpperCase()} • ${formatFileSize(file.size)}`;
+                        fileInfo.textContent = `${img.naturalWidth}×${img.naturalHeight} • ${getFileType(file)} • ${formatFileSize(file.size)}`;
                     };
                 };
                 reader.readAsDataURL(file);
@@ -559,6 +601,27 @@
                 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();
+                }
+                
+                // 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();
+                }
+            }
+            
             // Navigation functions
             function showPreviousImage() {
                 if (currentFileIndex > 0) {
@@ -612,11 +675,13 @@
                 fullscreenImage.src = img.src;
                 fullscreenContainer.style.display = 'flex';
                 document.body.style.overflow = 'hidden';
+                fullscreenContainer.setAttribute('aria-hidden', 'false');
             }
             
             function closeFullscreen() {
                 fullscreenContainer.style.display = 'none';
                 document.body.style.overflow = '';
+                fullscreenContainer.setAttribute('aria-hidden', 'true');
             }
             
             function updateFullscreenImage() {