← back to Norma Sdcc Pitch
public/index.html
491 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Norma × SDCC — A Proposal</title>
<link rel="stylesheet" href="/styles.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<!-- ───────────────────────── topbar w/ XP + level ───────────────────────── -->
<header class="topbar">
<div class="topbar-inner">
<div class="brand">
<span class="brand-mark">N×</span>
<span class="brand-name">Norma <span class="muted">×</span> SDCC</span>
</div>
<nav>
<a href="#priorities">⭐ Top 5</a>
<a href="#reluctant">Skeptic?</a>
<a href="#db-shift">DB Era</a>
<a href="#wix">Wix</a>
<a href="#why-custom">Why custom CRM</a>
<a href="#why">Why AI</a>
<a href="#loops">Loops</a>
<a href="#cron">Cron</a>
<a href="#ui-ux">UI/UX</a>
<a href="#agents">Agents</a>
<a href="#example">Demo</a>
<a href="#prep">Pitch</a>
<a href="#glossary">Glossary</a>
<a href="#vault">🔐 Vault</a>
</nav>
<div class="player-hud">
<div class="hud-xp" title="Earn XP by taking quizzes + running examples">
<span class="hud-xp-num" id="hud-xp">0</span><span class="hud-xp-label">XP</span>
</div>
<div class="hud-level" id="hud-level" title="Pitch level">Apprentice</div>
<div class="hud-badges" id="hud-badges" title="Badges earned"></div>
</div>
</div>
<div class="topbar-progress"><div id="progress-bar"></div></div>
</header>
<!-- ───────────────────────────── video explainer ───────────────────────────── -->
<section class="video-banner">
<div class="video-banner-inner">
<div class="video-meta">
<span class="video-kicker">▶ Three-minute explainer</span>
<h2>Watch the walkthrough first.</h2>
<p>Steve narrates the entire proposal — every section, every priority, every agent — in his own (cloned) voice. 2:54.</p>
</div>
<video controls preload="metadata" poster="" class="video-player" id="explainer-video">
<source src="/explainer.mp4" type="video/mp4">
Your browser does not support the video tag. <a href="/explainer.mp4">Download the MP4 (16 MB)</a>.
</video>
</div>
</section>
<!-- ───────────────────────────── hero ───────────────────────────── -->
<section class="hero">
<div class="hero-inner">
<p class="kicker">A proposal for the Student Debt Crisis Center</p>
<h1>A CRM that fits SDCC's work.<br><span class="hero-h1-quiet">Not the other way around.</span></h1>
<p class="lede">
Off-the-shelf CRMs model sales pipelines. SDCC's work is borrower-in-crisis → story tagged →
policy lever → press hit → coalition activation. Norma was built for that shape — with AI as
the substrate, not a bolted-on add-on, and SDCC owning every byte of the data.
</p>
<div class="hero-cta">
<a href="#why" class="btn-primary">Start the lecture</a>
<a href="#example" class="btn-secondary">Skip to live demo</a>
<a href="#prep" class="btn-ghost">Pitch prep →</a>
</div>
<p class="hero-meta">
<span class="dot dot-green"></span> Every “Run example” below hits a real
working API on Norma. No mockups. ·
<span class="hud-mini">Each quiz earns XP — full lecture = SDCC-Ready level</span>
</p>
</div>
</section>
<!-- ─────────── ⭐ TOP PRIORITIES ─────────── -->
<section id="priorities" class="lecture priorities-section">
<div class="lecture-inner">
<span class="section-num gold">★</span>
<h2 data-bind="priorities.headline"></h2>
<p class="sub" data-bind="priorities.intro"></p>
<div class="priority-list" id="priority-list"></div>
</div>
</section>
<!-- ─────────── reluctant adopter ─────────── -->
<section id="reluctant" class="lecture alt">
<div class="lecture-inner">
<span class="section-num" style="background:#b91c1c;">!</span>
<h2 data-bind="reluctant_adopter.headline"></h2>
<p class="sub" data-bind="reluctant_adopter.intro"></p>
<div class="tuesday-box">
<h3 data-bind="reluctant_adopter.your_tuesday.label"></h3>
<div class="tuesday-cols">
<div class="tuesday-col before">
<h4>Without Norma</h4>
<ul data-bind-list="reluctant_adopter.your_tuesday.before"></ul>
</div>
<div class="tuesday-col after">
<h4>With Norma</h4>
<ul data-bind-list="reluctant_adopter.your_tuesday.after"></ul>
</div>
</div>
<p class="tuesday-promise" data-bind="reluctant_adopter.the_promise"></p>
</div>
<h3 class="subsection">Common objections, answered</h3>
<div class="objections" id="objections-list"></div>
</div>
</section>
<!-- ─────────── companies are databases ─────────── -->
<section id="db-shift" class="lecture">
<div class="lecture-inner">
<span class="section-num" style="background:#7c3aed;">DB</span>
<p class="kicker" data-bind="companies_are_databases.kicker"></p>
<h2 data-bind="companies_are_databases.headline"></h2>
<p class="lecture-para" data-bind="companies_are_databases.body" style="white-space:pre-line"></p>
<div class="callout callout-strategy">
<h3>What this means for SDCC</h3>
<p data-bind="companies_are_databases.implication_for_sdcc"></p>
</div>
<h3 class="subsection">The shift, in concrete terms</h3>
<table class="shift-table" id="shift-table"></table>
</div>
</section>
<!-- ─────────── why custom CRM (vs Salesforce/EveryAction/HubSpot) ─────────── -->
<section id="why-custom" class="lecture">
<div class="lecture-inner">
<span class="section-num" style="background:#047857;">$</span>
<h2 data-bind="why_custom_crm.headline"></h2>
<p class="sub" data-bind="why_custom_crm.intro"></p>
<div class="callout callout-strategy">
<h3>The short answer</h3>
<p data-bind="why_custom_crm.the_short_answer"></p>
</div>
<h3 class="subsection">Head-to-head — 8 axes</h3>
<div class="crm-compare-wrap"><table class="crm-compare" id="crm-compare"></table></div>
<div class="callout callout-info">
<h3>The hybrid play</h3>
<p data-bind="why_custom_crm.the_hybrid_play"></p>
</div>
<h3 class="subsection">Honest risks (don't hide these from SDCC)</h3>
<ul class="lecture-bullets compact" data-bind-list="why_custom_crm.honest_risks"></ul>
<div class="callout callout-honest">
<h3>The real question to ask SDCC</h3>
<p data-bind="why_custom_crm.the_real_question"></p>
</div>
</div>
</section>
<!-- ─────────── wix integration ─────────── -->
<section id="wix" class="lecture alt">
<div class="lecture-inner">
<span class="section-num" style="background:#0c66ff;">W</span>
<h2 data-bind="wix_integration.headline"></h2>
<p class="sub" data-bind="wix_integration.intro"></p>
<h3 class="subsection">Five integration options (ranked easy → hard)</h3>
<div class="wix-options" id="wix-options"></div>
<h3 class="subsection">Wix UX + UI principles for SDCC</h3>
<ul class="lecture-bullets compact" id="wix-principles"></ul>
</div>
</section>
<!-- ─────────── 1. why ai ─────────── -->
<section id="why" class="lecture" data-section="why_ai">
<div class="lecture-inner">
<span class="section-num">1</span>
<h2 data-bind="why_ai.headline"></h2>
<p class="sub" data-bind="why_ai.subhead"></p>
<ul class="lecture-bullets" data-bind-list="why_ai.bullets"></ul>
<div class="callout callout-honest">
<h3>Honest caveats — we lead with these in the pitch</h3>
<ul data-bind-list="why_ai.honest_caveats"></ul>
</div>
<div class="quiz-block" data-quiz="why_ai"></div>
</div>
</section>
<!-- ─────────── 2. long vs short ─────────── -->
<section id="long-short" class="lecture alt" data-section="long_short">
<div class="lecture-inner">
<span class="section-num">2</span>
<h2 data-bind="long_short.headline"></h2>
<p class="sub" data-bind="long_short.subhead"></p>
<div class="split-cards">
<div class="split-pane short">
<h3>Short-term wins <span class="time-tag">weeks</span></h3>
<ul class="split-list" id="grid-short"></ul>
</div>
<div class="split-pane long">
<h3>Long-term moats <span class="time-tag">months / years</span></h3>
<ul class="split-list" id="grid-long"></ul>
</div>
</div>
<div class="callout callout-strategy">
<h3>The tradeoff</h3>
<p data-bind="long_short.tradeoff"></p>
</div>
<div class="quiz-block" data-quiz="long_short"></div>
</div>
</section>
<!-- ─────────── 3. projects + anthropic docs ─────────── -->
<section id="projects" class="lecture" data-section="projects_and_docs">
<div class="lecture-inner">
<span class="section-num">3</span>
<h2 data-bind="projects_and_docs.headline"></h2>
<p class="sub" data-bind="projects_and_docs.subhead"></p>
<div class="callout callout-info">
<h3>What is Anthropic?</h3>
<p data-bind="projects_and_docs.what_is_anthropic"></p>
</div>
<h3 class="subsection">What “Projects” means in this context</h3>
<div class="grid-cards" id="grid-projects-concept"></div>
<h3 class="subsection">The docs at a glance</h3>
<div class="grid-cards small-cards" id="grid-docs-overview"></div>
<div class="quiz-block" data-quiz="projects_and_docs"></div>
</div>
</section>
<!-- ─────────── 4. loops ─────────── -->
<section id="loops" class="lecture alt" data-section="loops">
<div class="lecture-inner">
<span class="section-num">4</span>
<h2 data-bind="loops.headline"></h2>
<p class="sub" data-bind="loops.subhead"></p>
<p class="lecture-para" data-bind="loops.explainer"></p>
<h3 class="subsection">Loops SDCC would run</h3>
<div class="grid-cards" id="grid-loops"></div>
<div class="callout callout-warn">
<h3>Guardrails — what loops CAN'T do</h3>
<ul data-bind-list="loops.guardrails"></ul>
</div>
<div class="quiz-block" data-quiz="loops"></div>
</div>
</section>
<!-- ─────────── 5. cron ─────────── -->
<section id="cron" class="lecture" data-section="cron">
<div class="lecture-inner">
<span class="section-num">5</span>
<h2 data-bind="cron.headline"></h2>
<p class="sub" data-bind="cron.subhead"></p>
<p class="lecture-para" data-bind="cron.explainer"></p>
<h3 class="subsection">Cron jobs SDCC would run</h3>
<div class="grid-cards" id="grid-cron"></div>
<div class="callout callout-info">
<h3>Loops vs Cron — when to use which</h3>
<p data-bind="cron.vs_loops"></p>
</div>
<div class="quiz-block" data-quiz="cron"></div>
</div>
</section>
<!-- ─────────── 6. ui vs ux ─────────── -->
<section id="ui-ux" class="lecture alt" data-section="ui_vs_ux">
<div class="lecture-inner">
<span class="section-num">6</span>
<h2 data-bind="ui_vs_ux.headline"></h2>
<p class="sub" data-bind="ui_vs_ux.subhead"></p>
<div class="def-pair">
<div class="def-box">
<span class="def-tag">UI</span>
<p data-bind="ui_vs_ux.ui_definition"></p>
</div>
<div class="def-box">
<span class="def-tag accent">UX</span>
<p data-bind="ui_vs_ux.ux_definition"></p>
</div>
</div>
<h3 class="subsection">Three combinations</h3>
<div class="grid-cards" id="grid-uiux-examples"></div>
<h3 class="subsection">What SDCC actually needs</h3>
<ul class="lecture-bullets compact" id="grid-uiux-priorities"></ul>
<div class="quiz-block" data-quiz="ui_vs_ux"></div>
</div>
</section>
<!-- ─────────── 7. agents ─────────── -->
<section id="agents" class="lecture" data-section="agents">
<div class="lecture-inner">
<span class="section-num">7</span>
<h2>Agents + skills SDCC would actually use</h2>
<p class="sub">
Click any card → open the modal → tap <strong>Run example</strong> for real output, or use
<strong>Add to pitch</strong> / <strong>Skip</strong> to curate the demo SDCC will see.
</p>
<div class="agent-filter">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="draft">Drafting</button>
<button class="filter-btn" data-filter="research">Research</button>
<button class="filter-btn" data-filter="operations">Operations</button>
<button class="filter-btn" data-filter="compliance">Compliance</button>
</div>
<div class="agent-grid" id="agent-grid"></div>
</div>
</section>
<!-- ─────────── 8. live example walkthrough ─────────── -->
<section id="example" class="lecture alt" data-section="real_example">
<div class="lecture-inner">
<span class="section-num">8</span>
<h2 data-bind="real_example.headline"></h2>
<p class="sub" data-bind="real_example.intro"></p>
<div class="scenario-box">
<h3>Scenario</h3>
<p data-bind="real_example.scenario"></p>
</div>
<ol class="walkthrough-list" id="walkthrough-steps"></ol>
<div class="callout callout-strategy">
<h3>Result</h3>
<p data-bind="real_example.ending"></p>
</div>
</div>
</section>
<!-- ─────────── 9. pitch prep ─────────── -->
<section id="prep" class="lecture pitch-section" data-section="prep">
<div class="lecture-inner">
<span class="section-num">9</span>
<h2>Pitch prep — for Steve only</h2>
<p class="sub">
Two cheat-sheets to keep open during the pitch + your curated agent list.
</p>
<div class="prep-cards">
<button class="prep-card" id="open-questions">
<span class="prep-icon">❓</span>
<h3>Questions to ask SDCC</h3>
<p>The interview script — 5 categories, 25+ questions. Reveals what SDCC actually needs.</p>
<span class="prep-cta">Open cheat-sheet →</span>
</button>
<button class="prep-card" id="open-unknowns">
<span class="prep-icon">🔮</span>
<h3>Unknown unknowns about SDCC</h3>
<p>12 questions nobody on the call has thought about. Use these to demonstrate depth.</p>
<span class="prep-cta">Open cheat-sheet →</span>
</button>
</div>
<h3 class="subsection">Your curated pitch — what SDCC will see</h3>
<div class="pitch-summary">
<div class="pitch-count">
<span id="pitch-included-count">0</span> included ·
<span id="pitch-skipped-count">0</span> skipped
</div>
<div class="pitch-actions">
<button id="btn-clear" class="btn-ghost">Clear</button>
<button id="btn-export" class="btn-secondary">Export HTML for SDCC</button>
</div>
</div>
<ul id="pitch-list" class="pitch-list"></ul>
</div>
</section>
<!-- ─────────── 10. glossary / onboarding ─────────── -->
<section id="glossary" class="lecture alt" data-section="glossary">
<div class="lecture-inner">
<span class="section-num">10</span>
<h2 data-bind="glossary.headline"></h2>
<p class="sub" data-bind="glossary.intro"></p>
<div class="glossary-controls">
<input type="search" id="gloss-search" placeholder="Search terms — try 'mcp', 'token', 'iterm', 'rag'…" autocomplete="off">
<div class="gloss-chips" id="gloss-chips"></div>
</div>
<div class="glossary-stats" id="glossary-stats"></div>
<div class="glossary-list" id="glossary-list"></div>
</div>
</section>
<!-- ─────────── 11. token vault ─────────── -->
<section id="vault" class="lecture" data-section="token_vault">
<div class="lecture-inner">
<span class="section-num" style="background:#047857;">🔐</span>
<h2 data-bind="token_vault.headline"></h2>
<p class="sub" data-bind="token_vault.intro"></p>
<div class="callout callout-honest">
<h3>Vault rules</h3>
<ul data-bind-list="token_vault.instructions"></ul>
</div>
<div class="vault-actions">
<button id="vault-save-all" class="btn-primary">Save all changes</button>
<button id="vault-refresh" class="btn-secondary">Refresh status</button>
<span class="vault-saved-indicator" id="vault-saved" hidden>✓ Saved</span>
</div>
<div class="vault-list" id="vault-list"></div>
</div>
</section>
<footer>
<div class="footer-inner">
<div>Norma × SDCC pitch viewer · localhost:9876 · backing Norma at <code>localhost:7400</code></div>
<div class="muted">All examples run against your local dev DB — borrower data stays on this machine</div>
</div>
</footer>
<!-- ─────────── modal: agent detail ─────────── -->
<div class="modal" id="modal-feature" hidden>
<div class="modal-backdrop" data-close></div>
<div class="modal-card" role="dialog" aria-labelledby="modal-title">
<button class="modal-close" data-close aria-label="close">×</button>
<div class="modal-header">
<span class="badge" id="modal-category"></span>
<h2 id="modal-title"></h2>
<p class="tagline" id="modal-tagline"></p>
</div>
<div class="modal-body">
<section>
<h3>What it does</h3>
<p id="modal-what"></p>
</section>
<section>
<h3>What this means for SDCC</h3>
<p id="modal-for-sdcc"></p>
</section>
<section class="hitl">
<h3>Human-in-the-loop</h3>
<p id="modal-hitl"></p>
</section>
<section id="modal-example-section">
<h3>Run a real example</h3>
<p class="muted small">Hits <code id="modal-route"></code> on Norma at localhost:7400.</p>
<button id="modal-run-btn" class="btn-secondary">▶ Run example</button>
<pre id="modal-example-out"></pre>
</section>
</div>
<div class="modal-footer">
<textarea id="modal-note" placeholder="Note for SDCC (optional) — e.g. 'show this one first'"></textarea>
<div class="modal-actions">
<button id="btn-skip" class="btn-ghost">Skip — keep pitch clean</button>
<button id="btn-add" class="btn-primary">Add to pitch</button>
</div>
</div>
</div>
</div>
<!-- ─────────── modal: questions to ask ─────────── -->
<div class="modal" id="modal-questions" hidden>
<div class="modal-backdrop" data-close></div>
<div class="modal-card wide" role="dialog">
<button class="modal-close" data-close>×</button>
<div class="modal-header">
<h2 data-bind="pitch_questions.headline"></h2>
<p class="tagline" data-bind="pitch_questions.intro"></p>
</div>
<div class="modal-body" id="questions-body"></div>
</div>
</div>
<!-- ─────────── modal: unknown unknowns ─────────── -->
<div class="modal" id="modal-unknowns" hidden>
<div class="modal-backdrop" data-close></div>
<div class="modal-card wide" role="dialog">
<button class="modal-close" data-close>×</button>
<div class="modal-header">
<h2 data-bind="unknown_unknowns.headline"></h2>
<p class="tagline" data-bind="unknown_unknowns.intro"></p>
</div>
<div class="modal-body" id="unknowns-body"></div>
</div>
</div>
<!-- ─────────── generic detail modal (priority/loop/cron/etc) ─────────── -->
<div class="modal" id="modal-detail" hidden>
<div class="modal-backdrop" data-close></div>
<div class="modal-card wide" role="dialog">
<button class="modal-close" data-close>×</button>
<div class="modal-header">
<span class="badge" id="detail-tag"></span>
<h2 id="detail-title"></h2>
<p class="tagline" id="detail-tagline"></p>
</div>
<div class="modal-body" id="detail-body"></div>
</div>
</div>
<!-- ─────────── toast / xp gain ─────────── -->
<div class="toast-stack" id="toast-stack"></div>
<script src="/app.js"></script>
</body>
</html>