starter.html 25 KB

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