Die icons für die promts sollen kleiner. Es ist nicht korrekt für Handy display optimiert. Der Themen mode Knopf funktioniert nicht mehr. Es soll noch eine folder Übersicht rein. Er soll als Assistent agieren.

index.html

@@ -44,35 +44,72 @@
                         </button>
                     </div>
                 </div>
-                
                 <!-- Prompt Buttons -->
                 <div class="prompt-grid w-full max-w-4xl mb-6">
                     <button class="prompt-button" data-prompt="social-media">
-                        <i data-feather="users"></i>
-                        <span>Social Media Expert</span>
+                        <i data-feather="users" class="w-4 h-4 mb-1"></i>
+                        <span class="text-xs">Social Media</span>
                     </button>
                     <button class="prompt-button" data-prompt="marketing">
-                        <i data-feather="trending-up"></i>
-                        <span>Marketing Expert</span>
+                        <i data-feather="trending-up" class="w-4 h-4 mb-1"></i>
+                        <span class="text-xs">Marketing</span>
                     </button>
                     <button class="prompt-button" data-prompt="coding">
-                        <i data-feather="code"></i>
-                        <span>Coding Expert</span>
+                        <i data-feather="code" class="w-4 h-4 mb-1"></i>
+                        <span class="text-xs">Coding</span>
                     </button>
                     <button class="prompt-button" data-prompt="upload">
-                        <i data-feather="upload"></i>
-                        <span>Upload PDF</span>
+                        <i data-feather="upload" class="w-4 h-4 mb-1"></i>
+                        <span class="text-xs">Upload</span>
                     </button>
                 </div>
-                
-                <div class="flex gap-4 w-full max-w-4xl">
-            <div class="w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
+        <div class="flex flex-col lg:flex-row gap-4 w-full max-w-4xl">
+            <div class="w-full lg:w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
+                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                    <h2 class="font-semibold flex items-center gap-2">
+                    <i data-feather="folder" class="w-4 h-4"></i> Folder Overview
+                </h2>
+            </div>
+            <div id="folder-overview" class="h-48 lg:h-96 overflow-y-auto p-2 space-y-1">
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-yellow-500"></i>
+                        <span>Documents/</span>
+                        <span class="text-xs text-gray-500 ml-auto">12 files</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-blue-500"></i>
+                        <span>Images/</span>
+                        <span class="text-xs text-gray-500 ml-auto">47 files</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-green-500"></i>
+                        <span>Media/</span>
+                        <span class="text-xs text-gray-500 ml-auto">23 files</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-purple-500"></i>
+                        <span>Downloads/</span>
+                        <span class="text-xs text-gray-500 ml-auto">8 files</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-red-500"></i>
+                        <span>Backups/</span>
+                        <span class="text-xs text-gray-500 ml-auto">5 files</span>
+                    </div>
+                    <div class="flex items-center gap-2 text-sm p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
+                        <i data-feather="folder" class="w-3 h-3 text-indigo-500"></i>
+                        <span>Projects/</span>
+                        <span class="text-xs text-gray-500 ml-auto">15 files</span>
+                    </div>
+                </div>
+</div>
+            <div class="w-full lg:w-64 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                 <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                     <h2 class="font-semibold flex items-center gap-2">
                     <i data-feather="lock" class="w-4 h-4"></i> Chat History
                 </h2>
             </div>
-            <div id="chat-history" class="h-96 overflow-y-auto p-2 space-y-1">
+            <div id="chat-history" class="h-48 lg:h-96 overflow-y-auto p-2 space-y-1">
                 <!-- Chat history items will appear here -->
             </div>
             <div class="p-4 border-t border-gray-200 dark:border-gray-700">
@@ -82,7 +119,7 @@
             </div>
         </div>
         <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
-            <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
+<div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
                 <!-- Chat messages will appear here -->
                 <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                 <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-2"></i>

script.js

@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const html = document.documentElement;
     const themeToggle = document.getElementById('theme-toggle');
     const redModeToggle = document.getElementById('red-mode-toggle');
-
+    
     // Theme toggle functionality
     const setTheme = (theme) => {
         if (theme === 'dark') {
@@ -13,7 +13,10 @@ document.addEventListener('DOMContentLoaded', () => {
             html.classList.remove('dark');
         }
         localStorage.setItem('theme', theme);
+        updateThemeIcons();
+        feather.replace();
     };
+
     // Red mode toggle functionality
     const setRedMode = (enabled) => {
         if (enabled) {
@@ -25,10 +28,24 @@ document.addEventListener('DOMContentLoaded', () => {
         feather.replace();
     };
 
+    // Update theme icons based on current theme
+    const updateThemeIcons = () => {
+        const isDark = html.classList.contains('dark');
+        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');
+        }
+    };
+
     themeToggle.addEventListener('click', () => {
         const isDark = html.classList.contains('dark');
         setTheme(isDark ? 'light' : 'dark');
-        feather.replace();
     });
 
     redModeToggle.addEventListener('click', () => {
@@ -43,8 +60,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const savedRedMode = localStorage.getItem('redMode') === '1';
     setTheme(savedTheme);
     if (savedRedMode) setRedMode(true);
-
-    // File upload handling
+// File upload handling
     const fileUpload = document.getElementById('file-upload');
     let uploadedFileName = '';
 
@@ -56,12 +72,11 @@ document.addEventListener('DOMContentLoaded', () => {
             alert(`File "${file.name}" ready for secure upload`);
             // Auto-send file info to chat
             addMessageToChat('user', file.name, true);
-            
-            // Simulate assistant response for uploaded file
+    // Simulate assistant response for uploaded file
             setTimeout(() => {
-                addMessageToChat('assistant', `I've received your file "${file.name}". You can now ask questions about its content.`);
+                addMessageToChat('assistant', `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?`);
             }, 1000);
-        }
+}
     });
 
     // Voice recording functionality
@@ -131,7 +146,7 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 1000);
         });
     });
-// Chat functionality
+    // Chat functionality
     const chatForm = document.getElementById('chat-form');
     const messageInput = document.getElementById('message-input');
     const chatContainer = document.getElementById('chat-container');
@@ -143,17 +158,38 @@ document.addEventListener('DOMContentLoaded', () => {
         if (message) {
             // Add user message to chat
             addMessageToChat('user', message);
-            
             // Simulate assistant response (in a real app, this would be an API call to your NAS)
             setTimeout(() => {
-                addMessageToChat('assistant', `I received: "${message}". In a real implementation, this would be processed by your NAS assistant.`);
+                const assistantResponses = {
+                    default: `I understand your message about "${message}". As your NAS assistant, I'm here to help you with secure, local processing of your requests. How can I assist you further?`,
+                    social: `As your social media assistant, I can help you create engaging content strategies, analyze trends, and optimize your presence across platforms. What specific aspect would you like to focus on?`,
+                    marketing: `As your marketing expert, I can provide insights on customer acquisition, branding strategies, and digital campaigns. Tell me more about your marketing goals.`,
+                    coding: `As your coding assistant, I can help with programming challenges, code reviews, and learning new technologies. What are you working on?`,
+                    file: `I've analyzed your file and found it contains structured data. Would you like me to help you process or extract specific information from it?`
+                };
+                
+                let response = assistantResponses.default;
+                
+                // Check for specific context in user message
+                if (message.toLowerCase().includes('social') || message.toLowerCase().includes('media')) {
+                    response = assistantResponses.social;
+                } else if (message.toLowerCase().includes('market')) {
+                    response = assistantResponses.marketing;
+                } else if (message.toLowerCase().includes('code') || message.toLowerCase().includes('program')) {
+                    response = assistantResponses.coding;
+                } else if (uploadedFileName) {
+                    response = assistantResponses.file;
+                    uploadedFileName = ''; // Reset after use
+                }
+                
+                addMessageToChat('assistant', response);
             }, 1000);
             
             // Clear input
             messageInput.value = '';
         }
     });
-    // Add chat history item
+// Add chat history item
     function addChatHistoryItem(timestamp, preview) {
         const historyItem = document.createElement('div');
         historyItem.id = 'chat-history-item';
@@ -165,7 +201,6 @@ document.addEventListener('DOMContentLoaded', () => {
         `;
         document.getElementById('chat-history').appendChild(historyItem);
     }
-
     // Enhanced message handling
     function addMessageToChat(sender, text, isFile = false) {
         const messageDiv = document.createElement('div');
@@ -201,8 +236,7 @@ document.addEventListener('DOMContentLoaded', () => {
         chatContainer.scrollTop = chatContainer.scrollHeight;
         feather.replace();
     }
-
-    // Clear history
+// Clear history
     document.getElementById('clear-history').addEventListener('click', () => {
         if (confirm('Clear all chat history?')) {
             document.getElementById('chat-history').innerHTML = '';

style.css

@@ -119,11 +119,10 @@
 .chat-message {
     animation: fadeIn 0.3s ease-out forwards;
 }
-
 /* Prompt buttons grid */
 .prompt-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 0.5rem;
     margin-top: 1rem;
 }
@@ -133,7 +132,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0.75rem;
+    padding: 0.5rem;
     background: white;
     border: 1px solid #e5e7eb;
     border-radius: 0.5rem;
@@ -141,6 +140,7 @@
     transition: all 0.2s;
     text-align: center;
     font-size: 0.75rem;
+    min-height: 60px;
 }
 
 .dark .prompt-button {
@@ -160,8 +160,26 @@
 
 .prompt-button i {
     margin-bottom: 0.25rem;
+    width: 16px !important;
+    height: 16px !important;
+}
+
+@media (max-width: 640px) {
+    .prompt-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.75rem;
+    }
+    
+    .prompt-button {
+        min-height: 70px;
+        padding: 0.75rem;
+    }
+    
+    .prompt-button i {
+        width: 18px !important;
+        height: 18px !important;
+    }
 }
-
 /* Voice recording */
 .voice-recording {
     animation: pulse 1.5s infinite;