/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
components.html
291 строка
13 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 — Components</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">UI · Components</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"> <nav class="ops-breadcrumbs" aria-label="Breadcrumb"> <a class="ops-breadcrumbs__item" href="index.html">Live</a> <span class="ops-breadcrumbs__sep">/</span> <span class="ops-breadcrumbs__item is-current">Components</span> </nav> <div class="ops-page-head"> <div> <h1 class="ops-page-head__title">UI Components</h1> <p class="ops-page-head__hint">Витрина overlay, feedback, data и menu-паттернов ops UI.</p> </div> <div class="ops-page-head__actions"> <button type="button" class="ops-btn ops-btn--sm" id="demo-toast">Toast</button> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm" id="demo-modal">Modal</button> </div> </div> <div class="ops-alert ops-alert--warn"> <span class="ops-alert__icon">⚠</span> <div class="ops-alert__body"> <div class="ops-alert__title">2 узла в состоянии warn</div> <div class="ops-alert__text">Проверьте relay-kzn-01 и cache-ufa-01.</div> </div> <button type="button" class="ops-alert__close" aria-label="Закрыть">×</button> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Tabs</span> </div> <div data-ops-tabs> <div class="ops-tabs" role="tablist"> <button type="button" class="ops-tabs__tab is-active" data-tab="overview" role="tab">Overview</button> <button type="button" class="ops-tabs__tab" data-tab="metrics" role="tab">Metrics</button> <button type="button" class="ops-tabs__tab" data-tab="config" role="tab">Config</button> </div> <div class="ops-tabs__panel is-active" data-tab-panel="overview"> <div class="ops-panel">Overview panel content.</div> </div> <div class="ops-tabs__panel" data-tab-panel="metrics"> <div class="ops-chart"> <div class="ops-chart__head"> <span class="ops-chart__title">RPS · 1h</span> <div class="ops-chart__legend"> <span class="ops-chart__legend-item"><span class="ops-chart__legend-dot"></span> RPS</span> <span class="ops-chart__legend-item"><span class="ops-chart__legend-dot ops-chart__legend-dot--warn"></span> Limit</span> </div> </div> <div class="ops-chart__body"> <div class="ops-chart__bar" style="height:45%"></div> <div class="ops-chart__bar" style="height:62%"></div> <div class="ops-chart__bar" style="height:55%"></div> <div class="ops-chart__bar ops-chart__bar--warn" style="height:88%"></div> <div class="ops-chart__bar" style="height:70%"></div> <div class="ops-chart__bar" style="height:58%"></div> </div> </div> </div> <div class="ops-tabs__panel" data-tab-panel="config"> <div class="ops-panel">Config tab placeholder.</div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Progress & segmented</span> </div> <div class="ops-form-grid ops-form-grid--2"> <div class="ops-progress"> <div class="ops-progress__label"><span>Deploy v2.14</span><span class="ops-mono">72%</span></div> <div class="ops-progress__track"><div class="ops-progress__bar" style="width:72%"></div></div> </div> <div class="ops-segmented"> <button type="button" class="ops-segmented__btn is-active">Table</button> <button type="button" class="ops-segmented__btn">Chart</button> <button type="button" class="ops-segmented__btn">Map</button> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Table · sticky · sort · selection</span> </div> <div data-ops-table-select> <div class="ops-table-bulk"> <span class="ops-table-bulk__count">Выбрано: <span class="ops-mono" data-selected-count>0</span></span> <button type="button" class="ops-btn ops-btn--sm ops-btn--danger">Restart</button> </div> <div class="ops-grid-table-wrap ops-grid-table-wrap--sticky"> <table class="ops-grid-table"> <thead> <tr> <th style="width:32px"><label class="ops-check"><input type="checkbox" data-select-all></label></th> <th class="ops-th-sort">ID</th> <th>Имя</th> <th class="ops-th-sort">Статус</th> <th style="width:40px"></th> </tr> </thead> <tbody> <tr> <td><label class="ops-check"><input type="checkbox"></label></td> <td class="ops-mono">nd-a1f3</td> <td>edge-msk-01</td> <td><span class="ops-state ops-state--ok">Online</span></td> <td> <div class="ops-menu"> <button type="button" class="ops-btn ops-btn--icon ops-btn--ghost ops-btn--sm" data-menu-trigger>⋯</button> <div class="ops-menu__panel"> <button type="button" class="ops-menu__item">Restart</button> <button type="button" class="ops-menu__item">Logs</button> <div class="ops-menu__sep"></div> <button type="button" class="ops-menu__item ops-menu__item--danger">Remove</button> </div> </div> </td> </tr> <tr> <td><label class="ops-check"><input type="checkbox"></label></td> <td class="ops-mono">nd-c9d4</td> <td>relay-kzn-01</td> <td><span class="ops-state ops-state--warn">Warn</span></td> <td> <div class="ops-menu"> <button type="button" class="ops-btn ops-btn--icon ops-btn--ghost ops-btn--sm" data-menu-trigger>⋯</button> <div class="ops-menu__panel"> <button type="button" class="ops-menu__item">Restart</button> <button type="button" class="ops-menu__item ops-menu__item--danger">Remove</button> </div> </div> </td> </tr> <tr> <td><label class="ops-check"><input type="checkbox"></label></td> <td class="ops-mono">nd-e2f1</td> <td>cache-nsk-03</td> <td><span class="ops-state ops-state--danger">Error</span></td> <td> <div class="ops-tooltip-wrap"> <button type="button" class="ops-btn ops-btn--icon ops-btn--ghost ops-btn--sm">?</button> <span class="ops-tooltip">Last error: TIMEOUT</span> </div> </td> </tr> </tbody> </table> </div> </div> <div class="ops-pagination"> <span class="ops-pagination__info">Стр. <span class="ops-mono">1</span> из <span class="ops-mono">12</span> · <span class="ops-mono">128</span> записей</span> <div class="ops-pagination__nav"> <button type="button" class="ops-pagination__btn" disabled>←</button> <button type="button" class="ops-pagination__btn is-active">1</button> <button type="button" class="ops-pagination__btn">2</button> <button type="button" class="ops-pagination__btn">3</button> <button type="button" class="ops-pagination__btn">→</button> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Log viewer</span> </div> <pre class="ops-log" aria-label="Log output"><span class="ops-log__line ops-log__line--info"><span class="ops-log__ts">14.06.2026 09:41:02</span>INFO CONN_OK handshake completed</span> <span class="ops-log__line ops-log__line--warn"><span class="ops-log__ts">14.06.2026 09:39:11</span>WARN RETRY attempt 2/5</span> <span class="ops-log__line ops-log__line--err"><span class="ops-log__ts">14.06.2026 09:12:44</span>ERROR TIMEOUT upstream failed</span></pre> <div class="ops-section-label"> <span class="ops-section-label__text">Empty & loading</span> </div> <div class="ops-form-grid ops-form-grid--2"> <div class="ops-empty"> <span class="ops-empty__icon">○</span> <h3 class="ops-empty__title">Нет данных</h3> <p class="ops-empty__hint">Измените фильтры или добавьте первый узел.</p> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm">Добавить узел</button> </div> <div class="ops-loading"> <div class="ops-spinner"></div> <span>Загрузка метрик…</span> <div style="width:100%;margin-top:8px"> <div class="ops-skeleton ops-skeleton--lg"></div> <div class="ops-skeleton" style="margin-top:6px;width:80%"></div> <div class="ops-skeleton ops-skeleton--sm" style="margin-top:6px;width:55%"></div> </div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Date & time · pickers</span> <span class="ops-section-label__desc">Календарь + селектор времени 24h</span> </div> <div class="ops-form-grid"> <div class="ops-field"> <label class="ops-field__label">Дата</label> <input type="text" class="ops-input ops-input--date-eu" value="14.06.2026"> </div> <div class="ops-field"> <label class="ops-field__label">Время</label> <input type="text" class="ops-input ops-input--time-24" value="09:41:02" data-ops-time-seconds="true"> </div> </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> <script> document.getElementById("demo-toast").addEventListener("click", function () { OpsOverlay.showToast("Конфигурация сохранена", "ok"); }); document.getElementById("demo-modal").addEventListener("click", function () { OpsOverlay.showModal({ title: "Restart node?", body: "Узел nd-a1f3 будет перезапущен. Активные сессии прервутся.", confirmLabel: "Restart", cancelLabel: "Cancel", danger: true }); }); document.querySelector(".ops-alert__close").addEventListener("click", function () { this.closest(".ops-alert").remove(); }); </script> </body> </html>