popup.html

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