Shane MaynardandClaude Fable 5
64c1b3605b
Test and deploy / test-and-deploy (push) Successful in 53s
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]>
113 lines
3.8 KiB
HTML
113 lines
3.8 KiB
HTML
<!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>
|