compare.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Compare trips - MEOS.js x DeckGL</title>
		<link rel="stylesheet" href="./styles/compare.css" />
		<script>
			document.documentElement.dataset.theme =
				localStorage.getItem('meos-theme') === 'light' ? 'light' : 'dark';
		</script>
	</head>
	<body>
		<div id="map"></div>
		<div id="panel">
			<button id="themeToggle" class="theme-toggle" type="button">☀ Light</button>
			<a class="back" href="./index.html">← all examples</a>
			<h1>Compare trips</h1>
			<div id="status"><span class="spinner"></span>Loading MEOS (wasm64, ~24 MB on first load)...</div>
			<p id="intro" hidden>
				Two BerlinMOD trips. B is pushed later in time with MEOS
				<code>shiftTime</code>; tick <em>Align</em> to overlay it on A's window
				with <code>shiftScaleTime</code> (shift + scale at once).
			</p>
			<div id="controls" hidden>
				<div class="row">
					<label class="swatch a">A
						<select id="tripA"></select>
					</label>
					<label class="swatch b">B
						<select id="tripB"></select>
					</label>
				</div>
				<label class="field-label">B starts later <span id="offsetVal">+25 min</span></label>
				<input id="offset" type="range" min="0" max="60" value="25" step="1" />
				<label class="align">
					<input type="checkbox" id="align" /> Align B onto A
					(MEOS <code>shiftScaleTime</code>)
				</label>
				<div id="readout"></div>
				<div id="transport">
					<button id="playPause" type="button">⏸ Pause</button>
					<label>speed
						<select id="speed">
							<option value="0.5">0.5x</option>
							<option value="1" selected>1x</option>
							<option value="2">2x</option>
							<option value="4">4x</option>
						</select>
					</label>
				</div>
				<label>time <span id="clock"></span></label>
				<input id="time" type="range" min="0" max="1" value="0" step="0.001" />
			</div>
		</div>
		<script type="module" src="/src/compare.ts"></script>
	</body>
</html>