beenull/speedtest
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Implemented Minimal DARKMode

Browse source
This commit is contained in:
TheSheref 2021-11-05 11:03:34 +02:00
parent eca7f06e21
commit 247fa1103c
6 changed files with 1263 additions and 399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
example-singleServer-chart.html
View file

@ -35,11 +35,82 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.theme-switch-wrapper {
margin: 20px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> <!--THIS LIBRARY SUCKS!--> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> <!--THIS LIBRARY SUCKS!-->
<script src="speedtest.js"></script> <script src="speedtest.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var s = null var s = null;
var xAxesColor='#000';
var yAxesColor='#000';
function runTest() { function runTest() {
var chart1ctx = document.getElementById('chart1Area').getContext('2d') var chart1ctx = document.getElementById('chart1Area').getContext('2d')
var chart2ctx = document.getElementById('chart2Area').getContext('2d') var chart2ctx = document.getElementById('chart2Area').getContext('2d')
@ -150,6 +221,11 @@
}, },
ticks: { ticks: {
beginAtZero: true beginAtZero: true
},
gridLines: {
display: true ,
color:xAxesColor,
lineWidth:0.1
} }
}], }],
yAxes: [{ yAxes: [{
@ -157,6 +233,11 @@
scaleLabel: 'Speed', scaleLabel: 'Speed',
ticks: { ticks: {
beginAtZero: true beginAtZero: true
},
gridLines: {
display:true,
color:yAxesColor,
lineWidth:0.1
} }
}] }]
} }
@ -180,6 +261,11 @@
}, },
ticks: { ticks: {
beginAtZero: true beginAtZero: true
},
gridLines: {
display: true ,
color:xAxesColor,
lineWidth:0.1
} }
}], }],
yAxes: [{ yAxes: [{
@ -187,6 +273,11 @@
scaleLabel: 'Latency', scaleLabel: 'Latency',
ticks: { ticks: {
beginAtZero: true beginAtZero: true
},
gridLines: {
display:true,
color:yAxesColor,
lineWidth:0.1
} }
}] }]
} }
@ -251,6 +342,58 @@
<a href="javascript:abortTest()" id="abortBtn">Abort</a> <a href="javascript:abortTest()" id="abortBtn">Abort</a>
</div> </div>
<a href="javascript:runTest()" id="startBtn">Run speedtest</a> <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
<div id='darkMode'>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</div>
<br/><br/> Charts by <a href="http://www.chartjs.org/">Chart.js</a><br/><br/><a href="https://github.com/librespeed/speedtest">Source code</a> <br/><br/> Charts by <a href="http://www.chartjs.org/">Chart.js</a><br/><br/><a href="https://github.com/librespeed/speedtest">Source code</a>
<script>
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startBtn").style.border =
"0.15em solid #fff";
document.querySelector("#startBtn").style.color = "#fff";
xAxesColor="#fff";
yAxesColor="#fff";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startBtn").style.border =
"0.15em solid #000";
document.querySelector("#startBtn").style.color = "#6060AA";
xAxesColor="#000";
yAxesColor="#000";
countToggleDark = 0;
}
}
</script>
</body> </body>
</html> </html>

125
example-singleServer-customSettings.html
View file

@ -78,9 +78,9 @@ function I(id){return document.getElementById(id);}
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1); box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
} }
#startStopBtn.running{ #startStopBtn.running{
background-color:#FF3030; background-color:#FF3030!important;
border-color:#FF6060; border-color:#FF6060!important;
color:#FFFFFF; color:#FFFFFF!important;
} }
#startStopBtn:before{ #startStopBtn:before{
content:"Start"; content:"Start";
@ -147,6 +147,74 @@ function I(id){return document.getElementById(id);}
} }
} }
.theme-switch-wrapper {
margin: 20px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
</head> </head>
<body> <body>
@ -166,9 +234,60 @@ function I(id){return document.getElementById(id);}
</div> </div>
</div> </div>
</div> </div>
<div id='darkMode'>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a> <a href="https://github.com/librespeed/speedtest">Source code</a>
<script type="text/javascript"> <script type="text/javascript">
initUI(); initUI();
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #996cb4";
document.querySelector("#startStopBtn").style.color = "#996cb4";
document.querySelector("h1").style.color = "#d3cfcf";
document.querySelector("#dlText").style.color = "#996cb4";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #6060FF";
document.querySelector("#startStopBtn").style.color = "#6060AA";
document.querySelector("h1").style.color = "#404040";
document.querySelector("#dlText").style.color = "#000";
countToggleDark = 0;
}
}
</script> </script>
</body> </body>
</html> </html>

143
example-singleServer-full.html
View file

@ -154,9 +154,9 @@ function initUI(){
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1); box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
} }
#startStopBtn.running{ #startStopBtn.running{
background-color:#FF3030; background-color:#FF3030!important;
border-color:#FF6060; border-color:#FF6060!important;
color:#FFFFFF; color:#FFFFFF!important;
} }
#startStopBtn:before{ #startStopBtn:before{
content:"Start"; content:"Start";
@ -272,6 +272,78 @@ function initUI(){
font-size:0.8em; font-size:0.8em;
} }
} }
#darkMode{
margin-top:-100px;
}
.theme-switch-wrapper {
margin:5px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
<title>LibreSpeed Example</title> <title>LibreSpeed Example</title>
</head> </head>
@ -317,6 +389,15 @@ function initUI(){
<img src="" id="resultsImg" /> <img src="" id="resultsImg" />
</div> </div>
</div> </div>
<div id='darkMode'>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</div>
<a href="https://github.com/librespeed/speedtest">Source code</a> <a href="https://github.com/librespeed/speedtest">Source code</a>
</div> </div>
<div id="privacyPolicy" style="display:none"> <div id="privacyPolicy" style="display:none">
@ -360,6 +441,60 @@ function initUI(){
</div> </div>
<br/> <br/>
</div> </div>
<script type="text/javascript">setTimeout(function(){initUI()},100);</script> <script type="text/javascript">
setTimeout(function(){initUI()},100);
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #996cb4";
document.querySelector("#startStopBtn").style.color = "#996cb4";
document.querySelector("h1").style.color = "#d3cfcf";
document.querySelector("#dlText").style.color = "#996cb4";
document.querySelector("#pingText").style.color = "#b92323";
document.querySelector("#jitText").style.color = "#b92323";
ulColor='#fff';
meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#c7c7c7";
progColor="#fff";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #6060FF";
document.querySelector("#startStopBtn").style.color = "#6060AA";
document.querySelector("h1").style.color = "#404040";
document.querySelector("#dlText").style.color = "#000";
document.querySelector("#pingText").style.color = "#AA6060";
document.querySelector("#jitText").style.color = "#AA6060";
ulColor='#616161';
meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
progColor=meterBk;
countToggleDark = 0;
}
}
</script>
</body> </body>
</html> </html>

144
example-singleServer-gauges.html
View file

@ -139,9 +139,9 @@ function initUI(){
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1); box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
} }
#startStopBtn.running{ #startStopBtn.running{
background-color:#FF3030; background-color: #ff3030 !important;
border-color:#FF6060; border-color: #ff6060 !important;
color:#FFFFFF; color: #ffffff !important;
} }
#startStopBtn:before{ #startStopBtn:before{
content:"Start"; content:"Start";
@ -217,6 +217,78 @@ function initUI(){
font-size:0.8em; font-size:0.8em;
} }
} }
#darkMode{
margin-top:-100px;
}
.theme-switch-wrapper {
margin:5px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
<title>LibreSpeed Example</title> <title>LibreSpeed Example</title>
</head> </head>
@ -254,9 +326,73 @@ function initUI(){
<div id="ipArea"> <div id="ipArea">
<span id="ip"></span> <span id="ip"></span>
</div> </div>
</div>
<div id='darkMode'>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</div>
</label>
</div> </div>
<a href="https://github.com/librespeed/speedtest">Source code</a> <a href="https://github.com/librespeed/speedtest">Source code</a>
</div> </div>
<script type="text/javascript">setTimeout(function(){initUI()},100);</script> <script type="text/javascript">
setTimeout(function(){initUI()},100);
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #996cb4";
document.querySelector("#startStopBtn").style.color = "#996cb4";
document.querySelector("h1").style.color = "#d3cfcf";
document.querySelector("#dlText").style.color = "#996cb4";
document.querySelector("#pingText").style.color = "#b92323";
document.querySelector("#jitText").style.color = "#b92323";
ulColor='#fff';
meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#c7c7c7";
progColor="#fff";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #6060FF";
document.querySelector("#startStopBtn").style.color = "#6060AA";
document.querySelector("h1").style.color = "#404040";
document.querySelector("#dlText").style.color = "#000";
document.querySelector("#pingText").style.color = "#AA6060";
document.querySelector("#jitText").style.color = "#AA6060";
ulColor='#616161';
meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
progColor=meterBk;
countToggleDark = 0;
}
}
</script>
</body> </body>
</html> </html>

218
example-singleServer-pretty.html
View file

@ -2,29 +2,37 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
/>
<title>LibreSpeed Example</title> <title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="speedtest.js"></script> <script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//INITIALIZE SPEEDTEST //INITIALIZE SPEEDTEST
var s = new Speedtest(); //create speedtest object var s = new Speedtest(); //create speedtest object
s.onupdate=function(data){ //callback to update data in UI s.onupdate = function (data) {
//callback to update data in UI
I("ip").textContent = data.clientIp; I("ip").textContent = data.clientIp;
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus; I("dlText").textContent =
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus; 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("pingText").textContent = data.pingStatus;
I("jitText").textContent = data.jitterStatus; I("jitText").textContent = data.jitterStatus;
} };
s.onend=function(aborted){ //callback for test ended/aborted s.onend = function (aborted) {
//callback for test ended/aborted
I("startStopBtn").className = ""; //show start button again I("startStopBtn").className = ""; //show start button again
if(aborted){ //if the test was aborted, clear the UI and prepare for new test if (aborted) {
//if the test was aborted, clear the UI and prepare for new test
initUI(); initUI();
} }
} };
function startStop(){ //start/stop button pressed function startStop() {
//start/stop button pressed
if (s.getState() == 3) { if (s.getState() == 3) {
//speedtest is running, abort //speedtest is running, abort
s.abort(); s.abort();
@ -44,54 +52,69 @@ function initUI(){
I("ip").textContent = ""; I("ip").textContent = "";
} }
function I(id){return document.getElementById(id);} function I(id) {
return document.getElementById(id);
}
</script> </script>
<style type="text/css"> <style type="text/css">
html,body{ html,
border:none; padding:0; margin:0; body {
background:#FFFFFF; border: none;
padding: 0;
margin: 0;
background: #ffffff;
color: #202020; color: #202020;
} }
body { body {
text-align: center; text-align: center;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
h1 { h1 {
color: #404040; color: #404040;
} }
#startStopBtn { #startStopBtn {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
color:#6060AA; color: #6060aa;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border:0.15em solid #6060FF; border: 0.15em solid #6060ff;
border-radius: 0.3em; border-radius: 0.3em;
transition: all 0.3s; transition: all 0.3s;
box-sizing: border-box; box-sizing: border-box;
width:8em; height:3em; width: 8em;
height: 3em;
line-height: 2.7em; line-height: 2.7em;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1);
} }
#startStopBtn:hover { #startStopBtn:hover {
box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1); box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1);
} }
#startStopBtn.running { #startStopBtn.running {
background-color:#FF3030; background-color: #ff3030 !important;
border-color:#FF6060; border-color: #ff6060 !important;
color:#FFFFFF; color: #ffffff !important;
} }
#startStopBtn:before { #startStopBtn:before {
content: "Start"; content: "Start";
} }
#startStopBtn.running:before { #startStopBtn.running:before {
content: "Abort"; content: "Abort";
} }
#test { #test {
margin-top: 2em; margin-top: 2em;
margin-bottom: 12em; margin-bottom: 12em;
} }
div.testArea { div.testArea {
display: inline-block; display: inline-block;
width: 14em; width: 14em;
@ -99,59 +122,143 @@ function I(id){return document.getElementById(id);}
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
div.testName { div.testName {
position: absolute; position: absolute;
top:0.1em; left:0; top: 0.1em;
left: 0;
width: 100%; width: 100%;
font-size: 1.4em; font-size: 1.4em;
z-index: 9; z-index: 9;
} }
div.meterText { div.meterText {
position: absolute; position: absolute;
bottom:1.5em; left:0; bottom: 1.5em;
left: 0;
width: 100%; width: 100%;
font-size: 2.5em; font-size: 2.5em;
z-index: 9; z-index: 9;
} }
#dlText { #dlText {
color:#6060AA; color: #6060aa;
} }
#ulText { #ulText {
color: #309030; color: #309030;
} }
#pingText,#jitText{
color:#AA6060; #pingText,
#jitText {
color: #aa6060;
} }
div.meterText:empty:before { div.meterText:empty:before {
color: #505050 !important; color: #505050 !important;
content: "0.00"; content: "0.00";
} }
div.unit { div.unit {
position: absolute; position: absolute;
bottom:2em; left:0; bottom: 2em;
left: 0;
width: 100%; width: 100%;
z-index: 9; z-index: 9;
} }
div.testGroup { div.testGroup {
display: inline-block; display: inline-block;
} }
@media all and (max-width: 65em) { @media all and (max-width: 65em) {
body { body {
font-size: 1.5vw; font-size: 1.5vw;
} }
} }
@media all and (max-width: 40em) { @media all and (max-width: 40em) {
body { body {
font-size: 0.8em; font-size: 0.8em;
} }
div.testGroup { div.testGroup {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
.theme-switch-wrapper {
margin: 20px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div> <div id="startStopBtn" onclick="startStop()"></div>
@ -180,13 +287,66 @@ function I(id){return document.getElementById(id);}
<div class="unit">ms</div> <div class="unit">ms</div>
</div> </div>
</div> </div>
<div id="ipArea"> <div id="ipArea">IP Address: <span id="ip"></span></div>
IP Address: <span id="ip"></span>
</div> </div>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</label>
</div> </div>
<a href="https://github.com/librespeed/speedtest">Source code</a> <a href="https://github.com/librespeed/speedtest">Source code</a>
<script type="text/javascript"> <script type="text/javascript">
initUI(); initUI();
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #996cb4";
document.querySelector("#startStopBtn").style.color = "#996cb4";
document.querySelector("h1").style.color = "#d3cfcf";
document.querySelector("#dlText").style.color = "#996cb4";
document.querySelector("#pingText").style.color = "#b92323";
document.querySelector("#jitText").style.color = "#b92323";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startStopBtn").style.border =
"0.15em solid #6060FF";
document.querySelector("#startStopBtn").style.color = "#6060AA";
document.querySelector("h1").style.color = "#404040";
document.querySelector("#dlText").style.color = "#6060AA";
document.querySelector("#pingText").style.color = "#AA6060";
document.querySelector("#jitText").style.color = "#AA6060";
countToggleDark = 0;
}
}
</script> </script>
</body> </body>
</html> </html>

241
example-singleServer-progressBar.html
View file

@ -2,31 +2,43 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"
/>
<title>LibreSpeed Example</title> <title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="speedtest.js"></script> <script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//INITIALIZE SPEEDTEST //INITIALIZE SPEEDTEST
var s = new Speedtest(); //create speedtest object var s = new Speedtest(); //create speedtest object
s.onupdate=function(data){ //callback to update data in UI s.onupdate = function (data) {
//callback to update data in UI
I("ip").textContent = data.clientIp; I("ip").textContent = data.clientIp;
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus; I("dlText").textContent =
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus; 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("pingText").textContent = data.pingStatus;
I("jitText").textContent = data.jitterStatus; I("jitText").textContent = data.jitterStatus;
var prog=(Number(data.dlProgress)*2+Number(data.ulProgress)*2+Number(data.pingProgress))/5; var prog =
I("progress").style.width=(100*prog)+"%"; (Number(data.dlProgress) * 2 +
} Number(data.ulProgress) * 2 +
s.onend=function(aborted){ //callback for test ended/aborted 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 I("startStopBtn").className = ""; //show start button again
if(aborted){ //if the test was aborted, clear the UI and prepare for new test if (aborted) {
//if the test was aborted, clear the UI and prepare for new test
initUI(); initUI();
} }
} };
function startStop(){ //start/stop button pressed function startStop() {
//start/stop button pressed
if (s.getState() == 3) { if (s.getState() == 3) {
//speedtest is running, abort //speedtest is running, abort
s.abort(); s.abort();
@ -46,54 +58,69 @@ function initUI(){
I("ip").textContent = ""; I("ip").textContent = "";
} }
function I(id){return document.getElementById(id);} function I(id) {
return document.getElementById(id);
}
</script> </script>
<style type="text/css"> <style type="text/css">
html,body{ html,
border:none; padding:0; margin:0; body {
background:#FFFFFF; border: none;
padding: 0;
margin: 0;
background: #fdfdfd;
color: #202020; color: #202020;
} }
body { body {
text-align: center; text-align: center;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
h1 { h1 {
color: #404040; color: #404040;
} }
#startStopBtn { #startStopBtn {
display: inline-block; display: inline-block;
margin: 0 auto; margin: 0 auto;
color:#6060AA; color: #6060aa;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border:0.15em solid #6060FF; border: 0.15em solid #6060ff;
border-radius: 0.3em; border-radius: 0.3em;
transition: all 0.3s; transition: all 0.3s;
box-sizing: border-box; box-sizing: border-box;
width:8em; height:3em; width: 8em;
height: 3em;
line-height: 2.7em; line-height: 2.7em;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(0, 0, 0, 0.1);
} }
#startStopBtn:hover { #startStopBtn:hover {
box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1); box-shadow: 0 0 2em rgba(0, 0, 0, 0.1), inset 0 0 1em rgba(0, 0, 0, 0.1);
} }
#startStopBtn.running { #startStopBtn.running {
background-color:#FF3030; background-color: #ff3030 !important;
border-color:#FF6060; border-color: #ff6060 !important;
color:#FFFFFF; color: #ffffff !important;
} }
#startStopBtn:before { #startStopBtn:before {
content: "Start"; content: "Start";
} }
#startStopBtn.running:before { #startStopBtn.running:before {
content: "Abort"; content: "Abort";
} }
#test { #test {
margin-top: 2em; margin-top: 2em;
margin-bottom: 12em; margin-bottom: 12em;
} }
div.testArea { div.testArea {
display: inline-block; display: inline-block;
width: 14em; width: 14em;
@ -101,81 +128,170 @@ function I(id){return document.getElementById(id);}
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
div.testName { div.testName {
position: absolute; position: absolute;
top:0.1em; left:0; top: 0.1em;
left: 0;
width: 100%; width: 100%;
font-size: 1.4em; font-size: 1.4em;
z-index: 9; z-index: 9;
} }
div.meterText { div.meterText {
position: absolute; position: absolute;
bottom:1.5em; left:0; bottom: 1.5em;
left: 0;
width: 100%; width: 100%;
font-size: 2.5em; font-size: 2.5em;
z-index: 9; z-index: 9;
} }
#dlText { #dlText {
color:#6060AA; color: #6060aa;
} }
#ulText { #ulText {
color: #309030; color: #309030;
} }
#pingText,#jitText{
color:#AA6060; #pingText,
#jitText {
color: #aa6060;
} }
div.meterText:empty:before { div.meterText:empty:before {
color: #505050 !important; color: #505050 !important;
content: "0.00"; content: "0.00";
} }
div.unit { div.unit {
position: absolute; position: absolute;
bottom:2em; left:0; bottom: 2em;
left: 0;
width: 100%; width: 100%;
z-index: 9; z-index: 9;
} }
div.testGroup { div.testGroup {
display: inline-block; display: inline-block;
} }
@media all and (max-width: 65em) { @media all and (max-width: 65em) {
body { body {
font-size: 1.5vw; font-size: 1.5vw;
} }
} }
@media all and (max-width: 40em) { @media all and (max-width: 40em) {
body { body {
font-size: 0.8em; font-size: 0.8em;
} }
div.testGroup { div.testGroup {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
} }
#progressBar { #progressBar {
width: 90%; width: 90%;
height: 0.3em; height: 0.3em;
background-color:#EEEEEE; background-color: #eeeeee;
position: relative; position: relative;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
margin-bottom: 2em; margin-bottom: 2em;
} }
#progress { #progress {
position: absolute; position: absolute;
top:0; left:0; top: 0;
left: 0;
height: 100%; height: 100%;
width: 0%; width: 0%;
transition: width 2s; transition: width 2s;
background-color:#90BBFF; background-color: #90bbff;
} }
.theme-switch-wrapper {
margin: 20px;
}
.theme-switch {
display: inline-block;
height: 40px;
position: relative;
width: 65px;
}
.theme-switch input {
display: none;
}
.slider {
background: #000;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
font-size: 13px;
transition: 0.4s;
}
.slider p:after {
color: #fff;
float: right;
margin: 0 5px 0 0;
content: "OFF";
transition: 0.4s;
}
input:checked + .slider p:after {
float: left;
color: #000;
content: "ON";
margin: 0 0 0 5px;
}
.slider:before {
background: #fff;
top: 8px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background-color: #fff;
}
input:checked + .slider:before {
transform: translateX(28px);
background: #000;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style> </style>
</head> </head>
<body> <body>
<h1>LibreSpeed Example</h1> <h1>LibreSpeed Example</h1>
<div id="startStopBtn" onclick="startStop()"></div> <div id="startStopBtn" onclick="startStop()"></div>
<div id="test"> <div id="test">
<div id="progressBar"><div id="progress"></div></div> <div id="progressBar">
<div id="progress"></div>
</div>
<div class="testGroup"> <div class="testGroup">
<div class="testArea"> <div class="testArea">
<div class="testName">Download</div> <div class="testName">Download</div>
@ -200,13 +316,68 @@ function I(id){return document.getElementById(id);}
<div class="unit">ms</div> <div class="unit">ms</div>
</div> </div>
</div> </div>
<div id="ipArea"> <div id="ipArea">IP Address: <span id="ip"></span></div>
IP Address: <span id="ip"></span>
</div> </div>
<h3>DARKMODE</h3>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round">
<p></p>
</div>
</label>
</div> </div>
<a href="https://github.com/librespeed/speedtest">Source code</a> <a href="https://github.com/librespeed/speedtest">Source code</a>
<script type="text/javascript"> <script type="text/javascript">
initUI(); initUI();
</script> </script>
</body> </body>
<script>
//DARMODE
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
function switchTheme(e) {
if (e.target.checked) {
toggleDarkMode();
} else {
toggleDarkMode();
}
}
toggleSwitch.addEventListener("change", switchTheme, true);
var countToggleDark = 0;
function toggleDarkMode() {
if (countToggleDark == 0) {
document.querySelector("html").style.background = "#000";
document.querySelector("body").style.background = "#000";
document.querySelector("html").style.color = "#fdfdfd";
document.querySelector("body").style.color = "#fdfdfd";
document.querySelector("#startStopBtn").style.border ="0.15em solid #996cb4";
document.querySelector("#startStopBtn").style.color = "#996cb4";
document.querySelector("h1").style.color = "#d3cfcf";
document.querySelector("#dlText").style.color = "#996cb4";
document.querySelector("#pingText").style.color = "#b92323";
document.querySelector("#jitText").style.color = "#b92323";
document.querySelector("#progress").style.background = "#996cb4";
countToggleDark++;
} else {
document.querySelector("html ").style.background = "#fdfdfd";
document.querySelector("body").style.background = "#fdfdfd";
document.querySelector("html").style.color = "#202020";
document.querySelector("body").style.color = "#202020";
document.querySelector("#startStopBtn").style.border ="0.15em solid #6060FF";
document.querySelector("#startStopBtn").style.color = "#6060AA";
document.querySelector("h1").style.color = "#404040";
document.querySelector("#dlText").style.color = "#6060AA";
document.querySelector("#pingText").style.color = "#AA6060";
document.querySelector("#jitText").style.color = "#AA6060";
document.querySelector("#progress").style.background = "#90BBFF";
countToggleDark = 0;
}
}
</script>
</html> </html>