network-performance-monitor
Version:
A comprehensive network performance monitoring tool that continuously tests and tracks your network's performance over time
91 lines (88 loc) • 4.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Performance Monitor</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.0/dist/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.2.1/dist/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1><a href="https://github.com/liamhelmer/network-performance-monitor" target="_blank" rel="noopener">Network Performance Monitor</a></h1>
<p class="attribution">by <a href="https://github.com/liamhelmer" target="_blank" rel="noopener">Liam Helmer</a></p>
<div class="stats">
<div class="stat-card">
<h3>Avg Ping Latency</h3>
<p id="avgPing">--</p>
</div>
<div class="stat-card">
<h3>Avg Website Response</h3>
<p id="avgWebsite">--</p>
</div>
<div class="stat-card">
<h3>Avg Download Speed</h3>
<p id="avgDownload">--</p>
</div>
<div class="stat-card">
<h3>Avg Upload Speed</h3>
<p id="avgUpload">--</p>
</div>
</div>
</header>
<div class="controls">
<div class="time-buttons">
<button class="time-btn active" data-period="1h">1 Hour</button>
<button class="time-btn" data-period="1d">1 Day</button>
<button class="time-btn" data-period="1w">1 Week</button>
<button class="time-btn" data-period="1m">1 Month</button>
<button class="time-btn" data-period="1y">1 Year</button>
<button class="time-btn" data-period="all">All Data</button>
</div>
<div class="controls-right">
<div class="network-selector">
<label for="networkSelect">Network:</label>
<select id="networkSelect">
<option value="">Loading...</option>
</select>
</div>
<div class="auto-refresh-control">
<label class="toggle-switch">
<input type="checkbox" id="autoRefreshToggle" checked>
<span class="slider"></span>
</label>
<span class="auto-refresh-label">Auto Refresh</span>
<span id="refreshStatus" class="refresh-status">(30s)</span>
</div>
<div class="info">
<span id="dataRange"></span>
</div>
</div>
</div>
<div class="charts">
<div class="chart-container">
<div class="chart-header">
<h2>Speed Tests</h2>
<button id="manualSpeedTestBtn" class="speed-test-btn">Initiate Speed Test</button>
</div>
<canvas id="speedChart"></canvas>
</div>
<div class="chart-container">
<h2>Ping Latency</h2>
<canvas id="latencyChart"></canvas>
</div>
<div class="chart-container">
<h2>Website Response Time</h2>
<canvas id="websiteChart"></canvas>
</div>
</div>
</div>
<script src="app.js?v=3"></script>
</body>
</html>