options.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset='utf-8'/>
   5     <title>Tabs Backup & Restore - Options</title>
   6
   7     <link rel='stylesheet' href='dark.css' media='(prefers-color-scheme: dark)'/>
   8     <link rel='stylesheet' href='light.css' media='(prefers-color-scheme: light), (prefers-color-scheme: no-preference)'/>
   9     <!-- Load theme override asap to help with initial loading/flashing. -->
  10     <link rel='stylesheet' href='' id='theme-override'/>
  11     <script src="theme-init.js"></script>
  12
  13     <style>
  14       body {
  15                 font-family: Arial;
  16                 background-color: var(--body-color);
  17                 filter: var(--body-filter);
  18         overflow-x:hidden;
  19       }
  20
  21           #content {
  22                 min-width:357px;
  23                 max-width: 500px;
  24                 margin: 0 auto;
  25           }
  26
  27       img {
  28         margin:5px;
  29         border:2px solid black;
  30         vertical-align:middle;
  31         width:75px;
  32         height:75px;
  33                 filter: var(--img-filter);
  34       }
  35
  36           .menuItem {
  37                 position: relative;
  38                 background: #edf6fd;
  39                 padding: 20px;
  40                 margin-top: 0px;
  41                 margin-left: 20px;
  42                 margin-right: 20px;
  43                 margin-bottom: 20px;
  44                 color: black;
  45                 display: block;
  46                 cursor: hand;
  47                 cursor: pointer;
  48           }
  49
  50           .menuItem:hover {
  51                 background: #d8edfc;
  52           }
  53
  54           .backupItem {
  55                 position: relative;
  56                 display: block;
  57                 background: #f4f4f4;
  58                 padding: 8px;
  59                 margin: 8px;
  60           }
  61
  62           .backupItemTitle {
  63                 font-size: 14px;
  64                 font-weight: bold;
  65           }
  66
  67           .backupItemDetails {
  68                 font-size: 12px;
  69                 padding: 5px;
  70           }
  71
  72           .backupItemDetailsNr {
  73                 position: absolute;
  74                 left: 100px;
  75           }
  76
  77           .backupItemToolbar {
  78                 position: absolute;
  79                 display: block;
  80                 right: 10px;
  81                 top: 10px;
  82           }
  83
  84                 .backupItemToolbar a {
  85                         cursor: hand;
  86                         cursor: pointer;
  87                 }
  88
  89           .backupItemFooter {
  90                 position: absolute;
  91                 display: block;
  92                 right: 10px;
  93                 bottom: 10px;
  94
  95                 font-size: 10px;
  96           }
  97
  98           .backupItemFooterAutoBackup {
  99                 color: #23b827;
 100           }
 101
 102           .backupItemFooterManualBackup {
 103                 color: #d95843;
 104           }
 105
 106           #backupsListTitle {
 107                 font-size: 16px;
 108                 margin: 10px;
 109                 padding: 10px;
 110                 padding-bottom: 0px;
 111                 text-decoration:underline;
 112           }
 113
 114           #statusDiv {
 115                 display: block;
 116                 font-size: 12px;
 117                 background-color: #ecffed;
 118                 padding: 8px;
 119                 margin-top: 4px;
 120                 height: 16px;
 121           }
 122
 123           #prefs {
 124                 margin-top: 10px;
 125           }
 126
 127           .prefsRow td {
 128                 padding-top: 20px;
 129           }
 130
 131           .prefsDescription {
 132                 font-size: 12px;
 133                 color: grey;
 134           }
 135
 136           #buttonsDiv {
 137             position: relative;
 138                 margin-top: 20px;
 139           }
 140
 141           #smallDescription {
 142                 font-size: 12px;
 143                 color: grey;
 144           }
 145
 146           select {
 147                 padding: 5px;
 148           }
 149
 150           button.selected {
 151                 filter: invert(1);
 152           }
 153     </style>
 154
 155         <!-- <script src="jquery-1.8.2.min.js"></script> -->
 156     <!-- JavaScript and HTML must be in separate files for security. -->
 157     <script src="options.js?v=2"></script>
 158
 159   </head>
 160   <body>
 161   <div id="content">
 162
 163           <img src="icon.png" style="border: 0; padding: 10px;" /><b>Tabs Backup & Restore - Options</b>
 164
 165
 166
 167           <div id="smallDescription">
 168           With Tabs Backup & Restore you will never lose your work again!<br /><br />
 169           Backup an entire Chrome session (all opened windows and tabs) and restore it when needed.<br />
 170           Backups are created automatically, but can also be created manually whenever you want.
 171           </div>
 172
 173           <div id="prefs">
 174
 175           <table>
 176                 <tr class="prefsRow">
 177                         <td width="200">Auto backup every<br />
 178           </td>
 179                         <td><select id="prefsSelectBackupPeriod">
 180                           <option value="1">1 minute</option>
 181                           <option value="2">2 minutes</option>
 182                           <option value="3">3 minutes</option>
 183                           <option value="5">5 minutes</option>
 184                           <option value="10">10 minutes</option>
 185                           <option value="15">15 minutes</option>
 186                           <option value="30">30 minutes</option>
 187                           <option value="45">45 minutes</option>
 188                           <option value="60">1 hour</option>
 189                           <option value="120">2 hours</option>
 190                           <option value="240">4 hours</option>
 191                         </select></td>
 192                 </tr>
 193                 <tr>
 194                         <td colspan="2" class="prefsDescription">
 195                                 A backup is created only when something has changed from the previous one. A change is considered when a window or tab is created, closed or moved.
 196                         </td>
 197                 </tr>
 198
 199                 <tr class="prefsRow">
 200                         <td width="200">Max number of backups</td>
 201                         <td>
 202                         <select id="prefsSelectMaxBackups">
 203                           <option value="10">10</option>
 204                           <option value="15">15</option>
 205                           <option value="20">20</option>
 206                           <option value="30">30</option>
 207                           <option value="60">60</option>
 208                           <option value="80">80</option>
 209                         </select>
 210                         </td>
 211                 </tr>
 212                 <tr>
 213                         <td colspan="2" class="prefsDescription">
 214                                 The maximum number of backups to keep. Old backups will be deleted when this number is reached.
 215                         </td>
 216                 </tr>
 217
 218                 <tr class="prefsRow">
 219                         <td width="200">Theme</td>
 220                         <td>
 221                         <input type="text" id="prefsTheme" hidden>
 222                         <button id="theme-light">Light</button>
 223                         <button id="theme-system">System</button>
 224                         <button id="theme-dark">Dark</button>
 225                         </td>
 226                 </tr>
 227                 <tr>
 228                         <td colspan="2" class="prefsDescription">
 229                                 The color scheme to use in this extension.
 230                         </td>
 231                 </tr>
 232
 233           </table>
 234
 235           </div>
 236
 237                 <div id="buttonsDiv">
 238                         <button id="saveBtn" style="padding: 10px 20px;">Save</button>
 239                         <a href="#" id="restoreDefaultBtn" style="position: absolute; right: 0px; top: 24px; font-size: 10px;">Restore options to default</a>
 240                         <div id="statusDiv"></div>
 241
 242                 </div>
 243   </div>
 244   </body>
 245 </html>