/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
settings.html
161 строка
7 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 — Settings</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">Manage · Settings</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">Settings</h1> <p class="ops-page-head__hint">Конфигурация кластера и параметры подключения.</p> </div> </div> <form action="#" method="post" onsubmit="return false"> <div class="ops-form-section"> <h2 class="ops-form-section__title">Общие</h2> <div class="ops-form-grid ops-form-grid--2"> <div class="ops-field"> <label class="ops-field__label ops-field__label--required" for="cluster-name">Имя кластера</label> <input type="text" class="ops-input" id="cluster-name" value="prisma-prod-01" required> <span class="ops-field__hint">Уникальный идентификатор в консоли</span> </div> <div class="ops-field"> <label class="ops-field__label" for="region">Регион</label> <select class="ops-select" id="region"> <option>RU-MOW</option> <option>RU-SPB</option> <option>RU-KZN</option> </select> </div> <div class="ops-field"> <label class="ops-field__label" for="api-endpoint">API endpoint</label> <input type="url" class="ops-input ops-input--mono" id="api-endpoint" value="https://api.demo.local/v2"> </div> <div class="ops-field"> <label class="ops-field__label" for="port">Порт relay</label> <input type="text" class="ops-input ops-input--mono" id="port" value="8443" inputmode="numeric"> </div> </div> </div> <div class="ops-form-section"> <h2 class="ops-form-section__title">Безопасность</h2> <div class="ops-field"> <label class="ops-toggle"> <input type="checkbox" checked> <span class="ops-toggle__track"></span> <span>TLS для входящих соединений</span> </label> </div> <div class="ops-field"> <label class="ops-toggle"> <input type="checkbox"> <span class="ops-toggle__track"></span> <span>Требовать mTLS от узлов</span> </label> </div> <div class="ops-field" style="margin-top:12px"> <label class="ops-field__label" for="token">Service token</label> <input type="password" class="ops-input ops-input--mono" id="token" value="sk-demo-xxxxxxxx"> <span class="ops-field__hint">Не передавайте токен в логах</span> </div> </div> <div class="ops-form-section"> <h2 class="ops-form-section__title">Уведомления</h2> <div class="ops-check-group"> <label class="ops-check"> <input type="checkbox" checked> <span>Email при критических алертах</span> </label> <label class="ops-check"> <input type="checkbox" checked> <span>Webhook при падении узла</span> </label> <label class="ops-check"> <input type="checkbox"> <span>Еженедельный отчёт</span> </label> </div> <div class="ops-field" style="margin-top:12px"> <label class="ops-field__label" for="webhook">Webhook URL</label> <input type="url" class="ops-input ops-input--mono ops-input--error" id="webhook" value="not-a-valid-url"> <span class="ops-field__error">Некорректный URL — проверьте формат</span> </div> </div> <div class="ops-form-actions"> <button type="submit" class="ops-btn ops-btn--primary">Сохранить</button> <button type="reset" class="ops-btn ops-btn--ghost">Отмена</button> </div> </form> </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>