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