modify UI

judgy_reachy_no_phone/static/index.html

@@ -20,6 +20,14 @@
             <span id="status-text">Not monitoring</span>
         </div>
 
+        <!-- Camera Feed -->
+        <div class="video-container">
+            <img id="video-feed" src="" alt="Camera feed will appear here when monitoring starts">
+            <div id="video-placeholder" class="video-placeholder">
+                📷 Camera feed will appear here
+            </div>
+        </div>
+
         <!-- Stats Grid -->
         <div class="stats-grid">
             <div class="stat-card red">

judgy_reachy_no_phone/static/main.js

@@ -12,6 +12,28 @@ function formatDuration(seconds) {
     return hours + 'h' + mins + 'm';
 }
 
+// Update video feed
+async function updateVideo() {
+    try {
+        const response = await fetch('/api/video-frame');
+        const data = await response.json();
+
+        const videoFeed = document.getElementById('video-feed');
+        const placeholder = document.getElementById('video-placeholder');
+
+        if (data.frame) {
+            videoFeed.src = 'data:image/jpeg;base64,' + data.frame;
+            videoFeed.classList.add('active');
+            placeholder.classList.add('hidden');
+        } else {
+            videoFeed.classList.remove('active');
+            placeholder.classList.remove('hidden');
+        }
+    } catch (e) {
+        console.error('Video update failed:', e);
+    }
+}
+
 // Update display from API data
 async function updateDisplay() {
     try {
@@ -95,8 +117,12 @@ document.getElementById('cooldown').addEventListener('input', (e) => {
 document.getElementById('toggle-btn').addEventListener('click', toggleMonitoring);
 document.getElementById('test-btn').addEventListener('click', testShame);
 
-// Auto-update every 500ms - only updates text content, no DOM manipulation
-setInterval(updateDisplay, 500);
+// Auto-update every 100ms for smooth video
+setInterval(() => {
+    updateVideo();
+    updateDisplay();
+}, 100);
 
 // Initial update
 updateDisplay();
+updateVideo();

judgy_reachy_no_phone/static/style.css

@@ -56,6 +56,34 @@ body {
     color: #6b7280;
 }
 
+.video-container {
+    padding: 0 20px 20px 20px;
+    position: relative;
+}
+
+#video-feed {
+    width: 100%;
+    border-radius: 10px;
+    display: none;
+}
+
+#video-feed.active {
+    display: block;
+}
+
+.video-placeholder {
+    background: #f3f4f6;
+    border-radius: 10px;
+    padding: 60px 20px;
+    text-align: center;
+    color: #6b7280;
+    font-size: 16px;
+}
+
+.video-placeholder.hidden {
+    display: none;
+}
+
 #status-text.monitoring {
     color: #22c55e;
 }