johan
/
alert-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move sensors next to pulse-ox cam in left pane, vertical stack

This commit is contained in:
James 2026-02-14 02:54:32 -05:00
parent de4224ead4
commit cc36e486c3
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -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; border-radius: 8px; overflow: hidden; border: 1px solid #222; flex-shrink: 0; }
#pulse-cam { width: 100%; display: block; background: #111; }
/* Clock */
@ -23,8 +23,11 @@ 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; }
/* Cam + sensors row */
#cam-row { display: flex; align-items: center; gap: 14px; }
/* 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: 8px; 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; }
@ -80,17 +83,19 @@ 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-row">
<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>
</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="calendar">
<div id="cal-nav">
<button id="cal-prev">‹</button>