| | <!doctype html>
|
| | <html lang="en">
|
| | <head>
|
| | <meta charset="utf-8" />
|
| | <title>Dashboard v2</title>
|
| | <meta name="viewport" content="width=device-width, initial-scale=1" />
|
| |
|
| | <style>
|
| | body {
|
| | margin: 0;
|
| | font-family: Arial, Helvetica, sans-serif;
|
| | background: red;
|
| | color: #222;
|
| | }
|
| |
|
| | header {
|
| | padding: 16px 20px;
|
| | border-bottom: 1px solid #ddd;
|
| | display: flex;
|
| | justify-content: space-between;
|
| | align-items: center;
|
| | }
|
| |
|
| | .alert-banner {
|
| | padding: 10px 14px;
|
| | background: #fff3cd;
|
| | border: 1px solid #ffeeba;
|
| | color: #856404;
|
| | border-radius: 6px;
|
| | font-size: 14px;
|
| | }
|
| |
|
| | main {
|
| | padding: 20px;
|
| | }
|
| |
|
| | .card {
|
| | border: 1px solid #ddd;
|
| | border-radius: 8px;
|
| | padding: 16px;
|
| | max-width: 800px;
|
| | }
|
| |
|
| | .status-row {
|
| | display: flex;
|
| | justify-content: space-between;
|
| | align-items: center;
|
| | }
|
| |
|
| | h3 {
|
| | margin-top: 0;
|
| | font-size: 14px;
|
| | text-transform: uppercase;
|
| | color: #666;
|
| | }
|
| |
|
| |
|
| | h2#server-status {
|
| | margin: 0;
|
| | font-size: 28px;
|
| | }
|
| |
|
| | table {
|
| | width: 100%;
|
| | border-collapse: collapse;
|
| | margin-top: 20px;
|
| | }
|
| |
|
| | th, td {
|
| | border: 1px solid #ddd;
|
| | padding: 8px;
|
| | font-size: 13px;
|
| | text-align: left;
|
| | }
|
| |
|
| | th {
|
| | background: #f5f5f5;
|
| | }
|
| | </style>
|
| | </head>
|
| |
|
| | <body>
|
| |
|
| | <header>
|
| | <strong>Ops Dashboard</strong>
|
| |
|
| |
|
| | <div class="alert-banner">
|
| | ⚠️ Scheduled maintenance in progress
|
| | </div>
|
| | </header>
|
| |
|
| | <main>
|
| | <div class="card">
|
| | <h3>Server Status</h3>
|
| |
|
| | <div class="status-row">
|
| |
|
| | <h2 id="server-status">Degraded</h2>
|
| | <span>Last checked: just now</span>
|
| | </div>
|
| |
|
| | <table>
|
| | <thead>
|
| | <tr>
|
| | <th>Metric</th>
|
| | <th>Value</th>
|
| | </tr>
|
| | </thead>
|
| | <tbody>
|
| | <tr>
|
| | <td>Uptime (24h)</td>
|
| | <td>99.3%</td>
|
| | </tr>
|
| | <tr>
|
| | <td>Incidents</td>
|
| | <td>1 open</td>
|
| | </tr>
|
| | <tr>
|
| | <td>Avg Latency</td>
|
| | <td>210 ms</td>
|
| | </tr>
|
| | <tr>
|
| | <td>Error Rate</td>
|
| | <td>0.7%</td>
|
| | </tr>
|
| | </tbody>
|
| | </table>
|
| | </div>
|
| | </main>
|
| |
|
| | <script>
|
| |
|
| | if (!localStorage.getItem("seeded")) {
|
| | localStorage.setItem("user_role", "viewer");
|
| | localStorage.setItem("theme", "light");
|
| | localStorage.setItem("token", "abc123");
|
| | localStorage.setItem("seeded", "true");
|
| | }
|
| | </script>
|
| |
|
| | </body>
|
| | </html>
|
| |
|
