Добавление 8 каналов в ui
This commit is contained in:
@@ -9,11 +9,7 @@
|
||||
<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">
|
||||
@@ -23,7 +19,6 @@
|
||||
<link rel="stylesheet" href="/css/audio.css">
|
||||
<link rel="stylesheet" href="/css/responsive.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header-bar">
|
||||
@@ -37,57 +32,66 @@
|
||||
</div>
|
||||
|
||||
<div class="layout">
|
||||
<!-- LEFT: графики / дашборд -->
|
||||
<!-- LEFT -->
|
||||
<div class="panel left" id="leftPanel">
|
||||
<div class="grid">
|
||||
|
||||
<div class="card wide">
|
||||
<!-- Карточка состояния -->
|
||||
<div class="card wide" style="flex-shrink: 0;">
|
||||
<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>
|
||||
<!-- Карточка каналов (8 штук) -->
|
||||
<div class="card wide channels-card">
|
||||
<div class="channels-header">
|
||||
<h3>КАНАЛЫ СИГНАЛОВ (8)</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="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 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>
|
||||
|
||||
@@ -103,8 +107,6 @@
|
||||
</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>
|
||||
@@ -113,15 +115,12 @@
|
||||
</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>
|
||||
Reference in New Issue
Block a user