popup.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
  15         ::-webkit-scrollbar {
  16                 width: 10px;
  17         }
  18
  19         ::-webkit-scrollbar-track {
  20                 background-color: #f4f4f4;
  21         }
  22
  23         ::-webkit-scrollbar-thumb {
  24                 background-color: #b9b9b9;
  25         }
  26
  27
  28           html {
  29                 background-color: var(--body-color);
  30                 filter: var(--body-filter);
  31           }
  32
  33       body {
  34                 font-family: Arial;
  35         min-width:357px;
  36                 overflow-x: hidden;
  37       }
  38
  39           a {
  40                 cursor: hand;
  41                 cursor: pointer;
  42           }
  43
  44       img {
  45         margin:5px;
  46         border:2px solid black;
  47         vertical-align:middle;
  48         width:75px;
  49         height:75px;
  50                 filter: var(--img-filter);
  51       }
  52
  53           .menuItem {
  54                 position: relative;
  55                 background: #edf6fd;
  56                 padding: 20px;
  57                 margin-top: 0px;
  58                 margin-left: 20px;
  59                 margin-right: 20px;
  60                 margin-bottom: 10px;
  61                 color: black;
  62                 display: block;
  63                 cursor: hand;
  64                 cursor: pointer;
  65           }
  66
  67           .menuItem:hover {
  68                 background: #d8edfc;
  69           }
  70
  71           .backupItem {
  72
  73
  74           }
  75
  76           .backupItemWrapper {
  77                 padding: 4px 8px;
  78           }
  79
  80           .backupItemContent {
  81                 position: relative;
  82                 padding: 8px;
  83                 background: #f4f4f4;
  84           }
  85
  86           .backupItemTitle {
  87                 font-size: 14px;
  88                 font-weight: bold;
  89           }
  90
  91           .backupItemDetails {
  92                 font-size: 12px;
  93                 padding: 5px;
  94           }
  95
  96           .backupItemDetailsNr {
  97                 position: absolute;
  98                 left: 100px;
  99           }
 100
 101           .backupItemToolbar {
 102                 position: absolute;
 103                 display: block;
 104                 right: 10px;
 105                 top: 10px;
 106           }
 107
 108                 .backupItemToolbar a {
 109                         cursor: hand;
 110                         cursor: pointer;
 111                 }
 112
 113           .backupItemFooter {
 114                 position: absolute;
 115                 display: block;
 116                 right: 10px;
 117                 bottom: 10px;
 118
 119                 font-size: 10px;
 120           }
 121
 122           .backupItemFooterAutoBackup {
 123                 color: #23b827;
 124           }
 125
 126           .backupItemFooterManualBackup {
 127                 color: #d95843;
 128           }
 129
 130           #backupsListTitle {
 131                 position: relative;
 132                 font-size: 15px;
 133                 margin: 4px 10px;
 134                 padding: 10px;
 135                 padding-bottom: 0px;
 136                 text-decoration:underline;
 137           }
 138
 139           #storageDiv {
 140                 margin-top: 4px;
 141                 text-align: center;
 142                 font-size: 10px;
 143                 color: grey;
 144           }
 145
 146           #showOlderBackupsDiv {
 147                 text-align: center;
 148           }
 149     </style>
 150
 151         <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
 152     <script src="jquery-1.8.2.min.js"></script>
 153         <script src="bootstrap.min.js"></script>
 154         <script src="bootbox.min.js"></script>
 155
 156         <style>
 157         .modal {
 158                 width:300px;
 159                 margin:-150px 0 0 -150px;
 160         }
 161         </style>
 162     <!-- JavaScript and HTML must be in separate files for security. -->
 163     <script src="popup.js?v=201211062258"></script>
 164
 165   </head>
 166   <body>
 167
 168   <!-- <button id="btnDoSomething">Do SOmething</button> -->
 169   <img src="icon.png" style="border: 0; padding-left: 8px; padding-right: 8px; width: 48px;" /><b>Tabs Backup & Restore</b>
 170
 171   <a id="menuItem_options" style="position: absolute; right: 4px; top: 12px;">Options<img src="img/options.png" style="width: 24px;" /></a>
 172
 173   <div id="menuItem_backupNow" class="menuItem" title="Create Backup">
 174         Create Backup Now
 175
 176         <div style="position: absolute; right: 20px; top: 0px; ">
 177                 <img src="create_bkp_64.png" style="border: 0; width: 48px; height: 48px"  />
 178         </div>
 179   </div>
 180
 181
 182   <div id="backupsListTitle">
 183         Your Backups
 184         <a id="menuItem_showAdvancedView" style="position: absolute; right: 0px; top: 2px;">Advanced Restore<img src="img/advanced_restore.png" style="width: 24px;" /></a>
 185   </div>
 186         <div id="backupsDiv"></div>
 187
 188         <div id="showOlderBackupsDiv">
 189                 <a id="menuItem_showOlderBackups" style="">Show all backups..</a>
 190         </div>
 191
 192         <div id="storageDiv">
 193                 Backups size: <span id="storageSpan"></span>
 194         </div>
 195   </body>
 196 </html>