examples/browser-readablestream/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style type="text/css">

body {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  height: 100vh;
}

pre {
  flex-grow: 2;
  padding: 10px;
  height: calc(100vh - 45px);
  overflow: auto;
}

#form-wrapper {
  padding: 20px;
}

form {
  padding-bottom: 10px;
  display: flex;
}

#hash {
  display: inline-block;
  margin: 0 10px 10px 0;
  font-size: 16px;
  flex-grow: 2;
  padding: 5px;
}

button {
  display: inline-block;
  font-size: 16px;
  height: 32px;
}

video {
  max-width: 50vw;
}

    </style>
  </head>
  <body>
    <div id="container" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
      <div id="form-wrapper">
          <form>
            <input type="text" id="hash" placeholder="Hash" disabled />
            <button id="gobutton" disabled>Go!</button>
          </form>
          <video id="video" controls></video>
      </div>
      <pre id="output" style="display: inline-block"></pre>
    </div>
  </body>
</html>