combined_dashboard.html 6.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> -->
  6. <!-- <link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> -->
  7. <link rel="stylesheet" href="../static/css/style.css">
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  9. </head>
  10. <body class="bg-faded">
  11. <!-- top fixed bar -->
  12. <nav class="navbar black sticky-top">
  13. <a class="navbar-brand nav_text" href="#" style="color: white">
  14. <img src="../static/img/zebra_white.png" alt="Zebra Logo" class="zebra_img" class="d-inline-block align-top">
  15. EMC Engineering Tools &amp; Process News Letter
  16. </a>
  17. </nav>
  18. <!-- sidebar menu -->
  19. <aside class="sidebar">
  20. <div id="leftside-navigation" class="nano">
  21. <ul class="nano-content">
  22. <li class="sub-menu">
  23. <a href="home.html"><i class="fa fa-home"></i><span>Home</span><i class="arrow fa"></i></a>
  24. </li>
  25. <li class="sub-menu">
  26. <a href="javascript:void(0);"><i class="fa fa-cogs"></i><span>Projects</span><i class="arrow fa fa-angle-right pull-right"></i></a>
  27. <ul>
  28. <li><a href="#">Shim's cool project</a>
  29. </li>
  30. <li><a href="#">Tony's cool project</a>
  31. </li>
  32. <li><a href="#">Greg's intern project</a>
  33. </li>
  34. </ul>
  35. </li>
  36. <li class="sub-menu">
  37. <a href="lines.html"><i class="fa fa-terminal"></i><span>Lines</span><i class="arrow fa"></i></a>
  38. </li>
  39. <li class="sub-menu">
  40. <a href="authors.html"><i class="fa fa-user"></i><span>Authors</span><i class="arrow fa "></i></a>
  41. </li>
  42. </ul>
  43. </div>
  44. </aside>
  45. <!-- Main Dashboard -->
  46. <!-- Summary -->
  47. <div class="main_dash">
  48. <div class="container-fluid">
  49. <div class="card">
  50. <div class="card-block">
  51. <h1> Cool Project Name Here </h1>
  52. <br>
  53. <h6> Summary: This project is about making Zebra really fast and efficient </h6>
  54. <br>
  55. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  56. </p>
  57. </div>
  58. </div>
  59. <div class="row top_spacer">
  60. <!-- Metric 1, half screen-->
  61. <div class="col-md-6">
  62. <div class="card">
  63. <div class="card-block">
  64. <h4 class="card-title"># Commits by day-dummy </h4>
  65. <div class="metric">
  66. <div id="chart"></div>
  67. <div id="dataset-picker"></div>
  68. </div>
  69. <div class="details_spacer">
  70. <div class="text_content">
  71. <h5 class="card-text"> This data shows cool stuff </h5>
  72. <p class="card-text"> As you can see, this data focuses on business hours </p>
  73. <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <!-- Metric 2, half screen-->
  80. <div class="col-md-6">
  81. <div class="card">
  82. <div class="card-block">
  83. <h4 class="card-title">Metric 2 </h4>
  84. <div class="metric">
  85. <img class="img-fluid" style="width:100%; height: 350px;" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
  86. </div>
  87. <div class="details_spacer">
  88. <div class="text_content">
  89. <h5 class="card-text"> This is a cool image that will be a better metric</h5>
  90. <p class="card-text"> Summary: this is a mountain </p>
  91. <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- Metric 3, full width -->
  99. <div class="row top_spacer">
  100. <div class="col-md-12">
  101. <div class="card">
  102. <div class="card-block">
  103. <h4 class="card-title">Metric 3 </h4>
  104. <div class="metric">
  105. <img class="img-fluid" src="http://cdn.inquisitr.com/wp-content/uploads/2016/10/One-of-Queen-Elizabeths-last-Corgis-has-died.jpg" style="width:100%; height: 400px;" alt="Card image cap">
  106. </div>
  107. <div class="details_spacer">
  108. <div class="text_content">
  109. <h5 class="card-text"> Greg Likes Corgis</h5>
  110. <p class="card-text"> As you can see, corgis are little fluff balls </p>
  111. <p class="card-text"> <small class="text-muted"> System last updated at 11:34am </small></p>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- bottom for aesthetic spacing -->
  119. <div class="top_spacer"></div>
  120. </div>
  121. </div>
  122. <!-- bootstrap -->
  123. <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  124. <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  125. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  126. <!-- for nav bar accordion -->
  127. <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  128. <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
  129. <!-- for visualizations -->
  130. <script src="http://d3js.org/d3.v4.js"></script>
  131. <script src="../static/js/script.js" type="text/javascript"></script>
  132. </body>
  133. </html>