index3.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta http-equiv="x-ua-compatible" content="ie=edge">
  7. <title>AdminLTE 3 | Dashboard v.3</title>
  8. <!-- Font Awesome Icons -->
  9. <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
  10. <!-- Theme style -->
  11. <link rel="stylesheet" href="dist/css/adminlte.min.css">
  12. <!-- Google Font: Source Sans Pro -->
  13. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  14. </head>
  15. <!--
  16. BODY TAG OPTIONS:
  17. =================
  18. Apply one or more of the following classes to to the body tag
  19. to get the desired effect
  20. |---------------------------------------------------------|
  21. | SKINS | skin-blue |
  22. | | skin-black |
  23. | | skin-purple |
  24. | | skin-yellow |
  25. | | skin-red |
  26. | | skin-green |
  27. |---------------------------------------------------------|
  28. |LAYOUT OPTIONS | layout-fixed |
  29. | | layout-boxed |
  30. | | layout-top-nav |
  31. | | sidebar-collapse |
  32. | | sidebar-mini |
  33. |---------------------------------------------------------|
  34. -->
  35. <body class="hold-transition skin-blue sidebar-mini">
  36. <div class="wrapper">
  37. <!-- Site Wide Search -->
  38. <div class="site-search-block">
  39. <a href="#" class="site-search-close" data-widget="site-search"><i class="fa fa-arrow-left"></i></a>
  40. <form action="#" method="get">
  41. <input name="query" type="search" class="form-control" placeholder="Site Search">
  42. <button type="submit" class="site-search-submit"><i class="fa fa-search"></i></button>
  43. </form>
  44. <div class="site-search-backdrop"></div>
  45. </div>
  46. <!-- Navbar -->
  47. <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
  48. <!-- Logo -->
  49. <a class="navbar-brand text-xs-center" href="#">
  50. <span class="logo hidden-md-down"><b>Admin</b>LTE</span>
  51. <span class="logo logo-mini"><b>A</b>LT</span>
  52. </a>
  53. <!-- Left navbar links -->
  54. <ul class="nav navbar-nav">
  55. <li class="nav-item">
  56. <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
  57. </li>
  58. <li class="nav-item hidden-xs-down"><a href="#" class="nav-link">Home</a></li>
  59. <li class="nav-item hidden-xs-down"><a href="#" class="nav-link">Contact</a></li>
  60. </ul>
  61. <!-- Right navbar links -->
  62. <ul class="nav navbar-nav float-sm-right">
  63. <!-- Messages Dropdown Menu -->
  64. <li class="nav-item dropdown">
  65. <a class="nav-link" data-toggle="dropdown" href="#">
  66. <i class="fa fa-comments-o"></i>
  67. <span class="tag tag-danger navbar-tag">3</span>
  68. </a>
  69. <div class="dropdown-menu dropdown-menu-lg">
  70. <a href="#" class="dropdown-item">
  71. <!-- Message Start -->
  72. <div class="media-left">
  73. <img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
  74. </div>
  75. <div class="media-body">
  76. <h3 class="dropdown-item-title">
  77. Brad Diesel
  78. <span class="float-xs-right text-xs text-danger"><i class="fa fa-star"></i></span>
  79. </h3>
  80. <p class="text-sm">Call me whenever you can...</p>
  81. <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
  82. </div>
  83. <!-- Message End -->
  84. </a>
  85. <div class="dropdown-divider"></div>
  86. <a href="#" class="dropdown-item">
  87. <!-- Message Start -->
  88. <div class="media-left">
  89. <img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
  90. </div>
  91. <div class="media-body">
  92. <h3 class="dropdown-item-title">
  93. John Pierce
  94. <span class="float-xs-right text-xs text-muted"><i class="fa fa-star"></i></span>
  95. </h3>
  96. <p class="text-sm">I got your message bro</p>
  97. <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
  98. </div>
  99. <!-- Message End -->
  100. </a>
  101. <div class="dropdown-divider"></div>
  102. <a href="#" class="dropdown-item">
  103. <!-- Message Start -->
  104. <div class="media-left">
  105. <img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
  106. </div>
  107. <div class="media-body">
  108. <h3 class="dropdown-item-title">
  109. Nora Silvester
  110. <span class="float-xs-right text-xs text-warning"><i class="fa fa-star"></i></span>
  111. </h3>
  112. <p class="text-sm">The subject goes here</p>
  113. <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
  114. </div>
  115. <!-- Message End -->
  116. </a>
  117. <div class="dropdown-divider"></div>
  118. <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  119. </div>
  120. </li>
  121. <!-- Notifications Dropdown Menu -->
  122. <li class="nav-item dropdown">
  123. <a class="nav-link" data-toggle="dropdown" href="#">
  124. <i class="fa fa-bell-o"></i>
  125. <span class="tag tag-warning navbar-tag">15</span>
  126. </a>
  127. <div class="dropdown-menu dropdown-menu-lg">
  128. <span class="dropdown-item dropdown-header">15 Notifications</span>
  129. <div class="dropdown-divider"></div>
  130. <a href="#" class="dropdown-item">
  131. <i class="fa fa-envelope icon-wide"></i> 4 new messages
  132. <span class="float-xs-right text-muted text-sm">3 mins</span>
  133. </a>
  134. <div class="dropdown-divider"></div>
  135. <a href="#" class="dropdown-item">
  136. <i class="fa fa-users icon-wide"></i> 8 friend requests
  137. <span class="float-xs-right text-muted text-sm">12 hours</span>
  138. </a>
  139. <div class="dropdown-divider"></div>
  140. <a href="#" class="dropdown-item">
  141. <i class="fa fa-file icon-wide"></i> 3 new reports
  142. <span class="float-xs-right text-muted text-sm">2 days</span>
  143. </a>
  144. <div class="dropdown-divider"></div>
  145. <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
  146. </div>
  147. </li>
  148. <!-- SEARCH FORM -->
  149. <li class="nav-item">
  150. <a href="#" class="nav-link" data-widget="site-search"><i class="fa fa-search"></i></a>
  151. </li>
  152. <li class="nav-item">
  153. <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa fa-th-large"></i></a>
  154. </li>
  155. </ul>
  156. </nav>
  157. <!-- /.navbar -->
  158. <!-- Main Sidebar Container -->
  159. <aside class="main-sidebar">
  160. <!-- Sidebar -->
  161. <div class="sidebar">
  162. <!-- Sidebar user panel (optional) -->
  163. <div class="user-panel clearfix">
  164. <div class="image">
  165. <img src="dist/img/user2-160x160.jpg" class="img-rounded" alt="User Image">
  166. </div>
  167. <div class="info">
  168. <h6>Alexander Pierce</h6>
  169. <!-- Status -->
  170. <div class="dropdown">
  171. <a href="#" data-toggle="dropdown" class="dropdown-toggle status btn btn-default btn-xs">Account</a>
  172. <div class="dropdown-menu dropdown-menu-right">
  173. <a class="dropdown-item" href="#">Profile</a>
  174. <a class="dropdown-item" href="#">Settings</a>
  175. <a class="dropdown-item" href="#">Logout</a>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. <form action="#" method="get" class="sidebar-form">
  181. <div class="form-group has-icon">
  182. <input type="search" name="q" class="form-control" placeholder="Search" data-widget="search" data-target="#searchable-treeview">
  183. <button type="submit" class="form-icon"><i class="fa fa-search"></i></button>
  184. </div>
  185. </form><!-- /.sidebar-form -->
  186. <!-- Sidebar Menu -->
  187. <nav>
  188. <ul class="nav nav-pills nav-sidebar nav-stacked" id="searchable-treeview" data-widget="treeview" role="menu">
  189. <li class="nav-header">COMPONENTS</li>
  190. <!-- Optionally, you can add icons to the links using the .nav-icon class
  191. paired with font-awesome or any other icon font library -->
  192. <li class="nav-item has-treeview menu-open">
  193. <a href="#" class="nav-link active">
  194. <i class="nav-icon fa fa-dashboard"></i> <span class="text">Dashboard</span>
  195. <i class="fa fa-angle-left pull-right"></i>
  196. </a>
  197. <ul class="nav nav-treeview">
  198. <li class="nav-item">
  199. <a href="./index.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.1</a>
  200. </li>
  201. <li class="nav-item">
  202. <a href="./index2.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.2</a>
  203. </li>
  204. <li class="nav-item">
  205. <a href="./index3.html" class="nav-link active"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.3</a>
  206. </li>
  207. </ul>
  208. </li>
  209. <li class="nav-item">
  210. <a href="#" class="nav-link">
  211. <i class="nav-icon fa fa-th"></i> <span class="text">Widgets</span> <span class="tag tag-danger float-xs-right">New</span>
  212. </a>
  213. </li>
  214. <li class="nav-item has-treeview">
  215. <a href="#" class="nav-link">
  216. <i class="nav-icon fa fa-pie-chart"></i> <span class="text">Charts</span>
  217. <i class="fa fa-angle-left pull-right"></i>
  218. </a>
  219. <ul class="nav nav-treeview">
  220. <li class="nav-item">
  221. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> ChartJS</a>
  222. </li>
  223. <li class="nav-item">
  224. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Morris</a>
  225. </li>
  226. <li class="nav-item">
  227. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Flot</a>
  228. </li>
  229. <li class="nav-item">
  230. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inline</a>
  231. </li>
  232. </ul>
  233. </li>
  234. <li class="nav-item has-treeview">
  235. <a href="#" class="nav-link">
  236. <i class="nav-icon fa fa-tree"></i> <span class="text">UI Elements</span>
  237. <i class="fa fa-angle-left pull-right"></i>
  238. </a>
  239. <ul class="nav nav-treeview">
  240. <li class="nav-item">
  241. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General</a>
  242. </li>
  243. <li class="nav-item">
  244. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Icons</a>
  245. </li>
  246. <li class="nav-item">
  247. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Buttons</a>
  248. </li>
  249. <li class="nav-item">
  250. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Sliders</a>
  251. </li>
  252. </ul>
  253. </li>
  254. <li class="nav-item has-treeview">
  255. <a href="#" class="nav-link">
  256. <i class="nav-icon fa fa-edit"></i> <span class="text">Forms</span>
  257. <i class="fa fa-angle-left pull-right"></i>
  258. </a>
  259. <ul class="nav nav-treeview">
  260. <li class="nav-item">
  261. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General Elements</a>
  262. </li>
  263. <li class="nav-item">
  264. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Advanced Elements</a>
  265. </li>
  266. <li class="nav-item">
  267. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Editors</a>
  268. </li>
  269. </ul>
  270. </li>
  271. <li class="nav-item has-treeview">
  272. <a href="#" class="nav-link">
  273. <i class="nav-icon fa fa-table"></i> <span class="text">Tables</span>
  274. <i class="fa fa-angle-left pull-right"></i>
  275. </a>
  276. <ul class="nav nav-treeview">
  277. <li class="nav-item">
  278. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Simple Tables</a>
  279. </li>
  280. <li class="nav-item">
  281. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Data Tables</a>
  282. </li>
  283. </ul>
  284. </li>
  285. <li class="nav-header">EXAMPLES</li>
  286. <li class="nav-item">
  287. <a href="#" class="nav-link">
  288. <i class="nav-icon fa fa-calendar"></i> <span class="text">Calendar</span>
  289. <span class="tag tag-info float-xs-right">2</span>
  290. </a>
  291. </li>
  292. <li class="nav-item has-treeview">
  293. <a href="#" class="nav-link">
  294. <i class="nav-icon fa fa-envelope-o"></i> <span class="text">Mailbox</span>
  295. <i class="fa fa-angle-left pull-right"></i>
  296. </a>
  297. <ul class="nav nav-treeview">
  298. <li class="nav-item">
  299. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inbox</a>
  300. </li>
  301. <li class="nav-item">
  302. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Compose</a>
  303. </li>
  304. <li class="nav-item">
  305. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Read</a>
  306. </li>
  307. </ul>
  308. </li>
  309. <li class="nav-item has-treeview">
  310. <a href="#" class="nav-link">
  311. <i class="nav-icon fa fa-book"></i> <span class="text">Pages</span>
  312. <i class="fa fa-angle-left pull-right"></i>
  313. </a>
  314. <ul class="nav nav-treeview">
  315. <li class="nav-item">
  316. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Invoice</a>
  317. </li>
  318. <li class="nav-item">
  319. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Profile</a>
  320. </li>
  321. <li class="nav-item">
  322. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Login</a>
  323. </li>
  324. <li class="nav-item">
  325. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Register</a>
  326. </li>
  327. <li class="nav-item">
  328. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Lockscreen</a>
  329. </li>
  330. </ul>
  331. </li>
  332. <li class="nav-item has-treeview">
  333. <a href="#" class="nav-link">
  334. <i class="nav-icon fa fa-plus-square-o"></i> <span class="text">Extras</span>
  335. <i class="fa fa-angle-left pull-right"></i>
  336. </a>
  337. <ul class="nav nav-treeview">
  338. <li class="nav-item">
  339. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 404</a>
  340. </li>
  341. <li class="nav-item">
  342. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 500</a>
  343. </li>
  344. <li class="nav-item">
  345. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Blank Page</a>
  346. </li>
  347. <li class="nav-item">
  348. <a href="starter.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Starter Page</a>
  349. </li>
  350. <li class="nav-item">
  351. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Pace Page</a>
  352. </li>
  353. </ul>
  354. </li>
  355. <li class="nav-header">MISCELLANEOUS</li>
  356. <li class="nav-item has-treeview">
  357. <a href="#" class="nav-link">
  358. <i class="nav-icon fa fa-sitemap"></i> <span class="text">Multilevel</span>
  359. <i class="fa fa-angle-left pull-right"></i>
  360. </a>
  361. <ul class="nav nav-treeview">
  362. <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One</a></li>
  363. <li class="nav-item">
  364. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
  365. <ul class="nav nav-treeview">
  366. <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two</a></li>
  367. <li class="nav-item">
  368. <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
  369. <ul class="nav nav-treeview">
  370. <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
  371. <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
  372. </ul><!-- Level 3 -->
  373. </li>
  374. </ul><!-- Level 2 -->
  375. </li>
  376. </ul><!-- Level 1 -->
  377. </li>
  378. <li class="nav-item">
  379. <a href="#" class="nav-link">
  380. <i class="nav-icon fa fa-file"></i> <span class="text">Documentation</span>
  381. </a>
  382. </li>
  383. <li class="nav-header">LABELS</li>
  384. <li class="nav-item">
  385. <a href="#" class="nav-link"><i class="fa fa-circle-o text-danger"></i> <span class="text">Important</span></a>
  386. </li>
  387. <li class="nav-item">
  388. <a href="#" class="nav-link"><i class="fa fa-circle-o text-warning"></i> <span class="text">Warning</span></a>
  389. </li>
  390. <li class="nav-item">
  391. <a href="#" class="nav-link"><i class="fa fa-circle-o text-info"></i> <span class="text">Informational</span></a>
  392. </li>
  393. </ul>
  394. </nav>
  395. <!-- /.sidebar-menu -->
  396. </div>
  397. <!-- /.sidebar -->
  398. </aside>
  399. <!-- Content Wrapper. Contains page content -->
  400. <div class="content-wrapper">
  401. <!-- Content Header (Page header) -->
  402. <div class="content-header container-fluid">
  403. <div class="row">
  404. <div class="col-sm-6">
  405. <h1>Dashboard v.3</h1>
  406. </div><!-- /.col -->
  407. <div class="col-sm-6">
  408. <ol class="breadcrumb float-sm-right">
  409. <li class="breadcrumb-item"><a href="#">Home</a></li>
  410. <li class="breadcrumb-item active">Dashboard v.3</li>
  411. </ol>
  412. </div><!-- /.col -->
  413. </div><!-- /.row -->
  414. </div>
  415. <!-- /.content-header -->
  416. <!-- Main content -->
  417. <div class="content container-fluid">
  418. <div class="row">
  419. <div class="col-lg-6">
  420. <!-- Your Page Content Here -->
  421. <div class="card card-block">
  422. <h5 class="card-title">Card title</h5>
  423. <p class="card-text">
  424. Some quick example text to build on the card title and make up the bulk of the card's
  425. content.
  426. </p>
  427. <a href="#" class="card-link">Card link</a>
  428. <a href="#" class="card-link">Another link</a>
  429. </div>
  430. <!-- Your Page Content Here -->
  431. <div class="card card-block">
  432. <h5 class="card-title">Card title</h5>
  433. <p class="card-text">
  434. Some quick example text to build on the card title and make up the bulk of the card's
  435. content.
  436. </p>
  437. <a href="#" class="card-link">Card link</a>
  438. <a href="#" class="card-link">Another link</a>
  439. </div>
  440. </div>
  441. <!-- /.col-md-6 -->
  442. <div class="col-lg-6">
  443. <div class="card">
  444. <div class="card-header">
  445. <h5 class="no-margin">Featured</h5>
  446. </div>
  447. <div class="card-block">
  448. <h6 class="card-title">Special title treatment</h6>
  449. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  450. <a href="#" class="btn btn-primary">Go somewhere</a>
  451. </div>
  452. </div>
  453. <div class="card">
  454. <div class="card-header">
  455. <h5 class="no-margin">Featured</h5>
  456. </div>
  457. <div class="card-block">
  458. <h6 class="card-title">Special title treatment</h6>
  459. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  460. <a href="#" class="btn btn-primary">Go somewhere</a>
  461. </div>
  462. </div>
  463. </div>
  464. <!-- /.col-md-6 -->
  465. </div>
  466. <!-- /.row -->
  467. </div>
  468. <!-- /.content -->
  469. </div>
  470. <!-- /.content-wrapper -->
  471. <!-- Control Sidebar (a secondary optional sidebar) -->
  472. <aside class="control-sidebar control-sidebar-dark">
  473. <!-- Tabs -->
  474. <ul class="nav nav-tabs">
  475. <li class="nav-item">
  476. <a class="nav-link active" href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a>
  477. </li>
  478. <li class="nav-item">
  479. <a class="nav-link" href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a>
  480. </li>
  481. </ul>
  482. <!-- Tab panes -->
  483. <div class="tab-content">
  484. <!-- Home tab content -->
  485. <div class="tab-pane active" id="control-sidebar-home-tab">
  486. <h5>Notifications</h5>
  487. <div class="media">
  488. <div class="media-left">
  489. <i class="fa fa-birthday-cake bg-red size-40 img-rounded"></i>
  490. </div>
  491. <div class="media-body">
  492. <h6 class="no-margin">Langdon's Birthday</h6>
  493. <p class="text-sm">Will be 23 on April 24th</p>
  494. </div>
  495. </div>
  496. <div class="media">
  497. <div class="media-left">
  498. <i class="fa fa-clock-o bg-green size-40 img-rounded"></i>
  499. </div>
  500. <div class="media-body">
  501. <h6 class="no-margin">Call Robert</h6>
  502. <p class="text-sm">6:00 PM</p>
  503. </div>
  504. </div>
  505. <h5 class="control-sidebar-heading">Tasks Progress</h5>
  506. <ul class="list-unstyled">
  507. <li>
  508. <h6>
  509. <a href="#">
  510. Custom Theme Design
  511. <span class="tag tag-danger float-xs-right">70%</span>
  512. </a>
  513. </h6>
  514. <progress class="progress progress-danger progress-xs" value="70" max="100"></progress>
  515. </li>
  516. <li>
  517. <h6>
  518. <a href="#">
  519. Create Shipping Tags
  520. <span class="tag tag-warning float-xs-right">60%</span>
  521. </a>
  522. </h6>
  523. <progress class="progress progress-warning progress-xs" value="60" max="100"></progress>
  524. </li>
  525. <li>
  526. <h6>
  527. <a href="#">
  528. Send Invitations
  529. <span class="tag tag-info float-xs-right">40%</span>
  530. </a>
  531. </h6>
  532. <progress class="progress progress-info progress-xs" value="40" max="100"></progress>
  533. </li>
  534. </ul>
  535. <!-- /.control-sidebar-menu -->
  536. </div>
  537. <!-- /.tab-pane -->
  538. <!-- Settings tab content -->
  539. <div class="tab-pane" id="control-sidebar-settings-tab">
  540. <form method="post">
  541. <h5>General Settings</h5>
  542. <div class="form-check">
  543. <label class="form-control-label d-block">
  544. <input type="checkbox" class="form-check-input float-xs-right" checked>
  545. Report panel usage
  546. </label>
  547. <small class='form-text'>Some information about this general settings option</small>
  548. </div>
  549. <!-- /.form-check -->
  550. </form>
  551. </div>
  552. <!-- /.tab-pane -->
  553. </div>
  554. </aside>
  555. <!-- /.control-sidebar -->
  556. <!-- THIS CLEARFIX IS REQUIRED FOR THE LAYOUT TO WORK! -->
  557. <div class="clearfix"></div><!-- /.clearfix -->
  558. <!-- Main Footer -->
  559. <footer class="main-footer">
  560. <!-- To the right -->
  561. <div class="float-xs-right hidden-xs-down">
  562. Anything you want
  563. </div>
  564. <!-- Default to the left -->
  565. <strong>Copyright &copy; 2014-2017 <a href="#">Company</a>.</strong> All rights reserved.
  566. </footer>
  567. </div>
  568. <!-- ./wrapper -->
  569. <!-- REQUIRED SCRIPTS -->
  570. <!-- jQuery -->
  571. <script src="plugins/jquery/jquery.min.js"></script>
  572. <!-- Popper.js -->
  573. <script src="plugins/popper/umd/popper.min.js"></script>
  574. <!-- Bootstrap -->
  575. <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
  576. <!-- AdminLTE -->
  577. <script src="dist/js/adminlte.js"></script>
  578. <!-- OPTIONAL SCRIPTS -->
  579. <script src="dist/js/demo.js"></script>
  580. </body>
  581. </html>