Theme Inspinia
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dashboard_4.html 32KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>INSPINIA | Dashboard v.4</title>
  7. <link href="css/bootstrap.min.css" rel="stylesheet">
  8. <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
  9. <link href="css/animate.css" rel="stylesheet">
  10. <link href="css/style.css" rel="stylesheet">
  11. </head>
  12. <body class="top-navigation">
  13. <div id="wrapper">
  14. <div id="page-wrapper" class="gray-bg">
  15. <div class="row border-bottom white-bg">
  16. <nav class="navbar navbar-static-top" role="navigation">
  17. <div class="navbar-header">
  18. <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
  19. <i class="fa fa-reorder"></i>
  20. </button>
  21. <a href="#" class="navbar-brand">Inspinia</a>
  22. </div>
  23. <div class="navbar-collapse collapse" id="navbar">
  24. <ul class="nav navbar-nav">
  25. <li class="active">
  26. <a aria-expanded="false" role="button" href="layouts.html"> Back to main Layout page</a>
  27. </li>
  28. <li class="dropdown">
  29. <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu item <span class="caret"></span></a>
  30. <ul role="menu" class="dropdown-menu">
  31. <li><a href="">Menu item</a></li>
  32. <li><a href="">Menu item</a></li>
  33. <li><a href="">Menu item</a></li>
  34. <li><a href="">Menu item</a></li>
  35. </ul>
  36. </li>
  37. <li class="dropdown">
  38. <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu item <span class="caret"></span></a>
  39. <ul role="menu" class="dropdown-menu">
  40. <li><a href="">Menu item</a></li>
  41. <li><a href="">Menu item</a></li>
  42. <li><a href="">Menu item</a></li>
  43. <li><a href="">Menu item</a></li>
  44. </ul>
  45. </li>
  46. <li class="dropdown">
  47. <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu item <span class="caret"></span></a>
  48. <ul role="menu" class="dropdown-menu">
  49. <li><a href="">Menu item</a></li>
  50. <li><a href="">Menu item</a></li>
  51. <li><a href="">Menu item</a></li>
  52. <li><a href="">Menu item</a></li>
  53. </ul>
  54. </li>
  55. <li class="dropdown">
  56. <a aria-expanded="false" role="button" href="#" class="dropdown-toggle" data-toggle="dropdown"> Menu item <span class="caret"></span></a>
  57. <ul role="menu" class="dropdown-menu">
  58. <li><a href="">Menu item</a></li>
  59. <li><a href="">Menu item</a></li>
  60. <li><a href="">Menu item</a></li>
  61. <li><a href="">Menu item</a></li>
  62. </ul>
  63. </li>
  64. </ul>
  65. <ul class="nav navbar-top-links navbar-right">
  66. <li>
  67. <a href="login.html">
  68. <i class="fa fa-sign-out"></i> Log out
  69. </a>
  70. </li>
  71. </ul>
  72. </div>
  73. </nav>
  74. </div>
  75. <div class="wrapper wrapper-content">
  76. <div class="container">
  77. <div class="row">
  78. <div class="col-md-2">
  79. <div class="ibox float-e-margins">
  80. <div class="ibox-title">
  81. <span class="label label-success pull-right">Monthly</span>
  82. <h5>Views</h5>
  83. </div>
  84. <div class="ibox-content">
  85. <h1 class="no-margins">386,200</h1>
  86. <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i></div>
  87. <small>Total views</small>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="col-md-2">
  92. <div class="ibox float-e-margins">
  93. <div class="ibox-title">
  94. <span class="label label-info pull-right">Annual</span>
  95. <h5>Orders</h5>
  96. </div>
  97. <div class="ibox-content">
  98. <h1 class="no-margins">80,800</h1>
  99. <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
  100. <small>New orders</small>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="col-md-4">
  105. <div class="ibox float-e-margins">
  106. <div class="ibox-title">
  107. <span class="label label-primary pull-right">Today</span>
  108. <h5>Vistits</h5>
  109. </div>
  110. <div class="ibox-content">
  111. <div class="row">
  112. <div class="col-md-6">
  113. <h1 class="no-margins">$ 406,420</h1>
  114. <div class="font-bold text-navy">44% <i class="fa fa-level-up"></i> <small>Rapid pace</small></div>
  115. </div>
  116. <div class="col-md-6">
  117. <h1 class="no-margins">206,120</h1>
  118. <div class="font-bold text-navy">22% <i class="fa fa-level-up"></i> <small>Slow pace</small></div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="col-md-4">
  125. <div class="ibox float-e-margins">
  126. <div class="ibox-title">
  127. <h5>Monthly income</h5>
  128. <div class="ibox-tools">
  129. <span class="label label-primary">Updated 12.2015</span>
  130. </div>
  131. </div>
  132. <div class="ibox-content no-padding">
  133. <div class="flot-chart m-t-lg" style="height: 55px;">
  134. <div class="flot-chart-content" id="flot-chart1"></div>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. <div class="row">
  141. <div class="col-lg-8">
  142. <div class="ibox float-e-margins">
  143. <div class="ibox-content">
  144. <div>
  145. <span class="pull-right text-right">
  146. <small>Average value of sales in the past month in: <strong>United states</strong></small>
  147. <br/>
  148. All sales: 162,862
  149. </span>
  150. <h3 class="font-bold no-margins">
  151. Half-year revenue margin
  152. </h3>
  153. <small>Sales marketing.</small>
  154. </div>
  155. <div class="m-t-sm">
  156. <div class="row">
  157. <div class="col-md-8">
  158. <div>
  159. <canvas id="lineChart" height="114"></canvas>
  160. </div>
  161. </div>
  162. <div class="col-md-4">
  163. <ul class="stat-list m-t-lg">
  164. <li>
  165. <h2 class="no-margins">2,346</h2>
  166. <small>Total orders in period</small>
  167. <div class="progress progress-mini">
  168. <div class="progress-bar" style="width: 48%;"></div>
  169. </div>
  170. </li>
  171. <li>
  172. <h2 class="no-margins ">4,422</h2>
  173. <small>Orders in last month</small>
  174. <div class="progress progress-mini">
  175. <div class="progress-bar" style="width: 60%;"></div>
  176. </div>
  177. </li>
  178. </ul>
  179. </div>
  180. </div>
  181. </div>
  182. <div class="m-t-md">
  183. <small class="pull-right">
  184. <i class="fa fa-clock-o"> </i>
  185. Update on 16.07.2015
  186. </small>
  187. <small>
  188. <strong>Analysis of sales:</strong> The value has been changed over time, and last month reached a level over $50,000.
  189. </small>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <div class="col-lg-4">
  195. <div class="ibox float-e-margins">
  196. <div class="ibox-title">
  197. <span class="label label-warning pull-right">Data has changed</span>
  198. <h5>User activity</h5>
  199. </div>
  200. <div class="ibox-content">
  201. <div class="row">
  202. <div class="col-xs-4">
  203. <small class="stats-label">Pages / Visit</small>
  204. <h4>236 321.80</h4>
  205. </div>
  206. <div class="col-xs-4">
  207. <small class="stats-label">% New Visits</small>
  208. <h4>46.11%</h4>
  209. </div>
  210. <div class="col-xs-4">
  211. <small class="stats-label">Last week</small>
  212. <h4>432.021</h4>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="ibox-content">
  217. <div class="row">
  218. <div class="col-xs-4">
  219. <small class="stats-label">Pages / Visit</small>
  220. <h4>643 321.10</h4>
  221. </div>
  222. <div class="col-xs-4">
  223. <small class="stats-label">% New Visits</small>
  224. <h4>92.43%</h4>
  225. </div>
  226. <div class="col-xs-4">
  227. <small class="stats-label">Last week</small>
  228. <h4>564.554</h4>
  229. </div>
  230. </div>
  231. </div>
  232. <div class="ibox-content">
  233. <div class="row">
  234. <div class="col-xs-4">
  235. <small class="stats-label">Pages / Visit</small>
  236. <h4>436 547.20</h4>
  237. </div>
  238. <div class="col-xs-4">
  239. <small class="stats-label">% New Visits</small>
  240. <h4>150.23%</h4>
  241. </div>
  242. <div class="col-xs-4">
  243. <small class="stats-label">Last week</small>
  244. <h4>124.990</h4>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="row">
  252. <div class="col-lg-12">
  253. <div class="ibox float-e-margins">
  254. <div class="ibox-title">
  255. <h5>Custom responsive table </h5>
  256. <div class="ibox-tools">
  257. <a class="collapse-link">
  258. <i class="fa fa-chevron-up"></i>
  259. </a>
  260. <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  261. <i class="fa fa-wrench"></i>
  262. </a>
  263. <ul class="dropdown-menu dropdown-user">
  264. <li><a href="#">Config option 1</a>
  265. </li>
  266. <li><a href="#">Config option 2</a>
  267. </li>
  268. </ul>
  269. <a class="close-link">
  270. <i class="fa fa-times"></i>
  271. </a>
  272. </div>
  273. </div>
  274. <div class="ibox-content">
  275. <div class="row">
  276. <div class="col-sm-9 m-b-xs">
  277. <div data-toggle="buttons" class="btn-group">
  278. <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> Day </label>
  279. <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> Week </label>
  280. <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> Month </label>
  281. </div>
  282. </div>
  283. <div class="col-sm-3">
  284. <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
  285. <button type="button" class="btn btn-sm btn-primary"> Go!</button> </span></div>
  286. </div>
  287. </div>
  288. <div class="table-responsive">
  289. <table class="table table-striped">
  290. <thead>
  291. <tr>
  292. <th>#</th>
  293. <th>Project </th>
  294. <th>Name </th>
  295. <th>Phone </th>
  296. <th>Company </th>
  297. <th>Completed </th>
  298. <th>Task</th>
  299. <th>Date</th>
  300. <th>Action</th>
  301. </tr>
  302. </thead>
  303. <tbody>
  304. <tr>
  305. <td>1</td>
  306. <td>Project <small>This is example of project</small></td>
  307. <td>Patrick Smith</td>
  308. <td>0800 051213</td>
  309. <td>Inceptos Hymenaeos Ltd</td>
  310. <td><span class="pie">0.52/1.561</span></td>
  311. <td>20%</td>
  312. <td>Jul 14, 2013</td>
  313. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  314. </tr>
  315. <tr>
  316. <td>2</td>
  317. <td>Alpha project</td>
  318. <td>Alice Jackson</td>
  319. <td>0500 780909</td>
  320. <td>Nec Euismod In Company</td>
  321. <td><span class="pie">6,9</span></td>
  322. <td>40%</td>
  323. <td>Jul 16, 2013</td>
  324. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  325. </tr>
  326. <tr>
  327. <td>3</td>
  328. <td>Betha project</td>
  329. <td>John Smith</td>
  330. <td>0800 1111</td>
  331. <td>Erat Volutpat</td>
  332. <td><span class="pie">3,1</span></td>
  333. <td>75%</td>
  334. <td>Jul 18, 2013</td>
  335. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  336. </tr>
  337. <tr>
  338. <td>4</td>
  339. <td>Gamma project</td>
  340. <td>Anna Jordan</td>
  341. <td>(016977) 0648</td>
  342. <td>Tellus Ltd</td>
  343. <td><span class="pie">4,9</span></td>
  344. <td>18%</td>
  345. <td>Jul 22, 2013</td>
  346. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  347. </tr>
  348. <tr>
  349. <td>2</td>
  350. <td>Alpha project</td>
  351. <td>Alice Jackson</td>
  352. <td>0500 780909</td>
  353. <td>Nec Euismod In Company</td>
  354. <td><span class="pie">6,9</span></td>
  355. <td>40%</td>
  356. <td>Jul 16, 2013</td>
  357. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  358. </tr>
  359. <tr>
  360. <td>1</td>
  361. <td>Project <small>This is example of project</small></td>
  362. <td>Patrick Smith</td>
  363. <td>0800 051213</td>
  364. <td>Inceptos Hymenaeos Ltd</td>
  365. <td><span class="pie">0.52/1.561</span></td>
  366. <td>20%</td>
  367. <td>Jul 14, 2013</td>
  368. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  369. </tr>
  370. <tr>
  371. <td>4</td>
  372. <td>Gamma project</td>
  373. <td>Anna Jordan</td>
  374. <td>(016977) 0648</td>
  375. <td>Tellus Ltd</td>
  376. <td><span class="pie">4,9</span></td>
  377. <td>18%</td>
  378. <td>Jul 22, 2013</td>
  379. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  380. </tr>
  381. <tr>
  382. <td>1</td>
  383. <td>Project <small>This is example of project</small></td>
  384. <td>Patrick Smith</td>
  385. <td>0800 051213</td>
  386. <td>Inceptos Hymenaeos Ltd</td>
  387. <td><span class="pie">0.52/1.561</span></td>
  388. <td>20%</td>
  389. <td>Jul 14, 2013</td>
  390. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  391. </tr>
  392. <tr>
  393. <td>2</td>
  394. <td>Alpha project</td>
  395. <td>Alice Jackson</td>
  396. <td>0500 780909</td>
  397. <td>Nec Euismod In Company</td>
  398. <td><span class="pie">6,9</span></td>
  399. <td>40%</td>
  400. <td>Jul 16, 2013</td>
  401. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  402. </tr>
  403. <tr>
  404. <td>3</td>
  405. <td>Betha project</td>
  406. <td>John Smith</td>
  407. <td>0800 1111</td>
  408. <td>Erat Volutpat</td>
  409. <td><span class="pie">3,1</span></td>
  410. <td>75%</td>
  411. <td>Jul 18, 2013</td>
  412. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  413. </tr>
  414. <tr>
  415. <td>4</td>
  416. <td>Gamma project</td>
  417. <td>Anna Jordan</td>
  418. <td>(016977) 0648</td>
  419. <td>Tellus Ltd</td>
  420. <td><span class="pie">4,9</span></td>
  421. <td>18%</td>
  422. <td>Jul 22, 2013</td>
  423. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  424. </tr>
  425. <tr>
  426. <td>2</td>
  427. <td>Alpha project</td>
  428. <td>Alice Jackson</td>
  429. <td>0500 780909</td>
  430. <td>Nec Euismod In Company</td>
  431. <td><span class="pie">6,9</span></td>
  432. <td>40%</td>
  433. <td>Jul 16, 2013</td>
  434. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  435. </tr>
  436. <tr>
  437. <td>1</td>
  438. <td>Project <small>This is example of project</small></td>
  439. <td>Patrick Smith</td>
  440. <td>0800 051213</td>
  441. <td>Inceptos Hymenaeos Ltd</td>
  442. <td><span class="pie">0.52/1.561</span></td>
  443. <td>20%</td>
  444. <td>Jul 14, 2013</td>
  445. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  446. </tr>
  447. <tr>
  448. <td>4</td>
  449. <td>Gamma project</td>
  450. <td>Anna Jordan</td>
  451. <td>(016977) 0648</td>
  452. <td>Tellus Ltd</td>
  453. <td><span class="pie">4,9</span></td>
  454. <td>18%</td>
  455. <td>Jul 22, 2013</td>
  456. <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
  457. </tr>
  458. </tbody>
  459. </table>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. </div>
  466. </div>
  467. <div class="footer">
  468. <div class="pull-right">
  469. 10GB of <strong>250GB</strong> Free.
  470. </div>
  471. <div>
  472. <strong>Copyright</strong> Example Company &copy; 2014-2015
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. <!-- Mainly scripts -->
  478. <script src="js/jquery-2.1.1.js"></script>
  479. <script src="js/bootstrap.min.js"></script>
  480. <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
  481. <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  482. <!-- Custom and plugin javascript -->
  483. <script src="js/inspinia.js"></script>
  484. <script src="js/plugins/pace/pace.min.js"></script>
  485. <!-- Flot -->
  486. <script src="js/plugins/flot/jquery.flot.js"></script>
  487. <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
  488. <script src="js/plugins/flot/jquery.flot.resize.js"></script>
  489. <!-- ChartJS-->
  490. <script src="js/plugins/chartJs/Chart.min.js"></script>
  491. <!-- Peity -->
  492. <script src="js/plugins/peity/jquery.peity.min.js"></script>
  493. <!-- Peity demo -->
  494. <script src="js/demo/peity-demo.js"></script>
  495. <script>
  496. $(document).ready(function() {
  497. var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
  498. var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];
  499. var data1 = [
  500. { label: "Data 1", data: d1, color: '#17a084'},
  501. { label: "Data 2", data: d2, color: '#127e68' }
  502. ];
  503. $.plot($("#flot-chart1"), data1, {
  504. xaxis: {
  505. tickDecimals: 0
  506. },
  507. series: {
  508. lines: {
  509. show: true,
  510. fill: true,
  511. fillColor: {
  512. colors: [{
  513. opacity: 1
  514. }, {
  515. opacity: 1
  516. }]
  517. },
  518. },
  519. points: {
  520. width: 0.1,
  521. show: false
  522. },
  523. },
  524. grid: {
  525. show: false,
  526. borderWidth: 0
  527. },
  528. legend: {
  529. show: false,
  530. }
  531. });
  532. var lineData = {
  533. labels: ["January", "February", "March", "April", "May", "June", "July"],
  534. datasets: [
  535. {
  536. label: "Example dataset",
  537. fillColor: "rgba(220,220,220,0.5)",
  538. strokeColor: "rgba(220,220,220,1)",
  539. pointColor: "rgba(220,220,220,1)",
  540. pointStrokeColor: "#fff",
  541. pointHighlightFill: "#fff",
  542. pointHighlightStroke: "rgba(220,220,220,1)",
  543. data: [65, 59, 40, 51, 36, 25, 40]
  544. },
  545. {
  546. label: "Example dataset",
  547. fillColor: "rgba(26,179,148,0.5)",
  548. strokeColor: "rgba(26,179,148,0.7)",
  549. pointColor: "rgba(26,179,148,1)",
  550. pointStrokeColor: "#fff",
  551. pointHighlightFill: "#fff",
  552. pointHighlightStroke: "rgba(26,179,148,1)",
  553. data: [48, 48, 60, 39, 56, 37, 30]
  554. }
  555. ]
  556. };
  557. var lineOptions = {
  558. scaleShowGridLines: true,
  559. scaleGridLineColor: "rgba(0,0,0,.05)",
  560. scaleGridLineWidth: 1,
  561. bezierCurve: true,
  562. bezierCurveTension: 0.4,
  563. pointDot: true,
  564. pointDotRadius: 4,
  565. pointDotStrokeWidth: 1,
  566. pointHitDetectionRadius: 20,
  567. datasetStroke: true,
  568. datasetStrokeWidth: 2,
  569. datasetFill: true,
  570. responsive: true,
  571. };
  572. var ctx = document.getElementById("lineChart").getContext("2d");
  573. var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
  574. });
  575. </script>
  576. </body>
  577. </html>