From 02487bda97e4d4999682472db9d40a435e25cef9 Mon Sep 17 00:00:00 2001
From: Chris Frankland-Wright <christopherjfrankland@googlemail.com>
Date: Fri, 8 Aug 2025 01:17:38 +0100
Subject: [PATCH] feat: Move delta value below icon and add label

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 static/index.html | 1 +
 static/script.js  | 7 +++++--
 static/style.css  | 8 +++-----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/static/index.html b/static/index.html
index 6f92343..18067a4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -43,6 +43,7 @@
                     <span id="jitter-status"></span>
                     <span id="delta-status"></span>
                 </div>
+                <p id="delta-text">Delta Value: -- ms (-- frames)</p>
             </div>
 
             <!-- Network Interfaces -->
diff --git a/static/script.js b/static/script.js
index 3871c73..d489585 100644
--- a/static/script.js
+++ b/static/script.js
@@ -18,6 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
         syncStatus: document.getElementById('sync-status'),
         deltaStatus: document.getElementById('delta-status'),
         jitterStatus: document.getElementById('jitter-status'),
+        deltaText: document.getElementById('delta-text'),
         interfaces: document.getElementById('interfaces'),
         logs: document.getElementById('logs'),
     };
@@ -134,8 +135,10 @@ document.addEventListener('DOMContentLoaded', () => {
             deltaCategory = 'bad';
         }
         const deltaIconInfo = iconMap.deltaStatus[deltaCategory];
-        const deltaText = `${data.timecode_delta_ms} ms (${data.timecode_delta_frames} frames)`;
-        statusElements.deltaStatus.innerHTML = `<img src="${deltaIconInfo.src}" class="status-icon" alt="" title="${deltaIconInfo.tooltip}"><span>${deltaText}</span>`;
+        statusElements.deltaStatus.innerHTML = `<img src="${deltaIconInfo.src}" class="status-icon" alt="" title="${deltaIconInfo.tooltip}">`;
+
+        const deltaTextValue = `${data.timecode_delta_ms} ms (${data.timecode_delta_frames} frames)`;
+        statusElements.deltaText.textContent = `Delta Value: ${deltaTextValue}`;
 
         const jitterStatus = data.jitter_status || 'UNKNOWN';
         const jitterIconInfo = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;
diff --git a/static/style.css b/static/style.css
index 6d1f829..0c6d4e3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -122,13 +122,11 @@ button:hover {
     margin: 10px 0;
 }
 
-#delta-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
+#delta-text {
+    text-align: center;
 }
 
-#ltc-status, #ntp-active, #sync-status, #jitter-status, #frame-rate, #lock-ratio {
+#ltc-status, #ntp-active, #sync-status, #jitter-status, #frame-rate, #lock-ratio, #delta-status {
     display: flex;
     justify-content: center;
     align-items: center;