138 lines
6.1 KiB
HTML
138 lines
6.1 KiB
HTML
<!-- web/dashboard.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta name="theme-color" content="#050805">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<title>G-Port Панель</title>
|
||
<link rel="icon" type="image/png" href="/favicon.png">
|
||
<link rel="stylesheet" href="/css/fonts.css">
|
||
<link rel="stylesheet" href="/css/base.css">
|
||
<link rel="stylesheet" href="/css/header.css">
|
||
<link rel="stylesheet" href="/css/layout.css">
|
||
<link rel="stylesheet" href="/css/cards.css">
|
||
<link rel="stylesheet" href="/css/components.css">
|
||
<link rel="stylesheet" href="/css/camera.css">
|
||
<link rel="stylesheet" href="/css/audio.css">
|
||
<link rel="stylesheet" href="/css/responsive.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="header-bar">
|
||
<h1>G-Port Warden</h1>
|
||
<div class="header-controls">
|
||
<a href="/logs.html" class="header-link">Журнал</a>
|
||
<!-- Аудио индикатор с регулятором -->
|
||
<div class="audio-wrapper" id="audioWrapper">
|
||
<div id="audio-indicator" class="audio-indicator">🔇</div>
|
||
<!-- Регулятор громкости -->
|
||
<div class="volume-control" id="volumeControl">
|
||
<div class="volume-slider-wrapper">
|
||
<input type="range" id="volumeSlider" class="volume-slider"
|
||
min="0" max="100" value="0" step="1">
|
||
<div class="volume-track">
|
||
<div class="volume-track-fill" id="volumeTrackFill"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="server-time" class="header-time">--:--:--</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Остальной код без изменений -->
|
||
<div class="layout">
|
||
<!-- LEFT -->
|
||
<div class="panel left" id="leftPanel">
|
||
<div class="grid">
|
||
<!-- Карточка состояния -->
|
||
<div class="card wide" style="flex-shrink: 0;">
|
||
<h3>СОСТОЯНИЕ</h3>
|
||
<div id="status">...</div>
|
||
<div id="meta"></div>
|
||
</div>
|
||
|
||
<!-- Карточка каналов (8 штук) -->
|
||
<div class="card wide channels-card">
|
||
<div class="channels-header">
|
||
<h3>КАНАЛЫ СИГНАЛОВ</h3>
|
||
<div class="channels-controls">
|
||
<button class="channels-toggle-all" id="expandAllBtn">▼</button>
|
||
<button class="channels-toggle-all" id="collapseAllBtn">▶</button>
|
||
</div>
|
||
</div>
|
||
<div class="channels-grid" id="channelsContainer">
|
||
<!-- Каналы генерируются JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Карточка со звуком -->
|
||
<div class="card wide">
|
||
<h3>🔊 ЗВУК</h3>
|
||
<div class="progress-row">
|
||
<div class="progress-label">Уровень звука</div>
|
||
<div class="progress">
|
||
<div class="fill" id="bar2" style="width:0%"></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-tech);font-size:var(--font-size-sm);color:#666;margin-top:4px;">
|
||
<span id="sound-level">0</span> / 100
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Карточка с высотой -->
|
||
<div class="card wide">
|
||
<h3>📐 ВЫСОТА</h3>
|
||
<div class="progress-row">
|
||
<div class="progress-label">Уровень высоты</div>
|
||
<div class="progress">
|
||
<div class="fill" id="bar3" style="width:0%"></div>
|
||
</div>
|
||
</div>
|
||
<div style="font-family:var(--font-tech);font-size:var(--font-size-sm);color:#666;margin-top:4px;">
|
||
<span id="height-level">0</span> / 100
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Карточка истории -->
|
||
<div class="card wide history-card">
|
||
<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>
|
||
<button id="camCloseBtn" class="cam-close-btn" aria-label="Закрыть камеру">✕</button>
|
||
</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>
|
||
|
||
<div class="hotkey-hint">
|
||
(ENG lang key) <kbd>C</kbd> — камера | <kbd>M</kbd> — звук | <kbd>Esc</kbd> — сброс
|
||
</div>
|
||
|
||
<script type="module" src="/dist/app.js"></script>
|
||
</body>
|
||
</html> |