advanced.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset='utf-8'/>
   5     <title>Tabs Backup & Restore</title>
   6     <style>
   7                 ::-webkit-scrollbar {
   8                 width: 10px;
   9         }
  10
  11         ::-webkit-scrollbar-track {
  12                 background-color: #f4f4f4;
  13         }
  14
  15         ::-webkit-scrollbar-thumb {
  16                 background-color: #b9b9b9;
  17         }
  18
  19       body {
  20                 font-family: Arial;
  21
  22                 overflow-x: hidden;
  23       }
  24
  25           #content {
  26                 min-width:680px;
  27                 max-width: 680px;
  28                 margin: 0 auto;
  29                 position: relative;
  30           }
  31
  32           #contentWrapper {
  33                 margin-left: -50px;
  34                 margin-right: 50px;
  35           }
  36
  37           a {
  38                 cursor: hand;
  39                 cursor: pointer;
  40           }
  41
  42       img {
  43         margin:5px;
  44         border:2px solid black;
  45         vertical-align:middle;
  46         width:75px;
  47         height:75px;
  48       }
  49
  50           .menuItem {
  51                 position: relative;
  52                 background: #edf6fd;
  53                 padding: 20px;
  54                 margin-top: 0px;
  55                 margin-left: 20px;
  56                 margin-right: 20px;
  57                 margin-bottom: 10px;
  58                 color: black;
  59                 display: block;
  60                 cursor: hand;
  61                 cursor: pointer;
  62           }
  63
  64           .menuItem:hover {
  65                 background: #d8edfc;
  66           }
  67
  68           .backupItem {
  69
  70
  71           }
  72
  73           .backupItemWrapper {
  74                 padding: 4px 8px;
  75           }
  76
  77           .backupItemContent {
  78                 position: relative;
  79                 padding: 8px;
  80                 background: #f4f4f4;
  81                 cursor: pointer;
  82           }
  83
  84           .backupItemContent:hover {
  85                 background: #e4e4e4;
  86           }
  87
  88           .backupItemTitle {
  89                 font-size: 14px;
  90                 font-weight: bold;
  91           }
  92
  93           .backupItemDetails {
  94                 font-size: 12px;
  95                 padding: 5px;
  96           }
  97
  98           .backupItemDetailsNr {
  99                 position: absolute;
 100                 left: 100px;
 101           }
 102
 103           .backupItemToolbar {
 104                 position: absolute;
 105                 display: block;
 106                 right: 10px;
 107                 top: 10px;
 108           }
 109
 110                 .backupItemToolbar a {
 111                         cursor: hand;
 112                         cursor: pointer;
 113                 }
 114
 115           .backupItemFooter {
 116                 position: absolute;
 117                 display: block;
 118                 right: 10px;
 119                 bottom: 10px;
 120
 121                 font-size: 10px;
 122           }
 123
 124           .backupItemFooterAutoBackup {
 125                 color: #23b827;
 126           }
 127
 128           .backupItemFooterManualBackup {
 129                 color: #d95843;
 130           }
 131
 132           #backupsListTitle {
 133                 position: relative;
 134                 font-size: 15px;
 135                 margin: 4px 10px;
 136                 padding: 10px;
 137                 padding-bottom: 0px;
 138                 text-decoration:underline;
 139           }
 140
 141           #storageDiv {
 142                 margin-top: 4px;
 143                 text-align: center;
 144                 font-size: 10px;
 145                 color: grey;
 146           }
 147
 148           #showOlderBackupsDiv {
 149                 text-align: center;
 150                 margin-bottom: 10px;
 151           }
 152
 153           .restoreDiv {
 154                 position: relative;
 155                 padding: 20px;
 156           }
 157
 158           .restoreDivCollapseExpand {
 159                 position: absolute;
 160                 right: 26px;
 161                 margin-top: -16px;
 162           }
 163
 164           .restoreTabSpan {
 165                 display: block;
 166                 margin-left: 8px;
 167                 overflow: hidden;
 168                 max-height: 20px;
 169                 position: absolute;
 170                 top: 0px;
 171                 left: 20px;
 172           }
 173
 174           #floatingRightDiv {
 175                 display: none;
 176                 width: 150px;
 177                 position: fixed;
 178                 top: 50%;
 179
 180                 margin-top: -100px;
 181                 margin-left: 700px;
 182
 183                 padding: 6px;
 184                 border: 1px solid black;
 185                 background-color: #F3F3F3;
 186           }
 187
 188           #restoreSelectedDiv {
 189                 float: right;
 190                 padding: 10px;
 191                 text-align: center;
 192                 font-size: 14px;
 193                 font-weight: bold;
 194                 background-color: #d8e8f0;
 195                 cursor: pointer;
 196                 margin-top: 10px;
 197           }
 198
 199           #restoreSelectedDiv:hover {
 200                 background-color: #b0d7eb;
 201           }
 202
 203           #restoreSelectedInfoDiv {
 204                 float: right;
 205           }
 206
 207           #restoreSelectedRadio {
 208                 float: right;
 209                 font-size: 10px;
 210                 margin-top: 10px;
 211           }
 212
 213           .windowTitleDiv {
 214                 padding: 10px;
 215                 margin: 4px;
 216                 background-color: #e0ebdb;
 217                 cursor: pointer;
 218           }
 219
 220           .windowTitleDiv:hover {
 221                 background-color: #cce2c2;
 222           }
 223
 224           .tabsDiv {
 225                 margin-left: 20px;
 226           }
 227
 228           #smallDescription {
 229                 padding: 10px;
 230                 font-size: 12px;
 231                 color: grey;
 232           }
 233
 234           .radioSpanLabel {
 235                 cursor: default;
 236           }
 237     </style>
 238
 239         <style>
 240         label {
 241                 display: inline;
 242         }
 243
 244         .regular-checkbox {
 245                 display: none;
 246         }
 247
 248         .regular-checkbox + label {
 249                 background-color: #fafafa;
 250                 border: 1px solid #cacece;
 251                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
 252                 padding: 9px;
 253                 border-radius: 3px;
 254                 display: inline-block;
 255                 position: relative;
 256         }
 257
 258         .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
 259                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
 260         }
 261
 262         .regular-checkbox:checked + label {
 263                 background-color: #e9ecee;
 264                 border: 1px solid #adb8c0;
 265                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
 266                 color: #99a1a7;
 267         }
 268
 269         .regular-checkbox:checked + label:after {
 270                 content: '\2714';
 271                 font-size: 14px;
 272                 position: absolute;
 273                 top: 0px;
 274                 left: 3px;
 275                 color: #99a1a7;
 276         }
 277         .labelCheckbox {
 278                 margin: 0px;
 279                 cursor: pointer;
 280         }
 281         </style>
 282         <style>
 283         .regular-radio {
 284          display: none;
 285         }
 286
 287         .regular-radio + label {
 288                 -webkit-appearance: none;
 289                 background-color: #fafafa;
 290                 border: 1px solid #cacece;
 291                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
 292                 padding: 7px;
 293                 border-radius: 50px;
 294                 display: inline-block;
 295                 position: relative;
 296                 margin-bottom: -3px;
 297         }
 298
 299         .regular-radio:checked + label:after {
 300                 content: ' ';
 301                 width: 8px;
 302                 height: 8px;
 303                 border-radius: 50px;
 304                 position: absolute;
 305                 top: 3px;
 306                 background: #99a1a7;
 307                 box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
 308                 text-shadow: 0px;
 309                 left: 3px;
 310                 font-size: 32px;
 311         }
 312
 313         .regular-radio:checked + label {
 314                 background-color: #e9ecee;
 315                 color: #99a1a7;
 316                 border: 1px solid #adb8c0;
 317                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
 318         }
 319
 320         .regular-radio + label:active, .regular-radio:checked + label:active {
 321                 box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
 322         }
 323         </style>
 324
 325         <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 326     <script src="jquery-1.8.2.min.js"></script>
 327         <script src="bootstrap.min.js"></script>
 328         <script src="bootbox.min.js"></script>
 329
 330         <style>
 331         .modal {
 332                 width:300px;
 333                 margin:-150px 0 0 -150px;
 334         }
 335         </style>
 336     <!-- JavaScript and HTML must be in separate files for security. -->
 337     <script src="advanced.js?v=201211062258"></script>
 338
 339   </head>
 340   <body>
 341   <div id="content">
 342   <div id="contentWrapper">
 343
 344   <!-- <button id="btnDoSomething">Do SOmething</button> -->
 345   <img src="icon.png" style="border: 0; padding: 10px;" /><b>Tabs Backup & Restore - Advanced</b>
 346
 347   <a href="https://chrome.google.com/webstore/detail/ojcidmfgknjffgginmfeakngnegjkaca/reviews" target="_blank" style="position: absolute; right: 54px; top: 12px;">Rate on the Chrome Store<img src="img/chrome-web-store.png" style="width: 24px;" /></a>
 348
 349   <div id="smallDescription">
 350                 With <i>Advanced Restore</i> you can restore a custom selection of your backups!<br />
 351                 <ul style="margin-top: 5px">
 352                 <li>Click on a Backup entry to expand it, and view all the windows that were backed up.</li>
 353                 <li>Click on a Window entry to view all the tabs it contained.</li>
 354                 <li>Select the checkboxes to make your selection.</li>
 355                 <li>Press the "Restore Selected" button when you are ready to restore.</li>
 356                 </ul>
 357
 358         </div>
 359
 360   <div id="backupsListTitle">
 361         Your Backups
 362   </div>
 363         <div id="backupsDiv"></div>
 364
 365         <div id="showOlderBackupsDiv">
 366                 <a id="menuItem_showOlderBackups">Show all backups..</a>
 367         </div>
 368
 369
 370         <div id="floatingRightDiv">
 371                 <div>
 372                         <a id="restoreSelectedClearSelectionLink" style="float: right; padding-bottom: 4px;">Clear selection</a>
 373                 </div>
 374
 375                 <div id="restoreSelectedInfoDiv">
 376                                 Selected tabs: <span id="restoreSelectedInfoNumTabs" style="font-weight: bold;"></span>
 377                         </div>
 378
 379                 <div id="restoreSelectedDiv">
 380                         Restore selected <img src="icon_48.png" style="width: 26px;" />
 381                 </div>
 382                 <div id="restoreSelectedRadio">
 383                         <input type="radio" id="restoreSelectedRadioSingleWindow" name="radio-1-set" class="regular-radio" />
 384                         <label for="restoreSelectedRadioSingleWindow" title="Restore all selected tabs into a single window"></label>
 385                         <span id="restoreSelectedRadioSingleWindowSpanLabel" class="radioSpanLabel" title="Restore all selected tabs into a single window"> Restore to a single window</span><br />
 386
 387                         <input type="radio" id="restoreSelectedRadioMultipleWindows" name="radio-1-set" class="regular-radio" checked />
 388                         <label for="restoreSelectedRadioMultipleWindows" title="Restore selected tabs into their respective window"></label>
 389                         <span id="restoreSelectedRadioMultipleWindowsSpanLabel" class="radioSpanLabel" title="Restore selected tabs into their respective window"> Restore to multiple windows</span>
 390                 </div>
 391         </div>
 392         </div>
 393         </div>
 394   </body>
 395 </html>