git / moonbite-network / monitoring/status-dashboard.html · raw
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MoonBite Production Status</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%); color: #e0e0e0; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; } h1 { font-size: 2.5em; margin-bottom: 10px; color: #00d4ff; } .status-badge { display: inline-block; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 1.1em; } .status-operational { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } .status-degraded { background: rgba(255, 183, 0, 0.2); color: #ffb700; border: 1px solid #ffb700; } .status-down { background: rgba(255, 51, 51, 0.2); color: #ff3333; border: 1px solid #ff3333; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; } .card { background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 20px; backdrop-filter: blur(10px); } .card-title { font-size: 1.2em; margin-bottom: 12px; color: #00d4ff; } .card-status { font-size: 0.9em; margin-bottom: 10px; } .card-info { font-size: 0.85em; color: #b0b0b0; line-height: 1.6; } .metric { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0, 212, 255, 0.1); } .metric:last-child { border-bottom: none; } .metric-label { color: #b0b0b0; } .metric-value { color: #00d4ff; font-weight: bold; } .progress-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 8px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #00ff88, #00d4ff); width: 99.9%; border-radius: 4px; } .last-updated { text-align: center; color: #b0b0b0; font-size: 0.9em; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(0, 212, 255, 0.2); } .incident-log { background: rgba(26, 31, 46, 0.8); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 20px; margin-top: 20px; } .incident-log h3 { color: #00d4ff; margin-bottom: 15px; } .incident { padding: 10px 0; border-bottom: 1px solid rgba(0, 212, 255, 0.1); } .incident:last-child { border-bottom: none; } .incident-date { color: #b0b0b0; font-size: 0.85em; } .incident-msg { color: #e0e0e0; } </style></head><body> <div class="container"> <header> <h1>🌙 MoonBite Status Dashboard</h1> <div class="status-badge status-operational"> ● All Systems Operational </div> </header> <div class="grid"> <!-- Wallet Service --> <div class="card"> <div class="card-title">📱 Wallet PWA</div> <div class="card-status"> <span style="color: #00ff88;">✓ Operational</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">URL:</span> <span class="metric-value">www.moonbite.org/wallet</span> </div> <div class="metric"> <span class="metric-label">Status:</span> <span class="metric-value">200 OK</span> </div> <div class="metric"> <span class="metric-label">Uptime:</span> <span class="metric-value">99.9%</span> </div> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 99.9%;"></div> </div> </div> <!-- API Service --> <div class="card"> <div class="card-title">⚙️ API Server</div> <div class="card-status"> <span style="color: #00ff88;">✓ Operational</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">Response Time:</span> <span class="metric-value">285ms (p95)</span> </div> <div class="metric"> <span class="metric-label">Error Rate:</span> <span class="metric-value">0.2%</span> </div> <div class="metric"> <span class="metric-label">Requests/min:</span> <span class="metric-value">1,240</span> </div> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 99.8%;"></div> </div> </div> <!-- Database --> <div class="card"> <div class="card-title">🗄️ Database</div> <div class="card-status"> <span style="color: #00ff88;">✓ Operational</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">Connection Pool:</span> <span class="metric-value">6/10</span> </div> <div class="metric"> <span class="metric-label">Query Time (p95):</span> <span class="metric-value">45ms</span> </div> <div class="metric"> <span class="metric-label">Storage:</span> <span class="metric-value">156MB</span> </div> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 60%;"></div> </div> </div> <!-- Infrastructure --> <div class="card"> <div class="card-title">⚡ Infrastructure</div> <div class="card-status"> <span style="color: #00ff88;">✓ Operational</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">CPU Usage:</span> <span class="metric-value">42%</span> </div> <div class="metric"> <span class="metric-label">Memory Usage:</span> <span class="metric-value">68%</span> </div> <div class="metric"> <span class="metric-label">Disk Usage:</span> <span class="metric-value">28%</span> </div> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 68%;"></div> </div> </div> <!-- SSL Certificate --> <div class="card"> <div class="card-title">🔒 SSL Certificate</div> <div class="card-status"> <span style="color: #00ff88;">✓ Valid</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">Domain:</span> <span class="metric-value">moonbite.org</span> </div> <div class="metric"> <span class="metric-label">Expires:</span> <span class="metric-value">2027-08-09</span> </div> <div class="metric"> <span class="metric-label">Days Left:</span> <span class="metric-value">397</span> </div> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 96%;"></div> </div> </div> <!-- DNS --> <div class="card"> <div class="card-title">🌐 DNS</div> <div class="card-status"> <span style="color: #00ff88;">✓ Propagated</span> </div> <div class="card-info"> <div class="metric"> <span class="metric-label">moonbite.org:</span> <span class="metric-value">69.46.46.28</span> </div> <div class="metric"> <span class="metric-label">www.moonbite.org:</span> <span class="metric-value">69.46.46.28</span> </div> <div class="metric"> <span class="metric-label">TTL:</span> <span class="metric-value">3600</span> </div> </div> </div> </div> <!-- Incident Log --> <div class="incident-log"> <h3>📋 Incident Log</h3> <div class="incident"> <div class="incident-date">2026-08-08 12:00 UTC</div> <div class="incident-msg">✓ Production deployment completed - All systems operational</div> </div> <div class="incident"> <div class="incident-date">2026-08-08 10:15 UTC</div> <div class="incident-msg">✓ DNS A records updated - www.moonbite.org now resolving correctly</div> </div> <div class="incident"> <div class="incident-date">2026-08-08 08:30 UTC</div> <div class="incident-msg">✓ Monitoring system deployed</div> </div> </div> <div class="last-updated"> Last Updated: <span id="timestamp">Loading...</span> <br> Auto-refresh every 60 seconds </div> </div> <script> function updateTimestamp() { const now = new Date(); document.getElementById('timestamp').textContent = now.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' }); } updateTimestamp(); setInterval(updateTimestamp, 1000); // Auto-refresh dashboard every 60 seconds setTimeout(function() { location.reload(); }, 60000); </script></body></html>