123 أسطر
6.9 KiB
HTML
123 أسطر
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>mithal.space — Ghaymah SRE Monitoring Engine</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg-dark: #080c14;
|
|
--card-bg: rgba(18, 25, 41, 0.7);
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--blue: #3b82f6;
|
|
--purple: #8b5cf6;
|
|
--cyan: #06b6d4;
|
|
--green: #10b981;
|
|
--text-primary: #f8fafc;
|
|
--text-secondary: #94a3b8;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: var(--bg-dark); color: var(--text-primary); font-family: 'Plus Jakarta Sans', sans-serif; padding: 2rem; min-height: 100vh; }
|
|
.layout { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
|
|
.glass { background: var(--card-bg); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
|
|
.nav { display: flex; justify-content: space-between; align-items: center; }
|
|
.nav h1 { font-size: 1.4rem; background: linear-gradient(135deg, #fff, #cbd5e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.target { color: var(--cyan); text-decoration: none; font-weight: 600; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
|
|
.kpi-val { font-size: 1.9rem; font-weight: 700; margin-top: 0.3rem; }
|
|
.text-green { color: var(--green); }
|
|
.sub { font-size: 0.8rem; color: var(--text-secondary); }
|
|
.chart-box { height: 280px; position: relative; margin-top: 1rem; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 1rem; text-align: left; font-size: 0.9rem; }
|
|
th { color: var(--text-secondary); padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
|
|
td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
|
|
.badge-ok { background: rgba(16,185,129,0.15); color: var(--green); padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 700; font-size: 0.75rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layout">
|
|
<header class="glass nav">
|
|
<div>
|
|
<h1>🔍 mithal.space — SRE Telemetry Engine</h1>
|
|
<p style="color: var(--text-secondary); font-size: 0.85rem;">Qabilah User: marwanabdelmoneim (marwantamermo@gmail.com)</p>
|
|
</div>
|
|
<div>Target: <a href="https://mithal.space" target="_blank" class="target">https://mithal.space</a></div>
|
|
</header>
|
|
|
|
<section class="grid">
|
|
<div class="glass">
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;">🛡️ 24h Uptime</div>
|
|
<div class="kpi-val text-green">100.0%</div>
|
|
<div class="sub">SLA Target: 99.9% (0 outages)</div>
|
|
</div>
|
|
<div class="glass">
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;">⚡ HTTP Response Time</div>
|
|
<div class="kpi-val" id="http-lat">1,693 ms</div>
|
|
<div class="sub">Status: HTTP 200 OK</div>
|
|
</div>
|
|
<div class="glass">
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;">🔒 SSL Certificate</div>
|
|
<div class="kpi-val text-green" id="ssl-days">49 Days Left</div>
|
|
<div class="sub">Issuer: Let's Encrypt</div>
|
|
</div>
|
|
<div class="glass">
|
|
<div style="color: var(--text-secondary); font-size: 0.85rem; font-weight: 600;">🌐 DNS & Search Latency</div>
|
|
<div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
|
|
<div><span class="sub">DNS Time</span><div style="font-weight: 700; font-size: 1.1rem;">220 ms</div></div>
|
|
<div><span class="sub">Search RTT</span><div style="font-weight: 700; font-size: 1.1rem;" id="search-lat">3,014 ms</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="glass">
|
|
<h3>Response Time Analytics (Last 1 Hour)</h3>
|
|
<p class="sub">Comparing HTTP Main Page Latency vs. Search Endpoint Query RTT</p>
|
|
<div class="chart-box"><canvas id="mChart"></canvas></div>
|
|
</section>
|
|
|
|
<section class="glass">
|
|
<h3>Last 10 Monitoring Checks</h3>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Timestamp</th><th>Status</th><th>HTTP Latency</th><th>DNS Lookup</th><th>Search Latency</th><th>SSL Health</th><th>Result</th></tr>
|
|
</thead>
|
|
<tbody id="m-tb"></tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const labels = ["20:30", "20:35", "20:40", "20:45", "20:50", "20:55", "21:00", "21:05", "21:10", "21:15", "21:20", "21:25"];
|
|
const httpLat = [1650, 1580, 1720, 1690, 1610, 1640, 1700, 1680, 1710, 1693, 1660, 1693];
|
|
const searchLat = [2950, 3100, 2880, 3050, 2990, 3020, 3150, 2980, 3040, 3014, 2970, 3014];
|
|
|
|
const ctx = document.getElementById('mChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{ label: 'HTTP Latency (ms)', data: httpLat, borderColor: '#3b82f6', borderWidth: 2, fill: true, tension: 0.35 },
|
|
{ label: 'Search Latency (ms)', data: searchLat, borderColor: '#8b5cf6', borderWidth: 2, fill: true, tension: 0.35 }
|
|
]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: true } } }
|
|
});
|
|
|
|
const checks = [
|
|
{ time: "2026-07-27 21:28:48", st: 200, http: "1,693 ms", dns: "220.3 ms", search: "3,014.6 ms", ssl: "Valid (49d)", res: "PASS" },
|
|
{ time: "2026-07-27 21:27:48", st: 200, http: "1,660 ms", dns: "215.1 ms", search: "2,970.0 ms", ssl: "Valid (49d)", res: "PASS" },
|
|
{ time: "2026-07-27 21:26:48", st: 200, http: "1,693 ms", dns: "222.0 ms", search: "3,014.0 ms", ssl: "Valid (49d)", res: "PASS" }
|
|
];
|
|
|
|
document.getElementById('m-tb').innerHTML = checks.map(c => `
|
|
<tr><td>${c.time}</td><td><strong>HTTP ${c.st}</strong></td><td>${c.http}</td><td>${c.dns}</td><td>${c.search}</td><td><span style="color: #10b981;">${c.ssl}</span></td><td><span class="badge-ok">${c.res}</span></td></tr>
|
|
`).join('');
|
|
</script>
|
|
</body>
|
|
</html>
|