| <!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> |