serversdown/terra-view
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

docs: client portal design + milestone plan (M1 live view → M4 full auth) #61

Merged
serversdown merged 27 commits from feat/client-portal into dev 2026-06-11 23:21:53 -04:00
Conversation 0 Commits 27 Files Changed 14
+22 -18
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 505c2e3ca5 - Show all commits
templates/portal/base.html
+18 -14
View File
@@ -48,24 +48,28 @@
--lvl-ok: #34d399; --lvl-warn: #fbbf24; --lvl-bad: #f87171;
--m-lp: #60a5fa; --m-lmax: #f87171; --m-l1: #c084fc; --m-l10: #fbbf24;
}
/* ---- light ---- */
/* ---- light (warm paper) ---- */
html[data-theme="light"] {
--bg: #eef1f8;
--grid: rgba(20, 42, 102, 0.05);
--aurora-1: rgba(120, 150, 220, 0.22);
--aurora-2: rgba(244, 139, 28, 0.10);
--text: #16203a;
--text-dim: #5d6b86;
--border: rgba(20, 42, 102, 0.13);
--border-bright: rgba(20, 42, 102, 0.22);
--panel-a: rgba(255, 255, 255, 0.92);
--panel-b: rgba(248, 250, 254, 0.85);
--panel-inset: rgba(255, 255, 255, 0.6);
--panel-shadow: 0 18px 40px -28px rgba(40, 55, 95, 0.35);
--header-bg: rgba(244, 246, 251, 0.80);
--bg: #f7f5ef; /* warm paper */
--grid: rgba(92, 78, 52, 0.05); /* warm faint grid */
--aurora-1: rgba(120, 140, 205, 0.15); /* soft cool wash */
--aurora-2: rgba(244, 139, 28, 0.12); /* brand warmth */
--text: #2a2620; /* warm charcoal ink */
--text-dim: #7c756a; /* warm muted */
--border: rgba(60, 50, 35, 0.15);
--border-bright: rgba(60, 50, 35, 0.12);
--panel-a: #ffffff; /* solid — no longer ghostly */
--panel-b: #fbfaf5;
--panel-inset: rgba(255, 255, 255, 0.9);
--panel-shadow: 0 14px 30px -16px rgba(60, 50, 35, 0.26), 0 2px 6px -2px rgba(60, 50, 35, 0.08);
--header-bg: rgba(247, 245, 239, 0.85);
--lvl-ok: #16a34a; --lvl-warn: #d97706; --lvl-bad: #dc2626;
--m-lp: #2563eb; --m-lmax: #dc2626; --m-l1: #9333ea; --m-l10: #d97706;
}
/* On light, the hover-lift shadow wants warm depth (the dark one is invisible on paper). */
html[data-theme="light"] .panel-hover:hover {
box-shadow: 0 22px 44px -20px rgba(60, 50, 35, 0.30), 0 0 0 1px var(--accent-glow);
}
html, body { height: 100%; }
body {
templates/portal/location.html
+4 -4
View File
@@ -19,8 +19,8 @@
{% if not has_device %}
<div class="panel reveal p-12 text-center text-[var(--text-dim)] mt-6">No device is currently assigned to this location.</div>
{% else %}
<div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(248,113,113,0.10)] border border-[rgba(248,113,113,0.38)] text-red-200 text-sm flex items-center gap-2.5">
<svg class="w-5 h-5 shrink-0 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div id="p-alarm-banner" class="hidden reveal mt-5 px-4 py-3 rounded-xl bg-[rgba(220,38,38,0.10)] border border-[rgba(220,38,38,0.32)] text-[var(--lvl-bad)] text-sm flex items-center gap-2.5">
<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"/>
</svg>
@@ -280,8 +280,8 @@ async function loadEvents() {
: `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
const row = document.createElement('div');
row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(248,113,113,0.4)]' : '');
row.innerHTML = `<div class="${active ? 'text-red-300' : 'text-[var(--text)]'}">${e.rule_name || 'Alert'} <span class="text-xs text-[var(--text-dim)] font-mono">· ${m} ${e.threshold_db} dB</span></div>
row.className = 'panel px-3.5 py-2.5 text-sm ' + (active ? 'border-[rgba(220,38,38,0.4)]' : '');
row.innerHTML = `<div class="${active ? 'text-[var(--lvl-bad)] font-medium' : 'text-[var(--text)]'}">${e.rule_name || 'Alert'} <span class="text-xs text-[var(--text-dim)] font-mono">· ${m} ${e.threshold_db} dB</span></div>
<div class="text-xs text-[var(--text-dim)] font-mono mt-0.5">${when}${peak}</div>`;
list.appendChild(row);
}