Add the Academy: narrated, animated roasting & brewing lessons; cupping link on roast detail

Academy (/academy, 'Learn' nav group): - 10 lessons / 45 slides across two tracks. Roasting: seed anatomy and composition, drying & the turning point, Maillard, first crack & development (DTR), curve/RoR reading (crash, flick, stall), defects → one-change discipline. Brewing: extraction physics (dissolving order, yield, grind, temp/time/ratio), then technique per brewer family — immersion (French press, AeroPress, Clever/Hario Switch, cold brew, cupping), percolation (bloom, V60, Chemex/Kalita, batch, percolator), espresso & pressure (puck prep, shot reading, dialing in, moka) - One cohesive scene system: 25 parameterized animated SVG scenes drawn from the app's palette (beans, curves, phase bars, brewers reusing the silhouette library), CSS keyframe animations, reduced-motion support - Narration: Azure TTS (en-US-Andrew HD, eastus) pre-generated to 45 committed MP3s by scripts/generate-academy-audio.mjs; slides speak phonetic respellings (my-YARD, KEM-ex, MOH-kah…) while captions show normal spelling; hands-free autoplay advances after each clip - Player: slide dots, keyboard arrows/space, per-slide captions Roast detail: 'Open cupping session' button next to cup notes (opens or creates the linked plan's session) — its score and flavors flow into the updated .alog download. Co-Authored-By: Claude Fable 5 <[email protected]>
2026-08-09 09:04:39 -04:00
parent 0b4857c225
commit 64c1b3605b
56 changed files with 1506 additions and 0 deletions
@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Academy — Roast Planner</title>
+    <link rel="stylesheet" href="/app.css?v=__ASSET_VERSION__" />
+    <link rel="icon" href="/icon.svg?v=__ASSET_VERSION__" type="image/svg+xml" />
+    <meta name="theme-color" content="#A8481A" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <nav class="side-nav" id="side-nav" aria-label="Main navigation">
+        <div class="side-nav-brand">
+          <span class="brand-mark" aria-hidden="true">◐</span>
+          <span class="brand-name">Roast Planner</span>
+        </div>
+        <div id="nav-links"></div>
+        <div class="nav-spacer"></div>
+        <button
+          class="icon-btn nav-collapse-toggle"
+          type="button"
+          id="nav-collapse"
+          aria-label="Collapse navigation"
+          title="Collapse navigation"
+        >
+          «
+        </button>
+        <div class="nav-user">
+          <div class="nav-user-avatar" id="nav-user-avatar" aria-hidden="true"></div>
+          <div class="nav-user-detail">
+            <span class="nav-user-email" id="account-email"></span>
+            <button class="nav-user-logout" type="button" id="btn-logout">
+              Log out
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div class="app-workspace" id="app-workspace">
+        <header class="app-header">
+          <div class="header-row-top">
+            <button
+              class="icon-btn nav-hamburger"
+              type="button"
+              id="nav-hamburger"
+              aria-label="Open navigation"
+              aria-expanded="false"
+            >
+              ☰
+            </button>
+            <div class="brand">
+              <div class="brand-text">
+                <h1>Academy</h1>
+                <p class="brand-sub">
+                  Roasting and brewing, taught from the bean's point of view
+                </p>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="drawer-overlay hidden" id="drawer-overlay"></div>
+
+        <main class="page-content">
+          <div id="academy-menu"></div>
+
+          <section class="panel-card hidden" id="academy-player">
+            <div class="panel-head">
+              <div>
+                <h2 id="player-slide-title" style="margin:0"></h2>
+                <span class="muted" id="player-lesson" style="font-size:12.5px"></span>
+              </div>
+              <button class="ghost-btn small" type="button" id="player-close">
+                ✕ Close
+              </button>
+            </div>
+            <div class="panel-body">
+              <div class="academy-stage">
+                <svg
+                  id="player-scene"
+                  viewBox="0 0 560 300"
+                  role="img"
+                  aria-label="Lesson animation"
+                ></svg>
+              </div>
+              <p class="academy-caption" id="player-caption" aria-live="polite"></p>
+              <div class="academy-controls">
+                <button class="ghost-btn small" type="button" id="player-prev">
+                  ← Back
+                </button>
+                <button
+                  class="ghost-btn small"
+                  type="button"
+                  id="player-play"
+                  aria-label="Pause narration"
+                >
+                  ❚❚
+                </button>
+                <div class="academy-dots" id="player-dots"></div>
+                <span class="muted" id="player-count"></span>
+                <button class="primary-btn" type="button" id="player-next">
+                  Next →
+                </button>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+    <script type="module" src="/js/academy.js?v=__ASSET_VERSION__"></script>
+  </body>
+</html>