Nail/sless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve credentials tab readability

Browse Source 
- 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
This commit is contained in:
Naeel
2026-04-05 16:39:16 +03:00
parent 20846297af
commit d2460ac988
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/api/ui/iot-console.html
+19 -14
View File
@@ -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>`;
}