options.html

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