Restructure repository for final submission

2026-07-28 13:22:05 +00:00
--- a/q5-mithal-monitor/templates/dashboard.html
+++ b/q5-mithal-monitor/templates/dashboard.html
@@ -0,0 +1,280 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mithal Monitoring Dashboard</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<style>
+
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    font-family:Arial,Helvetica,sans-serif;
+}
+
+body{
+    background:#0f172a;
+    color:white;
+    padding:30px;
+}
+
+.container{
+    max-width:1400px;
+    margin:auto;
+}
+
+h1{
+    text-align:center;
+    margin-bottom:30px;
+}
+
+.grid{
+    display:grid;
+    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
+    gap:20px;
+    margin-bottom:25px;
+}
+
+.card{
+    background:#1e293b;
+    border-radius:12px;
+    padding:20px;
+    box-shadow:0 0 10px rgba(0,0,0,.3);
+}
+
+.card h3{
+    color:#94a3b8;
+    margin-bottom:15px;
+}
+
+.value{
+    font-size:32px;
+    font-weight:bold;
+}
+
+.green{
+    color:#22c55e;
+}
+
+.red{
+    color:#ef4444;
+}
+
+.orange{
+    color:#f59e0b;
+}
+
+.chart{
+    background:#1e293b;
+    padding:20px;
+    border-radius:12px;
+    margin-bottom:25px;
+}
+
+.table-card{
+    background:#1e293b;
+    border-radius:12px;
+    padding:20px;
+}
+
+table{
+    width:100%;
+    border-collapse:collapse;
+}
+
+th{
+    background:#334155;
+    padding:12px;
+}
+
+td{
+    text-align:center;
+    padding:10px;
+    border-bottom:1px solid #334155;
+}
+
+footer{
+    text-align:center;
+    margin-top:25px;
+    color:#94a3b8;
+}
+
+</style>
+</head>
+<body>
+
+<div class="container">
+
+<h1>🚀 Mithal.space Monitoring Dashboard</h1>
+
+<div class="grid">
+
+<div class="card">
+<h3>Status</h3>
+<div id="status" class="value green">Loading...</div>
+</div>
+
+<div class="card">
+<h3>HTTP Latency</h3>
+<div id="latency" class="value">--</div>
+</div>
+
+<div class="card">
+<h3>DNS Lookup</h3>
+<div id="dns" class="value">--</div>
+</div>
+
+<div class="card">
+<h3>Search Response</h3>
+<div id="search" class="value">--</div>
+</div>
+
+<div class="card">
+<h3>SSL Days Left</h3>
+<div id="ssl" class="value">--</div>
+</div>
+
+<div class="card">
+<h3>24h Uptime</h3>
+<div id="uptime" class="value">--</div>
+</div>
+
+</div>
+
+<div class="chart">
+<canvas id="latencyChart"></canvas>
+</div>
+
+<div class="table-card">
+<h2 style="margin-bottom:20px;">Last 10 Checks</h2>
+<table>
+<thead>
+<tr>
+<th>Time</th>
+<th>Status</th>
+<th>Latency</th>
+<th>DNS</th>
+<th>Search</th>
+<th>SSL Days</th>
+</tr>
+</thead>
+<tbody id="history"></tbody>
+</table>
+</div>
+
+<footer>Updates every 60 seconds</footer>
+
+</div>
+
+<script>
+
+let chart;
+
+async function loadData(){
+
+    const response = await fetch("/api/metrics");
+    const data = await response.json();
+
+    if(data.length === 0){
+        return;
+    }
+
+    const latest = data[data.length - 1];
+
+    document.getElementById("status").innerHTML =
+        latest.uptime
+        ? '<span class="green">● ONLINE</span>'
+        : '<span class="red">● OFFLINE</span>';
+
+    document.getElementById("latency").innerHTML = latest.latency_ms + " ms";
+    document.getElementById("dns").innerHTML = latest.dns_ms + " ms";
+    document.getElementById("search").innerHTML = latest.search_latency_ms + " ms";
+    document.getElementById("ssl").innerHTML = latest.ssl_days_left + " days";
+
+    const uptimePercent = (
+        data.filter(x => x.uptime).length / data.length * 100
+    ).toFixed(2);
+
+    document.getElementById("uptime").innerHTML = uptimePercent + "%";
+
+    const labels = data.slice(-60).map(x => x.timestamp.split(" ")[1]);
+    const latency = data.slice(-60).map(x => x.latency_ms);
+
+    if(chart){
+        chart.destroy();
+    }
+
+    chart = new Chart(
+        document.getElementById("latencyChart"),
+        {
+            type: "line",
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: "Latency (ms)",
+                    data: latency,
+                    borderWidth: 3,
+                    fill: false,
+                    tension: .3,
+                    borderColor: "#38bdf8"
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: "white"
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        ticks: {
+                            color: "white"
+                        }
+                    },
+                    y: {
+                        ticks: {
+                            color: "white"
+                        }
+                    }
+                }
+            }
+        }
+    );
+
+    const tbody = document.getElementById("history");
+    tbody.innerHTML = "";
+
+    data.slice(-10).reverse().forEach(row => {
+        tbody.innerHTML += `
+            <tr>
+                <td>${row.timestamp}</td>
+                <td>
+                    ${row.uptime
+                        ? '<span class="green">Online</span>'
+                        : '<span class="red">Offline</span>'}
+                </td>
+                <td>${row.latency_ms} ms</td>
+                <td>${row.dns_ms} ms</td>
+                <td>${row.search_latency_ms} ms</td>
+                <td>${row.ssl_days_left} days</td>
+            </tr>
+        `;
+    });
+
+}
+
+loadData();
+setInterval(loadData, 60000);
+
+</script>
+
+</body>
+</html>
+