108 lines
3.9 KiB
HTML
108 lines
3.9 KiB
HTML
<!-- web/dashboard.html -->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>GPIO Панель</title>
|
||
<link rel="icon" type="image/png" href="/favicon.png">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="header-bar">
|
||
<h1>GPIO МОНИТОРИНГ В РЕАЛЬНОМ ВРЕМЕНИ</h1>
|
||
<div style="display:flex; gap:12px; align-items:center;">
|
||
<a href="/logs.html" style="color:#00ff88; text-decoration:none; font-size:14px; border:1px solid #00ff88; padding:6px 14px; border-radius:6px;">📋 Журнал</a>
|
||
<div id="server-time" class="header-time">--:--:--</div>
|
||
<div id="audio-indicator" style="font-size:18px; padding:4px 12px; border-radius:6px; background:rgba(0,0,0,0.4); border:1px solid #333; min-width:50px; text-align:center;">🔇</div>
|
||
<button id="camToggle" class="cam-btn">📷 КАМЕРА</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
<!-- LEFT: графики / дашборд -->
|
||
<div class="panel left" id="leftPanel">
|
||
<div class="grid">
|
||
|
||
<div class="card wide">
|
||
<h3>СОСТОЯНИЕ</h3>
|
||
<div id="status">...</div>
|
||
<div id="meta"></div>
|
||
</div>
|
||
|
||
<div class="card wide">
|
||
<h3>УРОВНИ КАНАЛОВ</h3>
|
||
|
||
<div class="progress-row">
|
||
<div class="progress-label">Канал 1 — <span id="last-byte">0</span></div>
|
||
<div class="progress-with-signal">
|
||
<div class="progress progress-90">
|
||
<div class="fill" id="bar1"></div>
|
||
</div>
|
||
<div class="signal-icon" id="signal-icon" aria-label="Уровень сигнала" role="img">
|
||
<div class="sig-bar sig-bar-1"></div>
|
||
<div class="sig-bar sig-bar-2"></div>
|
||
<div class="sig-bar sig-bar-3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-row">
|
||
<div class="progress-label">Звук</div>
|
||
<div class="progress">
|
||
<div class="fill" id="bar2"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-row">
|
||
<div class="progress-label">Высота</div>
|
||
<div class="progress">
|
||
<div class="fill" id="bar3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card wide">
|
||
<h3 class="accordion-header" id="history-header">▶ ПРИНЯТЫЕ ДАННЫЕ</h3>
|
||
<div class="accordion-body" id="history-body">
|
||
<div id="history"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DRAG HANDLE -->
|
||
<div class="resizer" id="dragBar"></div>
|
||
|
||
<!-- RIGHT: камера -->
|
||
<div class="panel right hidden" id="rightPanel">
|
||
<div class="cam-modal">
|
||
<div class="cam-header">
|
||
<span>Видео с камеры</span>
|
||
</div>
|
||
<div class="cam-frame-wrapper">
|
||
<img id="camImage" src="" alt="Camera" class="cam-frame">
|
||
|
||
<!-- ПЕРЕКРЕСТИЕ -->
|
||
<div class="cam-crosshair" id="crosshair">
|
||
<!-- Основные линии -->
|
||
<div class="crosshair-v"></div>
|
||
<div class="crosshair-h"></div>
|
||
|
||
<!-- Центральный квадрат -->
|
||
<div class="crosshair-box"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="module" src="/dist/app.js"></script>
|
||
|
||
</body>
|
||
</html>
|