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);
|
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');
|
||||||
|
|||||||
Reference in New Issue
Block a user