From a009dd35c9ef729ea5558d9a618c80c81adaa3c8 Mon Sep 17 00:00:00 2001
From: Chris Frankland-Wright <christopherjfrankland@googlemail.com>
Date: Tue, 12 Aug 2025 16:28:32 +0100
Subject: [PATCH] updated web ui

---
 static/index.html     |   4 +-
 static/index_dev.html | 141 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 static/index_dev.html
diff --git a/static/index.html b/static/index.html
index 1e8d400..deb683d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -96,8 +96,8 @@
                         </div>
                     </div>
                     <div class="control-group">
-                        <button id="save-config">Save Config</button>
-                        <button id="manual-sync">Manual Sync</button>
+                        <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;">
diff --git a/static/index_dev.html b/static/index_dev.html
new file mode 100644
index 0000000..edc555d
--- /dev/null
+++ b/static/index_dev.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NTP TimeTurner</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">
+        <label for="hw-offset">Hardware Offset (ms):</label>
+        <input type="number" id="hw-offset" name="hw-offset">
+    </div>
+    <div class="control-group">
+        <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 style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
+                            <div style="display: flex; flex-direction: column;">
+                                <label for="offset-h">Hours</label>
+                                <input type="number" id="offset-h" style="width: 60px;">
+                            </div>
+                            <div style="display: flex; flex-direction: column;">
+                                <label for="offset-m">Minutes</label>
+                                <input type="number" id="offset-m" style="width: 60px;">
+                            </div>
+                            <div style="display: flex; flex-direction: column;">
+                                <label for="offset-s">Seconds</label>
+                                <input type="number" id="offset-s" style="width: 60px;">
+                            </div>
+                            <div style="display: flex; flex-direction: column;">
+                                <label for="offset-f">Frames</label>
+                                <input type="number" id="offset-f" style="width: 60px;">
+                            </div>
+                            <div style="display: flex; flex-direction: column;">
+                                <label for="offset-ms">Milliseconds</label>
+                                <input type="number" id="offset-ms" style="width: 60px;">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <button id="save-config">Save Config</button>
+                        <button id="manual-sync">Manual Sync</button>
+                        <span id="sync-message"></span>
+                    </div>
+                    <div class="control-group">
+                        <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 John 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>
