/ src / html / options.html
options.html
  1  <!DOCTYPE html>
  2  <html>
  3  <head>
  4    <meta charset="utf-8">
  5    <title>Bypass Paywalls Options</title>
  6    <style>
  7      html {
  8        min-width: 350px;
  9        max-width: 400px;
 10      }
 11      body {
 12        min-width: 350px;
 13        max-width: 400px;
 14        margin: 0;
 15        padding: 0;
 16        display: flex;
 17        flex-direction: column;
 18        font-family: sans-serif;
 19      }
 20  
 21      #bypass_sites label {
 22        display: block;
 23      }
 24  
 25      #tabs {
 26        display: none;
 27        background-color: #ccc;
 28      }
 29  
 30      #tabs button {
 31        flex-grow: 1;
 32        background: #ddd;
 33        text-shadow: none;
 34        margin: 0;
 35        padding: 0;
 36        border: none;
 37        padding-bottom: 3px;
 38        border-bottom: 1px solid #666;
 39        border-right: solid 1px #ccc;
 40        border-radius: 0;
 41      }
 42  
 43      #tabs button:last-of-type {
 44        border-right: none;
 45      }
 46  
 47      #tabs button.active {
 48        background-color: #fff;
 49        color: black;
 50        padding-bottom: 0;
 51        border-bottom: solid blue 4px;
 52      }
 53  
 54      .tab-cell {
 55        height: 2em;
 56      }
 57  
 58      .pane {
 59        height: 520px;
 60        display: none;
 61        flex-direction: column;
 62      }
 63  
 64      p {
 65        margin: 0;
 66        padding: .5em 0;
 67        line-height: 1.3em;
 68      }
 69  
 70      #select-all {
 71        border-top: solid 1px #aaa;
 72        background: #eee;
 73        padding: 4px 0;
 74      }
 75  
 76      #bypass_sites {
 77        border-bottom: solid 1px #aaa;
 78        flex-grow: 1;
 79        overflow-y: auto;
 80        padding-bottom: 4px;
 81      }
 82  
 83      input[type=checkbox] {
 84        margin: 0 .5em;
 85      }
 86  
 87      .pane, #controls {
 88        padding: 0 1em;
 89      }
 90  
 91      #controls {
 92        align-self: flex-end;
 93        padding: 1em;
 94      }
 95  
 96      .pane.active {
 97        display: flex;
 98      }
 99  
100      #custom textarea {
101        flex-grow: 1;
102      }
103  
104      body.customSitesEnabled #tabs {
105        display: flex;
106      }
107  
108      #status {
109        display: inline-block;
110        margin-right: 1em;
111      }
112    </style>
113  </head>
114  <body>
115    <div id="tabs">
116      <button data-pane="sites" class="tab-cell">Supported Sites</button>
117      <button data-pane="custom" class="tab-cell">Custom Sites</button>
118    </div>
119  
120    <div id="sites" class="pane">
121      <p>
122        Selected sites will have their cookies cleared and referer set to Google. You should
123        uncheck sites you are logged in to otherwise you will be logged out on every visit.
124      </p>
125      <label id="select-all"><input checked type="checkbox"><em>Select all/none</em></label>
126      <div id='bypass_sites'></div>
127    </div>
128  
129    <div id="custom" class="pane">
130      <p>
131        To try bypassing other sites enter domain names here (one domain per line). Sites below will be have their cookies removed and attempted to be browsed as the Googlebot.
132      </p>
133      <p>
134      <span style="color: #900; font-weight: bold">This feature is provided "as is" and will not work with many sites.</span>
135      Do not report issues with sites entered here.
136      </p>
137      <textarea id="custom_sites" placeholder="e.g.,&#10;campaignlive.co.uk&#10;cincinnati.com&#10;hk.appledaily.com&#10;" /></textarea>
138    </div>
139  
140    <div id="controls">
141      <div id="status"></div>
142      <button id="save">Save</button>
143    </div>
144  
145    <script src="../js/common.js"></script>
146    <script src="../js/sites.js"></script>
147    <script src="../js/options.js"></script>
148  </body>
149  </html>