Добавление 8 каналов в ui

This commit is contained in:
Maxim
2026-06-19 15:56:30 +03:00
parent 311d09f0b3
commit 5d15f215be
8 changed files with 737 additions and 563 deletions

View File

@@ -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> — камера &nbsp;|&nbsp; <kbd>M</kbd> — звук &nbsp;|&nbsp; <kbd>Esc</kbd>сброс
</div>
<script type="module" src="/dist/app.js"></script>
</body>
</html>