188 lines
10 KiB
HTML
188 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Хоккейный vMix</title>
|
||
<link rel="icon" type="image/svg+xml" href="__UI_BUILDER_ASSETS__/favicon.svg?v=__UI_BUILDER_ASSET_VERSION__">
|
||
<link rel="stylesheet" href="__UI_BUILDER_ASSETS__/styles.css?v=__UI_BUILDER_ASSET_VERSION__">
|
||
__UI_BUILDER_CUSTOM_STYLES__
|
||
<script>
|
||
window.UI_BUILDER_BOOT = {
|
||
api: "__UI_BUILDER_API__",
|
||
authApi: "__UI_BUILDER_AUTH_API__",
|
||
assets: "__UI_BUILDER_ASSETS__",
|
||
editorUrl: "__UI_BUILDER_EDITOR__",
|
||
runtimeUrl: "__UI_BUILDER_RUNTIME__",
|
||
editorHotkey: "__UI_BUILDER_EDITOR_HOTKEY__",
|
||
mode: "__UI_BUILDER_MODE__"
|
||
};
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<header class="topbar editor-only">
|
||
<div class="brand-block">
|
||
<div class="eyebrow">UNIVERSAL UI BUILDER / MODULE</div>
|
||
<input id="projectName" class="project-name" value="Спортивный интерфейс" aria-label="Название проекта">
|
||
</div>
|
||
|
||
<div class="top-actions">
|
||
<label class="inline-field">
|
||
<span>Данные</span>
|
||
<select id="dataSource"></select>
|
||
</label>
|
||
<button id="reloadDataBtn" class="btn">Обновить</button>
|
||
<button id="previewBtn" class="btn">Предпросмотр</button>
|
||
<button id="saveBtn" class="btn">Сохранить черновик</button>
|
||
<button id="publishBtn" class="btn btn-accent" title="Скопировать черновик в рабочую панель">Опубликовать</button>
|
||
<button id="openRuntimeBtn" class="btn" title="Открыть опубликованную панель управления">Панель управления</button>
|
||
<button id="lockEditorBtn" class="btn editor-lock-btn" title="Завершить защищённую сессию конструктора">Закрыть доступ</button>
|
||
<span id="editorSessionBadge" class="editor-session-badge" title="Оставшееся время защищённой сессии">Сессия редактора</span>
|
||
<button id="shortcutsBtn" class="btn" title="Шорткаты и сценарии">⌨ Шорткаты <span id="shortcutsCount" class="btn-count">0</span></button>
|
||
<button id="triggersBtn" class="btn">Триггеры <span id="triggersCount" class="btn-count">0</span></button>
|
||
<button id="backupsBtn" class="btn">Копии</button>
|
||
<button id="exportBtn" class="btn">Экспорт</button>
|
||
<label class="btn file-btn">Импорт<input id="importInput" type="file" accept="application/json,.json"></label>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="editor" class="editor-shell editor-only">
|
||
<aside class="left-sidebar panel-scroll">
|
||
<section class="sidebar-section">
|
||
<div class="section-title-row"><h2>Шаблоны</h2></div>
|
||
<div class="template-grid">
|
||
<button data-template="hockey_penalties">Хоккей — drag & drop</button>
|
||
<button data-template="hockey">Хоккей — таймеры</button>
|
||
<button data-template="vmix">vMix — кнопка</button>
|
||
<button data-template="golf">Гольф</button>
|
||
<button data-template="race">Гонки</button>
|
||
<button data-template="football">Футбол</button>
|
||
<button data-template="dashboard">Dashboard</button>
|
||
<button data-template="form">Форма</button>
|
||
<button data-template="empty">Пустой</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sidebar-section">
|
||
<div class="section-title-row">
|
||
<h2>Вкладки проекта</h2>
|
||
<button id="addTabBtn" class="mini-btn" title="Добавить вкладку">＋</button>
|
||
</div>
|
||
<div id="tabsManager" class="tabs-manager"></div>
|
||
</section>
|
||
|
||
<section class="sidebar-section">
|
||
<div class="section-title-row"><h2>Холст</h2></div>
|
||
<div class="canvas-settings-grid">
|
||
<label><span>Ширина</span><input id="canvasWidth" type="number" min="640" max="7680"></label>
|
||
<label><span>Высота</span><input id="canvasHeight" type="number" min="360" max="4320"></label>
|
||
<label><span>Сетка</span><input id="gridSize" type="number" min="1" max="100"></label>
|
||
<label><span>Магнит</span><input id="snapThreshold" type="number" min="1" max="50"></label>
|
||
<label class="canvas-background">
|
||
<span>Фон</span>
|
||
<span class="color-control color-control-static">
|
||
<input id="canvasBackground" type="color" value="#0c1421" aria-label="Выбрать фон холста">
|
||
<input id="canvasBackgroundText" type="text" value="#0c1421" placeholder="#0c1421" aria-label="CSS-цвет фона холста">
|
||
<button id="canvasBackgroundClear" type="button" class="color-clear" title="Сбросить цвет">×</button>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="sidebar-section sticky-search">
|
||
<h2>Компоненты</h2>
|
||
<input id="componentSearch" type="search" placeholder="Поиск компонента...">
|
||
</section>
|
||
<div id="componentLibrary" class="component-library"></div>
|
||
</aside>
|
||
|
||
<section class="workspace">
|
||
<div class="workspace-toolbar">
|
||
<div class="toolbar-group">
|
||
<label class="inline-field compact">
|
||
<span>Редактируемая вкладка</span>
|
||
<select id="activeTabSelect"></select>
|
||
</label>
|
||
<label class="check-inline"><input id="showAllTabs" type="checkbox"> Все слои</label>
|
||
</div>
|
||
|
||
<div class="toolbar-group">
|
||
<label class="check-inline"><input id="snapEnabled" type="checkbox" checked> Магниты</label>
|
||
<label class="check-inline"><input id="gridEnabled" type="checkbox" checked> Сетка</label>
|
||
<label class="check-inline"><input id="autoBindEnabled" type="checkbox" checked> Привязка к контейнерам</label>
|
||
<button id="zoomOutBtn" class="icon-btn" title="Уменьшить">−</button>
|
||
<span id="zoomLabel" class="zoom-label">70%</span>
|
||
<button id="zoomInBtn" class="icon-btn" title="Увеличить">＋</button>
|
||
<button id="bringFrontBtn" class="icon-btn" title="На передний план">⇧</button>
|
||
<button id="sendBackBtn" class="icon-btn" title="На задний план">⇩</button>
|
||
<button id="duplicateBtn" class="icon-btn" title="Дублировать">⧉</button>
|
||
<button id="deleteBtn" class="icon-btn danger" title="Удалить">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="canvasViewport" class="canvas-viewport">
|
||
<div id="canvasSizer" class="canvas-sizer">
|
||
<div id="canvasStage" class="canvas-stage">
|
||
<div id="guideX" class="snap-guide horizontal hidden"></div>
|
||
<div id="guideY" class="snap-guide vertical hidden"></div>
|
||
<div id="canvasEmpty" class="canvas-empty hidden">Добавьте компоненты слева или выберите шаблон.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<details class="data-inspector">
|
||
<summary>Текущий JSON и доступные пути</summary>
|
||
<div class="data-inspector-grid">
|
||
<pre id="rawData"></pre>
|
||
<div>
|
||
<div class="mini-heading">Пути данных</div>
|
||
<div id="dataPaths" class="data-paths"></div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<aside class="right-sidebar panel-scroll">
|
||
<div class="section-title-row">
|
||
<h2>Настройки элемента</h2>
|
||
<span id="selectedType" class="type-pill">—</span>
|
||
</div>
|
||
<div id="emptyInspector" class="empty-state">Выберите компонент на холсте.</div>
|
||
<form id="inspector" class="inspector hidden"></form>
|
||
</aside>
|
||
</main>
|
||
|
||
<section id="runtimeView" class="runtime-view runtime-only hidden">
|
||
<header class="runtime-topbar">
|
||
<div>
|
||
<div class="eyebrow">RUNTIME INTERFACE</div>
|
||
<div class="runtime-title-line"><strong id="runtimeTitle">Интерфейс</strong><small class="runtime-build-badge">BUILD 2026.08.19.28</small></div>
|
||
</div>
|
||
<div id="runtimeTabs" class="runtime-tabs"></div>
|
||
<div class="runtime-actions">
|
||
<button id="runtimeEventsToggleBtn" class="icon-btn runtime-events-toggle is-on" type="button" title="Toast-уведомления включены для этого аккаунта" aria-label="Включить или выключить toast-уведомления">🔔</button>
|
||
<button id="runtimeEditorBtn" class="icon-btn hidden" type="button" title="Открыть конструктор (Ctrl+Shift+E)" aria-label="Открыть конструктор">✎</button>
|
||
<button id="runtimeShortcutsBtn" class="icon-btn" type="button" title="Шорткаты" aria-label="Шорткаты">⌨</button>
|
||
<button id="quickTimersBtn" class="icon-btn" type="button" title="Быстрая настройка таймеров" aria-label="Быстрая настройка таймеров">⏱</button>
|
||
<button id="runtimeAdminSettingsBtn" class="icon-btn hidden" type="button" title="Настройки базы данных" aria-label="Настройки базы данных">⚙</button>
|
||
<button id="runtimeLogoutBtn" class="icon-btn runtime-logout-btn" type="button" title="Выйти из аккаунта" aria-label="Выйти из аккаунта">⎋</button>
|
||
<button id="closePreviewBtn" class="icon-btn btn-accent preview-only" type="button" title="Вернуться в конструктор" aria-label="Вернуться в конструктор">↩</button>
|
||
</div>
|
||
</header>
|
||
<div id="runtimeViewport" class="runtime-viewport">
|
||
<div id="runtimeSizer" class="runtime-sizer">
|
||
<div id="runtimeStage" class="runtime-stage"></div>
|
||
</div>
|
||
</div>
|
||
<div id="runtimeButtonDock" class="runtime-button-dock hidden"></div>
|
||
</section>
|
||
|
||
<div id="modalHost"></div>
|
||
<div id="toast" class="toast"></div>
|
||
<datalist id="dataPathList"></datalist>
|
||
|
||
<script src="__UI_BUILDER_ASSETS__/app.js?v=__UI_BUILDER_ASSET_VERSION__"></script>
|
||
__UI_BUILDER_CUSTOM_SCRIPTS__
|
||
</body>
|
||
</html>
|