buttons.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  6. <title></title>
  7. <script defer="defer" src="main.js"></script><link href="style.css" rel="stylesheet"></head>
  8. <body class="app">
  9. <div id="loader" class="pos-f h-100vh w-100 bgc-deep-purple-50 z-9">
  10. <div class="spinner"></div>
  11. </div>
  12. <script>
  13. window.addEventListener('load', function load() {
  14. const loader = document.getElementById('loader');
  15. setTimeout(function() {
  16. loader.classList.add('fadeOut');
  17. }, 3000);
  18. });
  19. </script>
  20. <div>
  21. <!-- #Left Sidebar ==================== -->
  22. <div class="sidebar">
  23. <div class="sidebar-inner">
  24. <!-- ### $Sidebar Header ### -->
  25. <div class="sidebar-logo">
  26. <div class="peers ai-c fxw-nw">
  27. <div class="peer peer-greed">
  28. <a class="sidebar-link td-n" href="index.html">
  29. <div class="peers ai-c fxw-nw">
  30. <div class="peer">
  31. <div class="logo">
  32. <img src="assets/static/images/logo.png" alt="">
  33. </div>
  34. </div>
  35. <div class="peer peer-greed">
  36. <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
  37. </div>
  38. </div>
  39. </a>
  40. </div>
  41. <div class="peer">
  42. <div class="mobile-toggle sidebar-toggle">
  43. <a href="" class="td-n">
  44. <i class="ti-arrow-circle-left"></i>
  45. </a>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <!-- ### $Sidebar Menu ### -->
  51. <ul class="sidebar-menu scrollable pos-r">
  52. <li class="nav-item mT-30 actived">
  53. <a class="sidebar-link" href="index.html">
  54. <span class="icon-holder">
  55. <i class="c-blue-500 ti-home"></i>
  56. </span>
  57. <span class="title">Dashboard</span>
  58. </a>
  59. </li>
  60. <li class="nav-item">
  61. <a class="sidebar-link" href="email.html">
  62. <span class="icon-holder">
  63. <i class="c-brown-500 ti-email"></i>
  64. </span>
  65. <span class="title">Email</span>
  66. </a>
  67. </li>
  68. <li class="nav-item">
  69. <a class="sidebar-link" href="compose.html">
  70. <span class="icon-holder">
  71. <i class="c-blue-500 ti-share"></i>
  72. </span>
  73. <span class="title">Compose</span>
  74. </a>
  75. </li>
  76. <li class="nav-item">
  77. <a class="sidebar-link" href="calendar.html">
  78. <span class="icon-holder">
  79. <i class="c-deep-orange-500 ti-calendar"></i>
  80. </span>
  81. <span class="title">Calendar</span>
  82. </a>
  83. </li>
  84. <li class="nav-item">
  85. <a class="sidebar-link" href="chat.html">
  86. <span class="icon-holder">
  87. <i class="c-deep-purple-500 ti-comment-alt"></i>
  88. </span>
  89. <span class="title">Chat</span>
  90. </a>
  91. </li>
  92. <li class="nav-item">
  93. <a class="sidebar-link" href="charts.html">
  94. <span class="icon-holder">
  95. <i class="c-indigo-500 ti-bar-chart"></i>
  96. </span>
  97. <span class="title">Charts</span>
  98. </a>
  99. </li>
  100. <li class="nav-item">
  101. <a class="sidebar-link" href="forms.html">
  102. <span class="icon-holder">
  103. <i class="c-light-blue-500 ti-pencil"></i>
  104. </span>
  105. <span class="title">Forms</span>
  106. </a>
  107. </li>
  108. <li class="nav-item dropdown">
  109. <a class="sidebar-link" href="ui.html">
  110. <span class="icon-holder">
  111. <i class="c-pink-500 ti-palette"></i>
  112. </span>
  113. <span class="title">UI Elements</span>
  114. </a>
  115. </li>
  116. <li class="nav-item dropdown">
  117. <a class="dropdown-toggle" href="javascript:void(0);">
  118. <span class="icon-holder">
  119. <i class="c-orange-500 ti-layout-list-thumb"></i>
  120. </span>
  121. <span class="title">Tables</span>
  122. <span class="arrow">
  123. <i class="ti-angle-right"></i>
  124. </span>
  125. </a>
  126. <ul class="dropdown-menu">
  127. <li>
  128. <a class="sidebar-link" href="basic-table.html">Basic Table</a>
  129. </li>
  130. <li>
  131. <a class="sidebar-link" href="datatable.html">Data Table</a>
  132. </li>
  133. </ul>
  134. </li>
  135. <li class="nav-item dropdown">
  136. <a class="dropdown-toggle" href="javascript:void(0);">
  137. <span class="icon-holder">
  138. <i class="c-purple-500 ti-map"></i>
  139. </span>
  140. <span class="title">Maps</span>
  141. <span class="arrow">
  142. <i class="ti-angle-right"></i>
  143. </span>
  144. </a>
  145. <ul class="dropdown-menu">
  146. <li>
  147. <a href="google-maps.html">Google Map</a>
  148. </li>
  149. <li>
  150. <a href="vector-maps.html">Vector Map</a>
  151. </li>
  152. </ul>
  153. </li>
  154. <li class="nav-item dropdown">
  155. <a class="dropdown-toggle" href="javascript:void(0);">
  156. <span class="icon-holder">
  157. <i class="c-red-500 ti-files"></i>
  158. </span>
  159. <span class="title">Pages</span>
  160. <span class="arrow">
  161. <i class="ti-angle-right"></i>
  162. </span>
  163. </a>
  164. <ul class="dropdown-menu">
  165. <li>
  166. <a class="sidebar-link" href="blank.html">Blank</a>
  167. </li>
  168. <li>
  169. <a class="sidebar-link" href="404.html">404</a>
  170. </li>
  171. <li>
  172. <a class="sidebar-link" href="500.html">500</a>
  173. </li>
  174. <li>
  175. <a class="sidebar-link" href="signin.html">Sign In</a>
  176. </li>
  177. <li>
  178. <a class="sidebar-link" href="signup.html">Sign Up</a>
  179. </li>
  180. </ul>
  181. </li>
  182. <li class="nav-item dropdown">
  183. <a class="dropdown-toggle" href="javascript:void(0);">
  184. <span class="icon-holder">
  185. <i class="c-teal-500 ti-view-list-alt"></i>
  186. </span>
  187. <span class="title">Multiple Levels</span>
  188. <span class="arrow">
  189. <i class="ti-angle-right"></i>
  190. </span>
  191. </a>
  192. <ul class="dropdown-menu">
  193. <li class="nav-item dropdown">
  194. <a href="javascript:void(0);">
  195. <span>Menu Item</span>
  196. </a>
  197. </li>
  198. <li class="nav-item dropdown">
  199. <a href="javascript:void(0);">
  200. <span>Menu Item</span>
  201. <span class="arrow">
  202. <i class="ti-angle-right"></i>
  203. </span>
  204. </a>
  205. <ul class="dropdown-menu">
  206. <li>
  207. <a href="javascript:void(0);">Menu Item</a>
  208. </li>
  209. <li>
  210. <a href="javascript:void(0);">Menu Item</a>
  211. </li>
  212. </ul>
  213. </li>
  214. </ul>
  215. </li>
  216. </ul>
  217. </div>
  218. </div>
  219. <!-- #Main ============================ -->
  220. <div class="page-container">
  221. <!-- ### $Topbar ### -->
  222. <div class="header navbar">
  223. <div class="header-container">
  224. <ul class="nav-left">
  225. <li>
  226. <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
  227. <i class="ti-menu"></i>
  228. </a>
  229. </li>
  230. <li class="search-box">
  231. <a class="search-toggle no-pdd-right" href="javascript:void(0);">
  232. <i class="search-icon ti-search pdd-right-10"></i>
  233. <i class="search-icon-close ti-close pdd-right-10"></i>
  234. </a>
  235. </li>
  236. <li class="search-input">
  237. <input class="form-control" type="text" placeholder="Search...">
  238. </li>
  239. </ul>
  240. <ul class="nav-right">
  241. <li class="notifications dropdown">
  242. <span class="counter bgc-red">3</span>
  243. <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
  244. <i class="ti-bell"></i>
  245. </a>
  246. <ul class="dropdown-menu">
  247. <li class="pX-20 pY-15 bdB">
  248. <i class="ti-bell pR-10"></i>
  249. <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
  250. </li>
  251. <li>
  252. <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
  253. <li>
  254. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  255. <div class="peer mR-15">
  256. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
  257. </div>
  258. <div class="peer peer-greed">
  259. <span>
  260. <span class="fw-500">John Doe</span>
  261. <span class="c-grey-600">liked your <span class="text-dark">post</span>
  262. </span>
  263. </span>
  264. <p class="m-0">
  265. <small class="fsz-xs">5 mins ago</small>
  266. </p>
  267. </div>
  268. </a>
  269. </li>
  270. <li>
  271. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  272. <div class="peer mR-15">
  273. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
  274. </div>
  275. <div class="peer peer-greed">
  276. <span>
  277. <span class="fw-500">Moo Doe</span>
  278. <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
  279. </span>
  280. </span>
  281. <p class="m-0">
  282. <small class="fsz-xs">7 mins ago</small>
  283. </p>
  284. </div>
  285. </a>
  286. </li>
  287. <li>
  288. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  289. <div class="peer mR-15">
  290. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
  291. </div>
  292. <div class="peer peer-greed">
  293. <span>
  294. <span class="fw-500">Lee Doe</span>
  295. <span class="c-grey-600">commented on your <span class="text-dark">video</span>
  296. </span>
  297. </span>
  298. <p class="m-0">
  299. <small class="fsz-xs">10 mins ago</small>
  300. </p>
  301. </div>
  302. </a>
  303. </li>
  304. </ul>
  305. </li>
  306. <li class="pX-20 pY-15 ta-c bdT">
  307. <span>
  308. <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
  309. </span>
  310. </li>
  311. </ul>
  312. </li>
  313. <li class="notifications dropdown">
  314. <span class="counter bgc-blue">3</span>
  315. <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
  316. <i class="ti-email"></i>
  317. </a>
  318. <ul class="dropdown-menu">
  319. <li class="pX-20 pY-15 bdB">
  320. <i class="ti-email pR-10"></i>
  321. <span class="fsz-sm fw-600 c-grey-900">Emails</span>
  322. </li>
  323. <li>
  324. <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
  325. <li>
  326. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  327. <div class="peer mR-15">
  328. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
  329. </div>
  330. <div class="peer peer-greed">
  331. <div>
  332. <div class="peers jc-sb fxw-nw mB-5">
  333. <div class="peer">
  334. <p class="fw-500 mB-0">John Doe</p>
  335. </div>
  336. <div class="peer">
  337. <small class="fsz-xs">5 mins ago</small>
  338. </div>
  339. </div>
  340. <span class="c-grey-600 fsz-sm">
  341. Want to create your own customized data generator for your app...
  342. </span>
  343. </div>
  344. </div>
  345. </a>
  346. </li>
  347. <li>
  348. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  349. <div class="peer mR-15">
  350. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
  351. </div>
  352. <div class="peer peer-greed">
  353. <div>
  354. <div class="peers jc-sb fxw-nw mB-5">
  355. <div class="peer">
  356. <p class="fw-500 mB-0">Moo Doe</p>
  357. </div>
  358. <div class="peer">
  359. <small class="fsz-xs">15 mins ago</small>
  360. </div>
  361. </div>
  362. <span class="c-grey-600 fsz-sm">
  363. Want to create your own customized data generator for your app...
  364. </span>
  365. </div>
  366. </div>
  367. </a>
  368. </li>
  369. <li>
  370. <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
  371. <div class="peer mR-15">
  372. <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
  373. </div>
  374. <div class="peer peer-greed">
  375. <div>
  376. <div class="peers jc-sb fxw-nw mB-5">
  377. <div class="peer">
  378. <p class="fw-500 mB-0">Lee Doe</p>
  379. </div>
  380. <div class="peer">
  381. <small class="fsz-xs">25 mins ago</small>
  382. </div>
  383. </div>
  384. <span class="c-grey-600 fsz-sm">
  385. Want to create your own customized data generator for your app...
  386. </span>
  387. </div>
  388. </div>
  389. </a>
  390. </li>
  391. </ul>
  392. </li>
  393. <li class="pX-20 pY-15 ta-c bdT">
  394. <span>
  395. <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
  396. </span>
  397. </li>
  398. </ul>
  399. </li>
  400. <li class="dropdown">
  401. <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
  402. <div class="peer me-10">
  403. <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
  404. </div>
  405. <div class="peer">
  406. <span class="fsz-sm c-grey-900">John Doe</span>
  407. </div>
  408. </a>
  409. <ul class="dropdown-menu fsz-sm">
  410. <li>
  411. <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
  412. <i class="ti-settings mR-10"></i>
  413. <span>Setting</span>
  414. </a>
  415. </li>
  416. <li>
  417. <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
  418. <i class="ti-user mR-10"></i>
  419. <span>Profile</span>
  420. </a>
  421. </li>
  422. <li>
  423. <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
  424. <i class="ti-email mR-10"></i>
  425. <span>Messages</span>
  426. </a>
  427. </li>
  428. <li role="separator" class="divider"></li>
  429. <li>
  430. <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
  431. <i class="ti-power-off mR-10"></i>
  432. <span>Logout</span>
  433. </a>
  434. </li>
  435. </ul>
  436. </li>
  437. </ul>
  438. </div>
  439. </div>
  440. <!-- ### $App Screen Content ### -->
  441. <main class="main-content bgc-grey-100">
  442. <div id="mainContent"></div>
  443. </main>
  444. <!-- ### $App Screen Footer ### -->
  445. <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
  446. <span>Copyright © 2021 Designed by <a href="https://colorlib.com" target="_blank" title="Colorlib">Colorlib</a>. All rights reserved.</span>
  447. </footer>
  448. </div>
  449. </div>
  450. </body>
  451. </html>