| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>BREW-X — High-Fidelity Interactive Espresso Machine</title> |
| <meta |
| name="description" |
| content="BREW-X — an interactive, procedurally generated premium espresso machine built with Three.js r187 and WebGPU." |
| /> |
| <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='%2316191d'/%3E%3Ctext x='16' y='23' font-family='Helvetica,Arial,sans-serif' font-size='18' font-weight='700' fill='%23b06a2c' text-anchor='middle'%3EX%3C/text%3E%3C/svg%3E" |
| /> |
| <script type="module" crossorigin src="/assets/index-DpjYTQyB.js"></script> |
| <link rel="stylesheet" crossorigin href="/assets/index-DUZchs_4.css"> |
| </head> |
| <body> |
| <div id="app"> |
| <div id="model-safe-area" aria-hidden="true"></div> |
| <main id="studio-viewport" aria-label="Interactive espresso machine. Drag to orbit, scroll to zoom."> |
| <canvas id="brew-x-canvas" aria-label="BREW-X 3D model"></canvas> |
| <div class="viewport-caption"><span>MODEL BX–0001 · REV A</span><span id="isolate-caption">ISOLATE · COMPLETE</span></div> |
| <div class="studio-cross cross-a" aria-hidden="true"><span>+ + + + + + + + + + + + + +</span><span>+ + + + + + + + + + + + + +</span></div><div class="studio-cross cross-b" aria-hidden="true">+</div> |
| <div class="hint-overlay" id="hint-overlay"></div> |
| <div class="mode-watermark" id="hud-mode-watermark">COMPLETE</div> |
| </main> |
|
|
| <div id="loading-screen" class="loading-screen"> |
| <div class="loader-kicker">BX–01 / FIELD SIMULATOR</div> |
| <div class="loading-mark">BREW<span>-X /</span></div> |
| <div class="loading-bar"><i id="loading-progress"></i></div> |
| <div class="loading-status" id="loading-status">initialising renderer…</div> |
| <div class="loader-foot">PROCEDURAL ASSEMBLY · ESPRESSO SYSTEM</div> |
| </div> |
|
|
| <header class="brand-bar"> |
| <div class="brand-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 10h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM16 11h2a3 3 0 0 1 0 6h-2M3 23h16M7 2v4M11 1v5M15 2v4"/></svg><span>BX–1</span></div> |
| <div class="brand"><div class="brand-kicker">PRECISION ESPRESSO / FIELD SIMULATOR</div> |
| <div class="brand-mark">BREW-X <span>/</span></div> |
| <div class="brand-sub">compact espresso system · prototype 01</div></div> |
| <div class="header-instruments"> |
| <div class="header-load"><span class="micro">PUMP PRESSURE <b id="header-pressure">0.0 BAR</b></span><div class="segment-meter" id="header-meter" aria-label="Pump pressure"></div><div class="meter-scale"><span>IDLE</span><span>EXTRACTION</span><span>16 BAR</span></div></div> |
| <div class="header-cell"><span class="micro">UNIT ID</span><b>BX–0001</b></div> |
| <div class="header-cell runtime-cell"><span class="micro">RUNTIME</span><b id="header-runtime">00:00:00</b></div> |
| <div class="header-cell"><span class="micro">STATUS</span><b id="header-status" class="status-text">STANDBY</b></div> |
| <div class="header-cell header-live"><span class="micro">TELEMETRY</span><b id="header-live">22 °C · 0 ML</b></div> |
| </div> |
| <div class="header-actions"><button class="btn" id="stats-toggle" aria-expanded="false" aria-controls="render-stats">STATS</button><button class="btn" id="panel-toggle" aria-expanded="true" aria-controls="panel-controls">PANEL</button><button class="btn help-button" id="help-toggle" aria-label="Show interaction help" aria-expanded="false" aria-controls="help-panel">?</button></div> |
| </header> |
|
|
| <aside class="hud-left" id="panel-telemetry" aria-label="Machine telemetry"> |
| <div id="telemetry"></div> |
| <section class="instrument inspector" id="part-inspector"><div class="card-heading"><h2>PART INSPECTOR</h2><button class="icon-button" id="inspector-clear" aria-label="Clear selected part" hidden>×</button></div><h3 id="part-name" hidden>Select a part</h3><p class="inspector-empty" id="inspector-empty">Click a part in the viewport to inspect it.</p><dl id="part-properties" hidden></dl></section> |
| </aside> |
|
|
| <aside class="hud-right" id="panel-controls" aria-label="Machine and display controls"> |
| <details class="instrument"><summary class="card-heading"><h2>INSPECTION</h2><span>05</span><small>Four ways to look at the same assembly.</small></summary><div class="card-body" id="inspection-controls"></div></details> |
| <details class="instrument"><summary class="card-heading"><h2>CAMERA</h2><span>06</span><small>Eleven authored views.</small></summary><nav class="card-body camera-dock" id="camera-dock" aria-label="Camera presets"></nav></details> |
| <details class="instrument" open><summary class="card-heading"><h2>MACHINE</h2><span>07</span><small>Heat, extract, and steam.</small></summary><div class="card-body" id="machine-controls"></div></details> |
| <details class="instrument"><summary class="card-heading"><h2>RENDERING</h2><span>08</span><small>Changes take effect immediately.</small></summary><div class="card-body" id="display-controls"></div></details> |
| <details class="instrument"><summary class="card-heading"><h2>STILL CAPTURE</h2><span>09</span><small>Supersampled PNG of the current view.</small></summary><div class="card-body" id="capture-controls"></div></details> |
| <div class="signature-credit"><i></i> BREW-X DESIGN STUDY <span>///</span></div> |
| </aside> |
|
|
| <section class="operation-bar instrument" aria-label="Operation and view controls"><div class="card-heading"><h2>OPERATION & DISPLAY</h2><span>04</span></div><div class="operation-main"><div id="operation-actions"></div><div id="view-controls"></div><div class="shot-readout"><span class="micro">SHOT</span><b id="operation-shot">0.0 <small>s</small></b></div></div></section> |
| <section class="instrument floating-panel" id="render-stats" hidden aria-label="Renderer statistics"><div class="card-heading"><h2>RENDER STATS</h2><span id="render-badge">initialising…</span></div><div id="stats-values"></div></section> |
| <section class="instrument floating-panel" id="help-panel" hidden><div class="card-heading"><h2>VIEWPORT GUIDE</h2><span>?</span></div><div class="help-copy"><p><b>Orbit</b> Drag the model</p><p><b>Zoom</b> Scroll or pinch</p><p><b>Pan</b> Right-drag / two-finger drag</p><p><b>Inspect</b> Click an interactive part</p><p>Power on, wait for the ready state, then pull a shot. Use Inspection to reveal the internal assembly.</p></div></section> |
| <footer class="studio-footer"><span>BREW-X / MECHANICAL STUDY</span><span>PROCEDURAL MODEL · LIVE SIMULATION <i>///</i></span></footer> |
| <div class="toast-stack" id="toast-stack" role="status" aria-live="polite"></div> |
| </div> |
| </body> |
| </html> |
|
|
