v0.4.2
This commit is contained in:
Mateusz Gruszczyński
+167
-35
@@ -16,7 +16,7 @@ const app = {
|
||||
devices: [], zones: [], schedules: [], automations: [], accessTokens: [], settings: null, system: {}, outdoorTemperature: null,
|
||||
token: localStorage.getItem('gree_controller_token') || '', ws: null, wsTimer: null,
|
||||
currentView: 'dashboard', loading: false, language: preferredLanguage, theme: preferredTheme, connectionStatus: 'connecting',
|
||||
languages: [], translations: {}, locales: {},
|
||||
languages: [], translations: {}, locales: {}, historyReadings: [], historyZone: 'all',
|
||||
};
|
||||
|
||||
const $ = (selector, root = document) => root.querySelector(selector);
|
||||
@@ -28,7 +28,8 @@ const tr = (key, params = {}) => {
|
||||
const template = app.translations[app.language]?.[key] ?? app.translations[DEFAULT_LANGUAGE]?.[key] ?? key;
|
||||
return String(template).replace(/\{([a-zA-Z0-9_]+)\}/g, (_, name) => params[name] ?? `{${name}}`);
|
||||
};
|
||||
const fmtTemp = value => Number.isFinite(Number(value)) ? `${Number(value).toFixed(1)}°C` : '--';
|
||||
const fmtTemp = value => value !== null && value !== undefined && value !== '' && Number.isFinite(Number(value)) ? `${Number(value).toFixed(1)}°C` : '--';
|
||||
const historyNumber = value => value === null || value === undefined || value === '' ? NaN : Number(value);
|
||||
const modeLabel = mode => tr(`mode.${mode}`) === `mode.${mode}` ? mode : tr(`mode.${mode}`);
|
||||
const fanLabel = value => ({0:'fan.auto',1:'fan.low',2:'fan.mediumLow',3:'fan.medium',4:'fan.mediumHigh',5:'fan.high'}[value] ? tr({0:'fan.auto',1:'fan.low',2:'fan.mediumLow',3:'fan.medium',4:'fan.mediumHigh',5:'fan.high'}[value]) : value);
|
||||
const dateTime = value => value ? new Intl.DateTimeFormat(locale(), {dateStyle:'short', timeStyle:'short'}).format(new Date(value)) : '—';
|
||||
@@ -59,7 +60,7 @@ function applyTranslations() {
|
||||
if (connectionLabel) connectionLabel.textContent = tr(`status.${app.connectionStatus}`);
|
||||
renderAll();
|
||||
if (app.currentView === 'logs') loadLogs();
|
||||
if (app.currentView === 'history' && app.devices.length) loadHistory();
|
||||
if (app.currentView === 'history' && app.zones.length) loadHistory();
|
||||
}
|
||||
|
||||
function setLanguage(language) {
|
||||
@@ -340,8 +341,12 @@ function fillSelects() {
|
||||
if (zoneSelect) { const currentZone = zoneSelect.value; zoneSelect.innerHTML = zoneOptions; if ([...zoneSelect.options].some(o => o.value === currentZone)) zoneSelect.value = currentZone; }
|
||||
const presetZone = $('#schedulePresetZone');
|
||||
if (presetZone) { const currentZone = presetZone.value; presetZone.innerHTML = zoneOptions; if ([...presetZone.options].some(o => o.value === currentZone)) presetZone.value = currentZone; }
|
||||
const history = $('#historyDevice');
|
||||
if (history) { const historyCurrent = history.value; history.innerHTML = deviceOptions; if ([...history.options].some(o => o.value === historyCurrent)) history.value = historyCurrent; }
|
||||
const history = $('#historyZone');
|
||||
if (history) {
|
||||
const historyCurrent = history.value || 'all';
|
||||
history.innerHTML = `<option value="all">${esc(tr('history.allZones'))}</option>${zoneOptions}`;
|
||||
if ([...history.options].some(o => o.value === historyCurrent)) history.value = historyCurrent;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAccessTokens() {
|
||||
@@ -383,7 +388,7 @@ function showView(name) {
|
||||
$$('.view').forEach(view => view.classList.toggle('active', view.dataset.view === name));
|
||||
$$('.bottom-nav button').forEach(button => button.classList.toggle('active', button.dataset.nav === name || (button.dataset.nav === 'more' && ['schedules','automations','settings','logs'].includes(name))));
|
||||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||
if (name === 'history' && app.devices.length) loadHistory();
|
||||
if (name === 'history' && app.zones.length) loadHistory();
|
||||
if (name === 'logs') loadLogs();
|
||||
}
|
||||
|
||||
@@ -492,47 +497,172 @@ function populateAutomation(id) {
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
const deviceId = $('#historyDevice').value;
|
||||
if (!deviceId) return drawChart([]);
|
||||
const zoneId = $('#historyZone')?.value || 'all';
|
||||
const hours = $('#historyHours')?.value || '24';
|
||||
try {
|
||||
const data = await api(`/api/readings?device_id=${encodeURIComponent(deviceId)}&hours=${encodeURIComponent($('#historyHours').value)}&limit=2500`);
|
||||
drawChart(data.readings || []);
|
||||
const data = await api(`/api/history?zone_id=${encodeURIComponent(zoneId)}&hours=${encodeURIComponent(hours)}&limit=12000`);
|
||||
const readings = data.readings || [];
|
||||
app.historyReadings = readings; app.historyZone = zoneId;
|
||||
renderHistorySummary(readings, zoneId);
|
||||
drawHistoryCharts(readings, zoneId);
|
||||
} catch (error) { toast(error.message, true); }
|
||||
}
|
||||
|
||||
function drawChart(readings) {
|
||||
const canvas = $('#historyChart');
|
||||
const HISTORY_COLORS = ['--accent','--info','--warning','--purple','--danger','--teal','--orange','--blue'];
|
||||
|
||||
function cssColor(name, fallback) {
|
||||
const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
return value || fallback;
|
||||
}
|
||||
|
||||
function latestByZone(readings) {
|
||||
const map = new Map();
|
||||
readings.forEach(row => map.set(row.zone_id, row));
|
||||
return map;
|
||||
}
|
||||
|
||||
function renderHistorySummary(readings, zoneId) {
|
||||
const host = $('#historySummary'); if (!host) return;
|
||||
if (!readings.length) {
|
||||
host.innerHTML = `<div class="empty compact"><strong>${esc(tr('history.noData'))}</strong></div>`;
|
||||
return;
|
||||
}
|
||||
if (zoneId === 'all') {
|
||||
const latest = latestByZone(readings);
|
||||
host.innerHTML = app.zones.filter(z => latest.has(z.id)).map(zone => {
|
||||
const row = latest.get(zone.id);
|
||||
return `<div class="history-stat"><small>${esc(zone.name)}</small><strong>${fmtTemp(row.control_temperature)}</strong><span>${esc(tr('history.targetShort'))} ${fmtTemp(row.target_temperature)}</span></div>`;
|
||||
}).join('');
|
||||
return;
|
||||
}
|
||||
const row = readings[readings.length - 1];
|
||||
const cards = [
|
||||
[tr('history.greeSensor'), fmtTemp(row.gree_temperature), tr('history.sensor')],
|
||||
[tr('history.roomSensor'), fmtTemp(row.external_temperature), tr('history.homeAssistant')],
|
||||
[tr('history.controlTemperature'), fmtTemp(row.control_temperature), row.control_source || '—'],
|
||||
[tr('history.comfortTarget'), fmtTemp(row.target_temperature), row.active_preset || '—'],
|
||||
[tr('history.deviceSetpoint'), fmtTemp(row.device_setpoint), (row.mode || '—').toUpperCase()],
|
||||
[tr('history.outdoorTemperature'), fmtTemp(row.outdoor_temperature), tr('history.assist')],
|
||||
];
|
||||
host.innerHTML = cards.map(([label,value,detail]) => `<div class="history-stat"><small>${esc(label)}</small><strong>${esc(value)}</strong><span>${esc(detail)}</span></div>`).join('');
|
||||
}
|
||||
|
||||
function timeLabel(ts, hours) {
|
||||
const options = Number(hours) > 48 ? {day:'2-digit', month:'2-digit', hour:'2-digit'} : {hour:'2-digit', minute:'2-digit'};
|
||||
return new Date(ts).toLocaleString(locale(), options);
|
||||
}
|
||||
|
||||
function prepareCanvas(canvas, height) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const width = Math.max(680, Math.floor(rect.width || 680));
|
||||
const height = 340;
|
||||
const width = Math.max(720, Math.floor(rect.width || 720));
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = width * dpr; canvas.height = height * dpr;
|
||||
canvas.style.width = `${width}px`; canvas.style.height = `${height}px`;
|
||||
const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr);
|
||||
const styles = getComputedStyle(document.documentElement);
|
||||
const text = styles.getPropertyValue('--muted').trim(), grid = styles.getPropertyValue('--grid').trim(), indoor = styles.getPropertyValue('--accent').trim(), target = styles.getPropertyValue('--warning').trim();
|
||||
const ctx = canvas.getContext('2d'); ctx.setTransform(dpr,0,0,dpr,0,0);
|
||||
ctx.clearRect(0,0,width,height);
|
||||
const pad = {left:52,right:20,top:22,bottom:40};
|
||||
if (!readings.length) { ctx.fillStyle = text; ctx.font = '14px system-ui'; ctx.textAlign='center'; ctx.fillText(tr('history.noData'), width/2, height/2); return; }
|
||||
const values = readings.flatMap(r => [r.indoor_temperature, r.target_temperature]).filter(Number.isFinite);
|
||||
let min = Math.floor(Math.min(...values) - 1), max = Math.ceil(Math.max(...values) + 1); if (max-min < 4) { min -= 2; max += 2; }
|
||||
const x = i => pad.left + i / Math.max(1, readings.length-1) * (width-pad.left-pad.right);
|
||||
return {ctx,width,height};
|
||||
}
|
||||
|
||||
function drawEmptyChart(canvas, height=340) {
|
||||
const {ctx,width} = prepareCanvas(canvas,height);
|
||||
ctx.fillStyle = cssColor('--muted','#888'); ctx.font = '13px system-ui'; ctx.textAlign='center';
|
||||
ctx.fillText(tr('history.noData'), width/2, height/2);
|
||||
}
|
||||
|
||||
function drawLineChart(canvas, series, rows, {height=340, minValue=null, maxValue=null, binaryLabels=false}={}) {
|
||||
if (!canvas || !rows.length || !series.length) return drawEmptyChart(canvas, height);
|
||||
const {ctx,width} = prepareCanvas(canvas,height);
|
||||
const text=cssColor('--muted','#888'), grid=cssColor('--grid','#333'), panel=cssColor('--surface','#111');
|
||||
const pad={left:54,right:20,top:20,bottom:42};
|
||||
const allValues=[];
|
||||
series.forEach(s => rows.forEach(r => { const v=s.value(r); if(Number.isFinite(v)) allValues.push(v); }));
|
||||
if (!allValues.length) return drawEmptyChart(canvas,height);
|
||||
let min = minValue == null ? Math.floor(Math.min(...allValues)-1) : minValue;
|
||||
let max = maxValue == null ? Math.ceil(Math.max(...allValues)+1) : maxValue;
|
||||
if (max-min < 2) { min-=1; max+=1; }
|
||||
const firstTs = new Date(rows[0].timestamp).getTime();
|
||||
const lastTs = new Date(rows[rows.length-1].timestamp).getTime();
|
||||
const span = Math.max(1,lastTs-firstTs);
|
||||
const x = row => pad.left + (new Date(row.timestamp).getTime()-firstTs)/span*(width-pad.left-pad.right);
|
||||
const y = value => pad.top + (max-value)/(max-min)*(height-pad.top-pad.bottom);
|
||||
ctx.lineWidth = 1; ctx.font = '11px system-ui'; ctx.fillStyle = text; ctx.strokeStyle = grid;
|
||||
for (let i=0;i<=5;i++) { const value = min+(max-min)*i/5, py=y(value); ctx.beginPath(); ctx.moveTo(pad.left,py); ctx.lineTo(width-pad.right,py); ctx.stroke(); ctx.textAlign='right'; ctx.fillText(`${value.toFixed(1)}°`,pad.left-8,py+4); }
|
||||
const ticks = Math.min(5, readings.length-1);
|
||||
for (let i=0;i<=ticks;i++) { const idx=Math.round(i*(readings.length-1)/Math.max(1,ticks)), px=x(idx); ctx.textAlign='center'; ctx.fillText(new Date(readings[idx].timestamp).toLocaleString(locale(),{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'}),px,height-13); }
|
||||
function line(field, color, dashed=false) {
|
||||
ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=2.3; ctx.setLineDash(dashed?[6,5]:[]); let started=false;
|
||||
readings.forEach((row,index)=>{ const value=Number(row[field]); if(!Number.isFinite(value)) return; if(!started){ctx.moveTo(x(index),y(value));started=true;}else ctx.lineTo(x(index),y(value)); }); ctx.stroke(); ctx.setLineDash([]);
|
||||
ctx.font='10px system-ui'; ctx.fillStyle=text; ctx.strokeStyle=grid; ctx.lineWidth=1;
|
||||
for(let i=0;i<=5;i++){
|
||||
const value=min+(max-min)*i/5, py=y(value);
|
||||
ctx.beginPath();ctx.moveTo(pad.left,py);ctx.lineTo(width-pad.right,py);ctx.stroke();
|
||||
ctx.textAlign='right'; ctx.fillText(binaryLabels ? value.toFixed(0) : `${value.toFixed(1)}°`,pad.left-8,py+3);
|
||||
}
|
||||
line('target_temperature', target, true); line('indoor_temperature', indoor, false);
|
||||
canvas._readings = readings;
|
||||
const ticks=5;
|
||||
for(let i=0;i<=ticks;i++){
|
||||
const idx=Math.min(rows.length-1,Math.round(i*(rows.length-1)/ticks)); const px=x(rows[idx]);
|
||||
ctx.textAlign='center'; ctx.fillText(timeLabel(rows[idx].timestamp,$('#historyHours')?.value),px,height-14);
|
||||
}
|
||||
series.forEach(s => {
|
||||
ctx.beginPath(); ctx.strokeStyle=s.color; ctx.lineWidth=s.width||2; ctx.setLineDash(s.dash||[]);
|
||||
let started=false, prev=null;
|
||||
rows.forEach(row => {
|
||||
const value=s.value(row); if(!Number.isFinite(value)) return;
|
||||
const px=x(row),py=y(value);
|
||||
if(!started||prev===null){ctx.moveTo(px,py);started=true;}
|
||||
else if(s.step){ctx.lineTo(px,y(prev));ctx.lineTo(px,py);} else ctx.lineTo(px,py);
|
||||
prev=value;
|
||||
});
|
||||
ctx.stroke(); ctx.setLineDash([]);
|
||||
});
|
||||
canvas._history={rows,series};
|
||||
}
|
||||
|
||||
function renderLegend(host, series) {
|
||||
if (!host) return;
|
||||
host.innerHTML=series.map(s=>`<span><i class="legend-line" style="--legend-color:${esc(s.color)}"></i>${esc(s.label)}</span>`).join('');
|
||||
}
|
||||
|
||||
function drawHistoryCharts(readings, zoneId) {
|
||||
const tempCanvas=$('#historyTemperatureChart'), opCanvas=$('#historyOperationChart');
|
||||
if (!readings.length) {
|
||||
drawEmptyChart(tempCanvas,360); drawEmptyChart(opCanvas,260);
|
||||
$('#historyTemperatureLegend').innerHTML=''; $('#historyOperationLegend').innerHTML=''; return;
|
||||
}
|
||||
if (zoneId === 'all') {
|
||||
const zones=app.zones.filter(z=>readings.some(r=>r.zone_id===z.id));
|
||||
const rows=readings;
|
||||
const tempSeries=zones.map((zone,index)=>({
|
||||
label:zone.name,
|
||||
color:cssColor(HISTORY_COLORS[index%HISTORY_COLORS.length],`hsl(${index*67%360} 70% 55%)`),
|
||||
value:r=>r.zone_id===zone.id?historyNumber(r.control_temperature):NaN,
|
||||
}));
|
||||
const outdoorColor=cssColor('--muted-strong','#999');
|
||||
tempSeries.push({label:tr('history.outdoorTemperature'),color:outdoorColor,dash:[6,5],value:r=>historyNumber(r.outdoor_temperature)});
|
||||
drawLineChart(tempCanvas,tempSeries,rows,{height:360}); renderLegend($('#historyTemperatureLegend'),tempSeries);
|
||||
|
||||
const targetSeries=zones.map((zone,index)=>({
|
||||
label:`${zone.name} · ${tr('history.targetShort')}`,
|
||||
color:cssColor(HISTORY_COLORS[index%HISTORY_COLORS.length],`hsl(${index*67%360} 70% 55%)`),
|
||||
dash:[5,4], value:r=>r.zone_id===zone.id?historyNumber(r.target_temperature):NaN,
|
||||
}));
|
||||
drawLineChart(opCanvas,targetSeries,rows,{height:260}); renderLegend($('#historyOperationLegend'),targetSeries);
|
||||
return;
|
||||
}
|
||||
|
||||
const temperatureSeries=[
|
||||
{label:tr('history.greeSensor'),color:cssColor('--accent','#3ecf8e'),value:r=>historyNumber(r.gree_temperature)},
|
||||
{label:tr('history.roomSensor'),color:cssColor('--info','#60a5fa'),value:r=>historyNumber(r.external_temperature)},
|
||||
{label:tr('history.controlTemperature'),color:cssColor('--teal','#2dd4bf'),width:2.8,value:r=>historyNumber(r.control_temperature)},
|
||||
{label:tr('history.comfortTarget'),color:cssColor('--warning','#f59e0b'),dash:[7,5],value:r=>historyNumber(r.target_temperature)},
|
||||
{label:tr('history.deviceSetpoint'),color:cssColor('--purple','#a78bfa'),dash:[3,4],value:r=>historyNumber(r.device_setpoint)},
|
||||
{label:tr('history.outdoorTemperature'),color:cssColor('--muted-strong','#9ca3af'),dash:[2,5],value:r=>historyNumber(r.outdoor_temperature)},
|
||||
];
|
||||
drawLineChart(tempCanvas,temperatureSeries,readings,{height:360}); renderLegend($('#historyTemperatureLegend'),temperatureSeries);
|
||||
|
||||
const operationSeries=[
|
||||
{label:tr('history.fanSpeed'),color:cssColor('--info','#60a5fa'),step:true,value:r=>historyNumber(r.fan_speed)},
|
||||
{label:tr('history.demand'),color:cssColor('--accent','#3ecf8e'),step:true,width:2.4,value:r=>r.demand?4.5:0.5},
|
||||
{label:tr('history.power'),color:cssColor('--warning','#f59e0b'),step:true,dash:[5,4],value:r=>r.power?3.5:0.5},
|
||||
];
|
||||
drawLineChart(opCanvas,operationSeries,readings,{height:260,minValue:0,maxValue:5,binaryLabels:true}); renderLegend($('#historyOperationLegend'),operationSeries);
|
||||
}
|
||||
|
||||
function drawCurrentChartIfVisible() {
|
||||
const canvas = $('#historyChart');
|
||||
if (app.currentView === 'history' && canvas?._readings) drawChart(canvas._readings);
|
||||
if (app.currentView === 'history') drawHistoryCharts(app.historyReadings || [], app.historyZone || 'all');
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
@@ -638,7 +768,8 @@ $('#discoverButton').addEventListener('click', () => {
|
||||
openDialog('discoverDialog');
|
||||
});
|
||||
$('#historyRefresh').addEventListener('click', loadHistory);
|
||||
$('#historyDevice').addEventListener('change', loadHistory);
|
||||
$('#historyZone').addEventListener('change', loadHistory);
|
||||
$('#historyHours').addEventListener('change', loadHistory);
|
||||
$('#historyHours').addEventListener('change', loadHistory);
|
||||
$('#logsRefresh').addEventListener('click', loadLogs);
|
||||
$('#languageSelect').addEventListener('change', event => setLanguage(event.target.value));
|
||||
@@ -768,7 +899,8 @@ $('#haTest').addEventListener('click', async () => {
|
||||
} catch(error){toast(error.message,true);}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => { if (app.currentView === 'history') loadHistory(); });
|
||||
let historyResizeTimer;
|
||||
window.addEventListener('resize', () => { if (app.currentView === 'history') { clearTimeout(historyResizeTimer); historyResizeTimer=setTimeout(drawCurrentChartIfVisible,120); } });
|
||||
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { if (app.theme === 'system') applyTheme(); });
|
||||
if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(()=>{}));
|
||||
|
||||
|
||||
+13
-4
@@ -90,10 +90,10 @@
|
||||
</section>
|
||||
|
||||
<section class="view" data-view="history">
|
||||
<div class="section-heading"><div><span class="eyebrow" data-i18n="history.measurements">Measurements</span><h1 data-i18n="history.title">Temperature history</h1></div></div>
|
||||
<div class="section-heading"><div><span class="eyebrow" data-i18n="history.measurements">Measurements</span><h1 data-i18n="history.title">Climate history</h1></div></div>
|
||||
<div class="panel chart-panel">
|
||||
<div class="chart-toolbar">
|
||||
<select id="historyDevice"></select>
|
||||
<select id="historyZone" aria-label="History zone"></select>
|
||||
<select id="historyHours">
|
||||
<option value="6" data-i18n="history.6h">6 hours</option>
|
||||
<option value="24" selected data-i18n="history.24h">24 hours</option>
|
||||
@@ -102,8 +102,17 @@
|
||||
</select>
|
||||
<button class="secondary" id="historyRefresh" data-i18n="actions.show">Show</button>
|
||||
</div>
|
||||
<div class="chart-wrap"><canvas id="historyChart" width="1000" height="420"></canvas></div>
|
||||
<div class="legend"><span><i class="dot indoor"></i><span data-i18n="common.temperature">Temperature</span></span><span><i class="dot target"></i><span data-i18n="common.target">Target</span></span></div>
|
||||
<div class="history-summary" id="historySummary"></div>
|
||||
</div>
|
||||
<div class="panel chart-panel history-chart-card">
|
||||
<div class="chart-title-row"><div><h3 data-i18n="history.temperatureOverview">Temperature overview</h3><p data-i18n="history.temperatureOverviewHint">GREE, room sensor, control temperature, targets and outdoor temperature.</p></div></div>
|
||||
<div class="chart-wrap"><canvas id="historyTemperatureChart" width="1000" height="420"></canvas></div>
|
||||
<div class="legend" id="historyTemperatureLegend"></div>
|
||||
</div>
|
||||
<div class="panel chart-panel history-chart-card">
|
||||
<div class="chart-title-row"><div><h3 data-i18n="history.operationOverview">Operation overview</h3><p data-i18n="history.operationOverviewHint">Demand, power and fan activity over the same period.</p></div></div>
|
||||
<div class="chart-wrap compact-chart"><canvas id="historyOperationChart" width="1000" height="300"></canvas></div>
|
||||
<div class="legend" id="historyOperationLegend"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
+38
-7
@@ -25,6 +25,12 @@
|
||||
--danger-soft: rgba(248, 113, 113, .10);
|
||||
--warning: #fbbf24;
|
||||
--warning-soft: rgba(251, 191, 36, .10);
|
||||
--info: #60a5fa;
|
||||
--blue: #3b82f6;
|
||||
--teal: #2dd4bf;
|
||||
--purple: #a78bfa;
|
||||
--orange: #fb923c;
|
||||
--muted-strong: #b5b5bd;
|
||||
--backdrop: rgba(0, 0, 0, .68);
|
||||
--grid: rgba(255, 255, 255, .07);
|
||||
--scroll-thumb: #444444;
|
||||
@@ -62,6 +68,12 @@
|
||||
--danger-soft: rgba(220, 95, 95, .08);
|
||||
--warning: #b7791f;
|
||||
--warning-soft: rgba(183, 121, 31, .08);
|
||||
--info: #2563eb;
|
||||
--blue: #2563eb;
|
||||
--teal: #0f9f8f;
|
||||
--purple: #7c3aed;
|
||||
--orange: #c56b21;
|
||||
--muted-strong: #52525b;
|
||||
--backdrop: rgba(23, 23, 23, .32);
|
||||
--grid: rgba(24, 24, 27, .08);
|
||||
--scroll-thumb: #c8ccca;
|
||||
@@ -299,14 +311,27 @@ h3 { margin-bottom: 9px; font-size: 15px; font-weight: 620; letter-spacing: -.01
|
||||
|
||||
.panel { padding: 16px; }
|
||||
.chart-panel { overflow: hidden; }
|
||||
.history-chart-card { margin-top: 12px; }
|
||||
.chart-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
|
||||
.chart-toolbar select { flex: 1; min-width: 140px; }
|
||||
.chart-wrap { position: relative; overflow-x: auto; min-height: 310px; }
|
||||
#historyChart { width: 100%; min-width: 680px; height: 340px; }
|
||||
.legend { display: flex; gap: 16px; margin-top: 9px; color: var(--muted); font-size: 11px; }
|
||||
.legend > span { display: flex; align-items: center; gap: 6px; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
|
||||
.dot.target { background: var(--warning); }
|
||||
.chart-toolbar select { flex: 1; min-width: 160px; }
|
||||
.chart-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
|
||||
.chart-title-row h3 { margin:0 0 4px; font-size:14px; }
|
||||
.chart-title-row p { margin:0; color:var(--muted); font-size:11px; }
|
||||
.history-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
|
||||
.history-stat { min-width:0; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
|
||||
.history-stat small,.history-stat strong,.history-stat span { display:block; }
|
||||
.history-stat small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.history-stat strong { margin-top:4px; color:var(--text); font-size:17px; font-weight:620; }
|
||||
.history-stat span { margin-top:2px; color:var(--muted-2); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.chart-wrap { position: relative; overflow-x: auto; min-height: 310px; scrollbar-width:none; -ms-overflow-style:none; }
|
||||
.chart-wrap::-webkit-scrollbar { display:none; }
|
||||
.chart-wrap.compact-chart { min-height:230px; }
|
||||
#historyTemperatureChart,#historyOperationChart { width:100%; min-width:720px; }
|
||||
#historyTemperatureChart { height:360px; }
|
||||
#historyOperationChart { height:260px; }
|
||||
.legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:9px; color:var(--muted); font-size:10px; }
|
||||
.legend > span { display:flex; align-items:center; gap:6px; }
|
||||
.legend-line { width:16px; height:2px; border-radius:999px; background:var(--legend-color,var(--accent)); }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.form-grid h3, .form-grid hr, .form-grid .wide { grid-column: 1/-1; }
|
||||
@@ -580,3 +605,9 @@ legend { padding: 0 5px; color: var(--muted); font-size: 10px; }
|
||||
.toolbar-select { min-width: 52px; }
|
||||
.theme-select { min-width: 78px; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.history-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
|
||||
.chart-toolbar { display:grid; grid-template-columns:1fr 1fr; }
|
||||
.chart-toolbar button { grid-column:1/-1; }
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const CACHE = 'gree-controller-v041';
|
||||
const CACHE = 'gree-controller-v042';
|
||||
const ASSETS = ['/', '/styles.css', '/app.js', '/favicon.svg', '/manifest.webmanifest', '/lang/index.json', '/lang/en.json'];
|
||||
self.addEventListener('install', event => event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(ASSETS)).then(() => self.skipWaiting())));
|
||||
self.addEventListener('activate', event => event.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(key => key !== CACHE).map(key => caches.delete(key)))).then(() => self.clients.claim())));
|
||||
|
||||
@@ -1,587 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* GREE Controller semantic component layer. This file is the Tailwind build source. */
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #151515;
|
||||
--canvas: #181818;
|
||||
--surface: #1c1c1c;
|
||||
--surface-2: #222222;
|
||||
--surface-3: #282828;
|
||||
--surface-muted: #202020;
|
||||
--input-bg: #181818;
|
||||
--nav-bg: #171717;
|
||||
--dialog-bg: #1c1c1c;
|
||||
--line: #2c2c2c;
|
||||
--border: #2c2c2c;
|
||||
--line-strong: #3a3a3a;
|
||||
--text: #ededed;
|
||||
--text-soft: #d4d4d4;
|
||||
--muted: #a1a1aa;
|
||||
--muted-2: #737373;
|
||||
--accent: #3ecf8e;
|
||||
--accent-strong: #46d99a;
|
||||
--accent-soft: rgba(62, 207, 142, .10);
|
||||
--accent-border: rgba(62, 207, 142, .36);
|
||||
--accent-text: #06281a;
|
||||
--danger: #f87171;
|
||||
--danger-soft: rgba(248, 113, 113, .10);
|
||||
--warning: #fbbf24;
|
||||
--warning-soft: rgba(251, 191, 36, .10);
|
||||
--backdrop: rgba(0, 0, 0, .68);
|
||||
--grid: rgba(255, 255, 255, .07);
|
||||
--scroll-thumb: #444444;
|
||||
--scroll-thumb-hover: #575757;
|
||||
--radius: 8px;
|
||||
--radius-sm: 6px;
|
||||
--control-h: 38px;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--bg: #f8faf9;
|
||||
--canvas: #f8faf9;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f5f6f6;
|
||||
--surface-3: #eef0ef;
|
||||
--surface-muted: #f6f7f7;
|
||||
--input-bg: #ffffff;
|
||||
--nav-bg: #ffffff;
|
||||
--dialog-bg: #ffffff;
|
||||
--line: #e5e7e6;
|
||||
--border: #e5e7e6;
|
||||
--line-strong: #d4d7d5;
|
||||
--text: #1c1c1c;
|
||||
--text-soft: #3f3f46;
|
||||
--muted: #71717a;
|
||||
--muted-2: #a1a1aa;
|
||||
--accent: #24b47e;
|
||||
--accent-strong: #1ea672;
|
||||
--accent-soft: rgba(36, 180, 126, .09);
|
||||
--accent-border: rgba(36, 180, 126, .32);
|
||||
--accent-text: #ffffff;
|
||||
--danger: #dc5f5f;
|
||||
--danger-soft: rgba(220, 95, 95, .08);
|
||||
--warning: #b7791f;
|
||||
--warning-soft: rgba(183, 121, 31, .08);
|
||||
--backdrop: rgba(23, 23, 23, .32);
|
||||
--grid: rgba(24, 24, 27, .08);
|
||||
--scroll-thumb: #c8ccca;
|
||||
--scroll-thumb-hover: #aeb3b0;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { background: var(--bg); }
|
||||
html, body { min-height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button, input, select, textarea { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:disabled { opacity: .48; cursor: wait; }
|
||||
a { color: var(--accent); }
|
||||
::selection { color: var(--text); background: var(--accent-soft); }
|
||||
|
||||
/* Accessible focus treatment in the same restrained style as the rest of the UI. */
|
||||
:where(button, input, select, textarea, summary):focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 54px;
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
.brand { display: flex; align-items: center; min-width: 0; }
|
||||
.brand strong, .brand small { display: block; }
|
||||
.brand strong { color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
|
||||
.brand small { margin-top: 1px; color: var(--muted); font-size: 10px; }
|
||||
.brand.large { margin-bottom: 16px; }
|
||||
.brand.large strong { font-size: 20px; }
|
||||
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
|
||||
.toolbar-select {
|
||||
width: auto;
|
||||
min-width: 58px;
|
||||
min-height: 34px;
|
||||
padding: 6px 28px 6px 9px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
}
|
||||
.theme-select { min-width: 92px; }
|
||||
|
||||
button {
|
||||
min-height: 36px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
color: var(--text-soft);
|
||||
background: var(--surface);
|
||||
font-size: 13px;
|
||||
font-weight: 520;
|
||||
transition: border-color .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease;
|
||||
}
|
||||
button:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
|
||||
button:active { background: var(--surface-3); }
|
||||
.primary {
|
||||
border-color: color-mix(in srgb, var(--accent) 74%, var(--line));
|
||||
color: var(--accent-text);
|
||||
background: var(--accent);
|
||||
font-weight: 650;
|
||||
}
|
||||
.primary:hover { border-color: var(--accent-strong); color: var(--accent-text); background: var(--accent-strong); }
|
||||
.secondary { border-color: var(--line); color: var(--text-soft); background: var(--surface); font-weight: 540; }
|
||||
.secondary:hover { border-color: var(--line-strong); background: var(--surface-2); }
|
||||
.danger { color: var(--danger); }
|
||||
.danger:hover { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: var(--danger-soft); color: var(--danger); }
|
||||
.compact { min-height: 34px; padding: 7px 11px; }
|
||||
.icon-button {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
}
|
||||
.icon-button:hover { color: var(--text); background: var(--surface-2); }
|
||||
.icon-button svg { width: 16px; height: 16px; }
|
||||
|
||||
main {
|
||||
width: min(1280px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 28px 18px 102px;
|
||||
}
|
||||
.view { display: none; }
|
||||
.view.active { display: block; animation: reveal .12s ease-out; }
|
||||
@keyframes reveal { from { opacity: .65; transform: translateY(2px); } }
|
||||
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
h1 { margin-bottom: 7px; font-size: clamp(25px, 5vw, 34px); line-height: 1.08; font-weight: 620; letter-spacing: -.035em; }
|
||||
h2 { margin-bottom: 0; font-size: clamp(20px, 4vw, 25px); line-height: 1.15; font-weight: 610; letter-spacing: -.025em; }
|
||||
h3 { margin-bottom: 9px; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
|
||||
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.lead { max-width: 760px; color: var(--muted); font-size: 13px; line-height: 1.6; }
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
min-height: 154px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
}
|
||||
.hero::after { display: none; }
|
||||
.hero h1 { margin: 4px 0 7px; }
|
||||
.hero p { margin: 0; color: var(--muted); font-size: 13px; }
|
||||
.hero-temp { z-index: 1; white-space: nowrap; color: var(--text); font-size: clamp(48px, 9vw, 68px); font-weight: 310; line-height: 1; letter-spacing: -.065em; }
|
||||
.hero-temp small { margin-left: 4px; color: var(--muted); font-size: .28em; font-weight: 550; letter-spacing: 0; }
|
||||
|
||||
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 28px; }
|
||||
.metric { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
|
||||
.metric span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
|
||||
.metric strong { color: var(--text); font-size: 21px; font-weight: 590; letter-spacing: -.025em; }
|
||||
|
||||
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 8px 0 14px; }
|
||||
.section-heading > div { min-width: 0; }
|
||||
.device-grid, .list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 10px; }
|
||||
.device-card, .panel, .list-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
|
||||
.device-card { overflow: hidden; padding: 16px; }
|
||||
.device-card.off { opacity: .78; }
|
||||
.device-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.device-title { min-width: 0; }
|
||||
.device-title h3 { overflow: hidden; margin: 0 0 3px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
|
||||
.device-title p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
|
||||
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
|
||||
.status.online::before { background: var(--accent); }
|
||||
.power-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--muted);
|
||||
background: var(--surface-2);
|
||||
font-size: 17px;
|
||||
}
|
||||
.power-button.on { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }
|
||||
|
||||
.temperature-control { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 0 14px; }
|
||||
.temperature-control button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-soft);
|
||||
background: var(--surface);
|
||||
font-size: 18px;
|
||||
}
|
||||
.target-temp { min-width: 100px; text-align: center; color: var(--text); font-size: 42px; font-weight: 320; line-height: 1; letter-spacing: -.055em; }
|
||||
.target-temp small { margin-left: 3px; color: var(--muted); font-size: 13px; font-weight: 540; }
|
||||
.current-line { display: flex; justify-content: center; gap: 6px; margin: -6px 0 15px; color: var(--muted); font-size: 11px; }
|
||||
.current-line strong { color: var(--text-soft); font-weight: 560; }
|
||||
|
||||
.mode-row, .fan-row, .preset-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
overflow-x: auto;
|
||||
padding: 2px 0 8px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.mode-row::-webkit-scrollbar, .fan-row::-webkit-scrollbar, .preset-row::-webkit-scrollbar { display: none; }
|
||||
.mode-row button, .fan-row button, .preset-row button {
|
||||
flex: 1 0 auto;
|
||||
min-width: 56px;
|
||||
min-height: 32px;
|
||||
padding: 6px 9px;
|
||||
border-color: var(--line);
|
||||
color: var(--muted);
|
||||
background: var(--surface-2);
|
||||
font-size: 11px;
|
||||
font-weight: 540;
|
||||
}
|
||||
.mode-row button.active, .fan-row button.active, .preset-row button.active {
|
||||
border-color: var(--accent-border);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
font-weight: 620;
|
||||
}
|
||||
.device-toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 2px; }
|
||||
.device-toggles button { min-height: 32px; padding: 6px 5px; color: var(--muted); background: var(--surface-2); font-size: 10px; }
|
||||
.device-toggles button.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }
|
||||
.card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
|
||||
.card-footer small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.card-menu { display: flex; gap: 3px; }
|
||||
.card-menu button { min-height: 28px; padding: 5px 7px; border-color: transparent; color: var(--muted); background: transparent; font-size: 10px; }
|
||||
.card-menu button:hover { border-color: var(--line); color: var(--text); background: var(--surface-2); }
|
||||
|
||||
.list-card { padding: 15px; }
|
||||
.list-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.list-card h3 { margin: 0 0 4px; color: var(--text); font-size: 15px; }
|
||||
.list-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
|
||||
.badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 10px; font-weight: 550; }
|
||||
.badge.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }
|
||||
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 13px; }
|
||||
.card-stat { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
|
||||
.card-stat small, .card-stat strong { display: block; }
|
||||
.card-stat small { margin-bottom: 4px; color: var(--muted); font-size: 9px; }
|
||||
.card-stat strong { color: var(--text-soft); font-size: 13px; font-weight: 590; }
|
||||
.empty { grid-column: 1/-1; padding: 34px 22px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); background: color-mix(in srgb, var(--surface) 50%, transparent); text-align: center; }
|
||||
.empty strong { display: block; margin-bottom: 6px; color: var(--text); }
|
||||
.empty.compact { padding: 16px; }
|
||||
|
||||
.panel { padding: 16px; }
|
||||
.chart-panel { overflow: hidden; }
|
||||
.chart-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
|
||||
.chart-toolbar select { flex: 1; min-width: 140px; }
|
||||
.chart-wrap { position: relative; overflow-x: auto; min-height: 310px; }
|
||||
#historyChart { width: 100%; min-width: 680px; height: 340px; }
|
||||
.legend { display: flex; gap: 16px; margin-top: 9px; color: var(--muted); font-size: 11px; }
|
||||
.legend > span { display: flex; align-items: center; gap: 6px; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
|
||||
.dot.target { background: var(--warning); }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.form-grid h3, .form-grid hr, .form-grid .wide { grid-column: 1/-1; }
|
||||
.form-grid h3 { margin: 2px 0 0; }
|
||||
.form-grid hr, .dialog-form hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
|
||||
label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 550; }
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
outline: 0;
|
||||
padding: 8px 10px;
|
||||
color: var(--text);
|
||||
background: var(--input-bg);
|
||||
font-size: 13px;
|
||||
transition: border-color .12s ease, background-color .12s ease;
|
||||
}
|
||||
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
|
||||
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); }
|
||||
input::placeholder, textarea::placeholder { color: var(--muted-2); }
|
||||
.check { display: flex; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; min-height: 36px; }
|
||||
.check input { width: 16px; min-height: 16px; accent-color: var(--accent); }
|
||||
.form-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }
|
||||
.system-panel { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
|
||||
.system-panel strong { color: var(--text-soft); font-weight: 580; }
|
||||
|
||||
.log-list { display: grid; gap: 0; padding: 0; overflow: hidden; }
|
||||
.log-row { display: grid; grid-template-columns: 78px 150px 1fr; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
|
||||
.log-row:last-child { border-bottom: 0; }
|
||||
.log-row:hover { background: var(--surface-2); }
|
||||
.log-row time, .log-row .kind { color: var(--muted); }
|
||||
.log-row.error .kind { color: var(--danger); }
|
||||
.log-row.warn .kind { color: var(--warning); }
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
.bottom-nav button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 3px;
|
||||
min-height: 50px;
|
||||
padding: 5px 2px;
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bottom-nav button:hover { border-color: transparent; color: var(--text); background: var(--surface-2); }
|
||||
.bottom-nav button span { display: grid; place-items: center; width: 20px; height: 20px; color: currentColor; font-size: 16px; line-height: 1; }
|
||||
.bottom-nav button span svg { width: 18px; height: 18px; stroke-width: 1.6; }
|
||||
.bottom-nav button b { font-weight: 540; }
|
||||
.bottom-nav button.active { color: var(--accent); background: var(--accent-soft); }
|
||||
.desktop-nav-only { display: none !important; }
|
||||
|
||||
/* Dialogs deliberately have no drop shadow: separation comes from border + backdrop. */
|
||||
dialog {
|
||||
width: min(540px, calc(100% - 24px));
|
||||
max-height: min(88vh, 760px);
|
||||
overflow: auto;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
background: var(--dialog-bg);
|
||||
}
|
||||
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
|
||||
.dialog-form { display: grid; gap: 12px; padding: 17px; }
|
||||
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.dialog-head h2 { margin: 0; font-size: 18px; }
|
||||
.dialog-head button { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-color: transparent; color: var(--muted); background: transparent; font-size: 21px; }
|
||||
.dialog-head button:hover { border-color: var(--line); color: var(--text); background: var(--surface-2); }
|
||||
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
|
||||
#externalSensorFields { display: grid; gap: 10px; }
|
||||
.field-note { margin: -3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
|
||||
.sensor-detail { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }
|
||||
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px; }
|
||||
legend { padding: 0 5px; color: var(--muted); font-size: 10px; }
|
||||
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.days label { display: grid; place-items: center; gap: 4px; padding: 6px 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 9px; }
|
||||
.days input { width: 14px; min-height: 14px; accent-color: var(--accent); }
|
||||
.sheet { width: min(500px, calc(100% - 18px)); margin: auto auto 8px; }
|
||||
.sheet .dialog-head { padding: 15px 15px 4px; }
|
||||
.menu-list { display: grid; padding: 7px 9px 10px; }
|
||||
.menu-list button { display: flex; justify-content: space-between; min-height: 42px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 8px; background: transparent; text-align: left; }
|
||||
.menu-list button:hover { background: var(--surface-2); }
|
||||
.menu-list button:last-child { border-bottom: 0; }
|
||||
.auth-dialog { width: min(420px, calc(100% - 30px)); }
|
||||
|
||||
#toast {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
right: 16px;
|
||||
bottom: 82px;
|
||||
max-width: min(380px, calc(100% - 32px));
|
||||
transform: translateY(8px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-soft);
|
||||
background: var(--surface-2);
|
||||
transition: .14s ease;
|
||||
font-size: 12px;
|
||||
}
|
||||
#toast.show { transform: translateY(0); opacity: 1; }
|
||||
#toast.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 42%, var(--surface-2)); }
|
||||
|
||||
.token-manager { display: grid; gap: 10px; }
|
||||
.token-list { display: grid; gap: 6px; }
|
||||
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
|
||||
.token-row > div { min-width: 0; display: grid; gap: 2px; }
|
||||
.token-row strong { color: var(--text); font-size: 12px; font-weight: 590; }
|
||||
.token-row small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
|
||||
|
||||
/* Zone quick controls */
|
||||
.zone-quick-control { display: grid; gap: 4px; margin-top: 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
|
||||
.temperature-control.compact { padding: 3px 0 6px; gap: 12px; }
|
||||
.temperature-control.compact button { width: 34px; height: 34px; min-height: 34px; }
|
||||
.target-temp.compact { min-width: 86px; font-size: 29px; }
|
||||
.zone-quick-control .mode-row { padding-bottom: 1px; }
|
||||
|
||||
.discovery-name-list { display: grid; gap: 10px; }
|
||||
.discovery-name-row { display: grid; gap: 7px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
||||
.discovery-name-row:last-child { border-bottom: 0; }
|
||||
.discovery-name-row span { display: grid; gap: 2px; }
|
||||
.discovery-name-row small { color: var(--muted); overflow-wrap: anywhere; }
|
||||
|
||||
/* Quiet themed scrollbars. No bright native tracks in dark mode. */
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
|
||||
*::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--scroll-thumb); background-clip: padding-box; }
|
||||
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
|
||||
|
||||
.house-climate { display: grid; gap: 13px; margin: -12px 0 28px; }
|
||||
.house-climate-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
|
||||
.house-climate-head h3 { margin: 2px 0 3px; font-size: 15px; }
|
||||
.house-climate-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
|
||||
.outside-pill { flex: 0 0 auto; min-width: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: right; }
|
||||
.outside-pill small, .outside-pill strong { display: block; }
|
||||
.outside-pill small { color: var(--muted); font-size: 9px; }
|
||||
.outside-pill strong { margin-top: 2px; color: var(--text); font-size: 16px; font-weight: 590; }
|
||||
.house-mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
|
||||
.house-mode-row button { min-height: 36px; color: var(--muted); background: var(--surface-2); }
|
||||
.house-mode-row button.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); font-weight: 620; }
|
||||
.mode-indicator { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; background: var(--muted-2); }
|
||||
.house-mode-row button[data-value="cool"] .mode-indicator { background: #60a5fa; }
|
||||
.house-mode-row button[data-value="heat"] .mode-indicator { background: var(--warning); }
|
||||
.house-mode-row button.active .mode-indicator { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 9%, transparent); }
|
||||
|
||||
.zone-thermostat { overflow: hidden; }
|
||||
.zone-thermostat.demanding { border-color: var(--accent-border); }
|
||||
.thermostat-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 13px 0 8px; }
|
||||
.thermostat-main > div:first-child { text-align: left; }
|
||||
.thermostat-main > div:last-child { text-align: right; }
|
||||
.thermostat-main small, .thermostat-main strong { display: block; }
|
||||
.thermostat-main small { margin-bottom: 3px; color: var(--muted); font-size: 9px; }
|
||||
.thermostat-main strong { color: var(--text-soft); font-size: 14px; font-weight: 590; }
|
||||
.zone-mode-row { padding-bottom: 4px; }
|
||||
.zone-state-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 1px 0; color: var(--muted); font-size: 10px; }
|
||||
.zone-state-line span:last-child { text-align: right; }
|
||||
.dashboard-zones { margin-bottom: 28px; }
|
||||
|
||||
.schedule-template-panel { display: grid; gap: 11px; margin-bottom: 14px; }
|
||||
.schedule-template-panel h3 { margin-bottom: 3px; }
|
||||
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
|
||||
.profile-editor { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 10px; background: var(--surface-2); }
|
||||
.profile-editor summary { cursor: pointer; color: var(--text-soft); font-weight: 590; font-size: 12px; }
|
||||
.profile-editor[open] summary { margin-bottom: 10px; }
|
||||
.profile-grid { display: grid; grid-template-columns: 90px repeat(3, 1fr); align-items: end; gap: 7px; margin-top: 7px; }
|
||||
.profile-grid > strong { align-self: center; font-size: 11px; }
|
||||
.profile-grid label span { font-size: 9px; }
|
||||
.warning-note { color: var(--warning); }
|
||||
.automation-hint { margin-bottom: 14px; }
|
||||
.automation-hint strong { display: block; margin-bottom: 4px; color: var(--text-soft); font-size: 12px; }
|
||||
.automation-hint p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.topbar { padding-left: 14px; }
|
||||
.brand { width: 176px; flex: 0 0 176px; }
|
||||
.bottom-nav {
|
||||
top: 54px;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-content: start;
|
||||
grid-template-columns: 1fr;
|
||||
width: 190px;
|
||||
padding: 10px 8px;
|
||||
border-top: 0;
|
||||
border-right: 1px solid var(--line);
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
.bottom-nav button {
|
||||
grid-template-columns: 22px 1fr;
|
||||
justify-items: start;
|
||||
place-items: center start;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 7px 9px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
.bottom-nav button span { width: 18px; height: 18px; }
|
||||
.bottom-nav button b { font-size: 12px; }
|
||||
.bottom-nav button.active { color: var(--text); background: var(--surface-2); }
|
||||
.bottom-nav button.active span { color: var(--accent); }
|
||||
.bottom-nav .desktop-nav-only { display: grid !important; }
|
||||
.bottom-nav button[data-nav="more"] { display: none; }
|
||||
main {
|
||||
width: min(1360px, calc(100% - 190px));
|
||||
margin: 0 0 0 190px;
|
||||
padding: 30px 28px 56px;
|
||||
}
|
||||
#toast { bottom: 20px; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.topbar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
|
||||
.top-actions { width: 100%; }
|
||||
.top-actions .primary { margin-left: auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
main { padding: 15px 11px 92px; }
|
||||
.hero { min-height: 142px; padding: 18px; }
|
||||
.hero-temp { font-size: 48px; }
|
||||
.metrics { gap: 6px; }
|
||||
.metric { padding: 11px 9px; }
|
||||
.metric strong { font-size: 18px; }
|
||||
.section-heading { align-items: center; }
|
||||
.section-heading button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.form-grid h3, .form-grid hr, .form-grid .wide { grid-column: auto; }
|
||||
.log-row { grid-template-columns: 62px 1fr; }
|
||||
.log-row .message { grid-column: 1/-1; }
|
||||
.theme-select { min-width: 84px; }
|
||||
.token-row { align-items: stretch; flex-direction: column; }
|
||||
.token-row button { width: 100%; }
|
||||
.house-climate { margin-top: -18px; }
|
||||
.house-climate-head { align-items: flex-start; }
|
||||
.house-climate-head p { max-width: 230px; }
|
||||
.thermostat-main { grid-template-columns: 1fr auto 1fr; gap: 4px; }
|
||||
.thermostat-main .temperature-control.compact { gap: 7px; }
|
||||
.thermostat-main .target-temp.compact { min-width: 70px; font-size: 26px; }
|
||||
.profile-grid { grid-template-columns: 1fr 1fr; }
|
||||
.profile-grid > strong { grid-column: 1/-1; margin-top: 3px; }
|
||||
.zone-state-line { flex-direction: column; gap: 2px; }
|
||||
.zone-state-line span:last-child { text-align: left; }
|
||||
}
|
||||
|
||||
@media (max-width: 410px) {
|
||||
.brand strong { font-size: 12px; }
|
||||
.hero { align-items: flex-start; flex-direction: column; }
|
||||
.hero-temp { align-self: flex-end; margin-top: -12px; }
|
||||
.two { grid-template-columns: 1fr; }
|
||||
.toolbar-select { min-width: 52px; }
|
||||
.theme-select { min-width: 78px; }
|
||||
}
|
||||
Reference in New Issue
Block a user