Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Media Viewer Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .media-container { | |
| transition: transform 0.3s ease; | |
| transform-origin: 0 0; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .thumbnail { | |
| transition: all 0.2s ease; | |
| } | |
| .thumbnail:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .thumbnail.active { | |
| border: 3px solid #3b82f6; | |
| box-shadow: 0 0 0 2px white; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:before { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: #333; | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s ease; | |
| } | |
| .tooltip:hover:before { | |
| opacity: 1; | |
| visibility: visible; | |
| bottom: calc(100% + 5px); | |
| } | |
| .dropdown { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| background-color: #f9f9f9; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .dropdown-content a { | |
| color: black; | |
| padding: 8px 12px; | |
| text-decoration: none; | |
| display: block; | |
| font-size: 14px; | |
| } | |
| .dropdown-content a:hover { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto p-4 max-w-6xl"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gray-800 text-white p-4 flex justify-between items-center"> | |
| <h1 class="text-xl font-bold">Media Viewer Pro</h1> | |
| <div class="flex space-x-2"> | |
| <div class="dropdown"> | |
| <button id="open-files" class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded tooltip" data-tooltip="Open Media"> | |
| <i class="fas fa-folder-open mr-1"></i> Open <i class="fas fa-caret-down ml-1"></i> | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#" id="open-files-btn">Files</a> | |
| <a href="#" id="open-folder-btn">Folder</a> | |
| </div> | |
| </div> | |
| <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*"> | |
| <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*"> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col md:flex-row h-[70vh]"> | |
| <!-- Media Display Area --> | |
| <div class="flex-1 relative overflow-hidden bg-black flex items-center justify-center"> | |
| <div id="media-display" class="w-full h-full flex items-center justify-center relative"> | |
| <div id="no-media" class="text-gray-400 text-center p-8"> | |
| <i class="fas fa-images text-5xl mb-4"></i> | |
| <p class="text-xl">No media selected</p> | |
| <p class="text-sm mt-2">Click "Open" to browse files or folders</p> | |
| </div> | |
| <div id="image-container" class="hidden absolute inset-0 overflow-auto custom-scrollbar"> | |
| <div id="image-wrapper" class="media-container"> | |
| <img id="current-image" class="max-w-full max-h-full" src="" alt=""> | |
| </div> | |
| </div> | |
| <div id="video-container" class="hidden relative w-full h-full"> | |
| <video id="current-video" class="max-w-full max-h-full" controls> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| </div> | |
| <!-- Navigation Arrows --> | |
| <button id="prev-btn" class="hidden absolute left-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70"> | |
| <i class="fas fa-chevron-left text-xl"></i> | |
| </button> | |
| <button id="next-btn" class="hidden absolute right-4 top-1/2 -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-70"> | |
| <i class="fas fa-chevron-right text-xl"></i> | |
| </button> | |
| <!-- Zoom Controls --> | |
| <div id="zoom-controls" class="hidden absolute bottom-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded-lg"> | |
| <button id="zoom-in" class="p-1 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <div class="h-px bg-gray-500 my-1"></div> | |
| <button id="zoom-out" class="p-1 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <div class="h-px bg-gray-500 my-1"></div> | |
| <button id="zoom-reset" class="p-1 hover:bg-gray-700 rounded"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Thumbnail Sidebar --> | |
| <div id="thumbnail-sidebar" class="hidden w-full md:w-48 bg-gray-100 border-l border-gray-200 overflow-y-auto custom-scrollbar p-2"> | |
| <div id="thumbnail-container" class="grid grid-cols-2 md:grid-cols-1 gap-2"> | |
| <!-- Thumbnails will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="bg-gray-200 p-4 border-t border-gray-300"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <!-- Playback Controls --> | |
| <div class="flex items-center space-x-2"> | |
| <button id="play-pause" class="bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 tooltip" data-tooltip="Play/Pause"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button id="stop" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Stop"> | |
| <i class="fas fa-stop"></i> | |
| </button> | |
| <button id="prev" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Previous"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button id="next" class="bg-gray-600 text-white p-2 rounded-full hover:bg-gray-700 tooltip" data-tooltip="Next"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| <!-- Slideshow Controls --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">Speed:</span> | |
| <select id="slideshow-speed" class="bg-white border border-gray-300 rounded px-2 py-1 text-sm"> | |
| <option value="1000">1 sec</option> | |
| <option value="2000" selected>2 sec</option> | |
| <option value="3000">3 sec</option> | |
| <option value="5000">5 sec</option> | |
| <option value="10000">10 sec</option> | |
| </select> | |
| </div> | |
| <button id="toggle-slideshow" class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 tooltip" data-tooltip="Start Slideshow"> | |
| <i class="fas fa-images mr-1"></i> Slideshow | |
| </button> | |
| </div> | |
| <!-- Display Options --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-2">Size:</span> | |
| <select id="image-size" class="bg-white border border-gray-300 rounded px-2 py-1 text-sm"> | |
| <option value="contain">Fit</option> | |
| <option value="cover">Fill</option> | |
| <option value="original">Original</option> | |
| </select> | |
| </div> | |
| <button id="toggle-sidebar" class="bg-gray-600 text-white px-3 py-1 rounded hover:bg-gray-700 tooltip" data-tooltip="Toggle Thumbnails"> | |
| <i class="fas fa-th mr-1"></i> Thumbnails | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-1"> | |
| <span id="current-index">0/0</span> | |
| <span id="media-name"></span> | |
| </div> | |
| <div class="w-full bg-gray-300 rounded-full h-2"> | |
| <div id="progress-bar" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const fileInput = document.getElementById('file-input'); | |
| const folderInput = document.getElementById('folder-input'); | |
| const openFilesBtn = document.getElementById('open-files-btn'); | |
| const openFolderBtn = document.getElementById('open-folder-btn'); | |
| const mediaDisplay = document.getElementById('media-display'); | |
| const noMedia = document.getElementById('no-media'); | |
| const imageContainer = document.getElementById('image-container'); | |
| const videoContainer = document.getElementById('video-container'); | |
| const currentImage = document.getElementById('current-image'); | |
| const currentVideo = document.getElementById('current-video'); | |
| const thumbnail | |
| </html> |