Entferne saß untere Eingabefeld und die oberen vier Punkte. Füge einen light kode und dark mode per button ein.

index.html

@@ -46,23 +46,15 @@
                 </h1>
                 <status-indicator status="online"></status-indicator>
             </div>
-            <div class="flex gap-2 mb-4">
-                <button id="theme-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
-                    <i data-feather="moon" class="dark:hidden text-gray-600"></i>
-                    <i data-feather="sun" class="hidden dark:block text-yellow-400"></i>
-                </button>
-                <button id="red-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Red Mode">
-                    <i data-feather="alert-triangle" class="text-red-500"></i>
-                </button>
-                <button id="voice-record" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Voice Message">
-                    <i data-feather="mic" class="text-blue-500"></i>
-                </button>
-                <input type="file" id="file-upload" class="hidden" accept="*/*">
-                <button id="file-upload-btn" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Upload File">
-                    <i data-feather="paperclip" class="text-green-500"></i>
-                </button>
-            </div>
-        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div class="flex gap-2 mb-4">
+            <button id="light-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Light Mode">
+                <i data-feather="sun" class="text-yellow-500"></i>
+            </button>
+            <button id="dark-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Dark Mode">
+                <i data-feather="moon" class="text-blue-500"></i>
+            </button>
+        </div>
+<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
             <div class="lg:col-span-3">
                 <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
                     <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
@@ -127,25 +119,7 @@
                 </div>
             </div>
         </div>
-<div class="border-t border-gray-200 dark:border-gray-700 p-4">
-            <form id="chat-form" class="flex items-center">
-                <input 
-                    type="text" 
-                    id="message-input" 
-                    placeholder="Type your message..." 
-                    class="flex-1 px-4 py-3 bg-transparent text-gray-800 dark:text-gray-200 focus:outline-none"
-                    autocomplete="off"
-                    required
-                >
-                <button 
-                    type="submit" 
-                    class="text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 transition-colors"
-                >
-                    <i data-feather="send" class="w-5 h-5"></i>
-                </button>
-            </form>
 </div>
-    </div>
 </main>
 
     <custom-footer></custom-footer>

script.js

@@ -6,11 +6,8 @@ let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
 document.addEventListener('DOMContentLoaded', () => {
     // Optimized DOM queries with caching
     const html = document.documentElement;
-    const themeToggle = document.getElementById('theme-toggle');
-    const redModeToggle = document.getElementById('red-mode-toggle');
-    const voiceRecordBtn = document.getElementById('voice-record');
-    const fileUploadBtn = document.getElementById('file-upload-btn');
-    const fileUpload = document.getElementById('file-upload');
+    const lightModeToggle = document.getElementById('light-mode-toggle');
+    const darkModeToggle = document.getElementById('dark-mode-toggle');
     
     // Enhanced debounce function for performance
     const debounce = (func, delay) => {
@@ -20,104 +17,45 @@ document.addEventListener('DOMContentLoaded', () => {
             timeoutId = setTimeout(() => func.apply(this, args), delay);
         };
     };
-// Enhanced theme toggle functionality
-    const setTheme = (theme) => {
-        requestAnimationFrame(() => {
-            if (theme === 'dark') {
-                html.classList.add('dark');
-            } else {
-                html.classList.remove('dark');
-            }
-            localStorage.setItem('theme', theme);
-            updateThemeIcons();
-            feather.replace();
-    // Initialize performance monitoring
-    const performanceMonitor = () => {
-        const startTime = performance.now();
-        return {
-            end: () => {
-                const endTime = performance.now();
-                console.log(`Operation took ${endTime - startTime} milliseconds`);
-            }
-        };
-    };
-});
-};
 
-    // Enhanced red mode toggle functionality
-    const setRedMode = (enabled) => {
+    // Enhanced light mode functionality
+    const setLightMode = () => {
         requestAnimationFrame(() => {
-            if (enabled) {
-                html.classList.add('red-mode');
-            } else {
-                html.classList.remove('red-mode');
-            }
-            isRedMode = enabled;
-            localStorage.setItem('redMode', enabled ? '1' : '0');
-            
-            // Update status indicator in red mode
-            const statusIndicator = document.querySelector('status-indicator');
-            if (enabled && statusIndicator) {
-                statusIndicator.setAttribute('status', 'online');
-            }
+            html.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
             feather.replace();
         });
     };
-    // Enhanced theme icons update with performance optimization
-    const updateThemeIcons = () => {
-        const isDark = html.classList.contains('dark');
+
+    // Enhanced dark mode functionality
+    const setDarkMode = () => {
         requestAnimationFrame(() => {
-            const moonIcon = themeToggle.querySelector('i[data-feather="moon"]');
-            const sunIcon = themeToggle.querySelector('i[data-feather="sun"]');
-            
-            if (isDark) {
-                moonIcon?.classList.add('hidden');
-                sunIcon?.classList.remove('hidden');
-            } else {
-                moonIcon?.classList.remove('hidden');
-                sunIcon?.classList.add('hidden');
-            }
+            html.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+            feather.replace();
         });
     };
+
     // Enhanced event listeners with debouncing
-    themeToggle.addEventListener('click', debounce(() => {
-        const isDark = html.classList.contains('dark');
-        setTheme(isDark ? 'light' : 'dark');
+    lightModeToggle.addEventListener('click', debounce(() => {
+        setLightMode();
     }, 150));
 
-    redModeToggle.addEventListener('click', debounce(() => {
-        const isRed = html.classList.contains('red-mode');
-        setRedMode(!isRed);
-        
-        // Enhanced notification system
-        const notification = document.createElement('div');
-        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
-            !isRed ? 'bg-red-500 text-white' : 'bg-gray-500 text-white'
-        }`;
-        notification.textContent = `Red Mode ${!isRed ? 'activated' : 'deactivated'}`;
-        document.body.appendChild(notification);
-        
-        setTimeout(() => {
-            notification.remove();
-        }, 3000);
-        
-        feather.replace();
+    darkModeToggle.addEventListener('click', debounce(() => {
+        setDarkMode();
     }, 150));
-    // Enhanced file upload button handling
-    fileUploadBtn.addEventListener('click', () => {
-        fileUpload.click();
-    });
-
-    // Enhanced voice recording button
-    voiceRecordBtn.addEventListener('click', debounce(() => {
-        if (!isRecording) {
-            startVoiceRecording();
-        } else {
-            stopVoiceRecording();
-        }
-    }, 200));
 
     // Load saved preferences with fallbacks
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    if (savedTheme === 'light') {
+        setLightMode();
+    } else {
+        setDarkMode();
+    }
+    
+    // Load chat history
+    loadChatHistory();
+// Load saved preferences with fallbacks
     const savedTheme = localStorage.getItem('theme') || 'dark';
     const savedRedMode = localStorage.getItem('redMode') === '1';
     setTheme(savedTheme);
@@ -403,34 +341,4 @@ document.addEventListener('DOMContentLoaded', () => {
             localStorage.removeItem('chatHistory');
         }
     }, 200));
-
-    // Enhanced file upload handling
-    let uploadedFileName = '';
-    
-    fileUpload.addEventListener('change', debounce((e) => {
-        const file = e.target.files[0];
-        if (file) {
-            uploadedFileName = file.name;
-            // Enhanced file upload notification
-            const notification = document.createElement('div');
-            notification.className = 'fixed top-4 right-4 p-4 bg-green-500 text-white rounded-lg shadow-lg z-50">
-            notification.textContent = `File "${file.name}" ready for secure upload`;
-            document.body.appendChild(notification);
-            
-            setTimeout(() => {
-                notification.remove();
-            }, 3000);
-            
-            // Auto-send file info to chat with enhanced context
-            addMessageToChat('user', file.name, true);
-            
-            // Enhanced assistant response for uploaded file
-            setTimeout(() => {
-                const fileResponse = isRedMode
-                    ? `File "${file.name}" received in Red Mode. I can process any file type without content restrictions. What specific analysis or action would you like me to perform?`
-                    : `I've successfully received your file "${file.name}". I'm ready to help you analyze its content. What specific information would you like to know about this file?`;
-                addMessageToChat('assistant', fileResponse);
-            }, 1000);
-        }
-    }, 200)));
 });