164 lines
15 KiB
HTML
164 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="color-scheme" content="light dark">
|
||
<title>Tion 4S — панель управления</title>
|
||
<link rel="stylesheet" href="/ui/static/css/base.css">
|
||
<link rel="stylesheet" href="/ui/static/css/panel.css">
|
||
</head>
|
||
<body>
|
||
<div class="ambient"></div>
|
||
<main class="climate-panel glass" aria-live="polite">
|
||
<header class="panel-header">
|
||
<div class="identity">
|
||
<h1>Tion 4S</h1>
|
||
<span id="connection" class="pill muted">Загрузка</span>
|
||
<span id="mode-pill" class="pill muted">—</span>
|
||
</div>
|
||
<div class="header-tools">
|
||
<div class="ventilation-badge glass-tile">
|
||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 7h9a3 3 0 1 0-2.6-4.5M3 12h15a3 3 0 1 1-2.7 4.3M3 17h7" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
|
||
<span><strong>Приточная вентиляция</strong><small>Чистый воздух для вашего дома</small></span>
|
||
</div>
|
||
<button id="refresh-button" class="icon-button" type="button" title="Обновить данные">
|
||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.34 5.66M20 5v6h-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button id="theme-button" class="icon-button" type="button" title="Сменить тему">
|
||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.64 5.64l1.42 1.42m9.88 9.88 1.42 1.42m0-12.72-1.42 1.42M7.06 16.94l-1.42 1.42" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="1.8"/></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="primary-controls" aria-label="Основное управление">
|
||
<article class="control-card glass-tile speed-card">
|
||
<div class="card-title"><svg class="ui-icon feature-icon fan-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#fan"></use></svg><span><h2>Скорость вентиляции</h2><p id="speed-note">Текущая ступень вентилятора</p></span></div>
|
||
<div class="hero-control">
|
||
<button class="hero-step" data-step="speed" data-delta="-1" type="button" aria-label="Уменьшить скорость">−</button>
|
||
<strong id="speed-value" class="hero-value">—</strong>
|
||
<button class="hero-step primary" data-step="speed" data-delta="1" type="button" aria-label="Увеличить скорость">+</button>
|
||
</div>
|
||
<input id="speed-range" class="range speed-range" type="range" min="1" max="6" step="1" value="3" aria-label="Скорость вентилятора">
|
||
<div class="speed-segments" aria-label="Выбор скорости">
|
||
<button type="button" data-speed="1" aria-label="Скорость 1"></button>
|
||
<button type="button" data-speed="2" aria-label="Скорость 2"></button>
|
||
<button type="button" data-speed="3" aria-label="Скорость 3"></button>
|
||
<button type="button" data-speed="4" aria-label="Скорость 4"></button>
|
||
<button type="button" data-speed="5" aria-label="Скорость 5"></button>
|
||
<button type="button" data-speed="6" aria-label="Скорость 6"></button>
|
||
</div>
|
||
<div class="speed-labels" aria-hidden="true"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
|
||
</article>
|
||
|
||
<article class="control-card glass-tile temperature-card">
|
||
<div class="card-title"><svg class="ui-icon feature-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#thermometer"></use></svg><span><h2>Цель (температура)</h2><p id="temperature-note">Желаемая температура воздуха</p></span></div>
|
||
<div class="hero-control">
|
||
<button class="hero-step" data-step="temperature" data-delta="-1" type="button" aria-label="Уменьшить температуру">−</button>
|
||
<strong class="hero-value"><span id="temperature-value">—</span>°</strong>
|
||
<button class="hero-step primary" data-step="temperature" data-delta="1" type="button" aria-label="Увеличить температуру">+</button>
|
||
</div>
|
||
<input id="temperature-range" class="range temperature-range" type="range" min="5" max="30" step="1" value="21" aria-label="Целевая температура">
|
||
<div class="temperature-labels" aria-hidden="true"><span>5°</span><span>10°</span><span>15°</span><span>20°</span><span>25°</span><span>30°</span></div>
|
||
</article>
|
||
|
||
<article class="switch-card glass-tile power-card">
|
||
<div class="card-title compact"><svg class="ui-icon feature-icon green" aria-hidden="true"><use href="/ui/static/assets/icons.svg#power"></use></svg><span><h2>Питание</h2><p id="power-caption">Устройство выключено</p></span></div>
|
||
<button id="power-toggle" class="glass-switch green" type="button" aria-pressed="false">OFF</button>
|
||
</article>
|
||
|
||
<article class="switch-card glass-tile heater-card">
|
||
<div class="card-title compact"><svg class="ui-icon feature-icon orange" aria-hidden="true"><use href="/ui/static/assets/icons.svg#heat"></use></svg><span><h2>Обогрев</h2><p id="heater-caption">Поддержание температуры</p></span></div>
|
||
<button id="heater-toggle" class="glass-switch orange" type="button" aria-pressed="false">OFF</button>
|
||
</article>
|
||
</section>
|
||
|
||
<section id="air" class="content-section glass-section" aria-labelledby="air-title">
|
||
<div class="section-title">
|
||
<div><svg class="ui-icon section-icon leaf" aria-hidden="true"><use href="/ui/static/assets/icons.svg#leaf"></use></svg><h2 id="air-title">Показатели воздуха</h2></div>
|
||
<span id="sensor-status" class="pill muted">Датчик</span>
|
||
<span id="updated-at" class="updated">Обновление…</span>
|
||
</div>
|
||
<div class="air-grid">
|
||
<article class="metric-card co2-card glass-tile" data-air-tone="muted">
|
||
<div class="metric-head"><span>CO₂</span><span id="air-label" class="quality-chip muted">Нет данных</span></div>
|
||
<strong><span id="co2">—</span> <small>ppm</small></strong>
|
||
<p id="air-advice">Ожидаем показания датчика</p>
|
||
<div class="meter co2-meter"><i id="co2-progress"></i></div>
|
||
<div class="meter-labels"><span>400</span><span>800</span><span>1200</span><span>2000</span></div>
|
||
</article>
|
||
<article class="metric-card glass-tile"><div class="metric-heading"><svg class="ui-icon metric-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#thermometer"></use></svg><span>Температура<br>в помещении</span></div><strong><span id="room-temp">—</span>°</strong></article>
|
||
<article class="metric-card glass-tile"><div class="metric-heading"><svg class="ui-icon metric-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#drop"></use></svg><span>Влажность</span></div><strong><span id="humidity">—</span>%</strong></article>
|
||
<article class="metric-card glass-tile"><div class="metric-heading"><svg class="ui-icon metric-icon particles" aria-hidden="true"><use href="/ui/static/assets/icons.svg#particles"></use></svg><span>PM2.5</span></div><strong><span id="pm25">—</span> <small>мкг/м³</small></strong><span id="pm25-quality" class="quality-chip small">—</span></article>
|
||
<article class="metric-card glass-tile"><div class="metric-heading"><svg class="ui-icon metric-icon particles" aria-hidden="true"><use href="/ui/static/assets/icons.svg#particles"></use></svg><span>PM10</span></div><strong><span id="pm10">—</span> <small>мкг/м³</small></strong><span id="pm10-quality" class="quality-chip small">—</span></article>
|
||
<article class="metric-card filter-card glass-tile"><div class="metric-heading"><svg class="ui-icon metric-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#filter"></use></svg><span>Фильтр</span></div><strong><span id="filter-remain">—</span> <small>дней осталось</small></strong><div class="filter-line"><div class="meter filter-meter"><i id="filter-progress"></i></div><span id="filter-percent">—</span></div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="bottom-grid">
|
||
<section id="schedule" class="content-section glass-section schedule-section" aria-labelledby="schedule-title">
|
||
<div class="section-title"><div><svg class="ui-icon section-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#clock"></use></svg><h2 id="schedule-title">Расписание</h2></div><div class="schedule-title-tools"><button id="schedule-edit-button" class="schedule-edit-button" type="button"><svg class="ui-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#settings"></use></svg><span>Изменить</span></button><span id="schedule-state" class="pill muted">—</span></div></div>
|
||
<div class="schedule-layout">
|
||
<div class="schedule-times glass-tile">
|
||
<div><span>Текущая точка</span><strong id="current-time">—</strong><small id="current-action">Нет данных</small></div><i></i><div><span>Следующая точка</span><strong id="next-time">—</strong><small id="next-action">Нет данных</small></div>
|
||
</div>
|
||
<div class="schedule-buttons">
|
||
<button id="auto-button" class="schedule-button auto" type="button"><svg class="ui-icon action-symbol" aria-hidden="true"><use href="/ui/static/assets/icons.svg#auto"></use></svg><span><strong>Вернуться в AUTO</strong><small>Отменить ручной режим</small></span></button>
|
||
<button id="pause-button" class="schedule-button pause" type="button"><svg class="ui-icon action-symbol" aria-hidden="true"><use href="/ui/static/assets/icons.svg#pause"></use></svg><span><strong>Пауза расписания</strong><small>Временно приостановить</small></span></button>
|
||
</div>
|
||
</div>
|
||
<div id="mode-banner" class="mode-banner warn"><span id="mode-title">Загрузка состояния</span><small id="mode-detail">Пожалуйста, подождите</small></div>
|
||
</section>
|
||
|
||
<section class="content-section glass-section extras-section" aria-labelledby="extras-title">
|
||
<div class="section-title"><div><svg class="ui-icon section-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#settings"></use></svg><h2 id="extras-title">Дополнительно</h2></div></div>
|
||
<div class="extras-grid">
|
||
<article class="extra-card glass-tile"><svg class="ui-icon extra-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#home"></use></svg><span><small>На улице</small><strong><span id="outside-temp">—</span>°</strong></span></article>
|
||
<article class="extra-card mode-card glass-tile">
|
||
<svg class="ui-icon extra-icon wind" aria-hidden="true"><use href="/ui/static/assets/icons.svg#wind"></use></svg><span><small>Режим работы</small><strong id="mode-name">Приточная вентиляция</strong><em>Подача и очистка воздуха</em></span>
|
||
<div class="segments" role="group" aria-label="Режим забора воздуха"><button id="mode-outside" class="segment" type="button">С улицы</button><button id="mode-recirculation" class="segment" type="button">Рециркуляция</button></div>
|
||
</article>
|
||
</div>
|
||
<div class="micro-settings">
|
||
<span>Модель <strong id="model">—</strong></span><span>Батарея Qingping <strong><span id="battery">—</span>%</strong></span>
|
||
<button id="sound-toggle" class="micro-toggle" type="button" aria-pressed="false">Звук OFF</button><button id="light-toggle" class="micro-toggle" type="button" aria-pressed="false">Свет OFF</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<span id="demo-note" class="demo-note" hidden>Демонстрационный режим — команды не отправляются устройству</span>
|
||
</main>
|
||
<dialog id="schedule-dialog" class="schedule-dialog" aria-labelledby="schedule-dialog-title">
|
||
<form id="schedule-form" class="schedule-editor">
|
||
<header class="editor-header">
|
||
<span class="editor-heading"><svg class="ui-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#clock"></use></svg><span><h2 id="schedule-dialog-title">Редактор расписания</h2><small>Изменения сохраняются в config/schedule.yaml</small></span></span>
|
||
<button id="schedule-close-button" class="editor-close" type="button" aria-label="Закрыть редактор">×</button>
|
||
</header>
|
||
<div class="editor-scroll">
|
||
<label class="schedule-enabled"><input id="schedule-enabled" type="checkbox"><span><strong>Расписание включено</strong><small>Если выключить, автоматические точки применяться не будут</small></span></label>
|
||
|
||
<section class="editor-section" aria-labelledby="days-title">
|
||
<div class="editor-section-title"><span><h3 id="days-title">Дни недели</h3><small>Назначьте каждому дню один из шаблонов</small></span></div>
|
||
<div id="day-assignments" class="day-assignments"></div>
|
||
</section>
|
||
|
||
<section class="editor-section" aria-labelledby="points-title">
|
||
<div class="editor-section-title template-toolbar">
|
||
<span><h3 id="points-title">Точки расписания</h3><small id="template-usage">Выберите шаблон</small></span>
|
||
<label>Шаблон<select id="template-select"></select></label>
|
||
<span class="template-actions"><button id="duplicate-template" type="button">Дублировать</button><button id="delete-template" type="button">Удалить</button></span>
|
||
</div>
|
||
<div id="schedule-points" class="schedule-points"></div>
|
||
<button id="add-schedule-point" class="add-schedule-point" type="button">+ Добавить точку</button>
|
||
</section>
|
||
</div>
|
||
<footer class="editor-footer">
|
||
<span id="schedule-editor-status" class="editor-status" role="status"></span>
|
||
<button id="schedule-cancel-button" class="editor-button secondary" type="button">Отмена</button>
|
||
<button id="schedule-save-button" class="editor-button primary" type="submit">Сохранить расписание</button>
|
||
</footer>
|
||
</form>
|
||
</dialog>
|
||
<script type="module" src="/ui/static/js/panel.js"></script>
|
||
</body>
|
||
</html>
|