From d4d114b2fd2efdd480c6a24cb3dd522e9b2821de Mon Sep 17 00:00:00 2001 From: root Date: Sun, 29 Mar 2026 08:48:46 -0500 Subject: [PATCH] Fix demo/showcase banner: auto-fade, no nav blocking, click to dismiss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Banner no longer covers navigation: - Pushes content down with body padding instead of overlapping - Fades out automatically after 10 seconds - Click to dismiss immediately - Remembered per session via sessionStorage (won't reappear after dismissal) - Smooth transition: opacity fade + slide up Demo mode runs ARE saved to database (confirmed /api/run is in DEMO_ALLOWED_POSTS and save_run executes in the SSE generator). The "read-only" restriction only applies to admin actions like archiving, tagging, banning — not to running prompts. Co-Authored-By: Claude Opus 4.6 (1M context) --- llm_team_ui.py | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/llm_team_ui.py b/llm_team_ui.py index a82f078..6f6dd91 100644 --- a/llm_team_ui.py +++ b/llm_team_ui.py @@ -3512,19 +3512,38 @@ function updateDemoUI(active, showcase) { } if (active) { if (!banner) { + // Check if user already saw banner this session + var bannerKey = 'demo-banner-seen-' + (showcase ? 'showcase' : 'demo'); + if (sessionStorage.getItem(bannerKey)) return; + var b = document.createElement('div'); b.id = 'demo-banner'; + var baseStyle = 'position:fixed;top:0;left:0;right:0;text-align:center;font-size:11px;padding:8px;z-index:50;font-weight:700;letter-spacing:2px;font-family:JetBrains Mono,monospace;text-transform:uppercase;transition:opacity 1s,transform 0.5s;pointer-events:auto;cursor:pointer'; if (showcase) { - b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(217,70,239,0.05),rgba(217,70,239,0.12),rgba(217,70,239,0.05));border-bottom:2px solid rgba(217,70,239,0.3);color:#d946ef;text-align:center;font-size:11px;padding:8px;z-index:50;font-weight:700;letter-spacing:2px;font-family:JetBrains Mono,monospace;text-transform:uppercase'; - b.textContent = 'Showcase Mode — Full Read-Only Access — Admin · Monitor · Logs · Lab · History'; + b.style.cssText = baseStyle + ';background:linear-gradient(90deg,rgba(217,70,239,0.08),rgba(217,70,239,0.15),rgba(217,70,239,0.08));border-bottom:2px solid rgba(217,70,239,0.3);color:#d946ef'; + b.textContent = 'Showcase Mode — Full Read-Only Access — Click to dismiss'; } else { - b.style.cssText = 'position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,rgba(74,222,128,0.05),rgba(74,222,128,0.1),rgba(74,222,128,0.05));border-bottom:1px solid rgba(74,222,128,0.25);color:#4ade80;text-align:center;font-size:11px;padding:6px;z-index:50;font-weight:600;letter-spacing:1px;font-family:JetBrains Mono,monospace;text-transform:uppercase'; - b.textContent = 'Demo Mode'; + b.style.cssText = baseStyle + ';background:linear-gradient(90deg,rgba(74,222,128,0.08),rgba(74,222,128,0.12),rgba(74,222,128,0.08));border-bottom:1px solid rgba(74,222,128,0.25);color:#4ade80'; + b.textContent = 'Demo Mode — Click to dismiss'; } + // Click to dismiss immediately + b.onclick = function() { b.style.opacity='0'; b.style.transform='translateY(-100%)'; setTimeout(function(){b.remove()},500); sessionStorage.setItem(bannerKey,'1'); }; document.body.prepend(b); + // Push content down so banner doesn't cover nav + document.body.style.paddingTop = '36px'; + // Auto-fade after 10 seconds + setTimeout(function() { + if (b.parentNode) { + b.style.opacity = '0'; + b.style.transform = 'translateY(-100%)'; + setTimeout(function() { if (b.parentNode) b.remove(); document.body.style.paddingTop = ''; }, 1000); + sessionStorage.setItem(bannerKey, '1'); + } + }, 10000); } } else if (banner) { banner.remove(); + document.body.style.paddingTop = ''; } }