marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: verbessere das Layout und die Benutzeroberfläche des Chatbereichs in index.html mit neuen Stilen und verbesserten Eingabefeldern

Browse Source
This commit is contained in:
Marwin
2025-05-02 09:14:01 +01:00
parent 7fb9452d09
commit 2199d6007c
1 changed files with 135 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
templates/index.html
View File

@@ -100,16 +100,20 @@
/* Chat section styles */
.embedded-chat {
height: 350px;
height: 500px;
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid;
display: flex;
flex-direction: column;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.05);
}
.dark .embedded-chat {
background-color: rgba(17, 24, 39, 0.7);
border-color: rgba(109, 40, 217, 0.2);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 5px 10px -5px rgba(0, 0, 0, 0.2);
}
.embedded-chat {
@@ -118,9 +122,118 @@
}
#embedded-chat-messages {
height: 250px;
flex: 1;
overflow-y: auto;
padding: 1.25rem;
min-height: 320px;
}
.chat-input-container {
padding: 1.25rem;
border-top: 1px solid;
background-color: rgba(255, 255, 255, 0.3);
}
.dark .chat-input-container {
background-color: rgba(17, 24, 39, 0.6);
border-color: rgba(75, 85, 99, 0.4);
}
.mystical-input {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(209, 213, 219, 0.5);
color: #4B5563;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
outline: none;
transition: all 0.3s ease;
width: 100%;
font-size: 1rem;
}
.dark .mystical-input {
background-color: rgba(31, 41, 55, 0.7);
border-color: rgba(75, 85, 99, 0.4);
color: #E5E7EB;
}
.mystical-input:focus {
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}
.dark .mystical-input:focus {
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}
/* Verbesserte Lesbarkeit für Chat-Nachrichten */
.chat-message {
margin-bottom: 1.25rem;
}
.chat-bubble {
padding: 1rem;
border-radius: 0.75rem;
max-width: 85%;
font-size: 1rem;
line-height: 1.5;
}
.assistant-bubble {
background-color: rgba(243, 244, 246, 0.95);
color: #374151;
}
.dark .assistant-bubble {
background-color: rgba(31, 41, 55, 0.95);
color: #E5E7EB;
}
.user-bubble {
background-color: rgba(139, 92, 246, 0.15);
color: #4B5563;
}
.dark .user-bubble {
background-color: rgba(124, 58, 237, 0.3);
color: #E5E7EB;
}
/* Beispiel-Buttons verbessert */
.quick-query-container {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.quick-query-btn {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
border-radius: 2rem;
background-color: rgba(243, 244, 246, 0.8);
color: #4B5563;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
border: 1px solid rgba(209, 213, 219, 0.5);
}
.dark .quick-query-btn {
background-color: rgba(55, 65, 81, 0.8);
color: #E5E7EB;
border-color: rgba(75, 85, 99, 0.4);
}
.quick-query-btn:hover {
background-color: rgba(229, 231, 235, 0.9);
transform: translateY(-1px);
}
.dark .quick-query-btn:hover {
background-color: rgba(75, 85, 99, 0.9);
}
/* Chat typing indicator */
@@ -299,14 +412,14 @@
</div>
<!-- Chat Messages -->
<div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
<div id="embedded-chat-messages" class="border-b-0">
<!-- Assistant Message -->
<div class="mb-4 flex">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<div class="chat-message flex">
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<div class="text-gray-700 dark:text-gray-300 markdown-content">
<div class="chat-bubble assistant-bubble">
<div class="markdown-content">
<p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
<p>Du kannst mir Fragen zu:</p>
<ul>
@@ -320,24 +433,24 @@
</div>
<!-- User Message -->
<div class="mb-4 flex justify-end">
<div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
<p class="text-gray-800 dark:text-gray-200">
<div class="chat-message flex justify-end">
<div class="chat-bubble user-bubble">
<p>
Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
</p>
</div>
<div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
<div class="w-9 h-9 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-3 flex-shrink-0">
<i class="fa-solid fa-user text-sm"></i>
</div>
</div>
<!-- Assistant Response -->
<div class="mb-4 flex" id="demo-ai-response">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
<div class="chat-message flex" id="demo-ai-response">
<div class="w-9 h-9 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3 flex-shrink-0">
<i class="fa-solid fa-robot text-sm"></i>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
<div class="text-gray-700 dark:text-gray-300 markdown-content">
<div class="chat-bubble assistant-bubble">
<div class="markdown-content">
<p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
<p>Du kannst wie folgt vorgehen:</p>
<ol>
@@ -353,19 +466,19 @@
</div>
<!-- Chat Input -->
<div class="p-4">
<div class="chat-input-container">
<div class="flex">
<input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
<button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
<button class="ml-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-3 py-2 rounded-lg disabled:opacity-50 flex-shrink-0 hover:shadow-md transition-all duration-200" disabled>
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
<!-- Quick Queries -->
<div class="mt-3 flex flex-wrap gap-2">
<span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
<button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">KI-Grundlagen</button>
<button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Mindmap erstellen</button>
<button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Datenbank durchsuchen</button>
<div class="quick-query-container">
<span class="text-sm text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
<button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn hover:shadow-sm">KI-Grundlagen</button>
<button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn hover:shadow-sm">Mindmap erstellen</button>
<button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn hover:shadow-sm">Datenbank durchsuchen</button>
</div>
</div>
</div>