Spaces:
Running
Running
File size: 12,190 Bytes
9bbf93e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 |
<!DOCTYPE html>
<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> |