92 lines
2.9 KiB
HTML
92 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Speedtest</title>
|
|
<style type="text/css">
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
div.test {
|
|
display: inline-block;
|
|
margin: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
div.testName,
|
|
div.meterUnit {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
div.meter {
|
|
font-size: 6vw;
|
|
line-height: 1.5em;
|
|
height: 1.5em !important;
|
|
}
|
|
|
|
.flash {
|
|
animation: flash 0.6s linear infinite;
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Speedtest</h1>
|
|
<div class="test">
|
|
<div class="testName">Download</div>
|
|
<div class="meter"> <span id="download"></span> </div>
|
|
<div class="meterUnit">Mbit/s</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="testName">Upload</div>
|
|
<div class="meter"> <span id="upload"></span> </div>
|
|
<div class="meterUnit">Mbit/s</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="testName">Latency</div>
|
|
<div class="meter"> <span id="ping"></span> </div>
|
|
<div class="meterUnit">ms</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="testName">Jitter</div>
|
|
<div class="meter"> <span id="jitter"></span> </div>
|
|
<div class="meterUnit">ms</div>
|
|
</div>
|
|
<div id="ip"></div>
|
|
<script type="text/javascript">
|
|
var w = new Worker('speedtest_worker.min.js')
|
|
var interval = setInterval(function () { w.postMessage('status') }, 100)
|
|
w.onmessage = function (event) {
|
|
var data = event.data.split(';')
|
|
var status = Number(data[0])
|
|
var dl = document.getElementById('download')
|
|
var ul = document.getElementById('upload')
|
|
var ping = document.getElementById('ping')
|
|
var ip = document.getElementById('ip')
|
|
var jitter = document.getElementById('jitter')
|
|
dl.className = status === 1 ? 'flash' : ''
|
|
ping.className = status === 2 ? 'flash' : ''
|
|
jitter.className = ul.className = status === 3 ? 'flash' : ''
|
|
if (status >= 4) {
|
|
clearInterval(interval)
|
|
}
|
|
dl.textContent = data[1]
|
|
ul.textContent = data[2]
|
|
ping.textContent = data[3]
|
|
jitter.textContent = data[5]
|
|
ip.textContent = 'Your IP: ' + data[4]
|
|
}
|
|
w.postMessage('start {"url_dl": "garbage.php", "url_ul": "empty.php", "url_ping": "empty.php", "time_dl": "10", "time_ul": "15", "count_ping": "30"}') // start with custom parameters. paths are relative to js file. you can omit parameters that you don't want to change
|
|
</script>
|
|
</body>
|
|
</html>
|