22 lines
1.1 KiB
HTML
22 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>How Is My Internet, Really?</title>
|
|
<link rel="stylesheet" href="../shared.css">
|
|
</head>
|
|
<body class="theme-dark">
|
|
<main class="shell">
|
|
<nav class="topline"><a href="../">All demos</a><a href="/demos.php">Website catalog</a></nav>
|
|
<section class="hero"><p class="kicker">Demo 02</p><h1>How Is My Internet, Really?</h1><p>Latency, jitter, and stability on a live Canvas graph. This version uses same-origin probes; a WebSocket echo endpoint is the production-grade path.</p></section>
|
|
<section class="panel">
|
|
<canvas id="network-canvas" width="720" height="220"></canvas>
|
|
<div class="actions"><button id="network-start" type="button">Start</button><button id="network-stop" type="button">Stop</button></div>
|
|
<div class="stats"><span>Latency <strong id="latency-stat">--</strong></span><span>Jitter <strong id="jitter-stat">--</strong></span><span>Stability <strong id="stability-stat">--</strong></span></div>
|
|
</section>
|
|
</main>
|
|
<script src="network-quality.js"></script>
|
|
<script src="../theme.js"></script>
|
|
</body>
|
|
</html>
|