| Sergiusz Bazanski | a51df9c | 2019-07-13 16:07:13 +0200 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>bgp.wtf</title> |
| 6 | <style type="text/css"> |
| 7 | body { |
| 8 | margin: 80px auto; |
| 9 | line-height: 1.6; |
| 10 | font-size: 18px; |
| 11 | max-width: 650px; |
| 12 | color: #444; |
| 13 | background-color: #aaa; |
| 14 | padding: 0 10px; |
| 15 | font-family: helvetica, arial, sans-serif; |
| 16 | } |
| 17 | a { |
| 18 | color: #444; |
| 19 | font-weight: 600; |
| 20 | text-decoration: none; |
| 21 | } |
| 22 | a:hover { |
| 23 | text-decoration: underline; |
| 24 | } |
| 25 | |
| 26 | span.snippet { |
| 27 | font-family: system, courier new, serif; |
| 28 | } |
| 29 | |
| 30 | div.container { |
| 31 | background-color: #f8f8f8; |
| 32 | padding: 10px 20px 10px 20px; |
| 33 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| 34 | margin-bottom: 40px; |
| 35 | } |
| 36 | |
| 37 | div.container h1, h2, h3 { |
| 38 | margin: 0; |
| 39 | color: #333; |
| 40 | } |
| 41 | |
| 42 | div.splitContainer { |
| 43 | display: flex; |
| 44 | flex-direction: row; |
| 45 | flex-wrap: wrap; |
| 46 | } |
| 47 | |
| 48 | div.split { |
| 49 | flex-grow: 1; |
| 50 | background-color: #f8f8f8; |
| 51 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| 52 | position: relative; |
| 53 | padding: 10px 20px 10px 20px; |
| 54 | z-index: 1; |
| 55 | } |
| 56 | |
| 57 | div.background { |
| 58 | position: absolute; |
| 59 | top: 0; |
| 60 | left: 0; |
| 61 | right: 0; |
| 62 | bottom: 100%; |
| 63 | z-index: -1; |
| 64 | background-color: #e8f8e8; |
| 65 | -webkit-transition: bottom 0.5s ease-in, top 0.5s ease-in; |
| 66 | } |
| 67 | |
| 68 | a.button { |
| 69 | border-radius: 2px; |
| 70 | cursor: pointer; |
| 71 | font-size: 11px; |
| 72 | font-weight: bold; |
| 73 | text-align: center; |
| 74 | white-space: nowrap; |
| 75 | height: 27px; |
| 76 | line-height: 27px; |
| 77 | min-width: 54px; |
| 78 | outline: 0; |
| 79 | padding: 0 8px; |
| 80 | text-shadow: 0 1px rgba(0,0,0,0.1); |
| 81 | background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); |
| 82 | background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); |
| 83 | background-image: linear-gradient(top,#f5f5f5,#f1f1f1); |
| 84 | color: #666; |
| 85 | border: 1px solid rgba(0,0,0,0.1); |
| 86 | display: inline-block; |
| 87 | text-decoration: none; |
| 88 | } |
| 89 | a.button:hover { |
| 90 | border: 1px solid #c6c6c6; |
| 91 | color: #333; |
| 92 | background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1); |
| 93 | background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1); |
| 94 | background-image: linear-gradient(top, #f8f8f8, #f1f1f1); |
| 95 | } |
| 96 | a.red { |
| 97 | background-image: -webkit-linear-gradient(top,#dd4b39,#d14836); |
| 98 | background-image: -moz-linear-gradient(top,#dd4b39,#d14836); |
| 99 | background-image: linear-gradient(top,#dd4b39,#d14836); |
| 100 | color: #fff; |
| 101 | border: 1px solid transparent; |
| 102 | text-transform: uppercase; |
| 103 | } |
| 104 | a.red:hover { |
| 105 | border: 1px solid #b0281a; |
| 106 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); |
| 107 | background-image: -webkit-linear-gradient(top, #dd4b39, #c53727); |
| 108 | background-image: -moz-linear-gradient(top, #dd4b39, #c53727); |
| 109 | background-image: linear-gradient(top, #dd4b39, #c53727); |
| 110 | color: #fff; |
| 111 | } |
| 112 | </style> |
| 113 | </head> |
| 114 | <body> |
| 115 | <div class="splitContainer"> |
| 116 | <div class="split" style="width: 10rem; margin: 0.5rem;"> |
| 117 | <div class="background" id="dlBackground"></div> |
| 118 | <h2>Download</h2> |
| 119 | <p id="download"><i>not started...</i></p> |
| 120 | </div> |
| 121 | |
| 122 | <div class="split" style="width: 10rem; margin: 0.5rem;"> |
| 123 | <div class="background" id="ulBackground" style="top: 100%; bottom: 0;"></div> |
| 124 | <h2>Upload</h2> |
| 125 | <p id="upload"><i>not started...</i></p> |
| 126 | </div> |
| 127 | </div> |
| 128 | |
| 129 | <div class="container" style="margin: 0.5rem;"> |
| 130 | <p> |
| 131 | <b>Server Location</b>: Warsaw, Poland (waw.bgp.wtf)<br /> |
| 132 | <b>Latency</b>: <span id="ping"><i>not started...</i></span><br /> |
| 133 | <a class="button red" style="margin-top: 20px;" onclick="startTest();">Start test</a> |
| 134 | </p> |
| 135 | </div> |
| 136 | |
| 137 | <script type="text/javascript" src="speedtest.js"></script> |
| 138 | <script type="text/javascript"> |
| 139 | const s = new Speedtest(); |
| 140 | s.onupdate = function (data) { // when status is received, put the values in the appropriate fields |
| 141 | if (data.testState >= 1) { |
| 142 | if (data.dlStatus) { |
| 143 | document.getElementById('dlBackground').style.bottom = ((1-data.dlProgress) * 100 + "%"); |
| 144 | document.getElementById('download').textContent = data.dlStatus + ' Mbit/s'; |
| 145 | } |
| 146 | else |
| 147 | document.getElementById('download').innerHTML = '<i>starting...</i>'; |
| 148 | } |
| 149 | if (data.testState >= 2) |
| 150 | document.getElementById('ping').textContent = data.pingStatus + ' ms, ' + data.jitterStatus + ' ms jitter' |
| 151 | if (data.testState >= 3) { |
| 152 | if (data.ulStatus) { |
| 153 | document.getElementById('ulBackground').style.top = ((1-data.ulProgress) * 100 + "%"); |
| 154 | document.getElementById('upload').textContent = data.ulStatus + ' Mbit/s' |
| 155 | } else |
| 156 | document.getElementById('upload').innerHTML = '<i>starting...</i>'; |
| 157 | } |
| 158 | } |
| 159 | |
| 160 | var startTest = () => { |
| 161 | console.log("Starting test..."); |
| 162 | document.getElementById('dlBackground').style.bottom = "100%"; |
| 163 | document.getElementById('ulBackground').style.top = "100%"; |
| 164 | s.start(); |
| 165 | }; |
| 166 | </script> |
| 167 | </body> |
| 168 | </html> |