profit/llm-team-ui
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix demo/showcase banner: auto-fade, no nav blocking, click to dismiss

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
root 2026-03-29 08:48:46 -05:00
parent ef68f5b9f7
commit d4d114b2fd
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
llm_team_ui.py
View File

@ -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 = '';
}
}