advanced.html

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