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:
@@ -1958,6 +1958,8 @@ def public_frontend():
|
||||
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22);
|
||||
display:none; flex-direction:column; overflow:hidden; }
|
||||
.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;
|
||||
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;
|
||||
@@ -2056,6 +2058,9 @@ def public_frontend():
|
||||
<!-- ── Submit Bubble ────────────────────────────────────────── -->
|
||||
<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 ─────────────────────────────────────────── -->
|
||||
<div class="chat-overlay" id="chatOverlay">
|
||||
<div class="chat-header">
|
||||
@@ -2283,14 +2288,30 @@ def public_frontend():
|
||||
let history = [];
|
||||
let open = false;
|
||||
|
||||
const backdrop = document.getElementById('chatBackdrop');
|
||||
|
||||
function toggle() {
|
||||
open = !open;
|
||||
overlay.classList.toggle('open', open);
|
||||
if (backdrop) backdrop.classList.toggle('open', open);
|
||||
if (open) setTimeout(() => input.focus(), 100);
|
||||
}
|
||||
|
||||
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
|
||||
const greetBtn = document.getElementById('greetingSpeakBtn');
|
||||
|
||||
Reference in New Issue
Block a user