Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sovereign Data Conduit — Spark Engine</title> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ────────────────────────────────────────────── | |
| DESIGN SYSTEM — Sovereign Crypto Terminal | |
| Bold Typography · High Contrast · Flat Aesthetic | |
| ────────────────────────────────────────────── */ | |
| :root { | |
| --bg-primary: #050505; | |
| --bg-surface: #111111; | |
| --bg-elevated: #1a1a1a; | |
| --bg-panel: #161616; | |
| --border-primary: #333333; | |
| --border-accent: #444444; | |
| --border-focus: #666666; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a0a0a0; | |
| --text-muted: #666666; | |
| --text-dim: #444444; | |
| --accent-cyan: #00e5ff; | |
| --accent-green: #00ff88; | |
| --accent-amber: #ffb800; | |
| --accent-red: #ff4444; | |
| --accent-purple: #c084fc; | |
| --accent-indigo: #818cf8; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --font-body: 'Inter', -apple-system, sans-serif; | |
| --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.6); | |
| --shadow-lg: 0 8px 32px rgba(0,0,0,0.7); | |
| --radius-sm: 4px; | |
| --radius-md: 6px; | |
| --radius-lg: 8px; | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| --space-2xl: 48px; | |
| } | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| font-size: 14px; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ─── Scrollbar ─── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg-primary); } | |
| ::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--border-accent); } | |
| /* ═══════════════════════════════════════════ | |
| LAYOUT — Terminal Grid | |
| ═══════════════════════════════════════════ */ | |
| .terminal-root { | |
| display: grid; | |
| grid-template-rows: 56px 1fr; | |
| grid-template-columns: 240px 1fr; | |
| grid-template-areas: | |
| "sidebar topbar" | |
| "sidebar main"; | |
| height: 100vh; | |
| width: 100vw; | |
| overflow: hidden; | |
| } | |
| @media (max-width: 1024px) { | |
| .terminal-root { | |
| grid-template-columns: 64px 1fr; | |
| } | |
| .sidebar-label { display: none; } | |
| } | |
| @media (max-width: 768px) { | |
| .terminal-root { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto auto 1fr; | |
| grid-template-areas: | |
| "topbar" | |
| "sidebar" | |
| "main"; | |
| overflow-y: auto; | |
| height: auto; | |
| min-height: 100vh; | |
| } | |
| .sidebar-nav { | |
| flex-direction: row ; | |
| overflow-x: auto; | |
| padding: 8px 16px ; | |
| } | |
| .sidebar-item { | |
| flex-direction: row ; | |
| padding: 8px 16px ; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════ | |
| TOPBAR — Market Ticker Strip | |
| ═══════════════════════════════════════════ */ | |
| .topbar { | |
| grid-area: topbar; | |
| background: var(--bg-surface); | |
| border-bottom: 1px solid var(--border-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 var(--space-lg); | |
| position: relative; | |
| z-index: 50; | |
| } | |
| .brand-group { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .brand-mark { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .brand-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--accent-cyan); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 900; | |
| font-size: 14px; | |
| color: var(--bg-primary); | |
| letter-spacing: -0.5px; | |
| } | |
| .brand-text { | |
| font-size: 18px; | |
| font-weight: 900; | |
| letter-spacing: -1.2px; | |
| line-height: 1; | |
| } | |
| .brand-sub { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| font-weight: 600; | |
| color: var(--accent-cyan); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| margin-top: 2px; | |
| } | |
| .ticker-strip { | |
| display: flex; | |
| gap: var(--space-lg); | |
| overflow-x: auto; | |
| padding: 0 var(--space-md); | |
| } | |
| .ticker-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| white-space: nowrap; | |
| } | |
| .ticker-symbol { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.5px; | |
| } | |
| .ticker-price { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .ticker-change { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 2px 6px; | |
| border-radius: 2px; | |
| } | |
| .ticker-change.up { | |
| background: rgba(0,255,136,0.12); | |
| color: var(--accent-green); | |
| } | |
| .ticker-change.down { | |
| background: rgba(255,68,68,0.12); | |
| color: var(--accent-red); | |
| } | |
| .topbar-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .anycoder-badge { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| border: 1px solid var(--border-primary); | |
| padding: 4px 10px; | |
| border-radius: var(--radius-sm); | |
| text-decoration: none; | |
| transition: all 0.2s; | |
| letter-spacing: 0.5px; | |
| } | |
| .anycoder-badge:hover { | |
| border-color: var(--accent-cyan); | |
| color: var(--accent-cyan); | |
| } | |
| /* ═══════════════════════════════════════════ | |
| SIDEBAR — Node Navigator | |
| ═══════════════════════════════════════════ */ | |
| .sidebar { | |
| grid-area: sidebar; | |
| background: var(--bg-surface); | |
| border-right: 1px solid var(--border-primary); | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| } | |
| .sidebar-header { | |
| padding: var(--space-lg); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .sidebar-header h2 { | |
| font-size: 11px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 2.5px; | |
| color: var(--text-muted); | |
| } | |
| .sidebar-nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: var(--space-sm); | |
| } | |
| .sidebar-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| text-decoration: none; | |
| color: inherit; | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| .sidebar-item:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .sidebar-item.active { | |
| background: rgba(0,229,255,0.08); | |
| color: var(--accent-cyan); | |
| } | |
| .sidebar-item .emoji { | |
| font-size: 16px; | |
| min-width: 24px; | |
| text-align: center; | |
| } | |
| .sidebar-label { | |
| white-space: nowrap; | |
| } | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding: var(--space-lg); | |
| border-top: 1px solid var(--border-primary); | |
| } | |
| .node-status { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent-green); | |
| box-shadow: 0 0 8px rgba(0,255,136,0.4); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* ═══════════════════════════════════════════ | |
| MAIN CONTENT — Dashboard Grid | |
| ═══════════════════════════════════════════ */ | |
| .main-content { | |
| grid-area: main; | |
| overflow-y: auto; | |
| padding: var(--space-lg); | |
| background: var(--bg-primary); | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| gap: var(--space-md); | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| /* Default layout: standard dashboard */ | |
| .dashboard-grid { | |
| grid-template-columns: repeat(12, 1fr); | |
| } | |
| .panel { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .panel:hover { | |
| border-color: var(--border-accent); | |
| } | |
| .panel:focus-within { | |
| border-color: var(--accent-cyan); | |
| box-shadow: 0 0 0 1px rgba(0,229,255,0.15); | |
| } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-md) var(--space-lg); | |
| border-bottom: 1px solid var(--border-primary); | |
| min-height: 48px; | |
| } | |
| .panel-title { | |
| font-size: 11px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--text-secondary); | |
| } | |
| .panel-badge { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 3px 8px; | |
| border-radius: 2px; | |
| letter-spacing: 0.5px; | |
| } | |
| .panel-badge.ok { background: rgba(0,255,136,0.1); color: var(--accent-green); } | |
| .panel-badge.warn { background: rgba(255,184,0,0.1); color: var(--accent-amber); } | |
| .panel-badge.live { | |
| background: rgba(0,229,255,0.1); | |
| color: var(--accent-cyan); | |
| animation: live-pulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes live-pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .panel-body { | |
| padding: var(--space-lg); | |
| } | |
| /* ─── Panel sizing helpers ─── */ | |
| .col-3 { grid-column: span 3; } | |
| .col-4 { grid-column: span 4; } | |
| .col-6 { grid-column: span 6; } | |
| .col-8 { grid-column: span 8; } | |
| .col-12 { grid-column: span 12; } | |
| @media (max-width: 1200px) { | |
| .col-3, .col-4, .col-6, .col-8 { grid-column: span 6; } | |
| } | |
| @media (max-width: 768px) { | |
| .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; } | |
| } | |
| /* ═══════════════════════════════════════════ | |
| COMPONENTS — Typography & Metrics | |
| ═══════════════════════════════════════════ */ | |
| .metric-value { | |
| font-family: var(--font-mono); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| } | |
| .metric-value.xl { font-size: 42px; letter-spacing: -2px; } | |
| .metric-value.lg { font-size: 32px; letter-spacing: -1.5px; } | |
| .metric-value.md { font-size: 24px; letter-spacing: -1px; } | |
| .metric-value.sm { font-size: 18px; letter-spacing: -0.5px; } | |
| .metric-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .metric-sublabel { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| margin-top: 4px; | |
| } | |
| /* ─── Progress Bars ─── */ | |
| .progress-track { | |
| width: 100%; | |
| height: 6px; | |
| background: var(--bg-elevated); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin-top: var(--space-sm); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 0.5s ease; | |
| } | |
| .progress-fill.cyan { background: var(--accent-cyan); } | |
| .progress-fill.green { background: var(--accent-green); } | |
| .progress-fill.amber { background: var(--accent-amber); } | |
| .progress-fill.red { background: var(--accent-red); } | |
| .progress-fill.purple { background: var(--accent-purple); } | |
| /* ─── Buttons ─── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| padding: 10px 20px; | |
| border: 1px solid var(--border-primary); | |
| background: var(--bg-elevated); | |
| color: var(--text-primary); | |
| font-family: var(--font-body); | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| } | |
| .btn:hover { | |
| border-color: var(--border-focus); | |
| background: var(--bg-panel); | |
| } | |
| .btn:active { | |
| transform: translateY(1px); | |
| } | |
| .btn-primary { | |
| background: var(--accent-cyan); | |
| color: var(--bg-primary); | |
| border-color: var(--accent-cyan); | |
| } | |
| .btn-primary:hover { | |
| background: #00d4e6; | |
| border-color: #00d4e6; | |
| } | |
| .btn-success { | |
| background: var(--accent-green); | |
| color: var(--bg-primary); | |
| border-color: var(--accent-green); | |
| } | |
| .btn-success:hover { | |
| background: #00e67a; | |
| } | |
| .btn-danger { | |
| background: var(--accent-red); | |
| color: #fff; | |
| border-color: var(--accent-red); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| border-color: transparent; | |
| } | |
| .btn-ghost:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 10px; | |
| letter-spacing: 1px; | |
| } | |
| .btn-block { | |
| width: 100%; | |
| } | |
| /* ─── Forms ─── */ | |
| .form-group { | |
| margin-bottom: var(--space-md); | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-xs); | |
| } | |
| .form-input, .form-select { | |
| width: 100%; | |
| padding: 10px 12px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| transition: border-color 0.2s; | |
| outline: none; | |
| } | |
| .form-input:focus, .form-select:focus { | |
| border-color: var(--accent-cyan); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-dim); | |
| } | |
| .form-hint { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| margin-top: var(--space-xs); | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .input-group .form-input { | |
| flex: 1; | |
| } | |
| /* ─── Tables ─── */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| } | |
| .data-table th { | |
| text-align: left; | |
| padding: 10px 14px; | |
| font-size: 9px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| color: var(--text-muted); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .data-table td { | |
| padding: 10px 14px; | |
| border-bottom: 1px solid rgba(51,51,51,0.5); | |
| font-family: var(--font-mono); | |
| } | |
| .data-table tr:hover td { | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .data-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* ─── Terminal / Logs ─── */ | |
| .terminal-window { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| line-height: 1.6; | |
| overflow: hidden; | |
| } | |
| .terminal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border-primary); | |
| background: var(--bg-surface); | |
| } | |
| .terminal-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .terminal-body { | |
| padding: var(--space-md); | |
| max-height: 280px; | |
| overflow-y: auto; | |
| } | |
| .terminal-line { | |
| display: flex; | |
| gap: var(--space-sm); | |
| padding: 2px 0; | |
| animation: fadeInUp 0.3s ease; | |
| } | |
| .terminal-line .ts { | |
| color: var(--text-dim); | |
| min-width: 72px; | |
| flex-shrink: 0; | |
| } | |
| .terminal-line .level { | |
| min-width: 48px; | |
| flex-shrink: 0; | |
| font-weight: 700; | |
| } | |
| .terminal-line .level.info { color: var(--accent-cyan); } | |
| .terminal-line .level.ok { color: var(--accent-green); } | |
| .terminal-line .level.warn { color: var(--accent-amber); } | |
| .terminal-line .level.err { color: var(--accent-red); } | |
| .terminal-line .msg { | |
| color: var(--text-secondary); | |
| word-break: break-word; | |
| } | |
| .terminal-line .msg strong { | |
| color: var(--text-primary); | |
| font-weight: 700; | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(4px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ─── Signal Cards ─── */ | |
| .signal-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .signal-card { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: var(--space-md); | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| transition: all 0.15s; | |
| cursor: pointer; | |
| } | |
| .signal-card:hover { | |
| border-color: var(--border-accent); | |
| transform: translateX(2px); | |
| } | |
| .signal-card.long { border-left: 3px solid var(--accent-green); } | |
| .signal-card.short { border-left: 3px solid var(--accent-red); } | |
| .signal-card.hold { border-left: 3px solid var(--accent-amber); } | |
| .signal-direction { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| font-weight: 900; | |
| flex-shrink: 0; | |
| } | |
| .signal-direction.long { background: rgba(0,255,136,0.1); color: var(--accent-green); } | |
| .signal-direction.short { background: rgba(255,68,68,0.1); color: var(--accent-red); } | |
| .signal-direction.hold { background: rgba(255,184,0,0.1); color: var(--accent-amber); } | |
| .signal-body { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .signal-pair { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .signal-meta { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| .signal-conf { | |
| text-align: right; | |
| flex-shrink: 0; | |
| } | |
| .signal-conf-val { | |
| font-family: var(--font-mono); | |
| font-size: 18px; | |
| font-weight: 700; | |
| } | |
| .signal-conf-label { | |
| font-size: 9px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| } | |
| /* ─── Position Cards ─── */ | |
| .position-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--space-md); | |
| } | |
| .position-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md); | |
| transition: all 0.15s; | |
| } | |
| .position-card:hover { | |
| border-color: var(--border-accent); | |
| } | |
| .position-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-md); | |
| } | |
| .position-pair { | |
| font-family: var(--font-mono); | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .position-badge { | |
| font-size: 9px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| padding: 3px 8px; | |
| border-radius: 2px; | |
| } | |
| .position-badge.long { background: rgba(0,255,136,0.1); color: var(--accent-green); } | |
| .position-badge.short { background: rgba(255,68,68,0.1); color: var(--accent-red); } | |
| .position-metrics { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-md); | |
| } | |
| .position-metric { | |
| font-family: var(--font-mono); | |
| } | |
| .position-metric-label { | |
| font-size: 9px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| } | |
| .position-metric-value { | |
| font-size: 14px; | |
| font-weight: 700; | |
| margin-top: 2px; | |
| } | |
| .position-metric-value.profit { color: var(--accent-green); } | |
| .position-metric-value.loss { color: var(--accent-red); } | |
| /* ─── Chart Canvas Container ─── */ | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| height: 360px; | |
| background: var(--bg-primary); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .chart-overlay { | |
| position: absolute; | |
| top: var(--space-sm); | |
| left: var(--space-sm); | |
| display: flex; | |
| gap: var(--space-md); | |
| } | |
| .chart-legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .chart-legend-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| } | |
| /* ─── Alerts ─── */ | |
| .alert { | |
| padding: var(--space-md) var(--space-lg); | |
| border: 1px solid; | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-md); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-md); | |
| } | |
| .alert.info { border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.05); } | |
| .alert.warn { border-color: rgba(255,184,0,0.3); background: rgba(255,184,0,0.05); } | |
| .alert.err { border-color: rgba(255,68,68,0.3); background: rgba(255,68,68,0.05); } | |
| .alert-icon { | |
| font-size: 18px; | |
| flex-shrink: 0; | |
| } | |
| .alert-content { | |
| flex: 1; | |
| } | |
| .alert-title { | |
| font-size: 12px; | |
| font-weight: 700; | |
| margin-bottom: 2px; | |
| } | |
| .alert-desc { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| /* ─── Spark Engine Stats ─── */ | |
| .spark-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-md); | |
| } | |
| @media (max-width: 1200px) { | |
| .spark-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .spark-grid { grid-template-columns: 1fr; } | |
| } | |
| .spark-stat { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| text-align: center; | |
| transition: all 0.2s; | |
| } | |
| .spark-stat:hover { | |
| border-color: var(--accent-cyan); | |
| } | |
| .spark-stat .metric-value { | |
| margin: var(--space-sm) 0; | |
| } | |
| /* ─── Responsive Table Scroll ─── */ | |
| .table-scroll { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| /* ─── Section Divider ─── */ | |
| .section-divider { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| margin: var(--space-xl) 0 var(--space-lg); | |
| grid-column: 1 / -1; | |
| } | |
| .section-divider::before, | |
| .section-divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border-primary); | |
| } | |
| .section-divider h2 { | |
| font-size: 11px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| /* ─── Animations ─── */ | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(-12px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .animate-in { | |
| animation: slideInRight 0.3s ease forwards; | |
| } | |
| /* ─── Page Sections (hidden by default) ─── */ | |
| .page-section { | |
| display: none; | |
| } | |
| .page-section.active { | |
| display: block; | |
| } | |
| /* ═══════════════════════════════════════════ | |
| MODERN CSS FEATURES | |
| ═══════════════════════════════════════════ */ | |
| /* Container queries for components */ | |
| .panel { | |
| container-type: inline-size; | |
| container-name: panel; | |
| } | |
| @container panel (max-width: 300px) { | |
| .panel-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } | |
| } | |
| /* Custom properties for dynamic theming */ | |
| .theme-green { --accent-primary: var(--accent-green); } | |
| .theme-cyan { --accent-primary: var(--accent-cyan); } | |
| /* Scroll-driven animations (progressive enhancement) */ | |
| @supports (animation-timeline: scroll()) { | |
| .dashboard-grid > .panel { | |
| animation: fade-in-up linear both; | |
| animation-timeline: view(); | |
| animation-range: entry 0% entry 40%; | |
| } | |
| } | |
| @keyframes fade-in-up { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ═══════════════════════════════════════════ | |
| MOBILE OVERRIDES | |
| ═══════════════════════════════════════════ */ | |
| @media (max-width: 768px) { | |
| .main-content { padding: var(--space-md); } | |
| .panel-body { padding: var(--space-md); } | |
| .ticker-strip { display: none; } | |
| .metric-value.xl { font-size: 28px; } | |
| .metric-value.lg { font-size: 22px; } | |
| .topbar { padding: 0 var(--space-md); } | |
| } | |
| /* Print styles */ | |
| @media print { | |
| .sidebar, .topbar { display: none; } | |
| .terminal-root { grid-template-columns: 1fr; } | |
| } | |
| /* ═══════════════════════════════════════════ | |
| IDIM IKANG OBSERVER COMPONENTS | |
| ═══════════════════════════════════════════ */ | |
| .observer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-md); | |
| } | |
| @media (max-width: 1200px) { | |
| .observer-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 768px) { | |
| .observer-grid { grid-template-columns: 1fr; } | |
| } | |
| .observer-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .observer-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-md) var(--space-lg); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .observer-card-title { | |
| font-size: 11px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--text-secondary); | |
| } | |
| .observer-kv { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid rgba(51,51,51,0.5); | |
| font-size: 12px; | |
| } | |
| .observer-kv:last-child { border-bottom: none; } | |
| .observer-kv-key { | |
| font-family: var(--font-mono); | |
| color: var(--text-muted); | |
| } | |
| .observer-kv-val { | |
| font-family: var(--font-mono); | |
| font-weight: 600; | |
| } | |
| /* ═══════════════════════════════════════════ | |
| TRAINING ENGINE COMPONENTS | |
| ═══════════════════════════════════════════ */ | |
| .epoch-tracker { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding: var(--space-md) 0; | |
| } | |
| .epoch-bar { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .epoch-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| background: var(--accent-cyan); | |
| } | |
| .epoch-label { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| font-weight: 700; | |
| min-width: 60px; | |
| text-align: right; | |
| } | |
| /* ═══════════════════════════════════════════ | |
| FLEX HELPERS | |
| ═══════════════════════════════════════════ */ | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .gap-sm { gap: var(--space-sm); } | |
| .gap-md { gap: var(--space-md); } | |
| .gap-lg { gap: var(--space-lg); } | |
| .w-full { width: 100%; } | |
| .mt-sm { margin-top: var(--space-sm); } | |
| .mt-md { margin-top: var(--space-md); } | |
| .mb-md { margin-bottom: var(--space-md); } | |
| .text-center { text-align: center; } | |
| /* Color utilities */ | |
| .text-cyan { color: var(--accent-cyan); } | |
| .text-green { color: var(--accent-green); } | |
| .text-amber { color: var(--accent-amber); } | |
| .text-red { color: var(--accent-red); } | |
| .text-purple { color: var(--accent-purple); } | |
| .text-muted { color: var(--text-muted); } | |
| .text-dim { color: var(--text-dim); } | |
| /* Background utilities */ | |
| .bg-surface { background: var(--bg-surface); } | |
| .bg-elevated { background: var(--bg-elevated); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="terminal-root"> | |
| <!-- ═══════════════════════════════════════════ | |
| SIDEBAR — Node Navigator | |
| ═══════════════════════════════════════════ --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h2>Active Nodes</h2> | |
| </div> | |
| <nav class="sidebar-nav" id="sidebarNav"> | |
| <a class="sidebar-item active" href="#" data-page="dashboard" onclick="navigateTo('dashboard'); return false;"> | |
| <span class="emoji">⚡</span> | |
| <span class="sidebar-label">Spark Engine</span> | |
| </a> | |
| <a class="sidebar-item" href="#" data-page="ingestion" onclick="navigateTo('ingestion'); return false;"> | |
| <span class="emoji">📡</span> | |
| <span class="sidebar-label">Ingestion Node</span> | |
| </a> | |
| <a class="sidebar-item" href="#" data-page="training" onclick="navigateTo('training'); return false;"> | |
| <span class="emoji">🧠</span> | |
| <span class="sidebar-label">Training Engine</span> | |
| </a> | |
| <a class="sidebar-item" href="#" data-page="observer" onclick="navigateTo('observer'); return false;"> | |
| <span class="emoji">👁</span> | |
| <span class="sidebar-label">Idim Ikang Observer</span> | |
| </a> | |
| <a class="sidebar-item" href="#" data-page="positions" onclick="navigateTo('positions'); return false;"> | |
| <span class="emoji">📊</span> | |
| <span class="sidebar-label">Positions</span> | |
| </a> | |
| <a class="sidebar-item" href="#" data-page="signals" onclick="navigateTo('signals'); return false;"> | |
| <span class="emoji">🔔</span> | |
| <span class="sidebar-label">Signal Feed</span> | |
| </a> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="node-status"> | |
| <div class="status-dot"></div> | |
| <span>AFR-1 NODE — CONNECTED</span> | |
| </div> | |
| <div class="node-status mt-sm" style="margin-top:8px;"> | |
| <span style="font-size:9px; color: var(--text-dim);">LATENCY: <span id="nodeLatency">12ms</span></span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- ═══════════════════════════════════════════ | |
| TOPBAR — Ticker & Brand | |
| ═══════════════════════════════════════════ --> | |
| <header class="topbar"> | |
| <div class="brand-group"> | |
| <div class="brand-mark"> | |
| <div class="brand-icon">S</div> | |
| <div> | |
| <div class="brand-text">SPARK</div> | |
| <div class="brand-sub">Sovereign Engine</div> | |
| </div> | |
| </div> | |
| <div class="ticker-strip" id="tickerStrip"> | |
| <!-- Populated by JS --> | |
| </div> | |
| </div> | |
| <div class="topbar-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge" title="Built with anycoder">Built with anycoder</a> | |
| <span class="metric-value sm" id="headerTime" style="font-size:13px; color: var(--text-muted);">--:--:--</span> | |
| </div> | |
| </header> | |
| <!-- ═══════════════════════════════════════════ | |
| MAIN CONTENT — Pages | |
| ═══════════════════════════════════════════ --> | |
| <main class="main-content" id="mainContent"> | |
| <!-- ═══════════════════════════════════ | |
| PAGE: SPARK DASHBOARD | |
| ═══════════════════════════════════ --> | |
| <div class="page-section active" id="page-dashboard"> | |
| <div class="dashboard-grid"> | |
| <!-- Alert Banner --> | |
| <div class="col-12" style="grid-column: 1 / -1;"> | |
| <div class="alert info"> | |
| <span class="alert-icon">ℹ |