130 lines
8.2 KiB
HTML
130 lines
8.2 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/widget.css">
|
||
</head>
|
||
<body>
|
||
<div class="ambient" aria-hidden="true"></div>
|
||
<main class="widget" aria-live="polite">
|
||
<header class="widget-header">
|
||
<div class="identity">
|
||
<span class="brand-icon" aria-hidden="true">
|
||
<svg class="ui-icon"><use href="/ui/static/assets/icons.svg#wind"></use></svg>
|
||
</span>
|
||
<span class="identity-copy">
|
||
<span class="title-row"><h1>Tion 4S</h1><span id="connection" class="pill muted">Загрузка</span></span>
|
||
<small>Приточная вентиляция</small>
|
||
</span>
|
||
</div>
|
||
<button id="theme-button" class="theme-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 class="status-row">
|
||
<span id="mode-pill" class="pill muted">—</span>
|
||
<span id="mode-detail" class="mode-detail">Загрузка состояния</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="widget-tile control-card speed-card" aria-labelledby="speed-title">
|
||
<div class="card-title">
|
||
<svg class="ui-icon feature-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#fan"></use></svg>
|
||
<span><h2 id="speed-title">Скорость вентиляции</h2><p id="speed-note">Ступень — из 6</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" class="hero-value value skeleton">0</strong>
|
||
<button class="hero-step primary" data-step="speed" data-delta="1" type="button" aria-label="Увеличить скорость">+</button>
|
||
</div>
|
||
<div id="speed-segments" class="speed-segments" role="group" 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="scale-labels" aria-hidden="true"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
|
||
</section>
|
||
|
||
<section class="widget-tile control-card temperature-card" aria-labelledby="temperature-title">
|
||
<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 id="temperature-title">Целевая температура</h2><p id="heating-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 value"><span id="target-temp" class="skeleton">00</span>°</strong>
|
||
<button class="hero-step primary" data-step="temperature" data-delta="1" type="button" aria-label="Увеличить температуру">+</button>
|
||
</div>
|
||
<input id="temperature-range" class="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>15°</span><span>20°</span><span>25°</span><span>30°</span></div>
|
||
</section>
|
||
|
||
<section class="switch-grid" aria-label="Питание и обогрев">
|
||
<article class="widget-tile switch-card power-card">
|
||
<div class="switch-title">
|
||
<svg class="ui-icon switch-icon green" aria-hidden="true"><use href="/ui/static/assets/icons.svg#power"></use></svg>
|
||
<span><h2>Питание</h2><small id="power-detail">Устройство выключено</small></span>
|
||
</div>
|
||
<button id="power-toggle" class="glass-switch green" type="button" aria-pressed="false">OFF</button>
|
||
</article>
|
||
<article class="widget-tile switch-card heater-card">
|
||
<div class="switch-title">
|
||
<svg class="ui-icon switch-icon orange" aria-hidden="true"><use href="/ui/static/assets/icons.svg#heat"></use></svg>
|
||
<span><h2>Обогрев</h2><small id="heater-detail">Выключен</small></span>
|
||
</div>
|
||
<button id="heater-toggle" class="glass-switch orange" type="button" aria-pressed="false">OFF</button>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="widget-tile info-card air-card" data-air-tone="muted" aria-labelledby="air-title">
|
||
<header class="section-title">
|
||
<span><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></span>
|
||
<button id="air-link" class="open-section" type="button" aria-label="Открыть показатели воздуха в панели">↗</button>
|
||
</header>
|
||
<div class="co2-summary">
|
||
<span class="co2-label">CO₂</span>
|
||
<strong><span id="co2" class="value">—</span> <small>ppm</small></strong>
|
||
<span id="air-label" class="quality-chip muted">Нет данных</span>
|
||
</div>
|
||
<div class="co2-meter" aria-hidden="true"><i id="co2-progress"></i></div>
|
||
<div class="meter-labels" aria-hidden="true"><span>400</span><span>800</span><span>1200</span><span>2000</span></div>
|
||
<div class="mini-metrics">
|
||
<div class="mini-metric">
|
||
<svg class="ui-icon metric-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#thermometer"></use></svg>
|
||
<span><small>Температура</small><strong><span id="room-temp" class="value">—</span>°</strong></span>
|
||
</div>
|
||
<div class="mini-metric">
|
||
<svg class="ui-icon metric-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#drop"></use></svg>
|
||
<span><small>Влажность</small><strong><span id="humidity" class="value">—</span>%</strong></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="widget-tile info-card schedule-card" aria-labelledby="schedule-title">
|
||
<header class="section-title">
|
||
<span><svg class="ui-icon section-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#clock"></use></svg><h2 id="schedule-title">Расписание</h2></span>
|
||
<button id="schedule-link" class="open-section" type="button" aria-label="Открыть расписание в панели">↗</button>
|
||
</header>
|
||
<div class="schedule-times">
|
||
<span><small>Сейчас</small><strong id="current-time" class="value">—</strong></span>
|
||
<i aria-hidden="true"></i>
|
||
<span><small>Следующая точка</small><strong id="next-time" class="value">—</strong></span>
|
||
</div>
|
||
</section>
|
||
|
||
<button id="open-panel" class="open-panel" type="button">
|
||
<svg class="ui-icon" aria-hidden="true"><use href="/ui/static/assets/icons.svg#wind"></use></svg>
|
||
<span>Открыть полную панель</span><b aria-hidden="true">↗</b>
|
||
</button>
|
||
<span id="demo-note" class="demo-note" hidden>Демонстрационный режим — команды не отправляются устройству</span>
|
||
</main>
|
||
<script type="module" src="/ui/static/js/widget.js"></script>
|
||
</body>
|
||
</html>
|