Добавление корректного статуса

cmd/server/web/css/style.css

@@ -17,26 +17,22 @@ h1 {
 }
 
 /* ===== GRID ===== */
-
 .grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
 }
 
-/* Desktop */
 @media (min-width: 900px) {
     .grid {
         grid-template-columns: 1fr 1fr;
     }
-
     .wide {
         grid-column: span 2;
     }
 }
 
 /* ===== CARD ===== */
-
 .card {
     border: 1px solid #00ff88;
     border-radius: 10px;
@@ -51,107 +47,39 @@ h1 {
 }
 
 /* ===== STATUS ===== */
-
 #status {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 8px;
 }
 
+/* СТАТУСЫ - ЦВЕТА */
+.status-ok {
+    color: #00ff88 !important;
+}
+
+.status-lost {
+    color: #ffffff !important;
+    animation: blink 1.5s infinite;
+}
+
+.status-error {
+    color: #ff4444 !important;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.2; }
+}
+
+/* ===== META ===== */
 #meta {
     font-size: 14px;
     opacity: 0.8;
     word-break: break-word;
 }
 
-/* ===== LATEST ===== */
-
-#latest {
-    font-size: 36px;
-    font-weight: bold;
-    margin-bottom: 12px;
-}
-
-/* ===== BITS ===== */
-
-#bits {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-}
-
-.bit {
-    height: 52px;
-    border: 1px solid #00ff88;
-    border-radius: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 22px;
-    font-weight: bold;
-}
-
-.bit.on {
-    background: #00ff88;
-    color: #000;
-}
-
-/* Tablet/Desktop */
-@media (min-width: 700px) {
-    #bits {
-        grid-template-columns: repeat(8, 1fr);
-    }
-}
-
-/* ===== HISTORY ===== */
-
-#history {
-    font-size: 13px;
-    line-height: 1.35;
-    max-height: 420px;
-    overflow-y: auto;
-    white-space: nowrap;
-    padding-right: 4px;
-}
-
-/* Desktop */
-@media (min-width: 900px) {
-    #history {
-        font-size: 12px;
-        max-height: 520px;
-    }
-}
-
-/* ===== PHONE ===== */
-
-@media (max-width: 500px) {
-
-    h1 {
-        font-size: 18px;
-    }
-
-    #status {
-        font-size: 22px;
-    }
-
-    #latest {
-        font-size: 30px;
-    }
-
-    .bit {
-        height: 44px;
-        font-size: 18px;
-    }
-
-    #history {
-        font-size: 16px;
-        line-height: 1.5;
-        max-height: 55vh;
-    }
-}
-
 /* ===== PROGRESS BARS ===== */
-
 .progress-row {
     margin-bottom: 16px;
 }
@@ -174,6 +102,18 @@ h1 {
         0 0 4px rgba(0,0,0,0.8);
 }
 
+.progress-with-signal {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+.progress-90 {
+    flex: 0 0 86%;
+    margin-right: 10px;
+}
+
+/* ЗАЛИВКА ПРОГРЕСС-БАРА */
 .fill {
     height: 100%;
     width: 0%;
@@ -184,49 +124,11 @@ h1 {
     transition: width 0.25s linear;
 }
 
-/* mobile */
-
-@media (max-width: 500px) {
-    .progress {
-        height: 30px;
-        padding: 5px;
-    }
-
-    .progress-label {
-        font-size: 15px;
-    }
-}
-
-.accordion-header {
-    cursor: pointer;
-    user-select: none;
-}
-
-.accordion-header:hover {
-    opacity: 0.7;
-}
-
-.accordion-body {
-    max-height: 520px;
-    overflow: hidden;
-    transition: max-height 0.3s ease, padding 0.3s ease;
-    padding: 0;
-}
-
-.accordion-body.collapsed {
-    max-height: 0;
-    padding: 0;
-}
-
-.progress-with-signal {
-    display: flex;
-    align-items: center;
-    gap: 0;
-}
-
-.progress-90 {
-    flex: 0 0 86%;
-    margin-right: 10px;
+/* Заливка при потере связи */
+.fill.no-connection {
+    background: #555555 !important;
+    box-shadow: none !important;
+    width: 0% !important;
 }
 
 /* ===== SIGNAL ICON ===== */
@@ -252,27 +154,35 @@ h1 {
 .sig-bar-2 { height: 66%; }
 .sig-bar-3 { height: 100%; }
 
-/* Активные — зелёная заливка */
-.sig-bar.active-1,
-.sig-bar.active-2,
-.sig-bar.active-3,
-.sig-bar.active-4 {
-    background-color: #00ff88;
-    border-color: #00ff88;
-}
-
-/* Неактивные — прозрачные, только контур */
+/* Неактивные сигнальные бары */
 .sig-bar.dim {
     background-color: transparent;
     border-color: #1a3a1a;
 }
 
+/* Активные сигнальные бары */
+.sig-bar.active-1,
+.sig-bar.active-2,
+.sig-bar.active-3 {
+    background-color: #00ff88;
+    border-color: #00ff88;
+}
+
+/* Нет связи - сигнальные бары */
+.sig-bar.no-connection {
+    background-color: #555555 !important;
+    border-color: #555555 !important;
+    opacity: 0.3 !important;
+}
+
+/* ===== LAST BYTE ===== */
 #last-byte {
     font-size: 18px;
     font-weight: bold;
     color: #00ff88;
 }
 
+/* ===== CHART ===== */
 #signalChart {
     width: 100%;
     background: #050805;
@@ -280,26 +190,62 @@ h1 {
     border-radius: 8px;
 }
 
+/* ===== HISTORY ===== */
 #history {
+    font-size: 13px;
+    line-height: 1.35;
+    max-height: 420px;
+    overflow-y: auto;
+    white-space: nowrap;
+    padding-right: 4px;
     margin: 0;
 }
 
+/* ===== ACCORDION ===== */
 .accordion-header {
     cursor: pointer;
     user-select: none;
-    transition: background-color 0.2s;
+    padding: 10px 0;
+    margin: 0;
 }
 
 .accordion-header:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    opacity: 0.7;
 }
 
 .accordion-body {
+    max-height: 520px;
     overflow: hidden;
-    transition: max-height 0.3s ease-out;
-    max-height: 2000px;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
 }
 
 .accordion-body.collapsed {
     max-height: 0;
+    opacity: 0;
+}
+
+/* ===== MOBILE ===== */
+@media (max-width: 500px) {
+    h1 {
+        font-size: 18px;
+    }
+
+    #status {
+        font-size: 22px;
+    }
+
+    .progress {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .progress-label {
+        font-size: 15px;
+    }
+
+    #history {
+        font-size: 16px;
+        line-height: 1.5;
+        max-height: 55vh;
+    }
 }