61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Bubble Chamber — parametric generator</title>
|
||
<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&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="src/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<aside>
|
||
<div class="brand">Bubble Chamber</div>
|
||
<div class="subtitle">Parametric Generator · v3</div>
|
||
|
||
<div class="group" style="border-top:none; padding-top:0;">
|
||
<div class="group-title">Seed</div>
|
||
<div class="seed-row">
|
||
<input class="seed-input" id="seedInput" value="ENTROPY-001" spellcheck="false">
|
||
<button id="randomSeed" title="Randomize seed">⟳</button>
|
||
</div>
|
||
<div class="btn-row-full"><button id="regen" class="primary">Regenerate</button></div>
|
||
<div class="btn-row-full"><button id="fromSeed">Derive all params from seed</button></div>
|
||
<select class="preset" id="presets"><option value="">— Preset —</option></select>
|
||
</div>
|
||
|
||
<div id="controls"></div>
|
||
|
||
<div class="group">
|
||
<div class="group-title">Export</div>
|
||
<div class="btn-row">
|
||
<button id="exportSVG">SVG</button>
|
||
<button id="exportPDF">PDF</button>
|
||
</div>
|
||
<div class="btn-row-full"><button id="exportPNG">PNG · high-res</button></div>
|
||
<div style="margin-top:14px; font-size:10px; color:var(--ink-mute); line-height:1.5;">
|
||
Print target: 24″ × 24″<br>
|
||
SVG/PDF scale infinitely (clean vector).<br>
|
||
PNG carries the full film texture.
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main>
|
||
<div class="stage-frame">
|
||
<canvas id="preview" width="1000" height="1000"></canvas>
|
||
<div class="stage-corner">
|
||
<span id="labName">BEBC · CERN</span><br>
|
||
Plate <span id="plateNum">001</span><br>
|
||
<span class="sm">Exposed · <span id="exposureDate"></span></span>
|
||
</div>
|
||
<div class="stage-meta">Seed: <span class="hash" id="hashDisplay">—</span></div>
|
||
</div>
|
||
<div class="toast" id="toast">Exported</div>
|
||
</main>
|
||
|
||
<script type="module" src="src/main.js"></script>
|
||
</body>
|
||
</html>
|