From d2460ac98855dcf1b2909d3538df6503ee558474 Mon Sep 17 00:00:00 2001
From: Naeel <naeel@nubes.ru>
Date: Sun, 5 Apr 2026 16:39:16 +0300
Subject: [PATCH] fix: improve credentials tab readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- cred-label: 11px→13px, убран uppercase, цвет #7eb8e0 (читаемый на тёмном)
- cred-value: 13px→14px, фон #0a1e30, текст #e2f0ff (светлый, контрастный)
- hint: 12px→14px, цвет #a0bcd8
- MQTTX-блок: заголовок 15px жирный #c8dff0, текст 14px #c8dff0,
  code-теги со своим фоном и цветом #7dd3fc,
  предупреждение ⚠️ жёлтым #fcd34d

Image: v0.1.64
---
 internal/api/ui/iot-console.html | 33 ++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/internal/api/ui/iot-console.html b/internal/api/ui/iot-console.html
index e1a1f5d..8530ca1 100644
--- a/internal/api/ui/iot-console.html
+++ b/internal/api/ui/iot-console.html
@@ -147,12 +147,12 @@
     .tab.active { color: #1a7fd4; border-bottom-color: #1a7fd4; }
 
     /* ——— Credentials ——— */
-    .cred-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
-    .cred-label { font-size: 11px; font-weight: 600; color: #2d5070; min-width: 130px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .cred-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+    .cred-label { font-size: 13px; font-weight: 600; color: #7eb8e0; min-width: 110px; }
     .cred-value {
-      font-family: 'Courier New', monospace; font-size: 13px;
-      background: #000d18; padding: 8px 12px; border-radius: 4px;
-      border: 1px solid #0b2d50; flex: 1; color: #9ecaee;
+      font-family: 'Courier New', monospace; font-size: 14px;
+      background: #0a1e30; padding: 9px 14px; border-radius: 6px;
+      border: 1px solid #1a4a6e; flex: 1; color: #e2f0ff;
       overflow-x: auto; word-break: break-all;
     }
 
@@ -206,7 +206,7 @@
     .mt16   { margin-top: 16px; }
     .mt24   { margin-top: 24px; }
     .separator { border: none; border-top: 1px solid #0b2d50; margin: 20px 0; }
-    .hint { font-size: 12px; color: #2d5070; line-height: 1.6; }
+    .hint { font-size: 14px; color: #a0bcd8; line-height: 1.7; }
     .mono { font-family: 'Courier New', monospace; }
 
     /* ——— Device list empty state ——— */
@@ -964,15 +964,20 @@ function credsTab(d) {
     <hr class="separator">
 
     <!-- Инструкция тестирования через MQTTX Web (браузер, без установки) -->
-    <div style="font-size:13px;font-weight:600;color:#94a3b8;margin-bottom:8px;">Проверить подключение</div>
-    <div class="hint" style="line-height:1.8;">
+    <div style="font-size:15px;font-weight:700;color:#c8dff0;margin-bottom:12px;">Проверить подключение</div>
+    <div style="font-size:14px;color:#c8dff0;line-height:2;">
       <a href="https://mqttx.app/web-client" target="_blank" rel="noopener"
-         style="color:#1a7fd4;font-weight:600;">MQTTX Web</a>
-      — браузерный клиент, ничего не нужно устанавливать.<br>
-      <strong>1.</strong> Host: <code>iot.kube5s.ru</code> &nbsp;|&nbsp; Port: <code>443</code> &nbsp;|&nbsp; Protocol: <code>wss</code> &nbsp;|&nbsp; Path: <code>/mqtt</code><br>
-      <strong>2.</strong> Username / Password — скопируйте выше по кнопкам.<br>
-      <strong>3.</strong> После коннекта — New Subscription на топик выше, затем Publish.<br>
-      ⚠️ Если коннект не проходит — проверьте что порт <strong>443</strong>, а не 8084/1883.
+         style="color:#4db3ff;font-weight:700;font-size:15px;">MQTTX Web</a>
+      &nbsp;— браузерный клиент, ничего не нужно устанавливать.<br>
+      <strong style="color:#fff;">1.</strong>&nbsp;
+        Host: <code style="background:#0a1e30;padding:2px 7px;border-radius:4px;color:#7dd3fc;font-size:13px;">iot.kube5s.ru</code>&nbsp;
+        Port: <code style="background:#0a1e30;padding:2px 7px;border-radius:4px;color:#7dd3fc;font-size:13px;">443</code>&nbsp;
+        Protocol: <code style="background:#0a1e30;padding:2px 7px;border-radius:4px;color:#7dd3fc;font-size:13px;">wss</code>&nbsp;
+        Path: <code style="background:#0a1e30;padding:2px 7px;border-radius:4px;color:#7dd3fc;font-size:13px;">/mqtt</code><br>
+      <strong style="color:#fff;">2.</strong>&nbsp; Username / Password — скопируйте выше по кнопкам.<br>
+      <strong style="color:#fff;">3.</strong>&nbsp; После коннекта — New Subscription на топик выше, затем Publish.<br>
+      <span style="color:#f59e0b;font-size:15px;">⚠️</span>&nbsp;
+      <span style="color:#fcd34d;">Если коннект не проходит — убедитесь что порт <strong>443</strong>, а не 8084/1883.</span>
     </div>
   </div>`;
 }