

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

