go/svc/speedtest: init from github.com/q3k/speedtest
commit: 6109ea9470199468120836d1fb1c89cac7667d86
Change-Id: If93617b3b8f0ac5bc548ab81a6801e464a03143d
diff --git a/go/svc/speedtest/index.html b/go/svc/speedtest/index.html
new file mode 100644
index 0000000..b634e54
--- /dev/null
+++ b/go/svc/speedtest/index.html
@@ -0,0 +1,168 @@
+<!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>