Add 1 files

index.html

@@ -17,7 +17,8 @@
                             dark: '#0a0a1a',
                             darker: '#050510',
                             accent: '#ff00aa',
-                            glow: 'rgba(0, 255, 157, 0.3)'
+                            glow: 'rgba(0, 255, 157, 0.3)',
+                            matrix: '#00ff41'
                         }
                     },
                     fontFamily: {
@@ -26,7 +27,49 @@
                     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)'
+                        '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' }
+                        }
                     }
                 }
             }
@@ -34,12 +77,29 @@
     </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: 'Orbitron', sans-serif;
+            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 {
@@ -400,15 +460,153 @@
             -ms-overflow-style: none;
             scrollbar-width: none;
         }
+        
+        /* 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>
+            <h2 class="text-2xl mb-2">DROP MEDIA HERE</h2>
+            <p class="text-cyber-secondary">IMAGES OR VIDEOS</p>
         </div>
     </div>
     
@@ -416,7 +614,7 @@
     <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">Settings</h3>
+            <h3 class="text-xl">SYSTEM SETTINGS</h3>
             <button id="close-settings" class="text-cyber-primary hover:text-cyber-accent">
                 <i class="fas fa-times"></i>
             </button>
@@ -424,37 +622,41 @@
         
         <div class="space-y-4">
             <div>
-                <h4 class="text-lg mb-2">Mouse Wheel Behavior</h4>
-                <label class="checkbox-container">Zoom with mouse wheel
+                <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
+                <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
+                <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
+                <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
+                SAVE SETTINGS
             </button>
         </div>
     </div>
@@ -463,24 +665,24 @@
     <div class="container mx-auto p-4 max-w-6xl">
         <!-- Header -->
         <div class="flex justify-between items-center mb-6">
-            <div>
-                <h1 class="text-3xl font-bold cyber-text glow">WontView LeeT</h1>
-                <p class="text-cyber-secondary text-sm">Cyber Media Viewer v1.0</p>
+            <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>
+                        <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>
+                        <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/*">
                 <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*">
                 
-                <button id="settings-btn" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="Settings">
+                <button id="settings-btn" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="SETTINGS">
                     <i class="fas fa-cog"></i>
                 </button>
             </div>
@@ -493,12 +695,12 @@
                 <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 selected</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>
+                        <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">
+                    <div id="image-container" class="hidden absolute inset-0 overflow-auto cursor-grab">
                         <div id="image-wrapper" class="media-container">
                             <img id="current-image" class="max-w-full max-h-full" src="" alt="">
                         </div>
@@ -506,37 +708,37 @@
                     
                     <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.
+                            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 (←)">
+                <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 (→)">
+                <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 (+)">
+                    <button id="zoom-in" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="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 (-)">
+                    <button id="zoom-out" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM OUT (-)">
                         <i class="fas fa-search-minus"></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)">
+                    <button id="zoom-reset" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="RESET ZOOM (0)">
                         <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)">
+                    <button id="play-pause" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="PLAY/PAUSE (SPACE)">
                         <i class="fas fa-play" id="play-icon"></i>
                     </button>
                     <div class="flex-1 mx-4">
@@ -564,49 +766,49 @@
                 <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 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 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 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 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>
+                            <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">
-                                <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>
+                                <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 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>
+                            <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">
-                                <option value="contain">Fit</option>
-                                <option value="cover">Fill</option>
-                                <option value="original">Original</option>
+                                <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 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>
                     </div>
                 </div>
@@ -667,6 +869,8 @@
             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 = [];
@@ -679,10 +883,14 @@
             let wheelBehavior = 'zoom'; // 'zoom' or 'navigate'
             let skipVideosInSlideshow = true;
             let cyberEffectsEnabled = true;
+            let matrixRainEnabled = true;
             
             // 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());
@@ -711,7 +919,7 @@
                     // 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";
+                        statusMessage.textContent = "PLEASE USE THE FOLDER OPEN OPTION FOR DIRECTORIES";
                         setTimeout(() => statusMessage.textContent = "", 3000);
                         return;
                     }
@@ -731,7 +939,7 @@
                         currentIndex = 0;
                         displayCurrentMedia();
                         updateThumbnails();
-                        showStatusMessage(`Loaded ${files.length} files`);
+                        showStatusMessage(`LOADED ${files.length} FILES`);
                     }
                 }
             });
@@ -787,6 +995,17 @@
             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);
             
@@ -800,6 +1019,12 @@
             settingsOverlay.addEventListener('click', closeSettings);
             saveSettingsBtn.addEventListener('click', saveSettings);
             
+            // Matrix rain toggle
+            matrixRainToggle.addEventListener('change', (e) => {
+                matrixRainEnabled = e.target.checked;
+                toggleMatrixRain(matrixRainEnabled);
+            });
+            
             // Functions
             function handleFileSelection(e) {
                 const files = Array.from(e.target.files);
@@ -810,7 +1035,7 @@
                     currentIndex = 0;
                     displayCurrentMedia();
                     updateThumbnails();
-                    showStatusMessage(`Loaded ${mediaFiles.length} files`);
+                    showStatusMessage(`LOADED ${mediaFiles.length} FILES`);
                 }
                 e.target.value = ''; // Reset input to allow selecting same files again
             }
@@ -1041,24 +1266,24 @@
                 if (mediaFiles.length === 0) return;
                 
                 isSlideshowRunning = true;
-                toggleSlideshowBtn.textContent = 'Stop Slideshow';
+                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');
+                showStatusMessage('SLIDESHOW STARTED');
             }
             
             function stopSlideshow() {
                 isSlideshowRunning = false;
                 clearInterval(slideshowInterval);
-                toggleSlideshowBtn.textContent = 'Slideshow';
+                toggleSlideshowBtn.textContent = 'SLIDESHOW';
                 toggleSlideshowBtn.classList.remove('bg-cyber-accent', 'text-cyber-dark');
                 toggleSlideshowBtn.classList.add('bg-cyber-dark');
                 
-                showStatusMessage('Slideshow stopped');
+                showStatusMessage('SLIDESHOW STOPPED');
             }
             
             function toggleThumbnailSidebar() {
@@ -1174,20 +1399,24 @@
                 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');
+                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;
@@ -1204,6 +1433,12 @@
                     document.getElementById('cyber-effects').checked = cyberEffectsEnabled;
                 }
                 
+                if (savedMatrixRain !== null) {
+                    matrixRainEnabled = savedMatrixRain === 'true';
+                    document.getElementById('matrix-rain-toggle').checked = matrixRainEnabled;
+                    toggleMatrixRain(matrixRainEnabled);
+                }
+                
                 applyCyberEffects();
             }
             
@@ -1216,6 +1451,38 @@
                     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';
+                }
+            }
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Freefall/media-viewer-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>