Verbessere die Funktionalität des Chat-Assistenten in app.py: Aktualisiere die Systemnachricht mit spezifischen Informationen zur Systades-Wissensdatenbank und erweitere die API-Nachrichtenformatierung. Füge Unterstützung für ausgewählte Elemente aus der Datenbank hinzu und erhöhe die maximale Tokenanzahl für detailliertere Antworten. Implementiere eine neue JavaScript-Datei für eine neuronale Netzwerk-Hintergrundanimation und verbessere die CSS-Stile für den Light Mode. Optimiere die Benutzeroberfläche und die Lesbarkeit in beiden Modi. Aktualisiere die Grundstile für eine konsistente Darstellung.

2025-04-28 14:49:02 +02:00
parent 65c44ab371
commit 7a0533ac09
9 changed files with 2175 additions and 302 deletions
--- a/static/css/base-styles.css
+++ b/static/css/base-styles.css
@@ -35,6 +35,21 @@
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
+
+    /* Light mode optimierte Farben */
+    --light-bg: #f9fafb;
+    --light-text: #1e293b;
+    --light-heading: #0f172a;
+    --light-primary: #3b82f6;
+    --light-primary-hover: #4f46e5;
+    --light-secondary: #6b7280;
+    --light-border: #e5e7eb;
+    --light-card-bg: rgba(255, 255, 255, 0.92);
+    --light-navbar-bg: rgba(255, 255, 255, 0.92);
+    --light-input-bg: #ffffff;
+    --light-input-border: #d1d5db;
+    --light-input-focus: #3b82f6;
+    --light-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }

 /* Base Styles */
@@ -60,9 +75,9 @@ html.dark body {
 }

 /* Light Mode */
-body {
-    background-color: var(--bg-primary-light);
-    color: var(--text-primary-light);
+body:not(.dark) {
+    background-color: var(--light-bg);
+    color: var(--light-text);
 }

 /* Typography */
@@ -418,4 +433,94 @@ html.dark .mystical-dot {

 html.dark :focus-visible {
    outline-color: var(--accent-primary-dark);
+}
+
+/* Light Mode Überschriften */
+body:not(.dark) h1,
+body:not(.dark) h2,
+body:not(.dark) h3,
+body:not(.dark) h4,
+body:not(.dark) h5,
+body:not(.dark) h6 {
+    color: var(--light-heading);
+}
+
+/* Light Mode Links */
+body:not(.dark) a {
+    color: var(--light-primary);
+}
+
+body:not(.dark) a:hover {
+    color: var(--light-primary-hover);
+}
+
+/* Light Mode Buttons */
+body:not(.dark) .btn,
+body:not(.dark) button:not(.toggle) {
+    background-color: var(--light-primary);
+    color: white;
+    border: none;
+    box-shadow: var(--light-shadow);
+    border-radius: 0.375rem;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s ease;
+}
+
+body:not(.dark) .btn:hover,
+body:not(.dark) button:not(.toggle):hover {
+    background-color: var(--light-primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Light Mode Cards und Panels */
+body:not(.dark) .card,
+body:not(.dark) .panel {
+    background-color: var(--light-card-bg);
+    border: 1px solid var(--light-border);
+    border-radius: 0.5rem;
+    box-shadow: var(--light-shadow);
+}
+
+/* Light Mode Tabelle */
+body:not(.dark) table {
+    background-color: var(--light-card-bg);
+    border-collapse: collapse;
+}
+
+body:not(.dark) th {
+    background-color: var(--light-bg);
+    color: var(--light-heading);
+    border-bottom: 1px solid var(--light-border);
+}
+
+body:not(.dark) td {
+    border-bottom: 1px solid var(--light-border);
+}
+
+/* Light Mode Inputs */
+body:not(.dark) input,
+body:not(.dark) textarea,
+body:not(.dark) select {
+    background-color: var(--light-input-bg);
+    border: 1px solid var(--light-input-border);
+    color: var(--light-text);
+    border-radius: 0.375rem;
+    padding: 0.5rem;
+}
+
+body:not(.dark) input:focus,
+body:not(.dark) textarea:focus,
+body:not(.dark) select:focus {
+    border-color: var(--light-input-focus);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    outline: none;
+}
+
+/* Navbar im Light Mode verbessern */
+body:not(.dark) nav,
+body:not(.dark) .navbar {
+    background-color: var(--light-navbar-bg);
+    box-shadow: var(--light-shadow);
+    border-bottom: 1px solid var(--light-border);
 } 
--- a/static/css/neural-network-background.css
+++ b/static/css/neural-network-background.css
@@ -33,15 +33,74 @@ html.dark, html {
  backdrop-filter: blur(5px) !important;
 }

+/* Dark Mode - Navbar */
 body.dark .glass-navbar-dark {
  background-color: rgba(10, 14, 25, 0.7) !important;
 }

+/* Light Mode - Verbesserter Navbar */
 body .glass-navbar-light {
-  background-color: rgba(255, 255, 255, 0.7) !important;
+  background-color: rgba(255, 255, 255, 0.92) !important;
+  backdrop-filter: blur(10px) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  border-bottom: 1px solid rgba(220, 220, 220, 0.5) !important;
 }

-/* Make sure footer has proper transparency */
-footer {
+/* Light Mode - Verbesserte Lesbarkeit für Navbar-Elemente */
+body:not(.dark) .navbar-link,
+body:not(.dark) .navbar-item {
+  color: #1e3a8a !important; /* Dunkles Blau für bessere Lesbarkeit */
+}
+
+body:not(.dark) .navbar-link:hover,
+body:not(.dark) .navbar-item:hover {
+  color: #4f46e5 !important; /* Helles Lila beim Hover */
+  background-color: rgba(240, 245, 255, 0.9) !important;
+}
+
+/* Light Mode - Buttons verbessert */
+body:not(.dark) .btn,
+body:not(.dark) button {
+  background-color: #3b82f6 !important; /* Klares Blau statt Grau */
+  color: white !important;
+  border: none !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+body:not(.dark) .btn:hover,
+body:not(.dark) button:hover {
+  background-color: #4f46e5 !important; /* Lila beim Hover */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Verbesserte Karten im Light Mode */
+body:not(.dark) .card,
+body:not(.dark) .panel {
+  background-color: rgba(255, 255, 255, 0.92) !important;
+  border: 1px solid rgba(220, 220, 220, 0.8) !important;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Verbesserte Lesbarkeit für Text im Light Mode */
+body:not(.dark) {
+  color: #1e293b !important; /* Dunkles Blau-Grau statt Schwarz */
+}
+
+body:not(.dark) h1, 
+body:not(.dark) h2, 
+body:not(.dark) h3, 
+body:not(.dark) h4, 
+body:not(.dark) h5, 
+body:not(.dark) h6 {
+  color: #0f172a !important; /* Fast schwarz für Überschriften */
+}
+
+/* Make sure footer has proper transparency and styling */
+body.dark footer {
  background-color: rgba(10, 14, 25, 0.7) !important;
+}
+
+body:not(.dark) footer {
+  background-color: rgba(249, 250, 251, 0.92) !important;
+  border-top: 1px solid rgba(220, 220, 220, 0.8) !important;
 } 
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1441,4 +1441,204 @@ html, body {
    position: sticky;
    top: 0;
    z-index: 1000;
+}
+
+/* Light Mode Optimierungen für wichtige UI-Komponenten */
+
+/* Buttons im Light Mode */
+.btn-primary:not(.dark-mode .btn-primary) {
+  background-color: var(--light-primary, #3b82f6);
+  color: white;
+  border: none;
+  font-weight: 500;
+}
+
+.btn-primary:not(.dark-mode .btn-primary):hover {
+  background-color: var(--light-primary-hover, #4f46e5);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn-secondary:not(.dark-mode .btn-secondary) {
+  background-color: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  font-weight: 500;
+}
+
+.btn-secondary:not(.dark-mode .btn-secondary):hover {
+  background-color: #e5e7eb;
+}
+
+/* Navbar im Light Mode */
+.navbar:not(.dark-mode .navbar),
+.nav:not(.dark-mode .nav) {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.navbar:not(.dark-mode .navbar) .nav-link,
+.nav:not(.dark-mode .nav) .nav-link {
+  color: #1e3a8a;
+  font-weight: 500;
+}
+
+.navbar:not(.dark-mode .navbar) .nav-link:hover,
+.nav:not(.dark-mode .nav) .nav-link:hover {
+  color: #4f46e5;
+}
+
+.navbar:not(.dark-mode .navbar) .navbar-brand,
+.nav:not(.dark-mode .nav) .navbar-brand {
+  color: #0f172a;
+  font-weight: 700;
+}
+
+/* Dropdown Menüs im Light Mode */
+.dropdown-menu:not(.dark-mode .dropdown-menu) {
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0;
+}
+
+.dropdown-item:not(.dark-mode .dropdown-item) {
+  color: #1e293b;
+  padding: 0.5rem 1rem;
+}
+
+.dropdown-item:not(.dark-mode .dropdown-item):hover {
+  background-color: #f1f5f9;
+  color: #4f46e5;
+}
+
+/* Karten im Light Mode */
+.card:not(.dark-mode .card) {
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.card-header:not(.dark-mode .card-header) {
+  background-color: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 1.5rem;
+}
+
+.card-footer:not(.dark-mode .card-footer) {
+  background-color: #f8fafc;
+  border-top: 1px solid #e5e7eb;
+}
+
+/* Formulare im Light Mode */
+.form-control:not(.dark-mode .form-control) {
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  color: #1e293b;
+}
+
+.form-control:not(.dark-mode .form-control):focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+}
+
+/* Tabs im Light Mode */
+.nav-tabs:not(.dark-mode .nav-tabs) {
+  border-bottom-color: #e5e7eb;
+}
+
+.nav-tabs:not(.dark-mode .nav-tabs) .nav-link {
+  color: #64748b;
+  border: 1px solid transparent;
+}
+
+.nav-tabs:not(.dark-mode .nav-tabs) .nav-link:hover {
+  border-color: #e5e7eb #e5e7eb #e5e7eb;
+  color: #3b82f6;
+}
+
+.nav-tabs:not(.dark-mode .nav-tabs) .nav-link.active {
+  color: #0f172a;
+  background-color: white;
+  border-color: #e5e7eb #e5e7eb white;
+  font-weight: 500;
+}
+
+/* Alerts im Light Mode */
+.alert:not(.dark-mode .alert) {
+  border-radius: 0.5rem;
+  border: 1px solid transparent;
+}
+
+.alert-primary:not(.dark-mode .alert-primary) {
+  background-color: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1e40af;
+}
+
+.alert-success:not(.dark-mode .alert-success) {
+  background-color: #f0fdf4;
+  border-color: #bbf7d0;
+  color: #166534;
+}
+
+.alert-warning:not(.dark-mode .alert-warning) {
+  background-color: #fffbeb;
+  border-color: #fef3c7;
+  color: #92400e;
+}
+
+.alert-danger:not(.dark-mode .alert-danger) {
+  background-color: #fef2f2;
+  border-color: #fecaca;
+  color: #b91c1c;
+}
+
+/* Badges im Light Mode */
+.badge:not(.dark-mode .badge) {
+  font-weight: 500;
+  padding: 0.25em 0.6em;
+  border-radius: 0.375rem;
+}
+
+.badge-primary:not(.dark-mode .badge-primary) {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.badge-secondary:not(.dark-mode .badge-secondary) {
+  background-color: #f3f4f6;
+  color: #1f2937;
+}
+
+/* Tabellen im Light Mode */
+table:not(.dark-mode table) {
+  background-color: white;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table:not(.dark-mode table) th {
+  background-color: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+  color: #0f172a;
+  font-weight: 600;
+  padding: 0.75rem;
+  text-align: left;
+}
+
+table:not(.dark-mode table) td {
+  border-bottom: 1px solid #e5e7eb;
+  padding: 0.75rem;
+  color: #1e293b;
+}
+
+table:not(.dark-mode table) tr:hover {
+  background-color: #f8fafc;
 } 
--- a/static/neural-network-background-full.js
+++ b/static/neural-network-background-full.js
--- a/static/neural-network-background.js
+++ b/static/neural-network-background.js
--- a/static/style.css
+++ b/static/style.css
@@ -62,6 +62,22 @@ body {

 body.dark {
  color: var(--dark-text-primary);
+  background-color: transparent;
+}
+
+/* Ensure proper contrast in both modes */
+body:not(.dark) {
+  --text-primary: var(--light-text-primary);
+  --text-secondary: var(--light-text-secondary);
+  --bg-primary: var(--light-bg-primary);
+  --bg-secondary: var(--light-bg-secondary);
+}
+
+body.dark {
+  --text-primary: var(--dark-text-primary);
+  --text-secondary: var(--dark-text-secondary);
+  --bg-primary: var(--dark-bg-primary);
+  --bg-secondary: var(--dark-bg-secondary);
 }

 /* Typography */