feat: UI-Highlight bei Chat-Antworten, Barrierefreiheits-Doku im Assistenten

src/routers/chat.py

@@ -327,6 +327,12 @@ Artikel werden automatisch auf geografische Erwahnungen analysiert. Erkannte Ort
 Quellenausschluss:
 Bestimmte Domains koennen ueber die Quellen-Einstellungen blockiert werden. Blockierte Quellen tauchen dann in keiner Lage mehr auf. So lassen sich unerwuenschte oder unzuverlaessige Quellen dauerhaft ausschliessen.
 
+Barrierefreiheit:
+Oben rechts im Dashboard befindet sich ein Barrierefreiheits-Button (Figur-Symbol). Dort gibt es vier Einstellungen: "Hoher Kontrast" verstaerkt Farben und Kontraste fuer bessere Lesbarkeit. "Verstaerkte Focus-Anzeige" macht den aktuell ausgewaehlten Bereich deutlicher sichtbar, was besonders bei Tastaturbedienung hilfreich ist. "Groessere Schrift" erhoeht die Schriftgroesse im gesamten Dashboard. "Animationen aus" deaktiviert Uebergangseffekte fuer Nutzer die empfindlich auf Bewegung reagieren. Alle Einstellungen werden gespeichert und bleiben beim naechsten Besuch erhalten.
+
+Theme (Hell/Dunkel):
+Direkt neben dem Barrierefreiheits-Button befindet sich der Theme-Umschalter. Damit kann zwischen hellem und dunklem Design gewechselt werden. Die Einstellung wird ebenfalls gespeichert.
+
 Internationale Quellen:
 Beim Erstellen einer Lage kann "Internationale Quellen" aktiviert werden. Damit werden zusaetzlich englischsprachige Feeds, internationale Think Tanks und globale Nachrichtenagenturen durchsucht. Das erweitert den Quellenpool erheblich, kann aber auch mehr Rauschen erzeugen.
 

src/static/css/style.css

@@ -4924,3 +4924,20 @@ a.map-popup-article:hover {
     bottom: auto;
     top: calc(100% + 8px);
 }
+
+/* Chat UI-Highlight: Bedienelemente hervorheben */
+@keyframes chat-ui-pulse {
+    0%   { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0.7); }
+    40%  { box-shadow: 0 0 0 8px rgba(200, 168, 81, 0.3); }
+    80%  { box-shadow: 0 0 0 12px rgba(200, 168, 81, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(200, 168, 81, 0); }
+}
+.chat-ui-highlight {
+    animation: chat-ui-pulse 1s ease-out 3;
+    outline: 2px solid var(--accent) !important;
+    outline-offset: 3px;
+    border-radius: var(--radius-sm);
+    position: relative;
+    z-index: 100;
+    transition: outline 0.3s ease;
+}

src/static/js/chat.js

@@ -178,6 +178,7 @@ const Chat = {
             container.scrollTop = container.scrollHeight;
         } else {
             bubble.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this._highlightUI(text);
         }
     },
 
@@ -219,4 +220,51 @@ const Chat = {
         }
         return await resp.json();
     },
+    // -----------------------------------------------------------------------
+    // UI-Highlight: Bedienelemente im Dashboard hervorheben wenn im Chat erwaehnt
+    // -----------------------------------------------------------------------
+    _UI_HIGHLIGHTS: [
+        { keywords: ['neue lage', 'lage erstellen', 'lage anlegen', 'recherche erstellen'], selector: '#new-incident-btn' },
+        { keywords: ['theme', 'farbschema', 'hell', 'dunkel', 'dark mode', 'light mode', 'design wechseln'], selector: '#theme-toggle' },
+        { keywords: ['barrierefreiheit', 'accessibility', 'kontrast', 'schrift', 'focus-anzeige', 'animationen'], selector: '#a11y-btn' },
+        { keywords: ['abmelden', 'logout', 'ausloggen'], selector: '#logout-btn' },
+        { keywords: ['benachrichtigung', 'glocke', 'abo', 'abonnieren'], selector: '#notification-btn' },
+        { keywords: ['aktualisieren', 'refresh'], selector: '#refresh-btn' },
+        { keywords: ['export', 'lagebericht'], selector: '#export-btn' },
+        { keywords: ['faktencheck', 'factcheck', 'fakten'], selector: '.factcheck-section, [data-tab="factchecks"]' },
+        { keywords: ['karte', 'kartenansicht', 'geoparsing', 'map'], selector: '#map-container, .map-card' },
+        { keywords: ['quellen', 'source'], selector: '.sources-section, [data-tab="sources"]' },
+        { keywords: ['sichtbarkeit', 'privat', 'oeffentlich'], selector: '#incident-visibility, .visibility-toggle' },
+        { keywords: ['filter', 'eigene', 'alle lagen'], selector: '.sidebar-filter' },
+    ],
+
+    _highlightUI(text) {
+        if (!text) return;
+        var lower = text.toLowerCase();
+        var highlighted = new Set();
+        for (var i = 0; i < this._UI_HIGHLIGHTS.length; i++) {
+            var entry = this._UI_HIGHLIGHTS[i];
+            for (var k = 0; k < entry.keywords.length; k++) {
+                if (lower.indexOf(entry.keywords[k]) !== -1) {
+                    var selectors = entry.selector.split(',');
+                    for (var s = 0; s < selectors.length; s++) {
+                        var sel = selectors[s].trim();
+                        if (highlighted.has(sel)) continue;
+                        var el = document.querySelector(sel);
+                        if (el) {
+                            highlighted.add(sel);
+                            el.classList.add('chat-ui-highlight');
+                            (function(element) {
+                                setTimeout(function() {
+                                    element.classList.remove('chat-ui-highlight');
+                                }, 3000);
+                            })(el);
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+    },
+
 };