804 lines
34 KiB
HTML
804 lines
34 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</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>
|
|
/* ── Reset ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #101114;
|
|
--card: #17191d;
|
|
--surface: #14161a;
|
|
--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;
|
|
--cyan-glow: rgba(6,182,212,0.08);
|
|
--sidebar-bg: rgba(16,17,20,0.5);
|
|
--sidebar-hover: #212329;
|
|
--sidebar-active: rgba(6,182,212,0.10);
|
|
--glass-bg: rgba(22,24,28,0.55);
|
|
--glass-blur: blur(16px);
|
|
|
|
/* Concept colors */
|
|
--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);
|
|
--pink: #f472b6;
|
|
--pink-soft: rgba(244,114,182,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: 680px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.concepts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 32px;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
.concept {
|
|
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;
|
|
}
|
|
.concept:hover {
|
|
border-color: var(--border-hover);
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.concept-header {
|
|
padding: 20px 20px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.concept-number {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--cyan-400);
|
|
margin-bottom: 6px;
|
|
}
|
|
.concept-title {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.125rem;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.concept-desc {
|
|
font-size: 0.8125rem;
|
|
color: var(--fg-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ── Sidebar simulation ── */
|
|
.sidebar-sim {
|
|
padding: 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: 12px 12px 6px;
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 9px 12px;
|
|
border-radius: 10px;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--fg-muted);
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* Active bar */
|
|
.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 containers (shared) ── */
|
|
.icon-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* ── SVG Icons (inline, simplified Lucide-style) ── */
|
|
.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
|
|
Each icon gets a unique color that matches its purpose.
|
|
Icons are always colored (not just on active).
|
|
========================================================= */
|
|
.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); }
|
|
.c1 .ic-guides svg { stroke: var(--lime); }
|
|
.c1 .ic-feedback svg { stroke: var(--indigo); }
|
|
.c1 .ic-settings svg { stroke: var(--fg-dim); }
|
|
|
|
/* =========================================================
|
|
CONCEPT 2: Soft Glow Pill Backgrounds
|
|
Each icon sits inside a tinted pill/rounded-square bg
|
|
that matches the icon color. Subtle, always visible.
|
|
========================================================= */
|
|
.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 .ic-guides .icon-wrap { background: var(--lime-soft); }
|
|
.c2 .ic-guides svg { stroke: var(--lime); }
|
|
|
|
.c2 .ic-feedback .icon-wrap { background: var(--indigo-soft); }
|
|
.c2 .ic-feedback svg { stroke: var(--indigo); }
|
|
|
|
.c2 .ic-settings .icon-wrap { background: rgba(90,97,112,0.12); }
|
|
.c2 .ic-settings svg { stroke: var(--fg-dim); }
|
|
|
|
/* Active: glow intensifies */
|
|
.c2 .nav-item.active .icon-wrap {
|
|
box-shadow: 0 0 12px currentColor;
|
|
}
|
|
.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); }
|
|
|
|
/* =========================================================
|
|
CONCEPT 3: Duo-tone with Active Gradient Fill
|
|
Icons are monochrome by default. On active, the icon gets
|
|
a gradient fill and a subtle left accent line in the
|
|
icon's signature color.
|
|
========================================================= */
|
|
.c3 .icon-wrap svg {
|
|
stroke: var(--fg-dim);
|
|
transition: all 200ms ease;
|
|
}
|
|
.c3 .nav-item:hover .icon-wrap svg {
|
|
stroke: var(--fg-muted);
|
|
}
|
|
|
|
/* Active states — each icon reveals its unique color */
|
|
.c3 .nav-item.active.ic-dashboard .icon-wrap svg { stroke: var(--cyan-400); }
|
|
.c3 .nav-item.active.ic-dashboard::before { background: var(--cyan-400); }
|
|
|
|
.c3 .nav-item.active.ic-flows .icon-wrap svg { stroke: var(--violet); }
|
|
.c3 .nav-item.active.ic-flows::before { background: var(--violet); }
|
|
|
|
.c3 .nav-item.active.ic-editor .icon-wrap svg { stroke: var(--amber); }
|
|
.c3 .nav-item.active.ic-editor::before { background: var(--amber); }
|
|
|
|
.c3 .nav-item.active.ic-sessions .icon-wrap svg { stroke: var(--emerald); }
|
|
.c3 .nav-item.active.ic-sessions::before { background: var(--emerald); }
|
|
|
|
.c3 .nav-item.active.ic-exports .icon-wrap svg { stroke: var(--blue); }
|
|
.c3 .nav-item.active.ic-exports::before { background: var(--blue); }
|
|
|
|
.c3 .nav-item.active.ic-ai .icon-wrap svg { stroke: var(--fuchsia); }
|
|
.c3 .nav-item.active.ic-ai::before { background: var(--fuchsia); }
|
|
|
|
.c3 .nav-item.active.ic-steplib .icon-wrap svg { stroke: var(--orange); }
|
|
.c3 .nav-item.active.ic-steplib::before { background: var(--orange); }
|
|
|
|
.c3 .nav-item.active.ic-scripts .icon-wrap svg { stroke: var(--teal); }
|
|
.c3 .nav-item.active.ic-scripts::before { background: var(--teal); }
|
|
|
|
.c3 .nav-item.active.ic-kb .icon-wrap svg { stroke: var(--rose); }
|
|
.c3 .nav-item.active.ic-kb::before { background: var(--rose); }
|
|
|
|
.c3 .nav-item.active.ic-analytics .icon-wrap svg { stroke: var(--sky); }
|
|
.c3 .nav-item.active.ic-analytics::before { background: var(--sky); }
|
|
|
|
/* Active row gets a subtle tinted background */
|
|
.c3 .nav-item.active.ic-dashboard { background: rgba(6,182,212,0.08); }
|
|
.c3 .nav-item.active.ic-flows { background: rgba(167,139,250,0.08); }
|
|
.c3 .nav-item.active.ic-editor { background: rgba(245,158,11,0.08); }
|
|
.c3 .nav-item.active.ic-sessions { background: rgba(52,211,153,0.08); }
|
|
.c3 .nav-item.active.ic-exports { background: rgba(96,165,250,0.08); }
|
|
.c3 .nav-item.active.ic-ai { background: rgba(232,121,249,0.08); }
|
|
.c3 .nav-item.active.ic-steplib { background: rgba(251,146,60,0.08); }
|
|
.c3 .nav-item.active.ic-scripts { background: rgba(45,212,191,0.08); }
|
|
.c3 .nav-item.active.ic-kb { background: rgba(251,113,133,0.08); }
|
|
.c3 .nav-item.active.ic-analytics { background: rgba(56,189,248,0.08); }
|
|
|
|
/* =========================================================
|
|
CONCEPT 4: Dot Accent + Monochrome
|
|
Clean monochrome icons with a small colored dot indicator
|
|
to the left of the icon. The dot pulses gently on active.
|
|
========================================================= */
|
|
.c4 .icon-wrap { position: relative; }
|
|
.c4 .icon-wrap svg { stroke: var(--fg-muted); transition: stroke 150ms; }
|
|
.c4 .nav-item:hover .icon-wrap svg { stroke: var(--fg); }
|
|
.c4 .nav-item.active .icon-wrap svg { stroke: var(--fg); }
|
|
|
|
.c4 .nav-item .dot-accent {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
transition: opacity 200ms, transform 200ms;
|
|
}
|
|
.c4 .nav-item:hover .dot-accent { opacity: 1; transform: scale(1.2); }
|
|
.c4 .nav-item.active .dot-accent { opacity: 1; }
|
|
|
|
.c4 .ic-dashboard .dot-accent { background: var(--cyan-400); }
|
|
.c4 .ic-flows .dot-accent { background: var(--violet); }
|
|
.c4 .ic-editor .dot-accent { background: var(--amber); }
|
|
.c4 .ic-sessions .dot-accent { background: var(--emerald); }
|
|
.c4 .ic-exports .dot-accent { background: var(--blue); }
|
|
.c4 .ic-ai .dot-accent { background: var(--fuchsia); }
|
|
.c4 .ic-steplib .dot-accent { background: var(--orange); }
|
|
.c4 .ic-scripts .dot-accent { background: var(--teal); }
|
|
.c4 .ic-kb .dot-accent { background: var(--rose); }
|
|
.c4 .ic-analytics .dot-accent { background: var(--sky); }
|
|
.c4 .ic-guides .dot-accent { background: var(--lime); }
|
|
.c4 .ic-feedback .dot-accent { background: var(--indigo); }
|
|
.c4 .ic-settings .dot-accent { background: var(--fg-dim); }
|
|
|
|
/* Active: dot glows */
|
|
@keyframes dot-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 currentColor; }
|
|
50% { box-shadow: 0 0 6px 2px currentColor; }
|
|
}
|
|
.c4 .nav-item.active .dot-accent {
|
|
animation: dot-pulse 2.5s ease-in-out infinite;
|
|
}
|
|
.c4 .nav-item.active.ic-dashboard .dot-accent { color: var(--cyan-400); }
|
|
.c4 .nav-item.active.ic-sessions .dot-accent { color: var(--emerald); }
|
|
|
|
/* =========================================================
|
|
CONCEPT 5: Gradient Icon Fill + Micro-interaction
|
|
Icons use a CSS gradient fill (via background-clip on a
|
|
wrapper). On hover, icons do a subtle bounce. Active items
|
|
get a glowing underline.
|
|
========================================================= */
|
|
.c5 .icon-wrap {
|
|
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
.c5 .nav-item:hover .icon-wrap {
|
|
transform: translateY(-1px) scale(1.12);
|
|
}
|
|
|
|
/* Each icon has its own gradient */
|
|
.c5 .ic-dashboard svg { stroke: url(#grad-cyan); stroke: var(--cyan-400); }
|
|
.c5 .ic-flows svg { stroke: var(--violet); }
|
|
.c5 .ic-editor svg { stroke: var(--amber); }
|
|
.c5 .ic-sessions svg { stroke: var(--emerald); }
|
|
.c5 .ic-exports svg { stroke: var(--blue); }
|
|
.c5 .ic-ai svg { stroke: var(--fuchsia); }
|
|
.c5 .ic-steplib svg { stroke: var(--orange); }
|
|
.c5 .ic-scripts svg { stroke: var(--teal); }
|
|
.c5 .ic-kb svg { stroke: var(--rose); }
|
|
.c5 .ic-analytics svg { stroke: var(--sky); }
|
|
.c5 .ic-guides svg { stroke: var(--lime); }
|
|
.c5 .ic-feedback svg { stroke: var(--indigo); }
|
|
.c5 .ic-settings svg { stroke: var(--fg-dim); }
|
|
|
|
/* Inactive: muted versions */
|
|
.c5 .nav-item:not(.active):not(:hover) svg { opacity: 0.55; }
|
|
.c5 .nav-item:hover svg { opacity: 1; }
|
|
.c5 .nav-item.active svg { opacity: 1; }
|
|
|
|
/* Active: glowing underline under the icon */
|
|
.c5 .nav-item.active .icon-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -3px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 12px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
animation: underline-glow 2s ease-in-out infinite alternate;
|
|
}
|
|
.c5 .nav-item.active.ic-dashboard .icon-wrap::after { background: var(--cyan-400); box-shadow: 0 0 8px var(--cyan-400); }
|
|
.c5 .nav-item.active.ic-sessions .icon-wrap::after { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
|
|
.c5 .nav-item.active.ic-flows .icon-wrap::after { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
|
|
|
|
@keyframes underline-glow {
|
|
from { opacity: 0.6; width: 10px; }
|
|
to { opacity: 1; width: 14px; }
|
|
}
|
|
|
|
/* ── Footer notes ── */
|
|
.notes {
|
|
margin-top: 48px;
|
|
max-width: 800px;
|
|
}
|
|
.notes h2 {
|
|
font-family: 'Bricolage Grotesque', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
.notes ul {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.notes li {
|
|
font-size: 0.8125rem;
|
|
color: var(--fg-muted);
|
|
line-height: 1.6;
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
.notes li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--cyan-400);
|
|
}
|
|
.notes li strong { color: var(--fg); font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Sidebar Icon <span>Concepts</span></h1>
|
|
<p class="subtitle">
|
|
5 distinct approaches to make the ResolutionFlow sidebar navigation feel alive with color.
|
|
Each concept adds visual personality while maintaining the Slate & Ice design system.
|
|
Hover and active states are interactive — try them out.
|
|
</p>
|
|
|
|
<div class="concepts-grid">
|
|
|
|
<!-- ═══════════════ CONCEPT 1 ═══════════════ -->
|
|
<div class="concept">
|
|
<div class="concept-header">
|
|
<div class="concept-number">Concept 01</div>
|
|
<div class="concept-title">Semantic Color Icons</div>
|
|
<div class="concept-desc">Every icon gets a permanent, meaningful color. Dashboard = cyan, Sessions = emerald, AI = fuchsia. Always-on color creates instant visual landmarks.</div>
|
|
</div>
|
|
<div class="sidebar-sim c1">
|
|
<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>
|
|
|
|
<!-- ═══════════════ CONCEPT 2 ═══════════════ -->
|
|
<div class="concept">
|
|
<div class="concept-header">
|
|
<div class="concept-number">Concept 02</div>
|
|
<div class="concept-title">Tinted Pill Backgrounds</div>
|
|
<div class="concept-desc">Each icon sits inside a rounded-square with a soft tinted background matching its color. Creates visual weight and makes icons feel like objects, not just strokes.</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 active 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>
|
|
|
|
<!-- ═══════════════ CONCEPT 3 ═══════════════ -->
|
|
<div class="concept">
|
|
<div class="concept-header">
|
|
<div class="concept-number">Concept 03</div>
|
|
<div class="concept-title">Reveal on Active</div>
|
|
<div class="concept-desc">Icons stay monochrome (subtle, professional) until active — then they bloom into their signature color with a matching tinted row background and accent bar. Quiet→loud transition.</div>
|
|
</div>
|
|
<div class="sidebar-sim c3">
|
|
<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 active 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>
|
|
|
|
<!-- ═══════════════ CONCEPT 4 ═══════════════ -->
|
|
<div class="concept">
|
|
<div class="concept-header">
|
|
<div class="concept-number">Concept 04</div>
|
|
<div class="concept-title">Color Dot Markers</div>
|
|
<div class="concept-desc">Clean monochrome icons paired with a small colored dot to the left. Minimal but adds color variety without overwhelming the sidebar. Active dots pulse gently.</div>
|
|
</div>
|
|
<div class="sidebar-sim c4">
|
|
<div class="nav-section-label">Navigation</div>
|
|
<div class="nav-item active ic-dashboard">
|
|
<div class="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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 active ic-sessions">
|
|
<div class="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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="dot-accent"></div>
|
|
<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>
|
|
|
|
<!-- ═══════════════ CONCEPT 5 ═══════════════ -->
|
|
<div class="concept">
|
|
<div class="concept-header">
|
|
<div class="concept-number">Concept 05</div>
|
|
<div class="concept-title">Vivid + Micro-bounce</div>
|
|
<div class="concept-desc">Always-colored icons at reduced opacity. On hover they bounce up slightly and go full vivid. Active items get a glowing underline beneath the icon. Playful but controlled energy.</div>
|
|
</div>
|
|
<div class="sidebar-sim c5">
|
|
<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 active 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>
|
|
|
|
</div>
|
|
|
|
<div class="notes">
|
|
<h2>Implementation Notes</h2>
|
|
<ul>
|
|
<li><strong>Concept 1 (Semantic Colors)</strong> — Simplest to implement. Just add a color class per NavItem. Lowest risk, highest impact. The always-on color creates wayfinding landmarks engineers use subconsciously.</li>
|
|
<li><strong>Concept 2 (Tinted Pills)</strong> — More visual weight. The pill backgrounds make icons feel substantial, like app icons. Creates a premium "dock" feeling. Slightly more complex (28px wrapper with bg).</li>
|
|
<li><strong>Concept 3 (Reveal on Active)</strong> — Most restrained. Keeps the sidebar quiet until you interact. The color "reward" on active creates a satisfying click moment. The tinted row bg per-color is the key differentiator from current.</li>
|
|
<li><strong>Concept 4 (Dot Markers)</strong> — Minimal color addition. The dots add variety without changing icon rendering. The pulsing active dot adds a subtle "alive" feeling. Easiest to A/B test since it's purely additive.</li>
|
|
<li><strong>Concept 5 (Vivid + Micro-bounce)</strong> — Most playful. The bounce micro-interaction adds personality. The glowing underline on active is a unique touch. Best for making the app feel "alive" and responsive to the engineer.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
// Make nav items interactive (toggle active for demo)
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const sidebar = item.closest('.sidebar-sim');
|
|
// Don't deactivate, just toggle this one
|
|
item.classList.toggle('active');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|