viewer/index.html
5.9 KB · 100 lines · html · Download from the repository page
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>PoppyUp — 3D mode (interactive assembly explorer)</title><link rel="icon" href="data:,"><link rel="stylesheet" href="styles.css"><script type="importmap">{ "imports": { "three": "./vendor/three/three.module.js" } }</script></head><body><div id="app"> <header> <h1>PoppyUp — 3D mode</h1> <span class="rev" id="rev"></span> <span class="badge" title="Envelope, slot row, shutter, Z-stack and board outlines follow the Phase 1 docs; on-board component placements are approximate.">concept · approximate placements</span> <span class="status" id="status"></span> </header> <aside class="left" aria-label="Component explorer"> <h2>Components</h2> <div class="search"><input id="search" type="search" placeholder="Search name, ID, part number, function…" aria-label="Search components"></div> <div class="tree" id="tree"></div> <div class="opts"> <label>SKU <select id="sku" aria-label="SKU"><option value="pro">Pro (USB4 bridge, NVMe, PD-C)</option><option value="base">Base</option></select></label> <label>Labels <select id="labelMode" aria-label="Label mode"><option value="selected">Selected only</option><option value="major" selected>Major components</option><option value="all">All visible (decluttered)</option><option value="none">None</option></select></label> <label><input type="checkbox" id="xrayLabels"> X-ray labels (show occluded, dashed)</label> <label><input type="checkbox" id="expandSub"> Explode subassemblies too</label> <label><input type="checkbox" id="showRef" checked> Show reference geometry (zones, inserted card)</label> </div> </aside> <main> <canvas id="viewport" aria-label="3D viewport. Drag to orbit, right-drag or two-finger drag to pan, wheel or pinch to zoom, click a part to select it." tabindex="0"></canvas> <div id="labels" aria-hidden="true"></div> <div class="toolbar" role="toolbar" aria-label="View controls"> <div class="grp" aria-label="Standard views"> <button data-view="front" title="Front view">Front</button><button data-view="rear">Rear</button><button data-view="left">Left</button><button data-view="right">Right</button><button data-view="top">Top</button><button data-view="bottom">Bottom</button><button data-view="iso" title="Isometric">Iso</button> </div> <div class="grp" aria-label="Framing"> <button id="fitAll" title="Frame the currently visible assembly (F)">Fit all</button> <button id="resetView" title="Restore the home camera (Home)">Reset view</button> <button id="resetViewer" title="Restore camera, visibility, explosion, section and display state">Reset viewer</button> </div> <div class="grp" aria-label="Visibility"> <button id="showAll" title="Restore hidden components (keeps isolation)">Show all</button> <button id="exitIso" title="Leave isolation and show the whole object">Exit isolation</button> <button id="selParent" title="Select the parent assembly (Backspace)">Parent</button> </div> <div class="grp" aria-label="Display mode"> <button id="modeWire" aria-pressed="false" title="Wireframe edge overlay">Wire</button> <button id="modeGhost" aria-pressed="false" title="Transparent context: fade everything but the selection">Ghost</button> <button id="modeSection" aria-pressed="false" title="Section plane (uncapped cut)">Section</button> </div> </div> <div class="legend" id="legend"> <b>Gestures:</b> drag = orbit · right-drag / two-finger = pan · wheel / pinch = zoom · click = select (drag never selects).<br> <b>Keys:</b> <kbd>F</kbd> fit · <kbd>Home</kbd> reset view · <kbd>Esc</kbd> clear / exit isolation · <kbd>I</kbd> isolate · <kbd>H</kbd> hide · <kbd>Backspace</kbd> parent · tree: arrows, <kbd>Enter</kbd>.<br> <b>Explosion is illustrative</b> (front→rear stack), not a verified disassembly sequence. </div> <div class="section-ctl" id="sectionCtl" aria-label="Section plane"> <label>Axis <select id="secAxis"><option value="x">X (length)</option><option value="y">Y (height)</option><option value="z" selected>Z (depth, front→rear)</option></select></label> <label>Position <input id="secPos" type="range" min="0" max="1" step="0.005" value="0.5" aria-label="Section plane position"></label> <button id="secFlip" aria-pressed="false">Flip</button> <button id="secReset">Reset</button> <span class="note">Cut is uncapped: you see back faces, not modelled cavities. Internals shown are only those in the model.</span> </div> <div class="explode"> <label for="explodeAmt">Explode</label> <input id="explodeAmt" type="range" min="0" max="1" step="0.005" value="0" aria-label="Explosion amount, 0 to 100 percent"> <span class="val" id="explodeVal">0%</span> <button id="explodeGo">Explode</button><button id="explodeBack">Reassemble</button><button id="explodePause">Pause</button> <label>Scope <select id="scope" aria-label="Explosion scope"><option value="">Whole object</option></select></label> <span class="note" id="explodeNote" title=""></span> </div> <div class="overlay-msg" id="loading">Loading viewer…</div> <div class="overlay-msg hidden" id="ctxlost">The 3D context was lost. Waiting for the browser to restore it…</div> </main> <aside class="right" aria-label="Component details"> <h2>Details</h2> <div class="details" id="details"><div class="empty">Select a component in the scene or the tree.</div></div> </aside></div> <div id="fallback" hidden> <h1>PoppyUp — 3D mode (text fallback)</h1> <p>3D rendering is unavailable in this browser (WebGL could not be initialised). The component model is listed below.</p> <div id="fallbackTable"></div></div> <script type="module" src="app.js"></script></body></html>