Remove popup border, automation simulates linked controls, card resize button

This commit is contained in:
Richard Sauer 2026-04-08 16:28:06 +10:00
parent 57c29b4638
commit 6c24388e8f

View File

@ -160,7 +160,7 @@ body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(
/* Popup */
#popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:500}
#popup-overlay.active{display:flex}
.popup{z-index:501;background:#0d1220;border:1px solid var(--border);border-radius:16px;padding:24px;width:500px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 16px 48px rgba(0,0,0,0.8)}
.popup{z-index:501;background:#0d1220;border:none;border-radius:16px;padding:24px;width:500px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 16px 48px rgba(0,0,0,0.8)}
.popup .title{font-size:24px;color:var(--text2)}
.popup .live{font-size:32px;font-weight:700}
.popup .sp-row{display:flex;align-items:center;gap:20px}
@ -461,6 +461,7 @@ function createCardEl(c) {
// Edit buttons
el.innerHTML += `<div class="edit-overlay" style="position:absolute;top:4px;right:4px;gap:4px">
<button class="edit-btn" onclick="event.stopPropagation();toggleCardSize('${c.id}')" title="Resize">${c.width==='full'?'◧':'◻'}</button>
<button class="edit-btn comment-btn" onclick="event.stopPropagation();openComments('${c.id}','${c.label}')">&#x1F4AC;</button>
<button class="edit-btn" onclick="event.stopPropagation();deleteCard('${c.id}')">&#x2715;</button>
</div>`;
@ -736,12 +737,39 @@ function renameCard(id) {
if (name) { card.label = name; renderCards(); }
}
function toggleCardSize(id) {
const page = layout.pages[currentPage];
const card = page.cards.find(c => c.id === id);
if (!card) return;
card.width = card.width === 'full' ? 'half' : 'full';
renderCards();
}
// ══════════════════════════════════════════════════════
// SIMULATION (PREVIEW MODE)
// ══════════════════════════════════════════════════════
function toggleSim(id) {
if (!simState[id]) simState[id] = {on: false, value: 0};
simState[id].on = !simState[id].on;
// If this is an automation card, activate/deactivate all its rules
const card = findCard(id);
if (card && card.type === 'automation' && card.rules) {
card.rules.forEach(r => {
if (!r.target) return;
if (!simState[r.target]) simState[r.target] = {on: false, value: 0};
if (simState[id].on) {
// Activating: apply all rules
if (r.action === 'on') simState[r.target].on = true;
else if (r.action === 'off') simState[r.target].on = false;
else if (r.action === 'set') { simState[r.target].on = true; simState[r.target].value = r.value || 0; }
} else {
// Deactivating: turn everything off
if (r.action !== 'off') simState[r.target].on = false;
}
});
}
renderCards();
updateSchematicAnimations();
}