index.html

<main id="template">
  <form id="relay" onSubmit="return false">
    <fieldset>
      <legend>HTTPRelay-js Proxy</legend>
      <button id="server" disabled>server</button>
      <button id="client" disabled>client</button>
      <input id="user" onBlur="sm.proxy_add(this.value, 'user')" placeholder="username" />
      <input id="color" type="color" onChange="sm.proxy_add(this.value, 'color')" />
      <br clear="both" />
      <button onClick="sm.proxy_add(Math.random().toFixed(3))">random</button>
      <select onChange="sm.proxy_add(this.value)">
        <option disabled selected>fixed</option>
        <option value="A">A</option>
        <option value="B">B</option>
      </select>
      <input class="w50" type="file" multiple accept="image/*" onChange="sm.proxy_add(this, 'file')" />
    </fieldset>
    <fieldset id="sessions" class="hide">
      <input id="purge" type="checkbox" />
      <input id="users" type="number" min="2" max="12" placeholder="# users" />
      <details id="download">
        <summary>download</summary>
        <section id="images"></section>
      </details>
    </fieldset>
  </form>

  <section id="logs" class="hide">
    <div class="w50">
      <h2>Local <a id="pageLink" target="_blank">invite</a></h2>
      <pre id="local"></pre>
    </div>
    <div class="w50">
      <h2>Revlist <a id="logLink" target="_blank">endpoint</a></h2>
      <pre id="revlist"></pre>
    </div>
  </section>

  <style>
    * {
      box-sizing: border-box;
      margin: 0 0 0.25rem;
      padding: 0;
      font-family: monospace;
    }

    body,
    fieldset {
      padding: 0.25rem;
      color: #888;
    }

    fieldset {
      background-color: #eee;
      overflow: auto;
    }

    fieldset button,
    fieldset input,
    fieldset select,
    fieldset label {
      width: calc(25% - 0.25rem);
      max-width: 8rem;
      height: 1.5rem;
      line-height: 1;
      display: block;
      float: left;
      margin: 0.125rem;
      box-sizing: border-box;
      position: relative;
      border: 0.125rem solid #ccc;
      border-radius: 0.25rem;
    }

    fieldset input[type=file] {
      border: none;
    }

    fieldset input[type=checkbox] {
      appearance: none;
    }

    fieldset input[type=checkbox]:after {
      content: attr(id);
      position: absolute;
      width: 100%;
      height: 100%;
      text-align: center;
    }

    fieldset input[type=checkbox]:checked:after {
      background: #80ffc0;
    }

    fieldset input.w50 {
      width: calc(50% - 0.25rem);
      max-width: 16rem;
    }

    h2 {
      margin: 0 0 0.25rem;
      border-bottom: 0.125rem solid #eee;
      font-weight: normal;
    }

    h2 a {
      font-size: 1rem;
    }

    .hide a,
    #sessions.hide {
      display: none;
    }

    .w50 {
      width: 50%;
      float: left;
    }

    #local,
    #revlist {
      color: #000;
      height: calc(100vh - 12rem);
      margin: 0;
      overflow: hidden;
      overflow-y: scroll;
    }

    #revlist article {
      border-bottom: 0.125em dashed #c0c0c0;
    }

    #images img {
      display: block;
      float: left;
      width: auto;
      height: 4em;
    }
  </style>
</main>