starter-rtl.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  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 dir="rtl">
  7. <head>
  8. <meta charset="UTF-8">
  9. <title>AdminLTE 2 | Dashboard</title>
  10. <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  11. <!-- Bootstrap 3.3.2 -->
  12. <link href="bootstrap/css/bootstrap-rtl.min.css" rel="stylesheet" type="text/css" />
  13. <!-- Font Awesome Icons -->
  14. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  15. <!-- Ionicons -->
  16. <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
  17. <!-- Theme style -->
  18. <link href="dist/css/AdminLTE-rtl.min.css" rel="stylesheet" type="text/css" />
  19. <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
  20. page. However, you can choose any other skin. Make sure you
  21. apply the skin class to the body tag so the changes take effect.
  22. -->
  23. <link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/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/libs/html5shiv/3.7.0/html5shiv.js"></script>
  28. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  29. <![endif]-->
  30. </head>
  31. <!--
  32. BODY TAG OPTIONS:
  33. =================
  34. Apply one or more of the following classes to get the
  35. desired effect
  36. |---------------------------------------------------------|
  37. | SKINS | skin-blue |
  38. | | skin-black |
  39. | | skin-purple |
  40. | | skin-yellow |
  41. | | skin-red |
  42. | | skin-green |
  43. |---------------------------------------------------------|
  44. |LAYOUT OPTIONS | fixed |
  45. | | layout-boxed |
  46. | | layout-top-nav |
  47. | | sidebar-collapse |
  48. | | sidebar-mini |
  49. |---------------------------------------------------------|
  50. -->
  51. <body class="skin-blue sidebar-mini">
  52. <div class="wrapper">
  53. <!-- Main Header -->
  54. <header class="main-header">
  55. <!-- Logo -->
  56. <a href="index2.html" class="logo">
  57. <!-- mini logo for sidebar mini 50x50 pixels -->
  58. <span class="logo-mini"><b>A</b>LT</span>
  59. <!-- logo for regular state and mobile devices -->
  60. <span class="logo-lg"><b>Admin</b>LTE</span>
  61. </a>
  62. <!-- Header Navbar -->
  63. <nav class="navbar navbar-static-top" role="navigation">
  64. <!-- Sidebar toggle button-->
  65. <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  66. <span class="sr-only">Toggle navigation</span>
  67. </a>
  68. <!-- Navbar Right Menu -->
  69. <div class="navbar-custom-menu">
  70. <ul class="nav navbar-nav">
  71. <!-- Messages: style can be found in dropdown.less-->
  72. <li class="dropdown messages-menu">
  73. <!-- Menu toggle button -->
  74. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  75. <i class="fa fa-envelope-o"></i>
  76. <span class="label label-success">4</span>
  77. </a>
  78. <ul class="dropdown-menu">
  79. <li class="header">You have 4 messages</li>
  80. <li>
  81. <!-- inner menu: contains the messages -->
  82. <ul class="menu">
  83. <li><!-- start message -->
  84. <a href="#">
  85. <div class="pull-left">
  86. <!-- User Image -->
  87. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
  88. </div>
  89. <!-- Message title and timestamp -->
  90. <h4>
  91. Support Team
  92. <small><i class="fa fa-clock-o"></i> 5 mins</small>
  93. </h4>
  94. <!-- The message -->
  95. <p>Why not buy a new awesome theme?</p>
  96. </a>
  97. </li><!-- end message -->
  98. </ul><!-- /.menu -->
  99. </li>
  100. <li class="footer"><a href="#">See All Messages</a></li>
  101. </ul>
  102. </li><!-- /.messages-menu -->
  103. <!-- Notifications Menu -->
  104. <li class="dropdown notifications-menu">
  105. <!-- Menu toggle button -->
  106. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  107. <i class="fa fa-bell-o"></i>
  108. <span class="label label-warning">10</span>
  109. </a>
  110. <ul class="dropdown-menu">
  111. <li class="header">You have 10 notifications</li>
  112. <li>
  113. <!-- Inner Menu: contains the notifications -->
  114. <ul class="menu">
  115. <li><!-- start notification -->
  116. <a href="#">
  117. <i class="fa fa-users text-aqua"></i> 5 new members joined today
  118. </a>
  119. </li><!-- end notification -->
  120. </ul>
  121. </li>
  122. <li class="footer"><a href="#">View all</a></li>
  123. </ul>
  124. </li>
  125. <!-- Tasks Menu -->
  126. <li class="dropdown tasks-menu">
  127. <!-- Menu Toggle Button -->
  128. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  129. <i class="fa fa-flag-o"></i>
  130. <span class="label label-danger">9</span>
  131. </a>
  132. <ul class="dropdown-menu">
  133. <li class="header">You have 9 tasks</li>
  134. <li>
  135. <!-- Inner menu: contains the tasks -->
  136. <ul class="menu">
  137. <li><!-- Task item -->
  138. <a href="#">
  139. <!-- Task title and progress text -->
  140. <h3>
  141. Design some buttons
  142. <small class="pull-right">20%</small>
  143. </h3>
  144. <!-- The progress bar -->
  145. <div class="progress xs">
  146. <!-- Change the css width attribute to simulate progress -->
  147. <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
  148. <span class="sr-only">20% Complete</span>
  149. </div>
  150. </div>
  151. </a>
  152. </li><!-- end task item -->
  153. </ul>
  154. </li>
  155. <li class="footer">
  156. <a href="#">View all tasks</a>
  157. </li>
  158. </ul>
  159. </li>
  160. <!-- User Account Menu -->
  161. <li class="dropdown user user-menu">
  162. <!-- Menu Toggle Button -->
  163. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  164. <!-- The user image in the navbar-->
  165. <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
  166. <!-- hidden-xs hides the username on small devices so only the image appears. -->
  167. <span class="hidden-xs">Alexander Pierce</span>
  168. </a>
  169. <ul class="dropdown-menu">
  170. <!-- The user image in the menu -->
  171. <li class="user-header">
  172. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
  173. <p>
  174. Alexander Pierce - Web Developer
  175. <small>Member since Nov. 2012</small>
  176. </p>
  177. </li>
  178. <!-- Menu Body -->
  179. <li class="user-body">
  180. <div class="col-xs-4 text-center">
  181. <a href="#">Followers</a>
  182. </div>
  183. <div class="col-xs-4 text-center">
  184. <a href="#">Sales</a>
  185. </div>
  186. <div class="col-xs-4 text-center">
  187. <a href="#">Friends</a>
  188. </div>
  189. </li>
  190. <!-- Menu Footer-->
  191. <li class="user-footer">
  192. <div class="pull-left">
  193. <a href="#" class="btn btn-default btn-flat">Profile</a>
  194. </div>
  195. <div class="pull-right">
  196. <a href="#" class="btn btn-default btn-flat">Sign out</a>
  197. </div>
  198. </li>
  199. </ul>
  200. </li>
  201. <!-- Control Sidebar Toggle Button -->
  202. <li>
  203. <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
  204. </li>
  205. </ul>
  206. </div>
  207. </nav>
  208. </header>
  209. <!-- Left side column. contains the logo and sidebar -->
  210. <aside class="main-sidebar">
  211. <!-- sidebar: style can be found in sidebar.less -->
  212. <section class="sidebar">
  213. <!-- Sidebar user panel (optional) -->
  214. <div class="user-panel">
  215. <div class="pull-left image">
  216. <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
  217. </div>
  218. <div class="pull-left info">
  219. <p>Alexander Pierce</p>
  220. <!-- Status -->
  221. <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  222. </div>
  223. </div>
  224. <!-- search form (Optional) -->
  225. <form action="#" method="get" class="sidebar-form">
  226. <div class="input-group">
  227. <input type="text" name="q" class="form-control" placeholder="Search..."/>
  228. <span class="input-group-btn">
  229. <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
  230. </span>
  231. </div>
  232. </form>
  233. <!-- /.search form -->
  234. <!-- Sidebar Menu -->
  235. <ul class="sidebar-menu">
  236. <li class="header">HEADER</li>
  237. <!-- Optionally, you can add icons to the links -->
  238. <li class="active"><a href="#"><i class='fa fa-link'></i> <span>Link</span></a></li>
  239. <li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li>
  240. <li class="treeview">
  241. <a href="#"><i class='fa fa-link'></i> <span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
  242. <ul class="treeview-menu">
  243. <li><a href="#">Link in level 2</a></li>
  244. <li><a href="#">Link in level 2</a></li>
  245. </ul>
  246. </li>
  247. </ul><!-- /.sidebar-menu -->
  248. </section>
  249. <!-- /.sidebar -->
  250. </aside>
  251. <!-- Content Wrapper. Contains page content -->
  252. <div class="content-wrapper">
  253. <!-- Content Header (Page header) -->
  254. <section class="content-header">
  255. <h1>
  256. Page Header
  257. <small>Optional description</small>
  258. </h1>
  259. <ol class="breadcrumb">
  260. <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
  261. <li class="active">Here</li>
  262. </ol>
  263. </section>
  264. <!-- Main content -->
  265. <section class="content">
  266. <!-- Your Page Content Here -->
  267. </section><!-- /.content -->
  268. </div><!-- /.content-wrapper -->
  269. <!-- Main Footer -->
  270. <footer class="main-footer">
  271. <!-- To the right -->
  272. <div class="pull-right hidden-xs">
  273. Anything you want
  274. </div>
  275. <!-- Default to the left -->
  276. <strong>Copyright &copy; 2015 <a href="#">Company</a>.</strong> All rights reserved.
  277. </footer>
  278. <!-- Control Sidebar -->
  279. <aside class="control-sidebar control-sidebar-dark">
  280. <!-- Create the tabs -->
  281. <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
  282. <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
  283. <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  284. </ul>
  285. <!-- Tab panes -->
  286. <div class="tab-content">
  287. <!-- Home tab content -->
  288. <div class="tab-pane active" id="control-sidebar-home-tab">
  289. <h3 class="control-sidebar-heading">Recent Activity</h3>
  290. <ul class='control-sidebar-menu'>
  291. <li>
  292. <a href='javascript::;'>
  293. <i class="menu-icon fa fa-birthday-cake bg-red"></i>
  294. <div class="menu-info">
  295. <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
  296. <p>Will be 23 on April 24th</p>
  297. </div>
  298. </a>
  299. </li>
  300. <li>
  301. <a href='javascript::;'>
  302. <i class="menu-icon fa fa-user bg-yellow"></i>
  303. <div class="menu-info">
  304. <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
  305. <p>New phone +1(800)555-1234</p>
  306. </div>
  307. </a>
  308. </li>
  309. <li>
  310. <a href='javascript::;'>
  311. <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
  312. <div class="menu-info">
  313. <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
  314. <p>nora@example.com</p>
  315. </div>
  316. </a>
  317. </li>
  318. <li>
  319. <a href='javascript::;'>
  320. <i class="menu-icon fa fa-file-code-o bg-green"></i>
  321. <div class="menu-info">
  322. <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
  323. <p>Execution time 5 seconds</p>
  324. </div>
  325. </a>
  326. </li>
  327. </ul><!-- /.control-sidebar-menu -->
  328. <h3 class="control-sidebar-heading">Tasks Progress</h3>
  329. <ul class='control-sidebar-menu'>
  330. <li>
  331. <a href='javascript::;'>
  332. <h4 class="control-sidebar-subheading">
  333. Custom Template Design
  334. <span class="label label-danger pull-right">70%</span>
  335. </h4>
  336. <div class="progress progress-xxs">
  337. <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
  338. </div>
  339. </a>
  340. </li>
  341. <li>
  342. <a href='javascript::;'>
  343. <h4 class="control-sidebar-subheading">
  344. Update Resume
  345. <span class="label label-success pull-right">95%</span>
  346. </h4>
  347. <div class="progress progress-xxs">
  348. <div class="progress-bar progress-bar-success" style="width: 95%"></div>
  349. </div>
  350. </a>
  351. </li>
  352. <li>
  353. <a href='javascript::;'>
  354. <h4 class="control-sidebar-subheading">
  355. Laravel Integration
  356. <span class="label label-waring pull-right">50%</span>
  357. </h4>
  358. <div class="progress progress-xxs">
  359. <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
  360. </div>
  361. </a>
  362. </li>
  363. <li>
  364. <a href='javascript::;'>
  365. <h4 class="control-sidebar-subheading">
  366. Back End Framework
  367. <span class="label label-primary pull-right">68%</span>
  368. </h4>
  369. <div class="progress progress-xxs">
  370. <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
  371. </div>
  372. </a>
  373. </li>
  374. </ul><!-- /.control-sidebar-menu -->
  375. </div><!-- /.tab-pane -->
  376. <!-- Stats tab content -->
  377. <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
  378. <!-- Settings tab content -->
  379. <div class="tab-pane" id="control-sidebar-settings-tab">
  380. <form method="post">
  381. <h3 class="control-sidebar-heading">General Settings</h3>
  382. <div class="form-group">
  383. <label class="control-sidebar-subheading">
  384. Report panel usage
  385. <input type="checkbox" class="pull-right" checked />
  386. </label>
  387. <p>
  388. Some information about this general settings option
  389. </p>
  390. </div><!-- /.form-group -->
  391. <div class="form-group">
  392. <label class="control-sidebar-subheading">
  393. Allow mail redirect
  394. <input type="checkbox" class="pull-right" checked />
  395. </label>
  396. <p>
  397. Other sets of options are available
  398. </p>
  399. </div><!-- /.form-group -->
  400. <div class="form-group">
  401. <label class="control-sidebar-subheading">
  402. Expose author name in posts
  403. <input type="checkbox" class="pull-right" checked />
  404. </label>
  405. <p>
  406. Allow the user to show his name in blog posts
  407. </p>
  408. </div><!-- /.form-group -->
  409. <h3 class="control-sidebar-heading">Chat Settings</h3>
  410. <div class="form-group">
  411. <label class="control-sidebar-subheading">
  412. Show me as online
  413. <input type="checkbox" class="pull-right" checked />
  414. </label>
  415. </div><!-- /.form-group -->
  416. <div class="form-group">
  417. <label class="control-sidebar-subheading">
  418. Turn off notifications
  419. <input type="checkbox" class="pull-right" />
  420. </label>
  421. </div><!-- /.form-group -->
  422. <div class="form-group">
  423. <label class="control-sidebar-subheading">
  424. Delete chat history
  425. <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
  426. </label>
  427. </div><!-- /.form-group -->
  428. </form>
  429. </div><!-- /.tab-pane -->
  430. </div>
  431. </aside><!-- /.control-sidebar -->
  432. <!-- Add the sidebar's background. This div must be placed
  433. immediately after the control sidebar -->
  434. <div class='control-sidebar-bg'></div>
  435. </div><!-- ./wrapper -->
  436. <!-- REQUIRED JS SCRIPTS -->
  437. <!-- jQuery 2.1.3 -->
  438. <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
  439. <!-- Bootstrap 3.3.2 JS -->
  440. <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
  441. <!-- AdminLTE App -->
  442. <script src="dist/js/app.min.js" type="text/javascript"></script>
  443. <!-- Optionally, you can add Slimscroll and FastClick plugins.
  444. Both of these plugins are recommended to enhance the
  445. user experience. Slimscroll is required when using the
  446. fixed layout. -->
  447. </body>
  448. </html>