PowLu/LJ360
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

web前备份

Browse Source
This commit is contained in:
路怀帅
2025-12-23 09:18:32 +08:00
parent d8b28c238b
commit 4961794bf5
26 changed files with 1124 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
templates/index.html
View File

@@ -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>

36
templates/login.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录 - 环视系统</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<style>
body { background: #f2f2f2; }
.login-box {
width: 400px;
margin: 100px auto;
padding: 30px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="login-box">
<h2 style="text-align:center">环视监控系统</h2>
<form class="layui-form" action="/login" method="post">
<div class="layui-form-item">
<input type="text" name="username" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<input type="password" name="password" required lay-verify="required" placeholder="密码" class="layui-input">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit>登录</button>
</div>
</form>
</div>
<script src="/static/layui/layui.js"></script>
</body>
</html>