options.html

<html>
<head>
  <meta charset="utf-8">
	<title>WebCache Options</title>
	
  <link rel="stylesheet" href="options.css" />
  <link rel="stylesheet" href="jQuery/jquery-ui-1.12.1.custom/jquery-ui.min.css" />

  <script src="jQuery/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
  <script src="jQuery/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>


</head>

<body>
<div id="flex-group">
  <h3 class="title">WebCache Options</h3>
  <div class="settings-wrapper">
    <div class="setting">
      <div class="context-cache">
        <input id="google-cache" class="checkbox" type="checkbox"/>
        <label class="context-menu-label" for="google-cache">Google Cache</label>
      </div>

      <div class="context-cache">
        <input id="wayback-machine" class="checkbox" type="checkbox"/>
        <label class="context-menu-label" for="wayback-machine">Wayback Machine</label>
      </div>

      <div class="context-cache">
        <input id="coral-cdn" class="checkbox" type="checkbox"/>
        <label class="context-menu-label" for="coral-cdn">Coral CDN</label>
      </div>
    </div>
    <div class="setting-definition">
      <p> Selected caches will appear on the right click context menu </p>
    </div>
  </div>
  <div class="settings-wrapper">
    <div class="setting">
      <ul id="sortable">
        <li class="list-item" id="google-cache-sortable">
          <p>Google Cache</p>
          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
        </li>
        <li class="list-item" id="wayback-machine-sortable">
          <p>Wayback Machine</p>
          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
        </li>
        <li class="list-item" id="coral-cdn-sortable">
          <p>Coral CDN</p>
          <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
        </li>
      </ul>
    </div>
    <div class="setting-definition">
      <p> Drag these caches in preferential order. When you click the WebCache button,
      it will cycle through these caches until finding the current web page.</p>
    </div>
  </div>
  <div class="settings-wrapper">
    <div id="setting-row">
      <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>
    </div>
    <div class="setting-definition">
      <p>DDOS Protection. Would you like for WebCache to automatically detect when a web page is down and
      load a cached copy? This is still an experimental feature, and you can report issues <a href="https://github.com/Dbz/WebCache/issues">here</a></p>
    </div>
  </div>
</div>
<script src="options.js"></script>
</body>

</html>