modified: templates/chat.html
This commit is contained in:
@@ -171,6 +171,73 @@
|
||||
background: #ff4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
#tools-bar {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
padding: 0 24px 12px 24px;
|
||||
background: transparent;
|
||||
}
|
||||
.tool-btn {
|
||||
background: #23272f;
|
||||
color: #00aaff;
|
||||
border: 1px solid #00aaff;
|
||||
border-radius: 8px;
|
||||
padding: 8px 18px;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.tool-btn:hover {
|
||||
background: #00aaff;
|
||||
color: #fff;
|
||||
}
|
||||
#export-dialog {
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100vw; height: 100vh;
|
||||
background: rgba(30,40,60,0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.export-modal {
|
||||
background: #181a20;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
|
||||
padding: 32px 32px 24px 32px;
|
||||
min-width: 340px;
|
||||
max-width: 90vw;
|
||||
color: #e3e3e3;
|
||||
border: 1px solid #00aaff;
|
||||
text-align: center;
|
||||
}
|
||||
.export-modal input {
|
||||
background: #23272f;
|
||||
color: #e3e3e3;
|
||||
border: 1px solid #353b48;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.export-modal button {
|
||||
background: #00aaff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 18px;
|
||||
font-size: 1em;
|
||||
margin: 8px 6px 0 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.export-modal button:hover {
|
||||
background: #0078fe;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#container { max-width: 100%; border-radius: 0; }
|
||||
#chat { padding: 16px 6px 8px 6px; }
|
||||
@@ -185,22 +252,28 @@
|
||||
<h1>AI Vertriebsassistent</h1>
|
||||
<p>Erstellt von Simon Giehl – 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;">
|
||||
<b>Export/Tabellen-Tool</b><br>
|
||||
<input id="export-query" type="text" placeholder="z.B. alle Kunden mit Kaliber 58" style="width:70%;margin:8px 0;">
|
||||
<button onclick="exportTable()">Exportieren als CSV</button>
|
||||
<button onclick="hideExportDialog()">Schließen</button>
|
||||
<div id="export-result" style="margin-top:10px;"></div>
|
||||
</div>
|
||||
<div id="chat"></div>
|
||||
<div id="input-area">
|
||||
<input id="input" type="text" placeholder="Nachricht eingeben..." autocomplete="off">
|
||||
<button id="send-btn" onclick="send()">Senden</button>
|
||||
</div>
|
||||
<div id="tools-bar">
|
||||
<button class="tool-btn" onclick="showExportDialog()">
|
||||
<span style="font-size:1.2em;">📊</span> Export/Tabellen-Tool
|
||||
</button>
|
||||
<button class="tool-btn" onclick="clearChat()">
|
||||
<span style="font-size:1.2em;">🧹</span> Kontext löschen
|
||||
</button>
|
||||
</div>
|
||||
<div id="export-dialog" style="display:none;">
|
||||
<div class="export-modal">
|
||||
<b>Export/Tabellen-Tool</b><br>
|
||||
<input id="export-query" type="text" placeholder="z.B. alle Kunden mit Kaliber 58" style="width:70%;margin:8px 0;">
|
||||
<button onclick="exportTable()">Exportieren als CSV</button>
|
||||
<button onclick="hideExportDialog()">Schließen</button>
|
||||
<div id="export-result" style="margin-top:10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
© 2025 Simon Giehl – AI Vertriebsassistent. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
@@ -365,7 +438,7 @@
|
||||
window.onload = loadChatHistory;
|
||||
|
||||
function showExportDialog() {
|
||||
document.getElementById('export-dialog').style.display = 'block';
|
||||
document.getElementById('export-dialog').style.display = 'flex';
|
||||
}
|
||||
function hideExportDialog() {
|
||||
document.getElementById('export-dialog').style.display = 'none';
|
||||
|
||||
Reference in New Issue
Block a user