| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WEED-SIM · Speciation Bench</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/static/lab.css"> |
| <link rel="stylesheet" href="/static/agent-widget.css"> |
| <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> |
| </head> |
| <body> |
| <header class="lab-header"> |
| <div class="logo"> |
| <span class="icon">⬡</span> |
| <h1>SPECIATION BENCH <span class="subtitle">Germplasm Analytics · BrAPI-style</span></h1> |
| </div> |
| <div class="controls"> |
| <span id="count-badge" class="badge">0 accessions</span> |
| <a href="/play" class="action-btn">← Play Mode</a> |
| <a href="/agent" class="action-btn">⌬ Agent</a> |
| <a href="/deck" class="action-btn">◆ Deck</a> |
| <a href="/" class="action-btn">⌂</a> |
| <button id="btn-refresh" class="action-btn">Refresh</button> |
| <button id="btn-newick" class="action-btn">Export Newick</button> |
| </div> |
| </header> |
|
|
| <main class="lab-grid"> |
| |
| <aside class="panel facets-panel"> |
| <div class="panel-header"><h2>Filtration</h2><button id="btn-clear-filters" class="mini-btn">clear</button></div> |
| <div class="panel-content" id="facet-rail"></div> |
| </aside> |
|
|
| |
| <section class="center-col"> |
| <div class="panel pc-panel"> |
| <div class="panel-header"><h2>Parallel Coordinates <span class="hint">drag on an axis to brush</span></h2></div> |
| <div class="panel-content" id="parallel-coords"></div> |
| </div> |
| <div class="panel grid-panel"> |
| <div class="panel-header"><h2>Germplasm Registry</h2></div> |
| <div class="panel-content" id="grid-wrap"></div> |
| </div> |
| </section> |
|
|
| |
| <aside class="right-col"> |
| <div class="panel wheel-panel"> |
| <div class="panel-header"><h2>Phenotype Color Gamut</h2></div> |
| <div class="panel-content" id="color-wheel"></div> |
| </div> |
| <div class="panel predict-panel"> |
| <div class="panel-header"><h2>Cross Predictor <span class="hint">Monte-Carlo</span></h2></div> |
| <div class="panel-content"> |
| <div class="predict-controls"> |
| <select id="pred-a"></select> |
| <span class="cross-x">×</span> |
| <select id="pred-b"></select> |
| <button id="btn-predict" class="action-btn primary">Simulate</button> |
| </div> |
| <div id="predict-output"></div> |
| </div> |
| </div> |
| </aside> |
| </main> |
| <script src="/static/session.js"></script> |
| <script src="/static/lab.js"></script> |
| <script src="/static/agent-widget.js"></script> |
| </body> |
| </html> |
|
|
