72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
<!doctype html>
|
||
<html lang="en-AU">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Hudra</title>
|
||
<link rel="stylesheet" href="controls.css">
|
||
</head>
|
||
<body>
|
||
<main class="presenter-shell">
|
||
<header class="topbar">
|
||
<div>
|
||
<div class="brand">HUDRA</div>
|
||
<h1 id="page-title">Loading lesson…</h1>
|
||
</div>
|
||
<div class="top-meta">
|
||
<span id="screen-status">Audience screen active</span>
|
||
<span id="current-time">--:--</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="preview-grid">
|
||
<article class="preview-card current-card">
|
||
<div class="preview-label">NOW</div>
|
||
<iframe id="current-preview" title="Current slide preview"></iframe>
|
||
</article>
|
||
<article class="preview-card next-card">
|
||
<div class="preview-label">NEXT</div>
|
||
<iframe id="next-preview" title="Next slide preview"></iframe>
|
||
</article>
|
||
</section>
|
||
|
||
<footer class="control-deck">
|
||
<div class="deck-left">
|
||
<div id="slide-counter" class="slide-counter">Preparing slides…</div>
|
||
<div class="time-block"><span class="time-label">Elapsed</span><span id="elapsed-time">00:00</span></div>
|
||
</div>
|
||
|
||
<div class="transport">
|
||
<button id="first" type="button" title="First slide">|←</button>
|
||
<button id="previous" type="button">← Previous</button>
|
||
<button id="next" type="button" class="primary">Next →</button>
|
||
<button id="last" type="button" title="Last slide">→|</button>
|
||
</div>
|
||
|
||
<div class="view-controls" aria-label="Audience view controls">
|
||
<div class="control-group">
|
||
<span class="control-label">Zoom</span>
|
||
<button id="zoom-out" type="button" title="Zoom audience out">−</button>
|
||
<output id="zoom-value">100%</output>
|
||
<button id="zoom-in" type="button" title="Zoom audience in">+</button>
|
||
</div>
|
||
<div class="control-group">
|
||
<span class="control-label">Scroll</span>
|
||
<button id="scroll-up" type="button" title="Scroll audience up">↑</button>
|
||
<button id="scroll-down" type="button" title="Scroll audience down">↓</button>
|
||
</div>
|
||
<button id="reset-view" type="button">Reset view</button>
|
||
<span id="view-status" class="view-status">Fit · top</span>
|
||
</div>
|
||
|
||
<div class="utility-controls">
|
||
<button id="video" type="button">Play / Pause video</button>
|
||
<button id="audience" type="button">Hide audience</button>
|
||
<button id="exit" type="button" class="danger">End</button>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
<script src="controls.js"></script>
|
||
</body>
|
||
</html>
|