/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
viewer.html
204 строки
8 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 — Viewer</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 ops-shell--viewer"> <header class="topbar"> <a class="topbar__brand" href="index.html">PRISMA UI</a> <span class="topbar__sep"></span> <span class="topbar__context">View · Stream Viewer</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> <aside class="ops-viewer-rail" aria-label="Список потоков"> <div class="ops-viewer-rail__head"> <span>Потоки</span> <span class="ops-mono" style="font-size:0.68rem">24</span> </div> <div class="ops-viewer-rail__list"> <a href="#" class="ops-viewer-rail__item is-active"> cam-lobby-01 <span class="ops-viewer-rail__item-id">str-7a2f</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-parking-a <span class="ops-viewer-rail__item-id">str-3b8c</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-parking-b <span class="ops-viewer-rail__item-id">str-9d1e</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-warehouse-n <span class="ops-viewer-rail__item-id">str-4f6a</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-warehouse-s <span class="ops-viewer-rail__item-id">str-2c5b</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-gate-main <span class="ops-viewer-rail__item-id">str-8e3d</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-gate-service <span class="ops-viewer-rail__item-id">str-1a9f</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-roof-east <span class="ops-viewer-rail__item-id">str-6g7h</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-roof-west <span class="ops-viewer-rail__item-id">str-0i2j</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-server-rm <span class="ops-viewer-rail__item-id">str-5k4l</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-elevator-1 <span class="ops-viewer-rail__item-id">str-3m8n</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-elevator-2 <span class="ops-viewer-rail__item-id">str-7o1p</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-cafeteria <span class="ops-viewer-rail__item-id">str-9q2r</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-reception <span class="ops-viewer-rail__item-id">str-4s6t</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-hall-2f <span class="ops-viewer-rail__item-id">str-1u5v</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-hall-3f <span class="ops-viewer-rail__item-id">str-8w3x</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-stairs-a <span class="ops-viewer-rail__item-id">str-2y7z</span> </a> <a href="#" class="ops-viewer-rail__item"> cam-stairs-b <span class="ops-viewer-rail__item-id">str-6a0b</span> </a> </div> <div class="ops-viewer-rail__foot"> <a href="settings.html" class="ops-btn ops-btn--ghost ops-btn--sm" style="width:100%">Управление</a> </div> </aside> <main class="ops-workspace"> <div class="ops-page-head"> <div> <h1 class="ops-page-head__title">cam-lobby-01</h1> <p class="ops-page-head__hint">Viewer shell — предметная левая панель вместо ops-rail. Панель фиксирована при прокрутке.</p> </div> <div class="ops-page-head__actions"> <span class="ops-state ops-state--ok">Live</span> </div> </div> <div class="ops-viewer-stage"> <div class="ops-viewer-canvas"> [ Видеопоток · str-7a2f · 1920×1080 ] </div> <div class="ops-viewer-controls"> <button type="button" class="ops-btn ops-btn--sm">◀ Prev</button> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm">▶ Play</button> <button type="button" class="ops-btn ops-btn--sm">Next ▶</button> <span class="ops-toolbar__sep"></span> <button type="button" class="ops-btn ops-btn--sm">Snapshot</button> <button type="button" class="ops-btn ops-btn--sm">Record</button> <span class="ops-toolbar__spacer"></span> <span class="ops-ts">14.06.2026 09:41:15</span> </div> </div> <div class="ops-section-label" style="margin-top:16px"> <span class="ops-section-label__text">Метаданные потока</span> </div> <div class="ops-form-grid ops-form-grid--2"> <div class="ops-panel"> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Stream ID</span> <span class="ops-mono">str-7a2f</span> </div> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Codec</span> <span class="ops-mono">H.264</span> </div> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Bitrate</span> <span class="ops-mono">4.2 Mbps</span> </div> </div> <div class="ops-panel"> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Node</span> <span class="ops-mono"><a href="node-detail.html" class="ops-link-mono">nd-a1f3</a></span> </div> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Latency</span> <span class="ops-mono">38 ms</span> </div> <div class="ops-field ops-field--inline"> <span class="ops-field__label">Uptime</span> <span class="ops-ts">14d 6h</span> </div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Дополнительный контент</span> </div> <div class="ops-panel"> <p style="margin:0 0 8px;font-size:0.78rem;color:var(--muted)">Прокрутите вниз — список потоков слева остаётся на месте.</p> <p style="margin:0;font-size:0.78rem;color:var(--muted)">На viewer-страницах ops-rail заменяется предметной панелью сущностей (потоки, камеры, записи).</p> </div> <div class="ops-panel" style="margin-top:10px;height:200px"></div> <div class="ops-panel" style="margin-top:10px;height:200px"></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>