<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZFBOX</title>
<link rel="stylesheet" href="{{ url_for('main.static', filename='css/bootstrap.min.css') }}">
<link href="../static/resources/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #007bff;
color: white;
padding: 10px 0;
}
.navbar-nav .nav-link {
color: white;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.tree-view {
border-right: 1px solid #ddd;
padding: 10px;
overflow-y: auto;
}
.video-content {
padding: 10px;
overflow-y: auto;
flex: 1;
}
footer {
background-color: #f8f9fa;
text-align: center;
padding: 10px 0;
}
.video-frame {
background-color: #f8f9fa;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.video-frame img {
width: 100%;
height: auto;
}
.video-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.video-grid.eight {
grid-template-columns: repeat(4, 1fr);
}
.toggle-buttons {
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">智凡BOX</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">实时预览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">通道管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">算法管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">系统管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">用户管理</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">张三 退出</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="tree-view col-md-3">
<ul class="list-group">
<li class="list-group-item">一区
<ul class="list-group">
<li class="list-group-item">北门通道一</li>
<li class="list-group-item">南门通道二</li>
<li class="list-group-item">通道三</li>
</ul>
</li>
<li class="list-group-item">二区域
<ul class="list-group">
<li class="list-group-item">通道一</li>
</ul>
</li>
</ul>
</div>
<div class="video-content col-md-9">
<div class="toggle-buttons">
<button id="fourView" class="btn btn-primary">四画面</button>
<button id="eightView" class="btn btn-secondary">八画面</button>
</div>
<div id="videoGrid" class="video-grid">
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
</div>
</div>
</main>
<footer>
© 2024 ZFKJ All Rights Reserved
</footer>
<script src="{{ url_for('main.static', filename='js/bootstrap.bundle.min.js') }}"></script>
<script>
document.getElementById('fourView').addEventListener('click', function() {
const videoGrid = document.getElementById('videoGrid');
videoGrid.classList.remove('eight');
videoGrid.classList.add('four');
videoGrid.innerHTML = `
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
`;
});
document.getElementById('eightView').addEventListener('click', function() {
const videoGrid = document.getElementById('videoGrid');
videoGrid.classList.remove('four');
videoGrid.classList.add('eight');
videoGrid.innerHTML = `
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
<div class="video-frame"><img src="../static/resources/images/video_placeholder.png" alt="Video Stream"></div>
`;
});
</script>
</body>
</html>