e5496fcf90
This just makes the links to the source code and Chart.js open in a new tab. The `rel="noopener noreferrer"` has been added to prevent security issues in older browsers. This is just an ease of use change that doesn't affect any of the core speedtest functionality in any way. Signed-off-by: Matthew Nickson <mnickson@sidingsmedia.com>
213 lines
4.6 KiB
HTML
Executable file
213 lines
4.6 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
|
|
<title>LibreSpeed Example</title>
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<script type="text/javascript" src="speedtest.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
//INITIALIZE SPEEDTEST
|
|
var s=new Speedtest(); //create speedtest object
|
|
s.onupdate=function(data){ //callback to update data in UI
|
|
I("ip").textContent=data.clientIp;
|
|
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus;
|
|
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
|
|
I("pingText").textContent=data.pingStatus;
|
|
I("jitText").textContent=data.jitterStatus;
|
|
var prog=(Number(data.dlProgress)*2+Number(data.ulProgress)*2+Number(data.pingProgress))/5;
|
|
I("progress").style.width=(100*prog)+"%";
|
|
}
|
|
s.onend=function(aborted){ //callback for test ended/aborted
|
|
I("startStopBtn").className=""; //show start button again
|
|
if(aborted){ //if the test was aborted, clear the UI and prepare for new test
|
|
initUI();
|
|
}
|
|
}
|
|
|
|
function startStop(){ //start/stop button pressed
|
|
if(s.getState()==3){
|
|
//speedtest is running, abort
|
|
s.abort();
|
|
}else{
|
|
//test is not running, begin
|
|
s.start();
|
|
I("startStopBtn").className="running";
|
|
}
|
|
}
|
|
|
|
//function to (re)initialize UI
|
|
function initUI(){
|
|
I("dlText").textContent="";
|
|
I("ulText").textContent="";
|
|
I("pingText").textContent="";
|
|
I("jitText").textContent="";
|
|
I("ip").textContent="";
|
|
}
|
|
|
|
function I(id){return document.getElementById(id);}
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
html,body{
|
|
border:none; padding:0; margin:0;
|
|
background:#FFFFFF;
|
|
color:#202020;
|
|
}
|
|
body{
|
|
text-align:center;
|
|
font-family:"Roboto",sans-serif;
|
|
}
|
|
h1{
|
|
color:#404040;
|
|
}
|
|
#startStopBtn{
|
|
display:inline-block;
|
|
margin:0 auto;
|
|
color:#6060AA;
|
|
background-color:rgba(0,0,0,0);
|
|
border:0.15em solid #6060FF;
|
|
border-radius:0.3em;
|
|
transition:all 0.3s;
|
|
box-sizing:border-box;
|
|
width:8em; height:3em;
|
|
line-height:2.7em;
|
|
cursor:pointer;
|
|
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
|
|
}
|
|
#startStopBtn:hover{
|
|
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
|
|
}
|
|
#startStopBtn.running{
|
|
background-color:#FF3030;
|
|
border-color:#FF6060;
|
|
color:#FFFFFF;
|
|
}
|
|
#startStopBtn:before{
|
|
content:"Start";
|
|
}
|
|
#startStopBtn.running:before{
|
|
content:"Abort";
|
|
}
|
|
#test{
|
|
margin-top:2em;
|
|
margin-bottom:12em;
|
|
}
|
|
div.testArea{
|
|
display:inline-block;
|
|
width:14em;
|
|
height:9em;
|
|
position:relative;
|
|
box-sizing:border-box;
|
|
}
|
|
div.testName{
|
|
position:absolute;
|
|
top:0.1em; left:0;
|
|
width:100%;
|
|
font-size:1.4em;
|
|
z-index:9;
|
|
}
|
|
div.meterText{
|
|
position:absolute;
|
|
bottom:1.5em; left:0;
|
|
width:100%;
|
|
font-size:2.5em;
|
|
z-index:9;
|
|
}
|
|
#dlText{
|
|
color:#6060AA;
|
|
}
|
|
#ulText{
|
|
color:#309030;
|
|
}
|
|
#pingText,#jitText{
|
|
color:#AA6060;
|
|
}
|
|
div.meterText:empty:before{
|
|
color:#505050 !important;
|
|
content:"0.00";
|
|
}
|
|
div.unit{
|
|
position:absolute;
|
|
bottom:2em; left:0;
|
|
width:100%;
|
|
z-index:9;
|
|
}
|
|
div.testGroup{
|
|
display:inline-block;
|
|
}
|
|
@media all and (max-width:65em){
|
|
body{
|
|
font-size:1.5vw;
|
|
}
|
|
}
|
|
@media all and (max-width:40em){
|
|
body{
|
|
font-size:0.8em;
|
|
}
|
|
div.testGroup{
|
|
display:block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
#progressBar{
|
|
width:90%;
|
|
height:0.3em;
|
|
background-color:#EEEEEE;
|
|
position:relative;
|
|
display:block;
|
|
margin:0 auto;
|
|
margin-bottom:2em;
|
|
}
|
|
#progress{
|
|
position:absolute;
|
|
top:0; left:0;
|
|
height:100%;
|
|
width:0%;
|
|
transition: width 2s;
|
|
background-color:#90BBFF;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>LibreSpeed Example</h1>
|
|
<div id="startStopBtn" onclick="startStop()"></div>
|
|
<div id="test">
|
|
<div id="progressBar"><div id="progress"></div></div>
|
|
<div class="testGroup">
|
|
<div class="testArea">
|
|
<div class="testName">Download</div>
|
|
<div id="dlText" class="meterText"></div>
|
|
<div class="unit">Mbps</div>
|
|
</div>
|
|
<div class="testArea">
|
|
<div class="testName">Upload</div>
|
|
<div id="ulText" class="meterText"></div>
|
|
<div class="unit">Mbps</div>
|
|
</div>
|
|
</div>
|
|
<div class="testGroup">
|
|
<div class="testArea">
|
|
<div class="testName">Ping</div>
|
|
<div id="pingText" class="meterText"></div>
|
|
<div class="unit">ms</div>
|
|
</div>
|
|
<div class="testArea">
|
|
<div class="testName">Jitter</div>
|
|
<div id="jitText" class="meterText"></div>
|
|
<div class="unit">ms</div>
|
|
</div>
|
|
</div>
|
|
<div id="ipArea">
|
|
IP Address: <span id="ip"></span>
|
|
</div>
|
|
</div>
|
|
<a href="https://github.com/librespeed/speedtest" target="_blank" rel="noopener noreferrer">Source code</a>
|
|
<script type="text/javascript">
|
|
initUI();
|
|
</script>
|
|
</body>
|
|
</html>
|