ref_dashboard.html

<!--
  BuildAI Reference: DASHBOARD / APP
  Upload to HuggingFace as: ref_dashboard.html
-->

<!-- == PATTERN 1: ANALYTICS DARK DASHBOARD == -->
<style id="d1">
/* DARK ANALYTICS DASHBOARD */
/* layout: fixed sidebar 240px + main flex-1 */
/* sidebar: bg:#0d0d1a border-right:1px solid rgba(255,255,255,0.05) */
/* sidebar logo: padding:24px 20px font-size:18px weight:800 */
/* nav item: flex align:center gap:10px padding:10px 16px border-radius:10px 14px */
/* active nav: bg:rgba(99,102,241,0.15) color:#818cf8 */
/* nav icon: 18px flex-shrink:0 */
/* sidebar footer: border-top:1px solid rgba(255,255,255,0.05) padding:16px */
/* user avatar: 32px border-radius:50% bg:gradient */
/* main bg: #0a0a14 padding:32px */
/* topbar: flex justify-between align:center mb:32px */
/* topbar search: bg:#111120 border:1px solid rgba(255,255,255,0.06) border-radius:10px padding:10px 16px */
/* KPI grid: repeat(4,1fr) gap:20px mb:24px */
/* KPI card: bg:#111120 border:1px solid rgba(255,255,255,0.05) border-radius:16px padding:24px */
/* KPI icon box: 40px w/h border-radius:10px mb:16px */
/* KPI value: 28px weight:800 tracking:-1px */
/* KPI change positive: color:#10b981 bg:rgba(16,185,129,0.1) padding:3px 8px border-radius:999px 12px */
/* KPI change negative: color:#ef4444 bg:rgba(239,68,68,0.1) */
/* chart row: grid 70% 30% gap:20px */
/* chart card: bg:#111120 border-radius:16px padding:24px */
/* table: width:100% border-collapse:separate border-spacing:0 */
/* th: text-left 11px uppercase tracking:1px color:#555 padding:12px 16px */
/* td: padding:14px 16px border-bottom:1px solid rgba(255,255,255,0.04) */
/* status badge online: bg:rgba(16,185,129,0.1) color:#10b981 border-radius:999px padding:3px 10px 11px weight:600 */
/* status badge pending: bg:rgba(245,158,11,0.1) color:#f59e0b */
</style>

<!-- == PATTERN 2: SAAS PRODUCT DASHBOARD == -->
<style id="d2">
/* SAAS PRODUCT LIGHT DASHBOARD */
/* bg:#f8f9fc font:Inter */
/* sidebar: bg:#fff border-right:1px solid #e5e7eb width:220px */
/* nav active: bg:#f0f0ff color:#6366f1 border-right:3px solid #6366f1 */
/* header: bg:#fff border-bottom:1px solid #e5e7eb h:60px */
/* card: bg:#fff border:1px solid #e5e7eb border-radius:12px shadow:0 1px 3px rgba(0,0,0,0.05) */
/* metric card: hover shadow:0 4px 16px rgba(0,0,0,0.08) transition:0.2s */
/* graph line: stroke:#6366f1 stroke-width:2 fill:rgba(99,102,241,0.05) */
/* progress bar bg: #f0f0ff */
/* progress bar fill: bg:#6366f1 */
/* avatar group: flex -> avatars overlap margin-left:-8px border:2px solid #fff */
/* tag: padding:3px 8px border-radius:6px 12px weight:500 */
</style>

<!-- == PATTERN 3: FINTECH/CRYPTO DASHBOARD == -->
<style id="d3">
/* FINTECH DARK DASHBOARD */
/* bg:#060614 font:Inter */
/* sidebar: bg:#0a0a1f border-right:1px solid rgba(99,102,241,0.1) */
/* accent: #6366f1 */
/* portfolio value: clamp(32px,5vw,56px) weight:900 tracking:-2px color:#fff */
/* value change: 18px color:#10b981 */
/* coin card: bg:rgba(255,255,255,0.03) border:1px solid rgba(255,255,255,0.06) border-radius:14px padding:20px */
/* coin icon: 40px w/h border-radius:50% */
/* price up: color:#10b981 */
/* price down: color:#ef4444 */
/* chart mini sparkline: inline svg path */
/* transaction list: divide-y rgba(255,255,255,0.04) */
/* transaction row: flex justify-between align:center padding:14px 0 */
/* transaction icon: 36px border-radius:50% bg:rgba(99,102,241,0.15) */
/* send/receive badge: padding:4px 10px border-radius:999px 11px */
</style>

<!-- == PATTERN 4: CRM DASHBOARD == -->
<style id="d4">
/* CRM PROFESSIONAL DASHBOARD */
/* bg:#f4f5f7 font:Inter */
/* sidebar: bg:#1e1e2e width:250px text:rgba(255,255,255,0.7) */
/* sidebar group label: 10px uppercase tracking:2px color:rgba(255,255,255,0.3) margin:24px 0 8px */
/* active: bg:rgba(99,102,241,0.2) color:#fff */
/* pipeline columns: grid repeat(4,1fr) gap:16px */
/* pipeline col header: border-top:3px solid (color) padding-top:12px */
/* pipeline card: bg:#fff border-radius:10px padding:16px shadow:0 1px 4px rgba(0,0,0,0.06) */
/* pipeline card hover: shadow:0 4px 16px rgba(0,0,0,0.1) */
/* contact avatar: 32px border-radius:50% font-size:13px weight:600 */
/* priority dot: 8px border-radius:50% */
/* deal amount: weight:700 color:#1a1a1a */
/* contact list: divide-y #f0f0f0 */
/* contact row: flex align:center gap:12px padding:12px 0 */
</style>

<!-- == PATTERN 5: ADMIN PANEL == -->
<style id="d5">
/* ADMIN PANEL CLEAN */
/* bg:#f9fafb font:Inter */
/* sidebar: bg:#111827 width:256px */
/* nav item: flex align:center gap:3 padding:8px 12px rounded-md 14px color:rgba(255,255,255,0.6) */
/* active: bg:rgba(255,255,255,0.1) color:#fff */
/* breadcrumb: text-sm color:#9ca3af / current:color:#111827 weight:500 */
/* data table: bg:#fff border:1px solid #e5e7eb border-radius:12px overflow:hidden */
/* table header: bg:#f9fafb border-bottom:1px solid #e5e7eb */
/* th: 12px uppercase tracking:0.05em color:#6b7280 weight:600 */
/* tr hover: bg:#f9fafb */
/* bulk actions: bg:#eff6ff border-radius:8px padding:8px 12px */
/* pagination: flex gap:2px */
/* page btn: 32px w/h flex align:center justify:center border-radius:8px */
/* active page: bg:#6366f1 color:#fff */
</style>