Add character image toggle for cleaner home screen

ADDED: Character Image Toggle Button
- Added toggle button in bottom left corner (fixed position)
- Button shows  Hide Images /  Show Images with smooth transitions
- Toggles visibility of all .character-side elements (assets/1.png to assets/11.png)
- Saves user preference to localStorage for persistence across sessions

 STYLING:
- Semi-transparent dark background with accent border
- Hover effects with transform and shadow animations
- Backdrop blur for modern glass effect
- Positioned at bottom: 20px, left: 20px with z-index: 1000

 FUNCTIONALITY:
- JavaScript toggleCharacterImages() function
- DOM ready listener to restore saved preferences
- Global function exposure for HTML onclick handler
- Smooth show/hide transitions for all character elements

 RESULT: Users can now toggle character images on/off for cleaner interface
- Simple, non-intrusive solution as requested
- Preference persists between sessions
- Maintains all original functionality while providing clean view option

index.html

@@ -6237,5 +6237,41 @@
         // Global functions for HTML onclick handlers
         window.removeVideoDirectory = removeVideoDirectory;
         window.closeVideoPreview = closeVideoPreview;
+
+        // Character images toggle functionality
+        let charactersVisible = true;
+        
+        function toggleCharacterImages() {
+            charactersVisible = !charactersVisible;
+            const characterElements = document.querySelectorAll('.character-side');
+            const toggleBtn = document.getElementById('character-toggle-btn');
+            
+            characterElements.forEach(element => {
+                element.style.display = charactersVisible ? 'block' : 'none';
+            });
+            
+            toggleBtn.textContent = charactersVisible ? '👁️ Hide Images' : '👁️ Show Images';
+            
+            // Save preference to localStorage
+            localStorage.setItem('charactersVisible', charactersVisible);
+        }
+
+        // Load saved preference on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const saved = localStorage.getItem('charactersVisible');
+            if (saved !== null) {
+                charactersVisible = saved === 'true';
+                if (!charactersVisible) {
+                    toggleCharacterImages();
+                }
+            }
+        });
+
+        window.toggleCharacterImages = toggleCharacterImages;
     </script>
+
+    <!-- Character Images Toggle Button -->
+    <button id="character-toggle-btn" class="character-toggle-btn" onclick="toggleCharacterImages()">
+        👁️ Hide Images
+    </button>
 </html>

src/styles/styles.css

@@ -6879,4 +6879,35 @@ button#start-mirror-btn:disabled {
         padding: 6px 10px;
         font-size: 12px;
     }
+}
+
+/* Character Images Toggle Button */
+.character-toggle-btn {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border: 2px solid var(--accent-color);
+    border-radius: 8px;
+    padding: 10px 15px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    user-select: none;
+}
+
+.character-toggle-btn:hover {
+    background: rgba(0, 0, 0, 0.9);
+    border-color: var(--accent-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.character-toggle-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }