forked from hswaw/hscloud
169 lines
6.4 KiB
HTML
169 lines
6.4 KiB
HTML
|
<!doctype html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<title>bgp.wtf</title>
|
||
|
<style type="text/css">
|
||
|
body {
|
||
|
margin: 80px auto;
|
||
|
line-height: 1.6;
|
||
|
font-size: 18px;
|
||
|
max-width: 650px;
|
||
|
color: #444;
|
||
|
background-color: #aaa;
|
||
|
padding: 0 10px;
|
||
|
font-family: helvetica, arial, sans-serif;
|
||
|
}
|
||
|
a {
|
||
|
color: #444;
|
||
|
font-weight: 600;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a:hover {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
|
||
|
span.snippet {
|
||
|
font-family: system, courier new, serif;
|
||
|
}
|
||
|
|
||
|
div.container {
|
||
|
background-color: #f8f8f8;
|
||
|
padding: 10px 20px 10px 20px;
|
||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||
|
margin-bottom: 40px;
|
||
|
}
|
||
|
|
||
|
div.container h1, h2, h3 {
|
||
|
margin: 0;
|
||
|
color: #333;
|
||
|
}
|
||
|
|
||
|
div.splitContainer {
|
||
|
display: flex;
|
||
|
flex-direction: row;
|
||
|
flex-wrap: wrap;
|
||
|
}
|
||
|
|
||
|
div.split {
|
||
|
flex-grow: 1;
|
||
|
background-color: #f8f8f8;
|
||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||
|
position: relative;
|
||
|
padding: 10px 20px 10px 20px;
|
||
|
z-index: 1;
|
||
|
}
|
||
|
|
||
|
div.background {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 100%;
|
||
|
z-index: -1;
|
||
|
background-color: #e8f8e8;
|
||
|
-webkit-transition: bottom 0.5s ease-in, top 0.5s ease-in;
|
||
|
}
|
||
|
|
||
|
a.button {
|
||
|
border-radius: 2px;
|
||
|
cursor: pointer;
|
||
|
font-size: 11px;
|
||
|
font-weight: bold;
|
||
|
text-align: center;
|
||
|
white-space: nowrap;
|
||
|
height: 27px;
|
||
|
line-height: 27px;
|
||
|
min-width: 54px;
|
||
|
outline: 0;
|
||
|
padding: 0 8px;
|
||
|
text-shadow: 0 1px rgba(0,0,0,0.1);
|
||
|
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||
|
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
|
||
|
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
|
||
|
color: #666;
|
||
|
border: 1px solid rgba(0,0,0,0.1);
|
||
|
display: inline-block;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a.button:hover {
|
||
|
border: 1px solid #c6c6c6;
|
||
|
color: #333;
|
||
|
background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
|
||
|
background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
|
||
|
background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
|
||
|
}
|
||
|
a.red {
|
||
|
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
|
||
|
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
|
||
|
background-image: linear-gradient(top,#dd4b39,#d14836);
|
||
|
color: #fff;
|
||
|
border: 1px solid transparent;
|
||
|
text-transform: uppercase;
|
||
|
}
|
||
|
a.red:hover {
|
||
|
border: 1px solid #b0281a;
|
||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||
|
background-image: -webkit-linear-gradient(top, #dd4b39, #c53727);
|
||
|
background-image: -moz-linear-gradient(top, #dd4b39, #c53727);
|
||
|
background-image: linear-gradient(top, #dd4b39, #c53727);
|
||
|
color: #fff;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div class="splitContainer">
|
||
|
<div class="split" style="width: 10rem; margin: 0.5rem;">
|
||
|
<div class="background" id="dlBackground"></div>
|
||
|
<h2>Download</h2>
|
||
|
<p id="download"><i>not started...</i></p>
|
||
|
</div>
|
||
|
|
||
|
<div class="split" style="width: 10rem; margin: 0.5rem;">
|
||
|
<div class="background" id="ulBackground" style="top: 100%; bottom: 0;"></div>
|
||
|
<h2>Upload</h2>
|
||
|
<p id="upload"><i>not started...</i></p>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="container" style="margin: 0.5rem;">
|
||
|
<p>
|
||
|
<b>Server Location</b>: Warsaw, Poland (waw.bgp.wtf)<br />
|
||
|
<b>Latency</b>: <span id="ping"><i>not started...</i></span><br />
|
||
|
<a class="button red" style="margin-top: 20px;" onclick="startTest();">Start test</a>
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
<script type="text/javascript" src="speedtest.js"></script>
|
||
|
<script type="text/javascript">
|
||
|
const s = new Speedtest();
|
||
|
s.onupdate = function (data) { // when status is received, put the values in the appropriate fields
|
||
|
if (data.testState >= 1) {
|
||
|
if (data.dlStatus) {
|
||
|
document.getElementById('dlBackground').style.bottom = ((1-data.dlProgress) * 100 + "%");
|
||
|
document.getElementById('download').textContent = data.dlStatus + ' Mbit/s';
|
||
|
}
|
||
|
else
|
||
|
document.getElementById('download').innerHTML = '<i>starting...</i>';
|
||
|
}
|
||
|
if (data.testState >= 2)
|
||
|
document.getElementById('ping').textContent = data.pingStatus + ' ms, ' + data.jitterStatus + ' ms jitter'
|
||
|
if (data.testState >= 3) {
|
||
|
if (data.ulStatus) {
|
||
|
document.getElementById('ulBackground').style.top = ((1-data.ulProgress) * 100 + "%");
|
||
|
document.getElementById('upload').textContent = data.ulStatus + ' Mbit/s'
|
||
|
} else
|
||
|
document.getElementById('upload').innerHTML = '<i>starting...</i>';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var startTest = () => {
|
||
|
console.log("Starting test...");
|
||
|
document.getElementById('dlBackground').style.bottom = "100%";
|
||
|
document.getElementById('ulBackground').style.top = "100%";
|
||
|
s.start();
|
||
|
};
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|