Skip to content

Commit dd40a3a

Browse files
sstidlsstidl
authored
Merge pull request #668 from bogdanr/master
Added a modern design example it doesnt do any harm to add another example :)
2 parents 5cad53e + 4b83718 commit dd40a3a

File tree

1 file changed

+228
-0
lines changed

1 file changed

+228
-0
lines changed

‎examples/example-singleServer-modern.html

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
6+
<title>LibreSpeed</title>
7+
<link rel="shortcut icon" href="favicon.ico">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<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">
10+
<script type="text/javascript" src="speedtest.js"></script>
11+
<script type="text/javascript">
12+
13+
//INITIALIZE SPEEDTEST
14+
var s=new Speedtest(); //create speedtest object
15+
s.setParameter("telemetry_level","basic"); //enable telemetry
16+
17+
s.onupdate=function(data){ //callback to update data in UI
18+
I("ip").textContent=data.clientIp;
19+
I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus;
20+
I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
21+
I("pingText").textContent=data.pingStatus;
22+
I("jitText").textContent=data.jitterStatus;
23+
}
24+
s.onend=function(aborted){ //callback for test ended/aborted
25+
I("startStopBtn").className=""; //show start button again
26+
if(aborted){ //if the test was aborted, clear the UI and prepare for new test
27+
initUI();
28+
} else {
29+
// Check if download speed is greater than 50 Mbit/s
30+
var dlSpeed = parseFloat(I("dlText").textContent);
31+
if (dlSpeed > 50) {
32+
I("speedMessage").textContent = "📽️👍";
33+
} else {
34+
I("speedMessage").textContent = "🙄";
35+
}
36+
}
37+
}
38+
39+
function startStop(){ //start/stop button pressed
40+
if(s.getState()==3){
41+
//speedtest is running, abort
42+
s.abort();
43+
}else{
44+
//test is not running, begin
45+
s.start();
46+
I("startStopBtn").className="running";
47+
}
48+
}
49+
50+
//function to (re)initialize UI
51+
function initUI(){
52+
I("dlText").textContent="";
53+
I("ulText").textContent="";
54+
I("pingText").textContent="";
55+
I("jitText").textContent="";
56+
I("ip").textContent="";
57+
}
58+
59+
function I(id){return document.getElementById(id);}
60+
61+
// Automatically start the test when the page loads
62+
window.onload = function() {
63+
startStop();
64+
}
65+
</script>
66+
67+
<style type="text/css">
68+
html,body{
69+
border:none; padding:0; margin:0;
70+
background:#f4f4f9;
71+
color:#333;
72+
font-family:"Roboto",sans-serif;
73+
}
74+
body{
75+
text-align:center;
76+
}
77+
h1{
78+
color:#333;
79+
margin-top:1em;
80+
}
81+
#startStopBtn{
82+
display:inline-block;
83+
margin:1em auto;
84+
color:#fff;
85+
background-color:#007bff;
86+
border:none;
87+
border-radius:0.3em;
88+
transition:all 0.3s;
89+
box-sizing:border-box;
90+
width:10em; height:3em;
91+
line-height:3em;
92+
cursor:pointer;
93+
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
94+
font-size:1em;
95+
}
96+
#startStopBtn:hover{
97+
background-color:#0056b3;
98+
}
99+
#startStopBtn.running{
100+
background-color:#dc3545;
101+
}
102+
#startStopBtn:before{
103+
content:"Start";
104+
}
105+
#startStopBtn.running:before{
106+
content:"Abort";
107+
}
108+
#test{
109+
margin-top:2em;
110+
margin-bottom:4em;
111+
}
112+
div.testArea{
113+
display:inline-block;
114+
width:14em;
115+
height:9em;
116+
position:relative;
117+
box-sizing:border-box;
118+
margin:1em;
119+
background:#fff;
120+
border-radius:0.5em;
121+
box-shadow:0 0 10px rgba(0,0,0,0.1);
122+
padding:1em;
123+
}
124+
div.testName{
125+
position:absolute;
126+
top:0.5em; left:0;
127+
width:100%;
128+
font-size:1.2em;
129+
z-index:9;
130+
color:#555;
131+
}
132+
div.meterText{
133+
position:absolute;
134+
bottom:1.5em; left:0;
135+
width:100%;
136+
font-size:2.5em;
137+
z-index:9;
138+
color:#007bff;
139+
}
140+
div.testConclusion{
141+
position:absolute;
142+
bottom:2em; left:0;
143+
width:100%;
144+
font-size:5em;
145+
z-index:9;
146+
color:#333;
147+
text-shadow:0 0 10px #888;
148+
}
149+
#dlText{
150+
color:#007bff;
151+
}
152+
#ulText{
153+
color:#28a745;
154+
}
155+
#pingText,#jitText{
156+
color:#dc3545;
157+
}
158+
div.meterText:empty:before{
159+
color:#ccc !important;
160+
content:"0.00";
161+
}
162+
div.unit{
163+
position:absolute;
164+
bottom:2em; left:0;
165+
width:100%;
166+
z-index:9;
167+
color:#777;
168+
}
169+
div.testGroup{
170+
display:inline-block;
171+
}
172+
@media all and (max-width:65em){
173+
body{
174+
font-size:1.5vw;
175+
}
176+
}
177+
@media all and (max-width:40em){
178+
body{
179+
font-size:0.8em;
180+
}
181+
div.testGroup{
182+
display:block;
183+
margin: 0 auto;
184+
}
185+
}
186+
187+
</style>
188+
</head>
189+
<body>
190+
<h1>LibreSpeed</h1>
191+
<div id="startStopBtn" onclick="startStop()"></div>
192+
<div id="test">
193+
<div class="testGroup">
194+
<div class="testArea">
195+
<div class="testName">Download</div>
196+
<div id="dlText" class="meterText"></div>
197+
<div class="unit">Mbit/s</div>
198+
</div>
199+
<div class="testArea">
200+
<div class="testName">Upload</div>
201+
<div id="ulText" class="meterText"></div>
202+
<div class="unit">Mbit/s</div>
203+
</div>
204+
</div>
205+
<div class="testGroup">
206+
<div class="testArea">
207+
<div class="testName">Ping</div>
208+
<div id="pingText" class="meterText"></div>
209+
<div class="unit">ms</div>
210+
</div>
211+
<div class="testArea">
212+
<div class="testName">Jitter</div>
213+
<div id="jitText" class="meterText"></div>
214+
<div class="unit">ms</div>
215+
</div>
216+
</div>
217+
<div id="speedMessage" class="testConclusion">
218+
</div>
219+
<div id="ipArea">
220+
IP Address: <span id="ip"></span>
221+
</div>
222+
</div>
223+
<a href="https://github.com/librespeed/speedtest">Source code</a>
224+
<script type="text/javascript">
225+
initUI();
226+
</script>
227+
</body>
228+
</html>

0 commit comments

Comments
 (0)