From 4cb421b3d6e671b7fa22f012b404288b2ad64ede Mon Sep 17 00:00:00 2001
From: John Rogers <git@shed.gay>
Date: Tue, 29 Jul 2025 12:25:40 +0100
Subject: [PATCH] fix: clarify timeturner offset controls with labels

Co-authored-by: aider (gemini/gemini-2.5-pro-preview-05-06) <aider@aider.chat>
---
 static/index.html | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/static/index.html b/static/index.html
index d5969db..594d022 100644
--- a/static/index.html
+++ b/static/index.html
@@ -50,16 +50,29 @@
                     <input type="number" id="hw-offset" name="hw-offset">
                 </div>
                 <div class="control-group">
-                    <label>Timeturner Offset: HH:MM:SS:f.ms</label>
-                    <input type="number" id="offset-h" placeholder="H">
-                    <label>:</label>
-                    <input type="number" id="offset-m" placeholder="M">
-                    <label>:</label>
-                    <input type="number" id="offset-s" placeholder="S">
-                    <label>.</label>
-                    <input type="number" id="offset-f" placeholder="F">
-                    <label>.</label>
-                    <input type="number" id="offset-ms" placeholder="ms">
+                    <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>