101 lines
4 KiB
HTML
101 lines
4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="robots" content="noindex" />
|
||
<title>Array Control</title>
|
||
<link rel="stylesheet" href="control.css" />
|
||
</head>
|
||
<body class="panel">
|
||
<main class="rig">
|
||
<header class="plate">
|
||
<span class="stencil">ARRAY CONTROL · HANDLER ONLY</span>
|
||
<span class="link"><i class="lamp" id="lampLink"></i> LINK</span>
|
||
</header>
|
||
|
||
<!-- live mirror of what the players see -->
|
||
<section class="mirror">
|
||
<div class="mirror-time">
|
||
<span class="big" id="mClock">17:00:00</span>
|
||
<span class="run" id="mRun">PAUSED</span>
|
||
</div>
|
||
<div class="mirror-meta">
|
||
<span>COMMUNION IN <b id="mCountdown">—:—:—</b></span>
|
||
<span>ITERATION <b id="mIter">I</b></span>
|
||
<span>NEXT <b id="mNext">—</b></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- token -->
|
||
<section class="bank">
|
||
<label class="bank-label" for="token">CONTROL KEY</label>
|
||
<div class="row">
|
||
<input id="token" type="password" autocomplete="off" placeholder="shared token" />
|
||
<button class="btn" id="saveToken" type="button">SET</button>
|
||
<span class="hint" id="tokenHint"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- transport -->
|
||
<section class="bank">
|
||
<span class="bank-label">TRANSPORT</span>
|
||
<div class="row">
|
||
<button class="btn btn--wide" data-cmd="play" type="button">▶ RUN</button>
|
||
<button class="btn btn--wide" data-cmd="pause" type="button">⏸ HOLD</button>
|
||
</div>
|
||
<div class="row rates" id="rates">
|
||
<span class="sub">RATE</span>
|
||
<button class="btn rate" data-rate="1" type="button">×1</button>
|
||
<button class="btn rate" data-rate="6" type="button">×6</button>
|
||
<button class="btn rate" data-rate="30" type="button">×30</button>
|
||
<button class="btn rate" data-rate="60" type="button">×60</button>
|
||
<button class="btn rate" data-rate="300" type="button">×300</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- timeline jumps -->
|
||
<section class="bank">
|
||
<span class="bank-label">JUMP TO BEAT</span>
|
||
<div class="grid" id="jumps"></div>
|
||
<div class="row">
|
||
<span class="sub">SET</span>
|
||
<input id="manualTime" type="time" step="1" value="17:00:00" />
|
||
<button class="btn" id="manualJump" type="button">JUMP</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- iterations -->
|
||
<section class="bank">
|
||
<span class="bank-label">ITERATION — resets reality to its wake point</span>
|
||
<div class="row iters" id="iters">
|
||
<button class="btn iter" data-iter="1" type="button">I · 17:00</button>
|
||
<button class="btn iter" data-iter="2" type="button">II · 18:46</button>
|
||
<button class="btn iter" data-iter="3" type="button">III · 20:57</button>
|
||
<button class="btn iter" data-iter="4" type="button">IV · SINGULARITY</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- effects -->
|
||
<section class="bank">
|
||
<span class="bank-label">EFFECTS — fire on the players' screen</span>
|
||
<div class="row">
|
||
<button class="btn btn--amber btn--big" data-cmd="pulse" type="button">◉ PULSE</button>
|
||
<button class="btn btn--red btn--big" data-cmd="communion" type="button">☢ COMMUNION</button>
|
||
</div>
|
||
<div class="row">
|
||
<input id="msg" type="text" maxlength="60" placeholder="broadcast a line of text…" />
|
||
<button class="btn" id="sendMsg" type="button">SHOW</button>
|
||
<button class="btn" id="clearMsg" type="button">CLEAR</button>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="foot">
|
||
Player screen: <a id="clockLink" href="clock.html" target="_blank" rel="noopener">open the chronometer ↗</a>
|
||
</footer>
|
||
</main>
|
||
|
||
<script src="common.js"></script>
|
||
<script src="control.js"></script>
|
||
</body>
|
||
</html>
|