index.html

<html>
  <head>
    <meta charset="utf-8">

    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>

    <script src="./dist/XHRShaper.this.js"></script>

    <script src="demo.js"></script>

    <style type="text/css">
      body {
          font-size: 1em;
          font-family: Helvetica;
      }
    </style>

  </head>
  <body>

    <center>

      <h1>XHR-shaper v2 demo</h1>

      <progress id="progress" value="" max=""></progress>

      <p>Status:&nbsp;<b><span id="status">Ready</span></b></p>

      <p>
        Min. latency (ms): <input type="text" id="latency" size=6></input>
      </p>
      <p>
        Max. bandwidth (kbit/s): <input type="text" id="bandwidth" size=6></input>
      </p>

      <button onclick="onClickLoad()">Load</button>

      <div id="graph"></div>

      <p>
        Measured > Throughput (kbit/s):&nbsp;<span id="throughput"></span>
      </p>
      <p>
        Measured >Total duration (ms):&nbsp;<span id="duration"></span>
      </p>

    </center>

  </body>
</html>