bdbebaa7e8
Click a point in any panel to pin its id — highlight persists after the cursor leaves, across all linked panels. Click the same pinned point (or empty space) to unpin. Hover still shows the point under the cursor, briefly overriding the pinned display. Canvas cursor is now crosshair to hint at the interaction.
110 lines
3.8 KiB
HTML
110 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>embedding notebook · compare</title>
|
|
<link rel="stylesheet" href="/static/style.css?v=32" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
|
|
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" />
|
|
<script>
|
|
(function(){try{
|
|
var t=localStorage.getItem('theme');
|
|
if(!t)t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
|
|
document.documentElement.setAttribute('data-theme',t);
|
|
}catch(e){}})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="masthead">
|
|
<div>
|
|
<h1 class="title">embedding notebook <em>— compare</em></h1>
|
|
</div>
|
|
<div class="meta">
|
|
<a href="/" class="masthead-link">← runs</a>
|
|
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="compare-layout" id="compare-layout">
|
|
|
|
<div class="compare-controls" id="compare-controls">
|
|
<button type="button" class="cc-play" id="cc-play" aria-label="play / pause">▶</button>
|
|
|
|
<input class="cc-scrub" id="cc-scrub" type="range"
|
|
min="0" max="1000" step="1" value="0" aria-label="time scrubber" />
|
|
|
|
<div class="cc-time" id="cc-times"></div>
|
|
|
|
<label class="cc-speed-wrap">
|
|
<span class="cc-lbl">speed</span>
|
|
<select class="cc-speed" id="cc-speed">
|
|
<option value="0.5">0.5×</option>
|
|
<option value="1" selected>1×</option>
|
|
<option value="2">2×</option>
|
|
<option value="4">4×</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-motion-wrap">
|
|
<span class="cc-lbl">motion</span>
|
|
<select class="cc-motion" id="cc-motion">
|
|
<option value="smooth" selected>smooth</option>
|
|
<option value="step">step</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-color-wrap">
|
|
<span class="cc-lbl">color</span>
|
|
<select class="cc-color" id="cc-color">
|
|
<option value="mono">mono</option>
|
|
<option value="original" selected>original</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-sync-wrap">
|
|
<span class="cc-lbl">axes</span>
|
|
<select class="cc-sync" id="cc-sync">
|
|
<option value="scaled-1x1">scaled · 1:1</option>
|
|
<option value="scaled-3x2" selected>scaled · 3:2</option>
|
|
<option value="locked-1x1">locked · 1:1</option>
|
|
<option value="locked-3x2">locked · 3:2</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="compare-grid" id="panel-host"></div>
|
|
|
|
</section>
|
|
|
|
<template id="compare-panel-tpl">
|
|
<article class="compare-panel">
|
|
<header class="compare-panel-head">
|
|
<span class="panel-tag" data-role="label">●</span>
|
|
<span class="panel-embedder" data-role="embedder">…</span>
|
|
<span class="panel-sep">·</span>
|
|
<span class="panel-generator" data-role="generator">…</span>
|
|
<a class="panel-stem" data-role="stem-link" href="#" target="_blank">↗</a>
|
|
<span class="panel-params" data-role="params">loading…</span>
|
|
</header>
|
|
<div class="compare-canvas" data-role="canvas">
|
|
<div class="compare-status" data-role="status">loading…</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script src="/static/theme.js?v=11"></script>
|
|
<script type="module" src="/static/compare.js?v=17"></script>
|
|
<!-- panel-grid.js is imported by compare.js (module); versioned via compare.js cache-bust -->
|
|
|
|
</body>
|
|
</html>
|