/
webru
/
prisma-ui
Обзор
Документация
Войти
/
webru
/
prisma-ui
Код
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
forms.html
275 строк
12 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 — Forms</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 · Forms</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">Forms & Filters</h1> <p class="ops-page-head__hint">Дизайн-концепция элементов форм: поля ввода, фильтры, переключатели, валидация.</p> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Поля ввода</span> </div> <div class="ops-form-section"> <div class="ops-form-grid"> <div class="ops-field"> <label class="ops-field__label" for="demo-text">Текстовое поле</label> <input type="text" class="ops-input" id="demo-text" placeholder="Введите значение…"> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-mono">Mono (ID / IP)</label> <input type="text" class="ops-input ops-input--mono" id="demo-mono" value="10.0.0.42"> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-select">Select</label> <select class="ops-select" id="demo-select"> <option>Option A</option> <option>Option B</option> <option>Option C</option> </select> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-disabled">Disabled</label> <input type="text" class="ops-input" id="demo-disabled" value="readonly" disabled> </div> </div> <div class="ops-field" style="margin-top:12px"> <label class="ops-field__label" for="demo-textarea">Textarea</label> <textarea class="ops-textarea" id="demo-textarea" placeholder="Многострочный ввод…"></textarea> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Размеры и состояния</span> </div> <div class="ops-form-section"> <div class="ops-form-grid"> <div class="ops-field"> <label class="ops-field__label">Small</label> <input type="text" class="ops-input ops-input--sm" value="compact"> </div> <div class="ops-field"> <label class="ops-field__label">Default</label> <input type="text" class="ops-input" value="default"> </div> <div class="ops-field"> <label class="ops-field__label">Large</label> <input type="text" class="ops-input ops-input--lg" value="large"> </div> <div class="ops-field"> <label class="ops-field__label">Error</label> <input type="text" class="ops-input ops-input--error" value="invalid"> <span class="ops-field__error">Обязательное поле</span> </div> <div class="ops-field"> <label class="ops-field__label">Success</label> <input type="text" class="ops-input ops-input--success" value="valid"> </div> <div class="ops-field"> <label class="ops-field__label">С addon</label> <div class="ops-input-group"> <span class="ops-input-group__addon">https://</span> <input type="text" class="ops-input" value="api.example.com"> </div> </div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Checkbox, Radio, Toggle</span> </div> <div class="ops-form-section"> <div class="ops-form-grid ops-form-grid--2"> <div> <div class="ops-field__label" style="margin-bottom:8px">Checkbox group</div> <div class="ops-check-group"> <label class="ops-check"><input type="checkbox" checked> Option 1</label> <label class="ops-check"><input type="checkbox"> Option 2</label> <label class="ops-check"><input type="checkbox"> Option 3</label> </div> </div> <div> <div class="ops-field__label" style="margin-bottom:8px">Radio group</div> <div class="ops-radio-group"> <label class="ops-radio"><input type="radio" name="demo-radio" checked> Alpha</label> <label class="ops-radio"><input type="radio" name="demo-radio"> Beta</label> <label class="ops-radio"><input type="radio" name="demo-radio"> Gamma</label> </div> </div> </div> <div style="margin-top:14px;display:flex;flex-wrap:wrap;gap:16px"> <label class="ops-toggle"> <input type="checkbox" checked> <span class="ops-toggle__track"></span> <span>Включено</span> </label> <label class="ops-toggle"> <input type="checkbox"> <span class="ops-toggle__track"></span> <span>Выключено</span> </label> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Filter bar</span> <span class="ops-section-label__desc">Паттерн для журналов и таблиц</span> </div> <div class="ops-filter-bar"> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Статус</span> <select class="ops-select ops-input--filter"> <option>Все</option> <option>Active</option> <option>Archived</option> </select> </div> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Теги</span> <div class="ops-chip-group"> <button type="button" class="ops-chip is-active">All</button> <button type="button" class="ops-chip">prod</button> <button type="button" class="ops-chip">staging</button> <button type="button" class="ops-chip">dev</button> </div> </div> <div class="ops-filter-bar__field"> <span class="ops-filter-bar__label">Host</span> <input type="text" class="ops-input ops-input--filter ops-input--mono" placeholder="10.x.x.x"> </div> <div class="ops-filter-bar__actions"> <button type="button" class="ops-btn ops-btn--primary ops-btn--sm">Фильтр</button> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Toolbar filters</span> <span class="ops-section-label__desc">Компактные фильтры в ops-toolbar</span> </div> <div class="ops-toolbar"> <input type="search" class="ops-input ops-input--filter" placeholder="Quick search…"> <select class="ops-select ops-input--filter"> <option>Sort: date</option> <option>Sort: name</option> </select> <input type="text" class="ops-input ops-input--filter ops-input--date-eu" value="14.06.2026" aria-label="Дата"> <input type="text" class="ops-input ops-input--filter ops-input--time-24" value="09:41" aria-label="Время"> <span class="ops-toolbar__spacer"></span> <button type="button" class="ops-btn ops-btn--sm">Apply</button> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Date & time</span> <span class="ops-section-label__desc">Календарь · 24h селектор · dd.mm.yyyy</span> </div> <div class="ops-form-section"> <div class="ops-form-grid"> <div class="ops-field"> <label class="ops-field__label" for="demo-date">Date</label> <input type="text" class="ops-input ops-input--date-eu" id="demo-date" value="14.06.2026"> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-time">Time</label> <input type="text" class="ops-input ops-input--time-24" id="demo-time" value="09:41:02" data-ops-time-seconds="true"> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-datetime">Datetime</label> <input type="text" class="ops-input ops-input--datetime-pair" id="demo-datetime" value="14.06.2026 09:41"> </div> <div class="ops-field"> <label class="ops-field__label" for="demo-date2">Дата (фильтр)</label> <input type="text" class="ops-input ops-input--date-eu" id="demo-date2" value="01.06.2026"> </div> </div> </div> <div class="ops-section-label"> <span class="ops-section-label__text">Inline field</span> </div> <div class="ops-panel"> <div class="ops-field ops-field--inline"> <label class="ops-field__label" for="inline-port">Port</label> <input type="text" class="ops-input ops-input--mono ops-input--sm" id="inline-port" value="8080" style="max-width:100px"> <button type="button" class="ops-btn ops-btn--sm">Test</button> </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> </body> </html>