mobile: add a phone dashboard on a second port (8443) — Live + Archive

A new mobile dashboard is served on a second host port (8443) mapped to the same backend, so the recorder/supervisor is not duplicated. main.py detects the mobile port via the Host header and serves mobile.html instead of the desktop index. The mobile SPA has two modes: Live (one camera with a selector) and Archive (camera + date + segment list). Video is delivered as server-side H.264 (live.mp4 / play.mp4 transcode) so a plain <video> plays on any phone. Bottom tab bar, dark theme, safe-area aware. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-01 23:36:50 +05:00
parent 157893b516
commit c91f82bf28
6 changed files with 234 additions and 4 deletions
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+  <meta name="theme-color" content="#161a22">
+  <title>CoRE.Vizion+ — Mobile</title>
+  <link rel="stylesheet" href="/static/mobile.css">
+</head>
+<body>
+  <div class="m-app">
+    <header class="m-head"><span class="m-brand">CoRE<span>.Vizion+</span></span></header>
+
+    <!-- LIVE: одна камера + выбор камеры -->
+    <section class="m-view" id="view-live">
+      <div class="m-bar">
+        <select id="m-live-cam" class="m-sel" title="Камера"></select>
+      </div>
+      <div class="m-player" id="m-live-player">
+        <video id="m-live-video" playsinline muted autoplay></video>
+        <div class="m-hint" id="m-live-hint">Нет камер</div>
+      </div>
+    </section>
+
+    <!-- АРХИВ: камера + дата + список записей -->
+    <section class="m-view" id="view-arch" hidden>
+      <div class="m-bar">
+        <select id="m-arch-cam" class="m-sel" title="Камера"></select>
+        <input type="date" id="m-arch-date" class="m-date" title="Дата">
+      </div>
+      <div class="m-player">
+        <video id="m-arch-video" playsinline controls></video>
+        <div class="m-hint" id="m-arch-hint">Выберите запись ниже</div>
+      </div>
+      <div class="m-seglist" id="m-seglist"></div>
+    </section>
+
+    <nav class="m-tabs">
+      <button class="m-tab active" data-view="live"><span class="i">▦</span>Live</button>
+      <button class="m-tab" data-view="arch"><span class="i">🗄</span>Архив</button>
+    </nav>
+  </div>
+  <script src="/static/mobile.js"></script>
+</body>
+</html>