git.roojs.org Git - bootswatch/blob - AdminLTE-master/ajax/dashboard-boxrefresh-demo.php

   1 <?php
   2 sleep(1.2);
   3 ?>
   4 <div class="pad">This data has been loaded via ajax using the custom boxResfresh plugin.</div>
   5 <small id="dummy-time" class="pad pull-right text-muted"></small>
   6 <small class="pull-right pad text-muted">Last update:</small>
   7 <div class="row">
   8     <div class="col-sm-7">
   9         <!-- bar chart -->
  10         <div class="chart" id="bar-chart" style="height: 250px;"></div>
  11     </div>
  12     <div class="col-sm-5">
  13         <div class="pad">
  14             <!-- Progress bars -->
  15             <div class="clearfix">
  16                 <span class="pull-left">Bandwidth</span>
  17                 <small class="pull-right">10/200 GB</small>
  18             </div>
  19             <div class="progress xs">
  20                 <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
  21             </div>
  22
  23             <div class="clearfix">
  24                 <span class="pull-left">Transfered</span>
  25                 <small class="pull-right">10 GB</small>
  26             </div>
  27             <div class="progress xs">
  28                 <div class="progress-bar progress-bar-red" style="width: 70%;"></div>
  29             </div>
  30
  31             <div class="clearfix">
  32                 <span class="pull-left">Activity</span>
  33                 <small class="pull-right">73%</small>
  34             </div>
  35             <div class="progress xs">
  36                 <div class="progress-bar progress-bar-light-blue" style="width: 70%;"></div>
  37             </div>
  38
  39             <div class="clearfix">
  40                 <span class="pull-left">FTP</span>
  41                 <small class="pull-right">30 GB</small>
  42             </div>
  43             <div class="progress xs">
  44                 <div class="progress-bar progress-bar-aqua" style="width: 70%;"></div>
  45             </div>
  46             <!-- Buttons -->
  47             <p>
  48                 <button class="btn btn-default btn-sm"><i class="fa fa-cloud-download"></i> Generate PDF</button>
  49             </p>
  50         </div><!-- /.pad -->
  51     </div><!-- /.col -->
  52 </div><!-- /.row - inside box -->
  53
  54 <script type="text/javascript">
  55     var now = new Date();
  56     var strDateTime = [[AddZero(now.getDate()), AddZero(now.getMonth() + 1), now.getFullYear()].join("/"), [AddZero(now.getHours()), AddZero(now.getMinutes())].join(":"), now.getHours() >= 12 ? "PM" : "AM"].join(" ");
  57
  58     //Pad given value to the left with "0"
  59     function AddZero(num) {
  60         return (num >= 0 && num < 10) ? "0" + num : num + "";
  61     }
  62     var x = document.getElementById("dummy-time");
  63     x.innerHTML = strDateTime;
  64 </script>