Spaces:

Freefall
/

media-viewer-pro

Running

File size: 85,681 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WontView LeeT - Cyber Media Viewer</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        cyber: {
                            primary: '#00ff9d',
                            secondary: '#00b8ff',
                            dark: '#0a0a1a',
                            darker: '#050510',
                            accent: '#ff00aa',
                            glow: 'rgba(0, 255, 157, 0.3)',
                            matrix: '#00ff41'
                        }
                    },
                    fontFamily: {
                        'cyber': ['"Courier New"', 'monospace']
                    },
                    boxShadow: {
                        'cyber': '0 0 10px rgba(0, 255, 157, 0.7)',
                        'cyber-sm': '0 0 5px rgba(0, 255, 157, 0.5)',
                        'cyber-lg': '0 0 15px rgba(0, 255, 157, 0.9)',
                        'matrix': '0 0 8px #00ff41'
                    },
                    animation: {
                        'matrix-flicker': 'matrix-flicker 0.5s infinite alternate',
                        'scanline': 'scanline 8s linear infinite',
                        'glitch': 'glitch 2s infinite alternate',
                        'text-flicker': 'text-flicker 3s infinite alternate'
                    },
                    keyframes: {
                        'matrix-flicker': {
                            '0%': { opacity: '0.1' },
                            '2%': { opacity: '0.1' },
                            '4%': { opacity: '0.5' },
                            '19%': { opacity: '0.5' },
                            '21%': { opacity: '0.1' },
                            '23%': { opacity: '1' },
                            '80%': { opacity: '0.5' },
                            '100%': { opacity: '0.1' }
                        },
                        'scanline': {
                            '0%': { transform: 'translateY(-100%)' },
                            '100%': { transform: 'translateY(100%)' }
                        },
                        'glitch': {
                            '0%': { textShadow: '2px 0 #00ff9d, -2px 0 #ff00aa' },
                            '50%': { textShadow: '4px 0 #00ff9d, -4px 0 #ff00aa' },
                            '100%': { textShadow: '2px 0 #00ff9d, -2px 0 #ff00aa' }
                        },
                        'text-flicker': {
                            '0%': { opacity: '0.1' },
                            '2%': { opacity: '1' },
                            '8%': { opacity: '0.1' },
                            '9%': { opacity: '1' },
                            '12%': { opacity: '0.1' },
                            '20%': { opacity: '1' },
                            '25%': { opacity: '0.3' },
                            '30%': { opacity: '1' },
                            '70%': { opacity: '0.7' },
                            '72%': { opacity: '0.2' },
                            '77%': { opacity: '0.9' },
                            '100%': { opacity: '0.9' }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
        
        body {
            font-family: 'Share Tech Mono', monospace;
            background-color: #050510;
            color: #00ff9d;
            overflow-x: hidden;
            position: relative;
        }
        
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            z-index: -1;
        }
        
        .cyber-border {
            border: 1px solid #00ff9d;
            box-shadow: 0 0 10px rgba(0, 255, 157, 0.3);
        }
        
        .cyber-bg {
            background: linear-gradient(135deg, #0a0a1a 0%, #050510 100%);
        }
        
        .cyber-text {
            text-shadow: 0 0 5px rgba(0, 255, 157, 0.7);
        }
        
        .cyber-button {
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .cyber-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.7);
        }
        
        .cyber-button:active {
            transform: translateY(0);
        }
        
        .cyber-button:after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.4), transparent);
            transition: all 0.5s ease;
        }
        
        .cyber-button:hover:after {
            left: 100%;
        }
        
        .glow {
            animation: glow 2s infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
            }
            to {
                box-shadow: 0 0 15px rgba(0, 255, 157, 0.9);
            }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                opacity: 0.7;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.7;
            }
        }
        
        .media-container {
            transition: transform 0.3s ease;
            transform-origin: 0 0;
        }
        
        .thumbnail {
            transition: all 0.2s ease;
            position: relative;
        }
        
        .thumbnail:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
        }
        
        .thumbnail.active {
            border: 2px solid #00ff9d;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.9);
        }
        
        .tooltip {
            position: relative;
        }
        
        .tooltip:before {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #0a0a1a;
            color: #00ff9d;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            border: 1px solid #00ff9d;
            box-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
        }
        
        .tooltip:hover:before {
            opacity: 1;
            visibility: visible;
            bottom: calc(100% + 5px);
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #0a0a1a;
            min-width: 160px;
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
            z-index: 1;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #00ff9d;
        }
        
        .dropdown-content a {
            color: #00ff9d;
            padding: 8px 12px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        
        .dropdown-content a:hover {
            background-color: rgba(0, 255, 157, 0.2);
            color: white;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .progress-bar-container { /* Added container */
             height: 10px; /* Increased height for easier clicking */
             padding: 3px 0; /* Vertical padding */
             cursor: pointer;
             width: 100%;
        }
        .progress-bar {
            height: 4px;
            background: #0a0a1a;
            border-radius: 2px;
            overflow: hidden;
            pointer-events: none; /* Prevent clicks on the bar itself */
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #00ff9d, #00b8ff);
            transition: width 0.1s linear;
        }
        
        .volume-slider {
            -webkit-appearance: none;
            width: 100px;
            height: 4px;
            background: #0a0a1a;
            border-radius: 2px;
            outline: none;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #00ff9d;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 255, 157, 0.7);
        }
        
        .volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #00ff9d;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 255, 157, 0.7);
        }
        
        .drag-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(5, 5, 16, 0.8);
            border: 4px dashed #00ff9d;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .drag-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .nav-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 100px;
            background: rgba(10, 10, 26, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s ease;
            border: 1px solid #00ff9d;
            z-index: 10;
        }
        
        .nav-arrow:hover {
            background: rgba(0, 255, 157, 0.2);
            opacity: 1 !important;
        }
        
        .media-area:hover .nav-arrow {
            opacity: 0.7;
        }
        
        .nav-arrow.left {
            left: 0;
            border-left: none;
            border-radius: 0 5px 5px 0;
        }
        
        .nav-arrow.right {
            right: 0;
            border-right: none;
            border-radius: 5px 0 0 5px;
        }
        
        .settings-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0a0a1a;
            border: 1px solid #00ff9d;
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
            z-index: 100;
            padding: 20px;
            border-radius: 5px;
            max-width: 500px;
            width: 90%;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        
        .settings-panel.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 99;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .settings-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .checkbox-container {
            display: block;
            position: relative;
            padding-left: 30px;
            margin-bottom: 12px;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none; /* Safari */
        }

        /* Metadata Panel Styles (similar to settings) */
        .metadata-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #0a0a1a;
            border: 1px solid #00ff9d;
            box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
            z-index: 101; /* Above settings */
            padding: 20px;
            border-radius: 5px;
            max-width: 80vw; /* Wider */
            width: 90%;
            max-height: 80vh; /* Limit height */
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            display: flex; /* Use flex for layout */
            flex-direction: column;
        }

        .metadata-panel.active {
            opacity: 1;
            pointer-events: all;
        }

        .metadata-content {
            flex-grow: 1; /* Allow content to take available space */
            overflow-y: auto; /* Enable vertical scroll */
            background: #050510;
            padding: 10px;
            border: 1px solid #00b8ff;
            border-radius: 3px;
            font-size: 0.8rem;
            white-space: pre-wrap; /* Wrap long lines */
            word-break: break-all; /* Break long words/strings */
            color: #00ff9d; /* Match body text */
        }

        .metadata-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8); /* Darker overlay */
            z-index: 100; /* Below panel, above rest */
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .metadata-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
        
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #050510;
            border: 1px solid #00ff9d;
            border-radius: 3px;
        }
        
        .checkbox-container:hover input ~ .checkmark {
            background-color: rgba(0, 255, 157, 0.1);
        }
        
        .checkbox-container input:checked ~ .checkmark {
            background-color: #00ff9d;
        }
        
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        
        .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }
        
        .checkbox-container .checkmark:after {
            left: 7px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid #050510;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        .scrollbar-hide {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            cursor: grab; /* Add grab cursor */
        }
        .scrollbar-hide:active {
             cursor: grabbing; /* Add grabbing cursor when dragging */
        }
        
        /* Cyberpunk scanline effect */
        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 255, 157, 0.05) 50%,
                transparent 100%
            );
            background-size: 100% 8px;
            pointer-events: none;
            z-index: 9999;
            animation: scanline 8s linear infinite;
        }
        
        /* Matrix rain effect */
        .matrix-rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            opacity: 0.1;
        }
        
        .matrix-column {
            position: absolute;
            top: 0;
            width: 1em;
            height: 100%;
            color: #00ff41;
            font-size: 1.2em;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-shadow: 0 0 5px #00ff41;
            animation: matrix-flicker 0.5s infinite alternate;
        }
        
        /* Glitch effect */
        .glitch-effect {
            position: relative;
        }
        
        .glitch-effect::before, .glitch-effect::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a1a;
        }
        
        .glitch-effect::before {
            left: 2px;
            text-shadow: -2px 0 #ff00aa;
            clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }
        
        .glitch-effect::after {
            left: -2px;
            text-shadow: -2px 0 #00b8ff;
            clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim-2 2s infinite linear alternate-reverse;
        }
        
        @keyframes glitch-anim-1 {
            0% { clip: rect(32px, 9999px, 28px, 0); }
            10% { clip: rect(13px, 9999px, 37px, 0); }
            20% { clip: rect(45px, 9999px, 33px, 0); }
            30% { clip: rect(31px, 9999px, 94px, 0); }
            40% { clip: rect(58px, 9999px, 34px, 0); }
            50% { clip: rect(24px, 9999px, 23px, 0); }
            60% { clip: rect(64px, 9999px, 78px, 0); }
            70% { clip: rect(67px, 9999px, 62px, 0); }
            80% { clip: rect(55px, 9999px, 39px, 0); }
            90% { clip: rect(39px, 9999px, 96px, 0); }
            100% { clip: rect(82px, 9999px, 40px, 0); }
        }
        
        @keyframes glitch-anim-2 {
            0% { clip: rect(65px, 9999px, 119px, 0); }
            10% { clip: rect(79px, 9999px, 85px, 0); }
            20% { clip: rect(74px, 9999px, 14px, 0); }
            30% { clip: rect(27px, 9999px, 53px, 0); }
            40% { clip: rect(64px, 9999px, 40px, 0); }
            50% { clip: rect(61px, 9999px, 73px, 0); }
            60% { clip: rect(99px, 9999px, 103px, 0); }
            70% { clip: rect(34px, 9999px, 115px, 0); }
            80% { clip: rect(98px, 9999px, 54px, 0); }
            90% { clip: rect(43px, 9999px, 96px, 0); }
            100% { clip: rect(82px, 9999px, 26px, 0); }
        }
        
        /* Terminal style cursor */
        .terminal-cursor {
            display: inline-block;
            width: 10px;
            height: 20px;
            background: #00ff9d;
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 3px;
        }
        
        @keyframes blink {
            from, to { opacity: 1; }
            50% { opacity: 0; }
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .media-area {
                height: 50vh;
            }
            
            .thumbnail {
                width: 60px;
                height: 60px;
            }
            
            .nav-arrow {
                width: 30px;
                height: 60px;
            }
        }
    </style>
</head>
<body class="bg-cyber-darker text-cyber-primary">
    <!-- Cyberpunk effects -->
    <div class="scanline"></div>
    <div class="matrix-rain" id="matrix-rain"></div>
    
    <!-- Drag and Drop Overlay -->
    <div id="drag-overlay" class="drag-overlay">
        <div class="text-center p-8 cyber-border rounded-lg bg-cyber-dark">
            <i class="fas fa-cloud-upload-alt text-6xl mb-4 text-cyber-accent"></i>
            <h2 class="text-2xl mb-2">DROP MEDIA HERE</h2>
            <p class="text-cyber-secondary">IMAGES OR VIDEOS</p>
        </div>
    </div>
    
    <!-- Settings Panel -->
    <div id="settings-overlay" class="settings-overlay"></div>
    <div id="settings-panel" class="settings-panel">
        <div class="flex justify-between items-center mb-4 border-b border-cyber-primary pb-2">
            <h3 class="text-xl">SYSTEM SETTINGS</h3>
            <button id="close-settings" class="text-cyber-primary hover:text-cyber-accent" title="Close Settings">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="space-y-4">
            <div>
                <h4 class="text-lg mb-2">MOUSE WHEEL BEHAVIOR</h4>
                <label class="checkbox-container">ZOOM WITH MOUSE WHEEL
                    <input type="radio" name="wheel-behavior" value="zoom" checked>
                    <span class="checkmark"></span>
                </label>
                <label class="checkbox-container">NAVIGATE WITH MOUSE WHEEL
                    <input type="radio" name="wheel-behavior" value="navigate">
                    <span class="checkmark"></span>
                </label>
            </div>
            
            <div>
                <h4 class="text-lg mb-2">SLIDESHOW OPTIONS</h4>
                <label class="checkbox-container">SKIP VIDEOS DURING SLIDESHOW
                    <input type="checkbox" id="skip-videos" checked>
                    <span class="checkmark"></span>
                </label>
            </div>
            
            <div>
                <h4 class="text-lg mb-2">APPEARANCE</h4>
                <label class="checkbox-container">ENABLE CYBER EFFECTS
                    <input type="checkbox" id="cyber-effects" checked>
                    <span class="checkmark"></span>
                </label>
                <label class="checkbox-container">ENABLE MATRIX RAIN
                    <input type="checkbox" id="matrix-rain-toggle" checked>
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
        
        <div class="mt-6 pt-4 border-t border-cyber-primary">
            <button id="save-settings" class="w-full bg-cyber-primary text-cyber-dark py-2 rounded hover:bg-cyber-secondary transition-all">
                SAVE SETTINGS
            </button>
        </div>
    </div>

    <!-- Metadata Panel -->
    <div id="metadata-overlay" class="metadata-overlay"></div>
    <div id="metadata-panel" class="metadata-panel">
        <div class="flex justify-between items-center mb-4 border-b border-cyber-primary pb-2">
            <h3 class="text-xl">FULL METADATA</h3>
            <button id="close-metadata" class="text-cyber-primary hover:text-cyber-accent" title="Close Metadata">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <pre id="full-metadata-content" class="metadata-content scrollbar-hide"></pre>
         <div class="mt-4 pt-2 border-t border-cyber-primary text-right">
             <button id="copy-metadata-btn" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="COPY METADATA" title="Copy Metadata">
                 <i class="fas fa-copy mr-1"></i> COPY
             </button>
         </div>
    </div>

    <!-- Main Container -->
    <div class="container mx-auto p-4">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <div class="glitch-effect" data-text="WONTV1EW L33T">
                <h1 class="text-4xl font-bold cyber-text text-flicker">WONTV1EW L33T</h1>
                <p class="text-cyber-secondary text-sm">CYBER MEDIA VIEWER v1.0<span class="terminal-cursor"></span></p>
            </div>
            <div class="flex space-x-3">
                <div class="dropdown">
                    <button id="open-files" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber">
                        <i class="fas fa-folder-open mr-2"></i> OPEN <i class="fas fa-caret-down ml-1"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="#" id="open-files-btn"><i class="fas fa-file-image mr-2"></i> FILES</a>
                        <a href="#" id="open-folder-btn"><i class="fas fa-folder mr-2"></i> FOLDER</a>
                    </div>
                </div>
                <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*" aria-label="File Input">
                <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*" aria-label="Folder Input">
                
                <button id="settings-btn" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="SETTINGS" title="Open Settings">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="cyber-bg cyber-border rounded-xl overflow-hidden">
            <!-- Media Display Area -->
            <div class="media-area relative h-[75vh] 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-cyber-secondary text-center p-8">
                        <i class="fas fa-images text-6xl mb-4 text-cyber-accent pulse"></i>
                        <p class="text-xl mb-2">NO MEDIA DETECTED</p>
                        <p class="text-sm">DRAG & DROP FILES OR CLICK "OPEN"</p>
                        <p class="text-xs mt-4 text-cyber-secondary">SUPPORTS: JPG, PNG, GIF, MP4, WEBM</p>
                    </div>
                    
                    <div id="image-container" class="hidden absolute inset-0 overflow-auto cursor-grab">
                        <div id="image-wrapper" class="media-container w-full h-full flex items-center justify-center">
                            <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 -->
                <div id="prev-btn" class="nav-arrow left tooltip" data-tooltip="PREVIOUS (←)">
                    <i class="fas fa-chevron-left text-2xl"></i>
                </div>
                <div id="next-btn" class="nav-arrow right tooltip" data-tooltip="NEXT (→)">
                    <i class="fas fa-chevron-right text-2xl"></i>
                </div>
                
                <!-- Zoom Controls -->
                <div id="zoom-controls" class="hidden absolute bottom-4 right-4 bg-cyber-dark bg-opacity-90 text-cyber-primary p-2 rounded cyber-border">
                    <button id="zoom-in" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM IN (+)" title="Zoom In">
                        <i class="fas fa-search-plus"></i>
                    </button>
                    <div class="h-px bg-cyber-primary my-1"></div>
                    <button id="zoom-out" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM OUT (-)" title="Zoom Out">
                        <i class="fas fa-search-minus"></i>
                    </button>
                    <div class="h-px bg-cyber-primary my-1"></div>
                    <button id="copy-image-btn" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="COPY IMAGE (C)" title="Copy Image">
                        <i class="fas fa-copy"></i>
                    </button>
                    <div class="h-px bg-cyber-primary my-1"></div>
                    <button id="zoom-reset" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="RESET ZOOM (0)" title="Reset Zoom">
                        <i class="fas fa-expand"></i>
                    </button>
                </div>
                
                <!-- Video Controls -->
                <div id="video-controls" class="hidden absolute bottom-4 left-4 right-4 bg-cyber-dark bg-opacity-90 text-cyber-primary p-3 rounded cyber-border flex items-center justify-between">
                    <button id="play-pause" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="PLAY/PAUSE (SPACE)" title="Play/Pause">
                        <i class="fas fa-play" id="play-icon"></i>
                    </button>
                    <div class="flex-1 mx-4 progress-bar-container"> <!-- Added container -->
                        <div class="progress-bar">
                            <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-volume-down"></i>
                        <input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.01" value="1" aria-label="Volume">
                        <i class="fas fa-volume-up"></i>
                    </div>
                </div>
            </div>
            
            <!-- Thumbnail Sidebar -->
            <div id="thumbnail-sidebar" class="hidden w-full bg-cyber-dark border-t border-cyber-primary p-2 overflow-x-auto scrollbar-hide">
                <div id="thumbnail-container" class="flex space-x-2">
                    <!-- Thumbnails will be added here -->
                </div>
            </div>
            
            <!-- Controls -->
            <div class="bg-cyber-dark p-4 border-t border-cyber-primary">
                <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-bottom" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="PLAY/PAUSE (SPACE)">
                            <i class="fas fa-play mr-1" id="play-icon-bottom"></i> PLAY
                        </button>
                        <button id="stop-bottom" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="STOP">
                            <i class="fas fa-stop mr-1"></i> STOP
                        </button>
                        <button id="prev-bottom" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="PREVIOUS (←)">
                            <i class="fas fa-step-backward mr-1"></i> PREV
                        </button>
                        <button id="next-bottom" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="NEXT (→)">
                            <i class="fas fa-step-forward mr-1"></i> NEXT
                        </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-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary" aria-label="Slideshow Speed">
                                <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="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber 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-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary" aria-label="Image Size">
                                <option value="contain">FIT</option>
                                <option value="cover">FILL</option>
                                <option value="original">ORIGINAL</option>
                            </select>
                        </div>
                        <button id="toggle-sidebar" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="TOGGLE THUMBNAILS (T)">
                            <i class="fas fa-th mr-1"></i> THUMBNAILS
                        </button>
                        <button id="toggle-fullscreen" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="FULLSCREEN (F)">
                            <i class="fas fa-expand mr-1"></i><span class="button-text"> FULLSCREEN</span>
                        </button>
                    </div>
                </div>
                
                <!-- Status Bar -->
                <div class="mt-4 text-xs space-y-1">
                    <div class="flex justify-between items-center">
                        <div>
                            <span id="current-index" class="text-cyber-secondary mr-2">0/0</span>
                            <span id="media-name" class="text-cyber-primary"></span>
                        </div>
                        <div id="status-message" class="text-cyber-accent pulse"></div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span id="media-dimensions" class="text-cyber-secondary mr-4"></span>
                        <div class="flex items-center min-w-0"> <!-- Flex container for metadata and button -->
                           <span id="media-metadata" class="text-cyber-secondary truncate mr-2" title="Metadata"></span>
                           <button id="view-metadata-btn" class="hidden text-cyber-accent hover:text-cyber-primary text-xs tooltip" data-tooltip="VIEW FULL METADATA" title="View Full Metadata">
                               <i class="fas fa-info-circle"></i>
                           </button>
                        </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 thumbnailContainer = document.getElementById('thumbnail-container');
            const thumbnailSidebar = document.getElementById('thumbnail-sidebar');
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            const prevBottomBtn = document.getElementById('prev-bottom');
            const nextBottomBtn = document.getElementById('next-bottom');
            const zoomInBtn = document.getElementById('zoom-in');
            const zoomOutBtn = document.getElementById('zoom-out');
            const zoomResetBtn = document.getElementById('zoom-reset');
            const copyImageBtn = document.getElementById('copy-image-btn');
            const zoomControls = document.getElementById('zoom-controls');
            const playPauseBtn = document.getElementById('play-pause');
            const playPauseBottomBtn = document.getElementById('play-pause-bottom');
            const stopBottomBtn = document.getElementById('stop-bottom');
            const playIcon = document.getElementById('play-icon');
            const playIconBottom = document.getElementById('play-icon-bottom');
            const toggleSlideshowBtn = document.getElementById('toggle-slideshow');
            const toggleSidebarBtn = document.getElementById('toggle-sidebar');
            const toggleFullscreenBtn = document.getElementById('toggle-fullscreen');
            const currentIndexDisplay = document.getElementById('current-index');
            const mediaNameDisplay = document.getElementById('media-name');
            const mediaDimensionsDisplay = document.getElementById('media-dimensions');
            const mediaMetadataDisplay = document.getElementById('media-metadata');
            const viewMetadataBtn = document.getElementById('view-metadata-btn');
            const metadataOverlay = document.getElementById('metadata-overlay');
            const metadataPanel = document.getElementById('metadata-panel');
            const fullMetadataContent = document.getElementById('full-metadata-content');
            const closeMetadataBtn = document.getElementById('close-metadata');
            const copyMetadataBtn = document.getElementById('copy-metadata-btn');
            const progressFill = document.getElementById('progress-fill');
            const progressBarContainer = document.querySelector('.progress-bar-container');
            const videoControls = document.getElementById('video-controls');
            const volumeSlider = document.getElementById('volume-slider');
            const imageSizeSelect = document.getElementById('image-size');
            const slideshowSpeedSelect = document.getElementById('slideshow-speed');
            const dragOverlay = document.getElementById('drag-overlay');
            const settingsBtn = document.getElementById('settings-btn');
            const settingsPanel = document.getElementById('settings-panel');
            const settingsOverlay = document.getElementById('settings-overlay');
            const closeSettingsBtn = document.getElementById('close-settings');
            const saveSettingsBtn = document.getElementById('save-settings');
            const statusMessage = document.getElementById('status-message');
            const matrixRainToggle = document.getElementById('matrix-rain-toggle');
            const matrixRainContainer = document.getElementById('matrix-rain');
            
            // State variables
            let mediaFiles = [];
            let currentIndex = 0;
            let isSlideshowRunning = false;
            let slideshowInterval;
            let zoomLevel = 1;
            let isDragging = false;
            let startX, startY, translateX = 0, translateY = 0;
            let wheelBehavior = 'zoom'; // 'zoom' or 'navigate'
            let skipVideosInSlideshow = true;
            let cyberEffectsEnabled = true;
            let matrixRainEnabled = true;
            let isScrubbingVideo = false; // Added for video scrubbing
            let isDraggingThumbnails = false; // Added for thumbnail dragging
            let thumbnailDragStartX = 0; // Added for thumbnail dragging
            let thumbnailScrollLeftStart = 0; // Added for thumbnail dragging
            let fullMetadataText = ''; // Added to store full metadata
            
            // Initialize settings from localStorage
            loadSettings();
            
            // Initialize matrix rain
            initMatrixRain();
            
            // Event Listeners for file/folder opening
            openFilesBtn.addEventListener('click', () => fileInput.click());
            openFolderBtn.addEventListener('click', () => folderInput.click());
            
            fileInput.addEventListener('change', handleFileSelection);
            folderInput.addEventListener('change', handleFileSelection);
            
            // Drag and drop functionality
            document.addEventListener('dragover', (e) => {
                e.preventDefault();
                dragOverlay.classList.add('active');
            });
            
            document.addEventListener('dragleave', () => {
                dragOverlay.classList.remove('active');
            });
            
            document.addEventListener('drop', (e) => {
                e.preventDefault();
                dragOverlay.classList.remove('active');
                
                if (e.dataTransfer.items) {
                    const files = [];
                    const items = e.dataTransfer.items;
                    
                    // Check if it's a directory (Chrome only)
                    const entry = items[0].webkitGetAsEntry();
                    if (entry && entry.isDirectory) {
                        statusMessage.textContent = "PLEASE USE THE FOLDER OPEN OPTION FOR DIRECTORIES";
                        setTimeout(() => statusMessage.textContent = "", 3000);
                        return;
                    }
                    
                    // Handle files
                    for (let i = 0; i < items.length; i++) {
                        if (items[i].kind === 'file') {
                            const file = items[i].getAsFile();
                            if (file.type.startsWith('image/') || file.type.startsWith('video/')) {
                                files.push(file);
                            }
                        }
                    }
                    
                    if (files.length > 0) {
                        mediaFiles = files;
                        currentIndex = 0;
                        displayCurrentMedia();
                        updateThumbnails();
                        showStatusMessage(`LOADED ${files.length} FILES`);
                    }
                }
            });
            
            // Navigation controls
            prevBtn.addEventListener('click', goToPrevious);
            nextBtn.addEventListener('click', goToNext);
            prevBottomBtn.addEventListener('click', goToPrevious);
            nextBottomBtn.addEventListener('click', goToNext);
            
            // Zoom controls
            zoomInBtn.addEventListener('click', () => zoomImage(1.2));
            zoomOutBtn.addEventListener('click', () => zoomImage(0.8));
            zoomResetBtn.addEventListener('click', resetZoom);
            copyImageBtn.addEventListener('click', copyImageToClipboard);
            
            // Playback controls
            playPauseBtn.addEventListener('click', togglePlayPause);
            playPauseBottomBtn.addEventListener('click', togglePlayPause);
            stopBottomBtn.addEventListener('click', stopPlayback);
            
            // Video controls
            currentVideo.addEventListener('timeupdate', updateVideoProgress);
            currentVideo.addEventListener('play', () => {
                playIcon.className = 'fas fa-pause';
                playIconBottom.className = 'fas fa-pause';
            });
            currentVideo.addEventListener('pause', () => {
                playIcon.className = 'fas fa-play';
                playIconBottom.className = 'fas fa-play';
            });
            currentVideo.addEventListener('ended', goToNext);
            volumeSlider.addEventListener('input', () => { // Keep this for slider input
                currentVideo.volume = volumeSlider.value;
            });
            // Video Scrubbing Listeners
            progressBarContainer.addEventListener('mousedown', startVideoScrub);
            document.addEventListener('mousemove', videoScrub);
            document.addEventListener('mouseup', stopVideoScrub);
            document.addEventListener('mouseleave', stopVideoScrub); // Stop if mouse leaves window

            // Thumbnail Drag Scrolling Listeners
            thumbnailSidebar.addEventListener('mousedown', startThumbnailDrag);
            document.addEventListener('mousemove', thumbnailDrag); // Listen on document for wider drag area
            document.addEventListener('mouseup', stopThumbnailDrag);
            document.addEventListener('mouseleave', stopThumbnailDrag); // Stop if mouse leaves window
            
            // Slideshow controls
            toggleSlideshowBtn.addEventListener('click', toggleSlideshow);
            
            // Display options
            toggleSidebarBtn.addEventListener('click', toggleThumbnailSidebar);
            imageSizeSelect.addEventListener('change', () => {
                if (mediaFiles.length > 0) {
                    applyImageSize();
                }
            });

            // Fullscreen controls
            toggleFullscreenBtn.addEventListener('click', toggleFullScreen);
            document.addEventListener('fullscreenchange', handleFullscreenChange);
            document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
            document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
            document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE/Edge
            
            // Mouse wheel behavior
            mediaDisplay.addEventListener('wheel', handleWheelEvent);
            
            // Mouse drag for panning zoomed images
            imageContainer.addEventListener('mousedown', startDrag);
            document.addEventListener('mousemove', dragImage);
            document.addEventListener('mouseup', endDrag);
            document.addEventListener('mouseleave', endDrag);
            
            // Right mouse drag for panning
            imageContainer.addEventListener('contextmenu', (e) => e.preventDefault());
            imageContainer.addEventListener('mousedown', (e) => {
                if (e.button === 2 && zoomLevel > 1) { // Right click
                    isDragging = true;
                    startX = e.clientX - translateX;
                    startY = e.clientY - translateY;
                    imageContainer.style.cursor = 'grabbing';
                }
            });
            
            // Keyboard shortcuts
            document.addEventListener('keydown', handleKeyboardShortcuts);
            
            // Settings
            settingsBtn.addEventListener('click', () => {
                settingsPanel.classList.add('active');
                settingsOverlay.classList.add('active');
            });
            
            closeSettingsBtn.addEventListener('click', closeSettings);
            settingsOverlay.addEventListener('click', closeSettings);
            saveSettingsBtn.addEventListener('click', saveSettings);
            
            // Matrix rain toggle
            matrixRainToggle.addEventListener('change', (e) => {
                matrixRainEnabled = e.target.checked;
                toggleMatrixRain(matrixRainEnabled);
            });

            // Metadata Panel Listeners
            viewMetadataBtn.addEventListener('click', showMetadataPanel);
            closeMetadataBtn.addEventListener('click', hideMetadataPanel);
            metadataOverlay.addEventListener('click', hideMetadataPanel);
            copyMetadataBtn.addEventListener('click', copyFullMetadata);
            
            // Functions
            function handleFileSelection(e) {
                const files = Array.from(e.target.files);
                if (files.length > 0) {
                    mediaFiles = files.filter(file => 
                        file.type.startsWith('image/') || file.type.startsWith('video/')
                    );
                    currentIndex = 0;
                    displayCurrentMedia();
                    updateThumbnails();
                    showStatusMessage(`LOADED ${mediaFiles.length} FILES`);
                }
                e.target.value = ''; // Reset input to allow selecting same files again
            }
            
            function displayCurrentMedia() {
                if (mediaFiles.length === 0) {
                    noMedia.classList.remove('hidden');
                    imageContainer.classList.add('hidden');
                    videoContainer.classList.add('hidden');
                    zoomControls.classList.add('hidden');
                    videoControls.classList.add('hidden');
                    currentIndexDisplay.textContent = '0/0';
                    mediaNameDisplay.textContent = '';
                    mediaDimensionsDisplay.textContent = ''; // Clear dimensions
                    mediaMetadataDisplay.textContent = ''; // Clear metadata
                    viewMetadataBtn.classList.add('hidden'); // Hide view button
                    return;
                }
                
                noMedia.classList.add('hidden');
                const file = mediaFiles[currentIndex];
                
                if (file.type.startsWith('image/')) {
                    // Display image
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        currentImage.src = e.target.result;
                        imageContainer.classList.remove('hidden');
                        videoContainer.classList.add('hidden');
                        zoomControls.classList.remove('hidden');
                        videoControls.classList.add('hidden');
                        resetZoom(); // Reset zoom/pan first
                        applyImageSize(); // Apply selected size mode

                        // Get dimensions after image loads
                        currentImage.onload = () => {
                            mediaDimensionsDisplay.textContent = `Dimensions: ${currentImage.naturalWidth} x ${currentImage.naturalHeight}`;
                            // Attempt to extract metadata for PNGs
                            if (file.type === 'image/png') {
                                extractAndDisplayPngMetadata(file);
                            } else {
                                mediaMetadataDisplay.textContent = '';
                                viewMetadataBtn.classList.add('hidden'); // Hide view button
                            }
                        };
                        // Clear dimensions/metadata if the image fails to load
                        currentImage.onerror = () => {
                             mediaDimensionsDisplay.textContent = 'Dimensions: Error';
                             mediaMetadataDisplay.textContent = '';
                             viewMetadataBtn.classList.add('hidden'); // Hide view button
                        }
                    };
                    reader.readAsDataURL(file); // Read the file to trigger onload/onerror
                } else if (file.type.startsWith('video/')) {
                    // Display video
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        currentVideo.src = e.target.result;
                        imageContainer.classList.add('hidden');
                        videoContainer.classList.remove('hidden');
                        zoomControls.classList.add('hidden');
                        videoControls.classList.remove('hidden');
                        currentVideo.volume = volumeSlider.value;
                        playIcon.className = 'fas fa-play';
                        playIconBottom.className = 'fas fa-play';
                        mediaDimensionsDisplay.textContent = '';
                        mediaMetadataDisplay.textContent = '';
                        viewMetadataBtn.classList.add('hidden'); // Hide view button
                    };
                    reader.readAsDataURL(file);
                }
                
                // Update current index display
                currentIndexDisplay.textContent = `${currentIndex + 1}/${mediaFiles.length}`;
                mediaNameDisplay.textContent = file.name;
                
                // Highlight active thumbnail
                const thumbnails = document.querySelectorAll('.thumbnail');
                thumbnails.forEach((thumb, index) => {
                    if (index === currentIndex) {
                        thumb.classList.add('active');
                        // Scroll thumbnail into view
                        thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
                    } else {
                        thumb.classList.remove('active');
                    }
                });
            }
            
            function updateThumbnails() {
                thumbnailContainer.innerHTML = '';
                
                if (mediaFiles.length === 0) {
                    thumbnailSidebar.classList.add('hidden');
                    return;
                }
                
                thumbnailSidebar.classList.remove('hidden');
                
                mediaFiles.forEach((file, index) => {
                    const thumbnail = document.createElement('div');
                    thumbnail.className = `thumbnail flex-shrink-0 w-20 h-20 bg-cyber-darker rounded overflow-hidden cursor-pointer ${index === currentIndex ? 'active' : ''}`;
                    thumbnail.dataset.index = index;
                    
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            thumbnail.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover" alt="${file.name}">`;
                        };
                        reader.readAsDataURL(file);
                    } else if (file.type.startsWith('video/')) {
                        thumbnail.innerHTML = `
                            <div class="relative w-full h-full bg-cyber-dark flex items-center justify-center">
                                <i class="fas fa-play text-cyber-accent text-xl"></i>
                                <div class="absolute bottom-0 left-0 right-0 bg-cyber-primary bg-opacity-70 text-cyber-dark text-xs p-1 truncate">${file.name}</div>
                            </div>
                        `;
                    }
                    
                    thumbnail.addEventListener('click', () => {
                        currentIndex = index;
                        displayCurrentMedia();
                    });
                    
                    thumbnailContainer.appendChild(thumbnail);
                });
            }
            
            function goToPrevious() {
                if (mediaFiles.length === 0) return;

                let prevIndex = currentIndex;
                let attempts = 0;
                const maxAttempts = mediaFiles.length;

                do {
                    prevIndex = (prevIndex - 1 + mediaFiles.length) % mediaFiles.length;
                    attempts++;
                    // Stop if we've looped through all files or found an image (or if not skipping videos)
                    if (attempts >= maxAttempts || !isSlideshowRunning || !skipVideosInSlideshow || mediaFiles[prevIndex].type.startsWith('image/')) {
                        break;
                    }
                } while (true);

                // Only update if we found a valid index (prevents infinite loop if only videos exist and skipping is on)
                if (attempts < maxAttempts || !mediaFiles[prevIndex].type.startsWith('video/')) {
                   currentIndex = prevIndex;
                   displayCurrentMedia();
                } else if (isSlideshowRunning) {
                    // If only videos exist and we're skipping, stop the slideshow
                    stopSlideshow();
                    showStatusMessage("Slideshow stopped: No images found to display.");
                }
            }
            
            function goToNext() {
                if (mediaFiles.length === 0) return;

                let nextIndex = currentIndex;
                let attempts = 0;
                const maxAttempts = mediaFiles.length;

                do {
                    nextIndex = (nextIndex + 1) % mediaFiles.length;
                    attempts++;
                     // Stop if we've looped through all files or found an image (or if not skipping videos)
                    if (attempts >= maxAttempts || !isSlideshowRunning || !skipVideosInSlideshow || mediaFiles[nextIndex].type.startsWith('image/')) {
                        break;
                    }
                } while (true);

                // Only update if we found a valid index (prevents infinite loop if only videos exist and skipping is on)
                 if (attempts < maxAttempts || !mediaFiles[nextIndex].type.startsWith('video/')) {
                    currentIndex = nextIndex;
                    displayCurrentMedia();
                 } else if (isSlideshowRunning) {
                     // If only videos exist and we're skipping, stop the slideshow
                     stopSlideshow();
                     showStatusMessage("Slideshow stopped: No images found to display.");
                 }
            }
            
            function zoomImage(factor) {
                if (!mediaFiles[currentIndex]?.type.startsWith('image/')) return;
                
                zoomLevel *= factor;
                const imageWrapper = document.getElementById('image-wrapper');
                
                imageWrapper.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
            }
            
            function resetZoom() {
                if (!mediaFiles[currentIndex]?.type.startsWith('image/')) return;
                
                zoomLevel = 1;
                translateX = 0;
                translateY = 0;
                const imageWrapper = document.getElementById('image-wrapper');
                
                imageWrapper.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
            }
            
            function applyImageSize() {
                if (!mediaFiles[currentIndex]?.type.startsWith('image/')) return;
                
                const size = imageSizeSelect.value;
                const img = document.getElementById('current-image');
                
                switch (size) {
                    case 'contain':
                        img.style.objectFit = 'contain';
                        img.style.width = 'auto';
                        img.style.height = 'auto';
                        img.style.maxWidth = '100%';
                        img.style.maxHeight = '100%';
                        break;
                    case 'cover':
                        img.style.objectFit = 'cover';
                        img.style.width = '100%';
                        img.style.height = '100%';
                        break;
                    case 'original':
                        img.style.objectFit = 'none';
                        img.style.width = 'auto';
                        img.style.height = 'auto';
                        img.style.maxWidth = 'none';
                        img.style.maxHeight = 'none';
                        break;
                }
                
                resetZoom();
            }
            
            function togglePlayPause() {
                const currentFile = mediaFiles[currentIndex];

                // If it's an image, toggle slideshow
                if (currentFile?.type.startsWith('image/')) {
                    if (!isSlideshowRunning) {
                        startSlideshow(); // Explicitly start
                    } else {
                        stopSlideshow();
                    }
                    return;
                }

                // If it's a video, toggle play/pause
                if (currentFile?.type.startsWith('video/')) {
                    // Check if video source is actually loaded before trying to play
                    if (currentVideo.readyState >= 1) { // HAVE_METADATA or higher
                         if (currentVideo.paused) {
                            currentVideo.play().catch(e => console.error("Video play error:", e)); // Add catch for potential errors
                            playIcon.className = 'fas fa-pause';
                            playIconBottom.className = 'fas fa-pause';
                        } else {
                            currentVideo.pause();
                            playIcon.className = 'fas fa-play';
                            playIconBottom.className = 'fas fa-play';
                        }
                    } else {
                        console.warn("Video not ready to play.");
                        // Optionally show a status message to the user
                    }
                }
            }
            
            function stopPlayback() {
                if (isSlideshowRunning) {
                    stopSlideshow();
                }
                
                if (mediaFiles[currentIndex]?.type.startsWith('video/')) {
                    currentVideo.pause();
                    currentVideo.currentTime = 0;
                    playIcon.className = 'fas fa-play';
                    playIconBottom.className = 'fas fa-play';
                }
            }
            
            function updateVideoProgress() {
                // Only update if not currently scrubbing
                if (!isScrubbingVideo && currentVideo.duration) {
                    const percent = (currentVideo.currentTime / currentVideo.duration) * 100;
                    progressFill.style.width = `${percent}%`;
                }
            }
            
            function toggleSlideshow() {
                if (isSlideshowRunning) {
                    stopSlideshow();
                } else {
                    startSlideshow();
                }
            }
            
            function startSlideshow() {
                if (mediaFiles.length === 0) return;
                
                isSlideshowRunning = true;
                toggleSlideshowBtn.textContent = 'STOP SLIDESHOW';
                toggleSlideshowBtn.classList.remove('bg-cyber-dark');
                toggleSlideshowBtn.classList.add('bg-cyber-accent', 'text-cyber-dark');
                
                const speed = parseInt(slideshowSpeedSelect.value);
                slideshowInterval = setInterval(goToNext, speed);
                
                showStatusMessage('SLIDESHOW STARTED');
            }
            
            function stopSlideshow() {
                isSlideshowRunning = false;
                clearInterval(slideshowInterval);
                toggleSlideshowBtn.textContent = 'SLIDESHOW';
                toggleSlideshowBtn.classList.remove('bg-cyber-accent', 'text-cyber-dark');
                toggleSlideshowBtn.classList.add('bg-cyber-dark');
                
                showStatusMessage('SLIDESHOW STOPPED');
            }
            
            function toggleThumbnailSidebar() {
                thumbnailSidebar.classList.toggle('hidden');
            }
            
            function handleWheelEvent(e) {
                e.preventDefault();
                
                if (wheelBehavior === 'zoom' && mediaFiles[currentIndex]?.type.startsWith('image/')) {
                    // Zoom with wheel
                    const delta = -e.deltaY;
                    const factor = delta > 0 ? 1.1 : 0.9;
                    zoomImage(factor);
                } else if (wheelBehavior === 'navigate') {
                    // Navigate with wheel
                    if (e.deltaY > 0) {
                        goToNext();
                    } else {
                        goToPrevious();
                    }
                }
            }
            
            function startDrag(e) {
                if (zoomLevel <= 1 || !mediaFiles[currentIndex]?.type.startsWith('image/')) return;
                
                isDragging = true;
                startX = e.clientX - translateX;
                startY = e.clientY - translateY;
                imageContainer.style.cursor = 'grabbing';
            }
            
            function dragImage(e) {
                if (!isDragging) return;
                
                e.preventDefault();
                translateX = e.clientX - startX;
                translateY = e.clientY - startY;
                
                const imageWrapper = document.getElementById('image-wrapper');
                imageWrapper.style.transform = `scale(${zoomLevel}) translate(${translateX}px, ${translateY}px)`;
            }
            
            function endDrag() {
                isDragging = false;
                imageContainer.style.cursor = 'grab';
            }
            
            function handleKeyboardShortcuts(e) {
                if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return;
                
                switch (e.key) {
                    case 'ArrowLeft':
                        goToPrevious();
                        break;
                    case 'ArrowRight':
                        goToNext();
                        break;
                    case '+':
                    case '=':
                        zoomImage(1.2);
                        break;
                    case '-':
                    case '_':
                        zoomImage(0.8);
                        break;
                    case '0':
                        resetZoom();
                        break;
                    case ' ':
                        togglePlayPause();
                        break;
                    case 'ArrowUp':
                        if (mediaFiles[currentIndex]?.type.startsWith('video/')) {
                            currentVideo.volume = Math.min(1, currentVideo.volume + 0.1);
                            volumeSlider.value = currentVideo.volume;
                        }
                        break;
                    case 'ArrowDown':
                        if (mediaFiles[currentIndex]?.type.startsWith('video/')) {
                            currentVideo.volume = Math.max(0, currentVideo.volume - 0.1);
                            volumeSlider.value = currentVideo.volume;
                        }
                        break; // Fixed missing break
                    case 't':
                    case 'T':
                        toggleThumbnailSidebar();
                        break;
                    case 'c':
                    case 'C':
                        copyImageToClipboard();
                        break;
                    case 'f':
                    case 'F':
                        toggleFullScreen();
                        break;
                    case 's':
                    case 'S':
                        toggleSlideshow();
                        break;
                    case 'Escape':
                        if (metadataPanel.classList.contains('active')) {
                            hideMetadataPanel();
                        } else {
                            closeSettings();
                        }
                        break;
                }
            }
            
            function showStatusMessage(message) {
                statusMessage.textContent = message;
                setTimeout(() => {
                    statusMessage.textContent = "";
                }, 3000);
            }
            
            function closeSettings() {
                settingsPanel.classList.remove('active');
                settingsOverlay.classList.remove('active');
            }
            
            function saveSettings() {
                wheelBehavior = document.querySelector('input[name="wheel-behavior"]:checked').value;
                skipVideosInSlideshow = document.getElementById('skip-videos').checked;
                cyberEffectsEnabled = document.getElementById('cyber-effects').checked;
                matrixRainEnabled = document.getElementById('matrix-rain-toggle').checked;
                
                localStorage.setItem('wheelBehavior', wheelBehavior);
                localStorage.setItem('skipVideosInSlideshow', skipVideosInSlideshow);
                localStorage.setItem('cyberEffectsEnabled', cyberEffectsEnabled);
                localStorage.setItem('matrixRainEnabled', matrixRainEnabled);
                
                applyCyberEffects();
                toggleMatrixRain(matrixRainEnabled);
                closeSettings();
                showStatusMessage('SETTINGS SAVED');
            }
            
            function loadSettings() {
                const savedWheelBehavior = localStorage.getItem('wheelBehavior');
                const savedSkipVideos = localStorage.getItem('skipVideosInSlideshow');
                const savedCyberEffects = localStorage.getItem('cyberEffectsEnabled');
                const savedMatrixRain = localStorage.getItem('matrixRainEnabled');
                
                if (savedWheelBehavior) {
                    wheelBehavior = savedWheelBehavior;
                    document.querySelector(`input[name="wheel-behavior"][value="${savedWheelBehavior}"]`).checked = true;
                }
                
                if (savedSkipVideos !== null) {
                    skipVideosInSlideshow = savedSkipVideos === 'true';
                    document.getElementById('skip-videos').checked = skipVideosInSlideshow;
                }
                
                if (savedCyberEffects !== null) {
                    cyberEffectsEnabled = savedCyberEffects === 'true';
                    document.getElementById('cyber-effects').checked = cyberEffectsEnabled;
                }
                
                if (savedMatrixRain !== null) {
                    matrixRainEnabled = savedMatrixRain === 'true';
                    document.getElementById('matrix-rain-toggle').checked = matrixRainEnabled;
                    toggleMatrixRain(matrixRainEnabled);
                }
                
                applyCyberEffects();
            }
            
            function applyCyberEffects() {
                if (cyberEffectsEnabled) {
                    document.body.classList.add('glow');
                    document.querySelectorAll('.cyber-text').forEach(el => el.classList.add('cyber-text'));
                } else {
                    document.body.classList.remove('glow');
                    document.querySelectorAll('.cyber-text').forEach(el => el.classList.remove('cyber-text'));
                }
            }
            
            function initMatrixRain() {
                const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
                const columns = Math.floor(window.innerWidth / 20);
                
                for (let i = 0; i < columns; i++) {
                    const column = document.createElement('div');
                    column.className = 'matrix-column';
                    column.style.left = `${i * 20}px`;
                    column.style.animationDelay = `${Math.random() * 2}s`;
                    
                    // Create random characters
                    let content = '';
                    const rows = Math.floor(window.innerHeight / 24) + 1;
                    for (let j = 0; j < rows; j++) {
                        content += chars[Math.floor(Math.random() * chars.length)];
                    }
                    
                    column.textContent = content;
                    matrixRainContainer.appendChild(column);
                }
                
                toggleMatrixRain(matrixRainEnabled);
            }
            
            function toggleMatrixRain(enabled) {
                if (enabled) {
                    matrixRainContainer.style.display = 'block';
                } else {
                    matrixRainContainer.style.display = 'none';
                }
            }
            
            function toggleFullScreen() {
                if (!document.fullscreenElement &&    // Standard syntax
                    !document.mozFullScreenElement && // Firefox
                    !document.webkitFullscreenElement && // Chrome, Safari and Opera
                    !document.msFullscreenElement) {  // IE/Edge
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                        document.documentElement.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) { /* Firefox */
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) { /* IE/Edge */
                        document.msExitFullscreen();
                    }
                }
            }

            function handleFullscreenChange() {
                const button = toggleFullscreenBtn; // Use the variable directly
                const icon = button.querySelector('i');
                const textSpan = button.querySelector('span.button-text'); // Target the span

                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    icon.className = 'fas fa-compress mr-1';
                    if (textSpan) textSpan.textContent = ' EXIT FS'; // Update span text
                    button.setAttribute('data-tooltip', 'EXIT FULLSCREEN (F)');
                } else {
                    icon.className = 'fas fa-expand mr-1';
                    if (textSpan) textSpan.textContent = ' FULLSCREEN'; // Update span text
                    button.setAttribute('data-tooltip', 'FULLSCREEN (F)');
                }
            }

            // --- New Functions ---

            async function copyImageToClipboard() {
                if (!mediaFiles[currentIndex]?.type.startsWith('image/')) {
                    showStatusMessage('COPY FAILED: NO IMAGE LOADED');
                    return;
                }

                try {
                    const response = await fetch(currentImage.src);
                    const blob = await response.blob();
                    
                    // Ensure blob type is correct, default to png if needed
                    let imageType = blob.type;
                    if (!imageType.startsWith('image/')) {
                        console.warn('Blob type unknown, assuming image/png for clipboard');
                        imageType = 'image/png';
                    }

                    await navigator.clipboard.write([
                        new ClipboardItem({
                            [imageType]: blob
                        })
                    ]);
                    showStatusMessage('IMAGE COPIED TO CLIPBOARD');
                } catch (err) {
                    console.error('Failed to copy image:', err);
                    showStatusMessage('COPY FAILED: SEE CONSOLE');
                }
            }

            // --- Video Scrubbing Functions ---
            function startVideoScrub(e) {
                if (!mediaFiles[currentIndex]?.type.startsWith('video/')) return;
                isScrubbingVideo = true;
                updateVideoTimeFromScrub(e);
            }

            function videoScrub(e) {
                if (!isScrubbingVideo) return;
                updateVideoTimeFromScrub(e);
            }

            function stopVideoScrub() {
                if (isScrubbingVideo) {
                    isScrubbingVideo = false;
                    // Optional: Resume playback if it was playing before scrub
                    // if (!currentVideo.paused) currentVideo.play();
                }
            }

            function updateVideoTimeFromScrub(e) {
                 const rect = progressBarContainer.getBoundingClientRect();
                 const offsetX = e.clientX - rect.left;
                 const width = rect.width;
                 let percentage = offsetX / width;
                 percentage = Math.max(0, Math.min(1, percentage)); // Clamp between 0 and 1

                 if (currentVideo.duration) {
                     currentVideo.currentTime = percentage * currentVideo.duration;
                     // Manually update progress fill during scrub
                     progressFill.style.width = `${percentage * 100}%`;
                 }
            }

             // --- Thumbnail Drag Scrolling Functions ---
             function startThumbnailDrag(e) {
                 isDraggingThumbnails = true;
                 thumbnailDragStartX = e.pageX - thumbnailSidebar.offsetLeft;
                 thumbnailScrollLeftStart = thumbnailSidebar.scrollLeft;
                 thumbnailSidebar.style.cursor = 'grabbing'; // Change cursor
                 thumbnailSidebar.style.userSelect = 'none'; // Prevent text selection
             }

             function thumbnailDrag(e) {
                 if (!isDraggingThumbnails) return;
                 e.preventDefault(); // Prevent default drag behavior
                 const x = e.pageX - thumbnailSidebar.offsetLeft;
                 const walk = (x - thumbnailDragStartX) * 1.5; // Multiplier for faster scroll
                 thumbnailSidebar.scrollLeft = thumbnailScrollLeftStart - walk;
             }

             function stopThumbnailDrag() {
                 if (isDraggingThumbnails) {
                     isDraggingThumbnails = false;
                     thumbnailSidebar.style.cursor = 'grab'; // Reset cursor
                     thumbnailSidebar.style.removeProperty('user-select');
                 }
             }

             // --- Metadata Panel Functions ---
             function showMetadataPanel() {
                 fullMetadataContent.textContent = fullMetadataText; // Populate with stored full text
                 metadataPanel.classList.add('active');
                 metadataOverlay.classList.add('active');
             }

             function hideMetadataPanel() {
                 metadataPanel.classList.remove('active');
                 metadataOverlay.classList.remove('active');
             }

             function copyFullMetadata() {
                 navigator.clipboard.writeText(fullMetadataText)
                     .then(() => showStatusMessage('METADATA COPIED'))
                     .catch(err => {
                         console.error('Failed to copy metadata:', err);
                         showStatusMessage('METADATA COPY FAILED');
                     });
             }

             // --- Update Metadata Display Logic ---
             function updateMetadataDisplay(metadata) {
                 fullMetadataText = Object.entries(metadata).map(([k, v]) => `${k}: ${v}`).join('\n'); // Store full text

                 let displayText = metadata['parameters'] || metadata['Comment'] || metadata['Description'] || Object.entries(metadata).slice(0, 2).map(([k, v]) => `${k}: ${v.substring(0, 50)}...`).join('; ');
                 let isTruncated = false;
                 if (displayText.length > 100) {
                     displayText = displayText.substring(0, 97) + '...';
                     isTruncated = true;
                 }
                 mediaMetadataDisplay.textContent = `Metadata: ${displayText}`;
                 mediaMetadataDisplay.title = fullMetadataText; // Full metadata in tooltip

                 if (isTruncated || Object.keys(metadata).length > 0) { // Show button if truncated or if any metadata exists
                     viewMetadataBtn.classList.remove('hidden');
                 } else {
                     viewMetadataBtn.classList.add('hidden');
                 }
             }

             // Modify extractAndDisplayPngMetadata to use the new update function
             async function extractAndDisplayPngMetadata(file) {
                 mediaMetadataDisplay.textContent = 'Metadata: Reading...';
                 mediaMetadataDisplay.title = '';
                 viewMetadataBtn.classList.add('hidden'); // Hide button initially
                 fullMetadataText = ''; // Clear stored text

                 try {
                     const buffer = await file.arrayBuffer();
                     const dataView = new DataView(buffer);

                     if (dataView.getUint32(0) !== 0x89504E47 || dataView.getUint32(4) !== 0x0D0A1A0A) {
                         mediaMetadataDisplay.textContent = 'Metadata: Not a valid PNG';
                         return;
                     }

                     let offset = 8;
                     let metadata = {};
                     let foundMetadata = false;

                     while (offset < buffer.byteLength) {
                         const length = dataView.getUint32(offset);
                         const typeCode = dataView.getUint32(offset + 4);
                         const type = String.fromCharCode(
                             (typeCode >> 24) & 0xFF, (typeCode >> 16) & 0xFF, (typeCode >> 8) & 0xFF, typeCode & 0xFF
                         );

                         if (type === 'tEXt') {
                             const chunkDataOffset = offset + 8;
                             const chunkData = new Uint8Array(buffer, chunkDataOffset, length);
                             const separatorIndex = chunkData.findIndex(byte => byte === 0);
                             if (separatorIndex !== -1) {
                                 const decoder = new TextDecoder("iso-8859-1");
                                 const keyword = decoder.decode(chunkData.slice(0, separatorIndex));
                                 const text = decoder.decode(chunkData.slice(separatorIndex + 1));
                                 metadata[keyword] = text;
                                 foundMetadata = true;
                             }
                         }
                         // TODO: Add iTXt/zTXt parsing if needed

                         if (type === 'IEND') break;
                         offset += 12 + length;
                     }

                     if (foundMetadata) {
                         updateMetadataDisplay(metadata); // Use the new function to display/store
                     } else {
                         mediaMetadataDisplay.textContent = 'Metadata: None found';
                     }

                 } catch (error) {
                     console.error("Error reading PNG metadata:", error);
                     mediaMetadataDisplay.textContent = 'Metadata: Error reading';
                 }
             }

        }); // End of DOMContentLoaded listener
    </script>
</body>
</html>