web前备份

2025-12-23 09:18:32 +08:00
parent d8b28c238b
commit 4961794bf5
26 changed files with 1124 additions and 232 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,18 +1,54 @@
-
 <!DOCTYPE html>
 <html>
-<head><title>Surround View System</title></head>
-<body style="background:#111;color:white;text-align:center;">
-<h2>🚗 四路摄像头 + 环视鸟瞰图</h2>
-<div>
-    <h3>四路分屏</h3>
-    <img src="/video_feed_original" width="800"/>
+<head>
+  <meta charset="utf-8">
+  <title>环视系统</title>
+  <link rel="stylesheet" href="/static/layui/css/layui.css">
+  <style>
+    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+    #app { display: flex; height: 100vh; }
+    #sidebar { width: 200px; background: #393D49; color: white; padding: 20px 0; }
+    #main { flex: 1; position: relative; background: black; }
+    #video { width: 100%; height: 100%; object-fit: contain; }
+    .menu-item { padding: 12px 20px; cursor: pointer; }
+    .menu-item:hover { background: #4B515D; }
+    .active { background: #009688 !important; }
+  </style>
+</head>
+<body>
+<div id="app">
+  <div id="sidebar">
+    <div class="menu-item active" data-view="all">全景鸟瞰</div>
+    <div class="menu-item" data-view="front">前视</div>
+    <div class="menu-item" data-view="back">后视</div>
+    <div class="menu-item" data-view="left">左视</div>
+    <div class="menu-item" data-view="right">右视</div>
+    <hr style="border-color:#5a5e6a;margin:15px 10px">
+    <div class="menu-item" onclick="logout()">退出登录</div>
+  </div>
+  <div id="main">
+    <img id="video" src="/video_feed" />
+  </div>
 </div>
-<div style="margin-top:20px;">
-    <h3>鸟瞰图 (Bird's Eye View)</h3>
-    <img src="/video_feed_birdview" width="500"/>
-</div>
-<p>按 Ctrl+C 停止服务 | 账号: admin / 密码: password123</p>
+
+<script src="/static/layui/layui.js"></script>
+<script>
+  // 切换视图（可选：后续通过 WebSocket 或 REST API 控制后端 current_view）
+  document.querySelectorAll('.menu-item[data-view]').forEach(item => {
+    item.addEventListener('click', function() {
+      document.querySelector('.active').classList.remove('active');
+      this.classList.add('active');
+      const view = this.getAttribute('data-view');
+      // TODO: 发送 AJAX 请求通知后端切换 current_view
+      // fetch('/api/set_view?view=' + view);
+    });
+  });
+
+  function logout() {
+    if (confirm('确定退出？')) {
+      window.location.href = '/logout';
+    }
+  }
+</script>
 </body>
-</html>
-        
+</html>