From 4a99f5dae75636cffdf88f850c46b9e5aad43e69 Mon Sep 17 00:00:00 2001
From: bndw <ben@bdw.to>
Date: Sat, 14 Feb 2026 14:14:56 -0800
Subject: style: restyle dashboard to match index page aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Transform metrics dashboard from dark modern theme to classic beige
theme matching the index page.

Changes:
- Background: dark (#0a0a0a) → beige (#f5f0e8)
- Font: sans-serif → Courier New (monospace)
- Colors: vibrant gradients → simple black/brown
- Cards: dark (#1a1a1a) → white with black borders
- Layout: max-width 1200px → 960px (matches index)
- Typography: modern sizing → classic smaller fonts
- Logo: Add muxstr SVG logo matching index page
- Dividers: Add horizontal rules for section breaks
- Status badge: Green gradient → orange/brown (#c97556)
- Removed: Color coding (success/error/warning classes)

Result: Clean, classic, brutalist aesthetic consistent with index page.
The dashboard now feels like part of the same relay, not a separate app.
---
 internal/metrics/dashboard.html | 152 +++++++++++++++++++++++-----------------
 1 file changed, 89 insertions(+), 63 deletions(-)

diff --git a/internal/metrics/dashboard.html b/internal/metrics/dashboard.html
index 63b42ed..489327e 100644
--- a/internal/metrics/dashboard.html
+++ b/internal/metrics/dashboard.html
@@ -5,91 +5,116 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nostr Relay Metrics</title>
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #0a0a0a;
-            color: #e0e0e0;
-            padding: 2rem;
+            font-family: 'Courier New', Courier, monospace;
+            background: #f5f0e8;
+            color: #000;
+            max-width: 960px;
+            margin: 40px auto;
+            padding: 0 20px;
             line-height: 1.6;
         }
-        .container { max-width: 1200px; margin: 0 auto; }
         h1 {
-            font-size: 2rem;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
+            font-size: 18px;
+            font-weight: normal;
+            margin: 20px 0 10px 0;
+        }
+        h2 {
+            font-size: 14px;
+            font-weight: normal;
+            margin: 20px 0 5px 0;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .logo-container {
+            margin: 20px 0 30px 0;
+        }
+        .logo-container svg {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        hr {
+            border: none;
+            border-top: 1px solid #000;
+            margin: 30px 0;
         }
-        .subtitle { color: #888; margin-bottom: 2rem; font-size: 0.9rem; }
         .grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin: 20px 0;
         }
         .card {
-            background: #1a1a1a;
-            border: 1px solid #333;
-            border-radius: 8px;
-            padding: 1.5rem;
-        }
-        .card h2 {
-            font-size: 0.875rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: #888;
-            margin-bottom: 1rem;
+            background: #fff;
+            border: 1px solid #000;
+            padding: 15px;
         }
         .metric {
             display: flex;
             justify-content: space-between;
             align-items: baseline;
-            margin-bottom: 0.75rem;
+            margin-bottom: 8px;
+            font-size: 13px;
+        }
+        .metric-label {
+            color: #666;
         }
-        .metric-label { color: #aaa; font-size: 0.9rem; }
         .metric-value {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #fff;
+            font-weight: bold;
+            font-size: 16px;
+        }
+        .metric-value.large {
+            font-size: 24px;
+        }
+        .metric-unit {
+            font-size: 11px;
+            color: #666;
+            margin-left: 3px;
         }
-        .metric-value.large { font-size: 2.5rem; }
-        .metric-value.success { color: #10b981; }
-        .metric-value.warning { color: #f59e0b; }
-        .metric-value.error { color: #ef4444; }
-        .metric-unit { font-size: 0.875rem; color: #666; margin-left: 0.25rem; }
         .status {
             display: inline-block;
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 600;
+            padding: 2px 8px;
+            border: 1px solid #000;
+            font-size: 11px;
+        }
+        .status.online {
+            background: #c97556;
+            color: #f5f0e8;
         }
-        .status.online { background: #10b98120; color: #10b981; }
-        .status.offline { background: #ef444420; color: #ef4444; }
         .refresh-info {
             text-align: center;
             color: #666;
-            font-size: 0.8rem;
-            margin-top: 2rem;
+            font-size: 11px;
+            margin-top: 30px;
         }
         .error-msg {
-            background: #ef444420;
-            border: 1px solid #ef4444;
-            color: #ef4444;
-            padding: 1rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
+            background: #fff;
+            border: 1px solid #000;
+            padding: 15px;
+            margin-bottom: 20px;
+            color: #000;
+        }
+        a {
+            color: #00e;
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Nostr Relay Metrics</h1>
-        <p class="subtitle">Real-time relay statistics and performance metrics</p>
+    <div class="logo-container">
+        <svg viewBox="0 0 1120 300" xmlns="http://www.w3.org/2000/svg">
+            <rect width="1120" height="300" fill="#c97556"/>
+            <text x="560" y="200" font-family="Arial, Helvetica, sans-serif" font-size="180" font-weight="bold" fill="#f5f0e8" text-anchor="middle">muxstr</text>
+        </svg>
+    </div>
+
+    <h1>Relay Metrics</h1>
+    <p>Real-time statistics and performance data. Auto-refreshes every 5 seconds.</p>
+
+    <div id="error"></div>
 
-        <div id="error"></div>
+    <hr>
 
         <div class="grid">
             <div class="card">
@@ -108,7 +133,7 @@
                 <h2>Connections</h2>
                 <div class="metric">
                     <span class="metric-label">Active</span>
-                    <span class="metric-value large success" id="active_connections">0</span>
+                    <span class="metric-value large" id="active_connections">0</span>
                 </div>
                 <div class="metric">
                     <span class="metric-label">Total</span>
@@ -132,11 +157,11 @@
                 </div>
                 <div class="metric">
                     <span class="metric-label">Success</span>
-                    <span class="metric-value success" id="success_requests">0</span>
+                    <span class="metric-value" id="success_requests">0</span>
                 </div>
                 <div class="metric">
                     <span class="metric-label">Errors</span>
-                    <span class="metric-value error" id="error_requests">0</span>
+                    <span class="metric-value" id="error_requests">0</span>
                 </div>
             </div>
 
@@ -144,11 +169,11 @@
                 <h2>Authentication</h2>
                 <div class="metric">
                     <span class="metric-label">Success</span>
-                    <span class="metric-value success" id="auth_success">0</span>
+                    <span class="metric-value" id="auth_success">0</span>
                 </div>
                 <div class="metric">
                     <span class="metric-label">Failed</span>
-                    <span class="metric-value error" id="auth_failure">0</span>
+                    <span class="metric-value" id="auth_failure">0</span>
                 </div>
             </div>
 
@@ -156,7 +181,7 @@
                 <h2>Rate Limiting</h2>
                 <div class="metric">
                     <span class="metric-label">Blocked</span>
-                    <span class="metric-value warning" id="rate_limit_hits">0</span>
+                    <span class="metric-value" id="rate_limit_hits">0</span>
                 </div>
             </div>
 
@@ -185,8 +210,9 @@
             </div>
         </div>
 
-        <p class="refresh-info">Auto-refreshing every 5 seconds</p>
-    </div>
+    <hr>
+
+    <p class="refresh-info">Auto-refreshing every 5 seconds</p>
 
     <script>
         let processStartTime = null;
-- 
cgit v1.2.3