114 أسطر
4.3 KiB
HTML
114 أسطر
4.3 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 Monitor Dashboard</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1 class="header-title">Mithal.space Monitor</h1>
|
|
<span class="header-subtitle">Real-time Website Health</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="themeToggle" class="theme-toggle" title="Toggle dark mode">
|
|
<span class="icon-sun">☼</span>
|
|
<span class="icon-moon">☾</span>
|
|
</button>
|
|
<div class="refresh-info">
|
|
<span id="countdown" class="countdown">30s</span>
|
|
<button id="refreshBtn" class="refresh-btn" title="Refresh now">↻</button>
|
|
</div>
|
|
<button id="exportCsv" class="export-btn" title="Export CSV">↧ CSV</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div id="loadingIndicator" class="loading-indicator">
|
|
<div class="spinner"></div>
|
|
<span>Loading metrics...</span>
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<section class="cards">
|
|
<div class="card" id="cardStatus">
|
|
<div class="card-label">Current Status</div>
|
|
<div class="card-value" id="currentStatus">--</div>
|
|
<div class="card-indicator" id="statusIndicator"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">HTTP Latency</div>
|
|
<div class="card-value" id="currentLatency">--</div>
|
|
<div class="card-unit">ms</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">DNS Lookup</div>
|
|
<div class="card-value" id="currentDns">--</div>
|
|
<div class="card-unit">ms</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">SSL Remaining</div>
|
|
<div class="card-value" id="currentSsl">--</div>
|
|
<div class="card-unit">days</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">Search Response</div>
|
|
<div class="card-value" id="currentSearch">--</div>
|
|
<div class="card-unit">ms</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-label">Uptime (24h)</div>
|
|
<div class="card-value" id="uptimePercent">--</div>
|
|
<div class="card-unit">%</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Charts -->
|
|
<section class="charts">
|
|
<div class="chart-container">
|
|
<h3>Latency (Last Hour)</h3>
|
|
<canvas id="latencyChart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3>Search Response Time</h3>
|
|
<canvas id="searchChart"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3>DNS Lookup Time</h3>
|
|
<canvas id="dnsChart"></canvas>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Table -->
|
|
<section class="table-section">
|
|
<h3>Latest 10 Checks</h3>
|
|
<div class="table-wrapper">
|
|
<table id="metricsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Timestamp</th>
|
|
<th>HTTP</th>
|
|
<th>Latency (ms)</th>
|
|
<th>DNS (ms)</th>
|
|
<th>SSL Remaining</th>
|
|
<th>Search (ms)</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="metricsBody">
|
|
<tr><td colspan="7" class="no-data">No data available</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|