options.html

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