/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
index.html
258 строк
11 KB
webru
Add Ops narrative patterns, node detail demo, and UI conventions.
14 июн 2026, 14:28
14 июн 2026, 14:28
47b1546
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prisma UI — Live Dashboard</title> <script> (function () { try { var t = localStorage.getItem("prisma-ui-theme"); if (t === "light" || t === "dark") document.documentElement.setAttribute("data-theme", t); } catch (e) {} })(); </script> <link rel="stylesheet" href="ops-tokens.css"> <link rel="stylesheet" href="ops-layout.css"> <link rel="stylesheet" href="ops-components.css"> <link rel="stylesheet" href="ops-forms.css"> <link rel="stylesheet" href="ops-datetime.css"> <link rel="stylesheet" href="ops-overlays.css"> <link rel="stylesheet" href="ops-patterns.css"> <link rel="stylesheet" href="ops-data.css"> <link rel="stylesheet" href="ops-menus.css"> </head> <body class="ops-page"> <div class="ops-shell"> <header class="topbar"> <a class="topbar__brand" href="index.html">PRISMA UI</a> <span class="topbar__sep"></span> <span class="topbar__context">Live · Dashboard</span> <span class="topbar__spacer"></span> <div class="topbar__meta"> <span class="topbar__user ops-mono">operator@demo</span> <span class="topbar__role">Admin</span> <button type="button" class="topbar__theme-btn" id="theme-toggle" aria-label="Переключить тему">☀</button> <a class="topbar__logout" href="#">Выход</a> </div> </header> <nav class="ops-rail" aria-label="Основная навигация"> <div class="ops-rail__section"> <div class="ops-rail__label">Просмотр</div> <div class="ops-rail__links"> <a href="index.html" class="ops-rail__link ops-rail__link--primary" data-page="index.html">Live</a> <a href="viewer.html" class="ops-rail__link" data-page="viewer.html">Viewer</a> <a href="node-detail.html" class="ops-rail__link" data-page="node-detail.html">Node</a> </div> </div> <div class="ops-rail__section"> <div class="ops-rail__label">Управление</div> <div class="ops-rail__links"> <a href="settings.html" class="ops-rail__link" data-page="settings.html">Settings</a> <a href="forms.html" class="ops-rail__link" data-page="forms.html">Forms</a> <a href="components.html" class="ops-rail__link" data-page="components.html">Components</a> </div> </div> <div class="ops-rail__section"> <div class="ops-rail__label">Журналы</div> <div class="ops-rail__links"> <a href="events.html" class="ops-rail__link" data-page="events.html">Events</a> </div> </div> </nav> <main class="ops-workspace"> <div class="ops-page-head"> <div> <h1 class="ops-page-head__title">Live Dashboard</h1> <p class="ops-page-head__hint">Обзор активных узлов и метрик в реальном времени. Левая панель остаётся на месте при прокрутке.</p> </div> <div class="ops-page-head__actions"> <button type="button" class="ops-btn ops-btn--ghost ops-btn--sm">Экспорт</button> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm">Обновить</button> </div> </div> <div class="ops-metrics"> <div class="ops-metric"> <div class="ops-metric__label">Узлов online</div> <div class="ops-metric__value">128</div> <div class="ops-metric__delta ops-metric__delta--up">+4 за час</div> </div> <div class="ops-metric"> <div class="ops-metric__label">RPS</div> <div class="ops-metric__value">4,821</div> <div class="ops-metric__delta">стабильно</div> </div> <div class="ops-metric"> <div class="ops-metric__label">Latency p99</div> <div class="ops-metric__value">42<span style="font-size:0.7em">ms</span></div> <div class="ops-metric__delta ops-metric__delta--down">+3ms</div> </div> <div class="ops-metric"> <div class="ops-metric__label">Alerts</div> <div class="ops-metric__value">2</div> <div class="ops-metric__delta ops-metric__delta--down">warn</div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Узлы</span> <span class="ops-section-label__desc">128 записей</span> </div> <div class="ops-toolbar"> <div class="ops-toolbar__group"> <input type="search" class="ops-input ops-input--filter" placeholder="Поиск по имени…" aria-label="Поиск"> </div> <div class="ops-toolbar__sep"></div> <div class="ops-toolbar__group"> <select class="ops-select ops-input--filter" aria-label="Статус"> <option value="">Все статусы</option> <option>Online</option> <option>Connecting</option> <option>Error</option> </select> </div> <span class="ops-toolbar__spacer"></span> <button type="button" class="ops-btn ops-btn--sm">Сбросить</button> </div> <div class="ops-grid-table-wrap"> <table class="ops-grid-table"> <colgroup> <col style="width:4.5rem"> <col> <col style="width:6.5rem"> <col style="width:4.5rem"> <col style="width:5.5rem"> <col style="width:11rem"> </colgroup> <thead> <tr> <th>ID</th> <th>Имя</th> <th>IP</th> <th>Регион</th> <th>Статус</th> <th>Обновлено</th> </tr> </thead> <tbody> <tr> <td class="ops-mono"><a href="node-detail.html" class="ops-link-mono">nd-a1f3</a></td> <td>edge-msk-01</td> <td class="ops-mono">10.24.1.15</td> <td>RU-MOW</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:41:02</td> </tr> <tr> <td class="ops-mono">nd-b7c2</td> <td>edge-spb-02</td> <td class="ops-mono">10.24.2.08</td> <td>RU-SPB</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:58</td> </tr> <tr> <td class="ops-mono">nd-c9d4</td> <td>relay-kzn-01</td> <td class="ops-mono">10.24.3.22</td> <td>RU-KZN</td> <td><span class="ops-state ops-state--warn">Connecting</span></td> <td class="ops-ts">14.06.2026 09:39:11</td> </tr> <tr> <td class="ops-mono">nd-e2f1</td> <td>cache-nsk-03</td> <td class="ops-mono">10.24.4.41</td> <td>RU-NSK</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td class="ops-ts">14.06.2026 09:12:44</td> </tr> <tr> <td class="ops-mono">nd-f8a6</td> <td>edge-ekb-01</td> <td class="ops-mono">10.24.5.07</td> <td>RU-EKB</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:41:00</td> </tr> <tr> <td class="ops-mono">nd-g3h5</td> <td>relay-vvo-02</td> <td class="ops-mono">10.24.6.19</td> <td>RU-VVO</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:55</td> </tr> <tr> <td class="ops-mono">nd-h1j9</td> <td>edge-sochi-01</td> <td class="ops-mono">10.24.7.33</td> <td>RU-AER</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:49</td> </tr> <tr> <td class="ops-mono">nd-i4k2</td> <td>cache-ufa-01</td> <td class="ops-mono">10.24.8.12</td> <td>RU-UFA</td> <td><span class="ops-state ops-state--warn">Connecting</span></td> <td class="ops-ts">14.06.2026 09:38:22</td> </tr> <tr> <td class="ops-mono">nd-j6l8</td> <td>edge-krd-02</td> <td class="ops-mono">10.24.9.28</td> <td>RU-KRR</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:47</td> </tr> <tr> <td class="ops-mono">nd-k0m3</td> <td>relay-oms-01</td> <td class="ops-mono">10.24.10.05</td> <td>RU-OMS</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:42</td> </tr> <tr> <td class="ops-mono">nd-l2n7</td> <td>edge-tjm-01</td> <td class="ops-mono">10.24.11.17</td> <td>RU-TJM</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td class="ops-ts">14.06.2026 09:40:38</td> </tr> <tr> <td class="ops-mono">nd-m5p1</td> <td>cache-irk-02</td> <td class="ops-mono">10.24.12.44</td> <td>RU-IKT</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td class="ops-ts">14.06.2026 08:55:03</td> </tr> </tbody> </table> </div> <div class="ops-section-label" style="margin-top:20px"> <span class="ops-section-label__text">Дополнительно</span> </div> <div class="ops-panel"> <p style="margin:0;font-size:0.78rem;color:var(--muted)">Прокрутите вниз — левая навигационная панель остаётся зафиксированной. Контент прокручивается только в правом блоке <code class="ops-mono">ops-workspace</code>.</p> </div> </main> </div> <script src="ops-select.js"></script> <script src="ops-overlays.js"></script> <script src="ops-patterns.js"></script> <script src="ops-datetime.js"></script> <script src="ops-data.js"></script> <script src="demo.js"></script> </body> </html>