From 10524d5d9bd6791786ef6d8f3130102295d300ce Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Sat, 14 Feb 2026 02:51:26 -0500
Subject: [PATCH] Move sensors vertical between cam and calendar in bottom
 strip

---
 index.html | 76 ++++++++++++++++++++++++++----------------------------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/index.html b/index.html
index f6a15e6..ecb7c95 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@ body { background: #0a0a0a; color: #e0ddd5; font-family: 'Sora', sans-serif; ove
 #right { width: 42%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; }
 
 /* Camera */
-#cam-wrap { width: 70%; border-radius: 8px; overflow: hidden; border: 1px solid #222; flex-shrink: 0; }
+#cam-wrap { flex: 1; min-width: 0; border-radius: 8px; overflow: hidden; border: 1px solid #222; flex-shrink: 0; }
 #pulse-cam { width: 100%; display: block; background: #111; }
 
 /* Clock */
@@ -23,16 +23,19 @@ canvas#clock { width: 180px; height: 180px; }
 #digital-time { text-align: center; color: #c8b273; font-size: 21px; font-weight: 300; letter-spacing: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; }
 #digital-date { text-align: center; color: #666; font-size: 13px; font-weight: 400; letter-spacing: 1px; margin-top: 2px; }
 
+/* Bottom strip: cam | sensors | calendar */
+#bottom-strip { display: flex; align-items: center; gap: 16px; width: 100%; }
+
 /* Room sensors */
-#room-sensors { display: flex; gap: 20px; justify-content: center; width: 100%; max-width: 280px; padding: 8px 0; }
+#room-sensors { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
 #room-sensors .sensor { text-align: center; }
-#room-sensors .sensor-val { font-size: 22px; font-weight: 300; color: #e0ddd5; font-variant-numeric: tabular-nums; }
-#room-sensors .sensor-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
+#room-sensors .sensor-val { font-size: 20px; font-weight: 300; color: #e0ddd5; font-variant-numeric: tabular-nums; line-height: 1.2; }
+#room-sensors .sensor-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
 #room-sensors .sensor-val.warn { color: #d4a050; }
 #room-sensors .sensor-val.crit { color: #c45; }
 
 /* Calendar */
-#calendar { width: 100%; max-width: 280px; }
+#calendar { flex-shrink: 0; width: 180px; }
 #cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
 #cal-nav button { background: none; border: 1px solid #333; color: #c8b273; font-family: 'Sora'; font-size: 15px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
 #cal-nav button:hover { background: #1a1a1a; border-color: #c8b273; }
@@ -80,24 +83,26 @@ canvas#clock { width: 180px; height: 180px; }
     <div id="alerts-header"><span class="dot"></span> STATUS</div>
     <div id="alert-list"></div>
   </div>
-  <div id="cam-wrap"><img id="pulse-cam" alt="Pulse-Ox"></div>
 </div>
 <div id="right">
   <div id="clock-wrap"><canvas id="clock" width="440" height="440"></canvas></div>
   <div id="digital-time"></div>
   <div id="digital-date"></div>
-  <div id="room-sensors" style="display:none">
-    <div class="sensor"><div class="sensor-val" id="s-temp">--</div><div class="sensor-label">Temp</div></div>
-    <div class="sensor"><div class="sensor-val" id="s-hum">--</div><div class="sensor-label">Humidity</div></div>
-    <div class="sensor"><div class="sensor-val" id="s-co2">--</div><div class="sensor-label">CO₂</div></div>
-  </div>
-  <div id="calendar">
-    <div id="cal-nav">
-      <button id="cal-prev">‹</button>
-      <div id="cal-title"></div>
-      <button id="cal-next">›</button>
+  <div id="bottom-strip" style="display:none">
+    <div id="cam-wrap"><img id="pulse-cam" alt="Pulse-Ox"></div>
+    <div id="room-sensors" style="display:none">
+      <div class="sensor"><div class="sensor-val" id="s-temp">--</div><div class="sensor-label">Temp</div></div>
+      <div class="sensor"><div class="sensor-val" id="s-hum">--</div><div class="sensor-label">Humidity</div></div>
+      <div class="sensor"><div class="sensor-val" id="s-co2">--</div><div class="sensor-label">CO₂</div></div>
+    </div>
+    <div id="calendar">
+      <div id="cal-nav">
+        <button id="cal-prev">‹</button>
+        <div id="cal-title"></div>
+        <button id="cal-next">›</button>
+      </div>
+      <div id="cal-grid"></div>
     </div>
-    <div id="cal-grid"></div>
   </div>
 </div>
 
@@ -352,8 +357,11 @@ evtSource.onerror = () => { setTimeout(() => location.reload(), 5000); };
 // Resume audio on first interaction
 document.addEventListener('click', () => { if (audioCtx.state === 'suspended') audioCtx.resume(); }, { once: true });
 
-// === ROOM SENSORS (7pm - 8am only) ===
+// === NIGHT STRIP: Camera + Sensors (7pm - 8am only) ===
+const bottomStrip = document.getElementById('bottom-strip');
 const sensorEl = document.getElementById('room-sensors');
+const camImg = document.getElementById('pulse-cam');
+const camWrap = document.getElementById('cam-wrap');
 
 function isNightTime() {
   const h = new Date().getHours();
@@ -361,8 +369,6 @@ function isNightTime() {
 }
 
 async function updateSensors() {
-  if (!isNightTime()) { sensorEl.style.display = 'none'; return; }
-  sensorEl.style.display = '';
   try {
     const r = await fetch('/api/sensors/bed1');
     const d = await r.json();
@@ -370,12 +376,12 @@ async function updateSensors() {
     const tempC = ((tempF - 32) * 5/9).toFixed(1);
     document.getElementById('s-temp').textContent = Math.round(tempF) + '°';
     document.getElementById('s-temp').title = tempC + '°C';
-    
+
     const hum = parseFloat(d.humidity);
     const humEl = document.getElementById('s-hum');
     humEl.textContent = Math.round(hum) + '%';
     humEl.className = 'sensor-val' + (hum < 30 || hum > 65 ? ' warn' : '');
-    
+
     const co2 = parseInt(d.co2);
     const co2El = document.getElementById('s-co2');
     co2El.textContent = co2;
@@ -383,32 +389,22 @@ async function updateSensors() {
   } catch(e) { console.error('Sensor fetch failed:', e); }
 }
 
-updateSensors();
-setInterval(updateSensors, 30000);
-
-// === PULSE-OX CAMERA (7pm - 8am only) ===
-const camImg = document.getElementById('pulse-cam');
-const camWrap = document.getElementById('cam-wrap');
-
-function isCamTime() {
-  const h = new Date().getHours();
-  return h >= 19 || h < 8;
-}
-
-function updateCam() {
-  if (isCamTime()) {
-    camWrap.style.display = '';
+function updateNightStrip() {
+  if (isNightTime()) {
+    bottomStrip.style.display = '';
+    sensorEl.style.display = '';
     if (!camImg.src.includes('/stream')) {
       camImg.src = '/api/cam/pulse-ox/stream';
     }
+    updateSensors();
   } else {
-    camWrap.style.display = 'none';
+    bottomStrip.style.display = 'none';
     camImg.src = '';
   }
 }
 
-updateCam();
-setInterval(updateCam, 60000);
+updateNightStrip();
+setInterval(updateNightStrip, 30000);
 </script>
 </body>
 </html>