index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stackroom — AI YouTube Automation Workflow Builder (2026)</title>
<meta name="description" content="Pick your niche and monthly budget, get a tailored AI production stack across script, voice, video and editing — with 2026 pricing, official links and time-saved ROI scores.">
<meta property="og:title" content="Stackroom — AI YouTube Automation Workflow Builder">
<meta property="og:description" content="Tailored AI tool stacks for YouTube production, priced and ranked by time-saved ROI. 2026 data.">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230e0f11'/%3E%3Cpath d='M8 22V10l7 6 9-8' stroke='%23ff5c3d' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://api.fontshare.com" crossorigin>
<link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800&f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="topbar">
  <a class="brand" href="#" aria-label="Stackroom home">
    <svg class="mark" viewBox="0 0 32 32" width="30" height="30" fill="none" aria-hidden="true">
      <rect x="0.9" y="0.9" width="30.2" height="30.2" rx="7.5" stroke="currentColor" stroke-width="1.8" opacity=".35"/>
      <path d="M8 22.5V9.5l7.2 6.2L24 8" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="15.2" cy="15.7" r="2.4" fill="var(--accent)" stroke="none"/>
    </svg>
    <span class="brand-text">Stackroom</span>
  </a>
  <nav class="topnav">
    <button class="navlink" data-scroll="builder">Builder</button>
    <button class="navlink" data-scroll="compare">Compare</button>
    <button class="navlink" data-scroll="roi">ROI</button>
    <button class="navlink" data-scroll="changes">2026 changes</button>
  </nav>
  <button id="theme-toggle" class="icon-btn" aria-label="Toggle colour theme" title="Toggle theme">
    <svg class="i-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6"/></svg>
    <svg class="i-moon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z"/></svg>
  </button>
</header>

<main>
  <!-- ================= HERO ================= -->
  <section class="hero">
    <div class="hero-inner">
      <p class="eyebrow">Production stack planner · pricing verified July 2026</p>
      <h1>Build the AI pipeline that fits your niche — and your budget.</h1>
      <p class="lede">Nine tools across four production stages, scored against your channel format, output volume and monthly spend. The builder returns one recommended stack, what it costs, how many hours it gives back, and where the next dollar earns the most.</p>
      <div class="hero-stats">
        <div><span class="stat-num" id="hs-tools">9</span><span class="stat-lab">tools tracked</span></div>
        <div><span class="stat-num" id="hs-tiers">—</span><span class="stat-lab">pricing tiers</span></div>
        <div><span class="stat-num">14h</span><span class="stat-lab">manual baseline / video</span></div>
        <div><span class="stat-num">4</span><span class="stat-lab">pipeline stages</span></div>
      </div>
    </div>
  </section>

  <!-- ================= BUILDER ================= -->
  <section id="builder" class="section">
    <div class="section-head">
      <span class="section-num">01</span>
      <h2>Configure your channel</h2>
    </div>

    <div class="config-grid">
      <div class="panel">
        <h3 class="panel-title">Niche</h3>
        <p class="panel-hint">Sets how each stage is weighted. A gaming channel barely needs generated B-roll; a finance channel lives or dies on research quality.</p>
        <div class="niche-grid" id="niche-grid" role="radiogroup" aria-label="Channel niche"></div>
      </div>

      <div class="panel">
        <h3 class="panel-title">Budget &amp; volume</h3>

        <div class="field">
          <div class="field-head">
            <label for="budget">Monthly tool budget</label>
            <output class="field-val" id="budget-val">$60</output>
          </div>
          <input type="range" id="budget" min="0" max="500" step="5" value="60" aria-describedby="budget-presets">
          <div class="presets" id="budget-presets">
            <button class="chip" data-budget="0">Free only</button>
            <button class="chip" data-budget="30">$30 · Starter</button>
            <button class="chip" data-budget="60">$60 · Solo</button>
            <button class="chip" data-budget="150">$150 · Semi-pro</button>
            <button class="chip" data-budget="350">$350 · Studio</button>
          </div>
        </div>

        <div class="field">
          <div class="field-head">
            <label for="volume">Videos per month</label>
            <output class="field-val" id="volume-val">8</output>
          </div>
          <input type="range" id="volume" min="1" max="60" step="1" value="8">
          <p class="field-note">Assumes ~10-minute long-form videos. For Shorts, count each clip as one.</p>
        </div>

        <div class="field">
          <div class="field-head">
            <label for="rate">Your hourly value (USD)</label>
            <output class="field-val" id="rate-val">$25</output>
          </div>
          <input type="range" id="rate" min="5" max="150" step="5" value="25">
          <p class="field-note">Used to convert saved hours into a dollar return. Set it to what an hour of your time is worth.</p>
        </div>

        <div class="field toggles">
          <label class="switch">
            <input type="checkbox" id="annual">
            <span class="track" aria-hidden="true"></span>
            <span class="switch-label">Annual billing<em>usually 15–25% cheaper</em></span>
          </label>
          <label class="switch">
            <input type="checkbox" id="devmode" checked>
            <span class="track" aria-hidden="true"></span>
            <span class="switch-label">I can write code<em>unlocks API tools like Shotstack</em></span>
          </label>
        </div>
      </div>
    </div>
  </section>

  <!-- ================= RESULT ================= -->
  <section id="result" class="section">
    <div class="section-head">
      <span class="section-num">02</span>
      <h2>Your recommended stack</h2>
      <button class="ghost-btn" id="copy-stack">Copy summary</button>
    </div>

    <div class="summary-bar" id="summary-bar"></div>
    <div class="pipeline" id="pipeline"></div>
    <p class="disclaimer">Prices are the vendor's published rates as of July 2026 and exclude taxes and API overage. Tiers marked <span class="inline-flag">unconfirmed</span> did not show a clean monthly sticker price on the official page — verify before you buy.</p>
  </section>

  <!-- ================= ROI ================= -->
  <section id="roi" class="section">
    <div class="section-head">
      <span class="section-num">03</span>
      <h2>Where the next dollar goes</h2>
    </div>
    <p class="section-lede">Every upgrade available from your current stack, ranked by hours returned per dollar added. Anything above the line pays for itself at your hourly rate.</p>
    <div class="roi-list" id="roi-list"></div>
  </section>

  <!-- ================= COMPARE ================= -->
  <section id="compare" class="section">
    <div class="section-head">
      <span class="section-num">04</span>
      <h2>Full tool comparison</h2>
    </div>
    <div class="filters" id="stage-filters" role="tablist" aria-label="Filter by stage"></div>
    <div class="table-scroll">
      <table class="cmp" id="cmp-table">
        <thead>
          <tr>
            <th class="c-tool">Tool</th>
            <th>Tier</th>
            <th class="c-num">Monthly</th>
            <th class="c-num">Annual/mo</th>
            <th>What you get</th>
            <th class="c-num">Covers</th>
            <th class="c-num">Saved/video</th>
            <th class="c-num">Impact</th>
          </tr>
        </thead>
        <tbody id="cmp-body"></tbody>
      </table>
    </div>
    <div class="tool-notes" id="tool-notes"></div>
  </section>

  <!-- ================= CHANGES ================= -->
  <section id="changes" class="section">
    <div class="section-head">
      <span class="section-num">05</span>
      <h2>What changed in 2026</h2>
    </div>
    <ul class="changelog" id="changelog"></ul>
  </section>
</main>

<footer class="foot">
  <p>Stackroom · an independent planning tool. Not affiliated with any vendor listed. Pricing gathered from official vendor pages on 30 July 2026 and changes frequently — always confirm on the vendor's own page before purchasing.</p>
  <p class="foot-links">
    <a href="https://openai.com/chatgpt/pricing/" target="_blank" rel="noopener">ChatGPT</a>
    <a href="https://one.google.com/about/google-ai-plans/" target="_blank" rel="noopener">NotebookLM</a>
    <a href="https://elevenlabs.io/pricing" target="_blank" rel="noopener">ElevenLabs</a>
    <a href="https://play.ht/pricing/" target="_blank" rel="noopener">PlayHT</a>
    <a href="https://runwayml.com/pricing" target="_blank" rel="noopener">Runway</a>
    <a href="https://pika.art/pricing" target="_blank" rel="noopener">Pika</a>
    <a href="https://www.heygen.com/pricing" target="_blank" rel="noopener">HeyGen</a>
    <a href="https://www.canva.com/pricing/" target="_blank" rel="noopener">Canva</a>
    <a href="https://shotstack.io/pricing/" target="_blank" rel="noopener">Shotstack</a>
  </p>
</footer>

<div class="toast" id="toast" role="status" aria-live="polite"></div>

<script type="module" src="app.js"></script>
</body>
</html>