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>
175 lines
3.8 KiB
HTML
Executable file
175 lines
3.8 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
|
|
//CUSTOM SETTINGS HERE
|
|
s.setParameter("test_order","D_U"); //we only want download and upload test
|
|
s.setParameter("time_auto",false); //fixed duration for tests
|
|
s.setParameter("time_dl_max",10); //10 seconds for the download test
|
|
s.setParameter("time_ul_max",15); //15 seconds for the upload test
|
|
//END OF CUSTOM SETTINGS
|
|
s.onupdate=function(data){ //callback to update data in UI
|
|
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus;
|
|
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
|
|
}
|
|
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="";
|
|
}
|
|
|
|
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;
|
|
}
|
|
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:2vw;
|
|
}
|
|
}
|
|
@media all and (max-width:40em){
|
|
body{
|
|
font-size:0.8em;
|
|
}
|
|
div.testGroup{
|
|
display:block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>LibreSpeed Example</h1>
|
|
<div id="startStopBtn" onclick="startStop()"></div>
|
|
<div id="test">
|
|
<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>
|
|
<a href="https://github.com/librespeed/speedtest" target="_blank" rel="noopener noreferrer">Source code</a>
|
|
<script type="text/javascript">
|
|
initUI();
|
|
</script>
|
|
</body>
|
|
</html>
|