967b094a9e
Swap generic icons for more descriptive alternatives (Network, Wrench, FileOutput, Library, Code2, Lightbulb) and assign each nav item a unique semantic color for instant visual landmarks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
735 lines
36 KiB
HTML
735 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>ResolutionFlow — Sidebar Icon Concepts (Refined)</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #101114;
|
||
--card: #17191d;
|
||
--fg: #f8fafc;
|
||
--fg-muted: #8891a0;
|
||
--fg-dim: #5a6170;
|
||
--border: rgba(255,255,255,0.06);
|
||
--border-hover: rgba(255,255,255,0.12);
|
||
--cyan-500: #06b6d4;
|
||
--cyan-400: #22d3ee;
|
||
--sidebar-hover: #212329;
|
||
--sidebar-active: rgba(6,182,212,0.10);
|
||
--glass-bg: rgba(22,24,28,0.55);
|
||
--glass-blur: blur(16px);
|
||
--amber: #f59e0b; --amber-soft: rgba(245,158,11,0.12);
|
||
--emerald: #34d399; --emerald-soft: rgba(52,211,153,0.12);
|
||
--violet: #a78bfa; --violet-soft: rgba(167,139,250,0.12);
|
||
--rose: #fb7185; --rose-soft: rgba(251,113,133,0.12);
|
||
--blue: #60a5fa; --blue-soft: rgba(96,165,250,0.12);
|
||
--orange: #fb923c; --orange-soft: rgba(251,146,60,0.12);
|
||
--teal: #2dd4bf; --teal-soft: rgba(45,212,191,0.12);
|
||
--sky: #38bdf8; --sky-soft: rgba(56,189,248,0.12);
|
||
--lime: #a3e635; --lime-soft: rgba(163,230,53,0.12);
|
||
--indigo: #818cf8; --indigo-soft: rgba(129,140,248,0.12);
|
||
--fuchsia: #e879f9; --fuchsia-soft: rgba(232,121,249,0.12);
|
||
}
|
||
|
||
body {
|
||
font-family: 'IBM Plex Sans', system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
min-height: 100vh;
|
||
padding: 40px;
|
||
}
|
||
|
||
h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; margin-bottom: 6px; }
|
||
h1 span { color: var(--cyan-400); }
|
||
.subtitle { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 48px; max-width: 780px; line-height: 1.6; }
|
||
|
||
/* ── Section headers ── */
|
||
.section-header {
|
||
margin-bottom: 24px;
|
||
margin-top: 56px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.section-header:first-of-type { margin-top: 0; }
|
||
.section-header h2 {
|
||
font-family: 'Bricolage Grotesque', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1.5rem;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.section-header p { font-size: 0.8125rem; color: var(--fg-dim); line-height: 1.5; }
|
||
|
||
/* ── Grid of variants ── */
|
||
.variants-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
max-width: 1200px;
|
||
}
|
||
@media (max-width: 1000px) { .variants-grid { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 680px) { .variants-grid { grid-template-columns: 1fr; } }
|
||
|
||
.variant {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: var(--glass-blur);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
transition: border-color 300ms, box-shadow 300ms;
|
||
}
|
||
.variant:hover { border-color: var(--border-hover); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
|
||
|
||
.variant-header {
|
||
padding: 16px 20px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.variant-tag {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.5625rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--cyan-400);
|
||
margin-bottom: 4px;
|
||
}
|
||
.variant-title {
|
||
font-family: 'Bricolage Grotesque', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 2px;
|
||
}
|
||
.variant-desc { font-size: 0.75rem; color: var(--fg-dim); line-height: 1.4; }
|
||
|
||
/* ── Sidebar simulation ── */
|
||
.sidebar-sim { padding: 8px 12px; }
|
||
.nav-section-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.5625rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--fg-dim);
|
||
padding: 10px 12px 4px;
|
||
}
|
||
.nav-item {
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 8px 12px; border-radius: 10px;
|
||
font-size: 0.8125rem; font-weight: 500;
|
||
color: var(--fg-muted); cursor: pointer;
|
||
transition: all 150ms ease; position: relative;
|
||
}
|
||
.nav-item:hover { background: var(--sidebar-hover); color: var(--fg); }
|
||
.nav-item.active { background: var(--sidebar-active); color: var(--fg); }
|
||
.nav-item .badge {
|
||
margin-left: auto;
|
||
font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem;
|
||
color: var(--fg-dim); background: var(--card);
|
||
border: 1px solid var(--border); padding: 1px 8px; border-radius: 9999px;
|
||
}
|
||
.nav-item.active::before {
|
||
content: ''; position: absolute; left: 0; top: 50%;
|
||
transform: translateY(-50%); width: 3px; height: 24px;
|
||
border-radius: 0 4px 4px 0;
|
||
background: linear-gradient(135deg, var(--cyan-500), var(--cyan-400));
|
||
}
|
||
|
||
/* ── Icon wrap ── */
|
||
.icon-wrap {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 20px; height: 20px; flex-shrink: 0; position: relative;
|
||
}
|
||
.icon-wrap svg {
|
||
width: 18px; height: 18px; stroke-width: 1.75;
|
||
fill: none; stroke: currentColor;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
/* ── CONCEPT 1: Semantic Colored Icons ── */
|
||
.c1 .icon-wrap { transition: transform 150ms ease; }
|
||
.c1 .nav-item:hover .icon-wrap { transform: scale(1.1); }
|
||
.c1 .ic-dashboard svg { stroke: var(--cyan-400); }
|
||
.c1 .ic-flows svg { stroke: var(--violet); }
|
||
.c1 .ic-editor svg { stroke: var(--amber); }
|
||
.c1 .ic-sessions svg { stroke: var(--emerald); }
|
||
.c1 .ic-exports svg { stroke: var(--blue); }
|
||
.c1 .ic-ai svg { stroke: var(--fuchsia); }
|
||
.c1 .ic-steplib svg { stroke: var(--orange); }
|
||
.c1 .ic-scripts svg { stroke: var(--teal); }
|
||
.c1 .ic-kb svg { stroke: var(--rose); }
|
||
.c1 .ic-analytics svg{ stroke: var(--sky); }
|
||
|
||
/* ── CONCEPT 2: Tinted Pill Backgrounds ── */
|
||
.c2 .icon-wrap {
|
||
width: 28px; height: 28px; border-radius: 8px;
|
||
transition: transform 150ms ease, box-shadow 200ms ease;
|
||
}
|
||
.c2 .nav-item:hover .icon-wrap { transform: scale(1.08); }
|
||
.c2 .icon-wrap svg { width: 16px; height: 16px; }
|
||
|
||
.c2 .ic-dashboard .icon-wrap { background: rgba(6,182,212,0.12); }
|
||
.c2 .ic-dashboard svg { stroke: var(--cyan-400); }
|
||
.c2 .ic-flows .icon-wrap { background: var(--violet-soft); }
|
||
.c2 .ic-flows svg { stroke: var(--violet); }
|
||
.c2 .ic-editor .icon-wrap { background: var(--amber-soft); }
|
||
.c2 .ic-editor svg { stroke: var(--amber); }
|
||
.c2 .ic-sessions .icon-wrap { background: var(--emerald-soft); }
|
||
.c2 .ic-sessions svg { stroke: var(--emerald); }
|
||
.c2 .ic-exports .icon-wrap { background: var(--blue-soft); }
|
||
.c2 .ic-exports svg { stroke: var(--blue); }
|
||
.c2 .ic-ai .icon-wrap { background: var(--fuchsia-soft); }
|
||
.c2 .ic-ai svg { stroke: var(--fuchsia); }
|
||
.c2 .ic-steplib .icon-wrap { background: var(--orange-soft); }
|
||
.c2 .ic-steplib svg { stroke: var(--orange); }
|
||
.c2 .ic-scripts .icon-wrap { background: var(--teal-soft); }
|
||
.c2 .ic-scripts svg { stroke: var(--teal); }
|
||
.c2 .ic-kb .icon-wrap { background: var(--rose-soft); }
|
||
.c2 .ic-kb svg { stroke: var(--rose); }
|
||
.c2 .ic-analytics .icon-wrap { background: var(--sky-soft); }
|
||
.c2 .ic-analytics svg { stroke: var(--sky); }
|
||
|
||
.c2 .nav-item.active.ic-dashboard .icon-wrap { box-shadow: 0 0 12px rgba(6,182,212,0.3); }
|
||
.c2 .nav-item.active.ic-sessions .icon-wrap { box-shadow: 0 0 12px rgba(52,211,153,0.3); }
|
||
.c2 .nav-item.active.ic-flows .icon-wrap { box-shadow: 0 0 12px rgba(167,139,250,0.3); }
|
||
|
||
/* ── Icon label under each nav section ── */
|
||
.icon-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.5rem;
|
||
color: var(--fg-dim);
|
||
opacity: 0.5;
|
||
margin-left: auto;
|
||
white-space: nowrap;
|
||
}
|
||
.nav-item:hover .icon-label { opacity: 0.8; }
|
||
|
||
/* ── Comparison table ── */
|
||
.comparison {
|
||
margin-top: 56px;
|
||
max-width: 1200px;
|
||
}
|
||
.comparison h2 {
|
||
font-family: 'Bricolage Grotesque', sans-serif;
|
||
font-weight: 700; font-size: 1.25rem;
|
||
letter-spacing: -0.02em; margin-bottom: 16px;
|
||
}
|
||
.comp-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.8125rem;
|
||
}
|
||
.comp-table th {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 0.625rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--fg-dim);
|
||
text-align: left;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.comp-table td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
color: var(--fg-muted);
|
||
vertical-align: top;
|
||
}
|
||
.comp-table td:first-child {
|
||
color: var(--fg);
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
.comp-table .current { color: var(--fg-dim); }
|
||
.comp-table .pick { color: var(--cyan-400); font-weight: 500; }
|
||
.comp-table .alt { color: var(--fg-muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Sidebar Icons — <span>Style × Shape Matrix</span></h1>
|
||
<p class="subtitle">
|
||
Concept 1 (Semantic Colors) and Concept 2 (Tinted Pills) shown with 3 different icon sets each.
|
||
<strong>Current</strong> = existing Lucide icons, <strong>Set A</strong> = more descriptive/metaphorical icons,
|
||
<strong>Set B</strong> = minimal/geometric alternatives. Click any nav item to toggle active state.
|
||
</p>
|
||
|
||
<!-- ════════════════════════════════════════════════════════
|
||
CONCEPT 1 — SEMANTIC COLORED ICONS × 3 icon sets
|
||
════════════════════════════════════════════════════════ -->
|
||
<div class="section-header">
|
||
<h2>Concept 1 — Semantic Colored Icons</h2>
|
||
<p>Always-on color per icon. No pill background — just the stroke color creates landmarks.</p>
|
||
</div>
|
||
|
||
<div class="variants-grid">
|
||
|
||
<!-- C1 × Current Icons -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 1 × Current Icons</div>
|
||
<div class="variant-title">Original Lucide Set</div>
|
||
<div class="variant-desc">LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3</div>
|
||
</div>
|
||
<div class="sidebar-sim c1">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<!-- Dashboard: LayoutGrid -->
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<!-- All Flows: Box -->
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<!-- Flow Editor: PenLine -->
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<!-- Sessions: Clock -->
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<!-- Exports: FileText -->
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<!-- AI Assistant: BotMessageSquare -->
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<!-- Step Library: Bookmark -->
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<!-- Script Library: Terminal -->
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<!-- KB Accelerator: Sparkles -->
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<!-- Analytics: BarChart3 -->
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C1 × Icon Set A — Descriptive/Metaphorical -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 1 × Icon Set A</div>
|
||
<div class="variant-title">Descriptive / Metaphorical</div>
|
||
<div class="variant-desc">Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp</div>
|
||
</div>
|
||
<div class="sidebar-sim c1">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<!-- Dashboard: Gauge (speedometer) -->
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<!-- All Flows: GitFork (branching paths) -->
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<!-- Flow Editor: Wrench (builder) -->
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<!-- Sessions: Zap (active/energy) -->
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<!-- Exports: Share2 (share network) -->
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<!-- AI Assistant: Brain -->
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<!-- Step Library: Layers (stacked) -->
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<!-- Script Library: Code2 (code brackets) -->
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<!-- KB Accelerator: Rocket -->
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<!-- Analytics: TrendingUp -->
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C1 × Icon Set B — Minimal/Geometric -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 1 × Icon Set B</div>
|
||
<div class="variant-title">Minimal / Geometric</div>
|
||
<div class="variant-desc">Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart</div>
|
||
</div>
|
||
<div class="sidebar-sim c1">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<!-- Dashboard: Compass (navigation hub) -->
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<!-- All Flows: Network (connected nodes) -->
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<!-- Flow Editor: PenTool (vector pen) -->
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 19 7-7 3 3-7 7-3-3z"/><path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="m2 2 7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<!-- Sessions: Radio (live/active) -->
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/><circle cx="12" cy="12" r="2"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<!-- Exports: FileOutput (file with arrow) -->
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<!-- AI Assistant: Wand2 (magic wand) -->
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<!-- Step Library: Library -->
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<!-- Script Library: ScrollText -->
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<!-- KB Accelerator: Lightbulb -->
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<!-- Analytics: PieChart -->
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════
|
||
CONCEPT 2 — TINTED PILL BACKGROUNDS × 3 icon sets
|
||
════════════════════════════════════════════════════════ -->
|
||
<div class="section-header">
|
||
<h2>Concept 2 — Tinted Pill Backgrounds</h2>
|
||
<p>Colored icon inside a soft tinted rounded-square. Creates visual weight — feels like an app dock.</p>
|
||
</div>
|
||
|
||
<div class="variants-grid">
|
||
|
||
<!-- C2 × Current Icons -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 2 × Current Icons</div>
|
||
<div class="variant-title">Original Lucide Set</div>
|
||
<div class="variant-desc">LayoutGrid, Box, PenLine, Clock, FileText, BotMessageSquare, Bookmark, Terminal, Sparkles, BarChart3</div>
|
||
</div>
|
||
<div class="sidebar-sim c2">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="16"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C2 × Icon Set A — Descriptive/Metaphorical -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 2 × Icon Set A</div>
|
||
<div class="variant-title">Descriptive / Metaphorical</div>
|
||
<div class="variant-desc">Gauge, GitFork, Wrench, Zap, Share2, Brain, Layers, Code2, Rocket, TrendingUp</div>
|
||
</div>
|
||
<div class="sidebar-sim c2">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M12 18v-5"/><path d="M12 5v1"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C2 × Icon Set B — Minimal/Geometric -->
|
||
<div class="variant">
|
||
<div class="variant-header">
|
||
<div class="variant-tag">Concept 2 × Icon Set B</div>
|
||
<div class="variant-title">Minimal / Geometric</div>
|
||
<div class="variant-desc">Compass, Network, PenTool, Radio, FileOutput, Wand2, Library, ScrollText, Lightbulb, PieChart</div>
|
||
</div>
|
||
<div class="sidebar-sim c2">
|
||
<div class="nav-section-label">Navigation</div>
|
||
<div class="nav-item active ic-dashboard">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg></div>
|
||
<span>Dashboard</span>
|
||
</div>
|
||
<div class="nav-item ic-flows">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/></svg></div>
|
||
<span>All Flows</span>
|
||
<span class="badge">12</span>
|
||
</div>
|
||
<div class="nav-item ic-editor">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m12 19 7-7 3 3-7 7-3-3z"/><path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="m2 2 7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
||
<span>Flow Editor</span>
|
||
</div>
|
||
<div class="nav-item ic-sessions">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/><circle cx="12" cy="12" r="2"/></svg></div>
|
||
<span>Sessions</span>
|
||
<span class="badge">3</span>
|
||
</div>
|
||
<div class="nav-item ic-exports">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4 7V4a2 2 0 0 1 2-2 2 2 0 0 0-2 2"/><path d="M4.063 20.999a2 2 0 0 0 2 1L18 22a2 2 0 0 0 2-2V7l-5-5H6"/><path d="m10 18 3-3-3-3"/><path d="M4 15h9"/></svg></div>
|
||
<span>Exports</span>
|
||
</div>
|
||
<div class="nav-item ic-ai">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg></div>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
<div class="nav-item ic-steplib">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg></div>
|
||
<span>Step Library</span>
|
||
</div>
|
||
<div class="nav-item ic-scripts">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/></svg></div>
|
||
<span>Script Library</span>
|
||
</div>
|
||
<div class="nav-item ic-kb">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg></div>
|
||
<span>KB Accelerator</span>
|
||
</div>
|
||
<div class="nav-item ic-analytics">
|
||
<div class="icon-wrap"><svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg></div>
|
||
<span>Analytics</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════
|
||
ICON COMPARISON TABLE
|
||
════════════════════════════════════════════════════════ -->
|
||
<div class="comparison">
|
||
<h2>Icon Comparison Reference</h2>
|
||
<table class="comp-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Nav Item</th>
|
||
<th>Current</th>
|
||
<th>Set A (Descriptive)</th>
|
||
<th>Set B (Minimal)</th>
|
||
<th>Color</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Dashboard</td>
|
||
<td class="current">LayoutGrid — 4 squares</td>
|
||
<td class="pick">Gauge — speedometer, "command center"</td>
|
||
<td class="alt">Compass — navigation hub</td>
|
||
<td style="color: var(--cyan-400)">Cyan</td>
|
||
</tr>
|
||
<tr>
|
||
<td>All Flows</td>
|
||
<td class="current">Box — generic 3D cube</td>
|
||
<td class="pick">GitFork — branching paths (literally what flows are)</td>
|
||
<td class="alt">Network — connected nodes</td>
|
||
<td style="color: var(--violet)">Violet</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Flow Editor</td>
|
||
<td class="current">PenLine — pen tip</td>
|
||
<td class="alt">Wrench — builder tool</td>
|
||
<td class="alt">PenTool — vector/design pen</td>
|
||
<td style="color: var(--amber)">Amber</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Sessions</td>
|
||
<td class="current">Clock — time-based</td>
|
||
<td class="pick">Zap — active energy, live sessions</td>
|
||
<td class="alt">Radio — broadcasting/live signal</td>
|
||
<td style="color: var(--emerald)">Emerald</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Exports</td>
|
||
<td class="current">FileText — generic doc</td>
|
||
<td class="alt">Share2 — share network nodes</td>
|
||
<td class="alt">FileOutput — file with arrow out</td>
|
||
<td style="color: var(--blue)">Blue</td>
|
||
</tr>
|
||
<tr>
|
||
<td>AI Assistant</td>
|
||
<td class="current">BotMessageSquare — robot chat</td>
|
||
<td class="pick">Brain — intelligence, organic feel</td>
|
||
<td class="alt">Wand2 — magic wand with sparkles</td>
|
||
<td style="color: var(--fuchsia)">Fuchsia</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Step Library</td>
|
||
<td class="current">Bookmark — generic ribbon</td>
|
||
<td class="pick">Layers — stacked layers = reusable steps</td>
|
||
<td class="alt">Library — book spines</td>
|
||
<td style="color: var(--orange)">Orange</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Script Library</td>
|
||
<td class="current">Terminal — prompt cursor</td>
|
||
<td class="alt">Code2 — angle brackets with slash</td>
|
||
<td class="alt">ScrollText — script/scroll with text</td>
|
||
<td style="color: var(--teal)">Teal</td>
|
||
</tr>
|
||
<tr>
|
||
<td>KB Accelerator</td>
|
||
<td class="current">Sparkles — magic star</td>
|
||
<td class="pick">Rocket — acceleration/speed</td>
|
||
<td class="alt">Lightbulb — ideas/insight</td>
|
||
<td style="color: var(--rose)">Rose</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Analytics</td>
|
||
<td class="current">BarChart3 — vertical bars</td>
|
||
<td class="alt">TrendingUp — growth line with arrow</td>
|
||
<td class="alt">PieChart — pie segments</td>
|
||
<td style="color: var(--sky)">Sky</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelectorAll('.nav-item').forEach(item => {
|
||
item.addEventListener('click', () => item.classList.toggle('active'));
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|