Spaces:

mnoorchenar
/

AutoMLOps

Sleeping

File size: 50,426 Bytes
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>[PROJECT TITLE] · [YOUR NAME]</title>

<!-- ▶ THEME FLICKER FIX -->
<script>document.documentElement.setAttribute('data-theme', localStorage.getItem('mn-theme') || 'dark')</script>

<!-- ▶ FAVICON: Replace initials "MN" and colors as needed -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f8ef7'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%23070d1f'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-family='Segoe UI,system-ui,sans-serif' font-weight='900' font-size='26' fill='url(%23g)'%3E[INITIALS]%3C/text%3E%3C/svg%3E">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>

<!-- ▶ Point these to your shared stylesheet and script if you have them -->
<!-- <link rel="stylesheet" href="/projects/shared.css"> -->
<!-- <script src="/projects/shared.js" defer></script> -->

<style>
/* ═══════════════════════════════════════════════════
   CSS VARIABLES — Light/Dark theme
   Accent: blue (#4f8ef7) + gold (#f59e0b)
   Change --accent and --gold to match your project.
════════════════════════════════════════════════════ */
:root {
  --accent: #4f8ef7;
  --gold:   #f59e0b;
  --teal:   #06b6d4;
  --green:  #22c55e;
  --radius: 14px;

  /* Dark theme defaults */
  --body-bg:          #070d1f;
  --text:             #e2e8f0;
  --muted:            #8892a4;
  --glass:            rgba(255,255,255,.04);
  --glass-border:     rgba(255,255,255,.08);
  --card-hover-bg:    rgba(255,255,255,.07);
  --card-hover-border:rgba(79,142,247,.3);
  --section-alt:      #0b1120;
}
[data-theme="light"] {
  --body-bg:          #f8fafc;
  --text:             #0f172a;
  --muted:            #4b5675;
  --glass:            rgba(0,0,0,.03);
  --glass-border:     rgba(0,0,0,.08);
  --card-hover-bg:    rgba(0,0,0,.05);
  --card-hover-border:rgba(37,99,235,.25);
  --section-alt:      #f1f5f9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--body-bg); color: var(--text); transition: background .35s, color .35s; }
a { text-decoration: none; }
code { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: .88em; background: rgba(79,142,247,.1); padding: 1px 5px; border-radius: 4px; }

/* ── SECTION TAG ── */
.s-tag { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
.s-tag-blue { background: rgba(79,142,247,.12); color: var(--accent); border: 1px solid rgba(79,142,247,.2); }
.s-tag-gold { background: rgba(245,158,11,.12); color: var(--gold);   border: 1px solid rgba(245,158,11,.2); }
.s-tag-teal { background: rgba(6,182,212,.12);  color: var(--teal);   border: 1px solid rgba(6,182,212,.2); }

/* ── GRADIENT TEXT ── */
.grad-text { background: linear-gradient(135deg, var(--accent), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── HERO ── */
.hero {
  padding: 80px 24px 56px;
  background: var(--body-bg);
  position: relative; overflow: hidden; transition: background .35s;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(79,142,247,.15) 0%, transparent 65%);
}
[data-theme="light"] .hero::before {
  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(37,99,235,.09) 0%, transparent 65%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(79,142,247,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(79,142,247,.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

/* ── BREADCRUMB ── */
.breadcrumb { font-size: .78rem; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); transition: .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { opacity: .4; }

/* ── PILLS ── */
.tag-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.pill-blue { background: rgba(79,142,247,.12); border: 1px solid rgba(79,142,247,.25); color: var(--accent); }
.pill-gold { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); color: var(--gold); }
.pill-teal { background: rgba(6,182,212,.12);  border: 1px solid rgba(6,182,212,.25);  color: var(--teal); }
[data-theme="light"] .pill-blue { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.25); }
[data-theme="light"] .pill-gold { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.25); color: #92400e; }
[data-theme="light"] .pill-teal { background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.25); color: #0e7490; }

h1 { font-size: clamp(1.7rem,3.5vw,2.7rem); font-weight: 900; line-height: 1.2; margin-bottom: 20px; max-width: 820px; color: var(--text); }
.hero-sub { font-size: 1rem; color: var(--muted); max-width: 680px; margin-bottom: 28px; line-height: 1.65; }
.hero-sub strong { color: var(--text); }
.hero-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; font-size: .83rem; color: var(--muted); }
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-meta i { color: var(--accent); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .2s; font-family: inherit; text-decoration: none; }
.btn-blue { background: rgba(79,142,247,.18); color: var(--accent); border-color: rgba(79,142,247,.35); }
.btn-blue:hover { background: rgba(79,142,247,.3); transform: translateY(-2px); }
.btn-gold { background: rgba(245,158,11,.15); color: var(--gold); border-color: rgba(245,158,11,.35); }
.btn-gold:hover { background: rgba(245,158,11,.28); transform: translateY(-2px); }
.btn-gray { background: var(--glass); color: var(--text); border-color: var(--glass-border); }
.btn-gray:hover { background: var(--card-hover-bg); transform: translateY(-2px); }
.btn-back { background: var(--glass); color: var(--muted); border-color: var(--glass-border); }
.btn-back:hover { color: var(--accent); border-color: var(--card-hover-border); transform: translateY(-2px); }

/* ── STATS BAR ── */
.stats-bar { background: var(--section-alt); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); transition: background .35s; }
.stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--glass-border); }
.stat-item { background: var(--section-alt); padding: 22px 16px; text-align: center; transition: background .35s; }
.stat-val { font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg,var(--accent),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 4px; }
.stat-label { font-size: .75rem; color: var(--muted); line-height: 1.4; }

/* ── MAIN LAYOUT ── */
.main-layout { max-width: 1100px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 1fr 310px; gap: 32px; align-items: start; }
.content-col { display: flex; flex-direction: column; gap: 28px; }
.sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }

/* ── CARDS ── */
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 28px; transition: all .25s; }
.card:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-3px); }
.card-title { font-size: 1rem; font-weight: 800; margin-bottom: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.card-title i { color: var(--accent); font-size: .9rem; }
.narrative { font-size: .92rem; color: var(--muted); margin-bottom: 10px; line-height: 1.7; }
.narrative strong { color: var(--text); }

/* ── PIPELINE ── */
.pipeline { display: flex; align-items: stretch; gap: 0; margin: 20px 0; overflow-x: auto; padding-bottom: 4px; }
.pipe-step { flex: 1; min-width: 120px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 16px 10px; text-align: center; transition: .25s; }
.pipe-step:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-3px); }
.pipe-arrow { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; color: var(--muted); font-size: .8rem; padding-top: 10px; }
.pipe-icon  { font-size: 1.8rem; margin-bottom: 8px; line-height: 1; }
.pipe-label { font-size: .75rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pipe-sub   { font-size: .7rem; color: var(--muted); line-height: 1.4; }

/* ── MODULE GRID ── */
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.mod-card { border-radius: 12px; padding: 20px; border: 1px solid; transition: .25s; }
.mod-card:hover { transform: translateY(-3px); }
/* ▶ Add your own color classes here like .mod-1 { background: rgba(79,142,247,.05); border-color: rgba(79,142,247,.2); } */
.mod-1 { background: rgba(79,142,247,.05);  border-color: rgba(79,142,247,.2); }
.mod-2 { background: rgba(239,68,68,.05);   border-color: rgba(239,68,68,.18); }
.mod-3 { background: rgba(245,158,11,.05);  border-color: rgba(245,158,11,.18); }
.mod-4 { background: rgba(6,182,212,.05);   border-color: rgba(6,182,212,.18); }
.mod-5 { background: rgba(167,139,250,.05); border-color: rgba(167,139,250,.2); }
.mod-6 { background: rgba(34,197,94,.05);   border-color: rgba(34,197,94,.18); }
.mod-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; margin-bottom: 8px; }
.mod-name  { font-size: .93rem; font-weight: 800; margin-bottom: 5px; color: var(--text); }
.mod-desc  { font-size: .77rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.mod-detail { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--glass-border); font-size: .77rem; }
.mod-detail:last-child { border-bottom: none; }
.mod-detail-key { color: var(--muted); }

/* ── INSIGHT BANNER ── */
.insight-banner { background: linear-gradient(135deg,rgba(79,142,247,.07),rgba(245,158,11,.07)); border: 1px solid rgba(79,142,247,.22); border-radius: var(--radius); padding: 22px; margin-top: 8px; display: flex; gap: 16px; align-items: flex-start; }
.insight-icon { font-size: 2rem; flex-shrink: 0; }
.insight-body h4 { font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.insight-body p  { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.insight-body strong { color: var(--accent); }

/* ── ITEM STACK (reusable list of rows) ── */
.item-stack { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.item-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; font-size: .82rem; transition: .2s; }
.item-row:hover { background: var(--card-hover-bg); }
.item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.item-name { color: var(--text); font-weight: 600; flex: 1; }
.item-sub  { font-size: .72rem; color: var(--muted); }
.item-tag  { font-size: .7rem; padding: 2px 8px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.tag-blue { background: rgba(79,142,247,.15); color: var(--accent); border: 1px solid rgba(79,142,247,.3); }
.tag-red  { background: rgba(239,68,68,.15);  color: #f87171;       border: 1px solid rgba(239,68,68,.3); }
.tag-green{ background: rgba(34,197,94,.15);  color: var(--green);  border: 1px solid rgba(34,197,94,.3); }
.tag-gold { background: rgba(245,158,11,.15); color: var(--gold);   border: 1px solid rgba(245,158,11,.3); }

/* ── DEMO / INTERACTIVE BLOCK ── */
.demo-block { background: rgba(79,142,247,.04); border: 1px solid rgba(79,142,247,.15); border-radius: var(--radius); padding: 28px; }
.demo-intro { font-size: .85rem; color: var(--muted); margin-bottom: 18px; font-style: italic; }
.scenario-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.scen-btn { padding: 7px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-border); color: var(--muted); transition: .2s; font-family: inherit; }
.scen-btn.active, .scen-btn:hover { background: rgba(79,142,247,.15); border-color: rgba(79,142,247,.35); color: var(--accent); }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.res-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px; text-align: center; transition: .2s; }
.res-card:hover { background: var(--card-hover-bg); transform: translateY(-2px); }
.res-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.res-val   { font-size: 1.4rem; font-weight: 900; line-height: 1.1; }
.res-sub   { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.risk-bar-wrap { margin: 14px 0; }
.risk-bar-label { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 5px; }
.risk-bar-track { height: 10px; border-radius: 5px; background: var(--glass); overflow: hidden; }
.risk-bar-fill  { height: 100%; border-radius: 5px; transition: width .7s ease; }
.demo-note { font-size: .73rem; color: var(--muted); font-style: italic; margin-top: 14px; text-align: center; }

/* ── CHART TABS ── */
.chart-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chart-tab  { padding: 7px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-border); color: var(--muted); transition: .2s; }
.chart-tab.active { background: rgba(79,142,247,.15); border-color: rgba(79,142,247,.35); color: var(--accent); }
.chart-panel { display: none; }
.chart-panel.active { display: block; }
.chart-wrap  { position: relative; height: 280px; }
.chart-caption { font-size: .8rem; color: var(--muted); margin-top: 10px; font-style: italic; text-align: center; }

/* ── TAKEAWAYS / HIGHLIGHTS ── */
.takeaway-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 8px; }
.takeaway { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 20px; text-align: center; transition: .2s; }
.takeaway:hover { background: var(--card-hover-bg); transform: translateY(-3px); }
.tk-icon  { font-size: 2rem; margin-bottom: 8px; }
.tk-val   { font-size: 1.2rem; font-weight: 900; background: linear-gradient(135deg,var(--accent),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
.tk-label { font-size: .78rem; color: var(--muted); line-height: 1.45; }

/* ── SIDEBAR ── */
.sidebar-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 20px; }
.sidebar-card h3 { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 14px; }
.tldr-text { font-size: .87rem; color: var(--muted); line-height: 1.7; }
.tldr-text strong { color: var(--text); }
.info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--glass-border); font-size: .82rem; gap: 8px; }
.info-row:last-child { border-bottom: none; }
.info-key { color: var(--muted); flex-shrink: 0; }
.info-val { color: var(--text); font-weight: 600; text-align: right; font-size: .79rem; }
.tech-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-pill { background: rgba(79,142,247,.1); border: 1px solid rgba(79,142,247,.2); border-radius: 6px; padding: 3px 10px; font-size: .75rem; color: var(--accent); font-weight: 600; }
[data-theme="light"] .tech-pill { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2); }
.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; font-size: .82rem; color: var(--muted); transition: .2s; text-decoration: none; }
.sidebar-link:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); color: var(--text); }
.sidebar-link i { color: var(--accent); width: 16px; text-align: center; }
.hf-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg,rgba(255,175,7,.12),rgba(255,175,7,.06)); border: 1px solid rgba(255,175,7,.3); border-radius: 10px; font-size: .85rem; font-weight: 700; color: #f59e0b; transition: .2s; text-decoration: none; }
.hf-btn:hover { background: linear-gradient(135deg,rgba(255,175,7,.2),rgba(255,175,7,.1)); transform: translateY(-2px); }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .main-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .takeaway-grid { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: repeat(3,1fr); }
  .result-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 70px 16px 40px; }
  .pipeline { flex-direction: column; }
  .module-grid { grid-template-columns: 1fr; }
  .takeaway-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
  .result-grid { grid-template-columns: 1fr; }
}
</style>
</head>

<body>

<!-- ═══════════════════════════════════════════
     HERO SECTION
     Replace all [PLACEHOLDER] text below.
════════════════════════════════════════════ -->
<section class="hero">
  <div class="hero-inner">

    <!-- Breadcrumb navigation -->
    <div class="breadcrumb">
      <a href="/index.html"><i class="fas fa-home"></i> Home</a>
      <span>›</span>
      <a href="/projects/index.html">Projects</a>
      <span>›</span>
      <span style="color:var(--text)">[PROJECT NAME]</span>
    </div>

    <!-- Category pills: edit icon, text for each pill -->
    <div class="tag-row">
      <span class="pill pill-blue"><i class="fas fa-tag"></i> [DOMAIN / CATEGORY]</span>
      <span class="pill pill-teal"><i class="fab fa-python"></i> [TECH STACK SUMMARY]</span>
      <span class="pill pill-gold"><i class="fas fa-rocket"></i> [STATUS / PLATFORM]</span>
    </div>

    <!-- Main title: wrap gradient words in <span class="grad-text"> -->
    <h1>[PROJECT NAME] — <span class="grad-text">[SUBTITLE OR TAGLINE]</span></h1>

    <!-- One or two sentence description -->
    <p class="hero-sub">
      [BRIEF DESCRIPTION OF WHAT THE PROJECT IS AND WHAT IT DOES.]
      <strong>[KEY CAPABILITY OR DIFFERENTIATOR.]</strong>
    </p>

    <!-- Meta info chips -->
    <div class="hero-meta">
      <span><i class="fas fa-calendar-alt"></i> [YEAR / DATE]</span>
      <span><i class="fas fa-user"></i> <strong>[YOUR NAME]</strong></span>
      <span><i class="fas fa-database"></i> [DATASET SIZE / TYPE]</span>
      <span><i class="fas fa-brain"></i> [MODEL COUNT / TYPE]</span>
    </div>

    <!-- CTA buttons — update hrefs -->
    <div class="hero-actions">
      <a href="#demo" class="btn btn-blue"><i class="fas fa-play-circle"></i> Explore Demo</a>
      <a href="https://huggingface.co/spaces/[YOUR-HF-USERNAME]/[SPACE-NAME]" target="_blank" class="btn btn-gold">
        <i class="fas fa-external-link-alt"></i> Try on HuggingFace
      </a>
      <a href="https://github.com/[YOUR-GITHUB-USERNAME]/[REPO-NAME]" target="_blank" class="btn btn-gray">
        <i class="fab fa-github"></i> View on GitHub
      </a>
      <a href="/projects/index.html" class="btn btn-back"><i class="fas fa-arrow-left"></i> All Projects</a>
    </div>

  </div>
</section>


<!-- ═══════════════════════════════════════════
     STATS BAR — 5 key numbers/facts
════════════════════════════════════════════ -->
<div class="stats-bar">
  <div class="stats-inner">
    <!-- Replace [VALUE] and [DESCRIPTION] for each stat -->
    <div class="stat-item">
      <div class="stat-val">[VALUE 1]</div>
      <div class="stat-label">[Description of stat 1]</div>
    </div>
    <div class="stat-item">
      <div class="stat-val">[VALUE 2]</div>
      <div class="stat-label">[Description of stat 2]</div>
    </div>
    <div class="stat-item">
      <div class="stat-val">[VALUE 3]</div>
      <div class="stat-label">[Description of stat 3]</div>
    </div>
    <div class="stat-item">
      <div class="stat-val">[VALUE 4]</div>
      <div class="stat-label">[Description of stat 4]</div>
    </div>
    <div class="stat-item">
      <div class="stat-val">[VALUE 5]</div>
      <div class="stat-label">[Description of stat 5]</div>
    </div>
  </div>
</div>


<!-- ═══════════════════════════════════════════
     MAIN LAYOUT: content column + sidebar
════════════════════════════════════════════ -->
<div class="main-layout">
<div class="content-col">


  <!-- ─────────────────────────────────────────
       CARD 1: Architecture / Pipeline
  ──────────────────────────────────────────── -->
  <div class="card">
    <div class="s-tag s-tag-blue">Architecture Overview</div>
    <h2 class="card-title"><i class="fas fa-route"></i> [PIPELINE / ARCHITECTURE TITLE]</h2>

    <!-- Narrative paragraph -->
    <p class="narrative">
      [Describe your system architecture and data flow here.
      <strong>Highlight the key design decisions in bold.</strong>
      Keep it 3–5 sentences.]
    </p>

    <!-- Pipeline steps — add/remove steps as needed -->
    <div class="pipeline">
      <div class="pipe-step">
        <div class="pipe-icon">🗄️</div>
        <div class="pipe-label">[Step 1 Name]</div>
        <div class="pipe-sub">[Brief description]</div>
      </div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step">
        <div class="pipe-icon">🧠</div>
        <div class="pipe-label">[Step 2 Name]</div>
        <div class="pipe-sub">[Brief description]</div>
      </div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step">
        <div class="pipe-icon">📊</div>
        <div class="pipe-label">[Step 3 Name]</div>
        <div class="pipe-sub">[Brief description]</div>
      </div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step">
        <div class="pipe-icon">🌐</div>
        <div class="pipe-label">[Step 4 Name]</div>
        <div class="pipe-sub">[Brief description]</div>
      </div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step">
        <div class="pipe-icon">🚀</div>
        <div class="pipe-label">[Step 5 Name]</div>
        <div class="pipe-sub">[Brief description]</div>
      </div>
    </div>

    <!-- Insight banner — a highlighted callout box -->
    <div class="insight-banner">
      <div class="insight-icon">💡</div>
      <div class="insight-body">
        <h4>[Callout / Insight Title]</h4>
        <p>[Explain a key insight, design choice, or interesting fact about your architecture.
           <strong>Highlight the most important part.</strong>]</p>
      </div>
    </div>
  </div>


  <!-- ─────────────────────────────────────────
       CARD 2: Module / Feature Breakdown
       6-card grid — remove cards if not needed
  ──────────────────────────────────────────── -->
  <div class="card">
    <div class="s-tag s-tag-teal">Module Breakdown</div>
    <h2 class="card-title"><i class="fas fa-layer-group"></i> [MODULES / FEATURES TITLE]</h2>

    <div class="module-grid">

      <!-- Module 1 -->
      <div class="mod-card mod-1">
        <div class="mod-badge" style="background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 1 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--accent);font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

      <!-- Module 2 -->
      <div class="mod-card mod-2">
        <div class="mod-badge" style="background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 2 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:#f87171;font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

      <!-- Module 3 -->
      <div class="mod-card mod-3">
        <div class="mod-badge" style="background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 3 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--gold);font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

      <!-- Module 4 -->
      <div class="mod-card mod-4">
        <div class="mod-badge" style="background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 4 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--teal);font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

      <!-- Module 5 -->
      <div class="mod-card mod-5">
        <div class="mod-badge" style="background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 5 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:#a78bfa;font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

      <!-- Module 6 -->
      <div class="mod-card mod-6">
        <div class="mod-badge" style="background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.22)">
          [EMOJI] [Badge Label]
        </div>
        <div class="mod-name">[Module 6 Name]</div>
        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--green);font-weight:700">[Value]</span></div>
        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
      </div>

    </div>
  </div>


  <!-- ─────────────────────────────────────────
       CARD 3: Tech / Model Stack (row list)
  ──────────────────────────────────────────── -->
  <div class="card">
    <div class="s-tag s-tag-blue">[Stack / Method Section Label]</div>
    <h2 class="card-title"><i class="fas fa-brain"></i> [STACK / MODELS TITLE]</h2>
    <p class="narrative">[Describe your models or technical stack in 2–3 sentences. <strong>Explain why these choices were made.</strong>]</p>

    <div class="item-stack">

      <!-- Item row 1 -->
      <div class="item-row">
        <div class="item-icon" style="background:rgba(79,142,247,.15);color:var(--accent)">
          <i class="fas fa-cube"></i>
        </div>
        <div>
          <div class="item-name">[Model / Component 1 Name]</div>
          <div class="item-sub">[Features or details]</div>
        </div>
        <div class="item-tag tag-blue">[Tag label]</div>
      </div>

      <!-- Item row 2 -->
      <div class="item-row">
        <div class="item-icon" style="background:rgba(239,68,68,.15);color:#f87171">
          <i class="fas fa-cube"></i>
        </div>
        <div>
          <div class="item-name">[Model / Component 2 Name]</div>
          <div class="item-sub">[Features or details]</div>
        </div>
        <div class="item-tag tag-red">[Tag label]</div>
      </div>

      <!-- Item row 3 -->
      <div class="item-row">
        <div class="item-icon" style="background:rgba(34,197,94,.15);color:var(--green)">
          <i class="fas fa-cube"></i>
        </div>
        <div>
          <div class="item-name">[Model / Component 3 Name]</div>
          <div class="item-sub">[Features or details]</div>
        </div>
        <div class="item-tag tag-green">[Tag label]</div>
      </div>

      <!-- Item row 4 -->
      <div class="item-row">
        <div class="item-icon" style="background:rgba(245,158,11,.15);color:var(--gold)">
          <i class="fas fa-cube"></i>
        </div>
        <div>
          <div class="item-name">[Model / Component 4 Name]</div>
          <div class="item-sub">[Features or details]</div>
        </div>
        <div class="item-tag tag-gold">[Tag label]</div>
      </div>

    </div>

    <!-- Second insight banner -->
    <div class="insight-banner" style="margin-top:16px">
      <div class="insight-icon">⚙️</div>
      <div class="insight-body">
        <h4>[Second Callout Title]</h4>
        <p>[Additional insight about your stack or methodology.
           <strong>Highlight the most important part here.</strong>]</p>
      </div>
    </div>
  </div>


  <!-- ─────────────────────────────────────────
       CARD 4: Interactive Demo
       id="demo" is linked by the hero button
  ──────────────────────────────────────────── -->
  <div class="demo-block" id="demo">
    <div class="s-tag s-tag-blue">Interactive Explorer</div>
    <h2 class="card-title" style="margin-bottom:4px"><i class="fas fa-flask"></i> [DEMO SECTION TITLE]</h2>
    <p class="demo-intro">[Brief intro sentence about what these tabs show — e.g. "Select a scenario to see representative outputs from the live model."]</p>

    <!-- Tab buttons — update labels and onclick indices to match SCENARIOS array in JS -->
    <div class="scenario-tabs" id="scenTabs">
      <button class="scen-btn active" onclick="selectScen(0,this)">[Tab 1 Label]</button>
      <button class="scen-btn"        onclick="selectScen(1,this)">[Tab 2 Label]</button>
      <button class="scen-btn"        onclick="selectScen(2,this)">[Tab 3 Label]</button>
      <button class="scen-btn"        onclick="selectScen(3,this)">[Tab 4 Label]</button>
    </div>

    <div id="scenOutput"></div>
    <p class="demo-note">[Disclaimer note, e.g. "Illustrative outputs based on synthetic data. Live app scores in real time."]</p>
  </div>


  <!-- ─────────────────────────────────────────
       CARD 5: Charts (tabbed)
  ──────────────────────────────────────────── -->
  <div class="card">
    <div class="s-tag s-tag-blue">Performance Snapshot</div>
    <h2 class="card-title"><i class="fas fa-chart-bar"></i> [CHARTS SECTION TITLE]</h2>

    <!-- Tab labels — update to match your charts -->
    <div class="chart-tabs">
      <div class="chart-tab active" onclick="switchTab(0,this)">[Chart 1 Tab Label]</div>
      <div class="chart-tab"        onclick="switchTab(1,this)">[Chart 2 Tab Label]</div>
      <div class="chart-tab"        onclick="switchTab(2,this)">[Chart 3 Tab Label]</div>
    </div>

    <div class="chart-panel active" id="cp0">
      <div class="chart-wrap"><canvas id="chart0"></canvas></div>
      <p class="chart-caption">[Caption for chart 1 — explain what the data shows and what insight to take away.]</p>
    </div>
    <div class="chart-panel" id="cp1">
      <div class="chart-wrap"><canvas id="chart1"></canvas></div>
      <p class="chart-caption">[Caption for chart 2.]</p>
    </div>
    <div class="chart-panel" id="cp2">
      <div class="chart-wrap"><canvas id="chart2"></canvas></div>
      <p class="chart-caption">[Caption for chart 3.]</p>
    </div>
  </div>


  <!-- ─────────────────────────────────────────
       CARD 6: Key Design Decisions / Takeaways
       3-column grid of highlight boxes
  ──────────────────────────────────────────── -->
  <div class="card">
    <div class="s-tag s-tag-gold">Design Decisions</div>
    <h2 class="card-title"><i class="fas fa-lightbulb"></i> [DECISIONS / HIGHLIGHTS TITLE]</h2>
    <div class="takeaway-grid">

      <div class="takeaway">
        <div class="tk-icon">[EMOJI]</div>
        <div class="tk-val">[Short headline]</div>
        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
      </div>

      <div class="takeaway">
        <div class="tk-icon">[EMOJI]</div>
        <div class="tk-val">[Short headline]</div>
        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
      </div>

      <div class="takeaway">
        <div class="tk-icon">[EMOJI]</div>
        <div class="tk-val">[Short headline]</div>
        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
      </div>

    </div>
  </div>


</div><!-- /content-col -->


<!-- ═══════════════════════════════════════════
     SIDEBAR
════════════════════════════════════════════ -->
<div class="sidebar">

  <!-- At-a-Glance summary -->
  <div class="sidebar-card">
    <h3>At a Glance</h3>
    <p class="tldr-text">
      <strong>What it is:</strong> [One sentence summary.]
      <strong>Tech:</strong> [Key tools/frameworks.]
      <strong>Deploy:</strong> [Where it runs.]
      <strong>Scope:</strong> [What domains/features it covers.]
    </p>
  </div>

  <!-- Live link button — update href -->
  <div class="sidebar-card">
    <h3>Try It Live</h3>
    <a href="https://huggingface.co/spaces/[YOUR-HF-USERNAME]/[SPACE-NAME]" target="_blank" class="hf-btn">
      <i class="fas fa-rocket"></i> Open on HuggingFace Spaces
    </a>
  </div>

  <!-- Project metadata -->
  <div class="sidebar-card">
    <h3>Project Info</h3>
    <div class="info-row"><span class="info-key">Status</span>     <span class="info-val" style="color:var(--accent)">[🔵 Live / 🟡 In Progress]</span></div>
    <div class="info-row"><span class="info-key">Type</span>       <span class="info-val">[Academic / Industry / Personal]</span></div>
    <div class="info-row"><span class="info-key">Domain</span>     <span class="info-val">[Field / Sector]</span></div>
    <div class="info-row"><span class="info-key">Backend</span>    <span class="info-val">[Language · Framework]</span></div>
    <div class="info-row"><span class="info-key">ML Models</span>  <span class="info-val">[Model names]</span></div>
    <div class="info-row"><span class="info-key">Visualization</span><span class="info-val">[Library used]</span></div>
    <div class="info-row"><span class="info-key">Records</span>    <span class="info-val">[Dataset size]</span></div>
    <div class="info-row"><span class="info-key">Deploy target</span><span class="info-val">[Platform · Container · Port]</span></div>
    <div class="info-row"><span class="info-key">Year</span>       <span class="info-val">[YEAR]</span></div>
  </div>

  <!-- Tech stack pills -->
  <div class="sidebar-card">
    <h3>Tech Stack</h3>
    <div class="tech-pills">
      <!-- Add or remove pills as needed -->
      <span class="tech-pill">[Tech 1]</span>
      <span class="tech-pill">[Tech 2]</span>
      <span class="tech-pill">[Tech 3]</span>
      <span class="tech-pill">[Tech 4]</span>
      <span class="tech-pill">[Tech 5]</span>
      <span class="tech-pill">[Tech 6]</span>
    </div>
  </div>

  <!-- Module / Feature links — update hrefs and labels -->
  <div class="sidebar-card">
    <h3>[Modules / Features]</h3>
    <div class="sidebar-links">
      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 1]</a>
      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 2]</a>
      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 3]</a>
      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 4]</a>
      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 5]</a>
    </div>
  </div>

  <!-- Related links -->
  <div class="sidebar-card">
    <h3>Related Work</h3>
    <div class="sidebar-links">
      <a href="https://github.com/[YOUR-GITHUB-USERNAME]/[REPO-NAME]" target="_blank" class="sidebar-link">
        <i class="fab fa-github"></i> GitHub Repository
      </a>
      <a href="/projects/[OTHER-PROJECT].html" class="sidebar-link"><i class="fas fa-link"></i> [Related Project 1]</a>
      <a href="/projects/[OTHER-PROJECT].html" class="sidebar-link"><i class="fas fa-link"></i> [Related Project 2]</a>
      <a href="/index.html#publications" class="sidebar-link"><i class="fas fa-book"></i> All Publications</a>
      <a href="/projects/index.html" class="sidebar-link"><i class="fas fa-th-large"></i> Back to Projects</a>
    </div>
  </div>

</div><!-- /sidebar -->
</div><!-- /main-layout -->


<!-- ═══════════════════════════════════════════
     PAGE-SPECIFIC JAVASCRIPT
     Edit SCENARIOS and chart data below.
════════════════════════════════════════════ -->
<script>

/* ─── THEME HELPERS (don't need to change these) ─── */
const html = document.documentElement;
function isDark(){ return html.getAttribute('data-theme') !== 'light'; }
function gc(){ return isDark() ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)'; }
function tc(){ return isDark() ? '#8892a4' : '#4b5675'; }
function tt(){
  return {
    backgroundColor: isDark() ? 'rgba(7,13,31,.95)' : 'rgba(255,255,255,.97)',
    titleColor:      isDark() ? '#e2e8f0' : '#0f172a',
    bodyColor:       isDark() ? '#8892a4'  : '#4b5675',
    borderColor:     isDark() ? 'rgba(79,142,247,.3)' : 'rgba(37,99,235,.2)',
    borderWidth: 1
  };
}


/* ─── SCENARIO DEMO DATA ───────────────────────────
   Each object = one tab. Fill in your own values.
   - title: shown above the metric cards
   - metrics: array of 3 cards (label, value, sub-label, color)
   - bar: a single progress bar (label, pct 0–100, color)
   - insight: the text box below the bar
─────────────────────────────────────────────────── */
const SCENARIOS = [
  {
    title: '[EMOJI] [Scenario 1 Title]',
    metrics: [
      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' }
    ],
    bar: { label: '[Bar label]', pct: 50, color: '#ef4444' },
    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
  },
  {
    title: '[EMOJI] [Scenario 2 Title]',
    metrics: [
      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' }
    ],
    bar: { label: '[Bar label]', pct: 30, color: '#f59e0b' },
    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
  },
  {
    title: '[EMOJI] [Scenario 3 Title]',
    metrics: [
      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' },
      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#22c55e' }
    ],
    bar: { label: '[Bar label]', pct: 70, color: '#4f8ef7' },
    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
  },
  {
    title: '[EMOJI] [Scenario 4 Title]',
    metrics: [
      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' }
    ],
    bar: { label: '[Bar label]', pct: 45, color: '#ef4444' },
    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
  }
];

/* ─── SCENARIO RENDERER (no need to change) ─── */
function renderScen(idx){
  const s = SCENARIOS[idx];
  const metrics = s.metrics.map(m => `
    <div class="res-card">
      <div class="res-label">${m.label}</div>
      <div class="res-val" style="color:${m.color}">${m.val}</div>
      <div class="res-sub">${m.sub}</div>
    </div>`).join('');
  document.getElementById('scenOutput').innerHTML = `
    <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:12px">${s.title}</div>
    <div class="result-grid">${metrics}</div>
    <div class="risk-bar-wrap">
      <div class="risk-bar-label">
        <span style="color:var(--muted);font-size:.78rem">${s.bar.label}</span>
        <span style="color:${s.bar.color};font-weight:700;font-size:.82rem">${s.bar.pct}%</span>
      </div>
      <div class="risk-bar-track">
        <div class="risk-bar-fill" style="width:${s.bar.pct}%;background:${s.bar.color}"></div>
      </div>
    </div>
    <div style="background:rgba(79,142,247,.06);border:1px solid rgba(79,142,247,.15);border-radius:8px;padding:12px 16px;font-size:.82rem;color:var(--muted);line-height:1.65;margin-top:4px">${s.insight}</div>`;
}
function selectScen(idx, btn){
  document.querySelectorAll('.scen-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  renderScen(idx);
}
renderScen(0);


/* ─── CHART DATA ───────────────────────────────────
   Edit the three buildChart(i) blocks below.
   i=0 → Chart Tab 1, i=1 → Tab 2, i=2 → Tab 3
   Chart.js docs: https://www.chartjs.org/docs/
─────────────────────────────────────────────────── */
const charts = {};

function buildChart(i){
  if(charts[i]) charts[i].destroy();
  const ctx = document.getElementById('chart' + i);
  if(!ctx) return;
  const g = gc(), t = tc(), tip = tt();

  if(i === 0){
    /* ── CHART 1: Replace labels and data ── */
    charts[0] = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['[Label A]', '[Label B]', '[Label C]', '[Label D]', '[Label E]'],
        datasets:[{
          label: '[Dataset Name]',
          data: [10, 25, 40, 60, 80], /* ← replace with your values */
          backgroundColor: [
            'rgba(248,81,73,.8)',
            'rgba(210,153,34,.75)',
            'rgba(88,166,255,.7)',
            'rgba(63,185,80,.7)',
            'rgba(0,176,255,.75)'
          ],
          borderRadius: 6
        }]
      },
      options:{
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
        scales:{
          x:{ ticks:{color:t}, grid:{color:g} },
          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
        }
      }
    });

  } else if(i === 1){
    /* ── CHART 2: Replace labels and data ── */
    charts[1] = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['[Label A]', '[Label B]', '[Label C]', '[Label D]'],
        datasets:[
          {
            label: '[Dataset 1]',
            data: [20, 35, 50, 65], /* ← replace */
            backgroundColor: isDark() ? 'rgba(248,81,73,.75)' : 'rgba(220,38,38,.7)',
            borderRadius: 6
          },
          {
            label: '[Dataset 2]',
            data: [40, 30, 20, 15], /* ← replace */
            backgroundColor: isDark() ? 'rgba(210,153,34,.6)' : 'rgba(217,119,6,.6)',
            borderRadius: 6
          }
        ]
      },
      options:{
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
        scales:{
          x:{ ticks:{color:t}, grid:{color:g} },
          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
        }
      }
    });

  } else if(i === 2){
    /* ── CHART 3: Replace labels and data ── */
    charts[2] = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['[Label A]', '[Label B]', '[Label C]'],
        datasets:[
          {
            label: '[Dataset 1]',
            data: [0.8, 1.1, 1.3], /* ← replace */
            backgroundColor: [
              isDark()?'rgba(0,176,255,.7)':'rgba(37,99,235,.65)',
              'rgba(210,153,34,.7)',
              'rgba(248,81,73,.7)'
            ],
            borderRadius: 6
          },
          {
            label: '[Dataset 2]',
            data: [1.1, 1.4, 1.6], /* ← replace */
            backgroundColor: ['rgba(136,146,164,.4)','rgba(136,146,164,.4)','rgba(136,146,164,.4)'],
            borderRadius: 6
          }
        ]
      },
      options:{
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
        scales:{
          x:{ ticks:{color:t}, grid:{color:g} },
          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
        }
      }
    });
  }
}

function switchTab(i, el){
  document.querySelectorAll('.chart-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.chart-panel').forEach(p => p.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('cp' + i).classList.add('active');
  buildChart(i);
}

buildChart(0); /* Build the first chart on page load */
</script>

</body>
</html>