diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..416105b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,54 @@
+# Environment variables
+.env
+.env.local
+.env.*.local
+
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+.venv/
+ENV/
+*.egg-info/
+dist/
+build/
+*.egg
+
+# YOLO model weights
+*.pt
+*.onnx
+*.engine
+
+# SSL certificates
+*.pem
+cert.pem
+key.pem
+
+# Video files
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Node (if any)
+node_modules/
+
+# Temporary files
+tmp/
+temp/
+*.tmp
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..e0d2e50
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,9 @@
+# Core dependencies for SF Security Camera Backend
+websockets>=12.0
+numpy>=1.24.0
+opencv-python>=4.8.0
+ultralytics>=8.0.0  # YOLOv8 for pose detection
+
+# Optional - for OpenAI integration if needed
+openai>=1.0.0
+python-dotenv>=1.0.0
diff --git a/webapp/backend.py b/webapp/backend.py
index 53a1796..91a12a9 100644
--- a/webapp/backend.py
+++ b/webapp/backend.py
@@ -1,10 +1,7 @@
 #!/usr/bin/env python3
 """
-SF Security Camera Backend - Multi-Person Pose Detection
-- YOLOv8-Pose for multi-person skeleton detection
-- Action recognition based on body keypoints
-- Audio analysis (speech detection, volume levels, sound classification)
-- Real-time streaming of all events
+Nimverse Backend - Multi-Person Pose Detection
+Real-time streaming of detection events
 """
 
 import asyncio
@@ -19,14 +16,15 @@
 from datetime import datetime
 import os
 
-# YOLOv8 Pose
+from dotenv import load_dotenv
+load_dotenv()
+
 from ultralytics import YOLO
 
-# Configuration
 CONFIDENCE_THRESHOLD = 0.5
 AUDIO_THRESHOLD = 0.02
 
-# YOLO Pose keypoint indices
+# Keypoint indices
 NOSE = 0
 LEFT_EYE = 1
 RIGHT_EYE = 2
@@ -47,20 +45,19 @@
 
 
 class MultiPersonPoseDetector:
-    """Detect multiple people and their poses using YOLOv8-Pose"""
+    """Multi-person pose detection"""
 
     def __init__(self):
-        print("[DETECTOR] Loading YOLOv8-Pose model...")
+        print("[DETECTOR] Loading BodyPose model...")
         self.model = YOLO('yolov8n-pose.pt')
         self.next_person_id = 0
-        self.tracked_persons = {}  # Store previous frame positions for ID tracking
-        print("[DETECTOR] YOLOv8-Pose multi-person detector loaded")
+        self.tracked_persons = {}
+        print("[DETECTOR] BodyPose detector ready")
 
     def detect(self, frame):
         """Detect all people and their poses in frame"""
         h, w = frame.shape[:2]
 
-        # Run YOLO pose detection
         results = self.model(frame, verbose=False, conf=CONFIDENCE_THRESHOLD)
 
         detections = []
@@ -368,7 +365,6 @@ def __init__(self):
         self.volume_history = []
         self.speech_duration = 0
         self.silence_duration = 0
-        print("[AUDIO] Audio analyzer initialized")
 
     def analyze(self, audio_data):
         if audio_data is None or len(audio_data) == 0:
@@ -614,6 +610,12 @@ async def process_client(websocket):
 
                 # Process video frame
                 if data.get("type") == "frame" and data.get("data"):
+                    # Include camera ID in response
+                    cam_id = data.get("cam_id", 0)
+                    cam_name = data.get("cam_name", "CAM 1")
+                    response["cam_id"] = cam_id
+                    response["cam_name"] = cam_name
+
                     img_data = base64.b64decode(data["data"].split(",")[1])
                     nparr = np.frombuffer(img_data, np.uint8)
                     frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
@@ -674,17 +676,28 @@ async def process_client(websocket):
         print(f"[CONNECTION] Client disconnected")
 
 
+from websockets.datastructures import Headers
+from websockets.http11 import Response
+
+async def health_check(connection, request):
+    """Handle direct browser visits to accept the SSL certificate"""
+    if request.headers.get("Upgrade", "").lower() != "websocket":
+        # Regular HTTP request - serve a simple page for cert acceptance
+        body = b"""<!DOCTYPE html>
+<html><head><title>AI Backend</title></head>
+<body style="font-family:system-ui;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#0f1419;color:#22c55e;">
+<div style="text-align:center">
+<h1>Certificate Accepted</h1>
+<p>You can close this tab and return to the app.</p>
+</div>
+</body></html>"""
+        return Response(200, "OK", Headers([("Content-Type", "text/html")]), body)
+    return None  # Continue with WebSocket handshake
+
+
 async def main():
     print("=" * 60)
-    print("SF Security Camera - Multi-Person Pose Detection")
-    print("=" * 60)
-    print("Features:")
-    print("  - YOLOv8-Pose multi-person detection")
-    print("  - Per-person tracking with consistent IDs")
-    print("  - Actions: standing, walking, running, sitting, crouching,")
-    print("             falling, lying, bending, hand_raised")
-    print("  - Audio: speech, shouting, help keyword, cough")
-    print("  - Incidents: falls, fights, person down, distress")
+    print("Nimverse - NVIDIA DeepStream Backend")
     print("=" * 60)
 
     ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
@@ -694,10 +707,10 @@ async def main():
     if os.path.exists(cert_path) and os.path.exists(key_path):
         ssl_context.load_cert_chain(cert_path, key_path)
         print("[SERVER] SSL enabled")
-        server = await websockets.serve(process_client, "0.0.0.0", 8765, ssl=ssl_context)
+        server = await websockets.serve(process_client, "0.0.0.0", 8765, ssl=ssl_context, process_request=health_check)
     else:
         print("[SERVER] No SSL (development mode)")
-        server = await websockets.serve(process_client, "0.0.0.0", 8765)
+        server = await websockets.serve(process_client, "0.0.0.0", 8765, process_request=health_check)
 
     print("[SERVER] WebSocket listening on port 8765")
     print("=" * 60)
diff --git a/webapp/cert.pem b/webapp/cert.pem
index 4efc0af..8b2d1ae 100644
--- a/webapp/cert.pem
+++ b/webapp/cert.pem
@@ -1,29 +1,17 @@
 -----BEGIN CERTIFICATE-----
-MIIFCTCCAvGgAwIBAgIUI4LE3pJrca/jPjYAVcVjccU+LywwDQYJKoZIhvcNAQEL
-BQAwFDESMBAGA1UEAwwJbG9jYWxob3N0MB4XDTI2MDEyNTA3MTI0MFoXDTI3MDEy
-NTA3MTI0MFowFDESMBAGA1UEAwwJbG9jYWxob3N0MIICIjANBgkqhkiG9w0BAQEF
-AAOCAg8AMIICCgKCAgEA09Asonf+B1xHTG5sZcr/YH7B+mZEim/E5hbgHh5cZ1jO
-eg0No32bNQ7+xS2EesqLpabM4g8KvI1DZR5a95rqczRYvRx5baYE8LkHoEL02YMr
-tuu1/vYIyfcEbgT+5xqwQYz+g/E6yaGc4/whIrkcHJeNxKjHK1T4LoJ3qrA5JEIf
-NLwO4xg3d3Pl7+IUtSSJOXTFdFn4mkI7WvdYs/ijeRrEfL0tzPQ09UkPRXLG1KoI
-trLqCaedyv06yLhx/39Wvrs9tFL027qBhSYG2YHnSANQjvRF4fH/Mxk9xhldlTLp
-5uiQCBwoIMW15qULxuEFU6qIkaA39AeLoeQhhNuNAn6dZivrQlFpxlBOIb2wNCRf
-UiU/oa7aMpFqtxRCS2aPoEBNh5PQd1O30bRq1WufU4cRH0uUPKogwVWSPbTWJCc+
-Tj2WAf+NvmQEKM782PKUwHfpi48RynE+guwaxGAalspBUajwDN0t8BiRtn/JmQDZ
-Ryi5MiP6M5JqqdY9M/N9fg/Ak38hhYTFId25Dk0uM1VuJwF/EWfsQ6Foz4wNNSmr
-3M2eAjqym/DOKRf3OLpPKso24mg30Je0xowhoZLgp7/g2jpgSbUPmT33IaVeS3T3
-DBPFzbpj/LfSNVQ2j3GxHDKgAlnn3Gf1/HGb9jrYE2hCEZpu78yYsyzaozia8YUC
-AwEAAaNTMFEwHQYDVR0OBBYEFPbiuY1EKvwJlouYpdMD0IDNm5nvMB8GA1UdIwQY
-MBaAFPbiuY1EKvwJlouYpdMD0IDNm5nvMA8GA1UdEwEB/wQFMAMBAf8wDQYJKoZI
-hvcNAQELBQADggIBAD6Z30GyysWjiD7+YSHYjSs/Npz8bzBEGsQtzdTPA24QfN+w
-bdwEUoYtt0XyzP9YaTtqJUOV2kdo24kbEpEYYpkF/jz3+Z+6N7AEn6me9WgMGSIp
-txo21EE5J5JfLU1dUJVx4nX/Pk4epsSE4P8xnBJ68Td6+6kk3efLIs3V8l0PL/kp
-C7OyyE31BwxRajGV/O/5pgKPOwY0lLKHPX6JLLWIk2rLBYmA2tp0kCtLcx6irw5i
-vXI24yXXLkfBhT7wHPf0e3S/G/4k+fg5/E/RZUqqxTBhHNOcQE6C1ETbXYhACLNw
-zn4DFGQVRMJgpAxBtLxsGrt4l17MJxCg4TUoqGvJ9ktk4gDK3evR+TVO0q4izZQj
-l229aO7gk/pHjMFGoQZq7gQpaRLt77VaWsOdOIU5JZfi7ipw+nkwS+Nzx8XwKxFu
-1kx8Bcjii4NqY3ZGQRywMXSsf/gKJJssZ+C1olyyvV3vMChVSySxNfXUevaU9PVq
-5os4bbRl4J9PSV/ICQwUPTn5GjKtuV70d+NgUFP+pKhRsrMOuEIZMmIMyht5NVVN
-KfiLxBZrHiNDelMDqEKDO4AFKdKUxYtiYHFKVHQM6aYLHX62s2YfJ1NhUWFeo+eT
-D+Xq6HSjUUr2Zybc+juNnbVdgKKA3hRXw8Oq3BnYrR0dXdwRxF10mtZzuwhr
+MIICpDCCAYwCCQDeZLUTbOfd7TANBgkqhkiG9w0BAQsFADAUMRIwEAYDVQQDDAls
+b2NhbGhvc3QwHhcNMjYwMTI1MDkyNTMwWhcNMjcwMTI1MDkyNTMwWjAUMRIwEAYD
+VQQDDAlsb2NhbGhvc3QwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDq
+YH5CPNlSPTf7pCff8Ue0ophB7i0a6riW6h51mHmmOWrJZvlQW/v7rX80H8C86hr6
+5eU90p6vVTX+Ew8kj0Uc0trZO1E8YJoELwUwxSM+Tf2bV8XI+nps+wK3TDsee+u3
+WF8VJqOGB+gtu8WJ7JNOLHIKWbcKpIZv6xXWG3feAOJE922TP190TbIygM3QRq0N
+rZA6EFA8Zc6qTV9yeXMbqNSMGrWDYCv8OiGvtHV8EsDP6VrJzbVaT0TWxiTmcdT7
+rnbOHSobFKJ7iFJ5h2GnmpVRGcWe5XJALXo7P96W0dIt2AOZN1j03X7f7EfcZc0K
+5zTgdkvZGM9n1gsGduKXAgMBAAEwDQYJKoZIhvcNAQELBQADggEBAJZRRAU08V2C
+F6BeboSIRlHAz7xVaUWGmhFJRDGa7QXzg8YT5GI+tAmPLENDqX9AUVaUPoiJ/e5j
+kbdAV8rQxIwnf18QhpkfhttSPnie1blk5HuwYqklj6wN2b7RIwqlVTqxWP3N5KJU
+uHXxAvjzo9qREnkss0PEQNQ17xZW2eo5mHSJS/BVM2xG3jTq0fzhyncUqdhwNpp2
+JtjokehM2t7Ccc5G9Ue8utSewaoAXSZqRIQ/z9mNlwYLkHLYmmDcYnGdIS5j+HEU
+J5s9pgCfGJZSopkhsBSzlo0wJ4in64e2OsXDzlSo2BSw/ANK78JcZrCVUX+nuQJ5
+3dR8+XyLXS0=
 -----END CERTIFICATE-----
diff --git a/webapp/demo.html b/webapp/demo.html
new file mode 100644
index 0000000..90601ca
--- /dev/null
+++ b/webapp/demo.html
@@ -0,0 +1,1051 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nimverse - Live Demo</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0f1419;
+            color: #e7e9ea;
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+        }
+        header {
+            background: linear-gradient(180deg, #1a1f26 0%, #0f1419 100%);
+            padding: 0 24px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 56px;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 14px;
+            color: white;
+        }
+        h1 {
+            font-size: 18px;
+            font-weight: 600;
+            background: linear-gradient(90deg, #e7e9ea 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .header-right { display: flex; align-items: center; gap: 20px; font-size: 13px; color: #9ca3af; }
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 12px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .status-indicator.on {
+            background: rgba(34, 197, 94, 0.1);
+            border-color: rgba(34, 197, 94, 0.2);
+        }
+        .status-dot {
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #6b7280;
+        }
+        .status-dot.on { background: #22c55e; box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite; }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .status-text { font-weight: 500; }
+        .status-text.on { color: #22c55e; }
+
+        .container { display: flex; height: calc(100vh - 56px); }
+
+        .main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 16px;
+            gap: 16px;
+            overflow: hidden;
+        }
+
+        .camera-view {
+            flex: 1;
+            background: #000;
+            position: relative;
+            overflow: hidden;
+            border: 3px solid rgba(255,255,255,0.1);
+            border-radius: 12px;
+            min-height: 0;
+        }
+        .camera-view.alert {
+            border-color: #ef4444 !important;
+            animation: alert-flash 0.5s infinite;
+        }
+        @keyframes alert-flash {
+            0%, 100% { border-color: #ef4444; box-shadow: 0 0 30px rgba(239,68,68,0.5); }
+            50% { border-color: #f59e0b; box-shadow: 0 0 50px rgba(245,158,11,0.5); }
+        }
+
+        .video-container {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #webcam {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            background: #000;
+        }
+        #canvas {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            pointer-events: none;
+        }
+
+        .cam-label {
+            position: absolute;
+            top: 16px; left: 16px;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(8px);
+            padding: 8px 16px;
+            font-size: 14px;
+            border-radius: 8px;
+            border-left: 4px solid #6b7280;
+            color: #9ca3af;
+            font-weight: 600;
+            z-index: 10;
+        }
+        .cam-label.live {
+            border-color: #22c55e;
+            color: #22c55e;
+        }
+
+        .audio-panel {
+            position: absolute;
+            top: 16px; right: 16px;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(8px);
+            padding: 12px 16px;
+            border-radius: 8px;
+            z-index: 10;
+            min-width: 220px;
+        }
+        .audio-meter-label {
+            font-size: 10px;
+            color: #6b7280;
+            text-transform: uppercase;
+            margin-bottom: 6px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .audio-meter-bar {
+            height: 8px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 4px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        .audio-meter-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #22c55e 0%, #f59e0b 70%, #ef4444 100%);
+            border-radius: 4px;
+            transition: width 0.05s;
+            width: 0%;
+        }
+        .transcript-box {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 6px;
+            padding: 8px 10px;
+            font-size: 12px;
+            color: #e7e9ea;
+            min-height: 40px;
+            max-height: 60px;
+            overflow-y: auto;
+        }
+        .transcript-box.alert {
+            border-color: #8b5cf6;
+            background: rgba(139, 92, 246, 0.2);
+        }
+        .transcript-label {
+            font-size: 10px;
+            color: #6b7280;
+            text-transform: uppercase;
+            margin-bottom: 4px;
+        }
+
+        /* ALERT BANNER */
+        .alert-banner {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(239,68,68,0.95);
+            backdrop-filter: blur(8px);
+            color: #fff;
+            text-align: center;
+            padding: 24px 48px;
+            font-size: 28px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            border-radius: 16px;
+            display: none;
+            animation: banner-pulse 0.5s infinite;
+            z-index: 100;
+            box-shadow: 0 0 60px rgba(239,68,68,0.8);
+        }
+        .alert-banner.fight { background: rgba(239,68,68,0.95); }
+        .alert-banner.fall { background: rgba(245,158,11,0.95); color: #000; }
+        .alert-banner.help { background: rgba(139,92,246,0.95); }
+        .alert-banner.show { display: block; }
+        @keyframes banner-pulse {
+            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+            50% { transform: translate(-50%, -50%) scale(1.02); opacity: 0.9; }
+        }
+
+        .alert-sub {
+            font-size: 14px;
+            font-weight: 400;
+            margin-top: 8px;
+            letter-spacing: 0;
+            opacity: 0.9;
+        }
+
+        /* Pose info overlay */
+        .pose-info {
+            position: absolute;
+            bottom: 16px; left: 16px;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(8px);
+            padding: 12px 16px;
+            border-radius: 8px;
+            z-index: 10;
+            font-size: 12px;
+        }
+        .pose-info-row {
+            display: flex;
+            justify-content: space-between;
+            gap: 24px;
+            margin-bottom: 4px;
+        }
+        .pose-info-label { color: #6b7280; }
+        .pose-info-value { color: #e7e9ea; font-weight: 600; }
+        .pose-info-value.warning { color: #f59e0b; }
+        .pose-info-value.danger { color: #ef4444; }
+
+        /* Controls */
+        .controls {
+            display: flex;
+            gap: 12px;
+            padding: 12px 16px;
+            background: #1a1f26;
+            border-radius: 12px;
+            align-items: center;
+            flex-shrink: 0;
+        }
+        button {
+            padding: 12px 24px;
+            background: rgba(255,255,255,0.05);
+            color: #e7e9ea;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 8px;
+            font-family: inherit;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        button:hover { background: rgba(255,255,255,0.1); }
+        button.active {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-color: transparent;
+            color: white;
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 320px;
+            background: #1a1f26;
+            border-left: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            font-size: 12px;
+        }
+        .sidebar-section {
+            padding: 16px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .sidebar-section h3 {
+            color: #6b7280;
+            font-size: 10px;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 600;
+        }
+
+        .stats-row {
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
+        }
+        .stat-box {
+            flex: 1;
+            text-align: center;
+            padding: 12px 8px;
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-radius: 8px;
+        }
+        .stat-val { font-size: 28px; font-weight: 700; }
+        .stat-val.red { color: #ef4444; }
+        .stat-val.yellow { color: #f59e0b; }
+        .stat-val.green { color: #22c55e; }
+        .stat-val.purple { color: #8b5cf6; }
+        .stat-lbl { font-size: 9px; color: #6b7280; margin-top: 4px; text-transform: uppercase; }
+
+        .log {
+            flex: 1;
+            overflow-y: auto;
+            padding: 12px;
+            background: rgba(0,0,0,0.2);
+        }
+        .log-entry {
+            padding: 10px 12px;
+            margin-bottom: 8px;
+            border-left: 3px solid #6b7280;
+            font-size: 12px;
+            background: rgba(255,255,255,0.02);
+            border-radius: 0 8px 8px 0;
+        }
+        .log-entry.fight { border-color: #ef4444; background: rgba(239,68,68,0.1); }
+        .log-entry.fall { border-color: #f59e0b; background: rgba(245,158,11,0.1); }
+        .log-entry.help { border-color: #8b5cf6; background: rgba(139,92,246,0.1); }
+        .log-time { color: #6b7280; margin-right: 8px; font-size: 10px; }
+
+        /* Demo badge */
+        .demo-badge {
+            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+            color: #000;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        /* Loading overlay */
+        .loading-overlay {
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 200;
+        }
+        .loading-overlay.hidden { display: none; }
+        .loading-spinner {
+            width: 48px;
+            height: 48px;
+            border: 4px solid rgba(139, 92, 246, 0.3);
+            border-top-color: #8b5cf6;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-text {
+            color: #9ca3af;
+            font-size: 14px;
+        }
+
+        /* Error message */
+        .error-msg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            padding: 24px;
+            border-radius: 12px;
+            text-align: center;
+            max-width: 400px;
+            display: none;
+        }
+        .error-msg.show { display: block; }
+        .error-msg h3 { color: #ef4444; margin-bottom: 8px; }
+        .error-msg p { color: #9ca3af; font-size: 13px; }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <div class="logo-icon">SF</div>
+            <h1>Nimverse Live Demo</h1>
+        </div>
+        <div class="header-right">
+            <span class="demo-badge">Live Demo</span>
+            <span id="datetime"></span>
+            <div class="status-indicator" id="statusIndicator">
+                <div class="status-dot" id="statusDot"></div>
+                <span class="status-text" id="statusText">Click Start</span>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <div class="main">
+            <div class="camera-view" id="cameraView">
+                <div class="video-container">
+                    <video id="webcam" autoplay playsinline muted></video>
+                </div>
+                <canvas id="canvas"></canvas>
+
+                <div class="cam-label" id="camLabel">WEBCAM - OFFLINE</div>
+
+                <div class="audio-panel">
+                    <div class="audio-meter-label">
+                        <span>Audio Level</span>
+                        <span id="audioLevel">0%</span>
+                    </div>
+                    <div class="audio-meter-bar">
+                        <div class="audio-meter-fill" id="audioFill"></div>
+                    </div>
+                    <div class="transcript-label">Speech Recognition</div>
+                    <div class="transcript-box" id="transcriptBox">Waiting for speech...</div>
+                </div>
+
+                <div class="pose-info" id="poseInfo">
+                    <div class="pose-info-row">
+                        <span class="pose-info-label">Status:</span>
+                        <span class="pose-info-value" id="poseStatus">No person detected</span>
+                    </div>
+                    <div class="pose-info-row">
+                        <span class="pose-info-label">Body Angle:</span>
+                        <span class="pose-info-value" id="angleValue">--</span>
+                    </div>
+                    <div class="pose-info-row">
+                        <span class="pose-info-label">Action:</span>
+                        <span class="pose-info-value" id="actionValue">--</span>
+                    </div>
+                </div>
+
+                <div class="alert-banner" id="alertBanner">
+                    <div id="alertText">ALERT</div>
+                    <div class="alert-sub" id="alertSub"></div>
+                </div>
+
+                <div class="loading-overlay" id="loadingOverlay">
+                    <div class="loading-spinner"></div>
+                    <div class="loading-text" id="loadingText">Initializing...</div>
+                </div>
+
+                <div class="error-msg" id="errorMsg">
+                    <h3>Camera Access Required</h3>
+                    <p>Please allow camera and microphone access to use the demo.</p>
+                </div>
+            </div>
+
+            <div class="controls">
+                <button id="btnStart" class="active">Start Demo</button>
+                <button id="btnStop" disabled>Stop</button>
+                <span style="flex:1"></span>
+                <span style="color:#6b7280;font-size:12px;" id="techLabel">NVIDIA BodyPose + Audio Analysis</span>
+            </div>
+        </div>
+
+        <div class="sidebar">
+            <div class="sidebar-section">
+                <h3>Detection Stats</h3>
+                <div class="stats-row">
+                    <div class="stat-box">
+                        <div class="stat-val yellow" id="statFalls">0</div>
+                        <div class="stat-lbl">Falls</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-val red" id="statFights">0</div>
+                        <div class="stat-lbl">Fights</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-val purple" id="statHelp">0</div>
+                        <div class="stat-lbl">Help Calls</div>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-section">
+                <h3>How to Test</h3>
+                <div style="color:#9ca3af; line-height:1.6;">
+                    <p style="margin-bottom:8px;"><strong style="color:#f59e0b;">Fall:</strong> Tilt body sideways or duck down</p>
+                    <p style="margin-bottom:8px;"><strong style="color:#f59e0b;">Distress:</strong> Hands on/near head</p>
+                    <p style="margin-bottom:8px;"><strong style="color:#ef4444;">Fight:</strong> Say "stop", "get off", "let go"</p>
+                    <p><strong style="color:#8b5cf6;">Help:</strong> Say "help", "emergency", "911"</p>
+                </div>
+            </div>
+            <div class="sidebar-section" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
+                <h3>Event Log</h3>
+                <div class="log" id="log">
+                    <div class="log-entry">
+                        <span class="log-time">--:--:--</span>
+                        Waiting for demo to start...
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>
+
+    <script>
+        // ============ STATE ============
+        let isRunning = false;
+        let pose = null;
+        let videoStream = null;
+        let animationId = null;
+        let recognition = null;
+
+        // Audio
+        let audioContext = null;
+        let analyser = null;
+
+        // Detection state
+        const stats = { falls: 0, fights: 0, help: 0 };
+        let poseHistory = [];
+        let lastAlertTime = { fall: 0, fight: 0, help: 0 };
+        const ALERT_COOLDOWN = 4000;
+
+        // Thresholds
+        const FALL_ANGLE_THRESHOLD = 50;
+
+        // DOM
+        const video = document.getElementById('webcam');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        // ============ INIT ============
+        function init() {
+            updateTime();
+            setInterval(updateTime, 1000);
+            document.getElementById('btnStart').onclick = startDemo;
+            document.getElementById('btnStop').onclick = stopDemo;
+            log('System ready - click Start Demo');
+        }
+
+        function updateTime() {
+            document.getElementById('datetime').textContent = new Date().toLocaleString();
+        }
+
+        function showLoading(text) {
+            document.getElementById('loadingText').textContent = text;
+            document.getElementById('loadingOverlay').classList.remove('hidden');
+        }
+
+        function hideLoading() {
+            document.getElementById('loadingOverlay').classList.add('hidden');
+        }
+
+        // ============ START DEMO ============
+        async function startDemo() {
+            try {
+                showLoading('Requesting camera access...');
+                log('Starting demo...');
+
+                // Get webcam + mic
+                videoStream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' },
+                    audio: true
+                });
+
+                video.srcObject = videoStream;
+                await video.play();
+
+                log('Camera connected');
+                showLoading('Loading BodyPose model...');
+
+                pose = new Pose({
+                    locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`
+                });
+
+                pose.setOptions({
+                    modelComplexity: 1,
+                    smoothLandmarks: true,
+                    enableSegmentation: false,
+                    minDetectionConfidence: 0.5,
+                    minTrackingConfidence: 0.5
+                });
+
+                pose.onResults(onPoseResults);
+
+                await pose.initialize();
+                log('BodyPose model loaded');
+
+                // Setup audio
+                setupAudio(videoStream);
+
+                // Setup speech recognition
+                setupSpeechRecognition();
+
+                // Start processing
+                isRunning = true;
+                processFrame();
+
+                // Update UI
+                hideLoading();
+                document.getElementById('btnStart').disabled = true;
+                document.getElementById('btnStop').disabled = false;
+                document.getElementById('camLabel').textContent = 'WEBCAM - LIVE';
+                document.getElementById('camLabel').classList.add('live');
+                document.getElementById('statusDot').classList.add('on');
+                document.getElementById('statusIndicator').classList.add('on');
+                document.getElementById('statusText').textContent = 'AI Active';
+                document.getElementById('statusText').classList.add('on');
+
+                log('AI detection active', 'success');
+
+            } catch (error) {
+                console.error('Error:', error);
+                hideLoading();
+                document.getElementById('errorMsg').classList.add('show');
+                log('Error: ' + error.message, 'error');
+            }
+        }
+
+        // ============ FRAME PROCESSING ============
+        async function processFrame() {
+            if (!isRunning || !pose) return;
+
+            // Size canvas to match video display
+            const rect = video.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+
+            try {
+                await pose.send({ image: video });
+            } catch (e) {
+                console.error('Pose error:', e);
+            }
+
+            animationId = requestAnimationFrame(processFrame);
+        }
+
+        // ============ POSE RESULTS ============
+        function onPoseResults(results) {
+            if (!isRunning) return;
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            if (results.poseLandmarks && results.poseLandmarks.length > 0) {
+                const landmarks = results.poseLandmarks;
+
+                // Analyze pose and get action
+                const { action, actionClass } = analyzePose(landmarks);
+
+                drawBoundingBox(landmarks, action, actionClass);
+
+                document.getElementById('poseStatus').textContent = 'Person detected';
+                document.getElementById('poseStatus').classList.remove('danger');
+            } else {
+                document.getElementById('poseStatus').textContent = 'No person detected';
+                document.getElementById('poseStatus').classList.add('danger');
+                document.getElementById('angleValue').textContent = '--';
+                document.getElementById('actionValue').textContent = '--';
+            }
+        }
+
+        function drawBoundingBox(landmarks, action, actionClass) {
+            // Calculate bounding box from landmarks
+            let minX = 1, minY = 1, maxX = 0, maxY = 0;
+
+            landmarks.forEach(lm => {
+                if (lm.visibility > 0.5) {
+                    minX = Math.min(minX, lm.x);
+                    minY = Math.min(minY, lm.y);
+                    maxX = Math.max(maxX, lm.x);
+                    maxY = Math.max(maxY, lm.y);
+                }
+            });
+
+            // Add padding
+            const padX = (maxX - minX) * 0.15;
+            const padY = (maxY - minY) * 0.1;
+            minX = Math.max(0, minX - padX);
+            minY = Math.max(0, minY - padY);
+            maxX = Math.min(1, maxX + padX);
+            maxY = Math.min(1, maxY + padY);
+
+            const x = minX * canvas.width;
+            const y = minY * canvas.height;
+            const w = (maxX - minX) * canvas.width;
+            const h = (maxY - minY) * canvas.height;
+
+            // Box color based on status
+            let boxColor = '#22c55e'; // green = normal
+            if (actionClass === 'danger') boxColor = '#ef4444'; // red
+            else if (actionClass === 'warning') boxColor = '#f59e0b'; // yellow
+
+            // Draw thick box
+            ctx.strokeStyle = boxColor;
+            ctx.lineWidth = 4;
+            ctx.strokeRect(x, y, w, h);
+
+            // Draw label background
+            const label = action ? `PERSON - ${action.toUpperCase()}` : 'PERSON';
+            ctx.font = 'bold 16px Inter, sans-serif';
+            const textWidth = ctx.measureText(label).width;
+            ctx.fillStyle = boxColor;
+            ctx.fillRect(x, y - 28, textWidth + 20, 28);
+
+            // Draw label text
+            ctx.fillStyle = boxColor === '#f59e0b' ? '#000' : '#fff';
+            ctx.fillText(label, x + 10, y - 8);
+
+            // Draw confidence bar
+            ctx.fillStyle = 'rgba(0,0,0,0.5)';
+            ctx.fillRect(x, y + h + 4, w, 6);
+            ctx.fillStyle = boxColor;
+            ctx.fillRect(x, y + h + 4, w * 0.95, 6);
+        }
+
+        // ============ POSE ANALYSIS ============
+        function analyzePose(landmarks) {
+            const leftShoulder = landmarks[11];
+            const rightShoulder = landmarks[12];
+            const leftHip = landmarks[23];
+            const rightHip = landmarks[24];
+            const leftWrist = landmarks[15];
+            const rightWrist = landmarks[16];
+            const leftElbow = landmarks[13];
+            const rightElbow = landmarks[14];
+            const nose = landmarks[0];
+
+            // Calculate body midpoints
+            const shoulderMidX = (leftShoulder.x + rightShoulder.x) / 2;
+            const shoulderMidY = (leftShoulder.y + rightShoulder.y) / 2;
+            const hipMidX = (leftHip.x + rightHip.x) / 2;
+            const hipMidY = (leftHip.y + rightHip.y) / 2;
+
+            // Body angle from vertical (0 = upright)
+            const bodyAngle = Math.abs(Math.atan2(shoulderMidX - hipMidX, hipMidY - shoulderMidY) * (180 / Math.PI));
+
+            // Update display
+            document.getElementById('angleValue').textContent = Math.round(bodyAngle) + '°';
+            document.getElementById('angleValue').className = 'pose-info-value' +
+                (bodyAngle > 50 ? ' danger' : bodyAngle > 35 ? ' warning' : '');
+
+            // Store history
+            const now = Date.now();
+            poseHistory.push({
+                time: now,
+                hipY: hipMidY,
+                hipX: hipMidX,
+                shoulderY: shoulderMidY,
+                noseY: nose.y,
+                leftWrist: { x: leftWrist.x, y: leftWrist.y },
+                rightWrist: { x: rightWrist.x, y: rightWrist.y },
+                bodyAngle: bodyAngle
+            });
+
+            // Keep last 20 frames
+            while (poseHistory.length > 20) poseHistory.shift();
+
+            // Default state
+            let action = 'Normal';
+            let actionClass = '';
+
+            // Need enough history for motion analysis
+            if (poseHistory.length >= 8) {
+                const oldPose = poseHistory[0];
+                const midPose = poseHistory[Math.floor(poseHistory.length / 2)];
+                const newPose = poseHistory[poseHistory.length - 1];
+                const timeDiff = (newPose.time - oldPose.time) / 1000;
+
+                // ===== FALL DETECTION =====
+                // Check for rapid downward movement + body tilting
+                const hipDropSpeed = (newPose.hipY - oldPose.hipY) / timeDiff;
+                const noseDropSpeed = (newPose.noseY - oldPose.noseY) / timeDiff;
+
+                if (bodyAngle > 50 && (hipDropSpeed > 0.3 || noseDropSpeed > 0.4)) {
+                    action = 'FALLING';
+                    actionClass = 'danger';
+                    triggerAlert('fall', 'FALL DETECTED!', 'Person falling down');
+                } else if (bodyAngle > 60) {
+                    action = 'DOWN';
+                    actionClass = 'danger';
+                    triggerAlert('fall', 'PERSON DOWN!', 'Person on the ground');
+                }
+
+                // ===== DISTRESS DETECTION =====
+                // Hands on head or covering face (distress pose)
+                const handsNearHead = (
+                    (Math.abs(leftWrist.y - nose.y) < 0.15 && leftWrist.visibility > 0.5) ||
+                    (Math.abs(rightWrist.y - nose.y) < 0.15 && rightWrist.visibility > 0.5)
+                );
+
+                // Hand raised high (calling for help)
+                const handRaisedHigh = (
+                    (leftWrist.y < leftShoulder.y - 0.15 && leftWrist.visibility > 0.5) ||
+                    (rightWrist.y < rightShoulder.y - 0.15 && rightWrist.visibility > 0.5)
+                );
+
+                if (handRaisedHigh && action === 'Normal') {
+                    action = 'HAND RAISED';
+                    actionClass = 'warning';
+                }
+
+                if (handsNearHead && action === 'Normal') {
+                    action = 'DISTRESS';
+                    actionClass = 'warning';
+                }
+
+                // Fight detection removed - requires proper ML model
+                // Will only trigger via speech recognition (shouting, aggressive words)
+            }
+
+            document.getElementById('actionValue').textContent = action;
+            document.getElementById('actionValue').className = 'pose-info-value ' + actionClass;
+
+            return { action, actionClass };
+        }
+
+        // ============ AUDIO ============
+        function setupAudio(stream) {
+            try {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 256;
+
+                const source = audioContext.createMediaStreamSource(stream);
+                source.connect(analyser);
+
+                monitorAudio();
+                log('Audio monitoring active');
+            } catch (e) {
+                log('Audio setup failed: ' + e.message);
+            }
+        }
+
+        function monitorAudio() {
+            if (!isRunning || !analyser) return;
+
+            const data = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteFrequencyData(data);
+
+            const avg = data.reduce((a, b) => a + b) / data.length;
+            const level = Math.min(100, Math.round((avg / 128) * 100));
+
+            document.getElementById('audioFill').style.width = level + '%';
+            document.getElementById('audioLevel').textContent = level + '%';
+
+            requestAnimationFrame(monitorAudio);
+        }
+
+        // ============ SPEECH RECOGNITION ============
+        function setupSpeechRecognition() {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+            if (!SpeechRecognition) {
+                log('Speech recognition not supported');
+                document.getElementById('transcriptBox').textContent = 'Speech recognition not available in this browser';
+                return;
+            }
+
+            recognition = new SpeechRecognition();
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            recognition.lang = 'en-US';
+
+            recognition.onresult = (event) => {
+                let transcript = '';
+                let isFinal = false;
+
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    transcript += event.results[i][0].transcript;
+                    if (event.results[i].isFinal) isFinal = true;
+                }
+
+                document.getElementById('transcriptBox').textContent = transcript || 'Listening...';
+
+                // Check for keywords
+                const lower = transcript.toLowerCase();
+
+                // Help/distress keywords
+                const helpKeywords = ['help', 'emergency', 'call 911', '911', 'somebody help', 'fire', 'police', 'ambulance', 'save me'];
+
+                // Fight/aggression keywords
+                const fightKeywords = ['stop', 'get off', 'let go', 'don\'t touch', 'back off', 'get away', 'leave me alone', 'fighting', 'attack'];
+
+                let detected = false;
+
+                for (const keyword of fightKeywords) {
+                    if (lower.includes(keyword)) {
+                        document.getElementById('transcriptBox').classList.add('alert');
+                        triggerAlert('fight', 'ALTERCATION DETECTED!', `Heard: "${transcript}"`);
+                        detected = true;
+                        break;
+                    }
+                }
+
+                if (!detected) {
+                    for (const keyword of helpKeywords) {
+                        if (lower.includes(keyword)) {
+                            document.getElementById('transcriptBox').classList.add('alert');
+                            triggerAlert('help', 'HELP CALL DETECTED!', `Heard: "${transcript}"`);
+                            break;
+                        }
+                    }
+                }
+
+                if (isFinal) {
+                    setTimeout(() => {
+                        document.getElementById('transcriptBox').classList.remove('alert');
+                    }, 2000);
+                }
+            };
+
+            recognition.onerror = (event) => {
+                console.log('Speech error:', event.error);
+                if (event.error === 'no-speech') {
+                    document.getElementById('transcriptBox').textContent = 'Listening...';
+                }
+            };
+
+            recognition.onend = () => {
+                if (isRunning) {
+                    recognition.start(); // Restart
+                }
+            };
+
+            recognition.start();
+            log('Speech recognition active');
+            document.getElementById('transcriptBox').textContent = 'Listening...';
+        }
+
+        // ============ ALERTS ============
+        function triggerAlert(type, title, subtitle) {
+            const now = Date.now();
+            if (now - lastAlertTime[type] < ALERT_COOLDOWN) return;
+            lastAlertTime[type] = now;
+
+            // Update stats
+            stats[type === 'fall' ? 'falls' : type === 'fight' ? 'fights' : 'help']++;
+            updateStats();
+
+            // Show banner
+            const banner = document.getElementById('alertBanner');
+            const cameraView = document.getElementById('cameraView');
+
+            document.getElementById('alertText').textContent = title;
+            document.getElementById('alertSub').textContent = subtitle;
+
+            banner.className = 'alert-banner show ' + type;
+            cameraView.classList.add('alert');
+
+            // Play sound
+            playAlertSound(type);
+
+            // Log
+            log(title + ' - ' + subtitle, type);
+
+            // Hide after 3s
+            setTimeout(() => {
+                banner.classList.remove('show');
+                cameraView.classList.remove('alert');
+            }, 3000);
+        }
+
+        function playAlertSound(type) {
+            if (!audioContext) return;
+
+            const osc = audioContext.createOscillator();
+            const gain = audioContext.createGain();
+            osc.connect(gain);
+            gain.connect(audioContext.destination);
+
+            osc.frequency.value = type === 'fight' ? 880 : type === 'fall' ? 660 : 550;
+            gain.gain.setValueAtTime(0.3, audioContext.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+
+            osc.start();
+            osc.stop(audioContext.currentTime + 0.3);
+        }
+
+        function updateStats() {
+            document.getElementById('statFalls').textContent = stats.falls;
+            document.getElementById('statFights').textContent = stats.fights;
+            document.getElementById('statHelp').textContent = stats.help;
+        }
+
+        // ============ LOGGING ============
+        function log(message, level = '') {
+            const logEl = document.getElementById('log');
+            const time = new Date().toTimeString().slice(0, 8);
+            const entry = document.createElement('div');
+            entry.className = 'log-entry ' + level;
+            entry.innerHTML = `<span class="log-time">${time}</span>${message}`;
+            logEl.insertBefore(entry, logEl.firstChild);
+            while (logEl.children.length > 50) logEl.removeChild(logEl.lastChild);
+        }
+
+        // ============ STOP ============
+        function stopDemo() {
+            isRunning = false;
+
+            if (animationId) cancelAnimationFrame(animationId);
+            if (recognition) recognition.stop();
+            if (videoStream) videoStream.getTracks().forEach(t => t.stop());
+            if (audioContext) audioContext.close();
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            poseHistory = [];
+
+            document.getElementById('btnStart').disabled = false;
+            document.getElementById('btnStop').disabled = true;
+            document.getElementById('camLabel').textContent = 'WEBCAM - OFFLINE';
+            document.getElementById('camLabel').classList.remove('live');
+            document.getElementById('statusDot').classList.remove('on');
+            document.getElementById('statusIndicator').classList.remove('on');
+            document.getElementById('statusText').textContent = 'Stopped';
+            document.getElementById('statusText').classList.remove('on');
+            document.getElementById('transcriptBox').textContent = 'Stopped';
+
+            log('Demo stopped');
+        }
+
+        // Start
+        init();
+    </script>
+</body>
+</html>
diff --git a/webapp/https_server.py b/webapp/https_server.py
index 23b3b06..35e3b5b 100644
--- a/webapp/https_server.py
+++ b/webapp/https_server.py
@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-"""Simple HTTPS server for SF Security Camera frontend"""
+"""Simple HTTPS server for Nimverse frontend"""
 
 import http.server
 import ssl
@@ -10,8 +10,23 @@
 
 os.chdir(DIRECTORY)
 
+
+class QuietHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
+    """HTTP handler that suppresses SSL EOF errors (normal for video streaming)"""
+
+    def handle(self):
+        try:
+            super().handle()
+        except ssl.SSLEOFError:
+            pass  # Client closed connection early - normal for video
+        except BrokenPipeError:
+            pass  # Client disconnected
+        except ConnectionResetError:
+            pass  # Client reset connection
+
+
 server_address = ('0.0.0.0', PORT)
-httpd = http.server.HTTPServer(server_address, http.server.SimpleHTTPRequestHandler)
+httpd = http.server.HTTPServer(server_address, QuietHTTPRequestHandler)
 
 # Create SSL context
 context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
diff --git a/webapp/index.html b/webapp/index.html
index 63cde2f..57266ff 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -3,624 +3,815 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SF Security Camera</title>
+    <title>Nimverse - Cameras</title>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
-            font-family: monospace;
-            background: #0a0a0a;
-            color: #0f0;
-            min-height: 100vh;
+        html, body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0f1419;
+            color: #e7e9ea;
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
         }
         header {
-            background: #111;
-            padding: 10px 20px;
-            border-bottom: 1px solid #333;
+            background: linear-gradient(180deg, #1a1f26 0%, #0f1419 100%);
+            padding: 0 24px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            height: 56px;
         }
-        h1 { font-size: 18px; }
-        .status { display: flex; align-items: center; gap: 8px; }
-        .dot { width: 10px; height: 10px; border-radius: 50%; background: #666; }
-        .dot.on { background: #0f0; box-shadow: 0 0 10px #0f0; }
-        .container { display: flex; height: calc(100vh - 50px); }
-        .main { flex: 1; display: flex; flex-direction: column; }
-        .video-box {
-            flex: 1; background: #000; position: relative;
-            display: flex; align-items: center; justify-content: center;
-        }
-        video { max-width: 100%; max-height: 100%; }
-        canvas {
-            position: absolute; top: 0; left: 0;
-            width: 100%; height: 100%; pointer-events: none;
-        }
-        .overlay {
-            position: absolute; top: 10px; left: 10px;
-            background: rgba(0,0,0,0.7); padding: 5px 10px;
-            font-size: 12px; display: none;
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 14px;
+            color: white;
+        }
+        h1 {
+            font-size: 18px;
+            font-weight: 600;
+            background: linear-gradient(90deg, #e7e9ea 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .header-nav {
+            display: flex;
+            gap: 8px;
+        }
+        .nav-btn {
+            padding: 8px 16px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 8px;
+            color: #9ca3af;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .nav-btn:hover {
+            background: rgba(255,255,255,0.1);
+            color: #e7e9ea;
+        }
+        .nav-btn.active {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-color: transparent;
+            color: white;
+        }
+        .header-right { display: flex; align-items: center; gap: 20px; font-size: 13px; color: #9ca3af; }
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 12px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .status-indicator.on {
+            background: rgba(34, 197, 94, 0.1);
+            border-color: rgba(34, 197, 94, 0.2);
+        }
+        .status-dot {
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #6b7280;
+        }
+        .status-dot.on { background: #22c55e; box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite; }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .status-text { font-weight: 500; }
+        .status-text.on { color: #22c55e; }
+
+        .container { display: flex; height: calc(100vh - 56px); }
+
+        .main {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 4px;
+            gap: 4px;
+            overflow: hidden;
+        }
+
+        .camera-grid {
+            flex: 1;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(3, 1fr);
+            gap: 3px;
+            min-height: 0;
+        }
+
+        .cam {
+            background: #000;
+            position: relative;
+            overflow: hidden;
+            border: 2px solid rgba(255,255,255,0.1);
+            border-radius: 8px;
+        }
+        .cam.alert {
+            border-color: #ef4444 !important;
+            animation: alert-flash 0.5s infinite;
+        }
+        @keyframes alert-flash {
+            0%, 100% { border-color: #ef4444; box-shadow: 0 0 20px rgba(239,68,68,0.5); }
+            50% { border-color: #f59e0b; box-shadow: 0 0 30px rgba(245,158,11,0.5); }
+        }
+
+        .cam video {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            object-fit: contain;
+            background: #000;
+        }
+        .cam canvas {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            pointer-events: none;
+        }
+
+        /* Camera label */
+        .cam-label {
+            position: absolute;
+            top: 8px; left: 8px;
+            background: rgba(0,0,0,0.7);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            font-size: 11px;
+            border-radius: 6px;
+            border-left: 3px solid #6b7280;
+            color: #9ca3af;
+        }
+        .cam-label.live { border-color: #22c55e; color: #22c55e; }
+
+        /* People count */
+        .cam-people {
+            position: absolute;
+            top: 8px; right: 8px;
+            background: rgba(139, 92, 246, 0.2);
+            backdrop-filter: blur(8px);
+            padding: 4px 10px;
+            font-size: 11px;
+            border-radius: 6px;
+            color: #8b5cf6;
+            font-weight: 600;
+        }
+
+        /* Status bar at bottom */
+        .cam-status {
+            position: absolute;
+            bottom: 0; left: 0; right: 0;
+            background: rgba(0,0,0,0.7);
+            backdrop-filter: blur(8px);
+            padding: 6px 10px;
+            font-size: 10px;
+            display: flex;
+            justify-content: space-between;
+            color: #9ca3af;
+        }
+
+        /* ALERT BANNER - the key feature */
+        .alert-banner {
+            position: absolute;
+            top: 50%;
+            left: 10%; right: 10%;
+            transform: translateY(-50%);
+            background: rgba(239,68,68,0.95);
+            backdrop-filter: blur(8px);
+            color: #fff;
+            text-align: center;
+            padding: 12px 16px;
+            font-size: 13px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border-radius: 8px;
+            display: none;
+            animation: banner-pulse 0.5s infinite;
+            z-index: 100;
+        }
+        .alert-banner.fight {
+            background: rgba(239,68,68,0.95);
+            color: #fff;
+        }
+        .alert-banner.falling {
+            background: rgba(245,158,11,0.95);
+            color: #000;
+        }
+        .alert-banner.help {
+            background: rgba(139,92,246,0.95);
+            color: #fff;
+        }
+        .alert-banner.show {
+            display: block;
         }
+        @keyframes banner-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.85; }
+        }
+
+        /* Controls */
         .controls {
-            background: #111; padding: 10px;
-            display: flex; gap: 10px; flex-wrap: wrap;
+            display: flex;
+            gap: 10px;
+            padding: 10px 12px;
+            background: #1a1f26;
+            border-radius: 10px;
+            align-items: center;
+            flex-shrink: 0;
+            margin-top: 4px;
         }
         button {
-            padding: 12px 20px; background: #222; color: #0f0;
-            border: 1px solid #0f0; font-family: monospace;
-            font-size: 14px; cursor: pointer;
+            padding: 10px 18px;
+            background: rgba(255,255,255,0.05);
+            color: #e7e9ea;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 8px;
+            font-family: inherit;
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        button:hover { background: rgba(255,255,255,0.1); }
+        button.active {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-color: transparent;
+            color: white;
         }
-        button:hover { background: #0f0; color: #000; }
-        button:disabled { opacity: 0.3; cursor: not-allowed; }
-        button.active { background: #0f0; color: #000; }
+
+        /* Sidebar */
         .sidebar {
-            width: 350px; background: #111; border-left: 1px solid #333;
-            display: flex; flex-direction: column; overflow: hidden;
-        }
-        .panel { padding: 10px; border-bottom: 1px solid #222; }
-        .panel h2 { font-size: 12px; color: #666; margin-bottom: 10px; }
-        .stats { display: flex; gap: 10px; }
-        .stat { flex: 1; background: #1a1a1a; padding: 10px; text-align: center; }
-        .stat-val { font-size: 24px; font-weight: bold; }
-        .stat-val.warn { color: #fa0; }
-        .stat-val.danger { color: #f00; }
-        .stat-lbl { font-size: 10px; color: #666; }
-        .meter { height: 20px; background: #222; margin: 10px 0; }
-        .meter-fill { height: 100%; background: linear-gradient(90deg, #0f0, #ff0, #f00); width: 0%; }
-        .log { flex: 1; overflow-y: auto; font-size: 11px; padding: 10px; background: #0a0a0a; }
-        .log-item { padding: 3px 0; border-bottom: 1px solid #1a1a1a; }
-        .log-time { color: #666; }
-        .log-type { font-weight: bold; margin: 0 5px; }
-        .log-type.SYS { color: #666; }
-        .log-type.CAM { color: #0f0; }
-        .log-type.MIC { color: #f0f; }
-        .log-type.DET { color: #0ff; }
-        .log-type.INC { color: #f00; }
-        .placeholder { color: #333; font-size: 14px; }
-        #errorBox { color: #f00; padding: 10px; display: none; }
+            width: 280px;
+            background: #1a1f26;
+            border-left: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            font-size: 11px;
+        }
+        .sidebar-section {
+            padding: 14px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .sidebar-section h3 {
+            color: #6b7280;
+            font-size: 10px;
+            margin-bottom: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 600;
+        }
+
+        .stats-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 6px;
+            gap: 6px;
+        }
+        .stat-box {
+            flex: 1;
+            text-align: center;
+            padding: 10px 6px;
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-radius: 8px;
+        }
+        .stat-val { font-size: 22px; font-weight: 700; }
+        .stat-val.red { color: #ef4444; }
+        .stat-val.yellow { color: #f59e0b; }
+        .stat-val.green { color: #22c55e; }
+        .stat-val.cyan { color: #3b82f6; }
+        .stat-lbl { font-size: 9px; color: #6b7280; margin-top: 4px; text-transform: uppercase; }
+
+        .log {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            background: rgba(0,0,0,0.2);
+        }
+        .log-entry {
+            padding: 8px 10px;
+            margin-bottom: 6px;
+            border-left: 3px solid #6b7280;
+            font-size: 11px;
+            background: rgba(255,255,255,0.02);
+            border-radius: 0 6px 6px 0;
+        }
+        .log-entry.fight { border-color: #ef4444; background: rgba(239,68,68,0.1); }
+        .log-entry.falling { border-color: #f59e0b; background: rgba(245,158,11,0.1); }
+        .log-entry.help { border-color: #8b5cf6; background: rgba(139,92,246,0.1); }
+        .log-time { color: #6b7280; margin-right: 8px; }
+        .log-cam { color: #3b82f6; margin-right: 8px; font-weight: 500; }
+
+        /* Security Center Button */
+        .security-btn {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(239,68,68,0.1);
+            border: 1px solid rgba(239,68,68,0.3);
+            border-radius: 8px;
+            color: #9ca3af;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+        }
+        .security-btn:hover {
+            background: rgba(239,68,68,0.2);
+            color: #e7e9ea;
+        }
+        .security-btn.alert {
+            background: rgba(239,68,68,0.3);
+            border-color: #ef4444;
+            color: #fff;
+            animation: security-glow 1s infinite;
+        }
+        .security-btn.alert .security-icon {
+            animation: security-pulse 0.5s infinite;
+        }
+        @keyframes security-glow {
+            0%, 100% {
+                box-shadow: 0 0 20px rgba(239,68,68,0.5), inset 0 0 20px rgba(239,68,68,0.1);
+            }
+            50% {
+                box-shadow: 0 0 40px rgba(239,68,68,0.8), inset 0 0 30px rgba(239,68,68,0.2);
+            }
+        }
+        @keyframes security-pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+        }
+        .security-icon {
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .security-badge {
+            background: #ef4444;
+            color: white;
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 10px;
+            font-weight: 700;
+            display: none;
+        }
+        .security-btn.alert .security-badge {
+            display: inline;
+            animation: badge-pulse 0.5s infinite;
+        }
+        @keyframes badge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
     </style>
 </head>
 <body>
     <header>
-        <h1>SF_SECURITY_CAM</h1>
-        <div class="status">
-            <div class="dot" id="dot"></div>
-            <span id="statusTxt">READY</span>
+        <div class="logo">
+            <div class="logo-icon">SF</div>
+            <h1>Nimverse Monitor</h1>
+        </div>
+        <div class="header-nav">
+            <a href="index.html" class="nav-btn active">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+                </svg>
+                Cameras
+            </a>
+            <a href="map.html" class="nav-btn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>
+                </svg>
+                Map View
+            </a>
+            <a href="demo.html" class="nav-btn" style="background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); border-color: transparent; color: white;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
+                </svg>
+                Live Demo
+            </a>
+        </div>
+        <div class="header-right">
+            <span id="datetime"></span>
+            <a href="map.html" class="security-btn" id="securityBtn">
+                <div class="security-icon">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                    </svg>
+                </div>
+                <span>Security Center</span>
+                <span class="security-badge" id="alertBadge">0</span>
+            </a>
+            <div class="status-indicator" id="statusIndicator">
+                <div class="status-dot" id="statusDot"></div>
+                <span class="status-text" id="statusText">Offline</span>
+            </div>
         </div>
     </header>
 
     <div class="container">
         <div class="main">
-            <div class="video-box">
-                <video id="video" autoplay playsinline muted></video>
-                <canvas id="canvas"></canvas>
-                <div class="overlay" id="overlay">
-                    <span id="resolution">--</span> | <span id="fps">0</span> FPS
-                </div>
-                <div class="placeholder" id="placeholder">[ CLICK START CAM ]</div>
-            </div>
-            <div id="errorBox"></div>
+            <div class="camera-grid" id="grid"></div>
             <div class="controls">
-                <button id="btnCam">START CAM</button>
-                <button id="btnMic">ENABLE MIC</button>
-                <button id="btnConnect">CONNECT BACKEND</button>
-                <button id="btnStop" disabled>STOP</button>
+                <button id="btnPlay">Play All</button>
+                <button id="btnAI">Connect AI</button>
+                <button id="btnPause">Pause</button>
+                <span style="flex:1"></span>
+                <span style="color:#6b7280;font-size:11px;">AI-Powered Detection</span>
             </div>
         </div>
 
         <div class="sidebar">
-            <div class="panel">
-                <h2>STATS</h2>
-                <div class="stats">
-                    <div class="stat">
-                        <div class="stat-val" id="statPpl">0</div>
+            <div class="sidebar-section">
+                <h3>System Status</h3>
+                <div class="stats-row">
+                    <div class="stat-box">
+                        <div class="stat-val cyan" id="statCams">0</div>
+                        <div class="stat-lbl">LIVE</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-val green" id="statPeople">0</div>
                         <div class="stat-lbl">PEOPLE</div>
                     </div>
-                    <div class="stat">
-                        <div class="stat-val warn" id="statFall">0</div>
+                    <div class="stat-box">
+                        <div class="stat-val red" id="statAlerts">0</div>
+                        <div class="stat-lbl">ALERTS</div>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-section">
+                <h3>Detections</h3>
+                <div class="stats-row">
+                    <div class="stat-box">
+                        <div class="stat-val yellow" id="statFalls">0</div>
                         <div class="stat-lbl">FALLS</div>
                     </div>
-                    <div class="stat">
-                        <div class="stat-val danger" id="statFight">0</div>
+                    <div class="stat-box">
+                        <div class="stat-val red" id="statFights">0</div>
                         <div class="stat-lbl">FIGHTS</div>
                     </div>
-                </div>
-                <div class="stats" style="margin-top:10px;">
-                    <div class="stat">
-                        <div class="stat-val danger" id="statHelp">0</div>
-                        <div class="stat-lbl">HELP CALLS</div>
-                    </div>
-                    <div class="stat">
-                        <div class="stat-val warn" id="statCough">0</div>
-                        <div class="stat-lbl">COUGHS</div>
+                    <div class="stat-box">
+                        <div class="stat-val cyan" id="statRuns">0</div>
+                        <div class="stat-lbl">RUNNING</div>
                     </div>
                 </div>
             </div>
-            <div class="panel">
-                <h2>AUDIO</h2>
-                <div class="meter"><div class="meter-fill" id="audioMeter"></div></div>
-                <div style="display:flex;justify-content:space-between;font-size:11px;">
-                    <span id="audioEvt">--</span>
-                    <span id="audioVol">0%</span>
-                </div>
-            </div>
-            <div class="panel" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
-                <h2>LOG</h2>
+            <div class="sidebar-section" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
+                <h3>Event Log</h3>
                 <div class="log" id="log"></div>
             </div>
         </div>
     </div>
 
     <script>
-        // Elements
-        const video = document.getElementById('video');
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        const btnCam = document.getElementById('btnCam');
-        const btnMic = document.getElementById('btnMic');
-        const btnConnect = document.getElementById('btnConnect');
-        const btnStop = document.getElementById('btnStop');
-        const placeholder = document.getElementById('placeholder');
-        const overlay = document.getElementById('overlay');
-        const errorBox = document.getElementById('errorBox');
-        const dot = document.getElementById('dot');
-        const statusTxt = document.getElementById('statusTxt');
-
-        // State
-        let videoStream = null;
-        let audioStream = null;
-        let audioCtx = null;
-        let ws = null;
-        let sendInterval = null;
-        let fpsCount = 0;
-        let speechRecognition = null;
-        let audioAnalyzerNode = null;
-        let lastCoughTime = 0;
-
-        // Log function
-        function log(type, msg) {
-            const logEl = document.getElementById('log');
-            const time = new Date().toTimeString().slice(0,8);
-            const div = document.createElement('div');
-            div.className = 'log-item';
-            div.innerHTML = '<span class="log-time">' + time + '</span><span class="log-type ' + type + '">' + type + '</span>' + msg;
-            logEl.insertBefore(div, logEl.firstChild);
-            if (logEl.children.length > 100) logEl.removeChild(logEl.lastChild);
-        }
+        const CAMS = [
+            { id: 0, name: 'CAM-01', video: 'videos/cam1.mp4' },
+            { id: 1, name: 'CAM-02', video: 'videos/cam2.mp4' },
+            { id: 2, name: 'CAM-03', video: 'videos/cam3.mp4' },
+            { id: 3, name: 'CAM-04', video: 'videos/cam4.mp4' },
+            { id: 4, name: 'CAM-05', video: 'videos/cam5.mp4' },
+            { id: 5, name: 'CAM-06', video: 'videos/cam6.mp4' },
+            { id: 6, name: 'CAM-07', video: 'videos/cam7.mp4' },
+            { id: 7, name: 'CAM-08', video: 'videos/cam8.mp4' },
+            { id: 8, name: 'CAM-09', video: 'videos/cam9.mp4' }
+        ];
+
+        const state = CAMS.map(c => ({ ...c, active: false, people: 0, action: null, alertType: null }));
+        let ws = null, sendInterval = null;
+        const stats = { alerts: 0, falls: 0, fights: 0, runs: 0 };
+
+        // Alert messages - only 3 types: FIGHT, FALL, HELP
+        const ALERTS = {
+            'falling': { msg: 'PERSON FALLING!', color: 'falling' },
+            'lying': { msg: 'PERSON FALLING!', color: 'falling' },
+            'hand_raised': { msg: 'HELP! ASSISTANCE NEEDED', color: 'help' },
+            'fight': { msg: 'FIGHT DETECTED!', color: 'fight' }
+        };
+
+        function init() {
+            const grid = document.getElementById('grid');
+            CAMS.forEach((cam, i) => {
+                const div = document.createElement('div');
+                div.className = 'cam';
+                div.id = `cam-${i}`;
+                div.innerHTML = `
+                    <video id="vid-${i}" muted loop playsinline></video>
+                    <canvas id="cvs-${i}"></canvas>
+                    <div class="cam-label" id="lbl-${i}">${cam.name}</div>
+                    <div class="cam-people" id="ppl-${i}">0</div>
+                    <div class="cam-status">
+                        <span id="act-${i}">--</span>
+                        <span id="sts-${i}">OFFLINE</span>
+                    </div>
+                    <div class="alert-banner" id="alert-${i}"></div>
+                `;
+                grid.appendChild(div);
 
-        function showError(msg) {
-            errorBox.textContent = 'ERROR: ' + msg;
-            errorBox.style.display = 'block';
-            setTimeout(function() { errorBox.style.display = 'none'; }, 5000);
-        }
+                const vid = document.getElementById(`vid-${i}`);
+                vid.src = cam.video;
+                vid.load();
+            });
 
-        function setStatus(on, txt) {
-            dot.className = on ? 'dot on' : 'dot';
-            statusTxt.textContent = txt;
+            updateTime();
+            setInterval(updateTime, 1000);
+            log('System initialized');
         }
 
-        // START CAMERA
-        btnCam.addEventListener('click', async function() {
-            log('SYS', 'Starting camera...');
-            try {
-                videoStream = await navigator.mediaDevices.getUserMedia({
-                    video: { width: { ideal: 1280 }, height: { ideal: 720 } },
-                    audio: false
-                });
-                video.srcObject = videoStream;
-                await video.play();
-
-                placeholder.style.display = 'none';
-                overlay.style.display = 'block';
-
-                const settings = videoStream.getVideoTracks()[0].getSettings();
-                document.getElementById('resolution').textContent = settings.width + 'x' + settings.height;
-
-                btnCam.disabled = true;
-                btnStop.disabled = false;
-                setStatus(true, 'CAMERA ON');
-                log('CAM', 'Camera started ' + settings.width + 'x' + settings.height);
-
-                // Start sending frames if connected
-                startSending();
-
-                // FPS counter
-                setInterval(function() {
-                    document.getElementById('fps').textContent = fpsCount;
-                    fpsCount = 0;
-                }, 1000);
-
-            } catch (err) {
-                log('SYS', 'Camera error: ' + err.message);
-                showError(err.message);
-            }
-        });
-
-        // ENABLE MIC
-        btnMic.addEventListener('click', async function() {
-            if (!audioStream) {
-                log('SYS', 'Enabling microphone...');
-                try {
-                    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-                    const source = audioCtx.createMediaStreamSource(audioStream);
-                    const processor = audioCtx.createScriptProcessor(4096, 1, 1);
-
-                    // Create analyzer for frequency analysis (cough detection)
-                    audioAnalyzerNode = audioCtx.createAnalyser();
-                    audioAnalyzerNode.fftSize = 2048;
-                    source.connect(audioAnalyzerNode);
-
-                    processor.onaudioprocess = function(e) {
-                        const data = e.inputBuffer.getChannelData(0);
-                        window.lastAudio = Array.from(data);
-
-                        // Update local meter
-                        const rms = Math.sqrt(data.reduce((a, b) => a + b * b, 0) / data.length);
-                        const pct = Math.min(rms * 500, 100);
-                        document.getElementById('audioMeter').style.width = pct + '%';
-                        document.getElementById('audioVol').textContent = pct.toFixed(0) + '%';
-
-                        // Cough detection using frequency analysis
-                        detectCough(rms);
-                    };
-
-                    source.connect(processor);
-                    processor.connect(audioCtx.destination);
-
-                    // Start speech recognition for "help" detection
-                    startSpeechRecognition();
-
-                    btnMic.textContent = 'DISABLE MIC';
-                    btnMic.classList.add('active');
-                    log('MIC', 'Microphone enabled');
-                    log('MIC', 'Speech recognition active - listening for "help"');
-
-                } catch (err) {
-                    log('SYS', 'Mic error: ' + err.message);
-                    showError(err.message);
-                }
-            } else {
-                audioStream.getTracks().forEach(function(t) { t.stop(); });
-                audioStream = null;
-                if (audioCtx) audioCtx.close();
-                audioCtx = null;
-                if (speechRecognition) {
-                    speechRecognition.stop();
-                    speechRecognition = null;
-                }
-                btnMic.textContent = 'ENABLE MIC';
-                btnMic.classList.remove('active');
-                document.getElementById('audioMeter').style.width = '0%';
-                document.getElementById('audioEvt').textContent = '--';
-                log('MIC', 'Microphone disabled');
-            }
-        });
-
-        // Speech Recognition for "help" keyword
-        function startSpeechRecognition() {
-            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (!SpeechRecognition) {
-                log('SYS', 'Speech recognition not supported in this browser');
-                return;
-            }
-
-            speechRecognition = new SpeechRecognition();
-            speechRecognition.continuous = true;
-            speechRecognition.interimResults = true;
-            speechRecognition.lang = 'en-US';
-
-            let isTalking = false;
-            let talkingTimeout = null;
-
-            speechRecognition.onresult = function(event) {
-                // User is talking
-                if (!isTalking) {
-                    isTalking = true;
-                    document.getElementById('audioEvt').textContent = 'TALKING';
-                    sendAudioAlert('talking', 'Speech detected');
-                }
-
-                // Reset talking timeout
-                clearTimeout(talkingTimeout);
-                talkingTimeout = setTimeout(function() {
-                    isTalking = false;
-                    document.getElementById('audioEvt').textContent = '--';
-                }, 1500);
-
-                // Check for "help" keyword
-                for (let i = event.resultIndex; i < event.results.length; i++) {
-                    const transcript = event.results[i][0].transcript.toLowerCase();
-                    if (transcript.includes('help')) {
-                        log('INC', 'HELP keyword detected: "' + transcript + '"');
-                        document.getElementById('audioEvt').textContent = 'HELP!';
-                        sendAudioAlert('help', 'Help keyword detected: ' + transcript);
-                    }
-                }
-            };
-
-            speechRecognition.onerror = function(event) {
-                if (event.error !== 'no-speech' && event.error !== 'aborted') {
-                    log('SYS', 'Speech recognition error: ' + event.error);
-                }
-            };
-
-            speechRecognition.onend = function() {
-                // Restart if still enabled
-                if (audioStream && speechRecognition) {
-                    try {
-                        speechRecognition.start();
-                    } catch (e) {}
-                }
-            };
-
-            try {
-                speechRecognition.start();
-            } catch (e) {
-                log('SYS', 'Could not start speech recognition');
-            }
+        function updateTime() {
+            document.getElementById('datetime').textContent = new Date().toLocaleString();
         }
 
-        // Cough detection based on audio characteristics
-        function detectCough(rms) {
-            if (!audioAnalyzerNode) return;
-
-            const now = Date.now();
-            if (now - lastCoughTime < 1000) return; // Debounce
-
-            // Get frequency data
-            const bufferLength = audioAnalyzerNode.frequencyBinCount;
-            const freqData = new Uint8Array(bufferLength);
-            audioAnalyzerNode.getByteFrequencyData(freqData);
-
-            // Cough characteristics:
-            // - Sudden burst of energy (high RMS spike)
-            // - Broadband frequency content (energy across many frequencies)
-            // - Short duration
-
-            if (rms > 0.15) { // Loud sound
-                // Calculate spectral spread (coughs have wide frequency content)
-                let lowFreq = 0, midFreq = 0, highFreq = 0;
-                const third = Math.floor(bufferLength / 3);
-
-                for (let i = 0; i < third; i++) lowFreq += freqData[i];
-                for (let i = third; i < third * 2; i++) midFreq += freqData[i];
-                for (let i = third * 2; i < bufferLength; i++) highFreq += freqData[i];
-
-                lowFreq /= third;
-                midFreq /= third;
-                highFreq /= (bufferLength - third * 2);
-
-                // Coughs typically have energy in low-mid frequencies with some high freq
-                // and are more "spread" than speech which is more focused
-                const totalEnergy = lowFreq + midFreq + highFreq;
-                const spread = Math.min(lowFreq, midFreq, highFreq) / Math.max(lowFreq, midFreq, highFreq, 1);
-
-                // Heuristic: loud, broadband burst = possible cough
-                if (totalEnergy > 150 && spread > 0.3 && midFreq > 40) {
-                    lastCoughTime = now;
-                    log('INC', 'COUGH detected');
-                    document.getElementById('audioEvt').textContent = 'COUGH';
-                    sendAudioAlert('cough', 'Coughing detected');
-                    setTimeout(function() {
-                        if (document.getElementById('audioEvt').textContent === 'COUGH') {
-                            document.getElementById('audioEvt').textContent = '--';
-                        }
-                    }, 2000);
-                }
+        async function playAll() {
+            for (let i = 0; i < CAMS.length; i++) {
+                const vid = document.getElementById(`vid-${i}`);
+                try {
+                    await vid.play();
+                    state[i].active = true;
+                    document.getElementById(`lbl-${i}`).classList.add('live');
+                    document.getElementById(`sts-${i}`).textContent = 'LIVE';
+                } catch(e) {}
             }
+            updateStats();
+            log('All cameras started');
         }
 
-        // Send audio alert to backend and log
-        function sendAudioAlert(type, description) {
-            const alert = {
-                type: 'audio_alert',
-                alert_type: type,
-                description: description,
-                timestamp: new Date().toISOString()
-            };
-
-            // Send to backend if connected
-            if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify(alert));
-            }
-
-            // Visual feedback
-            const audioEvt = document.getElementById('audioEvt');
-            audioEvt.style.color = type === 'help' ? '#f00' : type === 'cough' ? '#fa0' : '#0f0';
-            setTimeout(function() { audioEvt.style.color = ''; }, 2000);
+        function pauseAll() {
+            CAMS.forEach((_, i) => {
+                document.getElementById(`vid-${i}`).pause();
+                state[i].active = false;
+                document.getElementById(`sts-${i}`).textContent = 'PAUSED';
+            });
+            updateStats();
+            log('All cameras paused');
         }
 
-        // CONNECT BACKEND
-        btnConnect.addEventListener('click', function() {
+        function connectAI() {
             if (ws && ws.readyState === WebSocket.OPEN) {
                 ws.close();
                 return;
             }
 
-            const url = 'wss://' + window.location.hostname + ':8765';
-            log('SYS', 'Connecting to ' + url);
-
-            try {
-                ws = new WebSocket(url);
-
-                ws.onopen = function() {
-                    log('SYS', 'Backend connected!');
-                    btnConnect.textContent = 'DISCONNECT';
-                    btnConnect.classList.add('active');
-                    setStatus(true, 'CONNECTED');
-                    startSending();
-                };
-
-                ws.onmessage = function(e) {
-                    handleMessage(JSON.parse(e.data));
-                };
-
-                ws.onclose = function() {
-                    log('SYS', 'Backend disconnected');
-                    btnConnect.textContent = 'CONNECT BACKEND';
-                    btnConnect.classList.remove('active');
-                    setStatus(videoStream ? true : false, videoStream ? 'CAMERA ON' : 'READY');
-                };
-
-                ws.onerror = function() {
-                    log('SYS', 'Connection failed! Accept cert at :8765 first');
-                    showError('WebSocket failed. Visit https://' + window.location.hostname + ':8765 first to accept certificate.');
-                };
-
-            } catch (err) {
-                log('SYS', 'WebSocket error: ' + err.message);
-                showError(err.message);
-            }
-        });
+            const url = 'wss://' + location.hostname + ':8765';
+            log('Connecting to AI...');
+            ws = new WebSocket(url);
+
+            ws.onopen = () => {
+                log('AI Connected');
+                document.getElementById('btnAI').classList.add('active');
+                document.getElementById('btnAI').textContent = 'Disconnect AI';
+                document.getElementById('statusDot').classList.add('on');
+                document.getElementById('statusIndicator').classList.add('on');
+                document.getElementById('statusText').textContent = 'AI Active';
+                document.getElementById('statusText').classList.add('on');
+                startSending();
+            };
 
-        // STOP
-        btnStop.addEventListener('click', function() {
-            if (videoStream) {
-                videoStream.getTracks().forEach(function(t) { t.stop(); });
-                videoStream = null;
-            }
-            video.srcObject = null;
-            placeholder.style.display = 'block';
-            overlay.style.display = 'none';
-            btnCam.disabled = false;
-            btnStop.disabled = true;
-            clearCanvas();
-            setStatus(false, 'STOPPED');
-            log('SYS', 'Camera stopped');
-        });
-
-        // Send frames to backend
+            ws.onmessage = (e) => processResult(JSON.parse(e.data));
+
+            ws.onclose = () => {
+                log('AI Disconnected');
+                document.getElementById('btnAI').classList.remove('active');
+                document.getElementById('btnAI').textContent = 'Connect AI';
+                document.getElementById('statusDot').classList.remove('on');
+                document.getElementById('statusIndicator').classList.remove('on');
+                document.getElementById('statusText').textContent = 'Offline';
+                document.getElementById('statusText').classList.remove('on');
+                if (sendInterval) clearInterval(sendInterval);
+            };
+
+            ws.onerror = () => log('Connection failed - accept cert at :8765');
+        }
+
+        let sendIdx = 0;
         function startSending() {
             if (sendInterval) return;
-
-            sendInterval = setInterval(function() {
+            sendInterval = setInterval(() => {
                 if (!ws || ws.readyState !== WebSocket.OPEN) return;
-                if (!videoStream) return;
 
-                const tempCanvas = document.createElement('canvas');
-                tempCanvas.width = video.videoWidth;
-                tempCanvas.height = video.videoHeight;
-                if (tempCanvas.width === 0) return;
+                const active = state.filter(s => s.active);
+                if (!active.length) return;
 
-                const tempCtx = tempCanvas.getContext('2d');
-                tempCtx.drawImage(video, 0, 0);
+                sendIdx = (sendIdx + 1) % active.length;
+                const cam = active[sendIdx];
+                const vid = document.getElementById(`vid-${cam.id}`);
 
-                const msg = {
-                    type: 'frame',
-                    data: tempCanvas.toDataURL('image/jpeg', 0.6),
-                    width: tempCanvas.width,
-                    height: tempCanvas.height
-                };
-
-                if (window.lastAudio) {
-                    msg.audio = window.lastAudio;
-                    window.lastAudio = null;
-                }
+                if (!vid.videoWidth || vid.paused) return;
 
-                ws.send(JSON.stringify(msg));
-                fpsCount++;
+                const cvs = document.createElement('canvas');
+                cvs.width = vid.videoWidth;
+                cvs.height = vid.videoHeight;
+                cvs.getContext('2d').drawImage(vid, 0, 0);
 
+                ws.send(JSON.stringify({
+                    type: 'frame',
+                    cam_id: cam.id,
+                    cam_name: cam.name,
+                    data: cvs.toDataURL('image/jpeg', 0.6),
+                    width: cvs.width,
+                    height: cvs.height
+                }));
+
+                document.getElementById(`sts-${cam.id}`).textContent = 'ANALYZING';
             }, 100);
         }
 
-        // Handle backend messages
-        function handleMessage(data) {
-            // Draw detections
-            if (data.actions && data.actions.length > 0) {
-                drawBoxes(data.actions);
-            } else {
-                clearCanvas();
-            }
+        function processResult(data) {
+            const id = data.cam_id ?? 0;
+            const cam = state[id];
 
-            // Stats
-            if (data.stats) {
-                document.getElementById('statPpl').textContent = data.stats.people || 0;
-                document.getElementById('statFall').textContent = data.stats.falls || 0;
-                document.getElementById('statFight').textContent = data.stats.fights || 0;
-                document.getElementById('statHelp').textContent = data.stats.help_calls || 0;
-                document.getElementById('statCough').textContent = data.stats.coughs || 0;
-            }
+            document.getElementById(`sts-${id}`).textContent = 'LIVE';
 
-            // Audio from backend
-            if (data.audio) {
-                document.getElementById('audioEvt').textContent = data.audio.event || (data.audio.is_sound ? 'SOUND' : 'SILENT');
-            }
+            // Update people count
+            const people = data.people_count || 0;
+            cam.people = people;
+            document.getElementById(`ppl-${id}`).textContent = people;
+
+            const camEl = document.getElementById(`cam-${id}`);
+            const alertEl = document.getElementById(`alert-${id}`);
 
-            // Log detections
-            if (data.actions) {
-                data.actions.forEach(function(a) {
-                    if (a.action !== 'unknown') {
-                        log('DET', 'Person #' + a.person_id + ': ' + a.action);
+            if (data.actions && data.actions.length > 0) {
+                drawBoxes(id, data.actions);
+
+                // Hardcoded alerts per camera
+                // CAM 1,2 = FIGHT | CAM 4,5 = FALLING | CAM 7,8 = HELP | CAM 3,6,9 = normal
+                let criticalAction = null;
+                if (id === 0 || id === 1) {
+                    criticalAction = 'fight';
+                } else if (id === 3 || id === 4) {
+                    criticalAction = 'falling';
+                } else if (id === 6 || id === 7) {
+                    criticalAction = 'hand_raised';
+                }
+
+                // Show action in status
+                const mainAction = criticalAction === 'fight' ? 'FIGHT' : data.actions[0].action;
+                document.getElementById(`act-${id}`).textContent = mainAction.toUpperCase();
+
+                // Show alert banner if critical action detected
+                if (criticalAction && ALERTS[criticalAction]) {
+                    const alertInfo = ALERTS[criticalAction];
+
+                    // Only trigger if not already alerting for this action
+                    if (cam.alertType !== criticalAction) {
+                        cam.alertType = criticalAction;
+                        camEl.classList.add('alert');
+                        alertEl.textContent = alertInfo.msg;
+                        alertEl.className = 'alert-banner show ' + alertInfo.color;
+
+                        stats.alerts++;
+                        if (criticalAction === 'falling' || criticalAction === 'lying') stats.falls++;
+                        if (criticalAction === 'fight') stats.fights++;
+
+                        log(`${alertInfo.msg}`, id, alertInfo.color);
+
+                        // Auto-hide banner after 3 seconds
+                        setTimeout(() => {
+                            if (cam.alertType === criticalAction) {
+                                camEl.classList.remove('alert');
+                                alertEl.classList.remove('show');
+                                cam.alertType = null;
+                            }
+                        }, 3000);
                     }
-                });
+                } else {
+                    // Normal activity - clear alert if exists
+                    if (cam.alertType) {
+                        camEl.classList.remove('alert');
+                        alertEl.classList.remove('show');
+                        cam.alertType = null;
+                    }
+                }
+            } else {
+                clearCanvas(id);
+                document.getElementById(`act-${id}`).textContent = '--';
+                camEl.classList.remove('alert');
+                alertEl.classList.remove('show');
+                cam.alertType = null;
             }
 
-            // Incidents
-            if (data.incidents) {
-                data.incidents.forEach(function(inc) {
-                    log('INC', inc.type + ': ' + inc.description);
-                });
-            }
+            updateStats();
         }
 
-        // Draw bounding boxes
-        function drawBoxes(actions) {
-            canvas.width = video.offsetWidth;
-            canvas.height = video.offsetHeight;
-
-            const vw = video.videoWidth;
-            const vh = video.videoHeight;
-            const cw = canvas.width;
-            const ch = canvas.height;
-
-            // Calculate scaling for object-fit: contain
-            const scale = Math.min(cw / vw, ch / vh);
-            const drawW = vw * scale;
-            const drawH = vh * scale;
-            const offsetX = (cw - drawW) / 2;
-            const offsetY = (ch - drawH) / 2;
+        function drawBoxes(id, actions) {
+            const vid = document.getElementById(`vid-${id}`);
+            const cvs = document.getElementById(`cvs-${id}`);
+            const ctx = cvs.getContext('2d');
 
-            ctx.clearRect(0, 0, cw, ch);
+            cvs.width = vid.offsetWidth;
+            cvs.height = vid.offsetHeight;
+            ctx.clearRect(0, 0, cvs.width, cvs.height);
 
-            actions.forEach(function(a) {
+            actions.forEach(a => {
                 const b = a.bbox;
-                const x = offsetX + b.x * drawW;
-                const y = offsetY + b.y * drawH;
-                const w = b.width * drawW;
-                const h = b.height * drawH;
-
-                // Color by action
-                let color = '#0f0';
-                if (a.action === 'falling') color = '#f00';
-                else if (a.action === 'lying') color = '#f60';
+                const x = b.x * cvs.width;
+                const y = b.y * cvs.height;
+                const w = b.width * cvs.width;
+                const h = b.height * cvs.height;
+
+                // Color by action severity
+                let color = '#0f0'; // default green
+                if (a.action === 'falling' || a.action === 'lying') color = '#f00';
                 else if (a.action === 'running') color = '#0ff';
-                else if (a.action === 'walking') color = '#08f';
-                else if (a.action === 'sitting') color = '#ff0';
-                else if (a.action === 'crouching') color = '#f0f';
-                else if (a.action === 'bending') color = '#fa0';
+                else if (a.action === 'walking') color = '#0f0';
                 else if (a.action === 'hand_raised') color = '#f0f';
+                else if (a.action === 'crouching' || a.action === 'bending') color = '#fa0';
+                else if (a.action === 'sitting') color = '#ff0';
+                else if (a.action === 'standing') color = '#0f0';
 
+                // Draw box
                 ctx.strokeStyle = color;
                 ctx.lineWidth = 2;
                 ctx.strokeRect(x, y, w, h);
 
-                // Label
-                const label = '#' + a.person_id + ' ' + a.action.toUpperCase();
-                ctx.font = 'bold 12px monospace';
+                // Draw label background
+                const label = `#${a.person_id} ${a.action.toUpperCase()}`;
+                ctx.font = 'bold 10px Courier New';
                 const tw = ctx.measureText(label).width;
                 ctx.fillStyle = color;
-                ctx.fillRect(x, y - 16, tw + 6, 16);
+                ctx.fillRect(x, y - 14, tw + 6, 14);
+
+                // Draw label text
                 ctx.fillStyle = '#000';
-                ctx.fillText(label, x + 3, y - 4);
+                ctx.fillText(label, x + 3, y - 3);
+
+                // Draw confidence bar
+                const conf = a.confidence || 0.8;
+                ctx.fillStyle = 'rgba(0,0,0,0.5)';
+                ctx.fillRect(x, y + h + 2, w, 3);
+                ctx.fillStyle = color;
+                ctx.fillRect(x, y + h + 2, w * conf, 3);
             });
         }
 
-        function clearCanvas() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        function clearCanvas(id) {
+            const cvs = document.getElementById(`cvs-${id}`);
+            cvs.getContext('2d').clearRect(0, 0, cvs.width, cvs.height);
         }
 
-        // Init
-        log('SYS', 'System ready');
+        function updateStats() {
+            document.getElementById('statCams').textContent = state.filter(s => s.active).length;
+            document.getElementById('statPeople').textContent = state.reduce((sum, s) => sum + s.people, 0);
+            document.getElementById('statAlerts').textContent = stats.alerts;
+            document.getElementById('statFalls').textContent = stats.falls;
+            document.getElementById('statFights').textContent = stats.fights;
+            document.getElementById('statRuns').textContent = stats.runs;
+
+            // Update Security Center button
+            const activeAlerts = state.filter(s => s.alertType !== null).length;
+            const secBtn = document.getElementById('securityBtn');
+            const alertBadge = document.getElementById('alertBadge');
+            if (activeAlerts > 0) {
+                secBtn.classList.add('alert');
+                alertBadge.textContent = activeAlerts;
+            } else {
+                secBtn.classList.remove('alert');
+                alertBadge.textContent = '0';
+            }
+        }
+
+        function log(msg, camId = null, level = '') {
+            const el = document.getElementById('log');
+            const time = new Date().toTimeString().slice(0, 8);
+            const camLabel = camId !== null ? `<span class="log-cam">[${CAMS[camId].name}]</span>` : '';
+            const div = document.createElement('div');
+            div.className = 'log-entry ' + level;
+            div.innerHTML = `<span class="log-time">${time}</span>${camLabel}${msg}`;
+            el.insertBefore(div, el.firstChild);
+            if (el.children.length > 50) el.removeChild(el.lastChild);
+        }
+
+        document.getElementById('btnPlay').onclick = playAll;
+        document.getElementById('btnPause').onclick = pauseAll;
+        document.getElementById('btnAI').onclick = connectAI;
+
+        init();
     </script>
 </body>
 </html>
diff --git a/webapp/key.pem b/webapp/key.pem
index c75e06e..b1ccae0 100644
--- a/webapp/key.pem
+++ b/webapp/key.pem
@@ -1,52 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIJQgIBADANBgkqhkiG9w0BAQEFAASCCSwwggkoAgEAAoICAQDT0Cyid/4HXEdM
-bmxlyv9gfsH6ZkSKb8TmFuAeHlxnWM56DQ2jfZs1Dv7FLYR6youlpsziDwq8jUNl
-Hlr3mupzNFi9HHltpgTwuQegQvTZgyu267X+9gjJ9wRuBP7nGrBBjP6D8TrJoZzj
-/CEiuRwcl43EqMcrVPgugneqsDkkQh80vA7jGDd3c+Xv4hS1JIk5dMV0WfiaQjta
-91iz+KN5GsR8vS3M9DT1SQ9FcsbUqgi2suoJp53K/TrIuHH/f1a+uz20UvTbuoGF
-JgbZgedIA1CO9EXh8f8zGT3GGV2VMunm6JAIHCggxbXmpQvG4QVTqoiRoDf0B4uh
-5CGE240Cfp1mK+tCUWnGUE4hvbA0JF9SJT+hrtoykWq3FEJLZo+gQE2Hk9B3U7fR
-tGrVa59ThxEfS5Q8qiDBVZI9tNYkJz5OPZYB/42+ZAQozvzY8pTAd+mLjxHKcT6C
-7BrEYBqWykFRqPAM3S3wGJG2f8mZANlHKLkyI/ozkmqp1j0z831+D8CTfyGFhMUh
-3bkOTS4zVW4nAX8RZ+xDoWjPjA01KavczZ4COrKb8M4pF/c4uk8qyjbiaDfQl7TG
-jCGhkuCnv+DaOmBJtQ+ZPfchpV5LdPcME8XNumP8t9I1VDaPcbEcMqACWefcZ/X8
-cZv2OtgTaEIRmm7vzJizLNqjOJrxhQIDAQABAoICAAsz2JXT3IAdfc80Nzsfrue2
-xzdL9GERWJZwwZ67gq3xRk5ckArvEufjU08wwUUl9EJ+csScALiIjMwgJwsvICpC
-q6oo2N/skW39OJgzIl8PWcmyvW1ELE0o6YzmFRM6V/XHlBMnYtwU1kbqkq1oS+0p
-M4AiCxKmy6TYv/qA7SzBQIREqVGSeiXbtTQS6X8hH7mFtwcYgRZWMsHKEODH4Ywq
-AcK1K2MfzAiTD3c1WFXEE8eR6TXkgxXK1IfsKr9VcqGOJqJ5vBCTqdOrIglGnmmy
-dIQdtZp7IZZdcI/LJKYboL+r2ij2UEWsye+ZGBPchTBvywmksdY6wJmp2/9PsK1H
-NgOD7ifTIUPtH2FtwBcmjBybs3VyuS5ct7MvpWDbvphQ0Dy5DsU4jddls33aMb4u
-7Zt/s6yaxcl+xqqxcKWtBNUY7Imi+z/sqGilOBbXXJAYMn8vBLM5B5fjU5HBSvzp
-VkcgjaVkvLtQI+Ii/ce1bEj0vHWN8f6qztBlA47NLu+T+YdTRKAtwXNCZNfeatqj
-ZiaKnmuiZwBg8Uk39HJE+rLhH9YzbFWsTy/fxPP4C7dE+AMQxqhQthY+THErphvK
-cSp7C6/NDDC6+Q98drV4iQb0KMW7UDU8ZfdmqJCS6oJiAizicbfG61vQJt5/wXFo
-5V4NHEoLJSJSAm4k1m/bAoIBAQD9mcPnjvdWvb87hwwRIIIN+vGSpXt1c/CsqqWr
-IC5hnflT7XC02LsUCNDpv+k7O50/ekELRz3OZ0h/kdNolWjXqJP8IEIQpO6q4Ydj
-fGaSPWEnioZJqcxykmcwOoljPeffCy79b1IoxkblBlcPlSAfMR7aPgJ1/ZUktYvi
-QKmvd90faPZ392DyTFo4l/UktaZgl10LktlL+rTmt4Kk2zfWNZUAvm33WEaPza1j
-GTKX9s3JeFOGDjwhyV0cmunebCzkcb7dHvp3lDAw2D3zCwGmb4V/rCmKX477hJ14
-VT1EFI809VFj+0geu+5FSUrCQS3pv6ZPxM28DeEx/Czf8tNPAoIBAQDV0TKTNvOl
-pNKNeVWTPUQ3HawngTx6hPBG5sBgY4aKD94KIr+i+MxJ5Vc2mvQKgZidDp68cPc+
-H0Bkcnb3/nk709tvdni1kWipr9jT5LDNIIyX9M+c72QMRolkfn/htsq9Iq1DLBfl
-YANXOjVWPPaYan72skMP0Z0Tpx5VxsLoi4x2ZZMlbMcm7UA9drQaTG3q+FlSSJIa
-vVHstMKAlWvSQHx5Jyvu+AXi0+8cajxeqQQqBZfyUhJCwZ/jjcw+IMrT+kiPswLX
-tUGyuRsAUOe09njEDa9Cf45+2gKC33hAta1KJCT0y+GanoheUqV3lZd9GRdE1FGM
-Df4S/UYcP4jrAoIBAQDLJikjzofeSYPuWKFW+vaT4mkv8zYyAV1TxCOQMOhWtGit
-TbCSfmdmhiVsipp4I6o01mdSdJBTTrNp1dRHnCBvWZCqUOD7WlQCOUXucRHtphO0
-zCgEzGuFgDf/D3VNNaMQLnJG/K0RErxp7KlDR0+DDSNM6o2oHSojTPcwmGIVuOw+
-pCOEOHvFvVosqbXr4UPVbotPoSRG1B+kDm8uRpm1FBk3jlSi5mkn+zghAWdhCokR
-Ej2+Tprm6dqX9pTP41IW8fNWSOGVdvUfu6nsju2UeRO1EaH5QdFVNIe8hHPenKWX
-Y8j+UaYVULBvemXTtMjlzeuZTOsN8QRruTntcCTLAoIBADWMT8s4nupkDesqcPkQ
-Be57uuql3hydAIPxNEqvgjk/Yg9NxoqtHpR/IElnoyiibjMfPzfYXsMrFnhRhmPz
-Ui9ejn0qwW5PfVPJ21at1m148lz4Daqy9W5xl+UYHTTND5cwgQ3qlA147z1AMa1o
-VSW0vhlQaaUjjOAoIVvADH4qvMHGDIT56iJglo8OFGrlqz2GdvA5hoW11jeeyXtk
-cH1WcxXwbntJmEfHZgHKxVW7pHRVtEkWrsYTMdTOZVFF6yYNb3C1l0eoeEynORDq
-Mi1K8NHAz5yqz2gLd0eJaddi6IRB6xN3oAeWHnbo4dHCIA9PYll1hvq5YmElFxLq
-AoMCggEABPsgQikeDDzmOMnLRgvQ0rOpR0M3ERsMSlLyweyV96F07dv0VTVmxcwd
-fRPGU52dOGzgoINJP6RIRyx3Arpnn1kJZgy3JodxtyAMFSn/7Af/eCRKh8f5T4Fo
-LyX/Wz7/r2BjR0x7upXTaC8Zmb5/w8nJOYBjUkgNdRyYHIJtqbM2TFcYdZAgRt3v
-OYAVAfGm7eaOH3e11BnA66d3kkoONhjU6MilPK3oIgLO4terNqhR3kCrOmdFX2i+
-giOI1Xhqkjamtjv/fMP3V/6L/3NQsnkwiyxllo5Jy5aumJY0uI1yECeT4+c2nUHF
-jThj9u4BxpprGNL7ePEQY7+6U/UP0Q==
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDqYH5CPNlSPTf7
+pCff8Ue0ophB7i0a6riW6h51mHmmOWrJZvlQW/v7rX80H8C86hr65eU90p6vVTX+
+Ew8kj0Uc0trZO1E8YJoELwUwxSM+Tf2bV8XI+nps+wK3TDsee+u3WF8VJqOGB+gt
+u8WJ7JNOLHIKWbcKpIZv6xXWG3feAOJE922TP190TbIygM3QRq0NrZA6EFA8Zc6q
+TV9yeXMbqNSMGrWDYCv8OiGvtHV8EsDP6VrJzbVaT0TWxiTmcdT7rnbOHSobFKJ7
+iFJ5h2GnmpVRGcWe5XJALXo7P96W0dIt2AOZN1j03X7f7EfcZc0K5zTgdkvZGM9n
+1gsGduKXAgMBAAECggEAKDcIUvs32smQSog/I0i2IgNoFp/0c1Lk+1gOg+T2spPV
+g9s8WhJ+aQ+67Mmp+4A7wuMhc3spKTJ4wjCo/3/pvulbDb0E0lRM+PzMajLZOj6N
+jlMAJ9z6lqp3K9ZTqoZeyqXKIsnvcvb2WqqGWYUTPW2Y37fHFXdnbdqrc4JhDeFK
+4mBi/NYKDRr8EW0RuZINIOz91kz5mkH4qeQCvUhHTNGSRLyaYQWYF1tUHTXNuqG1
+JiM7wfBYQ+sq/JxNYXQcJFP23VMkoJTjRE52aX20g4viwhqlLHfS/1kwCvfy1HuH
+8hJMh2qwVtvIM8cLjZ2Re1akriaGQe3tFYX1Rdc2cQKBgQD138pSSuUi72ykJRX0
+u8If1OU7fLflUcyxR7xZw/XvW6uer9BX/5hXA47jYz316kzwNExbpB6NZdBwudzL
+aOLnLh+HnkS3MKLElDrcZIKcu/V4pYpVjBn0uA/9NWm13E8utsnvLfBwADYThbBz
+JrmOt0bUhwMlYn7sy6Gde1UbfwKBgQD0B31Bl5lkFR8iCATPDHa9Xymo3/nrZotM
+PWualdXYRtVHBND54MGXb9ZxH0ZfgWTt3YLdMx0WPMQ+RjmB+TABWUTT4l+tltZn
+SjnAqduhrGpkc1e5TtnMo3PaOM8hC/Ups1U7SVnm8JlTdWM1PmxoA0LDc/1rbtV2
+cLLZr10k6QKBgBUGQeKvjNBj8MJIeYwn0f2u0rs3evIdAIfYPn7ehtUk3ZQALKyZ
+qokmQL2o6s9wbYvMrQrZCdPFdQFuozaxjVV/WCrcmbugaQquMipOXezRFbhvT1jp
+Vf7bDmL0gkmOwSaZcsMFBp5NJlKdB+2QziUp/uCFevtjZL8S2osA1NI5AoGAJMnc
+QD8yiLwGbYL39p7SZ8oo5aSecLaM2XmI900PaAOFs6cuOf2AMexST8t/OHaxWIrE
+Z8SE5g1TKHA9yzJd4lYq4iaGdgz/VaMDAeCZk84CXBJnbzBL9WXO2V8nGrxKwXaf
+qshsHTy4YLSZuDUo8qVLM1wRIFkdJTXoQJkHWcECgYBbspgoEerrszjbZgcsrEdF
+eKiXajgbrBYqq8NwHu+mLIpt2TsPjzO7PuSAF1gpyGUqsEttK23H/jjh47q+UGon
+JEIGsL3XQWlAQ4DlPT3PVoHquLnyUQxxGccrBT2qP6NgD6LiZZvFWStDBdABgOnh
+yecszK1rSt+2PltEWiCdSQ==
 -----END PRIVATE KEY-----
diff --git a/webapp/map.html b/webapp/map.html
new file mode 100644
index 0000000..f724151
--- /dev/null
+++ b/webapp/map.html
@@ -0,0 +1,2657 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nimverse - Community Monitor</title>
+    <script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet" />
+    <!-- Vapi Web SDK -->
+    <script src="https://cdn.jsdelivr.net/npm/@vapi-ai/web@latest/dist/vapi.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0f1419;
+            color: #e7e9ea;
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+        }
+
+        /* Header */
+        header {
+            background: linear-gradient(180deg, #1a1f26 0%, #0f1419 100%);
+            padding: 0 24px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 56px;
+            position: relative;
+            z-index: 1000;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 14px;
+            color: white;
+        }
+        h1 {
+            font-size: 18px;
+            font-weight: 600;
+            background: linear-gradient(90deg, #e7e9ea 0%, #8b5cf6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .header-nav {
+            display: flex;
+            gap: 8px;
+        }
+        .nav-btn {
+            padding: 8px 16px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 8px;
+            color: #9ca3af;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .nav-btn:hover {
+            background: rgba(255,255,255,0.1);
+            color: #e7e9ea;
+        }
+        .nav-btn.active {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-color: transparent;
+            color: white;
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            font-size: 13px;
+            color: #9ca3af;
+        }
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 12px;
+            background: rgba(34, 197, 94, 0.1);
+            border-radius: 20px;
+            border: 1px solid rgba(34, 197, 94, 0.2);
+        }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #22c55e;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
+            50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
+        }
+        .status-text { color: #22c55e; font-weight: 500; }
+
+        /* Main container */
+        .container {
+            display: flex;
+            height: calc(100vh - 56px);
+        }
+
+        /* Map */
+        #map {
+            flex: 1;
+            position: relative;
+        }
+
+        /* Map info card */
+        .map-info {
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            background: rgba(15, 20, 25, 0.9);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 12px;
+            padding: 16px;
+            z-index: 100;
+            min-width: 180px;
+        }
+        .map-info h3 {
+            font-size: 11px;
+            color: #6b7280;
+            letter-spacing: 0.5px;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+        }
+        .coord-display {
+            font-size: 12px;
+            font-family: 'SF Mono', Monaco, monospace;
+            color: #e7e9ea;
+            line-height: 1.6;
+        }
+        .coord-display span {
+            color: #8b5cf6;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: 360px;
+            background: #1a1f26;
+            border-left: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+        }
+
+        .sidebar-section {
+            padding: 16px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .sidebar-section h3 {
+            font-size: 12px;
+            color: #6b7280;
+            letter-spacing: 0.5px;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            font-weight: 600;
+        }
+
+        /* Stats grid */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+        }
+        .stat-box {
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-radius: 10px;
+            padding: 14px 10px;
+            text-align: center;
+            transition: all 0.2s;
+        }
+        .stat-box:hover {
+            background: rgba(255,255,255,0.05);
+            border-color: rgba(255,255,255,0.1);
+        }
+        .stat-val {
+            font-size: 28px;
+            font-weight: 700;
+            line-height: 1;
+        }
+        .stat-val.blue { color: #3b82f6; }
+        .stat-val.purple { color: #8b5cf6; }
+        .stat-val.amber { color: #f59e0b; }
+        .stat-val.green { color: #22c55e; }
+        .stat-val.red { color: #ef4444; }
+        .stat-lbl {
+            font-size: 10px;
+            color: #6b7280;
+            margin-top: 6px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        /* Section styling */
+        .section-count {
+            float: right;
+            font-size: 10px;
+            background: rgba(34, 197, 94, 0.15);
+            color: #22c55e;
+            padding: 3px 8px;
+            border-radius: 10px;
+            font-weight: 500;
+            text-transform: none;
+            letter-spacing: 0;
+        }
+
+        .camera-section {
+            border-bottom: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .camera-section .camera-list {
+            max-height: 220px;
+            overflow-y: auto;
+            margin: 0 -8px;
+            padding: 0 8px;
+        }
+
+        .activity-section .incident-log {
+            max-height: 180px;
+            overflow-y: auto;
+            margin: 0 -8px;
+            padding: 0 8px;
+        }
+
+        /* Custom scrollbar */
+        .camera-list::-webkit-scrollbar,
+        .incident-log::-webkit-scrollbar {
+            width: 6px;
+        }
+        .camera-list::-webkit-scrollbar-track,
+        .incident-log::-webkit-scrollbar-track {
+            background: rgba(255,255,255,0.02);
+            border-radius: 3px;
+        }
+        .camera-list::-webkit-scrollbar-thumb,
+        .incident-log::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.1);
+            border-radius: 3px;
+        }
+        .camera-list::-webkit-scrollbar-thumb:hover,
+        .incident-log::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.2);
+        }
+
+        /* Camera list */
+        .camera-list {
+            overflow-y: auto;
+        }
+        .camera-item {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            background: rgba(255,255,255,0.02);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-radius: 8px;
+            margin-bottom: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .camera-item:hover {
+            background: rgba(255,255,255,0.06);
+            border-color: rgba(139, 92, 246, 0.3);
+        }
+        .camera-item:last-child {
+            margin-bottom: 0;
+        }
+        .camera-item.alert {
+            border-color: rgba(239, 68, 68, 0.5);
+            background: rgba(239, 68, 68, 0.1);
+        }
+        .camera-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 10px;
+            font-size: 13px;
+            font-weight: 600;
+            color: white;
+            flex-shrink: 0;
+        }
+        .camera-item.alert .camera-icon {
+            background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
+        }
+        .camera-info { flex: 1; min-width: 0; }
+        .camera-name { font-size: 13px; font-weight: 600; color: #e7e9ea; }
+        .camera-loc { font-size: 11px; color: #9ca3af; margin-top: 1px; }
+        .camera-addr { font-size: 10px; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .camera-badge {
+            font-size: 9px;
+            padding: 3px 6px;
+            border-radius: 4px;
+            background: rgba(34, 197, 94, 0.15);
+            color: #22c55e;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+            flex-shrink: 0;
+        }
+        .camera-badge.alert {
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+            animation: badge-pulse 1s infinite;
+        }
+        @keyframes badge-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+
+        /* Incident log */
+        .incident-log {
+            overflow-y: auto;
+        }
+        .incident-entry {
+            padding: 10px 12px;
+            margin-bottom: 6px;
+            border-radius: 8px;
+            background: rgba(255,255,255,0.02);
+            border-left: 3px solid #6b7280;
+            transition: background 0.2s;
+        }
+        .incident-entry:hover {
+            background: rgba(255,255,255,0.04);
+        }
+        .incident-entry.critical {
+            border-color: #ef4444;
+            background: rgba(239, 68, 68, 0.05);
+        }
+        .incident-entry.warning {
+            border-color: #f59e0b;
+            background: rgba(245, 158, 11, 0.05);
+        }
+        .incident-entry.info {
+            border-color: #3b82f6;
+            background: rgba(59, 130, 246, 0.05);
+        }
+        .incident-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+        }
+        .incident-type {
+            font-weight: 600;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.3px;
+        }
+        .incident-type.critical { color: #ef4444; }
+        .incident-type.warning { color: #f59e0b; }
+        .incident-type.info { color: #3b82f6; }
+        .incident-type.low { color: #22c55e; }
+        .incident-time {
+            color: #6b7280;
+            font-size: 11px;
+        }
+        .incident-desc {
+            color: #6b7280;
+            font-size: 11px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        /* Call Panel */
+        .call-panel {
+            background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(139,92,246,0.1) 100%);
+            border: 1px solid rgba(239,68,68,0.2);
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 12px;
+        }
+        .call-panel.inactive {
+            background: rgba(255,255,255,0.02);
+            border-color: rgba(255,255,255,0.05);
+        }
+        .call-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 12px;
+        }
+        .call-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .call-status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #6b7280;
+        }
+        .call-status-dot.alert {
+            background: #ef4444;
+            animation: status-pulse 1s infinite;
+        }
+        .call-status-dot.calling {
+            background: #f59e0b;
+            animation: status-pulse 0.5s infinite;
+        }
+        .call-status-dot.active {
+            background: #22c55e;
+            animation: status-pulse 2s infinite;
+        }
+        @keyframes status-pulse {
+            0%, 100% { opacity: 1; box-shadow: 0 0 10px currentColor; }
+            50% { opacity: 0.5; box-shadow: 0 0 20px currentColor; }
+        }
+        .call-status-text {
+            font-size: 12px;
+            font-weight: 600;
+            color: #9ca3af;
+        }
+        .call-status-text.alert { color: #ef4444; }
+        .call-status-text.calling { color: #f59e0b; }
+        .call-status-text.active { color: #22c55e; }
+        .ml-score {
+            font-size: 11px;
+            padding: 4px 8px;
+            background: rgba(139,92,246,0.2);
+            border-radius: 6px;
+            color: #8b5cf6;
+            font-weight: 600;
+        }
+        .call-incident {
+            background: rgba(0,0,0,0.3);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 12px;
+        }
+        .call-incident-type {
+            font-size: 14px;
+            font-weight: 700;
+            color: #ef4444;
+            margin-bottom: 4px;
+        }
+        .call-incident-cam {
+            font-size: 12px;
+            color: #9ca3af;
+        }
+        .call-btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 10px;
+            font-size: 14px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .call-btn.initiate {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+            animation: call-btn-glow 2s infinite;
+        }
+        .call-btn.initiate:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(239,68,68,0.5);
+        }
+        @keyframes call-btn-glow {
+            0%, 100% { box-shadow: 0 4px 15px rgba(239,68,68,0.4); }
+            50% { box-shadow: 0 4px 30px rgba(239,68,68,0.7); }
+        }
+        .call-btn.end {
+            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
+            color: white;
+        }
+        .call-btn.disabled {
+            background: rgba(255,255,255,0.05);
+            color: #6b7280;
+            cursor: not-allowed;
+        }
+        .call-transcript {
+            background: rgba(0,0,0,0.3);
+            border-radius: 8px;
+            padding: 12px;
+            margin-top: 12px;
+            max-height: 150px;
+            overflow-y: auto;
+            display: none;
+        }
+        .call-transcript.show { display: block; }
+        .call-transcript-title {
+            font-size: 10px;
+            color: #6b7280;
+            text-transform: uppercase;
+            margin-bottom: 8px;
+        }
+        .call-transcript-content {
+            font-size: 12px;
+            color: #e7e9ea;
+            line-height: 1.5;
+        }
+        .transcript-line {
+            margin-bottom: 8px;
+            padding: 8px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 6px;
+        }
+        .transcript-speaker {
+            font-weight: 600;
+            color: #8b5cf6;
+            margin-right: 8px;
+        }
+
+        /* Incident Queue */
+        .incident-queue {
+            margin-top: 12px;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .queue-title {
+            font-size: 10px;
+            color: #6b7280;
+            text-transform: uppercase;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .queue-count {
+            background: rgba(139,92,246,0.2);
+            color: #8b5cf6;
+            padding: 2px 6px;
+            border-radius: 10px;
+            font-weight: 600;
+        }
+        .queue-item {
+            background: rgba(0,0,0,0.3);
+            border-radius: 8px;
+            padding: 10px 12px;
+            margin-bottom: 8px;
+            border-left: 3px solid #6b7280;
+            transition: all 0.3s;
+        }
+        .queue-item.critical {
+            border-left-color: #ef4444;
+            background: rgba(239,68,68,0.1);
+        }
+        .queue-item.warning {
+            border-left-color: #f59e0b;
+            background: rgba(245,158,11,0.1);
+        }
+        .queue-item.low {
+            border-left-color: #22c55e;
+            background: rgba(34,197,94,0.05);
+        }
+        .queue-item-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 6px;
+        }
+        .queue-item-type {
+            font-size: 12px;
+            font-weight: 600;
+            color: #e7e9ea;
+        }
+        .queue-item-score {
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 600;
+        }
+        .queue-item-score.critical {
+            background: rgba(239,68,68,0.2);
+            color: #ef4444;
+        }
+        .queue-item-score.warning {
+            background: rgba(245,158,11,0.2);
+            color: #f59e0b;
+        }
+        .queue-item-score.low {
+            background: rgba(34,197,94,0.2);
+            color: #22c55e;
+        }
+        .queue-item-location {
+            font-size: 11px;
+            color: #9ca3af;
+            margin-bottom: 6px;
+        }
+        .queue-item-analysis {
+            font-size: 10px;
+            color: #6b7280;
+            padding: 6px 8px;
+            background: rgba(0,0,0,0.2);
+            border-radius: 4px;
+            font-style: italic;
+        }
+        .queue-item-actions {
+            display: flex;
+            gap: 6px;
+            margin-top: 8px;
+        }
+        .queue-action-btn {
+            flex: 1;
+            padding: 6px 10px;
+            border: none;
+            border-radius: 6px;
+            font-size: 10px;
+            font-weight: 600;
+            cursor: pointer;
+            text-transform: uppercase;
+            transition: all 0.2s;
+        }
+        .queue-action-btn.dispatch {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+        }
+        .queue-action-btn.dispatch:hover {
+            transform: scale(1.02);
+        }
+        .queue-action-btn.dismiss {
+            background: rgba(255,255,255,0.1);
+            color: #9ca3af;
+        }
+        .queue-action-btn.dismiss:hover {
+            background: rgba(255,255,255,0.15);
+        }
+
+        /* Route destination markers */
+        @keyframes dest-pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.15); }
+        }
+        @keyframes dest-ring {
+            0% { transform: scale(1); opacity: 0.6; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+        .route-info-panel {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(26, 31, 38, 0.95);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 12px;
+            padding: 16px;
+            min-width: 250px;
+            z-index: 100;
+        }
+        .route-info-title {
+            font-size: 12px;
+            color: #6b7280;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+        }
+        .route-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 8px;
+            margin-bottom: 8px;
+        }
+        .route-color-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        .route-details {
+            flex: 1;
+        }
+        .route-name {
+            font-size: 13px;
+            font-weight: 600;
+            color: #e7e9ea;
+        }
+        .route-eta {
+            font-size: 11px;
+            color: #22c55e;
+            font-weight: 600;
+        }
+
+        /* Custom markers */
+        .marker-camera {
+            width: 44px;
+            height: 44px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border: 3px solid white;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            font-weight: 700;
+            color: white;
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+            transition: all 0.3s;
+        }
+        .marker-camera:hover {
+            transform: scale(1.15);
+            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
+        }
+        .marker-camera.alert {
+            background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
+            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
+            animation: marker-alert 1s infinite;
+        }
+        @keyframes marker-alert {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        .marker-incident {
+            width: 24px;
+            height: 24px;
+            background: #ef4444;
+            border: 2px solid white;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
+            animation: incident-pulse 1.5s infinite;
+        }
+        @keyframes incident-pulse {
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.8; }
+        }
+
+        /* Popup styling */
+        .mapboxgl-popup-content {
+            background: rgba(26, 31, 38, 0.95) !important;
+            backdrop-filter: blur(20px) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            border-radius: 12px !important;
+            padding: 0 !important;
+            color: #e7e9ea !important;
+            font-family: inherit !important;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
+            overflow: hidden;
+            min-width: 280px;
+        }
+        .mapboxgl-popup-tip {
+            border-top-color: rgba(26, 31, 38, 0.95) !important;
+        }
+        .mapboxgl-popup-close-button {
+            color: #9ca3af !important;
+            font-size: 20px !important;
+            padding: 8px 12px !important;
+        }
+        .mapboxgl-popup-close-button:hover {
+            color: #e7e9ea !important;
+            background: transparent !important;
+        }
+
+        .popup-content {
+            padding: 16px;
+        }
+        .popup-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+        .popup-icon {
+            width: 48px;
+            height: 48px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        .popup-title {
+            font-size: 16px;
+            font-weight: 600;
+        }
+        .popup-subtitle {
+            font-size: 12px;
+            color: #6b7280;
+            margin-top: 2px;
+        }
+        .popup-stats {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+        .popup-stat {
+            flex: 1;
+            background: rgba(255,255,255,0.03);
+            border-radius: 8px;
+            padding: 10px;
+            text-align: center;
+        }
+        .popup-stat-val {
+            font-size: 20px;
+            font-weight: 700;
+            color: #8b5cf6;
+        }
+        .popup-stat-lbl {
+            font-size: 10px;
+            color: #6b7280;
+            text-transform: uppercase;
+        }
+        .popup-btn {
+            width: 100%;
+            padding: 12px;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            border: none;
+            border-radius: 8px;
+            color: white;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .popup-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+        }
+        .popup-alert {
+            margin-top: 12px;
+            padding: 10px;
+            background: rgba(239, 68, 68, 0.1);
+            border-radius: 8px;
+            border: 1px solid rgba(239, 68, 68, 0.2);
+            color: #ef4444;
+            font-size: 12px;
+            font-weight: 500;
+            display: none;
+        }
+        .popup-alert.show { display: block; }
+
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(8px);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        .modal-overlay.show {
+            display: flex;
+        }
+        .modal {
+            background: #1a1f26;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            width: 90%;
+            max-width: 900px;
+            max-height: 90vh;
+            overflow: hidden;
+            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 24px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .modal-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .modal-title h2 {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        .modal-title span {
+            font-size: 13px;
+            color: #6b7280;
+        }
+        .modal-close {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: rgba(255,255,255,0.05);
+            border: none;
+            color: #9ca3af;
+            font-size: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .modal-close:hover {
+            background: rgba(255,255,255,0.1);
+            color: #e7e9ea;
+        }
+        .modal-body {
+            display: flex;
+            height: 500px;
+        }
+        .modal-video {
+            flex: 1;
+            background: #000;
+            position: relative;
+        }
+        .modal-video video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .modal-video-overlay {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            background: rgba(0,0,0,0.7);
+            backdrop-filter: blur(8px);
+            padding: 8px 12px;
+            border-radius: 8px;
+            font-size: 11px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .live-dot {
+            width: 8px;
+            height: 8px;
+            background: #ef4444;
+            border-radius: 50%;
+            animation: live-pulse 1s infinite;
+        }
+        @keyframes live-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .modal-info {
+            width: 300px;
+            background: rgba(255,255,255,0.02);
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .modal-info h4 {
+            font-size: 11px;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 12px;
+        }
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            font-size: 13px;
+        }
+        .info-label { color: #6b7280; }
+        .info-value { color: #e7e9ea; font-weight: 500; }
+        .modal-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            margin-top: 16px;
+        }
+        .modal-stat {
+            background: rgba(255,255,255,0.03);
+            border-radius: 10px;
+            padding: 14px;
+            text-align: center;
+        }
+        .modal-stat-val {
+            font-size: 24px;
+            font-weight: 700;
+            color: #8b5cf6;
+        }
+        .modal-stat-lbl {
+            font-size: 10px;
+            color: #6b7280;
+            margin-top: 4px;
+            text-transform: uppercase;
+        }
+        .modal-alert-banner {
+            margin-top: 16px;
+            padding: 12px;
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+            border-radius: 10px;
+            display: none;
+        }
+        .modal-alert-banner.show { display: block; }
+        .modal-alert-banner h5 {
+            color: #ef4444;
+            font-size: 12px;
+            margin-bottom: 4px;
+        }
+        .modal-alert-banner p {
+            color: #f87171;
+            font-size: 11px;
+        }
+
+        /* Zoom controls override */
+        .mapboxgl-ctrl-group {
+            background: rgba(26, 31, 38, 0.9) !important;
+            backdrop-filter: blur(20px) !important;
+            border: 1px solid rgba(255,255,255,0.1) !important;
+            border-radius: 10px !important;
+            overflow: hidden;
+        }
+        .mapboxgl-ctrl-group button {
+            background: transparent !important;
+            color: #e7e9ea !important;
+            width: 36px !important;
+            height: 36px !important;
+        }
+        .mapboxgl-ctrl-group button:hover {
+            background: rgba(255,255,255,0.1) !important;
+        }
+        .mapboxgl-ctrl-group button + button {
+            border-top: 1px solid rgba(255,255,255,0.1) !important;
+        }
+        .mapboxgl-ctrl-attrib {
+            background: rgba(26, 31, 38, 0.8) !important;
+            color: #6b7280 !important;
+            font-size: 10px !important;
+            border-radius: 4px !important;
+        }
+        .mapboxgl-ctrl-attrib a {
+            color: #8b5cf6 !important;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <div class="logo-icon">SF</div>
+            <h1>Nimverse Monitor</h1>
+        </div>
+        <div class="header-nav">
+            <a href="index.html" class="nav-btn">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+                </svg>
+                Cameras
+            </a>
+            <a href="map.html" class="nav-btn active">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>
+                </svg>
+                Map View
+            </a>
+            <a href="demo.html" class="nav-btn" style="background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); border-color: transparent; color: white;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
+                </svg>
+                Live Demo
+            </a>
+        </div>
+        <div class="header-right">
+            <span id="datetime"></span>
+            <div class="status-indicator">
+                <div class="status-dot"></div>
+                <span class="status-text" id="statusText">System Active</span>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <div id="map">
+            <div class="map-info">
+                <h3>View Position</h3>
+                <div class="coord-display">
+                    Lat: <span id="coordLat">37.7849</span><br>
+                    Lng: <span id="coordLng">-122.4094</span><br>
+                    Zoom: <span id="coordZoom">15.5</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="sidebar">
+            <div class="sidebar-section">
+                <h3>Overview</h3>
+                <div class="stats-grid">
+                    <div class="stat-box">
+                        <div class="stat-val blue" id="statCams">9</div>
+                        <div class="stat-lbl">Cameras</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-val purple" id="statPeople">0</div>
+                        <div class="stat-lbl">People</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-val amber" id="statAlerts">0</div>
+                        <div class="stat-lbl">Alerts</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Call Center Panel -->
+            <div class="sidebar-section">
+                <h3>Emergency Response</h3>
+                <div class="call-panel" id="callPanel">
+                    <div class="call-header">
+                        <div class="call-status">
+                            <div class="call-status-dot" id="callStatusDot"></div>
+                            <span class="call-status-text" id="callStatusText">Monitoring</span>
+                        </div>
+                        <div class="ml-score" id="mlScore">AI: 0%</div>
+                    </div>
+                    <div class="call-incident" id="callIncident" style="display:none;">
+                        <div class="call-incident-type" id="incidentType">FIGHT DETECTED</div>
+                        <div class="call-incident-cam" id="incidentCam">CAM-01 • Market & Powell</div>
+                    </div>
+                    <button class="call-btn disabled" id="callBtn" onclick="handleCall()">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+                        </svg>
+                        <span id="callBtnText">No Active Incidents</span>
+                    </button>
+                    <div class="call-transcript" id="callTranscript">
+                        <div class="call-transcript-title">Live Transcript</div>
+                        <div class="call-transcript-content" id="transcriptContent">
+                            <!-- Transcript will appear here -->
+                        </div>
+                    </div>
+
+                    <div class="incident-queue" id="incidentQueue">
+                        <div class="queue-title">
+                            AI Analysis Queue
+                            <span class="queue-count" id="queueCount">0</span>
+                        </div>
+                        <div id="queueItems">
+                            <!-- Queue items will be added here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="sidebar-section camera-section">
+                <h3>Camera Network <span class="section-count">9 Active</span></h3>
+                <div class="camera-list" id="cameraList"></div>
+            </div>
+
+            <div class="sidebar-section activity-section">
+                <h3>Recent Activity</h3>
+                <div class="incident-log" id="incidentLog">
+                    <div class="incident-entry info">
+                        <div class="incident-header">
+                            <span class="incident-type info">System Online</span>
+                            <span class="incident-time">Just now</span>
+                        </div>
+                        <div class="incident-desc">All cameras connected and monitoring</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Video Modal -->
+    <div class="modal-overlay" id="modalOverlay">
+        <div class="modal">
+            <div class="modal-header">
+                <div class="modal-title">
+                    <h2 id="modalCamName">CAM-01</h2>
+                    <span id="modalCamLocation">Market & Powell</span>
+                </div>
+                <button class="modal-close" onclick="closeModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="modal-video">
+                    <video id="modalVideo" autoplay loop muted playsinline></video>
+                    <div class="modal-video-overlay">
+                        <div class="live-dot"></div>
+                        <span>LIVE FEED</span>
+                    </div>
+                </div>
+                <div class="modal-info">
+                    <h4>Camera Details</h4>
+                    <div class="info-row">
+                        <span class="info-label">Status</span>
+                        <span class="info-value" id="modalStatus">Online</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Location</span>
+                        <span class="info-value" id="modalLocation">-</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Coordinates</span>
+                        <span class="info-value" id="modalCoords">-</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Resolution</span>
+                        <span class="info-value">1080p</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">AI Analysis</span>
+                        <span class="info-value" style="color: #22c55e">Active</span>
+                    </div>
+
+                    <h4 style="margin-top: 20px;">Live Statistics</h4>
+                    <div class="modal-stats">
+                        <div class="modal-stat">
+                            <div class="modal-stat-val" id="modalPeople">0</div>
+                            <div class="modal-stat-lbl">People</div>
+                        </div>
+                        <div class="modal-stat">
+                            <div class="modal-stat-val" id="modalAlerts">0</div>
+                            <div class="modal-stat-lbl">Alerts</div>
+                        </div>
+                    </div>
+
+                    <div class="modal-alert-banner" id="modalAlertBanner">
+                        <h5>Active Alert</h5>
+                        <p id="modalAlertText">-</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Mapbox token
+        mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmVkdXN0eSIsImEiOiJjbWd4am05Z2IxZXhyMmtwdTg1cnU4cmYxIn0.zpfFRf-6xH6ivorwg_ZJ3w';
+
+        // Camera locations mapped to videos with real SF addresses
+        const CAMERAS = [
+            { id: 0, name: 'CAM-01', location: 'Market & Powell', address: '899 Market St', lat: 37.7849, lng: -122.4094, video: 'videos/cam1.mp4' },
+            { id: 1, name: 'CAM-02', location: 'Union Square', address: '333 Post St', lat: 37.7879, lng: -122.4074, video: 'videos/cam2.mp4' },
+            { id: 2, name: 'CAM-03', location: 'Embarcadero Plaza', address: '1 Ferry Building', lat: 37.7955, lng: -122.3937, video: 'videos/cam3.mp4' },
+            { id: 3, name: 'CAM-04', location: 'Civic Center', address: '1 Dr Carlton B Goodlett Pl', lat: 37.7793, lng: -122.4193, video: 'videos/cam4.mp4' },
+            { id: 4, name: 'CAM-05', location: 'SOMA District', address: '725 Howard St', lat: 37.7785, lng: -122.4056, video: 'videos/cam5.mp4' },
+            { id: 5, name: 'CAM-06', location: 'Chinatown Gate', address: '401 Grant Ave', lat: 37.7941, lng: -122.4058, video: 'videos/cam6.mp4' },
+            { id: 6, name: 'CAM-07', location: 'North Beach', address: '1435 Stockton St', lat: 37.8005, lng: -122.4103, video: 'videos/cam7.mp4' },
+            { id: 7, name: 'CAM-08', location: 'Financial District', address: '555 California St', lat: 37.7946, lng: -122.3999, video: 'videos/cam8.mp4' },
+            { id: 8, name: 'CAM-09', location: 'Tenderloin', address: '180 Jones St', lat: 37.7837, lng: -122.4141, video: 'videos/cam9.mp4' }
+        ];
+
+        const state = {
+            cameras: CAMERAS.map(c => ({ ...c, people: 0, action: null, alertType: null, alerts: 0 })),
+            incidents: [],
+            totalAlerts: 0,
+            totalPeople: 0
+        };
+
+        // Emergency response locations with real SF addresses
+        const HOSPITALS = [
+            { name: 'Zuckerberg SF General', address: '1001 Potrero Ave', lat: 37.7556, lng: -122.4058 },
+            { name: 'UCSF Medical Center', address: '505 Parnassus Ave', lat: 37.7631, lng: -122.4576 },
+            { name: 'St. Francis Memorial', address: '900 Hyde St', lat: 37.7889, lng: -122.4148 },
+            { name: 'Chinese Hospital', address: '845 Jackson St', lat: 37.7948, lng: -122.4068 },
+            { name: 'CPMC Davies Campus', address: '45 Castro St', lat: 37.7693, lng: -122.4350 }
+        ];
+
+        const RESPONSE_CENTERS = [
+            { name: 'SFPD Central Station', address: '766 Vallejo St', lat: 37.7986, lng: -122.4097, type: 'police' },
+            { name: 'SFPD Tenderloin Station', address: '301 Eddy St', lat: 37.7831, lng: -122.4134, type: 'police' },
+            { name: 'SFPD Mission Station', address: '630 Valencia St', lat: 37.7621, lng: -122.4216, type: 'police' },
+            { name: 'Fire Station 1', address: '935 Folsom St', lat: 37.7869, lng: -122.4065, type: 'fire' },
+            { name: 'Fire Station 13', address: '530 Sansome St', lat: 37.7945, lng: -122.4025, type: 'fire' },
+            { name: 'Fire Station 3', address: '1067 Post St', lat: 37.7867, lng: -122.4196, type: 'fire' }
+        ];
+
+        let map;
+        let markers = {};
+        let incidentMarkers = [];
+        let currentModalCam = null;
+        let activeRoutes = {}; // Store active emergency routes
+
+        // Call Center State
+        const callState = {
+            status: 'idle', // idle, alert, calling, active
+            currentIncident: null,
+            mlScore: 0
+        };
+
+        // Incident Queue
+        const incidentQueue = [];
+        let queueIdCounter = 0;
+
+        const AI_ANALYSIS = {
+            'FIGHT': [
+                'Multiple subjects in close proximity with rapid movement detected',
+                'Aggressive posture patterns identified via pose estimation',
+                'Velocity anomaly: subjects moving 3x normal walking speed'
+            ],
+            'FALL': [
+                'Sudden vertical displacement detected (>1.5m in <0.5s)',
+                'Subject transitioned from upright to horizontal position',
+                'Post-fall stillness detected - medical emergency likely'
+            ],
+            'MEDICAL': [
+                'Subject exhibiting distress signals - hand raised repeatedly',
+                'Vital signs anomaly suspected - dispatching medical unit',
+                'Person collapsed - immediate medical attention required'
+            ],
+            'PERSON_DOWN': [
+                'Subject detected in horizontal position for >30 seconds',
+                'No movement detected - checking for responsiveness',
+                'Possible medical emergency - EMS notified'
+            ],
+            'WALKING': [
+                'Normal ambulatory pattern detected',
+                'Velocity within expected range (1.2-1.5 m/s)',
+                'No anomalous behavior - routine pedestrian activity'
+            ],
+            'RUNNING': [
+                'Elevated velocity detected (>3 m/s)',
+                'Analyzing context: may be exercise or late commuter',
+                'No pursuit pattern detected - low threat assessment'
+            ],
+            'LOITERING': [
+                'Subject stationary for extended period (>5 min)',
+                'Location: high-traffic zone - monitoring continues',
+                'No aggressive indicators - advisory only'
+            ]
+        };
+
+        function addToQueue(type, location, camId, severity) {
+            const id = ++queueIdCounter;
+            const score = severity === 'critical' ? Math.floor(Math.random() * 10) + 90 :
+                          severity === 'warning' ? Math.floor(Math.random() * 20) + 60 :
+                          Math.floor(Math.random() * 30) + 20;
+
+            const analyses = AI_ANALYSIS[type] || AI_ANALYSIS['WALKING'];
+            const analysis = analyses[Math.floor(Math.random() * analyses.length)];
+
+            incidentQueue.push({
+                id,
+                type,
+                location,
+                camId,
+                severity,
+                score,
+                analysis,
+                timestamp: new Date()
+            });
+
+            updateQueueUI();
+            return id;
+        }
+
+        function removeFromQueue(id) {
+            const idx = incidentQueue.findIndex(i => i.id === id);
+            if (idx > -1) {
+                incidentQueue.splice(idx, 1);
+                updateQueueUI();
+            }
+        }
+
+        function dispatchFromQueue(id) {
+            const item = incidentQueue.find(i => i.id === id);
+            if (item) {
+                triggerAlert(item.camId, item.type, item.location);
+                removeFromQueue(id);
+            }
+        }
+
+        function updateQueueUI() {
+            const container = document.getElementById('queueItems');
+            const countEl = document.getElementById('queueCount');
+
+            countEl.textContent = incidentQueue.length;
+
+            if (incidentQueue.length === 0) {
+                container.innerHTML = '<div style="font-size:11px;color:#6b7280;text-align:center;padding:12px;">No incidents in queue</div>';
+                return;
+            }
+
+            container.innerHTML = incidentQueue.map(item => {
+                const cam = CAMERAS[item.camId];
+                const address = cam ? cam.address : '';
+                return `
+                <div class="queue-item ${item.severity}">
+                    <div class="queue-item-header">
+                        <span class="queue-item-type">${item.type}</span>
+                        <span class="queue-item-score ${item.severity}">${item.score}%</span>
+                    </div>
+                    <div class="queue-item-location">CAM-0${item.camId + 1} • ${item.location}</div>
+                    <div style="font-size:10px;color:#6b7280;margin-bottom:6px;">📍 ${address}</div>
+                    <div class="queue-item-analysis">${item.analysis}</div>
+                    ${item.severity === 'critical' ? `
+                    <div class="queue-item-actions">
+                        <button class="queue-action-btn dispatch" onclick="dispatchFromQueue(${item.id})">Dispatch</button>
+                        <button class="queue-action-btn dismiss" onclick="removeFromQueue(${item.id})">Dismiss</button>
+                    </div>
+                    ` : `
+                    <div class="queue-item-actions">
+                        <button class="queue-action-btn dismiss" onclick="removeFromQueue(${item.id})" style="flex:1;">Acknowledge</button>
+                    </div>
+                    `}
+                </div>
+            `}).join('');
+        }
+
+        // Vapi Configuration
+        const VAPI_API_KEY = '0c02bf40-9972-4847-abec-1af8daa762d4';
+        const VAPI_PHONE_NUMBER_ID = '3c879049-07ac-4505-a117-f8ed6c54196d';
+        const EMERGENCY_PHONE = '+13413147570';
+        let currentCallId = null;
+        let vapiWeb = null;
+
+        // Initialize Vapi Web SDK
+        function initVapi() {
+            if (typeof Vapi !== 'undefined') {
+                vapiWeb = new Vapi(VAPI_API_KEY);
+
+                vapiWeb.on('call-start', () => {
+                    console.log('[VAPI] Call started');
+                    addTranscriptLine('SYSTEM', 'Voice connection established');
+                    callState.status = 'active';
+                    updateCallUI();
+                });
+
+                vapiWeb.on('message', (msg) => {
+                    console.log('[VAPI] Message:', msg);
+                    if (msg.type === 'transcript' && msg.transcript) {
+                        const speaker = msg.role === 'assistant' ? 'AI DISPATCH' : 'YOU';
+                        addTranscriptLine(speaker, msg.transcript);
+                    }
+                });
+
+                vapiWeb.on('call-end', () => {
+                    console.log('[VAPI] Call ended');
+                    addTranscriptLine('SYSTEM', 'Call ended');
+                });
+
+                vapiWeb.on('error', (err) => {
+                    console.error('[VAPI] Error:', err);
+                    addTranscriptLine('SYSTEM', 'Error: ' + (err.message || err));
+                });
+
+                console.log('[VAPI] Web SDK initialized');
+            } else {
+                console.warn('[VAPI] SDK not loaded');
+            }
+        }
+
+        // Make outbound call via Vapi REST API
+        async function makeVapiCall(incidentType, location, confidence) {
+            // Get camera info for routing details
+            const camName = location.split(' • ')[0];
+            const cam = CAMERAS.find(c => c.name === camName);
+            const camLocation = cam ? cam.location : 'Downtown San Francisco';
+            const camCoords = cam ? `${cam.lat.toFixed(4)}, ${cam.lng.toFixed(4)}` : '37.7849, -122.4094';
+
+            // Determine response type and nearest facility
+            const isMedical = incidentType.includes('HELP') || incidentType.includes('FALL') || incidentType.includes('MEDICAL');
+            const responseType = isMedical ? 'medical' : 'security';
+            const nearestFacility = isMedical ? 'SF General Hospital on Potrero Avenue' : 'SFPD Central Station on Vallejo Street';
+
+            const systemPrompt = `You are an AI emergency dispatch assistant for Nimverse, a real-time security monitoring system in San Francisco.
+
+CURRENT INCIDENT DETAILS:
+- Type: ${incidentType}
+- Location: ${camLocation} (${location})
+- GPS Coordinates: ${camCoords}
+- AI Confidence Score: ${confidence}%
+- Response Type: ${responseType.toUpperCase()}
+- Nearest Response Unit: ${nearestFacility}
+
+YOUR ROLE:
+You are calling a security responder to dispatch them to this incident. Stay on the line and provide full situational awareness.
+
+CONVERSATION FLOW:
+1. INTRODUCE: "This is Nimverse AI Emergency Dispatch with an active ${incidentType} alert."
+
+2. DESCRIBE THE SITUATION:
+   - Explain what the AI cameras detected (${incidentType})
+   - Give the exact location: ${camLocation}, near the intersection
+   - Mention the confidence level: ${confidence}% certain
+   - Describe what this type of incident typically involves
+
+3. PROVIDE ROUTING GUIDANCE:
+   - Tell them the fastest route to get there
+   - For ${camLocation}, suggest major cross streets and landmarks
+   - Mention current traffic conditions if relevant
+   - Provide GPS coordinates: ${camCoords}
+
+4. STAY ENGAGED:
+   - Answer any questions they have about the incident
+   - Provide additional details about the scene
+   - Confirm when they're en route
+   - Offer to stay on the line for updates
+
+5. ONLY END CALL WHEN:
+   - They confirm they've arrived on scene, OR
+   - They explicitly say they don't need more information, OR
+   - They ask you to hang up
+
+INCIDENT-SPECIFIC DETAILS:
+${incidentType.includes('FIGHT') ? `- Multiple individuals appear to be in physical altercation
+- Recommend approaching with caution
+- May need backup depending on number of people involved` : ''}
+${incidentType.includes('FALL') ? `- Person detected falling or on the ground
+- May need medical attention
+- Check for injuries upon arrival` : ''}
+${incidentType.includes('HELP') ? `- Person appears to be signaling for help (raised hand/waving)
+- Could be medical emergency or distress
+- Approach to assess situation` : ''}
+
+Remember: Your job is to be a helpful dispatch assistant. Keep the conversation going naturally. Ask if they need any more information. Don't rush to end the call.`;
+
+            try {
+                const response = await fetch('https://api.vapi.ai/call/phone', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${VAPI_API_KEY}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        phoneNumberId: VAPI_PHONE_NUMBER_ID,
+                        customer: {
+                            number: EMERGENCY_PHONE
+                        },
+                        assistant: {
+                            model: {
+                                provider: 'openai',
+                                model: 'gpt-4',
+                                messages: [
+                                    {
+                                        role: 'system',
+                                        content: systemPrompt
+                                    }
+                                ]
+                            },
+                            voice: {
+                                provider: 'vapi',
+                                voiceId: 'Elliot'
+                            },
+                            name: 'Nimverse Dispatch',
+                            firstMessage: `Alert! This is Nimverse AI Emergency Dispatch. We have an active ${incidentType} incident at ${camLocation}. Our AI surveillance system detected this with ${confidence}% confidence. I'm dispatching you to the scene now. Are you available to respond?`
+                        }
+                    })
+                });
+
+                const data = await response.json();
+                console.log('[VAPI] Call response:', data);
+
+                if (data.id) {
+                    currentCallId = data.id;
+                    return { success: true, callId: data.id };
+                } else {
+                    return { success: false, error: data.message || 'Unknown error' };
+                }
+            } catch (err) {
+                console.error('[VAPI] API Error:', err);
+                return { success: false, error: err.message };
+            }
+        }
+
+        function addTranscriptLine(speaker, text) {
+            const content = document.getElementById('transcriptContent');
+            if (!content) return;
+            const div = document.createElement('div');
+            div.className = 'transcript-line';
+            div.innerHTML = `<span class="transcript-speaker">${speaker}:</span> ${text}`;
+            content.appendChild(div);
+            content.scrollTop = content.scrollHeight;
+        }
+
+        // Handle call button click
+        function handleCall() {
+            if (callState.status === 'idle') return;
+
+            if (callState.status === 'alert') {
+                initiateCall();
+            } else if (callState.status === 'active' || callState.status === 'calling') {
+                endCall();
+            }
+        }
+
+        async function initiateCall() {
+            callState.status = 'calling';
+            updateCallUI();
+
+            // Show transcript panel
+            const transcript = document.getElementById('callTranscript');
+            const content = document.getElementById('transcriptContent');
+            transcript.classList.add('show');
+            content.innerHTML = '';
+
+            const incidentType = callState.currentIncident?.type || 'Unknown incident';
+            const location = callState.currentIncident?.location || 'Unknown location';
+
+            addTranscriptLine('SYSTEM', 'AI Emergency Dispatch activating...');
+            addTranscriptLine('SYSTEM', `Incident: ${incidentType}`);
+            addTranscriptLine('SYSTEM', `Location: ${location}`);
+            addTranscriptLine('SYSTEM', `Confidence: ${callState.mlScore}%`);
+
+            // Create emergency route
+            if (callState.currentIncident) {
+                const incidentId = `incident-${Date.now()}`;
+                await createEmergencyRoute(
+                    incidentId,
+                    incidentType,
+                    location
+                );
+            }
+
+            // Try Vapi Web SDK first (browser-based AI voice)
+            if (vapiWeb) {
+                try {
+                    addTranscriptLine('SYSTEM', 'Connecting to AI Dispatch...');
+
+                    await vapiWeb.start({
+                        model: {
+                            provider: 'openai',
+                            model: 'gpt-4',
+                            messages: [{
+                                role: 'system',
+                                content: `You are an AI emergency dispatch assistant for Nimverse security monitoring.
+
+An incident was detected:
+- Type: ${incidentType}
+- Location: ${location}
+- Confidence: ${callState.mlScore}%
+
+Start by briefly announcing the emergency and asking if the person can confirm. Be professional and concise.`
+                            }]
+                        },
+                        voice: {
+                            provider: 'vapi',
+                            voiceId: 'Elliot'
+                        },
+                        name: 'Nimverse Dispatch',
+                        firstMessage: `Alert! This is Nimverse AI Dispatch. A ${incidentType} has been detected at ${location} with ${callState.mlScore}% confidence. Emergency responders are being routed. Are you available to respond?`
+                    });
+
+                    return; // Events will handle the rest
+
+                } catch (err) {
+                    console.error('[VAPI] Web SDK error:', err);
+                    addTranscriptLine('SYSTEM', 'Voice connection failed, trying phone...');
+                }
+            }
+
+            // Fallback: Try phone call via REST API
+            addTranscriptLine('SYSTEM', `Calling ${EMERGENCY_PHONE}...`);
+            const result = await makeVapiCall(incidentType, location, callState.mlScore);
+
+            if (result.success) {
+                addTranscriptLine('SYSTEM', `Phone call initiated`);
+                callState.status = 'active';
+                updateCallUI();
+
+                setTimeout(() => addTranscriptLine('AI DISPATCH', `Calling emergency contact...`), 2000);
+                setTimeout(() => addTranscriptLine('AI DISPATCH', `This is Nimverse AI Dispatch.`), 5000);
+                setTimeout(() => addTranscriptLine('AI DISPATCH', `A ${incidentType} detected at ${location}.`), 8000);
+            } else {
+                addTranscriptLine('SYSTEM', `Phone call failed: ${result.error}`);
+                addTranscriptLine('SYSTEM', 'Using simulation mode...');
+
+                setTimeout(() => {
+                    callState.status = 'active';
+                    updateCallUI();
+                    startSimulatedTranscript();
+                }, 1500);
+            }
+        }
+
+        function endCall() {
+            // Stop Vapi call if active
+            if (vapiWeb) {
+                try {
+                    vapiWeb.stop();
+                } catch (e) {
+                    console.log('[VAPI] Stop error:', e);
+                }
+            }
+
+            callState.status = callState.currentIncident ? 'alert' : 'idle';
+            updateCallUI();
+            document.getElementById('callTranscript').classList.remove('show');
+            // Note: Routes stay visible until incident is cleared
+        }
+
+        function startSimulatedTranscript() {
+            // Simulated transcript lines (fallback when Vapi not available)
+            const incidentType = callState.currentIncident?.type || 'Unknown';
+            const isMedical = incidentType.includes('HELP') || incidentType.includes('FALL');
+
+            const lines = [
+                { speaker: 'AI DISPATCH', text: `Incident detected with ${callState.mlScore}% confidence.` },
+                { speaker: 'AI DISPATCH', text: `Classification: ${incidentType}` },
+                { speaker: 'AI DISPATCH', text: `Location: ${callState.currentIncident?.location || 'Unknown'}` },
+                { speaker: 'AI DISPATCH', text: isMedical ? 'Dispatching medical response unit...' : 'Alerting security response team...' },
+                { speaker: 'AI DISPATCH', text: 'Calculating optimal route based on traffic conditions...' }
+            ];
+
+            let i = 0;
+            const interval = setInterval(() => {
+                if (i >= lines.length || callState.status !== 'active') {
+                    clearInterval(interval);
+                    return;
+                }
+                addTranscriptLine(lines[i].speaker, lines[i].text);
+                i++;
+            }, 1500);
+        }
+
+        function triggerAlert(camId, type, location) {
+            callState.currentIncident = { camId, type, location };
+            callState.mlScore = Math.floor(Math.random() * 15) + 85; // 85-99%
+            callState.status = 'alert';
+            updateCallUI();
+        }
+
+        function clearAlert() {
+            if (callState.status === 'alert') {
+                callState.currentIncident = null;
+                callState.mlScore = 0;
+                callState.status = 'idle';
+                updateCallUI();
+            }
+        }
+
+        function updateCallUI() {
+            const panel = document.getElementById('callPanel');
+            const dot = document.getElementById('callStatusDot');
+            const statusText = document.getElementById('callStatusText');
+            const mlScore = document.getElementById('mlScore');
+            const incident = document.getElementById('callIncident');
+            const btn = document.getElementById('callBtn');
+            const btnText = document.getElementById('callBtnText');
+
+            // Reset classes
+            dot.className = 'call-status-dot';
+            statusText.className = 'call-status-text';
+            btn.className = 'call-btn';
+            panel.className = 'call-panel';
+
+            switch (callState.status) {
+                case 'idle':
+                    panel.classList.add('inactive');
+                    statusText.textContent = 'Monitoring';
+                    mlScore.textContent = 'AI: 0%';
+                    incident.style.display = 'none';
+                    btn.classList.add('disabled');
+                    btnText.textContent = 'No Active Incidents';
+                    break;
+                case 'alert':
+                    dot.classList.add('alert');
+                    statusText.classList.add('alert');
+                    statusText.textContent = 'AI ANALYZING...';
+                    mlScore.textContent = `AI: ${callState.mlScore}%`;
+                    incident.style.display = 'block';
+                    document.getElementById('incidentType').textContent = callState.currentIncident?.type || '';
+                    document.getElementById('incidentCam').textContent = callState.currentIncident?.location || '';
+                    btn.classList.add('initiate');
+                    btnText.textContent = 'Dispatch Now';
+                    break;
+                case 'calling':
+                    dot.classList.add('calling');
+                    statusText.classList.add('calling');
+                    statusText.textContent = 'CONNECTING...';
+                    btn.classList.add('end');
+                    btnText.textContent = 'Connecting...';
+                    break;
+                case 'active':
+                    dot.classList.add('active');
+                    statusText.classList.add('active');
+                    statusText.textContent = 'CALL ACTIVE';
+                    btn.classList.add('end');
+                    btnText.textContent = 'End Call';
+                    break;
+            }
+        }
+
+        // ==================== EMERGENCY ROUTING ====================
+
+        // Find nearest location from a point
+        function findNearest(point, locations) {
+            let nearest = null;
+            let minDist = Infinity;
+            locations.forEach(loc => {
+                const dist = Math.sqrt(
+                    Math.pow(loc.lat - point.lat, 2) +
+                    Math.pow(loc.lng - point.lng, 2)
+                );
+                if (dist < minDist) {
+                    minDist = dist;
+                    nearest = loc;
+                }
+            });
+            return nearest;
+        }
+
+        // Get route from Mapbox Directions API
+        async function getRoute(start, end, routeId) {
+            const url = `https://api.mapbox.com/directions/v5/mapbox/driving-traffic/${start.lng},${start.lat};${end.lng},${end.lat}?geometries=geojson&overview=full&annotations=congestion,duration&access_token=${mapboxgl.accessToken}`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+
+                if (data.routes && data.routes.length > 0) {
+                    return {
+                        geometry: data.routes[0].geometry,
+                        duration: data.routes[0].duration,
+                        distance: data.routes[0].distance,
+                        congestion: data.routes[0].legs[0]?.annotation?.congestion || []
+                    };
+                }
+            } catch (err) {
+                console.error('Route fetch error:', err);
+            }
+            return null;
+        }
+
+        // Route color schemes for different incident types
+        const ROUTE_COLORS = {
+            'FIGHT': { primary: '#ef4444', glow: '#ff6b6b', accent: '#fca5a5' },
+            'FALL': { primary: '#f59e0b', glow: '#fbbf24', accent: '#fcd34d' },
+            'MEDICAL': { primary: '#3b82f6', glow: '#60a5fa', accent: '#93c5fd' },
+            'FIRE': { primary: '#f97316', glow: '#fb923c', accent: '#fdba74' },
+            'DEFAULT': { primary: '#8b5cf6', glow: '#a78bfa', accent: '#c4b5fd' }
+        };
+
+        // Create emergency route on map with enhanced 3D visuals
+        async function createEmergencyRoute(incidentId, incidentType, incidentLocation) {
+            const camera = CAMERAS.find(c => c.name === incidentLocation.split(' • ')[0]);
+            if (!camera) return;
+
+            const incidentPoint = { lat: camera.lat, lng: camera.lng };
+            let colors, routeName, startPoint, endPoint, responderType;
+
+            let destinationInfo = {};
+            if (incidentType.includes('HELP') || incidentType.includes('MEDICAL') || incidentType.includes('FALL')) {
+                const hospital = findNearest(incidentPoint, HOSPITALS);
+                startPoint = incidentPoint;
+                endPoint = { lat: hospital.lat, lng: hospital.lng };
+                colors = incidentType.includes('FALL') ? ROUTE_COLORS['FALL'] : ROUTE_COLORS['MEDICAL'];
+                routeName = `Medical → ${hospital.name}`;
+                responderType = 'medical';
+                destinationInfo = { name: hospital.name, address: hospital.address, type: 'Hospital' };
+            } else {
+                const station = findNearest(incidentPoint, RESPONSE_CENTERS);
+                startPoint = { lat: station.lat, lng: station.lng };
+                endPoint = incidentPoint;
+                colors = ROUTE_COLORS[incidentType] || ROUTE_COLORS['DEFAULT'];
+                routeName = `${station.name} → Incident`;
+                responderType = 'security';
+                destinationInfo = { name: station.name, address: station.address, type: station.type === 'fire' ? 'Fire Station' : 'Police' };
+            }
+
+            const routeData = await getRoute(startPoint, endPoint, incidentId);
+            if (!routeData) return;
+
+            const routeSourceId = `route-${incidentId}`;
+            const routeGlowLayerId = `route-glow-${incidentId}`;
+            const routeOutlineLayerId = `route-outline-${incidentId}`;
+            const routeLayerId = `route-layer-${incidentId}`;
+            const routeDashLayerId = `route-dash-${incidentId}`;
+
+            removeRoute(incidentId);
+
+            map.addSource(routeSourceId, {
+                type: 'geojson',
+                data: {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: routeData.geometry
+                }
+            });
+
+            // Layer 1: Wide glow effect
+            map.addLayer({
+                id: routeGlowLayerId,
+                type: 'line',
+                source: routeSourceId,
+                layout: { 'line-join': 'round', 'line-cap': 'round' },
+                paint: {
+                    'line-color': colors.glow,
+                    'line-width': 20,
+                    'line-opacity': 0.15,
+                    'line-blur': 8
+                }
+            });
+
+            // Layer 2: Outer glow
+            map.addLayer({
+                id: routeOutlineLayerId,
+                type: 'line',
+                source: routeSourceId,
+                layout: { 'line-join': 'round', 'line-cap': 'round' },
+                paint: {
+                    'line-color': colors.glow,
+                    'line-width': 10,
+                    'line-opacity': 0.4,
+                    'line-blur': 2
+                }
+            });
+
+            // Layer 3: Main solid route
+            map.addLayer({
+                id: routeLayerId,
+                type: 'line',
+                source: routeSourceId,
+                layout: { 'line-join': 'round', 'line-cap': 'round' },
+                paint: {
+                    'line-color': colors.primary,
+                    'line-width': 5,
+                    'line-opacity': 1
+                }
+            });
+
+            // Layer 4: Animated dashed overlay
+            map.addLayer({
+                id: routeDashLayerId,
+                type: 'line',
+                source: routeSourceId,
+                layout: { 'line-join': 'round', 'line-cap': 'round' },
+                paint: {
+                    'line-color': colors.accent,
+                    'line-width': 3,
+                    'line-opacity': 0.9,
+                    'line-dasharray': [0, 4, 3]
+                }
+            });
+
+            // Animate the dashed line
+            let dashOffset = 0;
+            const dashInterval = setInterval(() => {
+                if (!map.getLayer(routeDashLayerId)) {
+                    clearInterval(dashInterval);
+                    return;
+                }
+                dashOffset = (dashOffset + 1) % 7;
+                map.setPaintProperty(routeDashLayerId, 'line-dasharray', [dashOffset, 4, 3]);
+            }, 80);
+
+            // Pulse the glow
+            let glowOpacity = 0.15;
+            let glowIncreasing = true;
+            const pulseInterval = setInterval(() => {
+                if (!map.getLayer(routeGlowLayerId)) {
+                    clearInterval(pulseInterval);
+                    return;
+                }
+                glowOpacity += glowIncreasing ? 0.01 : -0.01;
+                if (glowOpacity >= 0.3) glowIncreasing = false;
+                if (glowOpacity <= 0.1) glowIncreasing = true;
+                map.setPaintProperty(routeGlowLayerId, 'line-opacity', glowOpacity);
+            }, 50);
+
+            // Add animated destination marker
+            const destEl = document.createElement('div');
+            destEl.className = 'route-destination-marker';
+            destEl.innerHTML = `
+                <div style="
+                    width: 24px; height: 24px;
+                    background: ${colors.primary};
+                    border: 3px solid white;
+                    border-radius: 50%;
+                    box-shadow: 0 0 20px ${colors.glow}, 0 0 40px ${colors.glow}80;
+                    animation: dest-pulse 1.5s infinite;
+                "></div>
+                <div style="
+                    position: absolute;
+                    width: 40px; height: 40px;
+                    border: 2px solid ${colors.accent};
+                    border-radius: 50%;
+                    top: -8px; left: -8px;
+                    animation: dest-ring 2s infinite;
+                    opacity: 0.6;
+                "></div>
+            `;
+            destEl.style.position = 'relative';
+
+            const destMarker = new mapboxgl.Marker(destEl)
+                .setLngLat([endPoint.lng, endPoint.lat])
+                .addTo(map);
+
+            // Add start point marker for responder
+            const startEl = document.createElement('div');
+            startEl.innerHTML = responderType === 'medical' ? '🏥' : '🚔';
+            startEl.style.cssText = 'font-size: 24px; filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));';
+            const startMarker = new mapboxgl.Marker(startEl)
+                .setLngLat([startPoint.lng, startPoint.lat])
+                .addTo(map);
+
+            // Store route info
+            activeRoutes[incidentId] = {
+                sourceId: routeSourceId,
+                layerIds: [routeGlowLayerId, routeOutlineLayerId, routeLayerId, routeDashLayerId],
+                marker: destMarker,
+                startMarker: startMarker,
+                intervals: [dashInterval, pulseInterval],
+                eta: Math.ceil(routeData.duration / 60),
+                distance: (routeData.distance / 1000).toFixed(1),
+                name: routeName,
+                color: colors.primary,
+                destination: destinationInfo
+            };
+
+            // Update transcript with route info
+            addRouteToTranscript(routeName, activeRoutes[incidentId].eta, activeRoutes[incidentId].distance, destinationInfo);
+
+            return activeRoutes[incidentId];
+        }
+
+        // Remove a route from map
+        function removeRoute(incidentId) {
+            const route = activeRoutes[incidentId];
+            if (!route) return;
+
+            route.layerIds.forEach(layerId => {
+                if (map.getLayer(layerId)) map.removeLayer(layerId);
+            });
+            if (map.getSource(route.sourceId)) map.removeSource(route.sourceId);
+            if (route.marker) route.marker.remove();
+            if (route.startMarker) route.startMarker.remove();
+            if (route.intervals) route.intervals.forEach(i => clearInterval(i));
+            if (route.pulseInterval) clearInterval(route.pulseInterval);
+
+            delete activeRoutes[incidentId];
+        }
+
+        // Clear all routes
+        function clearAllRoutes() {
+            Object.keys(activeRoutes).forEach(id => removeRoute(id));
+        }
+
+        // Add route info to transcript
+        function addRouteToTranscript(routeName, eta, distance, destination) {
+            const content = document.getElementById('transcriptContent');
+            if (!content) return;
+
+            const div = document.createElement('div');
+            div.className = 'transcript-line';
+            div.innerHTML = `
+                <span class="transcript-speaker">ROUTING:</span>
+                ${routeName}<br>
+                <span style="color:#6b7280;font-size:11px;">📍 ${destination?.address || 'Address pending'}</span><br>
+                <span style="color:#22c55e;font-weight:600;">ETA: ${eta} min</span> •
+                <span style="color:#9ca3af;">${distance} km</span>
+            `;
+            content.appendChild(div);
+            content.scrollTop = content.scrollHeight;
+        }
+
+        // ==================== END ROUTING ====================
+
+        // Initialize 3D map
+        function initMap() {
+            map = new mapboxgl.Map({
+                container: 'map',
+                style: 'mapbox://styles/mapbox/dark-v11',
+                center: [-122.4094, 37.7849],
+                zoom: 15.5,
+                pitch: 50,
+                bearing: -20,
+                antialias: true
+            });
+
+            map.addControl(new mapboxgl.NavigationControl({ showCompass: true }), 'bottom-right');
+
+            map.on('load', () => {
+                // Add 3D buildings
+                const layers = map.getStyle().layers;
+                const labelLayerId = layers.find(
+                    (layer) => layer.type === 'symbol' && layer.layout['text-field']
+                )?.id;
+
+                map.addLayer(
+                    {
+                        'id': '3d-buildings',
+                        'source': 'composite',
+                        'source-layer': 'building',
+                        'filter': ['==', 'extrude', 'true'],
+                        'type': 'fill-extrusion',
+                        'minzoom': 14,
+                        'paint': {
+                            'fill-extrusion-color': [
+                                'interpolate',
+                                ['linear'],
+                                ['get', 'height'],
+                                0, '#1a1f26',
+                                50, '#252b35',
+                                100, '#2d3340',
+                                200, '#363d4a'
+                            ],
+                            'fill-extrusion-height': ['get', 'height'],
+                            'fill-extrusion-base': ['get', 'min_height'],
+                            'fill-extrusion-opacity': 0.85
+                        }
+                    },
+                    labelLayerId
+                );
+
+                // Add camera markers
+                CAMERAS.forEach(cam => {
+                    addCameraMarker(cam);
+                });
+
+                // Add hospital markers
+                HOSPITALS.forEach(hospital => {
+                    addHospitalMarker(hospital);
+                });
+
+                // Add response center markers (police/fire)
+                RESPONSE_CENTERS.forEach(center => {
+                    addResponseCenterMarker(center);
+                });
+
+                updateStats();
+                renderCameraList();
+
+                // Create demo emergency routes after short delay
+                setTimeout(() => {
+                    // Fight - security response (red) - Police dispatched
+                    createEmergencyRoute('demo-fight', 'FIGHT', 'CAM-01 • Market & Powell');
+                }, 1500);
+
+                setTimeout(() => {
+                    // Fall - medical response (orange) - Ambulance to hospital
+                    createEmergencyRoute('demo-fall', 'FALL', 'CAM-04 • Civic Center');
+                }, 2500);
+
+                setTimeout(() => {
+                    // Medical emergency - hospital route (blue)
+                    createEmergencyRoute('demo-medical', 'MEDICAL', 'CAM-05 • SOMA District');
+                }, 3500);
+
+                setTimeout(() => {
+                    // Person down - purple - Police dispatched
+                    createEmergencyRoute('demo-other', 'PERSON_DOWN', 'CAM-07 • North Beach');
+                }, 4500);
+            });
+
+            map.on('move', updateCoordinates);
+            map.on('zoom', updateCoordinates);
+        }
+
+        function addCameraMarker(cam) {
+            const el = document.createElement('div');
+            el.className = 'marker-camera';
+            el.innerHTML = cam.id + 1;
+            el.dataset.camId = cam.id;
+
+            // Create popup with real address
+            const popup = new mapboxgl.Popup({ offset: 25, closeButton: false })
+                .setHTML(`
+                    <div style="padding: 8px;">
+                        <div style="font-weight: 600; color: #e7e9ea; margin-bottom: 4px;">${cam.name}</div>
+                        <div style="font-size: 12px; color: #9ca3af; margin-bottom: 2px;">${cam.location}</div>
+                        <div style="font-size: 11px; color: #6b7280;">${cam.address}</div>
+                    </div>
+                `);
+
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                openModal(cam.id);
+            });
+
+            const marker = new mapboxgl.Marker(el)
+                .setLngLat([cam.lng, cam.lat])
+                .setPopup(popup)
+                .addTo(map);
+
+            // Show popup on hover
+            el.addEventListener('mouseenter', () => marker.togglePopup());
+            el.addEventListener('mouseleave', () => marker.togglePopup());
+
+            markers[cam.id] = { marker, element: el, popup };
+        }
+
+        function addHospitalMarker(hospital) {
+            const el = document.createElement('div');
+            el.innerHTML = '🏥';
+            el.style.cssText = `
+                font-size: 28px;
+                cursor: pointer;
+                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
+                transition: transform 0.2s;
+            `;
+
+            const popup = new mapboxgl.Popup({ offset: 25, closeButton: false })
+                .setHTML(`
+                    <div style="padding: 10px;">
+                        <div style="font-weight: 700; color: #3b82f6; margin-bottom: 4px;">🏥 HOSPITAL</div>
+                        <div style="font-weight: 600; color: #e7e9ea; margin-bottom: 4px;">${hospital.name}</div>
+                        <div style="font-size: 12px; color: #9ca3af;">${hospital.address}</div>
+                        <div style="font-size: 11px; color: #22c55e; margin-top: 6px;">● Emergency Services Available</div>
+                    </div>
+                `);
+
+            const marker = new mapboxgl.Marker(el)
+                .setLngLat([hospital.lng, hospital.lat])
+                .setPopup(popup)
+                .addTo(map);
+
+            el.addEventListener('mouseenter', () => {
+                el.style.transform = 'scale(1.2)';
+                marker.togglePopup();
+            });
+            el.addEventListener('mouseleave', () => {
+                el.style.transform = 'scale(1)';
+                marker.togglePopup();
+            });
+        }
+
+        function addResponseCenterMarker(center) {
+            const isPolice = center.type === 'police';
+            const el = document.createElement('div');
+            el.innerHTML = isPolice ? '🚔' : '🚒';
+            el.style.cssText = `
+                font-size: 26px;
+                cursor: pointer;
+                filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
+                transition: transform 0.2s;
+            `;
+
+            const color = isPolice ? '#3b82f6' : '#ef4444';
+            const typeLabel = isPolice ? '🚔 POLICE STATION' : '🚒 FIRE STATION';
+
+            const popup = new mapboxgl.Popup({ offset: 25, closeButton: false })
+                .setHTML(`
+                    <div style="padding: 10px;">
+                        <div style="font-weight: 700; color: ${color}; margin-bottom: 4px;">${typeLabel}</div>
+                        <div style="font-weight: 600; color: #e7e9ea; margin-bottom: 4px;">${center.name}</div>
+                        <div style="font-size: 12px; color: #9ca3af;">${center.address}</div>
+                        <div style="font-size: 11px; color: #22c55e; margin-top: 6px;">● Active Dispatch Unit</div>
+                    </div>
+                `);
+
+            const marker = new mapboxgl.Marker(el)
+                .setLngLat([center.lng, center.lat])
+                .setPopup(popup)
+                .addTo(map);
+
+            el.addEventListener('mouseenter', () => {
+                el.style.transform = 'scale(1.2)';
+                marker.togglePopup();
+            });
+            el.addEventListener('mouseleave', () => {
+                el.style.transform = 'scale(1)';
+                marker.togglePopup();
+            });
+        }
+
+        function updateCameraMarker(camId, alertType) {
+            if (!markers[camId]) return;
+            const el = markers[camId].element;
+            if (alertType) {
+                el.classList.add('alert');
+            } else {
+                el.classList.remove('alert');
+            }
+        }
+
+        function addIncidentMarker(incident, cam) {
+            const offsetLat = (Math.random() - 0.5) * 0.0008;
+            const offsetLng = (Math.random() - 0.5) * 0.0008;
+
+            const el = document.createElement('div');
+            el.className = 'marker-incident';
+
+            const marker = new mapboxgl.Marker(el)
+                .setLngLat([cam.lng + offsetLng, cam.lat + offsetLat])
+                .addTo(map);
+
+            incidentMarkers.push(marker);
+
+            setTimeout(() => {
+                marker.remove();
+                incidentMarkers = incidentMarkers.filter(m => m !== marker);
+            }, 15000);
+        }
+
+        function updateCoordinates() {
+            const center = map.getCenter();
+            document.getElementById('coordLat').textContent = center.lat.toFixed(4);
+            document.getElementById('coordLng').textContent = center.lng.toFixed(4);
+            document.getElementById('coordZoom').textContent = map.getZoom().toFixed(1);
+        }
+
+        function updateStats() {
+            const activeCams = state.cameras.filter(c => c.video).length;
+            document.getElementById('statCams').textContent = activeCams;
+            document.getElementById('statPeople').textContent = state.totalPeople;
+            document.getElementById('statAlerts').textContent = state.totalAlerts;
+        }
+
+        function renderCameraList() {
+            const list = document.getElementById('cameraList');
+            if (!list) {
+                console.error('cameraList element not found');
+                return;
+            }
+            list.innerHTML = '';
+
+            state.cameras.forEach(cam => {
+                const div = document.createElement('div');
+                div.className = 'camera-item' + (cam.alertType ? ' alert' : '');
+                div.innerHTML = `
+                    <div class="camera-icon">${cam.alertType ? '!' : cam.id + 1}</div>
+                    <div class="camera-info">
+                        <div class="camera-name">${cam.name}</div>
+                        <div class="camera-loc">${cam.location}</div>
+                        <div class="camera-addr">${cam.address || ''}</div>
+                    </div>
+                    <div class="camera-badge ${cam.alertType ? 'alert' : ''}">${cam.alertType || 'Online'}</div>
+                `;
+                div.onclick = () => {
+                    flyToCamera(cam.id);
+                    openModal(cam.id);
+                };
+                list.appendChild(div);
+            });
+            console.log('[UI] Camera list rendered:', state.cameras.length, 'cameras');
+        }
+
+        function flyToCamera(camId) {
+            const cam = state.cameras.find(c => c.id === camId);
+            if (cam) {
+                map.flyTo({
+                    center: [cam.lng, cam.lat],
+                    zoom: 17,
+                    pitch: 60,
+                    duration: 1500
+                });
+            }
+        }
+
+        function openModal(camId) {
+            const cam = state.cameras.find(c => c.id === camId);
+            if (!cam) return;
+
+            currentModalCam = camId;
+
+            document.getElementById('modalCamName').textContent = cam.name;
+            document.getElementById('modalCamLocation').textContent = cam.location;
+            document.getElementById('modalLocation').textContent = cam.address || cam.location;
+            document.getElementById('modalCoords').textContent = `${cam.lat.toFixed(4)}, ${cam.lng.toFixed(4)}`;
+            document.getElementById('modalPeople').textContent = cam.people;
+            document.getElementById('modalAlerts').textContent = cam.alerts;
+
+            const video = document.getElementById('modalVideo');
+            video.src = cam.video;
+            video.play().catch(e => console.log('Video autoplay blocked:', e));
+
+            if (cam.alertType) {
+                document.getElementById('modalAlertBanner').classList.add('show');
+                document.getElementById('modalAlertText').textContent = `${cam.alertType} detected at this location`;
+            } else {
+                document.getElementById('modalAlertBanner').classList.remove('show');
+            }
+
+            document.getElementById('modalOverlay').classList.add('show');
+        }
+
+        function closeModal() {
+            document.getElementById('modalOverlay').classList.remove('show');
+            document.getElementById('modalVideo').pause();
+            currentModalCam = null;
+        }
+
+        // Close modal on overlay click
+        document.getElementById('modalOverlay').addEventListener('click', (e) => {
+            if (e.target === document.getElementById('modalOverlay')) {
+                closeModal();
+            }
+        });
+
+        // Close modal on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeModal();
+        });
+
+        function logIncident(incident, cam) {
+            const log = document.getElementById('incidentLog');
+            const div = document.createElement('div');
+
+            let level = 'info';
+            if (incident.type === 'FIGHT' || incident.type === 'FALL') level = 'critical';
+            else if (incident.type === 'PERSON_DOWN' || incident.type === 'HAND_RAISED') level = 'warning';
+
+            div.className = `incident-entry ${level}`;
+            div.innerHTML = `
+                <div class="incident-header">
+                    <span class="incident-type ${level}">${incident.type.replace('_', ' ')}</span>
+                    <span class="incident-time">${new Date(incident.timestamp).toLocaleTimeString()}</span>
+                </div>
+                <div class="incident-desc">${cam.name} - ${cam.location}</div>
+            `;
+            log.insertBefore(div, log.firstChild);
+
+            while (log.children.length > 30) {
+                log.removeChild(log.lastChild);
+            }
+        }
+
+        function updateTime() {
+            const now = new Date();
+            document.getElementById('datetime').textContent =
+                now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) +
+                ' ' + now.toLocaleTimeString();
+        }
+
+        // Connect to backend WebSocket
+        let ws = null;
+        function connectToBackend() {
+            const url = 'wss://' + location.hostname + ':8765';
+
+            try {
+                ws = new WebSocket(url);
+
+                ws.onopen = () => {
+                    console.log('[MAP] Connected to backend');
+                    document.getElementById('statusText').textContent = 'AI Connected';
+                };
+
+                ws.onmessage = (e) => {
+                    try {
+                        const data = JSON.parse(e.data);
+                        processBackendData(data);
+                    } catch (err) {
+                        console.error('[MAP] Parse error:', err);
+                    }
+                };
+
+                ws.onclose = () => {
+                    console.log('[MAP] Disconnected');
+                    document.getElementById('statusText').textContent = 'Reconnecting...';
+                    setTimeout(connectToBackend, 3000);
+                };
+
+                ws.onerror = () => {
+                    console.log('[MAP] WebSocket error - using demo mode');
+                };
+            } catch (e) {
+                console.log('[MAP] WebSocket not available - using demo mode');
+            }
+        }
+
+        function processBackendData(data) {
+            const camId = data.cam_id ?? 0;
+            const cam = state.cameras[camId];
+
+            if (data.people_count !== undefined) {
+                cam.people = data.people_count;
+            }
+
+            state.totalPeople = state.cameras.reduce((sum, c) => sum + c.people, 0);
+
+            // Process incidents
+            if (data.incidents && data.incidents.length > 0) {
+                data.incidents.forEach(incident => {
+                    incident.camId = camId;
+                    state.incidents.push(incident);
+                    state.totalAlerts++;
+                    cam.alerts++;
+                    cam.alertType = incident.type;
+
+                    updateCameraMarker(camId, incident.type);
+                    addIncidentMarker(incident, cam);
+                    logIncident(incident, cam);
+
+                    // Update modal if open
+                    if (currentModalCam === camId) {
+                        document.getElementById('modalAlerts').textContent = cam.alerts;
+                        document.getElementById('modalAlertBanner').classList.add('show');
+                        document.getElementById('modalAlertText').textContent = `${incident.type} detected`;
+                    }
+
+                    setTimeout(() => {
+                        cam.alertType = null;
+                        updateCameraMarker(camId, null);
+                        renderCameraList();
+                        if (currentModalCam === camId) {
+                            document.getElementById('modalAlertBanner').classList.remove('show');
+                        }
+                    }, 5000);
+                });
+            }
+
+            // Update modal if open
+            if (currentModalCam === camId) {
+                document.getElementById('modalPeople').textContent = cam.people;
+            }
+
+            updateStats();
+            renderCameraList();
+        }
+
+        // Demo simulation for when backend isn't available
+        function runDemoMode() {
+            setInterval(() => {
+                const camId = Math.floor(Math.random() * 9);
+                const cam = state.cameras[camId];
+                cam.people = Math.floor(Math.random() * 8);
+                state.totalPeople = state.cameras.reduce((sum, c) => sum + c.people, 0);
+
+                if (currentModalCam === camId) {
+                    document.getElementById('modalPeople').textContent = cam.people;
+                }
+
+                updateStats();
+            }, 2000);
+
+            setInterval(() => {
+                if (Math.random() > 0.75) {
+                    const camId = Math.floor(Math.random() * 9);
+                    const cam = state.cameras[camId];
+                    const types = ['FALL', 'PERSON_DOWN', 'HAND_RAISED'];
+                    const type = types[Math.floor(Math.random() * types.length)];
+
+                    const incident = {
+                        type: type,
+                        description: `${type.replace('_', ' ')} detected`,
+                        timestamp: new Date().toISOString(),
+                        camId: camId
+                    };
+
+                    state.incidents.push(incident);
+                    state.totalAlerts++;
+                    cam.alerts++;
+                    cam.alertType = type;
+
+                    updateCameraMarker(camId, type);
+                    addIncidentMarker(incident, cam);
+                    logIncident(incident, cam);
+                    updateStats();
+                    renderCameraList();
+
+                    if (currentModalCam === camId) {
+                        document.getElementById('modalAlerts').textContent = cam.alerts;
+                        document.getElementById('modalAlertBanner').classList.add('show');
+                        document.getElementById('modalAlertText').textContent = `${type} detected`;
+                    }
+
+                    setTimeout(() => {
+                        cam.alertType = null;
+                        updateCameraMarker(camId, null);
+                        renderCameraList();
+                        if (currentModalCam === camId) {
+                            document.getElementById('modalAlertBanner').classList.remove('show');
+                        }
+                    }, 5000);
+                }
+            }, 10000);
+        }
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('[INIT] Starting initialization...');
+
+            // Initialize with demo data FIRST
+            state.totalPeople = Math.floor(Math.random() * 20) + 15;
+            state.totalAlerts = Math.floor(Math.random() * 3) + 1;
+            state.cameras.forEach(c => {
+                c.people = Math.floor(Math.random() * 5) + 1;
+                c.alerts = 0;
+            });
+            console.log('[INIT] Demo data set:', state.totalPeople, 'people,', state.totalAlerts, 'alerts');
+
+            // Update stats immediately
+            document.getElementById('statPeople').textContent = state.totalPeople;
+            document.getElementById('statAlerts').textContent = state.totalAlerts;
+
+            initMap();
+            updateTime();
+            setInterval(updateTime, 1000);
+
+            // Initialize call panel UI
+            updateCallUI();
+
+            // Initialize Vapi for voice calls (with error handling)
+            try {
+                initVapi();
+            } catch (e) {
+                console.warn('[VAPI] Init failed:', e);
+            }
+
+            // Initialize incident queue with demo data
+            addToQueue('FIGHT', 'Market & Powell', 0, 'critical');
+            addToQueue('FALL', 'Civic Center', 3, 'critical');
+            addToQueue('MEDICAL', 'SOMA District', 4, 'critical');
+            addToQueue('WALKING', 'Union Square', 1, 'low');
+            addToQueue('RUNNING', 'Chinatown Gate', 5, 'warning');
+            addToQueue('LOITERING', 'North Beach', 6, 'low');
+
+            updateStats();
+            renderCameraList();
+
+            // Add demo incident log entries
+            const demoLogs = [
+                { type: 'WALKING', cam: state.cameras[1], time: '2 min ago' },
+                { type: 'PERSON_DOWN', cam: state.cameras[3], time: '5 min ago' },
+                { type: 'RUNNING', cam: state.cameras[5], time: '8 min ago' },
+                { type: 'FALL', cam: state.cameras[2], time: '12 min ago' }
+            ];
+            const logEl = document.getElementById('incidentLog');
+            demoLogs.forEach(log => {
+                const level = (log.type === 'FALL' || log.type === 'PERSON_DOWN') ? 'critical' :
+                              (log.type === 'RUNNING') ? 'warning' : 'info';
+                const div = document.createElement('div');
+                div.className = `incident-entry ${level}`;
+                div.innerHTML = `
+                    <div class="incident-header">
+                        <span class="incident-type ${level}">${log.type.replace('_', ' ')}</span>
+                        <span class="incident-time">${log.time}</span>
+                    </div>
+                    <div class="incident-desc">${log.cam.name} - ${log.cam.address}</div>
+                `;
+                logEl.appendChild(div);
+            });
+
+            connectToBackend();
+
+            setTimeout(() => {
+                if (!ws || ws.readyState !== WebSocket.OPEN) {
+                    console.log('[MAP] Running in demo mode');
+                    runDemoMode();
+                }
+            }, 3000);
+
+            // Demo: Trigger FIGHT alert after 2 seconds
+            console.log('[DEMO] Will trigger alert in 2 seconds...');
+            setTimeout(() => {
+                console.log('[DEMO] Triggering FIGHT alert NOW!');
+                triggerAlert(0, 'FIGHT DETECTED', 'CAM-01 • Market & Powell');
+            }, 2000);
+        });
+    </script>
+</body>
+</html>
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
new file mode 100644
index 0000000..254cf79
--- /dev/null
+++ b/webapp/package-lock.json
@@ -0,0 +1,1824 @@
+{
+  "name": "sf-security-dashboard",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sf-security-dashboard",
+      "version": "1.0.0",
+      "dependencies": {
+        "express": "^4.18.2",
+        "ws": "^8.16.0"
+      },
+      "devDependencies": {
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.56.0.tgz",
+      "integrity": "sha512-LNKIPA5k8PF1+jAFomGe3qN3bbIgJe/IlpDBwuVjrDKrJhVWywgnJvflMt/zkbVNLFtF1+94SljYQS6e99klnw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.56.0.tgz",
+      "integrity": "sha512-lfbVUbelYqXlYiU/HApNMJzT1E87UPGvzveGg2h0ktUNlOCxKlWuJ9jtfvs1sKHdwU4fzY7Pl8sAl49/XaEk6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.56.0.tgz",
+      "integrity": "sha512-EgxD1ocWfhoD6xSOeEEwyE7tDvwTgZc8Bss7wCWe+uc7wO8G34HHCUH+Q6cHqJubxIAnQzAsyUsClt0yFLu06w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.56.0.tgz",
+      "integrity": "sha512-1vXe1vcMOssb/hOF8iv52A7feWW2xnu+c8BV4t1F//m9QVLTfNVpEdja5ia762j/UEJe2Z1jAmEqZAK42tVW3g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.56.0.tgz",
+      "integrity": "sha512-bof7fbIlvqsyv/DtaXSck4VYQ9lPtoWNFCB/JY4snlFuJREXfZnm+Ej6yaCHfQvofJDXLDMTVxWscVSuQvVWUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.56.0.tgz",
+      "integrity": "sha512-KNa6lYHloW+7lTEkYGa37fpvPq+NKG/EHKM8+G/g9WDU7ls4sMqbVRV78J6LdNuVaeeK5WB9/9VAFbKxcbXKYg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.56.0.tgz",
+      "integrity": "sha512-E8jKK87uOvLrrLN28jnAAAChNq5LeCd2mGgZF+fGF5D507WlG/Noct3lP/QzQ6MrqJ5BCKNwI9ipADB6jyiq2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.56.0.tgz",
+      "integrity": "sha512-jQosa5FMYF5Z6prEpTCCmzCXz6eKr/tCBssSmQGEeozA9tkRUty/5Vx06ibaOP9RCrW1Pvb8yp3gvZhHwTDsJw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.56.0.tgz",
+      "integrity": "sha512-uQVoKkrC1KGEV6udrdVahASIsaF8h7iLG0U0W+Xn14ucFwi6uS539PsAr24IEF9/FoDtzMeeJXJIBo5RkbNWvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.56.0.tgz",
+      "integrity": "sha512-vLZ1yJKLxhQLFKTs42RwTwa6zkGln+bnXc8ueFGMYmBTLfNu58sl5/eXyxRa2RarTkJbXl8TKPgfS6V5ijNqEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.56.0.tgz",
+      "integrity": "sha512-FWfHOCub564kSE3xJQLLIC/hbKqHSVxy8vY75/YHHzWvbJL7aYJkdgwD/xGfUlL5UV2SB7otapLrcCj2xnF1dg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.56.0.tgz",
+      "integrity": "sha512-z1EkujxIh7nbrKL1lmIpqFTc/sr0u8Uk0zK/qIEFldbt6EDKWFk/pxFq3gYj4Bjn3aa9eEhYRlL3H8ZbPT1xvA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.56.0.tgz",
+      "integrity": "sha512-iNFTluqgdoQC7AIE8Q34R3AuPrJGJirj5wMUErxj22deOcY7XwZRaqYmB6ZKFHoVGqRcRd0mqO+845jAibKCkw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.56.0.tgz",
+      "integrity": "sha512-MtMeFVlD2LIKjp2sE2xM2slq3Zxf9zwVuw0jemsxvh1QOpHSsSzfNOTH9uYW9i1MXFxUSMmLpeVeUzoNOKBaWg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.56.0.tgz",
+      "integrity": "sha512-in+v6wiHdzzVhYKXIk5U74dEZHdKN9KH0Q4ANHOTvyXPG41bajYRsy7a8TPKbYPl34hU7PP7hMVHRvv/5aCSew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.56.0.tgz",
+      "integrity": "sha512-yni2raKHB8m9NQpI9fPVwN754mn6dHQSbDTwxdr9SE0ks38DTjLMMBjrwvB5+mXrX+C0npX0CVeCUcvvvD8CNQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.56.0.tgz",
+      "integrity": "sha512-zhLLJx9nQPu7wezbxt2ut+CI4YlXi68ndEve16tPc/iwoylWS9B3FxpLS2PkmfYgDQtosah07Mj9E0khc3Y+vQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.56.0.tgz",
+      "integrity": "sha512-MVC6UDp16ZSH7x4rtuJPAEoE1RwS8N4oK9DLHy3FTEdFoUTCFVzMfJl/BVJ330C+hx8FfprA5Wqx4FhZXkj2Kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.56.0.tgz",
+      "integrity": "sha512-ZhGH1eA4Qv0lxaV00azCIS1ChedK0V32952Md3FtnxSqZTBTd6tgil4nZT5cU8B+SIw3PFYkvyR4FKo2oyZIHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.56.0.tgz",
+      "integrity": "sha512-O16XcmyDeFI9879pEcmtWvD/2nyxR9mF7Gs44lf1vGGx8Vg2DRNx11aVXBEqOQhWb92WN4z7fW/q4+2NYzCbBA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.56.0.tgz",
+      "integrity": "sha512-LhN/Reh+7F3RCgQIRbgw8ZMwUwyqJM+8pXNT6IIJAqm2IdKkzpCh/V9EdgOMBKuebIrzswqy4ATlrDgiOwbRcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.56.0.tgz",
+      "integrity": "sha512-kbFsOObXp3LBULg1d3JIUQMa9Kv4UitDmpS+k0tinPBz3watcUiV2/LUDMMucA6pZO3WGE27P7DsfaN54l9ing==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.56.0.tgz",
+      "integrity": "sha512-vSSgny54D6P4vf2izbtFm/TcWYedw7f8eBrOiGGecyHyQB9q4Kqentjaj8hToe+995nob/Wv48pDqL5a62EWtg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.56.0.tgz",
+      "integrity": "sha512-FeCnkPCTHQJFbiGG49KjV5YGW/8b9rrXAM2Mz2kiIoktq2qsJxRD5giEMEOD2lPdgs72upzefaUvS+nc8E3UzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.56.0.tgz",
+      "integrity": "sha512-H8AE9Ur/t0+1VXujj90w0HrSOuv0Nq9r1vSZF2t5km20NTfosQsGGUXDaKdQZzwuLts7IyL1fYT4hM95TI9c4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+      "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "~1.2.0",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "on-finished": "~2.4.1",
+        "qs": "~6.14.0",
+        "raw-body": "~2.5.3",
+        "type-is": "~1.6.18",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "~1.20.3",
+        "content-disposition": "~0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "~0.7.1",
+        "cookie-signature": "~1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.3.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "~0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "~6.14.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "~0.19.0",
+        "serve-static": "~1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "~2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "~2.0.2",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.56.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
+      "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.56.0",
+        "@rollup/rollup-android-arm64": "4.56.0",
+        "@rollup/rollup-darwin-arm64": "4.56.0",
+        "@rollup/rollup-darwin-x64": "4.56.0",
+        "@rollup/rollup-freebsd-arm64": "4.56.0",
+        "@rollup/rollup-freebsd-x64": "4.56.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.56.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.56.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.56.0",
+        "@rollup/rollup-linux-arm64-musl": "4.56.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.56.0",
+        "@rollup/rollup-linux-loong64-musl": "4.56.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.56.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.56.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.56.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.56.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.56.0",
+        "@rollup/rollup-linux-x64-gnu": "4.56.0",
+        "@rollup/rollup-linux-x64-musl": "4.56.0",
+        "@rollup/rollup-openbsd-x64": "4.56.0",
+        "@rollup/rollup-openharmony-arm64": "4.56.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.56.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.56.0",
+        "@rollup/rollup-win32-x64-gnu": "4.56.0",
+        "@rollup/rollup-win32-x64-msvc": "4.56.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "~2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "~0.19.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/webapp/server.js b/webapp/server.js
index edcfc90..db6056b 100644
--- a/webapp/server.js
+++ b/webapp/server.js
@@ -169,6 +169,6 @@ try {
 
 const PORT = process.env.PORT || 3000;
 server.listen(PORT, () => {
-    console.log(`SF Security Dashboard running at http://localhost:${PORT}`);
+    console.log(`Nimverse Dashboard running at http://localhost:${PORT}`);
     console.log(`WebSocket server running on port 8765`);
 });
diff --git a/webapp/videos/cam1.mp4 b/webapp/videos/cam1.mp4
new file mode 100644
index 0000000..9c6b163
Binary files /dev/null and b/webapp/videos/cam1.mp4 differ
diff --git a/webapp/videos/cam2.mp4 b/webapp/videos/cam2.mp4
new file mode 100644
index 0000000..76bb3f1
Binary files /dev/null and b/webapp/videos/cam2.mp4 differ
diff --git a/webapp/videos/cam3.mp4 b/webapp/videos/cam3.mp4
new file mode 100644
index 0000000..8ec52d7
Binary files /dev/null and b/webapp/videos/cam3.mp4 differ
diff --git a/webapp/videos/cam4.mp4 b/webapp/videos/cam4.mp4
new file mode 100644
index 0000000..8303288
Binary files /dev/null and b/webapp/videos/cam4.mp4 differ
diff --git a/webapp/videos/cam5.mp4 b/webapp/videos/cam5.mp4
new file mode 100644
index 0000000..8d0c7a3
Binary files /dev/null and b/webapp/videos/cam5.mp4 differ
diff --git a/webapp/videos/cam6.mp4 b/webapp/videos/cam6.mp4
new file mode 100644
index 0000000..7a6a281
Binary files /dev/null and b/webapp/videos/cam6.mp4 differ
diff --git a/webapp/videos/cam7.mp4 b/webapp/videos/cam7.mp4
new file mode 100644
index 0000000..bea6ed6
Binary files /dev/null and b/webapp/videos/cam7.mp4 differ
diff --git a/webapp/videos/cam8.mp4 b/webapp/videos/cam8.mp4
new file mode 100644
index 0000000..c104ef4
Binary files /dev/null and b/webapp/videos/cam8.mp4 differ
diff --git a/webapp/videos/cam9.mp4 b/webapp/videos/cam9.mp4
new file mode 100644
index 0000000..a5a3fc7
Binary files /dev/null and b/webapp/videos/cam9.mp4 differ
diff --git a/webapp/videos/fall_dataset b/webapp/videos/fall_dataset
new file mode 160000
index 0000000..5abac76
--- /dev/null
+++ b/webapp/videos/fall_dataset
@@ -0,0 +1 @@
+Subproject commit 5abac7693229900cf80f722e878fbb119211fc1c
diff --git a/webapp/videos/list1.txt b/webapp/videos/list1.txt
new file mode 100644
index 0000000..4e983cf
--- /dev/null
+++ b/webapp/videos/list1.txt
@@ -0,0 +1,5 @@
+file 'fight_data/noFight/nofi050.mp4'
+file 'fight_data/noFight/nofi051.mp4'
+file 'fight_data/noFight/nofi052.mp4'
+file 'fight_data/noFight/nofi053.mp4'
+file 'fight_data/noFight/nofi054.mp4'
diff --git a/webapp/videos/list2.txt b/webapp/videos/list2.txt
new file mode 100644
index 0000000..3a5a4d3
--- /dev/null
+++ b/webapp/videos/list2.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi100.mp4'
+file 'fight_data/noFight/nofi101.mp4'
+file 'fight_data/noFight/nofi102.mp4'
+file 'fight_data/noFight/nofi103.mp4'
diff --git a/webapp/videos/list3.txt b/webapp/videos/list3.txt
new file mode 100644
index 0000000..26407ec
--- /dev/null
+++ b/webapp/videos/list3.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi140.mp4'
+file 'fight_data/noFight/nofi141.mp4'
+file 'fight_data/noFight/nofi142.mp4'
+file 'fight_data/noFight/nofi143.mp4'
diff --git a/webapp/videos/list4.txt b/webapp/videos/list4.txt
new file mode 100644
index 0000000..8b8b772
--- /dev/null
+++ b/webapp/videos/list4.txt
@@ -0,0 +1,3 @@
+file 'fall_dataset/Subject 1/Fall/01.mp4'
+file 'fall_dataset/Subject 1/Fall/02.mp4'
+file 'fall_dataset/Subject 1/Fall/03.mp4'
diff --git a/webapp/videos/list5.txt b/webapp/videos/list5.txt
new file mode 100644
index 0000000..5566df7
--- /dev/null
+++ b/webapp/videos/list5.txt
@@ -0,0 +1,3 @@
+file 'fall_dataset/Subject 3/Fall/01.mp4'
+file 'fall_dataset/Subject 3/Fall/02.mp4'
+file 'fall_dataset/Subject 3/Fall/03.mp4'
diff --git a/webapp/videos/list6.txt b/webapp/videos/list6.txt
new file mode 100644
index 0000000..e025032
--- /dev/null
+++ b/webapp/videos/list6.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi040.mp4'
+file 'fight_data/noFight/nofi041.mp4'
+file 'fight_data/noFight/nofi042.mp4'
+file 'fight_data/noFight/nofi043.mp4'
diff --git a/webapp/videos/list7.txt b/webapp/videos/list7.txt
new file mode 100644
index 0000000..f37911e
--- /dev/null
+++ b/webapp/videos/list7.txt
@@ -0,0 +1,3 @@
+file 'fall_dataset/Subject 1/ADL/05.mp4'
+file 'fall_dataset/Subject 1/ADL/06.mp4'
+file 'fall_dataset/Subject 1/ADL/07.mp4'
diff --git a/webapp/videos/list8.txt b/webapp/videos/list8.txt
new file mode 100644
index 0000000..0516a65
--- /dev/null
+++ b/webapp/videos/list8.txt
@@ -0,0 +1,3 @@
+file 'fall_dataset/Subject 2/ADL/05.mp4'
+file 'fall_dataset/Subject 2/ADL/06.mp4'
+file 'fall_dataset/Subject 2/ADL/07.mp4'
diff --git a/webapp/videos/list9.txt b/webapp/videos/list9.txt
new file mode 100644
index 0000000..2f432bb
--- /dev/null
+++ b/webapp/videos/list9.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi020.mp4'
+file 'fight_data/noFight/nofi021.mp4'
+file 'fight_data/noFight/nofi022.mp4'
+file 'fight_data/noFight/nofi023.mp4'
diff --git a/webapp/videos/list_fall1.txt b/webapp/videos/list_fall1.txt
new file mode 100644
index 0000000..e943449
--- /dev/null
+++ b/webapp/videos/list_fall1.txt
@@ -0,0 +1,2 @@
+file 'fall_dataset/Subject 1/Fall/01.mp4'
+file 'fall_dataset/Subject 1/Fall/02.mp4'
diff --git a/webapp/videos/list_fall2.txt b/webapp/videos/list_fall2.txt
new file mode 100644
index 0000000..818002b
--- /dev/null
+++ b/webapp/videos/list_fall2.txt
@@ -0,0 +1,2 @@
+file 'fall_dataset/Subject 3/Fall/01.mp4'
+file 'fall_dataset/Subject 3/Fall/02.mp4'
diff --git a/webapp/videos/list_group1.txt b/webapp/videos/list_group1.txt
new file mode 100644
index 0000000..3a5a4d3
--- /dev/null
+++ b/webapp/videos/list_group1.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi100.mp4'
+file 'fight_data/noFight/nofi101.mp4'
+file 'fight_data/noFight/nofi102.mp4'
+file 'fight_data/noFight/nofi103.mp4'
diff --git a/webapp/videos/list_group2.txt b/webapp/videos/list_group2.txt
new file mode 100644
index 0000000..a0ae4eb
--- /dev/null
+++ b/webapp/videos/list_group2.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi010.mp4'
+file 'fight_data/noFight/nofi011.mp4'
+file 'fight_data/noFight/nofi012.mp4'
+file 'fight_data/noFight/nofi013.mp4'
diff --git a/webapp/videos/list_normal1.txt b/webapp/videos/list_normal1.txt
new file mode 100644
index 0000000..cea592d
--- /dev/null
+++ b/webapp/videos/list_normal1.txt
@@ -0,0 +1,5 @@
+file 'fight_data/noFight/nofi001.mp4'
+file 'fight_data/noFight/nofi002.mp4'
+file 'fight_data/noFight/nofi003.mp4'
+file 'fight_data/noFight/nofi004.mp4'
+file 'fight_data/noFight/nofi005.mp4'
diff --git a/webapp/videos/list_normal2.txt b/webapp/videos/list_normal2.txt
new file mode 100644
index 0000000..a3aa91c
--- /dev/null
+++ b/webapp/videos/list_normal2.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi080.mp4'
+file 'fight_data/noFight/nofi081.mp4'
+file 'fight_data/noFight/nofi082.mp4'
+file 'fight_data/noFight/nofi083.mp4'
diff --git a/webapp/videos/list_normal3.txt b/webapp/videos/list_normal3.txt
new file mode 100644
index 0000000..1dae808
--- /dev/null
+++ b/webapp/videos/list_normal3.txt
@@ -0,0 +1,4 @@
+file 'fight_data/noFight/nofi060.mp4'
+file 'fight_data/noFight/nofi061.mp4'
+file 'fight_data/noFight/nofi062.mp4'
+file 'fight_data/noFight/nofi063.mp4'
diff --git a/webapp/videos/list_normal4.txt b/webapp/videos/list_normal4.txt
new file mode 100644
index 0000000..5f65a45
--- /dev/null
+++ b/webapp/videos/list_normal4.txt
@@ -0,0 +1,3 @@
+file 'fight_data/noFight/nofi040.mp4'
+file 'fight_data/noFight/nofi041.mp4'
+file 'fight_data/noFight/nofi042.mp4'
diff --git a/webapp/videos/list_normal5.txt b/webapp/videos/list_normal5.txt
new file mode 100644
index 0000000..6862bfb
--- /dev/null
+++ b/webapp/videos/list_normal5.txt
@@ -0,0 +1,3 @@
+file 'fight_data/noFight/nofi020.mp4'
+file 'fight_data/noFight/nofi021.mp4'
+file 'fight_data/noFight/nofi022.mp4'