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.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user