Add 4-theme system, fix enrichment panel layout, enable Docker on boot
Theme system (Dark/Light/Reddit/Modern): - Injectable CSS/JS via after_request — zero template changes - Dark: original gold accent on black - Light: warm off-white with indigo accent, readable buttons - Reddit: bluish-gray bg, orange accent, pill buttons, 8px corners - Modern: glassmorphism dark, blue accent, frosted cards, 16px corners - Toggle cycles all 4 themes, persists via localStorage - Button injected into every page header automatically Enrichment panel fix: - threat-card changed from display:flex to display:grid - enrich-panel now spans full width via grid-column:1/-1 - Added .enrich-section/.enrich-title/.enrich-grid CSS classes - Sections (Geo, Deep Scan, AI) visually separated with dividers Iterate/repipe modal themed for all modes: - Light themes get white modal bg, proper contrast - Reddit gets rounded corners + orange accent - Modern gets glassmorphism modal with blue glow Scrollbar styling across all themes: - Rounded, properly sized (6-8px), theme-colored thumbs - macOS-style inset look via background-clip Layout improvements: - Output area min-height 400px, padding-bottom 40px - Empty state centered with more breathing room - Docker + containerd enabled at boot for web-check survival Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
root
parent
411040f206
commit
713f18a65f
550
llm_team_ui.py
550
llm_team_ui.py
@ -112,6 +112,273 @@ def is_demo():
|
|||||||
return _demo_mode["active"]
|
return _demo_mode["active"]
|
||||||
|
|
||||||
|
|
||||||
|
# ─── THEME SYSTEM ────────────────────────────────────────────
|
||||||
|
# Shared CSS + JS for theme switching across all pages
|
||||||
|
THEME_CSS = """
|
||||||
|
body.theme-light, body.theme-reddit {
|
||||||
|
--bg: #f5f3ef; --surface: rgba(255,254,251,0.92); --surface2: rgba(250,248,244,0.85); --border: #ddd8cf;
|
||||||
|
--text: #1a1d23; --text2: #6b6560; --accent: #4f46e5; --accent2: #6366f1;
|
||||||
|
--green: #16a34a; --orange: #d97706; --red: #dc2626; --blue: #2563eb;
|
||||||
|
--glow: rgba(79,70,229,0.04);
|
||||||
|
}
|
||||||
|
body.theme-reddit {
|
||||||
|
--bg: #dae0e6; --surface: #ffffff; --surface2: #f6f7f8; --border: #edeff1;
|
||||||
|
--text: #1a1a1b; --text2: #7c7c7c; --accent: #ff4500; --accent2: #ff5414;
|
||||||
|
--green: #46d160; --orange: #ff4500; --red: #ff585b; --blue: #7193ff;
|
||||||
|
--glow: rgba(255,69,0,0.04);
|
||||||
|
}
|
||||||
|
body.theme-modern {
|
||||||
|
--bg: #09090b; --surface: rgba(24,24,27,0.8); --surface2: rgba(30,30,35,0.6); --border: rgba(63,63,70,0.5);
|
||||||
|
--text: #fafafa; --text2: #a1a1aa; --accent: #3b82f6; --accent2: #60a5fa;
|
||||||
|
--green: #22c55e; --orange: #f59e0b; --red: #ef4444; --blue: #3b82f6;
|
||||||
|
--glow: rgba(59,130,246,0.06);
|
||||||
|
}
|
||||||
|
body.theme-light .scanlines, body.theme-light .vignette, body.theme-reddit .scanlines, body.theme-reddit .vignette { display: none; }
|
||||||
|
body.theme-light canvas#bg-grid, body.theme-reddit canvas#bg-grid { display: none; }
|
||||||
|
body.theme-light .panel, body.theme-light .login-box, body.theme-reddit .panel, body.theme-reddit .login-box { backdrop-filter: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px var(--border); }
|
||||||
|
body.theme-light .panel::before, body.theme-reddit .panel::before { background: linear-gradient(90deg, transparent, rgba(79,70,229,0.12), transparent); }
|
||||||
|
body.theme-light .mode-tab, body.theme-reddit .mode-tab { background: var(--bg); }
|
||||||
|
body.theme-light .mode-tab.active, body.theme-reddit .mode-tab.active { background: rgba(79,70,229,0.06); box-shadow: 0 1px 3px rgba(79,70,229,0.1); }
|
||||||
|
body.theme-light .mode-tab.crazy, body.theme-reddit .mode-tab.crazy { background: linear-gradient(135deg, rgba(245,240,255,0.9), rgba(235,225,255,0.9)); border-color: rgba(168,85,247,0.2); }
|
||||||
|
body.theme-light .mode-tab.crazy.active, body.theme-reddit .mode-tab.crazy.active { background: linear-gradient(135deg, rgba(235,225,255,1), rgba(225,210,255,1)); border-color: #a855f7; color: #7c3aed; }
|
||||||
|
body.theme-light .model-card, body.theme-reddit .model-card { background: var(--bg); }
|
||||||
|
body.theme-light .model-card.selected, body.theme-reddit .model-card.selected { background: rgba(79,70,229,0.04); }
|
||||||
|
body.theme-light .model-card.selected .check, body.theme-reddit .model-card.selected .check { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||||
|
body.theme-light .prov-badge.ollama, body.theme-reddit .prov-badge.ollama { background: rgba(22,163,74,0.06); color: var(--green); border-color: rgba(22,163,74,0.15); }
|
||||||
|
body.theme-light .output-card, body.theme-reddit .output-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||||
|
body.theme-light .output-card .card-body, body.theme-reddit .output-card .card-body { background: var(--surface); }
|
||||||
|
body.theme-light textarea, body.theme-reddit textarea { background: var(--surface) !important; color: var(--text) !important; }
|
||||||
|
body.theme-light input, body.theme-light select, body.theme-reddit input, body.theme-reddit select { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
|
||||||
|
body.theme-light .threat-card, body.theme-reddit .threat-card { background: var(--surface); }
|
||||||
|
body.theme-light .threat-card.critical, body.theme-reddit .threat-card.critical { background: rgba(220,38,38,0.03); }
|
||||||
|
body.theme-light .threat-card.high, body.theme-reddit .threat-card.high { background: rgba(217,119,6,0.03); }
|
||||||
|
body.theme-light .enrich-panel, body.theme-reddit .enrich-panel { background: rgba(79,70,229,0.03); border-color: rgba(79,70,229,0.15); }
|
||||||
|
body.theme-light .enrich-title, body.theme-reddit .enrich-title { color: var(--accent); }
|
||||||
|
body.theme-light .threat-summary .ts-box, body.theme-reddit .threat-summary .ts-box { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||||
|
body.theme-light .field input, body.theme-reddit .field input { background: var(--surface); }
|
||||||
|
body.theme-light .login-box .btn, body.theme-reddit .login-box .btn { color: #fff; }
|
||||||
|
body.theme-light .btn, body.theme-reddit .btn { background: var(--bg); color: var(--text); border-color: var(--border); }
|
||||||
|
body.theme-light .btn:hover, body.theme-reddit .btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(79,70,229,0.04); }
|
||||||
|
body.theme-light .btn-g, body.theme-light .btn-green, body.theme-reddit .btn-g, body.theme-reddit .btn-green { color: var(--green); border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.04); }
|
||||||
|
body.theme-light .btn-g:hover, body.theme-light .btn-green:hover, body.theme-reddit .btn-g:hover, body.theme-reddit .btn-green:hover { background: rgba(22,163,74,0.08); border-color: var(--green); }
|
||||||
|
body.theme-light .btn-r, body.theme-light .btn-red, body.theme-reddit .btn-r, body.theme-reddit .btn-red { color: var(--red); border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.04); }
|
||||||
|
body.theme-light .btn-r:hover, body.theme-light .btn-red:hover, body.theme-reddit .btn-r:hover, body.theme-reddit .btn-red:hover { background: rgba(220,38,38,0.08); border-color: var(--red); }
|
||||||
|
body.theme-light .btn-primary, body.theme-reddit .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||||
|
body.theme-light .btn-primary:hover, body.theme-reddit .btn-primary:hover { background: var(--accent2); }
|
||||||
|
body.theme-light .stat-box, body.theme-reddit .stat-box { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||||
|
body.theme-light .tab, body.theme-reddit .tab { background: var(--surface); }
|
||||||
|
body.theme-light .tab.active, body.theme-reddit .tab.active { background: rgba(79,70,229,0.06); }
|
||||||
|
body.theme-light code, body.theme-light pre, body.theme-reddit code, body.theme-reddit pre { background: rgba(0,0,0,0.03); }
|
||||||
|
body.theme-light .back, body.theme-reddit .back { background: var(--surface); }
|
||||||
|
body.theme-light .back:hover, body.theme-reddit .back:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
body.theme-light .log-line:nth-child(even), body.theme-reddit .log-line:nth-child(even) { background: rgba(0,0,0,0.02); }
|
||||||
|
body.theme-light ::-webkit-scrollbar, body.theme-reddit ::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
body.theme-light ::-webkit-scrollbar-thumb, body.theme-reddit ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-light ::-webkit-scrollbar-thumb:hover, body.theme-reddit ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-light ::-webkit-scrollbar-track, body.theme-reddit ::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
body.theme-light .log-line, body.theme-reddit .log-line { color: #374151; }
|
||||||
|
body.theme-light #log-view, body.theme-reddit #log-view { background: var(--surface); border-color: var(--border); }
|
||||||
|
body.theme-light .controls, body.theme-reddit .controls { background: var(--surface); }
|
||||||
|
body.theme-light .controls select, body.theme-light .controls input, body.theme-reddit .controls select, body.theme-reddit .controls input { background: var(--surface) !important; }
|
||||||
|
body.theme-light .tag-err, body.theme-reddit .tag-err { background: rgba(220,38,38,0.06); color: var(--red); border-color: rgba(220,38,38,0.2); }
|
||||||
|
body.theme-light .tag-ok, body.theme-reddit .tag-ok { background: rgba(22,163,74,0.06); color: var(--green); border-color: rgba(22,163,74,0.2); }
|
||||||
|
body.theme-light .tag-time, body.theme-reddit .tag-time { background: rgba(79,70,229,0.06); color: var(--accent); border-color: rgba(79,70,229,0.2); }
|
||||||
|
body.theme-light .tag-mode, body.theme-reddit .tag-mode { background: rgba(217,119,6,0.06); color: var(--orange); border-color: rgba(217,119,6,0.2); }
|
||||||
|
body.theme-light .threat-summary .ts-box, body.theme-reddit .threat-summary .ts-box { background: #fff; border-color: var(--border); }
|
||||||
|
body.theme-light .ban-btn, body.theme-reddit .ban-btn { background: var(--surface); }
|
||||||
|
body.theme-light .ban-btn.ban, body.theme-reddit .ban-btn.ban { color: var(--red); border-color: rgba(220,38,38,0.3); }
|
||||||
|
body.theme-light .ban-btn.ban:hover, body.theme-reddit .ban-btn.ban:hover { background: rgba(220,38,38,0.05); }
|
||||||
|
body.theme-light .enrich-field .label, body.theme-reddit .enrich-field .label { color: #6b7280; }
|
||||||
|
body.theme-light .enrich-field .value, body.theme-reddit .enrich-field .value { color: #1a1d23; }
|
||||||
|
body.theme-light .provider-card, body.theme-light .prov-section, body.theme-reddit .provider-card, body.theme-reddit .prov-section { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||||
|
body.theme-light .toggle-switch input:checked + .toggle-slider, body.theme-reddit .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
|
||||||
|
body.theme-light .run-card, body.theme-light .history-card, body.theme-reddit .run-card, body.theme-reddit .history-card { background: var(--surface); border-color: var(--border); }
|
||||||
|
body.theme-light .wrap, body.theme-reddit .wrap { background: transparent; }
|
||||||
|
body.theme-light header, body.theme-reddit header { border-color: var(--border); }
|
||||||
|
body.theme-light .tabs .tab.err, body.theme-reddit .tabs .tab.err { color: var(--red); border-color: rgba(220,38,38,0.2); }
|
||||||
|
body.theme-light .tabs .tab.err.active, body.theme-reddit .tabs .tab.err.active { background: rgba(220,38,38,0.04); }
|
||||||
|
body.theme-light .progress-panel, body.theme-reddit .progress-panel { background: rgba(255,255,255,0.97); border-color: var(--accent); box-shadow: 0 2px 12px rgba(79,70,229,0.08); }
|
||||||
|
body.theme-light .progress-panel.done, body.theme-reddit .progress-panel.done { border-color: var(--green); box-shadow: 0 2px 12px rgba(22,163,74,0.08); }
|
||||||
|
body.theme-light .progress-header .prog-mode, body.theme-reddit .progress-header .prog-mode { color: var(--accent); }
|
||||||
|
body.theme-light .progress-header .prog-time, body.theme-reddit .progress-header .prog-time { color: var(--text2); }
|
||||||
|
body.theme-light .progress-track, body.theme-reddit .progress-track { background: rgba(0,0,0,0.04); border-color: rgba(79,70,229,0.15); }
|
||||||
|
body.theme-light .progress-fill, body.theme-reddit .progress-fill { background: linear-gradient(90deg, var(--accent), #818cf8, var(--blue)); box-shadow: none; }
|
||||||
|
body.theme-light .progress-step, body.theme-reddit .progress-step { background: rgba(79,70,229,0.1); }
|
||||||
|
body.theme-light .progress-step.done, body.theme-reddit .progress-step.done { background: linear-gradient(90deg, var(--accent), var(--green)); }
|
||||||
|
body.theme-light .progress-step.active, body.theme-reddit .progress-step.active { background: var(--accent); box-shadow: 0 0 4px rgba(79,70,229,0.3); }
|
||||||
|
body.theme-light .progress-detail, body.theme-reddit .progress-detail { color: var(--text2); }
|
||||||
|
body.theme-light .progress-detail .prog-stats, body.theme-reddit .progress-detail .prog-stats { color: var(--accent); }
|
||||||
|
body.theme-light .output-card, body.theme-reddit .output-card { background: var(--surface); border-color: var(--border); backdrop-filter: none; }
|
||||||
|
body.theme-light .output-card .card-header, body.theme-reddit .output-card .card-header { border-color: var(--border); color: var(--text); }
|
||||||
|
body.theme-light .output-card .card-header .role-tag, body.theme-reddit .output-card .card-header .role-tag { background: rgba(0,0,0,0.03); color: var(--text2); border-color: var(--border); }
|
||||||
|
body.theme-light .output-card .card-body, body.theme-reddit .output-card .card-body { color: var(--text); background: #fff; }
|
||||||
|
body.theme-light .synthesis-card, body.theme-reddit .synthesis-card { border-color: var(--accent); }
|
||||||
|
body.theme-light .synthesis-card .card-header, body.theme-reddit .synthesis-card .card-header { background: rgba(79,70,229,0.04); }
|
||||||
|
body.theme-light .crazy-card, body.theme-reddit .crazy-card { border-color: #8b5cf6; }
|
||||||
|
body.theme-light .crazy-card .card-header, body.theme-reddit .crazy-card .card-header { background: rgba(139,92,246,0.04); }
|
||||||
|
body.theme-light .error-card .card-header, body.theme-reddit .error-card .card-header { background: rgba(220,38,38,0.04); }
|
||||||
|
body.theme-light .status-bar, body.theme-reddit .status-bar { background: var(--surface); border-color: var(--border); color: var(--text2); }
|
||||||
|
body.theme-light .card-act, body.theme-reddit .card-act { background: var(--surface); }
|
||||||
|
body.theme-light .card-act:hover, body.theme-reddit .card-act:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
body.theme-light .demo-btn, body.theme-light [onclick*="toggleDemo"], body.theme-light [onclick*="setDemo"], body.theme-reddit .demo-btn, body.theme-reddit [onclick*="toggleDemo"], body.theme-reddit [onclick*="setDemo"] { background: var(--bg) !important; color: var(--text) !important; border: 2px solid var(--border) !important; }
|
||||||
|
body.theme-light .demo-btn:hover, body.theme-light [onclick*="toggleDemo"]:hover, body.theme-light [onclick*="setDemo"]:hover, body.theme-reddit .demo-btn:hover, body.theme-reddit [onclick*="toggleDemo"]:hover, body.theme-reddit [onclick*="setDemo"]:hover { border-color: var(--accent) !important; }
|
||||||
|
body.theme-light .remove-btn, body.theme-light button[onclick*="remove"], body.theme-light button[onclick*="Remove"], body.theme-light button[onclick*="delete"], body.theme-reddit .remove-btn, body.theme-reddit button[onclick*="remove"], body.theme-reddit button[onclick*="Remove"], body.theme-reddit button[onclick*="delete"] { background: rgba(220,38,38,0.06) !important; color: var(--red) !important; border-color: rgba(220,38,38,0.25) !important; }
|
||||||
|
body.theme-light .toggle-switch .toggle-slider, body.theme-reddit .toggle-switch .toggle-slider { background: #ccc8c0; }
|
||||||
|
body.theme-light .toggle-switch input:checked + .toggle-slider, body.theme-reddit .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
|
||||||
|
body.theme-light .add-btn, body.theme-light button[onclick*="add"], body.theme-light button[onclick*="Add"], body.theme-reddit .add-btn, body.theme-reddit button[onclick*="add"], body.theme-reddit button[onclick*="Add"] { background: rgba(79,70,229,0.06) !important; color: var(--accent) !important; border-color: rgba(79,70,229,0.25) !important; }
|
||||||
|
body.theme-light .ip-row, body.theme-light .allowlist-row, body.theme-light .model-row, body.theme-reddit .ip-row, body.theme-reddit .allowlist-row, body.theme-reddit .model-row { background: var(--surface); border-color: var(--border); }
|
||||||
|
body.theme-light .prov-section, body.theme-light .section-card, body.theme-light [class*="section"], body.theme-light .tab-content > div > div, body.theme-reddit .prov-section, body.theme-reddit .section-card, body.theme-reddit [class*="section"], body.theme-reddit .tab-content > div > div { border-color: var(--border); }
|
||||||
|
body.theme-reddit { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
|
||||||
|
body.theme-reddit .panel, body.theme-reddit .output-card, body.theme-reddit .threat-card, body.theme-reddit .stat-box, body.theme-reddit .provider-card, body.theme-reddit .prov-section, body.theme-reddit .run-card, body.theme-reddit .history-card, body.theme-reddit .threat-summary .ts-box, body.theme-reddit .enrich-panel { border-radius: 8px; border-width: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||||
|
body.theme-reddit .tab, body.theme-reddit .back, body.theme-reddit .ban-btn, body.theme-reddit .btn, body.theme-reddit .card-act, body.theme-reddit .theme-toggle, body.theme-reddit input, body.theme-reddit select, body.theme-reddit textarea { border-radius: 20px; }
|
||||||
|
body.theme-reddit .tag, body.theme-reddit .prov-badge { border-radius: 12px; }
|
||||||
|
body.theme-reddit .mode-tab, body.theme-reddit .model-card { border-radius: 8px; }
|
||||||
|
body.theme-reddit .tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||||
|
body.theme-reddit .tab:hover { background: rgba(255,69,0,0.06); }
|
||||||
|
body.theme-reddit .mode-tab.active { background: rgba(255,69,0,0.08); border-color: var(--accent); color: var(--accent); box-shadow: none; }
|
||||||
|
body.theme-reddit .mode-tab.crazy, body.theme-reddit .mode-tab.crazy.active { background: rgba(255,69,0,0.06); border-color: rgba(255,69,0,0.2); color: var(--accent); }
|
||||||
|
body.theme-reddit .model-card.selected { border-color: var(--accent); background: rgba(255,69,0,0.04); }
|
||||||
|
body.theme-reddit .model-card.selected .check { background: var(--accent); border-color: var(--accent); }
|
||||||
|
body.theme-reddit .btn-primary, body.theme-reddit .login-box .btn { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 20px; }
|
||||||
|
body.theme-reddit .btn-g, body.theme-reddit .btn-green { color: var(--green); border-color: rgba(70,209,96,0.3); background: rgba(70,209,96,0.06); }
|
||||||
|
body.theme-reddit .btn-r, body.theme-reddit .btn-red { color: var(--red); border-color: rgba(255,88,91,0.3); background: rgba(255,88,91,0.06); }
|
||||||
|
body.theme-reddit .output-card .card-header { border-radius: 8px 8px 0 0; border-bottom-width: 1px; }
|
||||||
|
body.theme-reddit .output-card .card-body { border-radius: 0 0 8px 8px; }
|
||||||
|
body.theme-reddit .synthesis-card { border-color: var(--accent); }
|
||||||
|
body.theme-reddit .synthesis-card .card-header { background: rgba(255,69,0,0.04); }
|
||||||
|
body.theme-reddit .progress-panel { border-radius: 8px; border-color: var(--accent); box-shadow: 0 2px 8px rgba(255,69,0,0.08); }
|
||||||
|
body.theme-reddit .progress-fill { background: linear-gradient(90deg, #ff4500, #ff8b60); }
|
||||||
|
body.theme-reddit .progress-step.done { background: linear-gradient(90deg, #ff4500, var(--green)); }
|
||||||
|
body.theme-reddit .progress-step.active { background: var(--accent); }
|
||||||
|
body.theme-reddit .progress-header .prog-mode { color: var(--accent); }
|
||||||
|
body.theme-reddit .enrich-panel { background: rgba(255,69,0,0.02); border-color: rgba(255,69,0,0.12); }
|
||||||
|
body.theme-reddit .enrich-title { color: var(--accent); }
|
||||||
|
body.theme-reddit .tabs .tab.err.active { background: var(--red); color: #fff; border-color: var(--red); }
|
||||||
|
body.theme-reddit .tag-time, body.theme-reddit .tag-mode { background: rgba(255,69,0,0.06); color: var(--accent); border-color: rgba(255,69,0,0.15); }
|
||||||
|
body.theme-reddit .tag-err { background: rgba(255,88,91,0.08); color: var(--red); border-color: rgba(255,88,91,0.2); }
|
||||||
|
body.theme-reddit .tag-ok { background: rgba(70,209,96,0.08); color: var(--green); border-color: rgba(70,209,96,0.2); }
|
||||||
|
body.theme-reddit .prov-badge.ollama { background: rgba(70,209,96,0.08); color: var(--green); border-color: rgba(70,209,96,0.2); }
|
||||||
|
body.theme-reddit header { border-bottom-width: 1px; }
|
||||||
|
body.theme-reddit ::-webkit-scrollbar-thumb { background: rgba(255,69,0,0.15); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-reddit ::-webkit-scrollbar-thumb:hover { background: rgba(255,69,0,0.3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-light .repipe-overlay, body.theme-reddit .repipe-overlay { background: rgba(0,0,0,0.3); }
|
||||||
|
body.theme-light .repipe-modal, body.theme-reddit .repipe-modal { background: var(--surface); border-color: var(--border); }
|
||||||
|
body.theme-light .repipe-text, body.theme-reddit .repipe-text { background: var(--bg); border-color: var(--border); color: var(--text); }
|
||||||
|
body.theme-light .repipe-btn, body.theme-reddit .repipe-btn { background: var(--bg); }
|
||||||
|
body.theme-light .repipe-btn.primary, body.theme-reddit .repipe-btn.primary { background: var(--accent); color: #fff; }
|
||||||
|
body.theme-light .repipe-mode, body.theme-reddit .repipe-mode { background: var(--bg); }
|
||||||
|
body.theme-light .repipe-mode.sel, body.theme-reddit .repipe-mode.sel { background: rgba(79,70,229,0.06); }
|
||||||
|
body.theme-reddit .repipe-modal { border-radius: 8px; }
|
||||||
|
body.theme-reddit .repipe-text { border-radius: 8px; }
|
||||||
|
body.theme-reddit .repipe-btn, body.theme-reddit .repipe-mode { border-radius: 20px; }
|
||||||
|
body.theme-reddit .repipe-mode.sel { background: rgba(255,69,0,0.06); color: var(--accent); border-color: var(--accent); }
|
||||||
|
body.theme-reddit .repipe-btn.primary { background: var(--accent); color: #fff; }
|
||||||
|
body.theme-modern .repipe-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); }
|
||||||
|
body.theme-modern .repipe-modal { background: var(--surface); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
|
||||||
|
body.theme-modern .repipe-text { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; }
|
||||||
|
body.theme-modern .repipe-btn { border-radius: 8px; border-width: 1px; }
|
||||||
|
body.theme-modern .repipe-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(59,130,246,0.3); }
|
||||||
|
body.theme-modern .repipe-mode { border-radius: 8px; border-width: 1px; }
|
||||||
|
body.theme-modern .repipe-mode.sel { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.3); color: var(--accent2); }
|
||||||
|
body.theme-modern { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; }
|
||||||
|
body.theme-modern .scanlines { display: none; }
|
||||||
|
body.theme-modern .vignette { background: radial-gradient(ellipse at 30% 20%, rgba(59,130,246,0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(139,92,246,0.04) 0%, transparent 50%); }
|
||||||
|
body.theme-modern canvas#bg-grid { display: none; }
|
||||||
|
body.theme-modern .panel, body.theme-modern .output-card, body.theme-modern .stat-box, body.theme-modern .provider-card, body.theme-modern .prov-section { background: var(--surface); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 2px 20px rgba(0,0,0,0.3); }
|
||||||
|
body.theme-modern .panel::before { background: linear-gradient(90deg, transparent, rgba(59,130,246,0.08), transparent); }
|
||||||
|
body.theme-modern .threat-card, body.theme-modern .run-card, body.theme-modern .history-card { background: var(--surface); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 12px rgba(0,0,0,0.2); }
|
||||||
|
body.theme-modern .threat-card.critical { border-color: rgba(239,68,68,0.4); box-shadow: 0 1px 12px rgba(239,68,68,0.08); }
|
||||||
|
body.theme-modern .threat-card.high { border-color: rgba(245,158,11,0.4); }
|
||||||
|
body.theme-modern .enrich-panel { background: rgba(59,130,246,0.04); border: 1px solid rgba(59,130,246,0.12); border-radius: 12px; backdrop-filter: blur(12px); }
|
||||||
|
body.theme-modern .enrich-title { color: var(--accent); }
|
||||||
|
body.theme-modern .threat-summary .ts-box { background: var(--surface); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 12px rgba(0,0,0,0.2); }
|
||||||
|
body.theme-modern .tab, body.theme-modern .back { border-radius: 8px; border-width: 1px; transition: all 0.2s ease; }
|
||||||
|
body.theme-modern .tab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 10px rgba(59,130,246,0.25); }
|
||||||
|
body.theme-modern .tab:hover { background: rgba(59,130,246,0.08); }
|
||||||
|
body.theme-modern .tabs .tab.err { color: var(--red); }
|
||||||
|
body.theme-modern .tabs .tab.err.active { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 2px 10px rgba(239,68,68,0.2); }
|
||||||
|
body.theme-modern .btn, body.theme-modern .ban-btn, body.theme-modern .card-act { border-radius: 8px; border-width: 1px; transition: all 0.2s ease; }
|
||||||
|
body.theme-modern .btn:hover, body.theme-modern .ban-btn:hover, body.theme-modern .card-act:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
|
||||||
|
body.theme-modern .btn-primary, body.theme-modern .login-box .btn { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(59,130,246,0.3); }
|
||||||
|
body.theme-modern .btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,130,246,0.35); }
|
||||||
|
body.theme-modern .btn-g, body.theme-modern .btn-green { color: var(--green); border-color: rgba(34,197,94,0.3); }
|
||||||
|
body.theme-modern .btn-r, body.theme-modern .btn-red { color: var(--red); border-color: rgba(239,68,68,0.3); }
|
||||||
|
body.theme-modern .mode-tab { border-radius: 12px; border-width: 1px; background: rgba(255,255,255,0.03); transition: all 0.2s ease; }
|
||||||
|
body.theme-modern .mode-tab:hover { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.3); transform: translateY(-1px); }
|
||||||
|
body.theme-modern .mode-tab.active { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.4); color: var(--accent2); box-shadow: 0 2px 12px rgba(59,130,246,0.12); }
|
||||||
|
body.theme-modern .mode-tab.crazy { background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.2); }
|
||||||
|
body.theme-modern .mode-tab.crazy.active { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.4); color: #a78bfa; box-shadow: 0 2px 12px rgba(139,92,246,0.12); }
|
||||||
|
body.theme-modern .model-card { border-radius: 10px; border-width: 1px; background: rgba(255,255,255,0.02); transition: all 0.2s ease; }
|
||||||
|
body.theme-modern .model-card:hover { background: rgba(59,130,246,0.04); }
|
||||||
|
body.theme-modern .model-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.06); box-shadow: 0 0 0 1px rgba(59,130,246,0.2); }
|
||||||
|
body.theme-modern .model-card.selected .check { background: var(--accent); border-color: var(--accent); border-radius: 4px; }
|
||||||
|
body.theme-modern .output-card .card-header { border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0; }
|
||||||
|
body.theme-modern .output-card .card-header .role-tag { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); color: var(--accent2); border-radius: 6px; }
|
||||||
|
body.theme-modern .output-card .card-body { border-radius: 0 0 16px 16px; line-height: 1.7; }
|
||||||
|
body.theme-modern .synthesis-card { border-color: var(--accent); box-shadow: 0 2px 20px rgba(59,130,246,0.1); }
|
||||||
|
body.theme-modern .synthesis-card .card-header { background: rgba(59,130,246,0.06); }
|
||||||
|
body.theme-modern .crazy-card { border-color: rgba(139,92,246,0.4); }
|
||||||
|
body.theme-modern .crazy-card .card-header { background: rgba(139,92,246,0.06); }
|
||||||
|
body.theme-modern .progress-panel { background: rgba(24,24,27,0.9); backdrop-filter: blur(24px); border: 1px solid rgba(59,130,246,0.2); border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 40px rgba(59,130,246,0.06); }
|
||||||
|
body.theme-modern .progress-panel.done { border-color: rgba(34,197,94,0.3); box-shadow: 0 4px 24px rgba(34,197,94,0.08); }
|
||||||
|
body.theme-modern .progress-fill { background: linear-gradient(90deg, #3b82f6, #818cf8, #22d3ee); box-shadow: 0 0 12px rgba(59,130,246,0.4); }
|
||||||
|
body.theme-modern .progress-step { background: rgba(59,130,246,0.1); border-radius: 4px; }
|
||||||
|
body.theme-modern .progress-step.done { background: linear-gradient(90deg, #3b82f6, #22c55e); }
|
||||||
|
body.theme-modern .progress-step.active { background: var(--accent); box-shadow: 0 0 8px rgba(59,130,246,0.4); }
|
||||||
|
body.theme-modern .progress-header .prog-mode { color: var(--accent2); }
|
||||||
|
body.theme-modern .progress-header .prog-time { color: var(--text2); }
|
||||||
|
body.theme-modern .progress-detail { color: var(--text2); }
|
||||||
|
body.theme-modern .status-bar { background: var(--surface); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 10px; }
|
||||||
|
body.theme-modern .tag { border-radius: 6px; border-width: 1px; }
|
||||||
|
body.theme-modern .prov-badge { border-radius: 6px; }
|
||||||
|
body.theme-modern .prov-badge.ollama { background: rgba(34,197,94,0.08); color: var(--green); border-color: rgba(34,197,94,0.2); }
|
||||||
|
body.theme-modern .tag-err { background: rgba(239,68,68,0.08); color: var(--red); border-color: rgba(239,68,68,0.15); }
|
||||||
|
body.theme-modern .tag-ok { background: rgba(34,197,94,0.08); color: var(--green); border-color: rgba(34,197,94,0.15); }
|
||||||
|
body.theme-modern .tag-time { background: rgba(59,130,246,0.08); color: var(--accent2); border-color: rgba(59,130,246,0.15); }
|
||||||
|
body.theme-modern .tag-mode { background: rgba(139,92,246,0.08); color: #a78bfa; border-color: rgba(139,92,246,0.15); }
|
||||||
|
body.theme-modern input, body.theme-modern select, body.theme-modern textarea { border-radius: 8px; border-width: 1px; background: rgba(255,255,255,0.04) !important; transition: border-color 0.2s, box-shadow 0.2s; }
|
||||||
|
body.theme-modern input:focus, body.theme-modern textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important; }
|
||||||
|
body.theme-modern header { border-bottom: 1px solid var(--border); }
|
||||||
|
body.theme-modern .login-box { border-radius: 16px; backdrop-filter: blur(24px); box-shadow: 0 4px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset; }
|
||||||
|
body.theme-modern .field input { border-radius: 8px; }
|
||||||
|
body.theme-modern ::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
body.theme-modern ::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-modern ::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
body.theme-modern ::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
.theme-toggle { background: none; border: 2px solid var(--border); border-radius: 2px; padding: 4px 8px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text2); transition: all 0.15s; }
|
||||||
|
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
"""
|
||||||
|
|
||||||
|
THEME_JS = """
|
||||||
|
<script>
|
||||||
|
var _themes = ['dark', 'light', 'reddit', 'modern'];
|
||||||
|
var _themeLabels = {'dark': 'Dark', 'light': 'Light', 'reddit': 'Reddit', 'modern': 'Modern'};
|
||||||
|
function toggleTheme() {
|
||||||
|
var b = document.body;
|
||||||
|
var cur = localStorage.getItem('llm-team-theme') || 'dark';
|
||||||
|
var idx = _themes.indexOf(cur);
|
||||||
|
var next = _themes[(idx + 1) % _themes.length];
|
||||||
|
b.classList.remove('theme-light', 'theme-reddit', 'theme-modern');
|
||||||
|
if (next === 'light') b.classList.add('theme-light');
|
||||||
|
if (next === 'reddit') b.classList.add('theme-reddit');
|
||||||
|
if (next === 'modern') b.classList.add('theme-modern');
|
||||||
|
localStorage.setItem('llm-team-theme', next);
|
||||||
|
var btn = document.getElementById('theme-btn');
|
||||||
|
if (btn) btn.textContent = _themeLabels[next];
|
||||||
|
var c = document.getElementById('bg-grid');
|
||||||
|
if (c) c.style.display = (next === 'dark') ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
document.addEventListener('DOMContentLoaded', function(){
|
||||||
|
var t = localStorage.getItem('llm-team-theme') || 'dark';
|
||||||
|
var btn = document.getElementById('theme-btn');
|
||||||
|
if (btn) btn.textContent = _themeLabels[t];
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
"""
|
||||||
|
|
||||||
|
THEME_TOGGLE_BTN = '<button id="theme-btn" class="theme-toggle" onclick="toggleTheme()">Light</button>'
|
||||||
|
|
||||||
|
|
||||||
def login_required(f):
|
def login_required(f):
|
||||||
@wraps(f)
|
@wraps(f)
|
||||||
def decorated(*args, **kwargs):
|
def decorated(*args, **kwargs):
|
||||||
@ -218,6 +485,27 @@ def security_headers(response):
|
|||||||
response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
|
response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
|
||||||
response.headers["Content-Security-Policy"] = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'"
|
response.headers["Content-Security-Policy"] = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'"
|
||||||
response.headers["Permissions-Policy"] = "camera=(), microphone=(), geolocation=()"
|
response.headers["Permissions-Policy"] = "camera=(), microphone=(), geolocation=()"
|
||||||
|
# Theme injection
|
||||||
|
if response.content_type and "text/html" in response.content_type and response.status_code == 200:
|
||||||
|
try:
|
||||||
|
html = response.get_data(as_text=True)
|
||||||
|
if "</style>" in html and "theme-light" not in html:
|
||||||
|
apply_script = '<script>(function(){var t=localStorage.getItem("llm-team-theme");if(t==="light")document.body.classList.add("theme-light");if(t==="reddit")document.body.classList.add("theme-reddit");if(t==="modern")document.body.classList.add("theme-modern")})()</script>'
|
||||||
|
html = html.replace("</style>", THEME_CSS + "\n</style>", 1)
|
||||||
|
html = html.replace("</head>", THEME_JS + "\n</head>", 1)
|
||||||
|
# Toggle button - inject into header
|
||||||
|
if '<a href="/logout"' in html:
|
||||||
|
html = html.replace('<a href="/logout"', THEME_TOGGLE_BTN + '\n <a href="/logout"', 1)
|
||||||
|
elif '</header>' in html:
|
||||||
|
html = html.replace('</header>', ' ' + THEME_TOGGLE_BTN + '\n</header>', 1)
|
||||||
|
# Body script for early apply
|
||||||
|
if "<body>" in html:
|
||||||
|
html = html.replace("<body>", "<body>" + apply_script, 1)
|
||||||
|
else:
|
||||||
|
html = re.sub(r'(<body[^>]*>)', r'\1' + apply_script, html, count=1)
|
||||||
|
response.set_data(html)
|
||||||
|
except Exception as e:
|
||||||
|
print(f"[THEME ERROR] {e}", flush=True)
|
||||||
if request.path.startswith("/api/"):
|
if request.path.startswith("/api/"):
|
||||||
response.headers["Cache-Control"] = "no-store"
|
response.headers["Cache-Control"] = "no-store"
|
||||||
return response
|
return response
|
||||||
@ -626,12 +914,12 @@ h1 span{color:var(--accent)}
|
|||||||
.run-error{font-size:10px;color:var(--red);border-left:2px solid var(--red);padding-left:8px;margin:4px 0}
|
.run-error{font-size:10px;color:var(--red);border-left:2px solid var(--red);padding-left:8px;margin:4px 0}
|
||||||
.empty{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);padding:40px;text-align:center;opacity:0.5}
|
.empty{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text2);padding:40px;text-align:center;opacity:0.5}
|
||||||
.filter-input{flex:1}
|
.filter-input{flex:1}
|
||||||
.threat-card{background:rgba(0,0,0,0.25);border:2px solid var(--border);border-radius:2px;padding:12px 14px;margin-bottom:6px;display:flex;align-items:flex-start;gap:12px}
|
.threat-card{background:rgba(0,0,0,0.25);border:2px solid var(--border);border-radius:2px;padding:12px 14px;margin-bottom:6px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:start;gap:8px 12px}
|
||||||
.threat-card.critical{border-color:var(--red);background:rgba(224,82,82,0.04)}
|
.threat-card.critical{border-color:var(--red);background:rgba(224,82,82,0.04)}
|
||||||
.threat-card.high{border-color:#f59e0b;background:rgba(245,158,11,0.03)}
|
.threat-card.high{border-color:#f59e0b;background:rgba(245,158,11,0.03)}
|
||||||
.threat-card.banned{opacity:0.5}
|
.threat-card.banned{opacity:0.5}
|
||||||
.threat-ip{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;min-width:130px;color:var(--text)}
|
.threat-ip{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;min-width:130px;color:var(--text)}
|
||||||
.threat-info{flex:1;min-width:0}
|
.threat-info{min-width:0}
|
||||||
.threat-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
|
.threat-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
|
||||||
.threat-paths{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);margin-top:4px}
|
.threat-paths{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);margin-top:4px}
|
||||||
.threat-actions{display:flex;gap:4px;flex-shrink:0}
|
.threat-actions{display:flex;gap:4px;flex-shrink:0}
|
||||||
@ -640,6 +928,17 @@ h1 span{color:var(--accent)}
|
|||||||
.ban-btn.ban:hover{background:rgba(224,82,82,0.1)}
|
.ban-btn.ban:hover{background:rgba(224,82,82,0.1)}
|
||||||
.ban-btn.unban{color:var(--green);border-color:rgba(74,222,128,0.4)}
|
.ban-btn.unban{color:var(--green);border-color:rgba(74,222,128,0.4)}
|
||||||
.ban-btn.unban:hover{background:rgba(74,222,128,0.1)}
|
.ban-btn.unban:hover{background:rgba(74,222,128,0.1)}
|
||||||
|
.enrich-panel{grid-column:1/-1;background:rgba(217,70,239,0.04);border:2px solid rgba(217,70,239,0.2);border-radius:2px;padding:16px;margin-top:4px}
|
||||||
|
.enrich-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(217,70,239,0.1)}
|
||||||
|
.enrich-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
|
||||||
|
.enrich-title{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:2px;color:#d946ef;margin-bottom:8px;font-weight:700}
|
||||||
|
.enrich-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
|
||||||
|
.enrich-field{font-family:'JetBrains Mono',monospace;font-size:10px}
|
||||||
|
.enrich-field .label{color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px}
|
||||||
|
.enrich-field .value{color:#e8e6e3}
|
||||||
|
.enrich-field .value.danger{color:#e05252;font-weight:700}
|
||||||
|
.enrich-field .value.safe{color:#4ade80}
|
||||||
|
.enrich-field.full{grid-column:1/-1}
|
||||||
.threat-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
|
.threat-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
|
||||||
.ts-box{background:rgba(0,0,0,0.3);border:2px solid var(--border);border-radius:2px;padding:12px;text-align:center;backdrop-filter:blur(16px)}
|
.ts-box{background:rgba(0,0,0,0.3);border:2px solid var(--border);border-radius:2px;padding:12px;text-align:center;backdrop-filter:blur(16px)}
|
||||||
.ts-val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
|
.ts-val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700}
|
||||||
@ -1070,11 +1369,9 @@ async function enrichIP(ip, card) {
|
|||||||
if (existing) { existing.remove(); return; }
|
if (existing) { existing.remove(); return; }
|
||||||
var panel = document.createElement('div');
|
var panel = document.createElement('div');
|
||||||
panel.className = 'enrich-panel';
|
panel.className = 'enrich-panel';
|
||||||
panel.style.cssText = 'background:rgba(217,70,239,0.04);border:2px solid rgba(217,70,239,0.2);border-radius:2px;padding:12px;margin-top:8px;grid-column:1/-1';
|
|
||||||
panel.textContent = '';
|
|
||||||
var loading = document.createElement('div');
|
var loading = document.createElement('div');
|
||||||
loading.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#d946ef';
|
loading.className = 'enrich-title';
|
||||||
loading.textContent = 'Enriching ' + ip + '... (geo + AI analysis)';
|
loading.textContent = 'Enriching ' + ip + '... (geo + web-check + AI analysis)';
|
||||||
panel.appendChild(loading);
|
panel.appendChild(loading);
|
||||||
card.appendChild(panel);
|
card.appendChild(panel);
|
||||||
|
|
||||||
@ -1086,191 +1383,148 @@ async function enrichIP(ip, card) {
|
|||||||
var d = await r.json();
|
var d = await r.json();
|
||||||
panel.textContent = '';
|
panel.textContent = '';
|
||||||
|
|
||||||
|
// Helper to build a field
|
||||||
|
function mkField(label, value, cls, full) {
|
||||||
|
var box = document.createElement('div');
|
||||||
|
box.className = 'enrich-field' + (full ? ' full' : '');
|
||||||
|
var l = document.createElement('span'); l.className = 'label'; l.textContent = label + ': ';
|
||||||
|
var v = document.createElement('span'); v.className = 'value' + (cls ? ' ' + cls : ''); v.textContent = value;
|
||||||
|
box.appendChild(l); box.appendChild(v);
|
||||||
|
return box;
|
||||||
|
}
|
||||||
|
|
||||||
// Geo section
|
// Geo section
|
||||||
if (d.geo && !d.geo.error) {
|
if (d.geo && !d.geo.error) {
|
||||||
var g = d.geo;
|
var g = d.geo;
|
||||||
var geoDiv = document.createElement('div');
|
var sec = document.createElement('div'); sec.className = 'enrich-section';
|
||||||
geoDiv.style.cssText = 'margin-bottom:10px';
|
var t = document.createElement('div'); t.className = 'enrich-title'; t.textContent = 'Geolocation + Network'; sec.appendChild(t);
|
||||||
var gTitle = document.createElement('div');
|
var grid = document.createElement('div'); grid.className = 'enrich-grid';
|
||||||
gTitle.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#d946ef;margin-bottom:6px;font-weight:700';
|
grid.appendChild(mkField('Location', (g.city||'?')+', '+(g.regionName||'?')+', '+(g.country||'?')));
|
||||||
gTitle.textContent = 'Geolocation + Network';
|
grid.appendChild(mkField('ISP', g.isp||'?'));
|
||||||
geoDiv.appendChild(gTitle);
|
grid.appendChild(mkField('Org', g.org||'?'));
|
||||||
var gGrid = document.createElement('div');
|
grid.appendChild(mkField('AS', g.as||'?'));
|
||||||
gGrid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px';
|
grid.appendChild(mkField('Proxy', g.proxy ? 'YES' : 'No', g.proxy ? 'danger' : 'safe'));
|
||||||
var fields = [
|
grid.appendChild(mkField('Hosting', g.hosting ? 'YES' : 'No', g.hosting ? 'danger' : 'safe'));
|
||||||
['Location', (g.city||'?')+', '+(g.regionName||'?')+', '+(g.country||'?')],
|
grid.appendChild(mkField('Mobile', g.mobile ? 'YES' : 'No'));
|
||||||
['ISP', g.isp||'?'],
|
grid.appendChild(mkField('Timezone', g.timezone||'?'));
|
||||||
['Org', g.org||'?'],
|
sec.appendChild(grid);
|
||||||
['AS', g.as||'?'],
|
panel.appendChild(sec);
|
||||||
['Proxy', g.proxy ? 'YES' : 'No'],
|
|
||||||
['Hosting', g.hosting ? 'YES' : 'No'],
|
|
||||||
['Mobile', g.mobile ? 'YES' : 'No'],
|
|
||||||
['Timezone', g.timezone||'?']
|
|
||||||
];
|
|
||||||
fields.forEach(function(f){
|
|
||||||
var box = document.createElement('div');
|
|
||||||
box.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px';
|
|
||||||
var label = document.createElement('span'); label.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
|
||||||
label.textContent = f[0] + ': ';
|
|
||||||
var val = document.createElement('span');
|
|
||||||
val.style.color = (f[0]==='Proxy'&&g.proxy)||(f[0]==='Hosting'&&g.hosting) ? '#e05252' : '#e8e6e3';
|
|
||||||
val.textContent = f[1];
|
|
||||||
box.appendChild(label); box.appendChild(val);
|
|
||||||
gGrid.appendChild(box);
|
|
||||||
});
|
|
||||||
geoDiv.appendChild(gGrid);
|
|
||||||
panel.appendChild(geoDiv);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Web-Check section (ports, blocklists)
|
// Web-Check section
|
||||||
if (d.webcheck) {
|
if (d.webcheck && Object.keys(d.webcheck).length) {
|
||||||
var wcDiv = document.createElement('div');
|
var sec = document.createElement('div'); sec.className = 'enrich-section';
|
||||||
wcDiv.style.cssText = 'margin-bottom:10px';
|
var t = document.createElement('div'); t.className = 'enrich-title'; t.textContent = 'Deep Scan (web-check)'; sec.appendChild(t);
|
||||||
var wcTitle = document.createElement('div');
|
var grid = document.createElement('div'); grid.className = 'enrich-grid';
|
||||||
wcTitle.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#d946ef;margin-bottom:6px;font-weight:700';
|
|
||||||
wcTitle.textContent = 'Deep Scan (web-check)';
|
|
||||||
wcDiv.appendChild(wcTitle);
|
|
||||||
var wcGrid = document.createElement('div');
|
|
||||||
wcGrid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px';
|
|
||||||
|
|
||||||
// Open ports
|
|
||||||
if (d.webcheck.ports && d.webcheck.ports.openPorts) {
|
if (d.webcheck.ports && d.webcheck.ports.openPorts) {
|
||||||
var ports = d.webcheck.ports.openPorts;
|
var ports = d.webcheck.ports.openPorts;
|
||||||
var pBox = document.createElement('div'); pBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px';
|
grid.appendChild(mkField('Open Ports', ports.length ? ports.join(', ') : 'none found', ports.length ? 'danger' : 'safe'));
|
||||||
var pLabel = document.createElement('span'); pLabel.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
}
|
||||||
pLabel.textContent = 'Open Ports: ';
|
|
||||||
var pVal = document.createElement('span'); pVal.style.cssText = 'color:#e05252;font-weight:700';
|
if (d.webcheck.status && !d.webcheck.status.error) {
|
||||||
pVal.textContent = ports.length ? ports.join(', ') : 'none found';
|
var st = d.webcheck.status;
|
||||||
pBox.appendChild(pLabel); pBox.appendChild(pVal); wcGrid.appendChild(pBox);
|
grid.appendChild(mkField('HTTP Status', st.statusCode ? st.statusCode + ' (' + (st.responseTime ? Math.round(st.responseTime) : '?') + 'ms)' : 'No HTTP'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blocklists
|
|
||||||
if (d.webcheck.block_lists && d.webcheck.block_lists.blocklists) {
|
if (d.webcheck.block_lists && d.webcheck.block_lists.blocklists) {
|
||||||
var bls = d.webcheck.block_lists.blocklists;
|
var bls = d.webcheck.block_lists.blocklists;
|
||||||
var blocked = bls.filter(function(b){return b.isBlocked});
|
var blocked = bls.filter(function(b){return b.isBlocked});
|
||||||
var clean = bls.filter(function(b){return !b.isBlocked});
|
var blText = blocked.length
|
||||||
var bBox = document.createElement('div'); bBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;grid-column:1/-1';
|
|
||||||
var bLabel = document.createElement('span'); bLabel.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
|
||||||
bLabel.textContent = 'Blocklists: ';
|
|
||||||
var bVal = document.createElement('span');
|
|
||||||
bVal.style.cssText = 'color:' + (blocked.length ? '#e05252' : '#4ade80');
|
|
||||||
bVal.textContent = blocked.length
|
|
||||||
? blocked.length + '/' + bls.length + ' blocked (' + blocked.map(function(b){return b.server}).join(', ') + ')'
|
? blocked.length + '/' + bls.length + ' blocked (' + blocked.map(function(b){return b.server}).join(', ') + ')'
|
||||||
: 'Clean on all ' + bls.length + ' lists';
|
: 'Clean on all ' + bls.length + ' lists';
|
||||||
bBox.appendChild(bLabel); bBox.appendChild(bVal); wcGrid.appendChild(bBox);
|
grid.appendChild(mkField('Blocklists', blText, blocked.length ? 'danger' : 'safe', true));
|
||||||
}
|
}
|
||||||
|
|
||||||
// DNS
|
|
||||||
if (d.webcheck.dns) {
|
if (d.webcheck.dns) {
|
||||||
var dns = d.webcheck.dns;
|
var ptr = d.webcheck.dns.PTR && d.webcheck.dns.PTR.length ? d.webcheck.dns.PTR.join(', ') : 'none';
|
||||||
var ptr = dns.PTR && dns.PTR.length ? dns.PTR.join(', ') : 'none';
|
grid.appendChild(mkField('Reverse DNS', ptr, null, true));
|
||||||
var dBox = document.createElement('div'); dBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;grid-column:1/-1';
|
|
||||||
var dLabel = document.createElement('span'); dLabel.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
|
||||||
dLabel.textContent = 'Reverse DNS: ';
|
|
||||||
var dVal = document.createElement('span'); dVal.style.color = '#e8e6e3';
|
|
||||||
dVal.textContent = ptr;
|
|
||||||
dBox.appendChild(dLabel); dBox.appendChild(dVal); wcGrid.appendChild(dBox);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Traceroute
|
|
||||||
if (d.webcheck.trace_route && d.webcheck.trace_route.result) {
|
|
||||||
var hops = d.webcheck.trace_route.result.filter(function(h){return typeof h === 'object' && h !== null});
|
|
||||||
if (hops.length) {
|
|
||||||
var trBox = document.createElement('div'); trBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;grid-column:1/-1;margin-top:4px';
|
|
||||||
var trLabel = document.createElement('span'); trLabel.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
|
||||||
trLabel.textContent = 'Traceroute (' + hops.length + ' hops): ';
|
|
||||||
trBox.appendChild(trLabel);
|
|
||||||
var trVal = document.createElement('div');
|
|
||||||
trVal.style.cssText = 'color:#e8e6e3;margin-top:4px;display:flex;flex-wrap:wrap;gap:2px;align-items:center';
|
|
||||||
hops.forEach(function(h, i) {
|
|
||||||
var hopIp = Object.keys(h)[0];
|
|
||||||
var latency = h[hopIp] ? h[hopIp][0] : '?';
|
|
||||||
var chip = document.createElement('span');
|
|
||||||
chip.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid #2a2d35;border-radius:2px;padding:2px 6px;font-size:9px;white-space:nowrap';
|
|
||||||
chip.textContent = hopIp + ' (' + (typeof latency === 'number' ? latency.toFixed(0) + 'ms' : '?') + ')';
|
|
||||||
trVal.appendChild(chip);
|
|
||||||
if (i < hops.length - 1) {
|
|
||||||
var arrow = document.createElement('span'); arrow.style.cssText = 'color:#7a7872;font-size:8px';
|
|
||||||
arrow.textContent = '→'; trVal.appendChild(arrow);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
trBox.appendChild(trVal);
|
|
||||||
wcGrid.appendChild(trBox);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// HTTP Status/Headers if available
|
|
||||||
if (d.webcheck.status && !d.webcheck.status.error) {
|
|
||||||
var st = d.webcheck.status;
|
|
||||||
var stBox = document.createElement('div'); stBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px';
|
|
||||||
var stLabel = document.createElement('span'); stLabel.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
|
||||||
stLabel.textContent = 'HTTP Status: ';
|
|
||||||
var stVal = document.createElement('span'); stVal.style.color = '#e8e6e3';
|
|
||||||
stVal.textContent = st.statusCode ? st.statusCode + ' (' + (st.responseTime||'?') + 'ms)' : 'No HTTP';
|
|
||||||
stBox.appendChild(stLabel); stBox.appendChild(stVal); wcGrid.appendChild(stBox);
|
|
||||||
}
|
|
||||||
if (d.webcheck.headers && !d.webcheck.headers.error) {
|
if (d.webcheck.headers && !d.webcheck.headers.error) {
|
||||||
var hdrs = d.webcheck.headers;
|
var hdrs = d.webcheck.headers;
|
||||||
var hdrKeys = Object.keys(hdrs).filter(function(k){return typeof hdrs[k] === 'string'}).slice(0,6);
|
var hdrKeys = Object.keys(hdrs).filter(function(k){return typeof hdrs[k] === 'string'}).slice(0,6);
|
||||||
if (hdrKeys.length) {
|
if (hdrKeys.length) {
|
||||||
var hBox = document.createElement('div'); hBox.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:9px;grid-column:1/-1;color:#7a7872;margin-top:2px';
|
grid.appendChild(mkField('Headers', hdrKeys.map(function(k){return k+': '+hdrs[k].substring(0,40)}).join(' | '), null, true));
|
||||||
hBox.textContent = 'Headers: ' + hdrKeys.map(function(k){return k+': '+hdrs[k].substring(0,40)}).join(' | ');
|
|
||||||
wcGrid.appendChild(hBox);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
wcDiv.appendChild(wcGrid);
|
sec.appendChild(grid);
|
||||||
panel.appendChild(wcDiv);
|
|
||||||
|
// Traceroute as its own visual block
|
||||||
|
if (d.webcheck.trace_route && d.webcheck.trace_route.result) {
|
||||||
|
var hops = d.webcheck.trace_route.result.filter(function(h){return typeof h === 'object' && h !== null});
|
||||||
|
if (hops.length) {
|
||||||
|
var trWrap = document.createElement('div');
|
||||||
|
trWrap.style.cssText = 'margin-top:10px';
|
||||||
|
var trLabel = document.createElement('div'); trLabel.className = 'label';
|
||||||
|
trLabel.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#7a7872;margin-bottom:6px';
|
||||||
|
trLabel.textContent = 'Traceroute (' + hops.length + ' hops)';
|
||||||
|
trWrap.appendChild(trLabel);
|
||||||
|
var trVal = document.createElement('div');
|
||||||
|
trVal.style.cssText = 'display:flex;flex-wrap:wrap;gap:3px;align-items:center';
|
||||||
|
hops.forEach(function(h, i) {
|
||||||
|
var hopIp = Object.keys(h)[0];
|
||||||
|
var latency = h[hopIp] ? h[hopIp][0] : '?';
|
||||||
|
var chip = document.createElement('span');
|
||||||
|
chip.style.cssText = 'background:rgba(0,0,0,0.3);border:1px solid #2a2d35;border-radius:2px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:9px;white-space:nowrap;color:#e8e6e3';
|
||||||
|
chip.textContent = hopIp + ' (' + (typeof latency === 'number' ? latency.toFixed(0) + 'ms' : '?') + ')';
|
||||||
|
trVal.appendChild(chip);
|
||||||
|
if (i < hops.length - 1) {
|
||||||
|
var arrow = document.createElement('span'); arrow.style.cssText = 'color:#7a7872;font-size:8px';
|
||||||
|
arrow.textContent = ' → '; trVal.appendChild(arrow);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
trWrap.appendChild(trVal);
|
||||||
|
sec.appendChild(trWrap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
panel.appendChild(sec);
|
||||||
}
|
}
|
||||||
|
|
||||||
// AI Analysis section
|
// AI Analysis section
|
||||||
if (d.ai_analysis && !d.ai_analysis.error) {
|
if (d.ai_analysis && !d.ai_analysis.error) {
|
||||||
var ai = d.ai_analysis;
|
var ai = d.ai_analysis;
|
||||||
var aiDiv = document.createElement('div');
|
var sec = document.createElement('div'); sec.className = 'enrich-section';
|
||||||
var aTitle = document.createElement('div');
|
var t = document.createElement('div'); t.className = 'enrich-title'; t.textContent = 'AI Threat Analysis (' + d.log_count + ' log entries)'; sec.appendChild(t);
|
||||||
aTitle.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:8px;text-transform:uppercase;letter-spacing:2px;color:#d946ef;margin-bottom:6px;font-weight:700';
|
|
||||||
aTitle.textContent = 'AI Threat Analysis (' + d.log_count + ' log entries)';
|
|
||||||
aiDiv.appendChild(aTitle);
|
|
||||||
|
|
||||||
var threatColor = {'critical':'#e05252','high':'#f59e0b','medium':'#e2b55a','low':'#7a7872','none':'#4ade80'};
|
var threatColor = {'critical':'#e05252','high':'#f59e0b','medium':'#e2b55a','low':'#7a7872','none':'#4ade80'};
|
||||||
var summaryDiv = document.createElement('div');
|
var grid = document.createElement('div'); grid.className = 'enrich-grid';
|
||||||
summaryDiv.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:8px';
|
|
||||||
[
|
[
|
||||||
['Threat', ai.threat_level||'?', threatColor[ai.threat_level]||'#7a7872'],
|
['Threat', ai.threat_level||'?', threatColor[ai.threat_level]||'#7a7872'],
|
||||||
['Type', ai.classification||'?', '#c084fc'],
|
['Type', ai.classification||'?', '#c084fc'],
|
||||||
['Confidence', ((ai.confidence||0)*100).toFixed(0)+'%', '#e2b55a'],
|
['Confidence', ((ai.confidence||0)*100).toFixed(0)+'%', '#e2b55a'],
|
||||||
['Automated', ai.likely_automated?'YES':'No', ai.likely_automated?'#e05252':'#4ade80']
|
['Automated', ai.likely_automated?'YES':'No', ai.likely_automated?'#e05252':'#4ade80']
|
||||||
].forEach(function(f){
|
].forEach(function(f){
|
||||||
var box = document.createElement('div'); box.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px';
|
var box = document.createElement('div'); box.className = 'enrich-field';
|
||||||
var label = document.createElement('span'); label.style.cssText = 'color:#7a7872;font-size:8px;text-transform:uppercase;letter-spacing:1px';
|
var l = document.createElement('span'); l.className = 'label'; l.textContent = f[0] + ': ';
|
||||||
label.textContent = f[0] + ': ';
|
var v = document.createElement('span'); v.className = 'value'; v.style.cssText = 'font-weight:700;color:'+f[2]; v.textContent = f[1];
|
||||||
var val = document.createElement('span'); val.style.cssText = 'font-weight:700;color:'+f[2];
|
box.appendChild(l); box.appendChild(v); grid.appendChild(box);
|
||||||
val.textContent = f[1];
|
|
||||||
box.appendChild(label); box.appendChild(val); summaryDiv.appendChild(box);
|
|
||||||
});
|
});
|
||||||
aiDiv.appendChild(summaryDiv);
|
sec.appendChild(grid);
|
||||||
|
|
||||||
if (ai.summary) {
|
if (ai.summary) {
|
||||||
var summ = document.createElement('div');
|
var summ = document.createElement('div');
|
||||||
summ.style.cssText = 'font-size:11px;color:#e8e6e3;margin-bottom:6px;line-height:1.5';
|
summ.style.cssText = 'font-size:11px;color:#e8e6e3;margin-top:10px;line-height:1.6';
|
||||||
summ.textContent = ai.summary; aiDiv.appendChild(summ);
|
summ.textContent = ai.summary; sec.appendChild(summ);
|
||||||
}
|
}
|
||||||
if (ai.pattern) {
|
if (ai.pattern) {
|
||||||
var pat = document.createElement('div');
|
var pat = document.createElement('div');
|
||||||
pat.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#c084fc;margin-bottom:6px';
|
pat.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#c084fc;margin-top:6px';
|
||||||
pat.textContent = 'Pattern: ' + ai.pattern; aiDiv.appendChild(pat);
|
pat.textContent = 'Pattern: ' + ai.pattern; sec.appendChild(pat);
|
||||||
}
|
}
|
||||||
if (ai.indicators && ai.indicators.length) {
|
if (ai.indicators && ai.indicators.length) {
|
||||||
var indDiv = document.createElement('div');
|
var indDiv = document.createElement('div');
|
||||||
indDiv.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:9px;color:#7a7872;margin-bottom:6px';
|
indDiv.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:9px;color:#7a7872;margin-top:6px';
|
||||||
indDiv.textContent = 'Indicators: ' + ai.indicators.join(' | '); aiDiv.appendChild(indDiv);
|
indDiv.textContent = 'Indicators: ' + ai.indicators.join(' | '); sec.appendChild(indDiv);
|
||||||
}
|
}
|
||||||
if (ai.recommendation) {
|
if (ai.recommendation) {
|
||||||
var rec = document.createElement('div');
|
var rec = document.createElement('div');
|
||||||
rec.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#4ade80;border-left:2px solid #4ade80;padding-left:8px;margin-top:4px';
|
rec.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#4ade80;border-left:2px solid #4ade80;padding-left:8px;margin-top:8px';
|
||||||
rec.textContent = 'Recommendation: ' + ai.recommendation; aiDiv.appendChild(rec);
|
rec.textContent = 'Recommendation: ' + ai.recommendation; sec.appendChild(rec);
|
||||||
}
|
}
|
||||||
panel.appendChild(aiDiv);
|
panel.appendChild(sec);
|
||||||
} else if (d.ai_analysis && d.ai_analysis.error) {
|
} else if (d.ai_analysis && d.ai_analysis.error) {
|
||||||
var errDiv = document.createElement('div');
|
var errDiv = document.createElement('div');
|
||||||
errDiv.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#e05252';
|
errDiv.style.cssText = 'font-family:JetBrains Mono,monospace;font-size:10px;color:#e05252';
|
||||||
@ -1594,7 +1848,8 @@ HTML = r"""
|
|||||||
.run-btn:hover { background: var(--accent2); box-shadow: 0 0 24px rgba(226,181,90,0.2), 0 0 60px rgba(226,181,90,0.06); transform: translateY(-1px); }
|
.run-btn:hover { background: var(--accent2); box-shadow: 0 0 24px rgba(226,181,90,0.2), 0 0 60px rgba(226,181,90,0.06); transform: translateY(-1px); }
|
||||||
.run-btn:active { transform: translateY(0); }
|
.run-btn:active { transform: translateY(0); }
|
||||||
.run-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
|
.run-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
|
||||||
.output-area { display: flex; flex-direction: column; gap: 10px; }
|
.run-btn { margin-bottom: 8px; }
|
||||||
|
.output-area { display: flex; flex-direction: column; gap: 10px; padding-bottom: 40px; }
|
||||||
.output-card { background: rgba(0,0,0,0.25); border: 2px solid var(--border); border-radius: 2px; overflow: hidden; backdrop-filter: blur(8px); }
|
.output-card { background: rgba(0,0,0,0.25); border: 2px solid var(--border); border-radius: 2px; overflow: hidden; backdrop-filter: blur(8px); }
|
||||||
.output-card .card-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 2px solid var(--border); font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
|
.output-card .card-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 2px solid var(--border); font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
|
||||||
.output-card .card-header .dot { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
|
.output-card .card-header .dot { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
|
||||||
@ -1644,19 +1899,20 @@ HTML = r"""
|
|||||||
.sample-chip { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 2px; padding: 6px 12px; font-size: 11px; color: var(--text2); cursor: pointer; transition: all 0.15s; line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
.sample-chip { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 2px; padding: 6px 12px; font-size: 11px; color: var(--text2); cursor: pointer; transition: all 0.15s; line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
.sample-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--glow); }
|
.sample-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--glow); }
|
||||||
.sample-chip .chip-level { font-size: 8px; font-weight: 700; text-transform: uppercase; margin-right: 6px; opacity: 0.5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
|
.sample-chip .chip-level { font-size: 8px; font-weight: 700; text-transform: uppercase; margin-right: 6px; opacity: 0.5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; }
|
||||||
.empty-state { text-align: center; padding: 80px 20px; color: var(--text2); }
|
.empty-state { text-align: center; padding: 120px 20px; color: var(--text2); }
|
||||||
.empty-state .icon { font-size: 32px; margin-bottom: 16px; opacity: 0.2; }
|
.empty-state .icon { font-size: 28px; margin-bottom: 16px; opacity: 0.15; letter-spacing: 8px; }
|
||||||
.empty-state p { font-size: 12px; line-height: 1.6; max-width: 280px; margin: 0 auto; font-family: 'JetBrains Mono', monospace; }
|
.empty-state p { font-size: 12px; line-height: 1.6; max-width: 280px; margin: 0 auto; font-family: 'JetBrains Mono', monospace; }
|
||||||
.empty-state p strong { color: var(--accent); font-weight: 600; }
|
.empty-state p strong { color: var(--accent); font-weight: 600; }
|
||||||
|
.output-area { min-height: 400px; }
|
||||||
.mode-desc { background: rgba(0,0,0,0.25); border-left: 2px solid var(--accent); border-radius: 0; padding: 10px 14px; font-size: 11px; color: var(--text2); margin-bottom: 14px; line-height: 1.5; font-family: 'JetBrains Mono', monospace; }
|
.mode-desc { background: rgba(0,0,0,0.25); border-left: 2px solid var(--accent); border-radius: 0; padding: 10px 14px; font-size: 11px; color: var(--text2); margin-bottom: 14px; line-height: 1.5; font-family: 'JetBrains Mono', monospace; }
|
||||||
.left-scroll { max-height: calc(100vh - 72px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
|
.left-scroll { max-height: calc(100vh - 72px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
|
||||||
.left-scroll::-webkit-scrollbar { width: 3px; }
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||||
.left-scroll::-webkit-scrollbar-track { background: transparent; }
|
::-webkit-scrollbar-track { background: transparent; }
|
||||||
.left-scroll::-webkit-scrollbar-thumb { background: rgba(226,181,90,0.15); border-radius: 0; }
|
::-webkit-scrollbar-thumb { background: rgba(226,181,90,0.18); border-radius: 4px; }
|
||||||
.left-scroll::-webkit-scrollbar-thumb:hover { background: rgba(226,181,90,0.3); }
|
::-webkit-scrollbar-thumb:hover { background: rgba(226,181,90,0.35); }
|
||||||
.output-card .card-body::-webkit-scrollbar { width: 3px; }
|
::-webkit-scrollbar-corner { background: transparent; }
|
||||||
.output-card .card-body::-webkit-scrollbar-track { background: transparent; }
|
.left-scroll::-webkit-scrollbar { width: 4px; }
|
||||||
.output-card .card-body::-webkit-scrollbar-thumb { background: rgba(226,181,90,0.15); border-radius: 0; }
|
.output-card .card-body::-webkit-scrollbar { width: 4px; }
|
||||||
.m-toggle { display: none; }
|
.m-toggle { display: none; }
|
||||||
.m-collapse { display: block !important; }
|
.m-collapse { display: block !important; }
|
||||||
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
|
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user