starter.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  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>
  7. <head>
  8. <meta charset="utf-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10. <title>AdminLTE 2 | Starter</title>
  11. <!-- Tell the browser to be responsive to screen width -->
  12. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  13. <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  14. <!-- Font Awesome -->
  15. <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  16. <!-- Ionicons -->
  17. <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  18. <!-- Theme style -->
  19. <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  20. <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  21. page. However, you can choose any other skin. Make sure you
  22. apply the skin class to the body tag so the changes take effect. -->
  23. <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
  24. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  25. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  26. <!--[if lt IE 9]>
  27. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  28. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  29. <![endif]-->
  30. <!-- Google Font -->
  31. <link rel="stylesheet"
  32. href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  33. </head>
  34. <!--
  35. BODY TAG OPTIONS:
  36. =================
  37. Apply one or more of the following classes to get the
  38. desired effect
  39. |---------------------------------------------------------|
  40. | SKINS | skin-blue |
  41. | | skin-black |
  42. | | skin-purple |
  43. | | skin-yellow |
  44. | | skin-red |
  45. | | skin-green |
  46. |---------------------------------------------------------|
  47. |LAYOUT OPTIONS | fixed |
  48. | | layout-boxed |
  49. | | layout-top-nav |
  50. | | sidebar-collapse |
  51. | | sidebar-mini |
  52. |---------------------------------------------------------|
  53. -->
  54. <body class="hold-transition skin-blue sidebar-mini">
  55. <div class="wrapper">
  56. <!-- Main Header -->
  57. <header class="main-header">
  58. <!-- Logo -->
  59. <a href="index2.html" class="logo">
  60. <!-- mini logo for sidebar mini 50x50 pixels -->
  61. <span class="logo-mini"><b>A</b>LT</span>
  62. <!-- logo for regular state and mobile devices -->
  63. <span class="logo-lg"><b>Admin</b>LTE</span>
  64. </a>
  65. <!-- Header Navbar -->
  66. <nav class="navbar navbar-static-top" role="navigation">
  67. <!-- Sidebar toggle button-->
  68. <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
  69. <span class="sr-only">Toggle navigation</span>
  70. </a>
  71. <!-- Navbar Right Menu -->
  72. <div class="navbar-custom-menu">
  73. <ul class="nav navbar-nav">
  74. <!-- Messages: style can be found in dropdown.less-->
  75. <li class="dropdown messages-menu">
  76. <!-- Menu toggle button -->
  77. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  78. <i class="fa fa-envelope-o"></i>
  79. <span class="label label-success">4</span>
  80. </a>
  81. <ul class="dropdown-menu">
  82. <li class="header">You have 4 messages</li>
  83. <li>
  84. <!-- inner menu: contains the messages -->
  85. <ul class="menu">
  86. <li><!-- start message -->
  87. <a href="#">
  88. <div class="pull-left">
  89. <!-- User Image -->
  90. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  91. </div>
  92. <!-- Message title and timestamp -->
  93. <h4>
  94. Support Team
  95. <small><i class="fa fa-clock-o"></i> 5 mins</small>
  96. </h4>
  97. <!-- The message -->
  98. <p>Why not buy a new awesome theme?</p>
  99. </a>
  100. </li>
  101. <!-- end message -->
  102. </ul>
  103. <!-- /.menu -->
  104. </li>
  105. <li class="footer"><a href="#">See All Messages</a></li>
  106. </ul>
  107. </li>
  108. <!-- /.messages-menu -->
  109. <!-- Notifications Menu -->
  110. <li class="dropdown notifications-menu">
  111. <!-- Menu toggle button -->
  112. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  113. <i class="fa fa-bell-o"></i>
  114. <span class="label label-warning">10</span>
  115. </a>
  116. <ul class="dropdown-menu">
  117. <li class="header">You have 10 notifications</li>
  118. <li>
  119. <!-- Inner Menu: contains the notifications -->
  120. <ul class="menu">
  121. <li><!-- start notification -->
  122. <a href="#">
  123. <i class="fa fa-users text-aqua"></i> 5 new members joined today
  124. </a>
  125. </li>
  126. <!-- end notification -->
  127. </ul>
  128. </li>
  129. <li class="footer"><a href="#">View all</a></li>
  130. </ul>
  131. </li>
  132. <!-- Tasks Menu -->
  133. <li class="dropdown tasks-menu">
  134. <!-- Menu Toggle Button -->
  135. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  136. <i class="fa fa-flag-o"></i>
  137. <span class="label label-danger">9</span>
  138. </a>
  139. <ul class="dropdown-menu">
  140. <li class="header">You have 9 tasks</li>
  141. <li>
  142. <!-- Inner menu: contains the tasks -->
  143. <ul class="menu">
  144. <li><!-- Task item -->
  145. <a href="#">
  146. <!-- Task title and progress text -->
  147. <h3>
  148. Design some buttons
  149. <small class="pull-right">20%</small>
  150. </h3>
  151. <!-- The progress bar -->
  152. <div class="progress xs">
  153. <!-- Change the css width attribute to simulate progress -->
  154. <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
  155. aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  156. <span class="sr-only">20% Complete</span>
  157. </div>
  158. </div>
  159. </a>
  160. </li>
  161. <!-- end task item -->
  162. </ul>
  163. </li>
  164. <li class="footer">
  165. <a href="#">View all tasks</a>
  166. </li>
  167. </ul>
  168. </li>
  169. <!-- User Account Menu -->
  170. <li class="dropdown user user-menu">
  171. <!-- Menu Toggle Button -->
  172. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  173. <!-- The user image in the navbar-->
  174. <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
  175. <!-- hidden-xs hides the username on small devices so only the image appears. -->
  176. <span class="hidden-xs">Alexander Pierce</span>
  177. </a>
  178. <ul class="dropdown-menu">
  179. <!-- The user image in the menu -->
  180. <li class="user-header">
  181. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  182. <p>
  183. Alexander Pierce - Web Developer
  184. <small>Member since Nov. 2012</small>
  185. </p>
  186. </li>
  187. <!-- Menu Body -->
  188. <li class="user-body">
  189. <div class="row">
  190. <div class="col-xs-4 text-center">
  191. <a href="#">Followers</a>
  192. </div>
  193. <div class="col-xs-4 text-center">
  194. <a href="#">Sales</a>
  195. </div>
  196. <div class="col-xs-4 text-center">
  197. <a href="#">Friends</a>
  198. </div>
  199. </div>
  200. <!-- /.row -->
  201. </li>
  202. <!-- Menu Footer-->
  203. <li class="user-footer">
  204. <div class="pull-left">
  205. <a href="#" class="btn btn-default btn-flat">Profile</a>
  206. </div>
  207. <div class="pull-right">
  208. <a href="#" class="btn btn-default btn-flat">Sign out</a>
  209. </div>
  210. </li>
  211. </ul>
  212. </li>
  213. <!-- Control Sidebar Toggle Button -->
  214. <li>
  215. <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  216. </li>
  217. </ul>
  218. </div>
  219. </nav>
  220. </header>
  221. <!-- Left side column. contains the logo and sidebar -->
  222. <aside class="main-sidebar">
  223. <!-- sidebar: style can be found in sidebar.less -->
  224. <section class="sidebar">
  225. <!-- Sidebar user panel (optional) -->
  226. <div class="user-panel">
  227. <div class="pull-left image">
  228. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  229. </div>
  230. <div class="pull-left info">
  231. <p>Alexander Pierce</p>
  232. <!-- Status -->
  233. <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  234. </div>
  235. </div>
  236. <!-- search form (Optional) -->
  237. <form action="#" method="get" class="sidebar-form">
  238. <div class="input-group">
  239. <input type="text" name="q" class="form-control" placeholder="Search...">
  240. <span class="input-group-btn">
  241. <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
  242. </button>
  243. </span>
  244. </div>
  245. </form>
  246. <!-- /.search form -->
  247. <!-- Sidebar Menu -->
  248. <ul class="sidebar-menu" data-widget="tree">
  249. <li class="header">HEADER</li>
  250. <!-- Optionally, you can add icons to the links -->
  251. <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
  252. <li><a href="#"><i class="fa fa-link"></i> <span>Another Link</span></a></li>
  253. <li class="treeview">
  254. <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
  255. <span class="pull-right-container">
  256. <i class="fa fa-angle-left pull-right"></i>
  257. </span>
  258. </a>
  259. <ul class="treeview-menu">
  260. <li><a href="#">Link in level 2</a></li>
  261. <li><a href="#">Link in level 2</a></li>
  262. </ul>
  263. </li>
  264. </ul>
  265. <!-- /.sidebar-menu -->
  266. </section>
  267. <!-- /.sidebar -->
  268. </aside>
  269. <!-- Content Wrapper. Contains page content -->
  270. <div class="content-wrapper">
  271. <!-- Content Header (Page header) -->
  272. <section class="content-header">
  273. <h1>
  274. Page Header
  275. <small>Optional description</small>
  276. </h1>
  277. <ol class="breadcrumb">
  278. <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
  279. <li class="active">Here</li>
  280. </ol>
  281. </section>
  282. <!-- Main content -->
  283. <section class="content container-fluid">
  284. <!--------------------------
  285. | Your Page Content Here |
  286. -------------------------->
  287. </section>
  288. <!-- /.content -->
  289. </div>
  290. <!-- /.content-wrapper -->
  291. <!-- Main Footer -->
  292. <footer class="main-footer">
  293. <!-- To the right -->
  294. <div class="pull-right hidden-xs">
  295. Anything you want
  296. </div>
  297. <!-- Default to the left -->
  298. <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
  299. </footer>
  300. <!-- Control Sidebar -->
  301. <aside class="control-sidebar control-sidebar-dark">
  302. <!-- Create the tabs -->
  303. <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  304. <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  305. <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  306. </ul>
  307. <!-- Tab panes -->
  308. <div class="tab-content">
  309. <!-- Home tab content -->
  310. <div class="tab-pane active" id="control-sidebar-home-tab">
  311. <h3 class="control-sidebar-heading">Recent Activity</h3>
  312. <ul class="control-sidebar-menu">
  313. <li>
  314. <a href="javascript:;">
  315. <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  316. <div class="menu-info">
  317. <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  318. <p>Will be 23 on April 24th</p>
  319. </div>
  320. </a>
  321. </li>
  322. </ul>
  323. <!-- /.control-sidebar-menu -->
  324. <h3 class="control-sidebar-heading">Tasks Progress</h3>
  325. <ul class="control-sidebar-menu">
  326. <li>
  327. <a href="javascript:;">
  328. <h4 class="control-sidebar-subheading">
  329. Custom Template Design
  330. <span class="pull-right-container">
  331. <span class="label label-danger pull-right">70%</span>
  332. </span>
  333. </h4>
  334. <div class="progress progress-xxs">
  335. <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  336. </div>
  337. </a>
  338. </li>
  339. </ul>
  340. <!-- /.control-sidebar-menu -->
  341. </div>
  342. <!-- /.tab-pane -->
  343. <!-- Stats tab content -->
  344. <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
  345. <!-- /.tab-pane -->
  346. <!-- Settings tab content -->
  347. <div class="tab-pane" id="control-sidebar-settings-tab">
  348. <form method="post">
  349. <h3 class="control-sidebar-heading">General Settings</h3>
  350. <div class="form-group">
  351. <label class="control-sidebar-subheading">
  352. Report panel usage
  353. <input type="checkbox" class="pull-right" checked>
  354. </label>
  355. <p>
  356. Some information about this general settings option
  357. </p>
  358. </div>
  359. <!-- /.form-group -->
  360. </form>
  361. </div>
  362. <!-- /.tab-pane -->
  363. </div>
  364. </aside>
  365. <!-- /.control-sidebar -->
  366. <!-- Add the sidebar's background. This div must be placed
  367. immediately after the control sidebar -->
  368. <div class="control-sidebar-bg"></div>
  369. </div>
  370. <!-- ./wrapper -->
  371. <!-- REQUIRED JS SCRIPTS -->
  372. <!-- jQuery 3 -->
  373. <script src="bower_components/jquery/dist/jquery.min.js"></script>
  374. <!-- Bootstrap 3.3.7 -->
  375. <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  376. <!-- AdminLTE App -->
  377. <script src="dist/js/adminlte.min.js"></script>
  378. <!-- Optionally, you can add Slimscroll and FastClick plugins.
  379. Both of these plugins are recommended to enhance the
  380. user experience. -->
  381. </body>
  382. </html>