dashboard.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html class='no-js' lang='en'>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
  6. <title>Dashboard</title>
  7. <meta content='lab2023' name='author'>
  8. <meta content='' name='description'>
  9. <meta content='' name='keywords'>
  10. <link href="assets/stylesheets/application-a07755f5.css" rel="stylesheet" type="text/css" /><link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  11. <link href="assets/images/favicon.ico" rel="icon" type="image/ico" />
  12. </head>
  13. <body class='main page'>
  14. <!-- Navbar -->
  15. <div class='navbar navbar-default' id='navbar'>
  16. <a class='navbar-brand' href='#'>
  17. <i class='icon-beer'></i>
  18. Hierapolis
  19. </a>
  20. <ul class='nav navbar-nav pull-right'>
  21. <li class='dropdown'>
  22. <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
  23. <i class='icon-envelope'></i>
  24. Messages
  25. <span class='badge'>5</span>
  26. <b class='caret'></b>
  27. </a>
  28. <ul class='dropdown-menu'>
  29. <li>
  30. <a href='#'>New message</a>
  31. </li>
  32. <li>
  33. <a href='#'>Inbox</a>
  34. </li>
  35. <li>
  36. <a href='#'>Out box</a>
  37. </li>
  38. <li>
  39. <a href='#'>Trash</a>
  40. </li>
  41. </ul>
  42. </li>
  43. <li>
  44. <a href='#'>
  45. <i class='icon-cog'></i>
  46. Settings
  47. </a>
  48. </li>
  49. <li class='dropdown user'>
  50. <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
  51. <i class='icon-user'></i>
  52. <strong>John DOE</strong>
  53. <img class="img-rounded" src="http://placehold.it/20x20/ccc/777" />
  54. <b class='caret'></b>
  55. </a>
  56. <ul class='dropdown-menu'>
  57. <li>
  58. <a href='#'>Edit Profile</a>
  59. </li>
  60. <li class='divider'></li>
  61. <li>
  62. <a href="/">Sign out</a>
  63. </li>
  64. </ul>
  65. </li>
  66. </ul>
  67. </div>
  68. <div id='wrapper'>
  69. <!-- Sidebar -->
  70. <section id='sidebar'>
  71. <i class='icon-align-justify icon-large' id='toggle'></i>
  72. <ul id='dock'>
  73. <li class='active launcher'>
  74. <i class='icon-dashboard'></i>
  75. <a href="dashboard.html">Dashboard</a>
  76. </li>
  77. <li class='launcher'>
  78. <i class='icon-file-text-alt'></i>
  79. <a href="forms.html">Forms</a>
  80. </li>
  81. <li class='launcher'>
  82. <i class='icon-table'></i>
  83. <a href="tables.html">Tables</a>
  84. </li>
  85. <li class='launcher dropdown hover'>
  86. <i class='icon-flag'></i>
  87. <a href='#'>Reports</a>
  88. <ul class='dropdown-menu'>
  89. <li class='dropdown-header'>Launcher description</li>
  90. <li>
  91. <a href='#'>Action</a>
  92. </li>
  93. <li>
  94. <a href='#'>Another action</a>
  95. </li>
  96. <li>
  97. <a href='#'>Something else here</a>
  98. </li>
  99. </ul>
  100. </li>
  101. <li class='launcher'>
  102. <i class='icon-bookmark'></i>
  103. <a href='#'>Bookmarks</a>
  104. </li>
  105. <li class='launcher'>
  106. <i class='icon-cloud'></i>
  107. <a href='#'>Backup</a>
  108. </li>
  109. <li class='launcher'>
  110. <i class='icon-bug'></i>
  111. <a href='#'>Feedback</a>
  112. </li>
  113. </ul>
  114. <div data-toggle='tooltip' id='beaker' title='Made by lab2023'></div>
  115. </section>
  116. <!-- Tools -->
  117. <section id='tools'>
  118. <ul class='breadcrumb' id='breadcrumb'>
  119. <li class='title'>Dashboard</li>
  120. <li><a href="#">Lorem</a></li>
  121. <li class='active'><a href="#">ipsum</a></li>
  122. </ul>
  123. <div id='toolbar'>
  124. <div class='btn-group'>
  125. <a class='btn' data-toggle='toolbar-tooltip' href='#' title='Building'>
  126. <i class='icon-building'></i>
  127. </a>
  128. <a class='btn' data-toggle='toolbar-tooltip' href='#' title='Laptop'>
  129. <i class='icon-laptop'></i>
  130. </a>
  131. <a class='btn' data-toggle='toolbar-tooltip' href='#' title='Calendar'>
  132. <i class='icon-calendar'></i>
  133. <span class='badge'>3</span>
  134. </a>
  135. <a class='btn' data-toggle='toolbar-tooltip' href='#' title='Lemon'>
  136. <i class='icon-lemon'></i>
  137. </a>
  138. </div>
  139. <div class='label label-danger'>
  140. Danger
  141. </div>
  142. <div class='label label-info'>
  143. Info
  144. </div>
  145. </div>
  146. </section>
  147. <!-- Content -->
  148. <div id='content'>
  149. <div class='panel panel-default'>
  150. <div class='panel-heading'>
  151. <i class='icon-beer icon-large'></i>
  152. Hierapolis Rocks!
  153. <div class='panel-tools'>
  154. <div class='btn-group'>
  155. <a class='btn' href='#'>
  156. <i class='icon-refresh'></i>
  157. Refresh statics
  158. </a>
  159. <a class='btn' data-toggle='toolbar-tooltip' href='#' title='Toggle'>
  160. <i class='icon-chevron-down'></i>
  161. </a>
  162. </div>
  163. </div>
  164. </div>
  165. <div class='panel-body'>
  166. <div class='page-header'>
  167. <h4>System usage</h4>
  168. </div>
  169. <div class='progress'>
  170. <div class='progress-bar progress-bar-success' style='width: 35%'></div>
  171. <div class='progress-bar progress-bar-warning' style='width: 20%'></div>
  172. <div class='progress-bar progress-bar-danger' style='width: 10%'></div>
  173. </div>
  174. <div class='page-header'>
  175. <h4>User statics</h4>
  176. </div>
  177. <div class='row text-center'>
  178. <div class='col-md-3'>
  179. <input class='knob second' data-bgcolor='#d4ecfd' data-fgcolor='#30a1ec' data-height='140' data-inputcolor='#333' data-thickness='.3' data-width='140' type='text' value='50'>
  180. </div>
  181. <div class='col-md-3'>
  182. <input class='knob second' data-bgcolor='#c4e9aa' data-fgcolor='#8ac368' data-height='140' data-inputcolor='#333' data-thickness='.3' data-width='140' type='text' value='75'>
  183. </div>
  184. <div class='col-md-3'>
  185. <input class='knob second' data-bgcolor='#cef3f5' data-fgcolor='#5ba0a3' data-height='140' data-inputcolor='#333' data-thickness='.3' data-width='140' type='text' value='35'>
  186. </div>
  187. <div class='col-md-3'>
  188. <input class='knob second' data-bgcolor='#f8d2e0' data-fgcolor='#b85e80' data-height='140' data-inputcolor='#333' data-thickness='.3' data-width='140' type='text' value='85'>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. <!-- Footer -->
  196. <!-- Javascripts -->
  197. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script><script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script><script src="assets/javascripts/application-985b892b.js" type="text/javascript"></script>
  198. <!-- Google Analytics -->
  199. <script>
  200. var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  201. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  202. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  203. s.parentNode.insertBefore(g,s)}(document,'script'));
  204. </script>
  205. </body>
  206. </html>