357f8e2d08
* docs: add 5 sidebar icon color concepts for UX review Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(ui): add semantic icon colors and updated icons to sidebar nav 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> * fix(ui): default Sessions page to Active tab, reorder tabs Active sessions are what engineers care about most. Tab order is now Active, Prepared, Completed, All. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar grouping and AI naming concept mockups Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar redesign context and decision summary Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add sidebar redesign spec and implementation plan Design spec covers: activity zone with daily stats + session feed, nav grouping (Resolve/Build/Insights), AI split (FlowPilot + Flow Assist), pinned flows removal. Implementation plan has 5 chunks, 12 tasks, 39 steps. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar stats Pydantic schemas Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * test: add failing tests for sidebar stats endpoint Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar stats endpoint with daily stats and activity feed Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add sidebar API client, stats bar, activity feed components New components: SidebarStatsBar, SidebarActivityFeed, ActivityItem. New API client for sidebar stats endpoint. Pulse-dot CSS animation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: restructure sidebar with stats bar, activity feed, and grouped nav Dashboard-first layout with Resolve/Build/Insights groups. AI split: FlowPilot (Resolve) + Flow Assist (Build). Stats bar: Resolved/Active/In Session daily counters. Activity feed: active sessions with CW ticket #, recent completions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: remove pinned flows frontend (PinnedFlowsSection, store, API, pin buttons) Removed: PinnedFlowsSection component, pinnedFlowsStore, pinnedFlows API client. Cleaned: pin buttons from TreeGridView, TreeListView, TreeTableView. Cleaned: favorites section from QuickStartPage, pin props from TreeLibraryPage. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add FlowAssistPage placeholder and /flow-assist route Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: real-time sidebar stats via session-changed events Sidebar now refreshes stats when sessions are created or completed, not just on page navigation. Uses window event bus pattern (same as folder-changed events in codebase). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: live-ticking In Session timer using active session start times SidebarStatsBar now computes active session elapsed time client-side from started_at timestamps, ticking every 60s. Backend only returns completed session minutes to avoid double-counting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: sidebar In Session timer ticks every second and shows seconds Timer now uses 1s interval (not 60s) and displays seconds when under a minute so it matches the session timer in the flow UI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: trigger PR environment redeploy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * debug: add console.log to SidebarStatsBar for timer investigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: parse sidebar timestamps as UTC (append Z suffix) Backend returns naive UTC timestamps without timezone indicator. JS Date() treats bare ISO strings as local time, causing the timer to compute negative elapsed time (future timestamps). Appending 'Z' forces UTC parsing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: rename 'In Session' to 'Total Time' for clarity Makes it clear the timer is an aggregate of all sessions today, not just the current one. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- 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>
|