src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Subvertise - Ruin it for them</title>
    <link rel="stylesheet" href="css/material-icons.css">
    <link rel="stylesheet" href="css/mdl.css">

<style>
  #wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
  #controlbar {
    position: fixed;
    left: 0px;
    top: 0px;
    padding: 10px;
    z-index: 100;
  }
  #info-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 26px;
    padding: 3px;
    overflow: hidden;
    background-color: #ccc;
  }
  #info-bar .material-icons {
    vertical-align: middle !important;
  }
  #info-bar p {
    display: inline;
    max-width: 50px;
    overflow: hidden;
  }
  #url-text {
    width: 100%;
    height: calc(100vh - 160px);
    resize: none;
  }
  /* Have to be careful with displaying absolute items inside an MDL tab */
  #url-frame {
    position: absolute;
    top: 50px;
    width: 100%;
    height: calc(100% - 80px);
    z-index: -2;
  }
  .form-box {
    margin-bottom: 10px;
  }
  .form-box p {
    margin: 0; padding: 3px;
  }
  .text-field {
    border: 1px solid #ddd;
    border-bottom: 1px solid #ccc;
    width: calc(100% - 3px - 3px);
    height: 30px;
    padding: 3px;
    line-height: 30px;
  }
  .frame-hide {
    position: fixed;
    background: #fff;
    top: 0; left: 0; right: 0;
    bottom: 0;
    padding: 0; margin: 0;
    z-index: -1;
  }

  .info-span {
    font-weight: bold;
  }
</style>

</head>
<body>
  <webview id="url-frame" autosize="on"></webview>
  <div id="wrapper">
    <div class="frame-hide"></div>


    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      <div class="mdl-tabs__tab-bar">
          <a href="#links" class="mdl-tabs__tab is-active">
            <i class="material-icons">list</i>
          </a>
          <a id="browser-link" href="#browser" class="mdl-tabs__tab">
            <i class="material-icons">public</i>
          </a>
          <a href="#options" class="mdl-tabs__tab">
            <i class="material-icons">settings</i>
          </a>
      </div>

      <div class="mdl-tabs__panel is-active" id="links">
        <p>
          Enter urls below, each url on its own line.

          URLs starting with <code>https://</code> offer the <i>best</i> possible
          level of subversion.
        </p>
        <div id="url-text-wrap">
          <textarea type="text" onchange="saveUrlText()" id="url-text"></textarea>
        </div>
      </div>

      <div class="mdl-tabs__panel" id="browser">
        <!-- <iframe id="url-frame" class="" sandbox="allow-forms allow-scripts allow-same-origin"></iframe> -->
      </div>

      <div class="mdl-tabs__panel" id="options">

        <div class="form-box">
          <p>Minimum wait time in seconds. Minimum of <i>1</i></p>
          <input class="text-field" type="number" id="min-wait-time-text" onchange="saveMinWaitTime()">
        </div>

        <div class="form-box">
          <p>Max wait time in seconds. Maximum of <i>300</i></p>
          <input class="text-field" type="number" id="max-wait-time-text" onchange="saveMaxWaitTime()">
        </div>
        <b>Advanced</b>
        <div class="form-box">
          <p>Proxy string. Same format as Chromium <code>proxy-server</code> option.</p>
          <input class="text-field" type="text" id="proxy-text" onchange="saveProxyText()"><br>
          <small>This setting requires restarting Subvertise to take effect</small>
        </div>
      </div>
    </div>

    <div id="controlbar">
      <div class="float-left">
        <button
          id="control-button"
          class="mdl-button mdl-js-button mdl-button--colored mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect"
          onclick="toggle()">
            <i class="material-icons">play_arrow</i>
        </button>
      </div>
    </div>

    <div id="info-bar">
      <p>
        <i class="material-icons">link</i>
        <span id="currentUrl"></span>
      </p>
      <p>
        <i class="material-icons">timer</i>
        <span id="nextHitTime"></span>
      </p>
    </div>

  </div>

  <script src="js/subvertise.js"></script>
  <script src="js/material.min.js"></script>

</body>

</html>