From 7d127688d1186d560ba80dd19b559701a3e8bdd1 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Sun, 15 Mar 2026 23:31:09 +0100 Subject: [PATCH] feat: UI-Highlight bei Chat-Antworten, Barrierefreiheits-Doku im Assistenten --- src/routers/chat.py | 6 +++++ src/static/css/style.css | 17 ++++++++++++++ src/static/js/chat.js | 48 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+) diff --git a/src/routers/chat.py b/src/routers/chat.py index 9ffbe00..8352fee 100644 --- a/src/routers/chat.py +++ b/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. diff --git a/src/static/css/style.css b/src/static/css/style.css index 5edba45..19e09de 100644 --- a/src/static/css/style.css +++ b/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; +} diff --git a/src/static/js/chat.js b/src/static/js/chat.js index ae03f60..36cb91f 100644 --- a/src/static/js/chat.js +++ b/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; + } + } + } + }, + };