Apq
/
speedtest
mirror of https://github.com/librespeed/speedtest.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							<!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</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript">

//INITIALIZE SPEEDTEST
var s=new Speedtest(); //create speedtest object
s.setParameter("telemetry_level","basic"); //enable telemetry

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;
}
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();
    } else {
        // Check if download speed is greater than 50 Mbit/s
        var dlSpeed = parseFloat(I("dlText").textContent);
        if (dlSpeed > 50) {
            I("speedMessage").textContent = "📽️👍";
        } else {
            I("speedMessage").textContent = "🙄";
        }
    }
}

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);}

// Automatically start the test when the page loads
window.onload = function() {
    startStop();
}
</script>

<style type="text/css">
    html,body{
        border:none; padding:0; margin:0;
        background:#f4f4f9;
        color:#333;
        font-family:"Roboto",sans-serif;
    }
    body{
        text-align:center;
    }
    h1{
        color:#333;
        margin-top:1em;
    }
    #startStopBtn{
        display:inline-block;
        margin:1em auto;
        color:#fff;
        background-color:#007bff;
        border:none;
        border-radius:0.3em;
        transition:all 0.3s;
        box-sizing:border-box;
        width:10em; height:3em;
        line-height:3em;
        cursor:pointer;
        box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
        font-size:1em;
    }
    #startStopBtn:hover{
        background-color:#0056b3;
    }
    #startStopBtn.running{
        background-color:#dc3545;
    }
    #startStopBtn:before{
        content:"Start";
    }
    #startStopBtn.running:before{
        content:"Abort";
    }
    #test{
        margin-top:2em;
        margin-bottom:4em;
    }
    div.testArea{
        display:inline-block;
        width:14em;
        height:9em;
        position:relative;
        box-sizing:border-box;
        margin:1em;
        background:#fff;
        border-radius:0.5em;
        box-shadow:0 0 10px rgba(0,0,0,0.1);
        padding:1em;
    }
    div.testName{
        position:absolute;
        top:0.5em; left:0;
        width:100%;
        font-size:1.2em;
        z-index:9;
        color:#555;
    }
    div.meterText{
        position:absolute;
        bottom:1.5em; left:0;
        width:100%;
        font-size:2.5em;
        z-index:9;
        color:#007bff;
    }
    div.testConclusion{
        position:absolute;
        bottom:2em; left:0;
        width:100%;
        font-size:5em;
        z-index:9;
        color:#333;
	text-shadow:0 0 10px #888;
    }
    #dlText{
        color:#007bff;
    }
    #ulText{
        color:#28a745;
    }
    #pingText,#jitText{
        color:#dc3545;
    }
    div.meterText:empty:before{
        color:#ccc !important;
        content:"0.00";
    }
    div.unit{
        position:absolute;
        bottom:2em; left:0;
        width:100%;
        z-index:9;
        color:#777;
    }
    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;
        }
    }

</style>
</head>
<body>
<h1>LibreSpeed</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">Mbit/s</div>
        </div>
        <div class="testArea">
            <div class="testName">Upload</div>
            <div id="ulText" class="meterText"></div>
            <div class="unit">Mbit/s</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="speedMessage" class="testConclusion">
    </div>
    <div id="ipArea">
        IP Address: <span id="ip"></span>
    </div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a>
<script type="text/javascript">
    initUI();
</script>
</body>
</html>