diff --git a/apps/status/src/static/app.css b/apps/status/src/static/app.css index 296b905..e566eb6 100644 --- a/apps/status/src/static/app.css +++ b/apps/status/src/static/app.css @@ -41,8 +41,9 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; } .json-link:hover { color: #60a5fa; } .rss-link:hover { color: #f59e0b; } .muted { color: var(--muted); font-size: 0.875rem; } -.overall { padding: 1rem 1.25rem; border-radius: 10px; color: var(--overall-fg); font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; } -.overall .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--overall-fg); opacity: 0.9; } +.overall { padding: 1rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid; } +.overall .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } +@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .group-title { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 2rem 0 0.75rem; } .monitors { display: flex; flex-direction: column; gap: 0.5rem; } /* All monitors share one structure: a clickable header row + a collapsible @@ -54,6 +55,10 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; } .monitor-name .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitor-meta { display: flex; gap: 1rem; align-items: center; font-size: 0.85rem; color: var(--muted); } .uptime-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); } +.uptime-pct.good { color: var(--bar-up); } +.uptime-pct.warn { color: var(--bar-partial); } +.uptime-pct.bad { color: var(--bar-down); } +.uptime-pct.empty { color: var(--muted); } .maintenance-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; diff --git a/apps/status/src/views/page.ejs b/apps/status/src/views/page.ejs index 02c5b34..740c863 100644 --- a/apps/status/src/views/page.ejs +++ b/apps/status/src/views/page.ejs @@ -73,9 +73,21 @@ if (paused_count > 0) { overallText += ' — ' + paused_count + (paused_count === 1 ? ' service' : ' services') + ' under maintenance'; } - const overallColor = overall === 'up' ? 'var(--bar-up)' + const overallBg = overall === 'up' ? 'rgba(16,185,129,0.1)' + : overall === 'degraded' ? 'rgba(245,158,11,0.1)' + : 'rgba(239,68,68,0.1)'; + const overallBorder = overall === 'up' ? 'rgba(16,185,129,0.25)' + : overall === 'degraded' ? 'rgba(245,158,11,0.25)' + : 'rgba(239,68,68,0.25)'; + const overallFg = overall === 'up' ? 'var(--bar-up)' : overall === 'degraded' ? 'var(--bar-partial)' : 'var(--bar-down)'; + const dotColor = overall === 'up' ? '#10b981' + : overall === 'degraded' ? '#f59e0b' + : '#ef4444'; + const dotGlow = overall === 'up' ? 'rgba(16,185,129,0.4)' + : overall === 'degraded' ? 'rgba(245,158,11,0.4)' + : 'rgba(239,68,68,0.4)'; %> @@ -116,8 +128,8 @@ <% if (page.description) { %>
<%= page.description %>
<% } %> -
- +
+ <%= overallText %>
@@ -189,7 +201,8 @@ Maintenance <% } else { %> <% if (page.show_response_time && m.avg_latency != null) { %><%= m.avg_latency %>ms<% } %> - <%= fmtUptime(u[page.default_window === '24h' ? 'd24' : page.default_window === '7d' ? 'd7' : page.default_window === '30d' ? 'd30' : 'd90']) %> + <% const winKey = page.default_window === '24h' ? 'd24' : page.default_window === '7d' ? 'd7' : page.default_window === '30d' ? 'd30' : 'd90'; %> + <%= fmtUptime(u[winKey]) %> <% } %>