1536 lines
58 KiB
JavaScript
1536 lines
58 KiB
JavaScript
/* Sternwarte Card · Retro Edition
|
|
* Vintage Maschinen-Bedienpaneel mit echten 7-Segment-Anzeigen,
|
|
* Kippschaltern, Jewel-Lampen, illuminierten Druckknoepfen und
|
|
* analoger Zeigerinstrument-Anzeige. Funktional identisch mit der
|
|
* Standard-Card, aber komplett unabhaengig.
|
|
*/
|
|
|
|
const DEFAULT_ENTITIES = {
|
|
roof: "cover.sternwarte_dach",
|
|
power: "switch.sternwarte_dachsteuerung",
|
|
roofClosed: "binary_sensor.sternwarte_dach_zu",
|
|
roofOpen: "binary_sensor.sternwarte_dach_offen",
|
|
roofMoving: "binary_sensor.sternwarte_dach_bewegt",
|
|
roofStatus: "sensor.sternwarte_dachstatus",
|
|
roofPosition: "sensor.sternwarte_dachposition",
|
|
rain: "binary_sensor.sternwarte_regen",
|
|
wind: "sensor.sternwarte_windgeschwindigkeit",
|
|
scheduleOpen: "datetime.sternwarte_offnen_geplant",
|
|
scheduleClose: "datetime.sternwarte_schliessen_geplant",
|
|
astroLat: 50.2984230,
|
|
astroLon: 11.0481766,
|
|
};
|
|
|
|
const ASTRONOMY_LIB_URL = (() => {
|
|
try { return new URL("./astronomy.browser.min.js", import.meta.url).toString(); }
|
|
catch { return null; }
|
|
})();
|
|
|
|
const MOON_IMAGE_URL = (() => {
|
|
try { return new URL("./moon_small.png", import.meta.url).toString(); }
|
|
catch { return null; }
|
|
})();
|
|
|
|
/* ---------- 7-Segment-SVG ---------- */
|
|
|
|
const SEG_POLYS = {
|
|
a: "6,0 24,0 27,3 24,6 6,6 3,3",
|
|
b: "27,5 30,8 30,20 27,23 24,20 24,8",
|
|
c: "27,29 30,32 30,44 27,47 24,44 24,32",
|
|
d: "6,44 24,44 27,47 24,50 6,50 3,47",
|
|
e: "3,29 6,32 6,44 3,47 0,44 0,32",
|
|
f: "3,5 6,8 6,20 3,23 0,20 0,8",
|
|
g: "6,22 24,22 27,25 24,28 6,28 3,25",
|
|
};
|
|
const SEG_MAP = {
|
|
"0": "abcdef", "1": "bc", "2": "abdeg", "3": "abcdg", "4": "bcfg",
|
|
"5": "acdfg", "6": "acdefg", "7": "abc", "8": "abcdefg", "9": "abcdfg",
|
|
"-": "g", " ": "", "_": "d", "?": "abeg",
|
|
};
|
|
|
|
function seg7(text, opts = {}) {
|
|
const { color = "red", size = 1, pad = 0 } = opts;
|
|
let str = String(text ?? "");
|
|
if (pad > 0 && str.length < pad) str = str.padStart(pad, " ");
|
|
const out = [];
|
|
for (const ch of str) {
|
|
if (ch === ":") {
|
|
out.push(`<svg class="d7-colon" viewBox="0 0 10 50" aria-hidden="true">
|
|
<circle cx="5" cy="20" r="3" class="dot"/>
|
|
<circle cx="5" cy="36" r="3" class="dot"/>
|
|
</svg>`);
|
|
continue;
|
|
}
|
|
if (ch === ".") {
|
|
out.push(`<svg class="d7-dot" viewBox="0 0 10 50" aria-hidden="true">
|
|
<circle cx="5" cy="46" r="3" class="dot"/>
|
|
</svg>`);
|
|
continue;
|
|
}
|
|
const lit = SEG_MAP[ch.toUpperCase()] ?? "";
|
|
const polys = Object.entries(SEG_POLYS).map(([name, points]) =>
|
|
`<polygon class="seg${lit.includes(name) ? " on" : ""}" points="${points}"/>`
|
|
).join("");
|
|
out.push(`<svg class="d7" viewBox="0 0 30 50" aria-hidden="true">${polys}</svg>`);
|
|
}
|
|
return `<span class="seg7 col-${color}" style="--d7-size:${size}">${out.join("")}</span>`;
|
|
}
|
|
|
|
/* ---------- Card ---------- */
|
|
|
|
class SternwarteCardRetro extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this._scheduleInputState = {
|
|
open: { draft: "", editing: false, pending: false },
|
|
close: { draft: "", editing: false, pending: false },
|
|
};
|
|
this._pendingRender = false;
|
|
this._astronomyLoadPromise = null;
|
|
this._moonTexture = null;
|
|
this._moonTexturePromise = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._ensureAstronomy();
|
|
this._ensureMoonTexture();
|
|
this._ensureClockTimer();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this._clockTimer) { window.clearInterval(this._clockTimer); this._clockTimer = null; }
|
|
}
|
|
|
|
setConfig(config) {
|
|
this.config = { ...DEFAULT_ENTITIES, ...config };
|
|
if (!this.shadowRoot) this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
set hass(hass) { this._hass = hass; this._ensureClockTimer(); this._requestRender(); }
|
|
|
|
getCardSize() { return 9; }
|
|
getGridOptions() { return { rows: 9, columns: 18, min_rows: 8 }; }
|
|
|
|
_state(id) { return this._hass?.states?.[id]; }
|
|
|
|
_ensureClockTimer() {
|
|
if (this._clockTimer) return;
|
|
this._clockTimer = window.setInterval(() => {
|
|
if (this._hass) this._requestRender();
|
|
}, 1000);
|
|
}
|
|
|
|
_astronomy() { return window.Astronomy || null; }
|
|
|
|
_ensureAstronomy() {
|
|
const a = this._astronomy();
|
|
if (a) return Promise.resolve(a);
|
|
if (this._astronomyLoadPromise) return this._astronomyLoadPromise;
|
|
if (!ASTRONOMY_LIB_URL) return Promise.resolve(null);
|
|
|
|
this._astronomyLoadPromise = new Promise((resolve) => {
|
|
const finish = () => {
|
|
const loaded = this._astronomy();
|
|
if (loaded && this._hass) this._requestRender();
|
|
this._astronomyLoadPromise = null;
|
|
resolve(loaded || null);
|
|
};
|
|
const existing = Array.from(document.querySelectorAll("script"))
|
|
.find((s) => s.src === ASTRONOMY_LIB_URL);
|
|
if (existing) {
|
|
existing.addEventListener("load", finish, { once: true });
|
|
existing.addEventListener("error", finish, { once: true });
|
|
return;
|
|
}
|
|
const s = document.createElement("script");
|
|
s.src = ASTRONOMY_LIB_URL; s.async = true;
|
|
s.addEventListener("load", finish, { once: true });
|
|
s.addEventListener("error", finish, { once: true });
|
|
document.head.appendChild(s);
|
|
});
|
|
return this._astronomyLoadPromise;
|
|
}
|
|
|
|
_ensureMoonTexture() {
|
|
if (this._moonTexture) return Promise.resolve(this._moonTexture);
|
|
if (this._moonTexturePromise) return this._moonTexturePromise;
|
|
if (!MOON_IMAGE_URL) return Promise.resolve(null);
|
|
this._moonTexturePromise = new Promise((resolve) => {
|
|
const img = new Image();
|
|
img.addEventListener("load", () => {
|
|
this._moonTexture = img;
|
|
this._moonTexturePromise = null;
|
|
if (this._hass) this._requestRender();
|
|
resolve(img);
|
|
}, { once: true });
|
|
img.addEventListener("error", () => { this._moonTexturePromise = null; resolve(null); }, { once: true });
|
|
img.src = MOON_IMAGE_URL;
|
|
});
|
|
return this._moonTexturePromise;
|
|
}
|
|
|
|
_requestRender() {
|
|
if (this._isScheduleEditing()) { this._pendingRender = true; return; }
|
|
this._pendingRender = false;
|
|
this.render();
|
|
}
|
|
|
|
_isScheduleEditing() { return Object.values(this._scheduleInputState).some((f) => f.editing); }
|
|
_scheduleFieldState(k) { return this._scheduleInputState[k]; }
|
|
_scheduleInputValue(k, fb) { const f = this._scheduleFieldState(k); return f.draft || this._isoForInput(fb); }
|
|
|
|
_resetScheduleDrafts() {
|
|
for (const f of Object.values(this._scheduleInputState)) {
|
|
f.draft = ""; f.editing = false; f.pending = false;
|
|
}
|
|
}
|
|
|
|
_beginScheduleEdit(k, fb) {
|
|
const f = this._scheduleFieldState(k);
|
|
f.editing = true; f.pending = false;
|
|
if (!f.draft) f.draft = this._isoForInput(fb);
|
|
}
|
|
_updateScheduleDraft(k, v) { const f = this._scheduleFieldState(k); f.draft = v; f.pending = false; }
|
|
_endScheduleEdit(k) {
|
|
const f = this._scheduleFieldState(k); f.editing = false;
|
|
if (!this._isScheduleEditing() && this._pendingRender) this._requestRender();
|
|
}
|
|
_bindScheduleInput(k, id, fb) {
|
|
const i = this.shadowRoot.getElementById(id); if (!i) return;
|
|
i.addEventListener("focus", () => this._beginScheduleEdit(k, fb));
|
|
i.addEventListener("input", (e) => this._updateScheduleDraft(k, e.target.value));
|
|
i.addEventListener("change", (e) => this._updateScheduleDraft(k, e.target.value));
|
|
i.addEventListener("blur", () => this._endScheduleEdit(k));
|
|
}
|
|
|
|
_firstExistingEntityId(ids) {
|
|
for (const id of ids) if (id && this._state(id)) return id;
|
|
return ids.find(Boolean) || null;
|
|
}
|
|
|
|
_scheduleOpenEntityId() {
|
|
return this._firstExistingEntityId([
|
|
this.config.scheduleOpen,
|
|
"datetime.sternwarte_offnen_geplant",
|
|
"datetime.sternwarte_oeffnen_geplant",
|
|
]);
|
|
}
|
|
_scheduleCloseEntityId() {
|
|
return this._firstExistingEntityId([this.config.scheduleClose, "datetime.sternwarte_schliessen_geplant"]);
|
|
}
|
|
_powerEntityId() {
|
|
const c = this.config?.power;
|
|
if (c && this._state(c)) return c;
|
|
const states = this._hass?.states || {};
|
|
const fb = Object.keys(states).find((id) => {
|
|
if (!id.startsWith("switch.")) return false;
|
|
const n = id.toLowerCase();
|
|
const fn = String(states[id]?.attributes?.friendly_name || "").toLowerCase();
|
|
return n.includes("dachsteuer") || (n.includes("sternwarte") && n.includes("power")) || fn.includes("dachsteuerung");
|
|
});
|
|
return fb || c || "switch.sternwarte_dachsteuerung";
|
|
}
|
|
|
|
_call(d, s) { try { Promise.resolve(this._hass.callService(d, s, {})).catch(() => {}); } catch {} }
|
|
_callEntity(d, s, id) {
|
|
if (!id) return;
|
|
try { Promise.resolve(this._hass.callService(d, s, { entity_id: id })).catch(() => {}); } catch {}
|
|
}
|
|
|
|
_bindClick(id, fn) {
|
|
this.shadowRoot.getElementById(id)?.addEventListener("click", (e) => {
|
|
e.preventDefault(); e.stopPropagation(); fn();
|
|
});
|
|
}
|
|
|
|
_showMoreInfo(id) {
|
|
if (!id) return;
|
|
const ev = new Event("hass-more-info", { bubbles: true, composed: true });
|
|
ev.detail = { entityId: id };
|
|
this.dispatchEvent(ev);
|
|
}
|
|
_bindMoreInfo(id, entityId) {
|
|
const el = this.shadowRoot.getElementById(id);
|
|
if (!el || !entityId) return;
|
|
const open = (e) => { e.preventDefault(); e.stopPropagation(); this._showMoreInfo(entityId); };
|
|
el.addEventListener("click", open);
|
|
el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") open(e); });
|
|
}
|
|
|
|
_setDateTime(eid, inputId, key) {
|
|
const i = this.shadowRoot.getElementById(inputId);
|
|
const f = this._scheduleFieldState(key);
|
|
const v = f?.draft || i?.value || "";
|
|
if (!v || !eid) return;
|
|
f.pending = true; f.editing = false; f.draft = v;
|
|
this._hass.callService("datetime", "set_value", { entity_id: eid, datetime: v });
|
|
if (this._pendingRender) this._requestRender();
|
|
}
|
|
|
|
_isoForInput(state) {
|
|
if (!state || !state.state || state.state === "unknown" || state.state === "unavailable") return "";
|
|
const v = new Date(state.state); if (Number.isNaN(v.getTime())) return "";
|
|
const p = (n) => String(n).padStart(2, "0");
|
|
return `${v.getFullYear()}-${p(v.getMonth() + 1)}-${p(v.getDate())}T${p(v.getHours())}:${p(v.getMinutes())}`;
|
|
}
|
|
|
|
_seg7DateTime(state) {
|
|
if (!state || !state.state || state.state === "unknown" || state.state === "unavailable") return "--:--";
|
|
const v = new Date(state.state); if (Number.isNaN(v.getTime())) return "--:--";
|
|
const p = (n) => String(n).padStart(2, "0");
|
|
return `${p(v.getDate())}.${p(v.getMonth() + 1)} ${p(v.getHours())}:${p(v.getMinutes())}`;
|
|
}
|
|
|
|
_roofPositionValue() {
|
|
const v = Number(this._state(this.config.roofPosition)?.state);
|
|
if (Number.isNaN(v)) return null;
|
|
return Math.max(0, Math.min(100, Math.round(v)));
|
|
}
|
|
|
|
_windValue() {
|
|
const w = this._state(this.config.wind);
|
|
const v = Number(w?.state);
|
|
if (Number.isNaN(v)) return { num: null, unit: "km/h", level: 0 };
|
|
let level = 0;
|
|
if (v > 15) level = 2; else if (v > 10) level = 1;
|
|
return { num: Math.round(v), unit: w?.attributes?.unit_of_measurement ?? "km/h", level };
|
|
}
|
|
|
|
/* --- astronomy / moon (unchanged from original) --- */
|
|
|
|
_isMESZ(d) {
|
|
const y = d.getUTCFullYear();
|
|
const lastSunday = (m, h) => {
|
|
const e = new Date(Date.UTC(y, m + 1, 0, h));
|
|
while (e.getUTCDay() !== 0) e.setUTCDate(e.getUTCDate() - 1);
|
|
return e;
|
|
};
|
|
return d >= lastSunday(2, 1) && d < lastSunday(9, 1);
|
|
}
|
|
_astroObserver() {
|
|
const a = this._astronomy(); if (!a) return null;
|
|
const lat = Number(this.config.astroLat), lon = Number(this.config.astroLon);
|
|
if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
|
|
return new a.Observer(lat, lon, 0);
|
|
}
|
|
_astroTimeToUtcHour(t) {
|
|
if (!t) return null;
|
|
const d = t.date instanceof Date ? t.date : null;
|
|
if (!d || Number.isNaN(d.getTime())) return null;
|
|
return d.getUTCHours() + d.getUTCMinutes() / 60 + d.getUTCSeconds() / 3600;
|
|
}
|
|
_calcTwilight(date) {
|
|
const a = this._astronomy(), o = this._astroObserver();
|
|
const empty = { sun: { dawn: null, dusk: null }, civil: { dawn: null, dusk: null }, naut: { dawn: null, dusk: null }, astro: { dawn: null, dusk: null } };
|
|
if (!a || !o) return empty;
|
|
try {
|
|
const body = a.Body?.Sun ?? "Sun";
|
|
const start = new Date(date); start.setHours(0, 0, 0, 0);
|
|
const limit = 2;
|
|
const ev = (alt) => ({
|
|
dawn: this._astroTimeToUtcHour(a.SearchAltitude(body, o, +1, start, limit, alt)),
|
|
dusk: this._astroTimeToUtcHour(a.SearchAltitude(body, o, -1, start, limit, alt)),
|
|
});
|
|
return {
|
|
sun: { dawn: this._astroTimeToUtcHour(a.SearchRiseSet(body, o, +1, start, limit, 0)), dusk: this._astroTimeToUtcHour(a.SearchRiseSet(body, o, -1, start, limit, 0)) },
|
|
civil: ev(-6), naut: ev(-12), astro: ev(-18),
|
|
};
|
|
} catch { return empty; }
|
|
}
|
|
_moonStateAt(d) {
|
|
const a = this._astronomy(), o = this._astroObserver();
|
|
if (!a || !o) return { altitude: -Infinity, illumination: 0, phaseAngle: 0 };
|
|
try {
|
|
const body = a.Body?.Moon ?? "Moon";
|
|
const eq = a.Equator(body, d, o, true, true);
|
|
const hz = a.Horizon(d, o, eq.ra, eq.dec, "normal");
|
|
const ill = a.Illumination(body, d);
|
|
const ph = Number(a.MoonPhase(d)) || 0;
|
|
return {
|
|
altitude: (Number(hz?.altitude) || 0) * Math.PI / 180,
|
|
illumination: Math.max(0, Math.min(1, Number(ill?.phase_fraction) || 0)),
|
|
phaseAngle: ((ph % 360) + 360) % 360,
|
|
};
|
|
} catch { return { altitude: -Infinity, illumination: 0, phaseAngle: 0 }; }
|
|
}
|
|
_moonVisualState() {
|
|
const m = this._moonStateAt(new Date());
|
|
const ph = m.phaseAngle ?? 0;
|
|
const waxing = ph <= 180;
|
|
const r = ph * Math.PI / 180;
|
|
return {
|
|
illumination: Math.max(0, Math.min(1, m.illumination || 0)),
|
|
illuminationPercent: Math.round((m.illumination || 0) * 100),
|
|
waxing, phaseAngle: ph, cosPhase: Math.cos(r),
|
|
};
|
|
}
|
|
_renderMoonPhaseDataUrl(mv, size = 64) {
|
|
const tx = this._moonTexture; if (!tx) return "";
|
|
const c = document.createElement("canvas"); c.width = size; c.height = size;
|
|
const ctx = c.getContext("2d"); if (!ctx) return "";
|
|
const r = size / 2 - 1, x = size / 2, y = size / 2;
|
|
const cp = Number(mv.cosPhase) || 0;
|
|
ctx.save(); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.clip();
|
|
ctx.fillStyle = "rgba(8,10,16,0.96)"; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
|
|
ctx.globalAlpha = 0.98; ctx.drawImage(tx, x - r, y - r, r * 2, r * 2); ctx.globalAlpha = 1;
|
|
ctx.fillStyle = "rgba(8,10,16,0.96)"; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill();
|
|
ctx.save(); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.clip();
|
|
if (mv.illumination >= 0.999) {
|
|
ctx.drawImage(tx, x - r, y - r, r * 2, r * 2);
|
|
} else if (mv.illumination > 0.001) {
|
|
ctx.beginPath();
|
|
for (let i = 0; i <= 72; i++) {
|
|
const t = -r + (2 * r * i) / 72;
|
|
const xr = Math.sqrt(Math.max(0, r * r - t * t));
|
|
const xt = (mv.waxing ? cp : -cp) * xr;
|
|
if (i === 0) ctx.moveTo(x + xt, y + t); else ctx.lineTo(x + xt, y + t);
|
|
}
|
|
for (let i = 72; i >= 0; i--) {
|
|
const t = -r + (2 * r * i) / 72;
|
|
const xr = Math.sqrt(Math.max(0, r * r - t * t));
|
|
ctx.lineTo(x + (mv.waxing ? xr : -xr), y + t);
|
|
}
|
|
ctx.closePath(); ctx.clip();
|
|
ctx.drawImage(tx, x - r, y - r, r * 2, r * 2);
|
|
}
|
|
ctx.restore(); ctx.restore();
|
|
ctx.strokeStyle = "rgba(255,200,80,0.35)"; ctx.lineWidth = 1;
|
|
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.stroke();
|
|
return c.toDataURL("image/png");
|
|
}
|
|
|
|
_astroState() {
|
|
const now = new Date();
|
|
const tw = this._calcTwilight(now);
|
|
const off = this._isMESZ(now) ? 2 : 1;
|
|
const shift = (h) => ((h - 12 + 24) % 24);
|
|
const localize = (e) => e ? { dawn: (e.dawn + off + 24) % 24, dusk: (e.dusk + off + 24) % 24 } : null;
|
|
const lt = { sun: localize(tw.sun), civil: localize(tw.civil), naut: localize(tw.naut), astro: localize(tw.astro) };
|
|
const nowL = shift(now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600);
|
|
const segs = [];
|
|
const colors = { night: "#0a1320", astro: "#23426d", naut: "#3d6aaf", civil: "#b87a3a", day: "#e8b94c" };
|
|
const add = (s, e, k) => {
|
|
if (s === null || e === null) return;
|
|
const ss = shift(s), ee = shift(e);
|
|
if (ee < ss) { segs.push({ start: ss, end: 24, color: colors[k] }); segs.push({ start: 0, end: ee, color: colors[k] }); return; }
|
|
if (ee <= ss) return;
|
|
segs.push({ start: ss, end: ee, color: colors[k] });
|
|
};
|
|
add(0, lt.astro?.dawn, "night");
|
|
add(lt.astro?.dawn, lt.naut?.dawn, "astro");
|
|
add(lt.naut?.dawn, lt.civil?.dawn, "naut");
|
|
add(lt.civil?.dawn, lt.sun?.dawn, "civil");
|
|
add(lt.sun?.dawn, lt.sun?.dusk, "day");
|
|
add(lt.sun?.dusk, lt.civil?.dusk, "civil");
|
|
add(lt.civil?.dusk, lt.naut?.dusk, "naut");
|
|
add(lt.naut?.dusk, lt.astro?.dusk, "astro");
|
|
add(lt.astro?.dusk, 24, "night");
|
|
if (!segs.length) add(0, 24, "night");
|
|
segs.sort((a, b) => a.start - b.start);
|
|
const stops = segs.flatMap((s) => {
|
|
const a = `${(s.start / 24) * 100}%`, b = `${(s.end / 24) * 100}%`;
|
|
return [`${s.color} ${a}`, `${s.color} ${b}`];
|
|
});
|
|
const grad = stops.length ? `linear-gradient(90deg, ${stops.join(", ")})` : colors.night;
|
|
const toLocal = (st) => {
|
|
if (!st?.state || st.state === "unknown" || st.state === "unavailable") return null;
|
|
const v = new Date(st.state); if (Number.isNaN(v.getTime())) return null;
|
|
return shift(v.getHours() + v.getMinutes() / 60);
|
|
};
|
|
return {
|
|
gradient: grad,
|
|
markerLeft: `${(nowL / 24) * 100}%`,
|
|
openMarkerLeft: toLocal(this._state(this._scheduleOpenEntityId())),
|
|
closeMarkerLeft: toLocal(this._state(this._scheduleCloseEntityId())),
|
|
};
|
|
}
|
|
|
|
/* ---------- render ---------- */
|
|
|
|
render() {
|
|
if (!this.shadowRoot || !this._hass) return;
|
|
|
|
const powerEid = this._powerEntityId();
|
|
const powerState = this._state(powerEid)?.state;
|
|
const powerOn = powerState === "on";
|
|
const powerOff = powerState === "off";
|
|
|
|
const rainOn = this._state(this.config.rain)?.state === "on";
|
|
const movingOn = this._state(this.config.roofMoving)?.state === "on";
|
|
const openOn = this._state(this.config.roofOpen)?.state === "on";
|
|
const closedOn = this._state(this.config.roofClosed)?.state === "on";
|
|
|
|
const openSchedEid = this._scheduleOpenEntityId();
|
|
const closeSchedEid = this._scheduleCloseEntityId();
|
|
const openSched = this._state(openSchedEid);
|
|
const closeSched = this._state(closeSchedEid);
|
|
const openInputV = this._scheduleInputValue("open", openSched);
|
|
const closeInputV = this._scheduleInputValue("close", closeSched);
|
|
if (openInputV === this._isoForInput(openSched)) {
|
|
this._scheduleFieldState("open").draft = "";
|
|
this._scheduleFieldState("open").pending = false;
|
|
}
|
|
if (closeInputV === this._isoForInput(closeSched)) {
|
|
this._scheduleFieldState("close").draft = "";
|
|
this._scheduleFieldState("close").pending = false;
|
|
}
|
|
|
|
const pos = this._roofPositionValue();
|
|
const wind = this._windValue();
|
|
const moonV = this._moonVisualState();
|
|
const moonImg = this._renderMoonPhaseDataUrl(moonV, 96);
|
|
const astro = this._astroState();
|
|
|
|
let openDis, closeDis, stopDis;
|
|
if (!powerOn) { openDis = closeDis = stopDis = true; }
|
|
else if (movingOn) { openDis = closeDis = true; stopDis = false; }
|
|
else if (openOn && !closedOn) { openDis = true; closeDis = false; stopDis = true; }
|
|
else if (closedOn && !openOn) { openDis = false; closeDis = true; stopDis = true; }
|
|
else if (closedOn && openOn) { openDis = closeDis = true; stopDis = false; }
|
|
else { openDis = closeDis = stopDis = false; }
|
|
|
|
const now = new Date();
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
const timeStr = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
|
|
const dateStr = `${pad(now.getDate())}.${pad(now.getMonth() + 1)}.${String(now.getFullYear()).slice(-2)}`;
|
|
|
|
/* analog gauge for roof position */
|
|
const gaugeAngle = pos === null ? -135 : -135 + (pos / 100) * 270;
|
|
const positionStr = pos === null ? " --" : String(pos).padStart(3, " ");
|
|
const windStr = wind.num === null ? " --" : String(wind.num).padStart(3, " ");
|
|
const moonStr = String(moonV.illuminationPercent).padStart(3, " ");
|
|
|
|
/* status string for main display */
|
|
let statusStr = "READY";
|
|
if (!powerOn && powerOff) statusStr = " STBY";
|
|
else if (movingOn) statusStr = " RUN ";
|
|
else if (openOn && !closedOn) statusStr = "OPEN ";
|
|
else if (closedOn && !openOn) statusStr = "SHUT ";
|
|
else if (rainOn) statusStr = "RAIN ";
|
|
|
|
const css = this._renderStyles();
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>${css}</style>
|
|
<ha-card>
|
|
<div class="console">
|
|
<div class="rivets r-tl"></div><div class="rivets r-tr"></div>
|
|
<div class="rivets r-bl"></div><div class="rivets r-br"></div>
|
|
|
|
<header class="header">
|
|
<div class="dymo">SONNENWEG OBSERVATORY · DOME CONTROL UNIT MK−II</div>
|
|
<div class="header-right">
|
|
<div class="serial">SER. № 1966−A</div>
|
|
<div class="pwr-led ${powerOn ? "on" : powerOff ? "off" : "unk"}" title="${powerState ?? "unbekannt"}"></div>
|
|
</div>
|
|
</header>
|
|
|
|
${rainOn ? `
|
|
<div class="alarm-strip">
|
|
<span class="alarm-lamp"></span>
|
|
<span class="alarm-text">⚠ REGEN ERKANNT · DACH GESPERRT ⚠</span>
|
|
<span class="alarm-lamp"></span>
|
|
</div>
|
|
` : ""}
|
|
|
|
<section class="row row-displays">
|
|
<!-- Status panel: 7-seg readouts -->
|
|
<div class="bezel display-bezel">
|
|
<div class="bezel-label">PRIMARY READOUT</div>
|
|
<div class="display-grid">
|
|
<div class="seg-row">
|
|
<span class="seg-cap">UHR</span>
|
|
${seg7(timeStr, { color: "red", size: 0.75 })}
|
|
</div>
|
|
<div class="seg-row">
|
|
<span class="seg-cap">DAT</span>
|
|
${seg7(dateStr, { color: "amber", size: 0.55 })}
|
|
</div>
|
|
<div class="seg-row">
|
|
<span class="seg-cap">POS</span>
|
|
${seg7(positionStr, { color: "red", size: 0.75 })}
|
|
<span class="seg-unit">%</span>
|
|
</div>
|
|
<div class="seg-row">
|
|
<span class="seg-cap">WND</span>
|
|
${seg7(windStr, { color: wind.level === 2 ? "red" : wind.level === 1 ? "amber" : "green", size: 0.75 })}
|
|
<span class="seg-unit">${wind.unit}</span>
|
|
</div>
|
|
<div class="seg-row">
|
|
<span class="seg-cap">MND</span>
|
|
${seg7(moonStr, { color: "amber", size: 0.55 })}
|
|
<span class="seg-unit">%</span>
|
|
</div>
|
|
<div class="seg-row status-row">
|
|
<span class="seg-cap">STA</span>
|
|
${seg7(statusStr, { color: powerOn ? "green" : "amber", size: 0.55 })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicator lamps + analog gauge column -->
|
|
<div class="col-stack">
|
|
<div class="bezel lamp-bezel">
|
|
<div class="bezel-label">DOME STATUS</div>
|
|
<div class="lamps">
|
|
${this._jewel("DACH ZU", "green", closedOn)}
|
|
${this._jewel("OFFEN", "green", openOn)}
|
|
${this._jewel("BEWEGT", "amber", movingOn, true)}
|
|
${this._jewel("REGEN", "red", rainOn, true)}
|
|
${this._jewel("POWER", "white", powerOn)}
|
|
${this._jewel("FEHLER", "red", powerState === undefined || powerState === "unavailable")}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bezel gauge-bezel" id="pos-gauge" role="button" tabindex="0" aria-label="Dachposition">
|
|
<div class="bezel-label">POSITION</div>
|
|
<svg class="gauge" viewBox="0 0 200 130" aria-hidden="true">
|
|
<defs>
|
|
<radialGradient id="gFace" cx="50%" cy="60%" r="80%">
|
|
<stop offset="0%" stop-color="#f4ecd2"/>
|
|
<stop offset="60%" stop-color="#e7dab5"/>
|
|
<stop offset="100%" stop-color="#bfae7e"/>
|
|
</radialGradient>
|
|
<linearGradient id="gNeedle" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#1a1a1a"/>
|
|
<stop offset="100%" stop-color="#444"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M10,110 A95,95 0 0 1 190,110 L190,125 L10,125 Z" fill="url(#gFace)" stroke="#3a2c12" stroke-width="1.5"/>
|
|
<!-- arc band -->
|
|
<path d="M30,110 A75,75 0 0 1 170,110" fill="none" stroke="#3a2c12" stroke-width="1"/>
|
|
${this._gaugeTicks()}
|
|
<!-- needle -->
|
|
<g transform="translate(100,110) rotate(${gaugeAngle})">
|
|
<polygon points="0,-72 -3,-4 0,4 3,-4" fill="url(#gNeedle)" stroke="#000" stroke-width="0.4"/>
|
|
<circle r="9" fill="#2b2b2b" stroke="#000" stroke-width="1"/>
|
|
<circle r="3" fill="#888"/>
|
|
</g>
|
|
<text x="100" y="100" text-anchor="middle" font-size="9" font-family="'Special Elite',serif" fill="#3a2c12" letter-spacing="2">DOME %</text>
|
|
<text x="35" y="118" text-anchor="middle" font-size="9" font-family="'Special Elite',serif" fill="#3a2c12">0</text>
|
|
<text x="100" y="40" text-anchor="middle" font-size="9" font-family="'Special Elite',serif" fill="#3a2c12">50</text>
|
|
<text x="165" y="118" text-anchor="middle" font-size="9" font-family="'Special Elite',serif" fill="#3a2c12">100</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Moon scope -->
|
|
<div class="bezel moon-bezel" id="moon-scope">
|
|
<div class="bezel-label">MOON SCOPE</div>
|
|
<div class="scope">
|
|
<div class="scope-glass">
|
|
${moonImg ? `<img class="moon-img" src="${moonImg}" alt="Mond">` : `<div class="moon-img placeholder"></div>`}
|
|
<div class="scope-cross"></div>
|
|
</div>
|
|
</div>
|
|
<div class="scope-readout">
|
|
${seg7(moonStr, { color: "amber", size: 0.5 })}
|
|
<span class="seg-unit">% ILL</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Twilight strip chart -->
|
|
<section class="bezel twilight-bezel">
|
|
<div class="bezel-label">DIURNAL CHART · 12 → 12</div>
|
|
<div class="strip">
|
|
<div class="strip-paper" style="background:${astro.gradient}"></div>
|
|
<div class="strip-grid"></div>
|
|
${astro.openMarkerLeft === null ? "" : `<div class="strip-mark open" style="left:${(astro.openMarkerLeft / 24) * 100}%" title="Öffnen geplant"></div>`}
|
|
${astro.closeMarkerLeft === null ? "" : `<div class="strip-mark close" style="left:${(astro.closeMarkerLeft / 24) * 100}%" title="Schließen geplant"></div>`}
|
|
<div class="strip-now" style="left:${astro.markerLeft}"></div>
|
|
<div class="strip-ticks">
|
|
<span style="left:0%">12</span>
|
|
<span style="left:25%">18</span>
|
|
<span style="left:50%">00</span>
|
|
<span style="left:75%">06</span>
|
|
<span style="left:100%">12</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Master power toggle + push buttons -->
|
|
<section class="row row-controls">
|
|
<div class="bezel toggle-bezel">
|
|
<div class="bezel-label">MASTER POWER</div>
|
|
<div class="toggle-area">
|
|
<div class="guard ${powerOn ? "lifted" : ""}"></div>
|
|
<div class="toggle ${powerOn ? "up" : "down"}" id="power-toggle" role="switch" aria-checked="${powerOn}" tabindex="0" title="Dachsteuerung umschalten">
|
|
<div class="toggle-frame">
|
|
<div class="toggle-base"></div>
|
|
<div class="toggle-handle">
|
|
<div class="toggle-tip"></div>
|
|
</div>
|
|
<div class="toggle-marks">
|
|
<span class="mk top">EIN</span>
|
|
<span class="mk bot">AUS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="power-stat">
|
|
${seg7(powerOn ? " ON" : powerOff ? "OFF" : "---", { color: powerOn ? "green" : "red", size: 0.5 })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bezel buttons-bezel">
|
|
<div class="bezel-label">DOME COMMAND</div>
|
|
<div class="buttons">
|
|
<button type="button" class="pbtn pbtn-green" id="open-btn" ${openDis ? "disabled" : ""}>
|
|
<span class="pbtn-cap">ÖFFNEN</span>
|
|
</button>
|
|
<button type="button" class="pbtn pbtn-mushroom" id="stop-btn" ${stopDis ? "disabled" : ""}>
|
|
<span class="pbtn-cap">STOP</span>
|
|
</button>
|
|
<button type="button" class="pbtn pbtn-amber" id="close-btn" ${closeDis ? "disabled" : ""}>
|
|
<span class="pbtn-cap">SCHLIESSEN</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Schedule programmer -->
|
|
<section class="bezel sched-bezel">
|
|
<div class="bezel-label">SCHEDULE PROGRAMMER</div>
|
|
<div class="sched-grid">
|
|
<div class="sched-row">
|
|
<span class="sched-cap">ÖFFNEN</span>
|
|
<div class="sched-readout">${seg7(this._seg7DateTime(openSched), { color: "amber", size: 0.45 })}</div>
|
|
<input id="open-schedule-input" type="datetime-local" value="${openInputV}">
|
|
<button type="button" class="kbtn" id="open-schedule-btn">SET</button>
|
|
</div>
|
|
<div class="sched-row">
|
|
<span class="sched-cap">SCHLIESSEN</span>
|
|
<div class="sched-readout">${seg7(this._seg7DateTime(closeSched), { color: "amber", size: 0.45 })}</div>
|
|
<input id="close-schedule-input" type="datetime-local" value="${closeInputV}">
|
|
<button type="button" class="kbtn" id="close-schedule-btn">SET</button>
|
|
</div>
|
|
<div class="sched-actions">
|
|
<button type="button" class="kbtn kbtn-secondary" id="nautical-btn">NAUTISCH</button>
|
|
<button type="button" class="kbtn kbtn-secondary" id="clear-schedule-btn">LÖSCHEN</button>
|
|
<button type="button" class="kbtn kbtn-info" id="wind-btn">WIND DETAIL</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<span>SONNENWEG · SCHWARZENBACH AM WALD</span>
|
|
<span>50.298° N · 11.048° E</span>
|
|
<span>SW−CTRL/2.0 — RETRO PANEL</span>
|
|
</footer>
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
|
|
this._bindClick("open-btn", () => this._callEntity("cover", "open_cover", this.config.roof));
|
|
this._bindClick("stop-btn", () => this._callEntity("cover", "stop_cover", this.config.roof));
|
|
this._bindClick("close-btn", () => this._callEntity("cover", "close_cover", this.config.roof));
|
|
this._bindClick("nautical-btn", () => this._call("sternwarte", "set_nautical_schedule"));
|
|
this._bindClick("clear-schedule-btn", () => {
|
|
this._resetScheduleDrafts();
|
|
this._call("sternwarte", "clear_schedule");
|
|
this._requestRender();
|
|
});
|
|
this._bindClick("open-schedule-btn", () => this._setDateTime(openSchedEid, "open-schedule-input", "open"));
|
|
this._bindClick("close-schedule-btn", () => this._setDateTime(closeSchedEid, "close-schedule-input", "close"));
|
|
this._bindMoreInfo("wind-btn", this.config.wind);
|
|
this._bindMoreInfo("pos-gauge", this.config.roofPosition);
|
|
this._bindMoreInfo("moon-scope", this.config.roofStatus);
|
|
this._bindScheduleInput("open", "open-schedule-input", openSched);
|
|
this._bindScheduleInput("close", "close-schedule-input", closeSched);
|
|
|
|
/* power toggle */
|
|
const tog = this.shadowRoot.getElementById("power-toggle");
|
|
if (tog) {
|
|
const flip = () => {
|
|
const svc = powerOn ? "turn_off" : "turn_on";
|
|
this._callEntity("switch", svc, powerEid);
|
|
};
|
|
tog.addEventListener("click", (e) => { e.preventDefault(); flip(); });
|
|
tog.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); flip(); }
|
|
});
|
|
}
|
|
}
|
|
|
|
_jewel(label, color, on, blink = false) {
|
|
return `
|
|
<div class="jewel">
|
|
<div class="jewel-bezel">
|
|
<div class="jewel-lens lens-${color} ${on ? "on" : "off"} ${blink && on ? "blink" : ""}"></div>
|
|
</div>
|
|
<div class="jewel-label">${label}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
_gaugeTicks() {
|
|
let s = "";
|
|
for (let i = 0; i <= 10; i++) {
|
|
const ang = -135 + (i / 10) * 270;
|
|
const major = i % 5 === 0;
|
|
const r1 = 75, r2 = major ? 64 : 69;
|
|
const rad = ang * Math.PI / 180;
|
|
const x1 = 100 + r1 * Math.sin(rad), y1 = 110 - r1 * Math.cos(rad);
|
|
const x2 = 100 + r2 * Math.sin(rad), y2 = 110 - r2 * Math.cos(rad);
|
|
s += `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="#3a2c12" stroke-width="${major ? 1.6 : 0.8}"/>`;
|
|
}
|
|
return s;
|
|
}
|
|
|
|
_renderStyles() {
|
|
return `
|
|
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Share+Tech+Mono&display=swap');
|
|
|
|
:host {
|
|
display: block;
|
|
font-family: 'Share Tech Mono', 'Courier New', monospace;
|
|
}
|
|
ha-card {
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* === overall console === */
|
|
.console {
|
|
position: relative;
|
|
padding: 22px 22px 18px;
|
|
border-radius: 14px;
|
|
color: #f1e4c5;
|
|
background:
|
|
radial-gradient(circle at 30% 20%, rgba(255,235,180,0.06), transparent 60%),
|
|
radial-gradient(circle at 80% 90%, rgba(0,0,0,0.35), transparent 70%),
|
|
repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
|
|
linear-gradient(160deg, #4d5a3e 0%, #3b4731 35%, #2c361f 100%);
|
|
box-shadow:
|
|
inset 0 0 0 2px #1c2210,
|
|
inset 0 0 0 4px #6b7a55,
|
|
inset 0 0 60px rgba(0,0,0,0.5),
|
|
0 8px 24px rgba(0,0,0,0.45);
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
.rivets {
|
|
position: absolute;
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, #f1ebd2 0%, #8a8064 35%, #2a2515 75%, #000 100%);
|
|
box-shadow:
|
|
inset -1px -1px 2px rgba(0,0,0,0.7),
|
|
0 1px 2px rgba(0,0,0,0.6);
|
|
}
|
|
.r-tl { top: 8px; left: 8px; }
|
|
.r-tr { top: 8px; right: 8px; }
|
|
.r-bl { bottom: 8px; left: 8px; }
|
|
.r-br { bottom: 8px; right: 8px; }
|
|
|
|
/* === header / dymo === */
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.dymo {
|
|
font-family: 'Special Elite', 'Courier New', serif;
|
|
font-size: 14px;
|
|
letter-spacing: 0.18em;
|
|
color: #2a200f;
|
|
background:
|
|
repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 2px),
|
|
linear-gradient(180deg, #d8c98a 0%, #bba85f 100%);
|
|
padding: 8px 18px;
|
|
border-radius: 4px;
|
|
border: 1px solid #6b5a25;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.4),
|
|
inset 0 -2px 0 rgba(0,0,0,0.2),
|
|
0 2px 4px rgba(0,0,0,0.45);
|
|
text-shadow: none;
|
|
}
|
|
.header-right {
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.serial {
|
|
font-size: 10px;
|
|
letter-spacing: 0.25em;
|
|
opacity: 0.6;
|
|
font-family: 'Special Elite', serif;
|
|
}
|
|
.pwr-led {
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: #2a0a0a;
|
|
box-shadow:
|
|
inset 0 0 0 2px #1a1a1a,
|
|
inset 0 0 4px rgba(0,0,0,0.8),
|
|
0 0 0 3px #4a3f1f;
|
|
}
|
|
.pwr-led.on {
|
|
background: radial-gradient(circle at 30% 30%, #fff 0%, #6cf06c 40%, #1f8a1f 100%);
|
|
box-shadow:
|
|
inset 0 0 0 2px #1a1a1a,
|
|
inset 0 0 4px rgba(0,0,0,0.4),
|
|
0 0 12px rgba(108,240,108,0.7),
|
|
0 0 0 3px #4a3f1f;
|
|
}
|
|
.pwr-led.off {
|
|
background: radial-gradient(circle at 30% 30%, #ffd9d9 0%, #c43030 50%, #4a0000 100%);
|
|
box-shadow:
|
|
inset 0 0 0 2px #1a1a1a,
|
|
inset 0 0 4px rgba(0,0,0,0.4),
|
|
0 0 8px rgba(196,48,48,0.5),
|
|
0 0 0 3px #4a3f1f;
|
|
}
|
|
|
|
/* === alarm strip === */
|
|
.alarm-strip {
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
padding: 8px 14px;
|
|
background:
|
|
repeating-linear-gradient(45deg, #1a1305 0 12px, #5a2c0c 12px 24px);
|
|
border: 2px solid #1a1305;
|
|
border-radius: 4px;
|
|
animation: alarm-flash 1s linear infinite;
|
|
}
|
|
.alarm-text {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
letter-spacing: 0.25em;
|
|
color: #ffeacc;
|
|
}
|
|
.alarm-lamp {
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%, #fff 0%, #ff5a30 50%, #6a1500 100%);
|
|
box-shadow: 0 0 12px rgba(255,90,48,0.9);
|
|
animation: alarm-flash 0.7s linear infinite alternate;
|
|
}
|
|
@keyframes alarm-flash {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.55; }
|
|
}
|
|
|
|
/* === bezels (inset metal panels) === */
|
|
.bezel {
|
|
position: relative;
|
|
padding: 22px 14px 14px;
|
|
border-radius: 6px;
|
|
background:
|
|
repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 2px),
|
|
linear-gradient(160deg, #2a2418 0%, #1b170e 100%);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0,0,0,0.7),
|
|
inset 0 -1px 0 rgba(255,255,255,0.05),
|
|
0 1px 0 rgba(255,255,255,0.06);
|
|
border: 1px solid #0a0805;
|
|
}
|
|
.bezel-label {
|
|
position: absolute;
|
|
top: -8px; left: 12px;
|
|
padding: 2px 8px;
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 10px;
|
|
letter-spacing: 0.22em;
|
|
color: #f1e4c5;
|
|
background: linear-gradient(180deg, #6b7a55 0%, #4d5a3e 100%);
|
|
border: 1px solid #1c2210;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* === rows === */
|
|
.row { display: grid; gap: 14px; margin-bottom: 14px; }
|
|
.row-displays {
|
|
grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr);
|
|
}
|
|
.row-controls {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
|
}
|
|
.col-stack { display: grid; grid-template-rows: auto auto; gap: 14px; }
|
|
|
|
/* === 7-seg === */
|
|
.seg7 {
|
|
display: inline-flex;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
padding: 4px 6px;
|
|
--d7-base-w: 30px;
|
|
--d7-base-h: 50px;
|
|
}
|
|
.d7, .d7-colon, .d7-dot {
|
|
width: calc(var(--d7-base-w) * var(--d7-size, 1));
|
|
height: calc(var(--d7-base-h) * var(--d7-size, 1));
|
|
display: inline-block;
|
|
}
|
|
.seg {
|
|
fill: rgba(0,0,0,0.5);
|
|
opacity: 0.10;
|
|
transition: opacity 80ms linear;
|
|
}
|
|
.seg.on { opacity: 1; }
|
|
.col-red .seg.on {
|
|
fill: #ff2a18;
|
|
filter: drop-shadow(0 0 2px #ff5538) drop-shadow(0 0 4px rgba(255,40,20,0.6));
|
|
}
|
|
.col-amber .seg.on {
|
|
fill: #ffaa1a;
|
|
filter: drop-shadow(0 0 2px #ffc04a) drop-shadow(0 0 4px rgba(255,170,30,0.6));
|
|
}
|
|
.col-green .seg.on {
|
|
fill: #4cff60;
|
|
filter: drop-shadow(0 0 2px #80ff90) drop-shadow(0 0 4px rgba(76,255,96,0.5));
|
|
}
|
|
.col-red .dot { fill: #ff2a18; filter: drop-shadow(0 0 2px #ff5538); }
|
|
.col-amber .dot { fill: #ffaa1a; filter: drop-shadow(0 0 2px #ffc04a); }
|
|
.col-green .dot { fill: #4cff60; filter: drop-shadow(0 0 2px #80ff90); }
|
|
|
|
/* === display panel === */
|
|
.display-bezel {
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
|
|
linear-gradient(160deg, #100a04 0%, #1c130a 100%);
|
|
}
|
|
.display-grid {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.seg-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
background:
|
|
radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 70%),
|
|
#050200;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 0 2px 6px rgba(0,0,0,0.9),
|
|
inset 0 0 0 1px #2a1f0a;
|
|
}
|
|
.seg-cap {
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: #c5a960;
|
|
min-width: 36px;
|
|
}
|
|
.seg-unit {
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 11px;
|
|
letter-spacing: 0.15em;
|
|
color: #c5a960;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* === lamps === */
|
|
.lamp-bezel {
|
|
background:
|
|
repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 4px),
|
|
linear-gradient(160deg, #2c2618 0%, #1b170e 100%);
|
|
}
|
|
.lamps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px 6px;
|
|
}
|
|
.jewel {
|
|
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
}
|
|
.jewel-bezel {
|
|
width: 38px; height: 38px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, #fff 0%, #c0b89a 25%, #5a4f30 70%, #1a1408 100%);
|
|
padding: 4px;
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.4),
|
|
inset 0 -2px 4px rgba(0,0,0,0.6),
|
|
0 2px 4px rgba(0,0,0,0.6);
|
|
}
|
|
.jewel-lens {
|
|
width: 100%; height: 100%;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
.jewel-lens::after {
|
|
content: "";
|
|
position: absolute; top: 4px; left: 6px;
|
|
width: 8px; height: 6px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.45);
|
|
filter: blur(1px);
|
|
}
|
|
.lens-green.off { background: radial-gradient(circle at 35% 35%, #2d4a30 0%, #0c1a0e 70%); }
|
|
.lens-green.on { background: radial-gradient(circle at 35% 35%, #c4ffc8 0%, #4cff60 35%, #1a8a28 100%); box-shadow: 0 0 16px rgba(76,255,96,0.7); }
|
|
.lens-amber.off { background: radial-gradient(circle at 35% 35%, #4a3a14 0%, #1a1408 70%); }
|
|
.lens-amber.on { background: radial-gradient(circle at 35% 35%, #fff5c4 0%, #ffc14a 35%, #b07b10 100%); box-shadow: 0 0 16px rgba(255,193,74,0.7); }
|
|
.lens-red.off { background: radial-gradient(circle at 35% 35%, #4a1414 0%, #1a0808 70%); }
|
|
.lens-red.on { background: radial-gradient(circle at 35% 35%, #ffd0d0 0%, #ff4030 35%, #8a0a0a 100%); box-shadow: 0 0 16px rgba(255,64,48,0.75); }
|
|
.lens-white.off { background: radial-gradient(circle at 35% 35%, #3a3528 0%, #14110a 70%); }
|
|
.lens-white.on { background: radial-gradient(circle at 35% 35%, #fff 0%, #fce8b4 50%, #b08020 100%); box-shadow: 0 0 16px rgba(255,232,180,0.7); }
|
|
.blink { animation: lamp-blink 0.9s linear infinite; }
|
|
@keyframes lamp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
|
|
|
|
.jewel-label {
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 9px;
|
|
letter-spacing: 0.18em;
|
|
color: #d8c98a;
|
|
text-align: center;
|
|
}
|
|
|
|
/* === gauge === */
|
|
.gauge-bezel {
|
|
background:
|
|
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
|
|
linear-gradient(160deg, #1f1a0e 0%, #100c06 100%);
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
.gauge-bezel:focus-visible { box-shadow: inset 0 2px 4px rgba(0,0,0,0.7), 0 0 0 2px #c5a960; }
|
|
.gauge { width: 100%; height: auto; display: block; }
|
|
|
|
/* === moon scope === */
|
|
.moon-bezel {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.scope {
|
|
width: 96px; height: 96px;
|
|
border-radius: 50%;
|
|
padding: 6px;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, #f1ebd2 0%, #8a8064 30%, #2a2515 80%, #000 100%);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255,255,255,0.4),
|
|
inset 0 -3px 6px rgba(0,0,0,0.7),
|
|
0 3px 6px rgba(0,0,0,0.6);
|
|
}
|
|
.scope-glass {
|
|
width: 100%; height: 100%;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #050810;
|
|
box-shadow: inset 0 0 0 2px #1a1408;
|
|
}
|
|
.moon-img {
|
|
width: 100%; height: 100%;
|
|
display: block;
|
|
border-radius: 50%;
|
|
}
|
|
.moon-img.placeholder {
|
|
background: radial-gradient(circle at 30% 30%, #aaa 0%, #444 60%, #111 100%);
|
|
}
|
|
.scope-cross {
|
|
position: absolute; inset: 0;
|
|
background:
|
|
linear-gradient(90deg, transparent 49.5%, rgba(255,200,80,0.18) 49.5% 50.5%, transparent 50.5%),
|
|
linear-gradient(0deg, transparent 49.5%, rgba(255,200,80,0.18) 49.5% 50.5%, transparent 50.5%);
|
|
pointer-events: none;
|
|
}
|
|
.scope-readout {
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
|
|
/* === twilight strip === */
|
|
.twilight-bezel {
|
|
background:
|
|
linear-gradient(160deg, #1f1a0e 0%, #100c06 100%);
|
|
}
|
|
.strip {
|
|
position: relative;
|
|
height: 38px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0,0,0,0.7),
|
|
inset 0 0 0 1px #2a1f0a;
|
|
}
|
|
.strip-paper {
|
|
position: absolute; inset: 0;
|
|
opacity: 0.92;
|
|
}
|
|
.strip-grid {
|
|
position: absolute; inset: 0;
|
|
background:
|
|
repeating-linear-gradient(90deg, transparent 0 calc(100%/24 - 1px), rgba(0,0,0,0.35) calc(100%/24 - 1px) calc(100%/24)),
|
|
repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,0.04) 8px 9px);
|
|
pointer-events: none;
|
|
}
|
|
.strip-mark {
|
|
position: absolute;
|
|
top: -2px; bottom: -2px;
|
|
width: 3px;
|
|
margin-left: -1px;
|
|
z-index: 2;
|
|
box-shadow: 0 0 6px currentColor;
|
|
}
|
|
.strip-mark.open { background: #4cff60; color: rgba(76,255,96,0.8); }
|
|
.strip-mark.close { background: #ffaa1a; color: rgba(255,170,26,0.8); }
|
|
.strip-now {
|
|
position: absolute;
|
|
top: -3px; bottom: -3px;
|
|
width: 4px;
|
|
margin-left: -2px;
|
|
background: #ff2a18;
|
|
box-shadow: 0 0 8px rgba(255,42,24,0.85);
|
|
z-index: 3;
|
|
}
|
|
.strip-ticks {
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
.strip-ticks span {
|
|
position: absolute;
|
|
top: 50%; transform: translate(-50%, -50%);
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.85);
|
|
text-shadow: 0 0 3px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
/* === toggle switch (bat-handle) === */
|
|
.toggle-bezel {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
}
|
|
.toggle-area {
|
|
position: relative;
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
padding-top: 6px;
|
|
}
|
|
.toggle-frame {
|
|
position: relative;
|
|
width: 70px; height: 130px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.toggle-base {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 46px; height: 46px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 30% 30%, #f1ebd2 0%, #8a8064 35%, #1a1408 100%);
|
|
box-shadow:
|
|
inset 0 1px 2px rgba(255,255,255,0.5),
|
|
inset 0 -3px 6px rgba(0,0,0,0.6),
|
|
0 3px 6px rgba(0,0,0,0.6);
|
|
}
|
|
.toggle-base::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, #1a1408 0%, #000 100%);
|
|
box-shadow: inset 0 2px 3px rgba(0,0,0,0.9);
|
|
}
|
|
.toggle-handle {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 14px; height: 70px;
|
|
margin-left: -7px;
|
|
margin-top: -35px;
|
|
transform-origin: 50% 50%;
|
|
transition: transform 220ms cubic-bezier(0.5, 1.6, 0.4, 1);
|
|
}
|
|
.toggle.up .toggle-handle { transform: translateY(-22px) rotate(0deg); }
|
|
.toggle.down .toggle-handle { transform: translateY(22px) rotate(180deg); }
|
|
.toggle-handle::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%; top: 30px;
|
|
width: 10px; height: 40px;
|
|
margin-left: -5px;
|
|
background: linear-gradient(90deg, #4a4a4a 0%, #c8c8c8 35%, #f4f4f4 50%, #c8c8c8 65%, #4a4a4a 100%);
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
}
|
|
.toggle-tip {
|
|
position: absolute;
|
|
left: 50%; top: 0;
|
|
width: 22px; height: 30px;
|
|
margin-left: -11px;
|
|
background:
|
|
radial-gradient(ellipse at 35% 30%, #fff 0%, #d8d8d8 30%, #6a6a6a 70%, #2a2a2a 100%);
|
|
border-radius: 50% 50% 45% 45%;
|
|
box-shadow:
|
|
inset 0 -3px 6px rgba(0,0,0,0.5),
|
|
0 2px 4px rgba(0,0,0,0.6);
|
|
}
|
|
.toggle-marks {
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
.toggle-marks .mk {
|
|
position: absolute;
|
|
left: 50%; transform: translateX(-50%);
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 11px;
|
|
letter-spacing: 0.2em;
|
|
color: #d8c98a;
|
|
}
|
|
.toggle-marks .mk.top { top: 4px; color: #4cff60; }
|
|
.toggle-marks .mk.bot { bottom: 4px; color: #ff6040; }
|
|
.toggle { cursor: pointer; outline: none; }
|
|
.toggle:focus-visible .toggle-base { box-shadow: 0 0 0 3px #c5a960, inset 0 1px 2px rgba(255,255,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.6); }
|
|
|
|
/* guard bracket */
|
|
.guard {
|
|
position: absolute;
|
|
top: -2px; left: 50%; transform: translateX(-50%);
|
|
width: 60px; height: 110px;
|
|
border: 3px solid #c43030;
|
|
border-bottom: none;
|
|
border-radius: 30px 30px 0 0;
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(255,255,255,0.15),
|
|
0 2px 4px rgba(0,0,0,0.5);
|
|
background: transparent;
|
|
pointer-events: none;
|
|
transition: transform 280ms ease;
|
|
z-index: 2;
|
|
}
|
|
.guard.lifted {
|
|
transform: translateX(-50%) translateY(-12px) rotateX(-65deg);
|
|
transform-origin: 50% 100%;
|
|
}
|
|
.power-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
/* === push buttons === */
|
|
.buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
align-items: center;
|
|
justify-items: center;
|
|
padding: 8px 0;
|
|
}
|
|
.pbtn {
|
|
position: relative;
|
|
width: 90px; height: 90px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 11px;
|
|
letter-spacing: 0.2em;
|
|
color: #fff;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.7);
|
|
background:
|
|
radial-gradient(circle at 30% 30%, var(--btn-hi, #fff) 0%, var(--btn-mid, #888) 35%, var(--btn-lo, #222) 100%);
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255,255,255,0.4),
|
|
inset 0 -4px 8px rgba(0,0,0,0.6),
|
|
0 0 0 6px #1c1610,
|
|
0 0 0 7px #6b5a25,
|
|
0 5px 10px rgba(0,0,0,0.6);
|
|
transition: transform 80ms ease, box-shadow 80ms ease;
|
|
}
|
|
.pbtn:active:not(:disabled) {
|
|
transform: translateY(2px);
|
|
box-shadow:
|
|
inset 0 4px 8px rgba(0,0,0,0.6),
|
|
inset 0 -1px 2px rgba(255,255,255,0.2),
|
|
0 0 0 6px #1c1610,
|
|
0 0 0 7px #6b5a25,
|
|
0 2px 4px rgba(0,0,0,0.6);
|
|
}
|
|
.pbtn:disabled {
|
|
cursor: not-allowed;
|
|
filter: grayscale(0.7) brightness(0.55);
|
|
}
|
|
.pbtn-cap {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-weight: 700;
|
|
}
|
|
.pbtn-green {
|
|
--btn-hi: #d8ffd8; --btn-mid: #4cd060; --btn-lo: #0a4a18;
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255,255,255,0.5),
|
|
inset 0 -4px 8px rgba(0,0,0,0.5),
|
|
0 0 0 6px #1c1610,
|
|
0 0 0 7px #6b5a25,
|
|
0 0 18px rgba(76,208,96,0.45),
|
|
0 5px 10px rgba(0,0,0,0.6);
|
|
}
|
|
.pbtn-amber {
|
|
--btn-hi: #fff0c8; --btn-mid: #e69a2a; --btn-lo: #5a3208;
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(255,255,255,0.5),
|
|
inset 0 -4px 8px rgba(0,0,0,0.5),
|
|
0 0 0 6px #1c1610,
|
|
0 0 0 7px #6b5a25,
|
|
0 0 18px rgba(230,154,42,0.45),
|
|
0 5px 10px rgba(0,0,0,0.6);
|
|
}
|
|
.pbtn-mushroom {
|
|
width: 110px; height: 110px;
|
|
--btn-hi: #ffdada; --btn-mid: #d62020; --btn-lo: #4a0606;
|
|
box-shadow:
|
|
inset 0 3px 6px rgba(255,255,255,0.5),
|
|
inset 0 -6px 12px rgba(0,0,0,0.6),
|
|
0 0 0 8px #1c1610,
|
|
0 0 0 9px #c43030,
|
|
0 0 22px rgba(214,32,32,0.55),
|
|
0 6px 12px rgba(0,0,0,0.7);
|
|
}
|
|
.pbtn-mushroom .pbtn-cap {
|
|
font-size: 13px;
|
|
letter-spacing: 0.3em;
|
|
}
|
|
.pbtn-mushroom:disabled {
|
|
filter: grayscale(0.5) brightness(0.6);
|
|
}
|
|
|
|
/* === schedule programmer === */
|
|
.sched-bezel {
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
|
|
linear-gradient(160deg, #1f1a0e 0%, #100c06 100%);
|
|
}
|
|
.sched-grid {
|
|
display: grid; gap: 10px;
|
|
}
|
|
.sched-row {
|
|
display: grid;
|
|
grid-template-columns: 90px minmax(0, 1fr) minmax(150px, 200px) 70px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.sched-cap {
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
color: #c5a960;
|
|
}
|
|
.sched-readout {
|
|
padding: 4px 8px;
|
|
background: #050200;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0,0,0,0.9),
|
|
inset 0 0 0 1px #2a1f0a;
|
|
min-height: 28px;
|
|
display: flex; align-items: center;
|
|
}
|
|
input[type="datetime-local"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 7px 10px;
|
|
border-radius: 3px;
|
|
border: 1px solid #2a1f0a;
|
|
background:
|
|
repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.03) 4px 5px),
|
|
#1a1408;
|
|
color: #f1e4c5;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 13px;
|
|
letter-spacing: 0.05em;
|
|
box-shadow: inset 0 2px 3px rgba(0,0,0,0.6);
|
|
}
|
|
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.85) sepia(1) saturate(2) hue-rotate(-10deg);
|
|
cursor: pointer;
|
|
}
|
|
.kbtn {
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
padding: 9px 12px;
|
|
border: 1px solid #1a1408;
|
|
border-radius: 3px;
|
|
background:
|
|
linear-gradient(180deg, #d8c98a 0%, #a89559 50%, #76632a 100%);
|
|
color: #1a1408;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.5),
|
|
inset 0 -2px 0 rgba(0,0,0,0.25),
|
|
0 2px 3px rgba(0,0,0,0.5);
|
|
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
|
|
transition: transform 80ms ease, box-shadow 80ms ease;
|
|
}
|
|
.kbtn:active {
|
|
transform: translateY(1px);
|
|
box-shadow:
|
|
inset 0 2px 3px rgba(0,0,0,0.4),
|
|
inset 0 -1px 0 rgba(255,255,255,0.15),
|
|
0 1px 1px rgba(0,0,0,0.5);
|
|
}
|
|
.kbtn-secondary {
|
|
background: linear-gradient(180deg, #6b7a55 0%, #4d5a3e 50%, #2c361f 100%);
|
|
color: #f1e4c5;
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
.kbtn-info {
|
|
background: linear-gradient(180deg, #5a8ac4 0%, #3d6aaf 50%, #234783 100%);
|
|
color: #f1e4c5;
|
|
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
.sched-actions {
|
|
display: flex; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* === footer === */
|
|
.footer {
|
|
margin-top: 16px;
|
|
padding-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-family: 'Special Elite', serif;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: rgba(241,228,197,0.55);
|
|
border-top: 1px dashed rgba(241,228,197,0.2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* === responsive === */
|
|
@media (max-width: 880px) {
|
|
.row-displays { grid-template-columns: 1fr; }
|
|
.row-controls { grid-template-columns: 1fr; }
|
|
.lamps { grid-template-columns: repeat(3, 1fr); }
|
|
.sched-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 520px) {
|
|
.console { padding: 16px; }
|
|
.dymo { font-size: 11px; padding: 6px 12px; letter-spacing: 0.12em; }
|
|
.lamps { grid-template-columns: repeat(2, 1fr); }
|
|
.pbtn { width: 72px; height: 72px; font-size: 9px; }
|
|
.pbtn-mushroom { width: 90px; height: 90px; }
|
|
.buttons { gap: 8px; }
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
if (!customElements.get("sternwarte-card-retro")) {
|
|
customElements.define("sternwarte-card-retro", SternwarteCardRetro);
|
|
}
|
|
|
|
window.customCards = window.customCards || [];
|
|
if (!window.customCards.some((c) => c?.type === "sternwarte-card-retro")) {
|
|
window.customCards.push({
|
|
type: "sternwarte-card-retro",
|
|
name: "Sternwarte Card · Retro",
|
|
description: "Vintage Maschinen-Bedienpaneel mit 7-Segment-Anzeigen, Kippschaltern und beleuchteten Druckknöpfen",
|
|
});
|
|
}
|