mirror of
https://github.com/cjfranko/NTP-Timeturner.git
synced 2025-11-08 18:32:02 +00:00
141 lines
6.4 KiB
HTML
141 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fetch | Hachi</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<img src="assets/header.png" alt="NTP Timeturner" class="header-logo">
|
|
|
|
<!-- Mock Data Controls (hidden by default) -->
|
|
<div id="mock-controls" class="card full-width" style="display: none;">
|
|
<h2>Mock Data Controls</h2>
|
|
<div class="control-group">
|
|
<label for="mock-data-selector">Select Mock Data Scenario:</label>
|
|
<select id="mock-data-selector"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<!-- LTC Status -->
|
|
<div class="card">
|
|
<h2>LTC Input</h2>
|
|
<p id="ltc-timecode">--:--:--:--</p>
|
|
<div class="icon-group">
|
|
<span id="ltc-status"></span>
|
|
<span id="frame-rate"></span>
|
|
<span id="lock-ratio"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Clock & Sync -->
|
|
<div class="card">
|
|
<h2>NTP Clock</h2>
|
|
<p id="system-clock">--:--:--.---</p>
|
|
<p class="system-date-display"><span id="system-date">---- -- --</span></p>
|
|
<div class="icon-group">
|
|
<span id="ntp-active"></span>
|
|
<span id="sync-status"></span>
|
|
<span id="jitter-status"></span>
|
|
<span id="delta-status"></span>
|
|
</div>
|
|
<p id="delta-text">Δ -- ms (-- frames)</p>
|
|
</div>
|
|
|
|
<!-- Network Interfaces -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<img src="assets/timeturner_network.png" class="header-icon" alt="Network Icon">
|
|
<h2>Network</h2>
|
|
</div>
|
|
<p id="interfaces">--</p>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="card full-width collapsible-card">
|
|
<div class="toggle-header" id="controls-toggle">
|
|
<img src="assets/timeturner_controls.png" class="toggle-icon" alt="Controls Icon">
|
|
<h2>Controls</h2>
|
|
</div>
|
|
<div class="collapsible-content" id="controls-content">
|
|
<div class="control-group" style="display: none;">
|
|
<label for="hw-offset">Hardware Offset (ms):</label>
|
|
<input type="number" id="hw-offset" name="hw-offset">
|
|
</div>
|
|
<div class="control-group" style="display: none;">
|
|
<input type="checkbox" id="auto-sync-enabled" name="auto-sync-enabled" style="vertical-align: middle;">
|
|
<label for="auto-sync-enabled" style="vertical-align: middle;">Enable Auto Sync</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>Timeturner Offset</label>
|
|
<div class="offset-controls-container">
|
|
<div class="offset-control">
|
|
<input type="number" id="offset-h" min="-99" max="99">
|
|
<label for="offset-h">hr</label>
|
|
</div>
|
|
<div class="offset-control">
|
|
<input type="number" id="offset-m" min="-99" max="99">
|
|
<label for="offset-m">min</label>
|
|
</div>
|
|
<div class="offset-control">
|
|
<input type="number" id="offset-s" min="-99" max="99">
|
|
<label for="offset-s">sec</label>
|
|
</div>
|
|
<div class="offset-control">
|
|
<input type="number" id="offset-f" min="-99" max="99">
|
|
<label for="offset-f">fr</label>
|
|
</div>
|
|
<div class="offset-control">
|
|
<input type="number" id="offset-ms">
|
|
<label for="offset-ms">ms</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<button id="save-config">Save Timeturner Config</button>
|
|
<button id="manual-sync">Send Manual Sync</button>
|
|
<span id="sync-message"></span>
|
|
</div>
|
|
<div class="control-group" style="display: none;">
|
|
<label>Nudge Clock (ms):</label>
|
|
<button id="nudge-down">-</button>
|
|
<input type="number" id="nudge-value" style="width: 60px;">
|
|
<button id="nudge-up">+</button>
|
|
<span id="nudge-message"></span>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="date-input">Set System Date:</label>
|
|
<input type="text" id="date-input" placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
|
|
<button id="set-date">Set Date</button>
|
|
<span id="date-message"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs -->
|
|
<div class="card full-width collapsible-card">
|
|
<div class="toggle-header" id="logs-toggle">
|
|
<img src="assets/timeturner_logs.png" class="toggle-icon" alt="Logs Icon">
|
|
<h2>Logs</h2>
|
|
</div>
|
|
<div class="collapsible-content" id="logs-content">
|
|
<pre id="logs" class="log-box"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<p>
|
|
Built by Chris Frankland-Wright and Chaos Rogers | Have Blue Broadcast Media |
|
|
<a href="https://github.com/cjfranko/NTP-Timeturner" target="_blank" rel="noopener noreferrer">https://github.com/cjfranko/NTP-Timeturner</a>
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
<script src="icon-map.js"></script>
|
|
<script src="mock-data.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|