| <!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>
|
|
|
