libreprobe/stability.html at main · grayguava/libreprobe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Libreprobe | Stability</title>
  <script src="/assets/vendor/echarts/echarts.min.js"></script>
</head>
<body>

<h1>Network Diagnostics</h1>
<button id="runBtn">
  <span id="runDot"></span>
  <span id="runLabel">Run Test</span>
</button>

<!-- Hero states -->
<div id="heroIdle">
  <h2>How stable is your connection?</h2>
  <p>Measures connection stability — latency and jitter — from your browser to our edge server. Runs 100 probes at 100ms intervals.</p>
</div>

<div id="heroRunning" hidden>
  <p>Measuring…</p>
  <progress id="heroFill"></progress>
  <p id="heroRunSub">Collecting samples</p>
</div>

<div id="heroResult" hidden>
  <p id="heroVerdictLabel"></p>
  <h2 id="heroHeadline"></h2>
  <p id="heroConsequence"></p>
  <div id="heroUsecases"></div>
</div>

<!-- Status -->
<p>
  <span id="statusDot"></span>
  <span id="statusText">Ready</span>
</p>

<!-- Advanced toggle -->
<div id="advancedToggle" hidden>
  <button id="advancedBtn" aria-expanded="false">Advanced ▾</button>
</div>

<div id="advancedPanel">
  <section id="verdict">
    <div id="verdictList"></div>
  </section>

  <h3>Raw Numbers</h3>
  <dl>
    <dt>Median RTT</dt> <dd id="val-median">—</dd>
    <dt>p90 RTT</dt>    <dd id="val-p90">—</dd>
    <dt>Samples</dt>    <dd id="val-samples">—</dd>
    <dt>Min RTT</dt>    <dd id="val-min">—</dd>
    <dt>Max RTT</dt>    <dd id="val-max">—</dd>
    <dt>Jitter (σ)</dt> <dd id="val-jitter">—</dd>
  </dl>

  <h3>Handshake</h3>
  <dl>
    <dt>Cold start <small id="meta-cold">DNS + TCP + TLS</small></dt>     <dd id="val-cold">—</dd>
    <dt>Warm <small id="meta-warm">6 warm-up probes · 50ms</small></dt>   <dd id="val-warm">—</dd>
    <dt>Cold − Warm overhead</dt>                                          <dd id="val-delta">—</dd>
  </dl>
</div>

<!-- Charts -->
<h2>Live RTT <span id="liveTag">idle</span></h2>
<p id="liveIdle">Run a test to see live data</p>
<div id="liveChart" style="width:100%;height:300px;"></div>

<h2>Jitter / Stability <span id="distTag">idle</span></h2>
<p id="distIdle">Available after test completes</p>
<div id="distChart" style="width:100%;height:300px;"></div>

<script type="module">
  import { init } from "/assets/js/apps/getStability.js";
  init();
</script>
</body>
</html>