From 46eef755552b3cf64f5145add1c18f011dd5375f Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Fri, 6 Mar 2026 00:04:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20/live=20overhaul=20=E2=80=94=20visitor-?= =?UTF-8?q?friendly=20titles,=20project=20filters,=20incident=20log=20clea?= =?UTF-8?q?nup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/css/style.css | 280 +++++++++++++++-------- html/live/index.html | 515 ++++++++++++++++++++++++++++--------------- 2 files changed, 533 insertions(+), 262 deletions(-) diff --git a/html/css/style.css b/html/css/style.css index 432d830..a657f97 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -842,199 +842,295 @@ nav { } /* ═══════════════════════════════════════════ - /LIVE PAGE — Full Shipping Log + /LIVE PAGE — Build Log ═══════════════════════════════════════════ */ .live-page { padding-top: 96px; - padding-bottom: 5rem; + padding-bottom: 6rem; min-height: 100vh; } -.live-page-header { - margin-bottom: 3rem; -} -.live-page-eyebrow { + +/* Header */ +.lp-header { margin-bottom: 3rem; } +.lp-eyebrow { display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); - font-size: 0.78rem; + font-size: 0.72rem; font-weight: 600; color: var(--accent); text-transform: uppercase; - letter-spacing: 0.12em; + letter-spacing: 0.14em; margin-bottom: 1.25rem; } -.live-page-title { +.lp-title { font-family: var(--sans); - font-size: clamp(2rem, 5vw, 3.2rem); + font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; - letter-spacing: -0.03em; - line-height: 1.1; + letter-spacing: -0.04em; + line-height: 1.08; color: var(--text); margin-bottom: 1rem; } -.live-page-sub { +.lp-sub { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.75; - max-width: 600px; + max-width: 560px; +} + +/* Stats */ +.lp-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + margin-bottom: 2.5rem; +} +.lp-stat { + text-align: center; + padding: 1.5rem 0.75rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; +} +.lp-stat-num { + font-family: var(--mono); + font-size: 2.2rem; + font-weight: 800; + line-height: 1; + color: var(--text); +} +.lp-stat-green { color: var(--accent); } +.lp-stat-amber { color: var(--amber); } +.lp-stat-red { color: var(--red); } +.lp-stat-label { + font-family: var(--mono); + font-size: 0.65rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-muted); + margin-top: 0.4rem; } /* Filters */ -.log-filters { +.lp-filters { display: flex; - gap: 0.5rem; - margin: 2.5rem 0 2rem; + gap: 0.35rem; + margin-bottom: 2.5rem; + flex-wrap: wrap; } -.filter-btn { +.lp-filter { + display: inline-flex; + align-items: center; + gap: 0.4rem; font-family: var(--mono); - font-size: 0.78rem; + font-size: 0.72rem; font-weight: 600; - padding: 0.45rem 1rem; + padding: 0.4rem 0.85rem; border-radius: 99px; border: 1px solid var(--border-light); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; + white-space: nowrap; } -.filter-btn:hover { +.lp-filter:hover { color: var(--text); border-color: var(--text-muted); } -.filter-btn.active { - background: var(--accent); - color: #050505; - border-color: var(--accent); +.lp-filter.active { + background: var(--bg-card-hover); + color: var(--text); + border-color: var(--text-secondary); +} +.lp-filter-dot { + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; +} +.lp-filter-count { + color: var(--text-dim); + font-weight: 500; } -/* Day groups */ -.log-day { - margin-bottom: 2rem; -} -.log-day-header { +/* Day group */ +.lp-day { margin-bottom: 2.5rem; } +.lp-day-header { display: flex; align-items: center; - gap: 0.75rem; + gap: 0.6rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } -.log-day-date { +.lp-day-date { font-family: var(--mono); - font-size: 0.82rem; + font-size: 0.75rem; font-weight: 700; - color: var(--text); + color: var(--text-secondary); } -.log-day-count { +.lp-day-count { font-family: var(--mono); - font-size: 0.7rem; + font-size: 0.65rem; color: var(--text-dim); + background: var(--bg-card); + padding: 0.1rem 0.5rem; + border-radius: 99px; } -/* Log entries */ -.log-entry { - padding: 0.85rem 1.25rem; +/* Ship card */ +.lp-card { + padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; - margin-bottom: 0.5rem; + margin-bottom: 0.4rem; transition: border-color 0.15s ease; } -.log-entry:hover { +.lp-card:hover { border-color: var(--border-light); } -.log-entry-head { +.lp-card-active { + border-left: 3px solid var(--amber); +} +.lp-card-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } -.log-entry-id { +.lp-card-tag { font-family: var(--mono); - font-size: 0.7rem; + font-size: 0.62rem; font-weight: 700; - color: var(--text-dim); - min-width: 2.2rem; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--tag-color, var(--text-muted)); + background: color-mix(in srgb, var(--tag-color, #666) 12%, transparent); + padding: 0.2rem 0.55rem; + border-radius: 4px; + flex-shrink: 0; + white-space: nowrap; } -.log-entry-title { +.lp-card-title { font-size: 0.88rem; - color: var(--text-secondary); + font-weight: 500; + color: var(--text); flex: 1; min-width: 0; + line-height: 1.45; } -.log-metric { +.lp-card-status { font-family: var(--mono); - font-size: 0.75rem; + font-size: 0.62rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--amber); + background: rgba(245, 158, 11, 0.1); + padding: 0.2rem 0.55rem; + border-radius: 4px; + flex-shrink: 0; + animation: pulse-text 2s ease-in-out infinite; +} +@keyframes pulse-text { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} +.lp-card-summary { + font-size: 0.8rem; color: var(--text-muted); + line-height: 1.65; margin-top: 0.5rem; - padding-top: 0.5rem; - border-top: 1px solid var(--border); - line-height: 1.6; + padding-left: 0; } /* Oops section */ -.oops-section { +.lp-oops { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--border); } -.oops-title { +.lp-oops-header { margin-bottom: 1.5rem; } +.lp-oops-title { font-family: var(--mono); - font-size: 1.2rem; + font-size: 1.1rem; font-weight: 700; color: var(--text); - margin-bottom: 0.35rem; + margin-bottom: 0.3rem; } -.oops-sub { +.lp-oops-sub { font-size: 0.88rem; color: var(--text-muted); - margin-bottom: 1.5rem; } -.oops-entry { - display: flex; - align-items: flex-start; - gap: 0.75rem; - font-size: 0.82rem; - color: var(--text-muted); - padding: 0.75rem 1rem; +.lp-oops-card { + padding: 0.85rem 1.1rem; background: var(--bg-card); border: 1px solid var(--border); + border-left: 3px solid var(--red); border-radius: 8px; - border-left: 3px solid #ef4444; - margin-bottom: 0.5rem; - line-height: 1.6; + margin-bottom: 0.4rem; } -.oops-id { +.lp-oops-what { + font-size: 0.85rem; + color: var(--text-secondary); + line-height: 1.5; +} +.lp-oops-fix { font-family: var(--mono); - font-size: 0.7rem; - font-weight: 700; + font-size: 0.72rem; color: var(--text-dim); - flex-shrink: 0; + margin-top: 0.35rem; +} +.lp-oops-empty { + font-family: var(--mono); + font-size: 0.82rem; + color: var(--text-dim); + padding: 2rem; } -/* Live page CTA */ -.live-page-cta { +/* Bottom CTA */ +.lp-bottom-cta { text-align: center; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--border); } -.live-page-cta p { +.lp-bottom-line { font-family: var(--mono); - font-size: 0.95rem; - font-weight: 600; - color: var(--text-secondary); - margin-bottom: 1.5rem; + font-size: 1.1rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.5rem; +} +.lp-bottom-sub { + font-size: 0.92rem; + color: var(--text-muted); + margin-bottom: 2rem; } -/* Loading state */ -.log-loading { +/* Loading */ +.lp-loading { font-family: var(--mono); font-size: 0.82rem; color: var(--text-dim); - padding: 2rem; + padding: 3rem 2rem; text-align: center; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} +.lp-loading-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent); + animation: pulse-text 1.5s ease-in-out infinite; } /* Active nav link */ @@ -1043,11 +1139,19 @@ nav { background: var(--bg-card); } -/* ── Responsive: /live page ── */ +/* ── Responsive: /live ── */ +@media (max-width: 900px) { + .lp-stats { grid-template-columns: repeat(2, 1fr); } +} @media (max-width: 640px) { .live-page { padding-top: 80px; } - .log-entry-head { gap: 0.4rem; } - .log-entry-id { display: none; } - .log-filters { flex-wrap: wrap; } - .oops-entry { flex-direction: column; gap: 0.25rem; } + .lp-stats { gap: 0.5rem; } + .lp-stat { padding: 1rem 0.5rem; } + .lp-stat-num { font-size: 1.6rem; } + .lp-filters { gap: 0.25rem; } + .lp-filter { font-size: 0.65rem; padding: 0.35rem 0.6rem; } + .lp-card-row { gap: 0.4rem; } + .lp-card-tag { font-size: 0.58rem; } + .lp-card-title { font-size: 0.82rem; } + .lp-oops-card { padding: 0.75rem 0.85rem; } } diff --git a/html/live/index.html b/html/live/index.html index 5ad858f..7f83436 100644 --- a/html/live/index.html +++ b/html/live/index.html @@ -3,10 +3,10 @@ - QuikCue — Live Shipping Log - - - + QuikCue — Live Build Log + + + @@ -32,63 +32,64 @@
-
-
+
+
- Live Engineering Feed + Live from production
-

Full Shipping Log

-

- Every system we've shipped. Every fix we've made. Unfakeable, unedited, pulled - straight from our PostgreSQL database in real time. +

Build Log

+

+ Every system we've deployed. Every bug we've caught. Pulled live from our + production database — unedited, unfakeable.

- -
-
-
—
-
Total ships
+ +
+
+
—
+
Systems shipped
-
-
—
-
Shipped
+
+
—
+
Live in production
-
-
—
-
In flight
+
+
—
+
Building now
-
-
—
-
Oops
+
+
—
+
Incidents caught
- -
- - - + +
+
- -
-
Loading from database…
+ +
+
Loading from database…
- -
-

Oops Log

-

If it's not here, we haven't broken it yet.

-
-
Loading…
+ +
+
+

Incident Log

+

Things that broke. How fast we fixed them. Full transparency.

+
+
+
Loading…
-
-

This is what autonomous operations looks like.

- Start a conversation → +
+

This is what shipping looks like.

+

Most agencies show you a portfolio. We show you the production database.

+ Talk to us →
@@ -114,150 +115,316 @@
- + html += `
+
+ ${p.label} + ${esc(title)} + ${isActive ? 'Building' : ''} +
+ ${summary ? `

${esc(summary)}

` : ''} +
`; + }); + + html += '
'; + } + + container.innerHTML = html || '
No entries found.
'; +} + +// ── Oops ── +function renderOops(oops) { + const container = document.getElementById('oops-list'); + if (!oops.length) { + container.innerHTML = '

Nothing broken yet. Give it time.

'; + return; + } + container.innerHTML = oops.map(o => { + const d = OOPS_DISPLAY[o.id] || {}; + const title = d.title || o.description; + const fix = d.fix || (o.fix_time ? `Fixed in ${o.fix_time}` : ''); + return `
+
${esc(title)}
+ ${fix ? `
${esc(fix)}
` : ''} +
`; + }).join(''); +} + +// ── Helpers ── +function formatDate(str) { + try { + const d = new Date(str + 'T00:00:00'); + return d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }); + } catch { return str; } +} +function esc(str) { + const d = document.createElement('div'); + d.textContent = str; + return d.innerHTML; +} + +// Live pulse +setInterval(() => { + const p = document.querySelector('.live-pulse'); + if (p) { p.classList.remove('ping'); void p.offsetWidth; p.classList.add('ping'); } +}, 3000); + +init(); +