popup.html

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