diff --git a/client/browser/css/style.css b/client/browser/css/style.css new file mode 100644 index 0000000..542b0de --- /dev/null +++ b/client/browser/css/style.css @@ -0,0 +1,176 @@ +/* ═══════════════════════════════════════════════════════ + līlā — Ecosystem Visualizer Styles + ═══════════════════════════════════════════════════════ */ + +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap'); + +* { margin: 0; padding: 0; box-sizing: border-box; } + +body { + background: #0f100f; + color: #b8b4a8; + font-family: 'JetBrains Mono', monospace; + font-size: 11px; + overflow: hidden; + height: 100vh; + width: 100vw; +} + +#canvas { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + image-rendering: pixelated; +} + +/* ─── Status Panel ──────────────────────────────────── */ + +.panel { + position: absolute; + top: 16px; + left: 16px; + background: rgba(15, 16, 15, 0.88); + border: 1px solid rgba(184, 180, 168, 0.12); + border-radius: 6px; + padding: 14px 16px; + min-width: 200px; + backdrop-filter: blur(8px); +} + +.panel h1 { + font-size: 14px; + font-weight: 500; + color: #d4d0c4; + margin-bottom: 2px; + letter-spacing: 0.5px; +} + +.panel .sub { + font-size: 9px; + color: rgba(184, 180, 168, 0.5); + margin-bottom: 12px; + letter-spacing: 1px; + text-transform: uppercase; +} + +.stat { + display: flex; + justify-content: space-between; + padding: 3px 0; + border-bottom: 1px solid rgba(184, 180, 168, 0.06); +} + +.stat:last-child { border-bottom: none; } +.stat .label { color: rgba(184, 180, 168, 0.5); } +.stat .value { color: #d4d0c4; font-weight: 400; } + +/* ─── Event Log ─────────────────────────────────────── */ + +.events-panel { + position: absolute; + bottom: 16px; + left: 16px; + background: rgba(15, 16, 15, 0.88); + border: 1px solid rgba(184, 180, 168, 0.12); + border-radius: 6px; + padding: 10px 14px; + max-width: 340px; + max-height: 140px; + overflow: hidden; + backdrop-filter: blur(8px); + font-size: 10px; +} + +.events-panel .event-line { + padding: 2px 0; + opacity: 0.7; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.events-panel .event-line.fresh { opacity: 1; } + +/* ─── Legend ────────────────────────────────────────── */ + +.legend { + position: absolute; + top: 16px; + right: 16px; + background: rgba(15, 16, 15, 0.88); + border: 1px solid rgba(184, 180, 168, 0.12); + border-radius: 6px; + padding: 12px 14px; + backdrop-filter: blur(8px); +} + +.legend-item { + display: flex; + align-items: center; + gap: 8px; + padding: 2px 0; + font-size: 10px; +} + +.legend-dot { + width: 8px; + height: 8px; + border-radius: 2px; + flex-shrink: 0; +} + +/* ─── Status Dot ────────────────────────────────────── */ + +.status-dot { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + margin-right: 6px; +} + +.status-dot.connected { background: #6b8f5e; } +.status-dot.disconnected { background: #8f5e5e; } +.status-dot.connecting { background: #8f865e; } + +/* ─── Control Buttons ───────────────────────────────── */ + +.rain-btn, .record-btn { + position: fixed; + bottom: 20px; + background: rgba(45, 85, 110, 0.5); + border: 1px solid rgba(70, 130, 150, 0.3); + color: rgba(184, 180, 168, 0.85); + padding: 10px 18px; + border-radius: 6px; + font-family: 'JetBrains Mono', 'Fira Code', monospace; + font-size: 11px; + cursor: pointer; + letter-spacing: 1px; + transition: all 0.2s; +} + +.rain-btn { right: 20px; } +.record-btn { right: 120px; } + +.rain-btn:hover, .record-btn:hover { + background: rgba(55, 105, 130, 0.7); + border-color: rgba(70, 130, 150, 0.6); +} + +.rain-btn:active, .record-btn:active { + background: rgba(70, 130, 150, 0.9); +} + +.rain-btn.raining { + background: rgba(45, 85, 110, 0.9); + border-color: rgba(100, 170, 200, 0.5); + color: rgba(200, 220, 230, 1); +} + +.record-btn.recording { + background: rgba(140, 50, 50, 0.8); + border-color: rgba(180, 70, 70, 0.6); + color: rgba(230, 180, 180, 1); +} diff --git a/client/browser/index.html b/client/browser/index.html index a872ffd..0058179 100644 --- a/client/browser/index.html +++ b/client/browser/index.html @@ -10,164 +10,7 @@