dashboard-boxrefresh-demo.php 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. <div class="clearfix">
  23. <span class="pull-left">Transfered</span>
  24. <small class="pull-right">10 GB</small>
  25. </div>
  26. <div class="progress xs">
  27. <div class="progress-bar progress-bar-red" style="width: 70%;"></div>
  28. </div>
  29. <div class="clearfix">
  30. <span class="pull-left">Activity</span>
  31. <small class="pull-right">73%</small>
  32. </div>
  33. <div class="progress xs">
  34. <div class="progress-bar progress-bar-light-blue" style="width: 70%;"></div>
  35. </div>
  36. <div class="clearfix">
  37. <span class="pull-left">FTP</span>
  38. <small class="pull-right">30 GB</small>
  39. </div>
  40. <div class="progress xs">
  41. <div class="progress-bar progress-bar-aqua" style="width: 70%;"></div>
  42. </div>
  43. <!-- Buttons -->
  44. <p>
  45. <button class="btn btn-default btn-sm"><i class="fa fa-cloud-download"></i> Generate PDF</button>
  46. </p>
  47. </div><!-- /.pad -->
  48. </div><!-- /.col -->
  49. </div><!-- /.row - inside box -->
  50. <script type="text/javascript">
  51. var now = new Date();
  52. 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(" ");
  53. //Pad given value to the left with "0"
  54. function AddZero(num) {
  55. return (num >= 0 && num < 10) ? "0" + num : num + "";
  56. }
  57. var x = document.getElementById("dummy-time");
  58. x.innerHTML = strDateTime;
  59. </script>