доработка кнопки камеры в хедере

2026-05-11 15:43:06 +03:00
parent 02e6bd7b47
commit ae56334637
2 changed files with 49 additions and 33 deletions
--- a/cmd/server/web/css/style.css
+++ b/cmd/server/web/css/style.css
@@ -10,10 +10,44 @@ body {
    padding: 12px;
 }

+/* ===== HEADER BAR ===== */
+.header-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    gap: 16px;
+}
+
 h1 {
-    text-align: center;
    font-size: 22px;
-    margin: 0 0 15px;
+    margin: 0;
+    flex: 1;
+}
+
+/* ===== CAMERA BUTTON (теперь в header) ===== */
+.cam-btn {
+    padding: 8px 16px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #00ff88;
+    border: 1px solid #00ff88;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: monospace;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.cam-btn:hover {
+    background: rgba(0, 255, 136, 0.2);
+}
+
+.cam-btn-icon {
+    font-size: 16px;
 }

 /* ===== GRID ===== */
@@ -226,7 +260,7 @@ h1 {
 /* ===== SPLIT LAYOUT (FIXED) ===== */
 .layout {
    display: flex;
-    height: calc(100vh - 60px);
+    height: calc(100vh - 100px);
    width: 100%;
    margin: 0;
    padding: 0;
@@ -308,31 +342,13 @@ h1 {
    background: black;
 }

-/* кнопка камеры */
-.cam-btn {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 9999;
-    padding: 10px 15px;
-    background: rgba(0, 0, 0, 0.8);
-    color: #00ff88;
-    border: 1px solid #00ff88;
-    border-radius: 8px;
-    cursor: pointer;
-    font-family: monospace;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.cam-btn:hover {
-    background: rgba(0, 255, 136, 0.2);
-}
-
 /* ===== MOBILE ===== */
@media (max-width: 500px) {
+    .header-bar {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
    h1 {
        font-size: 18px;
    }
--- a/cmd/server/web/dashboard.html
+++ b/cmd/server/web/dashboard.html
@@ -11,13 +11,13 @@

 <body>

-<h1>GPIO МОНИТОРИНГ В РЕАЛЬНОМ ВРЕМЕНИ</h1>
-
-<!-- Кнопка переключения камеры -->
-<button id="camToggle" class="cam-btn">
-    <span class="cam-btn-icon">📷</span>
-    <span class="cam-btn-text">Камера</span>
-</button>
+<div class="header-bar">
+    <h1>GPIO МОНИТОРИНГ В РЕАЛЬНОМ ВРЕМЕНИ</h1>
+    <button id="camToggle" class="cam-btn">
+        <span class="cam-btn-icon">📷</span>
+        <span class="cam-btn-text">Камера</span>
+    </button>
+</div>

 <div class="layout">
    <!-- LEFT: графики / дашборд -->