From 9e00f05af387b71c39e3fb06c9270189755a00e2 Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Sat, 8 Nov 2025 09:44:56 -0600
Subject: [PATCH] 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            | 36 ++++++++++++++++++++++++++++++++++++
 src/styles/styles.css | 31 +++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)

diff --git a/index.html b/index.html
index 09e34f9..7cb7a4b 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/src/styles/styles.css b/src/styles/styles.css
index a8094bf..ac9687e 100644
--- a/src/styles/styles.css
+++ b/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);
 }
\ No newline at end of file