modified: templates/chat.html

templates/chat.html

@@ -171,6 +171,34 @@
             background: #ff4d4d;
             color: #fff;
         }
+        .btn-group {
+            position: relative;
+        }
+        .arrow {
+            font-size: 0.8em;
+            margin-left: 4px;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #181a20;
+            min-width: 160px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            z-index: 1;
+            border-radius: 8px;
+            margin-top: 4px;
+        }
+        .dropdown-content a {
+            color: #e3e3e3;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+            font-size: 0.95em;
+        }
+        .dropdown-content a:hover {
+            background-color: #00aaff;
+            color: #fff;
+        }
         @media (max-width: 600px) {
             #container { max-width: 100%; border-radius: 0; }
             #chat { padding: 16px 6px 8px 6px; }
@@ -186,7 +214,6 @@
             <p>Erstellt von Simon Giehl &ndash; Ihr smarter KI-Partner für Kunden- und Vertriebsinfos</p>
         </div>
         <div style="display:flex; justify-content:flex-end; padding: 0 24px;">
-            <button id="tools-btn" onclick="showExportDialog()">Tools</button>
             <button id="clear-btn" onclick="clearChat()">Kontext löschen</button>
         </div>
         <div id="export-dialog" style="display:none; background:#23272f; border:1px solid #00aaff; border-radius:8px; padding:18px; margin:18px 24px;">
@@ -199,7 +226,14 @@
         <div id="chat"></div>
         <div id="input-area">
             <input id="input" type="text" placeholder="Nachricht eingeben..." autocomplete="off">
+            <div class="btn-group">
                 <button id="send-btn" onclick="send()">Senden</button>
+                <button id="dropdown-btn" onclick="toggleDropdown()" aria-label="Tools"><span class="arrow">&#9660;</span></button>
+                <div id="dropdown-menu" class="dropdown-content">
+                    <a href="#" onclick="showExportDialog();toggleDropdown();return false;">Export/Tabellen-Tool</a>
+                    <!-- Weitere Optionen hier -->
+                </div>
+            </div>
         </div>
         <div id="footer">
             &copy; 2025 Simon Giehl &ndash; AI Vertriebsassistent. Alle Rechte vorbehalten.
@@ -397,6 +431,24 @@
                 document.getElementById('export-result').textContent = err.message;
             });
         }
+
+        function toggleDropdown() {
+            const menu = document.getElementById('dropdown-menu');
+            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+        }
+
+        // Schließe das Dropdown-Menü, wenn außerhalb geklickt wird
+        window.onclick = function(event) {
+            if (!event.target.matches('#dropdown-btn')) {
+                const dropdowns = document.getElementsByClassName('dropdown-content');
+                for (let i = 0; i < dropdowns.length; i++) {
+                    const openDropdown = dropdowns[i];
+                    if (openDropdown.style.display === 'block') {
+                        openDropdown.style.display = 'none';
+                    }
+                }
+            }
+        }
     </script>
 </body>
 </html>