byrsapty
c7fecfba0b
МЕНЮ. Шість груп, разом 1246 px при вікні 720 — довше за екран. Тепер згортаються, стан живе в localStorage як перелік ЗГОРНУТИХ (не розгорнутих: інакше кожна нова група приїхала б до наявних користувачів схованою). Ключ групи окремо від заголовка — підписи тут уже переписували, і якби ключем був заголовок, кожне переписування слова тихо скидало б налаштування всім. Група з активною сторінкою розгортається сама, але рівно одна — вибір для решти не чіпається. Правка стану на ЗМІНІ шляху, а не на кожному рендері, тож згорнути активну групу теж можна. Дві наявні поломки мобільного вигляду, знайдені дорогою: рейка вмикалась класами md:, а розгалуження заголовок/риска було на JS і про md: не знало — людина згортала панель на моніторі, і в шухляді на телефоні ЗНИКАЛИ ВСІ назви розділів. ЛОГО. Пульс на лінії зв'язку: вузол → сплеск → провал → норма → вузол. Два вузли по краях — ключова деталь: без них це іконка «activity» з будь-якого безкоштовного набору, з ними кардіограма стає лінією між двома точками мережі. SVG кодом, не растр: слідує темі через currentColor, важить сотні байтів. Три РІЗНІ малюнки, а не один масштабований: повне лого, знак, і спрощений для 16 px усередині favicon.ico (зібраний власним кодувальником на zlib, без сторонніх інструментів). Пульсація вузла — опційна й типово вимкнена: у шапці вона конкурувала б зі справжнім показником зв'язку, який стоїть поруч. ПОЛЯ З ПІДКАЗКОЮ. Field малює підказку під контролем, тож у ряду з вирівнюванням по низу колонка з підказкою вища — її підпис і поле спливають угору, а гола кнопка з'їжджає вниз. Видно було в словнику трапів; та сама вада знайшлась у редакторі фільтра портів. Ряди вирівняно по верху, а кнопки без підпису загорнуто у FieldGap — порожній підпис такої самої висоти. Відступ у пікселях полагодив би один ряд і роз'їхався б від зміни розміру шрифту. Перевірено очима в живому Chrome: іконки віддаються (4/4, правильні типи й розміри), лого 64×64 на сторінці входу, праве коло справді sky-400 і пульсує лише там.
68 lines
3.4 KiB
HTML
68 lines
3.4 KiB
HTML
<!doctype html>
|
||
<html lang="uk">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<title>NetPulse — моніторинг мережі</title>
|
||
<meta
|
||
name="description"
|
||
content="NetPulse — моніторинг мережі та керування конфігураціями мережевого обладнання."
|
||
/>
|
||
|
||
<!--
|
||
Іконки. Порядок у розмітці не має значення — браузер обирає сам, —
|
||
але набір має: SVG для тих, хто вміє, ICO для решти.
|
||
|
||
favicon.svg перший і без sizes="any" не обійтися: без цієї
|
||
підказки Chrome вважає, що ICO придатніший, і масштабує растр там,
|
||
де міг би намалювати вектор.
|
||
-->
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
|
||
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
|
||
<!-- ICO лежить ще й у корені під власним іменем: за ним браузери й
|
||
агрегатори стукають наосліп, не читаючи розмітки. -->
|
||
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
|
||
|
||
<!--
|
||
Колір смуги браузера й системних елементів. Один на обидві схеми
|
||
навмисно: інтерфейс NetPulse темний завжди (див. web/src/index.css),
|
||
тож світла смуга над темною сторінкою була б швом, а не темою.
|
||
-->
|
||
<meta name="theme-color" content="#020617" />
|
||
<!--
|
||
Сторінка темна — і браузер має знати про це до того, як застосує
|
||
власні стилі. Інакше поля вводу, випадні списки й смуги прокрутки
|
||
малюються світлими доти, доки не завантажиться CSS.
|
||
-->
|
||
<meta name="color-scheme" content="dark" />
|
||
|
||
<!--
|
||
Збережено на робочий стіл iPad — типовий сценарій для чергового в
|
||
NOC. status-bar-style саме black, а не black-translucent: другий
|
||
пускає вміст під годинник, а верстка про це не знає й ховає під
|
||
ним шапку.
|
||
-->
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||
<meta name="apple-mobile-web-app-title" content="NetPulse" />
|
||
|
||
<!--
|
||
Тло тут, а не лише в index.css: CSS приїжджає модулем разом із JS,
|
||
і до того браузер показує білий аркуш. На вході це білий спалах на
|
||
весь екран — рівно там, де людина бачить продукт уперше.
|
||
-->
|
||
<style>
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
background: #020617;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
<script type="module" src="/src/main.tsx"></script>
|
||
</body>
|
||
</html>
|