feat: Backdrop-Blur beim Chat-Assistenten

- chatBackdrop div mit backdrop-filter:blur(4px) hinter dem Chat-Overlay
- Rest der Seite wird unscharf wenn Chat geöffnet ist
- Klick auf Backdrop schließt den Chat
- Öffnen/Schließen synchron mit ChatOverlay via JS
This commit is contained in:
Hermes Agent
2026-06-17 22:05:34 +02:00
parent a8be332662
commit 3d18cc97a4
+22 -1
View File
@@ -1958,6 +1958,8 @@ def public_frontend():
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22); background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22);
display:none; flex-direction:column; overflow:hidden; } display:none; flex-direction:column; overflow:hidden; }
.chat-overlay.open { display:flex; } .chat-overlay.open { display:flex; }
.chat-backdrop { position:fixed; inset:0; z-index:9997; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
.chat-backdrop.open { display:block; }
.chat-header { background:#20228a; color:#fff; padding:0.9rem 1.2rem; .chat-header { background:#20228a; color:#fff; padding:0.9rem 1.2rem;
font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; } font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
.chat-header button { background:none; border:none; color:#fff; font-size:1.3rem; .chat-header button { background:none; border:none; color:#fff; font-size:1.3rem;
@@ -2056,6 +2058,9 @@ def public_frontend():
<!-- ── Submit Bubble ────────────────────────────────────────── --> <!-- ── Submit Bubble ────────────────────────────────────────── -->
<button class="submit-bubble" id="submitBubble" title="Etwas einreichen" aria-label="Einreich-Formular öffnen">+</button> <button class="submit-bubble" id="submitBubble" title="Etwas einreichen" aria-label="Einreich-Formular öffnen">+</button>
<!-- ── Chat Backdrop ──────────────────────────────────────── -->
<div class="chat-backdrop" id="chatBackdrop"></div>
<!-- ── Chat Overlay ─────────────────────────────────────────── --> <!-- ── Chat Overlay ─────────────────────────────────────────── -->
<div class="chat-overlay" id="chatOverlay"> <div class="chat-overlay" id="chatOverlay">
<div class="chat-header"> <div class="chat-header">
@@ -2283,14 +2288,30 @@ def public_frontend():
let history = []; let history = [];
let open = false; let open = false;
const backdrop = document.getElementById('chatBackdrop');
function toggle() { function toggle() {
open = !open; open = !open;
overlay.classList.toggle('open', open); overlay.classList.toggle('open', open);
if (backdrop) backdrop.classList.toggle('open', open);
if (open) setTimeout(() => input.focus(), 100); if (open) setTimeout(() => input.focus(), 100);
} }
bubble.addEventListener('click', toggle); bubble.addEventListener('click', toggle);
closeBtn.addEventListener('click', () => { open = false; overlay.classList.remove('open'); }); closeBtn.addEventListener('click', () => {
open = false;
overlay.classList.remove('open');
if (backdrop) backdrop.classList.remove('open');
});
// Click backdrop to close
if (backdrop) {
backdrop.addEventListener('click', () => {
open = false;
overlay.classList.remove('open');
backdrop.classList.remove('open');
});
}
// Wire up greeting speak button // Wire up greeting speak button
const greetBtn = document.getElementById('greetingSpeakBtn'); const greetBtn = document.getElementById('greetingSpeakBtn');