fixed-complete.html 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114
  1. <!doctype html>
  2. <html lang="en">
  3. <!--begin::Head-->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>AdminLTE 4 | Fixed Complete</title>
  7. <!--begin::Accessibility Meta Tags-->
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  9. <meta name="color-scheme" content="light dark" />
  10. <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
  11. <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
  12. <!--end::Accessibility Meta Tags-->
  13. <!--begin::Primary Meta Tags-->
  14. <meta name="title" content="AdminLTE 4 | Fixed Complete" />
  15. <meta name="author" content="ColorlibHQ" />
  16. <meta
  17. name="description"
  18. content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
  19. />
  20. <meta
  21. name="keywords"
  22. content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
  23. />
  24. <!--end::Primary Meta Tags-->
  25. <!--begin::Accessibility Features-->
  26. <!-- Skip links will be dynamically added by accessibility.js -->
  27. <meta name="supported-color-schemes" content="light dark" />
  28. <link rel="preload" href="../css/adminlte.css" as="style" />
  29. <!--end::Accessibility Features-->
  30. <!--begin::Fonts-->
  31. <link
  32. rel="stylesheet"
  33. href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
  34. integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
  35. crossorigin="anonymous"
  36. media="print"
  37. onload="this.media = 'all'"
  38. />
  39. <!--end::Fonts-->
  40. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  41. <link
  42. rel="stylesheet"
  43. href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
  44. crossorigin="anonymous"
  45. />
  46. <!--end::Third Party Plugin(OverlayScrollbars)-->
  47. <!--begin::Third Party Plugin(Bootstrap Icons)-->
  48. <link
  49. rel="stylesheet"
  50. href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
  51. crossorigin="anonymous"
  52. />
  53. <!--end::Third Party Plugin(Bootstrap Icons)-->
  54. <!--begin::Required Plugin(AdminLTE)-->
  55. <link rel="stylesheet" href="../css/adminlte.css" />
  56. <!--end::Required Plugin(AdminLTE)-->
  57. </head>
  58. <!--end::Head-->
  59. <!--begin::Body-->
  60. <body class="layout-fixed fixed-header fixed-footer sidebar-expand-lg bg-body-tertiary">
  61. <!--begin::App Wrapper-->
  62. <div class="app-wrapper">
  63. <!--begin::Header-->
  64. <nav class="app-header navbar navbar-expand bg-body">
  65. <!--begin::Container-->
  66. <div class="container-fluid">
  67. <!--begin::Start Navbar Links-->
  68. <ul class="navbar-nav">
  69. <li class="nav-item">
  70. <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
  71. <i class="bi bi-list"></i>
  72. </a>
  73. </li>
  74. <li class="nav-item d-none d-md-block">
  75. <a href="../index.html" class="nav-link">
  76. <i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
  77. Live preview
  78. </a>
  79. </li>
  80. <li class="nav-item d-none d-md-block">
  81. <a href="../docs/introduction.html" class="nav-link">
  82. <i class="bi bi-book me-1" aria-hidden="true"></i>
  83. Documentation
  84. </a>
  85. </li>
  86. </ul>
  87. <!--end::Start Navbar Links-->
  88. <!--begin::End Navbar Links-->
  89. <ul class="navbar-nav ms-auto">
  90. <!--begin::Navbar Search-->
  91. <li class="nav-item">
  92. <a class="nav-link" data-widget="navbar-search" href="#" role="button">
  93. <i class="bi bi-search"></i>
  94. </a>
  95. </li>
  96. <!--end::Navbar Search-->
  97. <!--begin::Messages Dropdown Menu-->
  98. <li class="nav-item dropdown">
  99. <a class="nav-link" data-bs-toggle="dropdown" href="#">
  100. <i class="bi bi-chat-text"></i>
  101. <span class="navbar-badge badge text-bg-danger">3</span>
  102. </a>
  103. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  104. <a href="#" class="dropdown-item">
  105. <!--begin::Message-->
  106. <div class="d-flex">
  107. <div class="flex-shrink-0">
  108. <img
  109. src="../assets/img/user1-128x128.jpg"
  110. alt="User Avatar"
  111. class="img-size-50 rounded-circle me-3"
  112. />
  113. </div>
  114. <div class="flex-grow-1">
  115. <h3 class="dropdown-item-title">
  116. Brad Diesel
  117. <span class="float-end fs-7 text-danger"
  118. ><i class="bi bi-star-fill"></i
  119. ></span>
  120. </h3>
  121. <p class="fs-7">Call me whenever you can...</p>
  122. <p class="fs-7 text-secondary">
  123. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  124. </p>
  125. </div>
  126. </div>
  127. <!--end::Message-->
  128. </a>
  129. <div class="dropdown-divider"></div>
  130. <a href="#" class="dropdown-item">
  131. <!--begin::Message-->
  132. <div class="d-flex">
  133. <div class="flex-shrink-0">
  134. <img
  135. src="../assets/img/user8-128x128.jpg"
  136. alt="User Avatar"
  137. class="img-size-50 rounded-circle me-3"
  138. />
  139. </div>
  140. <div class="flex-grow-1">
  141. <h3 class="dropdown-item-title">
  142. John Pierce
  143. <span class="float-end fs-7 text-secondary">
  144. <i class="bi bi-star-fill"></i>
  145. </span>
  146. </h3>
  147. <p class="fs-7">I got your message bro</p>
  148. <p class="fs-7 text-secondary">
  149. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  150. </p>
  151. </div>
  152. </div>
  153. <!--end::Message-->
  154. </a>
  155. <div class="dropdown-divider"></div>
  156. <a href="#" class="dropdown-item">
  157. <!--begin::Message-->
  158. <div class="d-flex">
  159. <div class="flex-shrink-0">
  160. <img
  161. src="../assets/img/user3-128x128.jpg"
  162. alt="User Avatar"
  163. class="img-size-50 rounded-circle me-3"
  164. />
  165. </div>
  166. <div class="flex-grow-1">
  167. <h3 class="dropdown-item-title">
  168. Nora Silvester
  169. <span class="float-end fs-7 text-warning">
  170. <i class="bi bi-star-fill"></i>
  171. </span>
  172. </h3>
  173. <p class="fs-7">The subject goes here</p>
  174. <p class="fs-7 text-secondary">
  175. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  176. </p>
  177. </div>
  178. </div>
  179. <!--end::Message-->
  180. </a>
  181. <div class="dropdown-divider"></div>
  182. <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  183. </div>
  184. </li>
  185. <!--end::Messages Dropdown Menu-->
  186. <!--begin::Notifications Dropdown Menu-->
  187. <li class="nav-item dropdown">
  188. <a class="nav-link" data-bs-toggle="dropdown" href="#">
  189. <i class="bi bi-bell-fill"></i>
  190. <span class="navbar-badge badge text-bg-warning">15</span>
  191. </a>
  192. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  193. <span class="dropdown-item dropdown-header">15 Notifications</span>
  194. <div class="dropdown-divider"></div>
  195. <a href="#" class="dropdown-item">
  196. <i class="bi bi-envelope me-2"></i> 4 new messages
  197. <span class="float-end text-secondary fs-7">3 mins</span>
  198. </a>
  199. <div class="dropdown-divider"></div>
  200. <a href="#" class="dropdown-item">
  201. <i class="bi bi-people-fill me-2"></i> 8 friend requests
  202. <span class="float-end text-secondary fs-7">12 hours</span>
  203. </a>
  204. <div class="dropdown-divider"></div>
  205. <a href="#" class="dropdown-item">
  206. <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
  207. <span class="float-end text-secondary fs-7">2 days</span>
  208. </a>
  209. <div class="dropdown-divider"></div>
  210. <a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
  211. </div>
  212. </li>
  213. <!--end::Notifications Dropdown Menu-->
  214. <!--begin::Fullscreen Toggle-->
  215. <li class="nav-item">
  216. <a class="nav-link" href="#" data-lte-toggle="fullscreen">
  217. <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
  218. <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
  219. </a>
  220. </li>
  221. <!--end::Fullscreen Toggle-->
  222. <!--begin::Color Mode Toggle (#6010)-->
  223. <li class="nav-item dropdown">
  224. <a
  225. class="nav-link"
  226. href="#"
  227. id="bd-theme"
  228. aria-label="Toggle color scheme"
  229. data-bs-toggle="dropdown"
  230. aria-expanded="false"
  231. >
  232. <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
  233. <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
  234. <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
  235. </a>
  236. <ul
  237. class="dropdown-menu dropdown-menu-end"
  238. aria-labelledby="bd-theme"
  239. style="--bs-dropdown-min-width: 8rem"
  240. >
  241. <li>
  242. <button
  243. type="button"
  244. class="dropdown-item d-flex align-items-center"
  245. data-bs-theme-value="light"
  246. aria-pressed="false"
  247. >
  248. <i class="bi bi-sun-fill me-2"></i>
  249. Light
  250. <i class="bi bi-check-lg ms-auto d-none"></i>
  251. </button>
  252. </li>
  253. <li>
  254. <button
  255. type="button"
  256. class="dropdown-item d-flex align-items-center"
  257. data-bs-theme-value="dark"
  258. aria-pressed="false"
  259. >
  260. <i class="bi bi-moon-fill me-2"></i>
  261. Dark
  262. <i class="bi bi-check-lg ms-auto d-none"></i>
  263. </button>
  264. </li>
  265. <li>
  266. <button
  267. type="button"
  268. class="dropdown-item d-flex align-items-center active"
  269. data-bs-theme-value="auto"
  270. aria-pressed="true"
  271. >
  272. <i class="bi bi-circle-half me-2"></i>
  273. Auto
  274. <i class="bi bi-check-lg ms-auto d-none"></i>
  275. </button>
  276. </li>
  277. </ul>
  278. </li>
  279. <!--end::Color Mode Toggle-->
  280. <!--begin::User Menu Dropdown-->
  281. <li class="nav-item dropdown user-menu">
  282. <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
  283. <img
  284. src="../assets/img/user2-160x160.jpg"
  285. class="user-image rounded-circle shadow"
  286. alt="User Image"
  287. />
  288. <span class="d-none d-md-inline">Alexander Pierce</span>
  289. </a>
  290. <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  291. <!--begin::User Image-->
  292. <li class="user-header text-bg-primary">
  293. <img
  294. src="../assets/img/user2-160x160.jpg"
  295. class="rounded-circle shadow"
  296. alt="User Image"
  297. />
  298. <p>
  299. Alexander Pierce - Web Developer
  300. <small>Member since Nov. 2023</small>
  301. </p>
  302. </li>
  303. <!--end::User Image-->
  304. <!--begin::Menu Body-->
  305. <li class="user-body">
  306. <!--begin::Row-->
  307. <div class="row">
  308. <div class="col-4 text-center">
  309. <a href="#">Followers</a>
  310. </div>
  311. <div class="col-4 text-center">
  312. <a href="#">Sales</a>
  313. </div>
  314. <div class="col-4 text-center">
  315. <a href="#">Friends</a>
  316. </div>
  317. </div>
  318. <!--end::Row-->
  319. </li>
  320. <!--end::Menu Body-->
  321. <!--begin::Menu Footer-->
  322. <li class="user-footer">
  323. <a href="#" class="btn btn-outline-secondary">Profile</a>
  324. <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
  325. </li>
  326. <!--end::Menu Footer-->
  327. </ul>
  328. </li>
  329. <!--end::User Menu Dropdown-->
  330. </ul>
  331. <!--end::End Navbar Links-->
  332. </div>
  333. <!--end::Container-->
  334. </nav>
  335. <!--end::Header-->
  336. <!--begin::Sidebar-->
  337. <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
  338. <!--begin::Sidebar Brand-->
  339. <div class="sidebar-brand">
  340. <!--begin::Brand Link-->
  341. <a href="../index.html" class="brand-link">
  342. <!--begin::Brand Image-->
  343. <img
  344. src="../assets/img/AdminLTELogo.png"
  345. alt="AdminLTE Logo"
  346. class="brand-image opacity-75 shadow"
  347. />
  348. <!--end::Brand Image-->
  349. <!--begin::Brand Text-->
  350. <span class="brand-text fw-light">AdminLTE 4</span>
  351. <!--end::Brand Text-->
  352. </a>
  353. <!--end::Brand Link-->
  354. </div>
  355. <!--end::Sidebar Brand-->
  356. <!--begin::Sidebar Wrapper-->
  357. <div class="sidebar-wrapper">
  358. <nav class="mt-2">
  359. <!--begin::Sidebar Menu-->
  360. <ul
  361. class="nav sidebar-menu flex-column"
  362. data-lte-toggle="treeview"
  363. role="navigation"
  364. aria-label="Main navigation"
  365. data-accordion="false"
  366. id="navigation"
  367. >
  368. <li class="nav-item">
  369. <a href="#" class="nav-link">
  370. <i class="nav-icon bi bi-speedometer"></i>
  371. <p>
  372. Dashboard
  373. <i class="nav-arrow bi bi-chevron-right"></i>
  374. </p>
  375. </a>
  376. <ul class="nav nav-treeview">
  377. <li class="nav-item">
  378. <a href="../index.html" class="nav-link">
  379. <i class="nav-icon bi bi-circle"></i>
  380. <p>Dashboard v1</p>
  381. </a>
  382. </li>
  383. <li class="nav-item">
  384. <a href="../index2.html" class="nav-link">
  385. <i class="nav-icon bi bi-circle"></i>
  386. <p>Dashboard v2</p>
  387. </a>
  388. </li>
  389. <li class="nav-item">
  390. <a href="../index3.html" class="nav-link">
  391. <i class="nav-icon bi bi-circle"></i>
  392. <p>Dashboard v3</p>
  393. </a>
  394. </li>
  395. </ul>
  396. </li>
  397. <li class="nav-item">
  398. <a href="../generate/theme.html" class="nav-link">
  399. <i class="nav-icon bi bi-palette"></i>
  400. <p>Theme Generate</p>
  401. </a>
  402. </li>
  403. <li class="nav-item">
  404. <a href="#" class="nav-link">
  405. <i class="nav-icon bi bi-box-seam-fill"></i>
  406. <p>
  407. Widgets
  408. <i class="nav-arrow bi bi-chevron-right"></i>
  409. </p>
  410. </a>
  411. <ul class="nav nav-treeview">
  412. <li class="nav-item">
  413. <a href="../widgets/small-box.html" class="nav-link">
  414. <i class="nav-icon bi bi-circle"></i>
  415. <p>Small Box</p>
  416. </a>
  417. </li>
  418. <li class="nav-item">
  419. <a href="../widgets/info-box.html" class="nav-link">
  420. <i class="nav-icon bi bi-circle"></i>
  421. <p>info Box</p>
  422. </a>
  423. </li>
  424. <li class="nav-item">
  425. <a href="../widgets/cards.html" class="nav-link">
  426. <i class="nav-icon bi bi-circle"></i>
  427. <p>Cards</p>
  428. </a>
  429. </li>
  430. </ul>
  431. </li>
  432. <li class="nav-item menu-open">
  433. <a href="#" class="nav-link active">
  434. <i class="nav-icon bi bi-clipboard-fill"></i>
  435. <p>
  436. Layout Options
  437. <span class="nav-badge badge text-bg-secondary me-3">7</span>
  438. <i class="nav-arrow bi bi-chevron-right"></i>
  439. </p>
  440. </a>
  441. <ul class="nav nav-treeview">
  442. <li class="nav-item">
  443. <a href="../layout/unfixed-sidebar.html" class="nav-link">
  444. <i class="nav-icon bi bi-circle"></i>
  445. <p>Default Sidebar</p>
  446. </a>
  447. </li>
  448. <li class="nav-item">
  449. <a href="../layout/fixed-sidebar.html" class="nav-link">
  450. <i class="nav-icon bi bi-circle"></i>
  451. <p>Fixed Sidebar</p>
  452. </a>
  453. </li>
  454. <li class="nav-item">
  455. <a href="../layout/fixed-header.html" class="nav-link">
  456. <i class="nav-icon bi bi-circle"></i>
  457. <p>Fixed Header</p>
  458. </a>
  459. </li>
  460. <li class="nav-item">
  461. <a href="../layout/fixed-footer.html" class="nav-link">
  462. <i class="nav-icon bi bi-circle"></i>
  463. <p>Fixed Footer</p>
  464. </a>
  465. </li>
  466. <li class="nav-item">
  467. <a href="../layout/fixed-complete.html" class="nav-link active">
  468. <i class="nav-icon bi bi-circle"></i>
  469. <p>Fixed Complete</p>
  470. </a>
  471. </li>
  472. <li class="nav-item">
  473. <a href="../layout/layout-custom-area.html" class="nav-link">
  474. <i class="nav-icon bi bi-circle"></i>
  475. <p>Layout <small>+ Custom Area </small></p>
  476. </a>
  477. </li>
  478. <li class="nav-item">
  479. <a href="../layout/sidebar-mini.html" class="nav-link">
  480. <i class="nav-icon bi bi-circle"></i>
  481. <p>Sidebar Mini</p>
  482. </a>
  483. </li>
  484. <li class="nav-item">
  485. <a href="../layout/collapsed-sidebar.html" class="nav-link">
  486. <i class="nav-icon bi bi-circle"></i>
  487. <p>Sidebar Mini <small>+ Collapsed</small></p>
  488. </a>
  489. </li>
  490. <li class="nav-item">
  491. <a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
  492. <i class="nav-icon bi bi-circle"></i>
  493. <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
  494. </a>
  495. </li>
  496. <li class="nav-item">
  497. <a href="../layout/logo-switch.html" class="nav-link">
  498. <i class="nav-icon bi bi-circle"></i>
  499. <p>Sidebar Mini <small>+ Logo Switch</small></p>
  500. </a>
  501. </li>
  502. <li class="nav-item">
  503. <a href="../layout/layout-rtl.html" class="nav-link">
  504. <i class="nav-icon bi bi-circle"></i>
  505. <p>Layout RTL</p>
  506. </a>
  507. </li>
  508. </ul>
  509. </li>
  510. <li class="nav-item">
  511. <a href="#" class="nav-link">
  512. <i class="nav-icon bi bi-tree-fill"></i>
  513. <p>
  514. UI Elements
  515. <i class="nav-arrow bi bi-chevron-right"></i>
  516. </p>
  517. </a>
  518. <ul class="nav nav-treeview">
  519. <li class="nav-item">
  520. <a href="../UI/general.html" class="nav-link">
  521. <i class="nav-icon bi bi-circle"></i>
  522. <p>General</p>
  523. </a>
  524. </li>
  525. <li class="nav-item">
  526. <a href="../UI/icons.html" class="nav-link">
  527. <i class="nav-icon bi bi-circle"></i>
  528. <p>Icons</p>
  529. </a>
  530. </li>
  531. <li class="nav-item">
  532. <a href="../UI/timeline.html" class="nav-link">
  533. <i class="nav-icon bi bi-circle"></i>
  534. <p>Timeline</p>
  535. </a>
  536. </li>
  537. </ul>
  538. </li>
  539. <li class="nav-item">
  540. <a href="#" class="nav-link">
  541. <i class="nav-icon bi bi-envelope"></i>
  542. <p>
  543. Mailbox
  544. <i class="nav-arrow bi bi-chevron-right"></i>
  545. </p>
  546. </a>
  547. <ul class="nav nav-treeview">
  548. <li class="nav-item">
  549. <a href="../mailbox/inbox.html" class="nav-link">
  550. <i class="nav-icon bi bi-circle"></i>
  551. <p>Inbox</p>
  552. </a>
  553. </li>
  554. <li class="nav-item">
  555. <a href="../mailbox/read.html" class="nav-link">
  556. <i class="nav-icon bi bi-circle"></i>
  557. <p>Read Message</p>
  558. </a>
  559. </li>
  560. <li class="nav-item">
  561. <a href="../mailbox/compose.html" class="nav-link">
  562. <i class="nav-icon bi bi-circle"></i>
  563. <p>Compose</p>
  564. </a>
  565. </li>
  566. </ul>
  567. </li>
  568. <li class="nav-item">
  569. <a href="#" class="nav-link">
  570. <i class="nav-icon bi bi-pencil-square"></i>
  571. <p>
  572. Forms
  573. <i class="nav-arrow bi bi-chevron-right"></i>
  574. </p>
  575. </a>
  576. <ul class="nav nav-treeview">
  577. <li class="nav-item">
  578. <a href="../forms/elements.html" class="nav-link">
  579. <i class="nav-icon bi bi-circle"></i>
  580. <p>Elements</p>
  581. </a>
  582. </li>
  583. <li class="nav-item">
  584. <a href="../forms/layout.html" class="nav-link">
  585. <i class="nav-icon bi bi-circle"></i>
  586. <p>Layout</p>
  587. </a>
  588. </li>
  589. <li class="nav-item">
  590. <a href="../forms/validation.html" class="nav-link">
  591. <i class="nav-icon bi bi-circle"></i>
  592. <p>Validation</p>
  593. </a>
  594. </li>
  595. <li class="nav-item">
  596. <a href="../forms/wizard.html" class="nav-link">
  597. <i class="nav-icon bi bi-circle"></i>
  598. <p>Wizard</p>
  599. </a>
  600. </li>
  601. </ul>
  602. </li>
  603. <li class="nav-item">
  604. <a href="#" class="nav-link">
  605. <i class="nav-icon bi bi-table"></i>
  606. <p>
  607. Tables
  608. <i class="nav-arrow bi bi-chevron-right"></i>
  609. </p>
  610. </a>
  611. <ul class="nav nav-treeview">
  612. <li class="nav-item">
  613. <a href="../tables/simple.html" class="nav-link">
  614. <i class="nav-icon bi bi-circle"></i>
  615. <p>Simple Tables</p>
  616. </a>
  617. </li>
  618. <li class="nav-item">
  619. <a href="../tables/data.html" class="nav-link">
  620. <i class="nav-icon bi bi-circle"></i>
  621. <p>Data Tables</p>
  622. </a>
  623. </li>
  624. </ul>
  625. </li>
  626. <li class="nav-header">PAGES</li>
  627. <li class="nav-item">
  628. <a href="#" class="nav-link">
  629. <i class="nav-icon bi bi-file-earmark-text"></i>
  630. <p>
  631. Pages
  632. <i class="nav-arrow bi bi-chevron-right"></i>
  633. </p>
  634. </a>
  635. <ul class="nav nav-treeview">
  636. <li class="nav-item">
  637. <a href="../pages/profile.html" class="nav-link">
  638. <i class="nav-icon bi bi-circle"></i>
  639. <p>Profile</p>
  640. </a>
  641. </li>
  642. <li class="nav-item">
  643. <a href="../pages/settings.html" class="nav-link">
  644. <i class="nav-icon bi bi-circle"></i>
  645. <p>Settings</p>
  646. </a>
  647. </li>
  648. <li class="nav-item">
  649. <a href="../pages/invoice.html" class="nav-link">
  650. <i class="nav-icon bi bi-circle"></i>
  651. <p>Invoice</p>
  652. </a>
  653. </li>
  654. <li class="nav-item">
  655. <a href="../pages/calendar.html" class="nav-link">
  656. <i class="nav-icon bi bi-circle"></i>
  657. <p>Calendar</p>
  658. </a>
  659. </li>
  660. <li class="nav-item">
  661. <a href="../pages/kanban.html" class="nav-link">
  662. <i class="nav-icon bi bi-circle"></i>
  663. <p>Kanban</p>
  664. </a>
  665. </li>
  666. <li class="nav-item">
  667. <a href="../pages/chat.html" class="nav-link">
  668. <i class="nav-icon bi bi-circle"></i>
  669. <p>Chat</p>
  670. </a>
  671. </li>
  672. <li class="nav-item">
  673. <a href="../pages/file-manager.html" class="nav-link">
  674. <i class="nav-icon bi bi-circle"></i>
  675. <p>File Manager</p>
  676. </a>
  677. </li>
  678. <li class="nav-item">
  679. <a href="../pages/projects.html" class="nav-link">
  680. <i class="nav-icon bi bi-circle"></i>
  681. <p>Projects</p>
  682. </a>
  683. </li>
  684. <li class="nav-item">
  685. <a href="../pages/pricing.html" class="nav-link">
  686. <i class="nav-icon bi bi-circle"></i>
  687. <p>Pricing</p>
  688. </a>
  689. </li>
  690. <li class="nav-item">
  691. <a href="../pages/faq.html" class="nav-link">
  692. <i class="nav-icon bi bi-circle"></i>
  693. <p>FAQ</p>
  694. </a>
  695. </li>
  696. <li class="nav-item">
  697. <a href="#" class="nav-link">
  698. <i class="nav-icon bi bi-circle"></i>
  699. <p>
  700. Error
  701. <i class="nav-arrow bi bi-chevron-right"></i>
  702. </p>
  703. </a>
  704. <ul class="nav nav-treeview">
  705. <li class="nav-item">
  706. <a href="../pages/404.html" class="nav-link">
  707. <i class="nav-icon bi bi-circle"></i>
  708. <p>404</p>
  709. </a>
  710. </li>
  711. <li class="nav-item">
  712. <a href="../pages/500.html" class="nav-link">
  713. <i class="nav-icon bi bi-circle"></i>
  714. <p>500</p>
  715. </a>
  716. </li>
  717. <li class="nav-item">
  718. <a href="../pages/maintenance.html" class="nav-link">
  719. <i class="nav-icon bi bi-circle"></i>
  720. <p>Maintenance</p>
  721. </a>
  722. </li>
  723. </ul>
  724. </li>
  725. </ul>
  726. </li>
  727. <li class="nav-header">EXAMPLES</li>
  728. <li class="nav-item">
  729. <a href="#" class="nav-link">
  730. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  731. <p>
  732. Auth
  733. <i class="nav-arrow bi bi-chevron-right"></i>
  734. </p>
  735. </a>
  736. <ul class="nav nav-treeview">
  737. <li class="nav-item">
  738. <a href="#" class="nav-link">
  739. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  740. <p>
  741. Version 1
  742. <i class="nav-arrow bi bi-chevron-right"></i>
  743. </p>
  744. </a>
  745. <ul class="nav nav-treeview">
  746. <li class="nav-item">
  747. <a href="../examples/login.html" class="nav-link">
  748. <i class="nav-icon bi bi-circle"></i>
  749. <p>Login</p>
  750. </a>
  751. </li>
  752. <li class="nav-item">
  753. <a href="../examples/register.html" class="nav-link">
  754. <i class="nav-icon bi bi-circle"></i>
  755. <p>Register</p>
  756. </a>
  757. </li>
  758. </ul>
  759. </li>
  760. <li class="nav-item">
  761. <a href="#" class="nav-link">
  762. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  763. <p>
  764. Version 2
  765. <i class="nav-arrow bi bi-chevron-right"></i>
  766. </p>
  767. </a>
  768. <ul class="nav nav-treeview">
  769. <li class="nav-item">
  770. <a href="../examples/login-v2.html" class="nav-link">
  771. <i class="nav-icon bi bi-circle"></i>
  772. <p>Login</p>
  773. </a>
  774. </li>
  775. <li class="nav-item">
  776. <a href="../examples/register-v2.html" class="nav-link">
  777. <i class="nav-icon bi bi-circle"></i>
  778. <p>Register</p>
  779. </a>
  780. </li>
  781. </ul>
  782. </li>
  783. <li class="nav-item">
  784. <a href="../examples/lockscreen.html" class="nav-link">
  785. <i class="nav-icon bi bi-circle"></i>
  786. <p>Lockscreen</p>
  787. </a>
  788. </li>
  789. </ul>
  790. </li>
  791. <li class="nav-header">MULTI LEVEL EXAMPLE</li>
  792. <li class="nav-item">
  793. <a href="#" class="nav-link">
  794. <i class="nav-icon bi bi-circle-fill"></i>
  795. <p>Level 1</p>
  796. </a>
  797. </li>
  798. <li class="nav-item">
  799. <a href="#" class="nav-link">
  800. <i class="nav-icon bi bi-circle-fill"></i>
  801. <p>
  802. Level 1
  803. <i class="nav-arrow bi bi-chevron-right"></i>
  804. </p>
  805. </a>
  806. <ul class="nav nav-treeview">
  807. <li class="nav-item">
  808. <a href="#" class="nav-link">
  809. <i class="nav-icon bi bi-circle"></i>
  810. <p>Level 2</p>
  811. </a>
  812. </li>
  813. <li class="nav-item">
  814. <a href="#" class="nav-link">
  815. <i class="nav-icon bi bi-circle"></i>
  816. <p>
  817. Level 2
  818. <i class="nav-arrow bi bi-chevron-right"></i>
  819. </p>
  820. </a>
  821. <ul class="nav nav-treeview">
  822. <li class="nav-item">
  823. <a href="#" class="nav-link">
  824. <i class="nav-icon bi bi-record-circle-fill"></i>
  825. <p>Level 3</p>
  826. </a>
  827. </li>
  828. <li class="nav-item">
  829. <a href="#" class="nav-link">
  830. <i class="nav-icon bi bi-record-circle-fill"></i>
  831. <p>Level 3</p>
  832. </a>
  833. </li>
  834. <li class="nav-item">
  835. <a href="#" class="nav-link">
  836. <i class="nav-icon bi bi-record-circle-fill"></i>
  837. <p>Level 3</p>
  838. </a>
  839. </li>
  840. </ul>
  841. </li>
  842. <li class="nav-item">
  843. <a href="#" class="nav-link">
  844. <i class="nav-icon bi bi-circle"></i>
  845. <p>Level 2</p>
  846. </a>
  847. </li>
  848. </ul>
  849. </li>
  850. <li class="nav-item">
  851. <a href="#" class="nav-link">
  852. <i class="nav-icon bi bi-circle-fill"></i>
  853. <p>Level 1</p>
  854. </a>
  855. </li>
  856. <li class="nav-header">LABELS</li>
  857. <li class="nav-item">
  858. <a href="#" class="nav-link">
  859. <i class="nav-icon bi bi-circle text-danger"></i>
  860. <p class="text">Important</p>
  861. </a>
  862. </li>
  863. <li class="nav-item">
  864. <a href="#" class="nav-link">
  865. <i class="nav-icon bi bi-circle text-warning"></i>
  866. <p>Warning</p>
  867. </a>
  868. </li>
  869. <li class="nav-item">
  870. <a href="#" class="nav-link">
  871. <i class="nav-icon bi bi-circle text-info"></i>
  872. <p>Informational</p>
  873. </a>
  874. </li>
  875. </ul>
  876. <!--end::Sidebar Menu-->
  877. <!-- Docs CTA (bottom of sidebar) -->
  878. <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
  879. <a
  880. href="../docs/introduction.html"
  881. class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
  882. >
  883. <i class="bi bi-book" aria-hidden="true"></i>
  884. View documentation
  885. </a>
  886. </div>
  887. </nav>
  888. </div>
  889. <!--end::Sidebar Wrapper-->
  890. </aside>
  891. <!--end::Sidebar-->
  892. <!--begin::App Main-->
  893. <main class="app-main">
  894. <!--begin::App Content Header-->
  895. <div class="app-content-header">
  896. <!--begin::Container-->
  897. <div class="container-fluid">
  898. <!--begin::Row-->
  899. <div class="row">
  900. <div class="col-sm-6">
  901. <h3 class="mb-0">Fixed Complete</h3>
  902. </div>
  903. <div class="col-sm-6">
  904. <ol class="breadcrumb float-sm-end">
  905. <li class="breadcrumb-item"><a href="#">Home</a></li>
  906. <li class="breadcrumb-item active" aria-current="page">Fixed Complete</li>
  907. </ol>
  908. </div>
  909. </div>
  910. <!--end::Row-->
  911. </div>
  912. <!--end::Container-->
  913. </div>
  914. <!--end::App Content Header-->
  915. <!--begin::App Content-->
  916. <div class="app-content">
  917. <!--begin::Container-->
  918. <div class="container-fluid">
  919. <!--begin::Row-->
  920. <div class="row">
  921. <div class="col-12">
  922. <!-- Default box -->
  923. <div class="card">
  924. <div class="card-header">
  925. <h3 class="card-title">Title</h3>
  926. <div class="card-tools">
  927. <button
  928. type="button"
  929. class="btn btn-tool"
  930. data-lte-toggle="card-collapse"
  931. title="Collapse"
  932. >
  933. <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
  934. <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
  935. </button>
  936. <button
  937. type="button"
  938. class="btn btn-tool"
  939. data-lte-toggle="card-remove"
  940. title="Remove"
  941. >
  942. <i class="bi bi-x-lg"></i>
  943. </button>
  944. </div>
  945. </div>
  946. <div class="card-body">Start creating your amazing application!</div>
  947. <!-- /.card-body -->
  948. <div class="card-footer">Footer</div>
  949. <!-- /.card-footer-->
  950. </div>
  951. <!-- /.card -->
  952. </div>
  953. </div>
  954. <!--end::Row-->
  955. </div>
  956. <!--end::Container-->
  957. </div>
  958. <!--end::App Content-->
  959. </main>
  960. <!--end::App Main-->
  961. <!--begin::Footer-->
  962. <footer class="app-footer">
  963. <!--begin::To the end-->
  964. <div class="float-end d-none d-sm-inline">Anything you want</div>
  965. <!--end::To the end-->
  966. <!--begin::Copyright-->
  967. <strong>
  968. Copyright &copy; 2014-2026&nbsp;
  969. <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
  970. </strong>
  971. All rights reserved.
  972. <!--end::Copyright-->
  973. </footer>
  974. <!--end::Footer-->
  975. </div>
  976. <!--end::App Wrapper-->
  977. <!--begin::Script-->
  978. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  979. <script
  980. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  981. crossorigin="anonymous"
  982. ></script>
  983. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  984. <script
  985. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  986. crossorigin="anonymous"
  987. ></script>
  988. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  989. <script
  990. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  991. crossorigin="anonymous"
  992. ></script>
  993. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  994. <script src="../js/adminlte.js"></script>
  995. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  996. <script>
  997. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  998. const Default = {
  999. scrollbarTheme: 'os-theme-light',
  1000. scrollbarAutoHide: 'leave',
  1001. scrollbarClickScroll: true,
  1002. };
  1003. document.addEventListener('DOMContentLoaded', function () {
  1004. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  1005. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  1006. const isMobile = window.innerWidth <= 992;
  1007. if (
  1008. sidebarWrapper &&
  1009. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  1010. !isMobile
  1011. ) {
  1012. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  1013. scrollbars: {
  1014. theme: Default.scrollbarTheme,
  1015. autoHide: Default.scrollbarAutoHide,
  1016. clickScroll: Default.scrollbarClickScroll,
  1017. },
  1018. });
  1019. }
  1020. });
  1021. </script>
  1022. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  1023. <script>
  1024. (() => {
  1025. 'use strict';
  1026. const STORAGE_KEY = 'lte-theme';
  1027. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  1028. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  1029. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  1030. const getPreferredTheme = () => {
  1031. const stored = getStoredTheme();
  1032. if (stored) return stored;
  1033. return prefersDark() ? 'dark' : 'light';
  1034. };
  1035. const setTheme = (theme) => {
  1036. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  1037. document.documentElement.setAttribute('data-bs-theme', resolved);
  1038. };
  1039. setTheme(getPreferredTheme());
  1040. const showActiveTheme = (theme) => {
  1041. // Highlight the active dropdown option
  1042. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  1043. el.classList.remove('active');
  1044. el.setAttribute('aria-pressed', 'false');
  1045. const check = el.querySelector('.bi-check-lg');
  1046. if (check) check.classList.add('d-none');
  1047. });
  1048. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  1049. if (active) {
  1050. active.classList.add('active');
  1051. active.setAttribute('aria-pressed', 'true');
  1052. const check = active.querySelector('.bi-check-lg');
  1053. if (check) check.classList.remove('d-none');
  1054. }
  1055. // Sync the topbar trigger icon
  1056. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  1057. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  1058. });
  1059. };
  1060. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  1061. const stored = getStoredTheme();
  1062. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  1063. });
  1064. document.addEventListener('DOMContentLoaded', () => {
  1065. showActiveTheme(getPreferredTheme());
  1066. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  1067. toggle.addEventListener('click', () => {
  1068. const theme = toggle.getAttribute('data-bs-theme-value');
  1069. setStoredTheme(theme);
  1070. setTheme(theme);
  1071. showActiveTheme(theme);
  1072. });
  1073. });
  1074. });
  1075. })();
  1076. </script>
  1077. <!--end::Color Mode Toggle-->
  1078. <!--end::Script-->
  1079. </body>
  1080. <!--end::Body-->
  1081. </html>