faq.html 56 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>AdminLTE 4 | FAQ</title>
  6. <!--begin::Accessibility Meta Tags-->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  8. <meta name="color-scheme" content="light dark" />
  9. <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
  10. <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
  11. <!--end::Accessibility Meta Tags-->
  12. <!--begin::Primary Meta Tags-->
  13. <meta name="title" content="AdminLTE 4 | FAQ" />
  14. <meta name="author" content="ColorlibHQ" />
  15. <meta
  16. name="description"
  17. content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
  18. />
  19. <meta
  20. name="keywords"
  21. 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"
  22. />
  23. <!--end::Primary Meta Tags-->
  24. <!--begin::Accessibility Features-->
  25. <!-- Skip links will be dynamically added by accessibility.js -->
  26. <meta name="supported-color-schemes" content="light dark" />
  27. <link rel="preload" href="../css/adminlte.css" as="style" />
  28. <!--end::Accessibility Features-->
  29. <!--begin::Fonts-->
  30. <link
  31. rel="stylesheet"
  32. href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
  33. integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
  34. crossorigin="anonymous"
  35. media="print"
  36. onload="this.media = 'all'"
  37. />
  38. <!--end::Fonts-->
  39. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  40. <link
  41. rel="stylesheet"
  42. href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
  43. crossorigin="anonymous"
  44. />
  45. <!--end::Third Party Plugin(OverlayScrollbars)-->
  46. <!--begin::Third Party Plugin(Bootstrap Icons)-->
  47. <link
  48. rel="stylesheet"
  49. href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
  50. crossorigin="anonymous"
  51. />
  52. <!--end::Third Party Plugin(Bootstrap Icons)-->
  53. <!--begin::Required Plugin(AdminLTE)-->
  54. <link rel="stylesheet" href="../css/adminlte.css" />
  55. <!--end::Required Plugin(AdminLTE)-->
  56. </head>
  57. <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
  58. <div class="app-wrapper">
  59. <!--begin::Header-->
  60. <nav class="app-header navbar navbar-expand bg-body">
  61. <!--begin::Container-->
  62. <div class="container-fluid">
  63. <!--begin::Start Navbar Links-->
  64. <ul class="navbar-nav">
  65. <li class="nav-item">
  66. <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
  67. <i class="bi bi-list"></i>
  68. </a>
  69. </li>
  70. <li class="nav-item d-none d-md-block">
  71. <a href="../index.html" class="nav-link">
  72. <i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
  73. Live preview
  74. </a>
  75. </li>
  76. <li class="nav-item d-none d-md-block">
  77. <a href="../docs/introduction.html" class="nav-link">
  78. <i class="bi bi-book me-1" aria-hidden="true"></i>
  79. Documentation
  80. </a>
  81. </li>
  82. </ul>
  83. <!--end::Start Navbar Links-->
  84. <!--begin::End Navbar Links-->
  85. <ul class="navbar-nav ms-auto">
  86. <!--begin::Navbar Search-->
  87. <li class="nav-item">
  88. <a class="nav-link" data-widget="navbar-search" href="#" role="button">
  89. <i class="bi bi-search"></i>
  90. </a>
  91. </li>
  92. <!--end::Navbar Search-->
  93. <!--begin::Messages Dropdown Menu-->
  94. <li class="nav-item dropdown">
  95. <a class="nav-link" data-bs-toggle="dropdown" href="#">
  96. <i class="bi bi-chat-text"></i>
  97. <span class="navbar-badge badge text-bg-danger">3</span>
  98. </a>
  99. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  100. <a href="#" class="dropdown-item">
  101. <!--begin::Message-->
  102. <div class="d-flex">
  103. <div class="flex-shrink-0">
  104. <img
  105. src="../assets/img/user1-128x128.jpg"
  106. alt="User Avatar"
  107. class="img-size-50 rounded-circle me-3"
  108. />
  109. </div>
  110. <div class="flex-grow-1">
  111. <h3 class="dropdown-item-title">
  112. Brad Diesel
  113. <span class="float-end fs-7 text-danger"
  114. ><i class="bi bi-star-fill"></i
  115. ></span>
  116. </h3>
  117. <p class="fs-7">Call me whenever you can...</p>
  118. <p class="fs-7 text-secondary">
  119. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  120. </p>
  121. </div>
  122. </div>
  123. <!--end::Message-->
  124. </a>
  125. <div class="dropdown-divider"></div>
  126. <a href="#" class="dropdown-item">
  127. <!--begin::Message-->
  128. <div class="d-flex">
  129. <div class="flex-shrink-0">
  130. <img
  131. src="../assets/img/user8-128x128.jpg"
  132. alt="User Avatar"
  133. class="img-size-50 rounded-circle me-3"
  134. />
  135. </div>
  136. <div class="flex-grow-1">
  137. <h3 class="dropdown-item-title">
  138. John Pierce
  139. <span class="float-end fs-7 text-secondary">
  140. <i class="bi bi-star-fill"></i>
  141. </span>
  142. </h3>
  143. <p class="fs-7">I got your message bro</p>
  144. <p class="fs-7 text-secondary">
  145. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  146. </p>
  147. </div>
  148. </div>
  149. <!--end::Message-->
  150. </a>
  151. <div class="dropdown-divider"></div>
  152. <a href="#" class="dropdown-item">
  153. <!--begin::Message-->
  154. <div class="d-flex">
  155. <div class="flex-shrink-0">
  156. <img
  157. src="../assets/img/user3-128x128.jpg"
  158. alt="User Avatar"
  159. class="img-size-50 rounded-circle me-3"
  160. />
  161. </div>
  162. <div class="flex-grow-1">
  163. <h3 class="dropdown-item-title">
  164. Nora Silvester
  165. <span class="float-end fs-7 text-warning">
  166. <i class="bi bi-star-fill"></i>
  167. </span>
  168. </h3>
  169. <p class="fs-7">The subject goes here</p>
  170. <p class="fs-7 text-secondary">
  171. <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
  172. </p>
  173. </div>
  174. </div>
  175. <!--end::Message-->
  176. </a>
  177. <div class="dropdown-divider"></div>
  178. <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  179. </div>
  180. </li>
  181. <!--end::Messages Dropdown Menu-->
  182. <!--begin::Notifications Dropdown Menu-->
  183. <li class="nav-item dropdown">
  184. <a class="nav-link" data-bs-toggle="dropdown" href="#">
  185. <i class="bi bi-bell-fill"></i>
  186. <span class="navbar-badge badge text-bg-warning">15</span>
  187. </a>
  188. <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  189. <span class="dropdown-item dropdown-header">15 Notifications</span>
  190. <div class="dropdown-divider"></div>
  191. <a href="#" class="dropdown-item">
  192. <i class="bi bi-envelope me-2"></i> 4 new messages
  193. <span class="float-end text-secondary fs-7">3 mins</span>
  194. </a>
  195. <div class="dropdown-divider"></div>
  196. <a href="#" class="dropdown-item">
  197. <i class="bi bi-people-fill me-2"></i> 8 friend requests
  198. <span class="float-end text-secondary fs-7">12 hours</span>
  199. </a>
  200. <div class="dropdown-divider"></div>
  201. <a href="#" class="dropdown-item">
  202. <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
  203. <span class="float-end text-secondary fs-7">2 days</span>
  204. </a>
  205. <div class="dropdown-divider"></div>
  206. <a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
  207. </div>
  208. </li>
  209. <!--end::Notifications Dropdown Menu-->
  210. <!--begin::Fullscreen Toggle-->
  211. <li class="nav-item">
  212. <a class="nav-link" href="#" data-lte-toggle="fullscreen">
  213. <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
  214. <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
  215. </a>
  216. </li>
  217. <!--end::Fullscreen Toggle-->
  218. <!--begin::Color Mode Toggle (#6010)-->
  219. <li class="nav-item dropdown">
  220. <a
  221. class="nav-link"
  222. href="#"
  223. id="bd-theme"
  224. aria-label="Toggle color scheme"
  225. data-bs-toggle="dropdown"
  226. aria-expanded="false"
  227. >
  228. <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
  229. <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
  230. <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
  231. </a>
  232. <ul
  233. class="dropdown-menu dropdown-menu-end"
  234. aria-labelledby="bd-theme"
  235. style="--bs-dropdown-min-width: 8rem"
  236. >
  237. <li>
  238. <button
  239. type="button"
  240. class="dropdown-item d-flex align-items-center"
  241. data-bs-theme-value="light"
  242. aria-pressed="false"
  243. >
  244. <i class="bi bi-sun-fill me-2"></i>
  245. Light
  246. <i class="bi bi-check-lg ms-auto d-none"></i>
  247. </button>
  248. </li>
  249. <li>
  250. <button
  251. type="button"
  252. class="dropdown-item d-flex align-items-center"
  253. data-bs-theme-value="dark"
  254. aria-pressed="false"
  255. >
  256. <i class="bi bi-moon-fill me-2"></i>
  257. Dark
  258. <i class="bi bi-check-lg ms-auto d-none"></i>
  259. </button>
  260. </li>
  261. <li>
  262. <button
  263. type="button"
  264. class="dropdown-item d-flex align-items-center active"
  265. data-bs-theme-value="auto"
  266. aria-pressed="true"
  267. >
  268. <i class="bi bi-circle-half me-2"></i>
  269. Auto
  270. <i class="bi bi-check-lg ms-auto d-none"></i>
  271. </button>
  272. </li>
  273. </ul>
  274. </li>
  275. <!--end::Color Mode Toggle-->
  276. <!--begin::User Menu Dropdown-->
  277. <li class="nav-item dropdown user-menu">
  278. <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
  279. <img
  280. src="../assets/img/user2-160x160.jpg"
  281. class="user-image rounded-circle shadow"
  282. alt="User Image"
  283. />
  284. <span class="d-none d-md-inline">Alexander Pierce</span>
  285. </a>
  286. <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
  287. <!--begin::User Image-->
  288. <li class="user-header text-bg-primary">
  289. <img
  290. src="../assets/img/user2-160x160.jpg"
  291. class="rounded-circle shadow"
  292. alt="User Image"
  293. />
  294. <p>
  295. Alexander Pierce - Web Developer
  296. <small>Member since Nov. 2023</small>
  297. </p>
  298. </li>
  299. <!--end::User Image-->
  300. <!--begin::Menu Body-->
  301. <li class="user-body">
  302. <!--begin::Row-->
  303. <div class="row">
  304. <div class="col-4 text-center">
  305. <a href="#">Followers</a>
  306. </div>
  307. <div class="col-4 text-center">
  308. <a href="#">Sales</a>
  309. </div>
  310. <div class="col-4 text-center">
  311. <a href="#">Friends</a>
  312. </div>
  313. </div>
  314. <!--end::Row-->
  315. </li>
  316. <!--end::Menu Body-->
  317. <!--begin::Menu Footer-->
  318. <li class="user-footer">
  319. <a href="#" class="btn btn-outline-secondary">Profile</a>
  320. <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
  321. </li>
  322. <!--end::Menu Footer-->
  323. </ul>
  324. </li>
  325. <!--end::User Menu Dropdown-->
  326. </ul>
  327. <!--end::End Navbar Links-->
  328. </div>
  329. <!--end::Container-->
  330. </nav>
  331. <!--end::Header-->
  332. <!--begin::Sidebar-->
  333. <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
  334. <!--begin::Sidebar Brand-->
  335. <div class="sidebar-brand">
  336. <!--begin::Brand Link-->
  337. <a href="../index.html" class="brand-link">
  338. <!--begin::Brand Image-->
  339. <img
  340. src="../assets/img/AdminLTELogo.png"
  341. alt="AdminLTE Logo"
  342. class="brand-image opacity-75 shadow"
  343. />
  344. <!--end::Brand Image-->
  345. <!--begin::Brand Text-->
  346. <span class="brand-text fw-light">AdminLTE 4</span>
  347. <!--end::Brand Text-->
  348. </a>
  349. <!--end::Brand Link-->
  350. </div>
  351. <!--end::Sidebar Brand-->
  352. <!--begin::Sidebar Wrapper-->
  353. <div class="sidebar-wrapper">
  354. <nav class="mt-2">
  355. <!--begin::Sidebar Menu-->
  356. <ul
  357. class="nav sidebar-menu flex-column"
  358. data-lte-toggle="treeview"
  359. role="navigation"
  360. aria-label="Main navigation"
  361. data-accordion="false"
  362. id="navigation"
  363. >
  364. <li class="nav-item">
  365. <a href="#" class="nav-link">
  366. <i class="nav-icon bi bi-speedometer"></i>
  367. <p>
  368. Dashboard
  369. <i class="nav-arrow bi bi-chevron-right"></i>
  370. </p>
  371. </a>
  372. <ul class="nav nav-treeview">
  373. <li class="nav-item">
  374. <a href="../index.html" class="nav-link">
  375. <i class="nav-icon bi bi-circle"></i>
  376. <p>Dashboard v1</p>
  377. </a>
  378. </li>
  379. <li class="nav-item">
  380. <a href="../index2.html" class="nav-link">
  381. <i class="nav-icon bi bi-circle"></i>
  382. <p>Dashboard v2</p>
  383. </a>
  384. </li>
  385. <li class="nav-item">
  386. <a href="../index3.html" class="nav-link">
  387. <i class="nav-icon bi bi-circle"></i>
  388. <p>Dashboard v3</p>
  389. </a>
  390. </li>
  391. </ul>
  392. </li>
  393. <li class="nav-item">
  394. <a href="../generate/theme.html" class="nav-link">
  395. <i class="nav-icon bi bi-palette"></i>
  396. <p>Theme Generate</p>
  397. </a>
  398. </li>
  399. <li class="nav-item">
  400. <a href="#" class="nav-link">
  401. <i class="nav-icon bi bi-box-seam-fill"></i>
  402. <p>
  403. Widgets
  404. <i class="nav-arrow bi bi-chevron-right"></i>
  405. </p>
  406. </a>
  407. <ul class="nav nav-treeview">
  408. <li class="nav-item">
  409. <a href="../widgets/small-box.html" class="nav-link">
  410. <i class="nav-icon bi bi-circle"></i>
  411. <p>Small Box</p>
  412. </a>
  413. </li>
  414. <li class="nav-item">
  415. <a href="../widgets/info-box.html" class="nav-link">
  416. <i class="nav-icon bi bi-circle"></i>
  417. <p>info Box</p>
  418. </a>
  419. </li>
  420. <li class="nav-item">
  421. <a href="../widgets/cards.html" class="nav-link">
  422. <i class="nav-icon bi bi-circle"></i>
  423. <p>Cards</p>
  424. </a>
  425. </li>
  426. </ul>
  427. </li>
  428. <li class="nav-item">
  429. <a href="#" class="nav-link">
  430. <i class="nav-icon bi bi-clipboard-fill"></i>
  431. <p>
  432. Layout Options
  433. <span class="nav-badge badge text-bg-secondary me-3">7</span>
  434. <i class="nav-arrow bi bi-chevron-right"></i>
  435. </p>
  436. </a>
  437. <ul class="nav nav-treeview">
  438. <li class="nav-item">
  439. <a href="../layout/unfixed-sidebar.html" class="nav-link">
  440. <i class="nav-icon bi bi-circle"></i>
  441. <p>Default Sidebar</p>
  442. </a>
  443. </li>
  444. <li class="nav-item">
  445. <a href="../layout/fixed-sidebar.html" class="nav-link">
  446. <i class="nav-icon bi bi-circle"></i>
  447. <p>Fixed Sidebar</p>
  448. </a>
  449. </li>
  450. <li class="nav-item">
  451. <a href="../layout/fixed-header.html" class="nav-link">
  452. <i class="nav-icon bi bi-circle"></i>
  453. <p>Fixed Header</p>
  454. </a>
  455. </li>
  456. <li class="nav-item">
  457. <a href="../layout/fixed-footer.html" class="nav-link">
  458. <i class="nav-icon bi bi-circle"></i>
  459. <p>Fixed Footer</p>
  460. </a>
  461. </li>
  462. <li class="nav-item">
  463. <a href="../layout/fixed-complete.html" class="nav-link">
  464. <i class="nav-icon bi bi-circle"></i>
  465. <p>Fixed Complete</p>
  466. </a>
  467. </li>
  468. <li class="nav-item">
  469. <a href="../layout/layout-custom-area.html" class="nav-link">
  470. <i class="nav-icon bi bi-circle"></i>
  471. <p>Layout <small>+ Custom Area </small></p>
  472. </a>
  473. </li>
  474. <li class="nav-item">
  475. <a href="../layout/sidebar-mini.html" class="nav-link">
  476. <i class="nav-icon bi bi-circle"></i>
  477. <p>Sidebar Mini</p>
  478. </a>
  479. </li>
  480. <li class="nav-item">
  481. <a href="../layout/collapsed-sidebar.html" class="nav-link">
  482. <i class="nav-icon bi bi-circle"></i>
  483. <p>Sidebar Mini <small>+ Collapsed</small></p>
  484. </a>
  485. </li>
  486. <li class="nav-item">
  487. <a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
  488. <i class="nav-icon bi bi-circle"></i>
  489. <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
  490. </a>
  491. </li>
  492. <li class="nav-item">
  493. <a href="../layout/logo-switch.html" class="nav-link">
  494. <i class="nav-icon bi bi-circle"></i>
  495. <p>Sidebar Mini <small>+ Logo Switch</small></p>
  496. </a>
  497. </li>
  498. <li class="nav-item">
  499. <a href="../layout/layout-rtl.html" class="nav-link">
  500. <i class="nav-icon bi bi-circle"></i>
  501. <p>Layout RTL</p>
  502. </a>
  503. </li>
  504. </ul>
  505. </li>
  506. <li class="nav-item">
  507. <a href="#" class="nav-link">
  508. <i class="nav-icon bi bi-tree-fill"></i>
  509. <p>
  510. UI Elements
  511. <i class="nav-arrow bi bi-chevron-right"></i>
  512. </p>
  513. </a>
  514. <ul class="nav nav-treeview">
  515. <li class="nav-item">
  516. <a href="../UI/general.html" class="nav-link">
  517. <i class="nav-icon bi bi-circle"></i>
  518. <p>General</p>
  519. </a>
  520. </li>
  521. <li class="nav-item">
  522. <a href="../UI/icons.html" class="nav-link">
  523. <i class="nav-icon bi bi-circle"></i>
  524. <p>Icons</p>
  525. </a>
  526. </li>
  527. <li class="nav-item">
  528. <a href="../UI/timeline.html" class="nav-link">
  529. <i class="nav-icon bi bi-circle"></i>
  530. <p>Timeline</p>
  531. </a>
  532. </li>
  533. </ul>
  534. </li>
  535. <li class="nav-item">
  536. <a href="#" class="nav-link">
  537. <i class="nav-icon bi bi-envelope"></i>
  538. <p>
  539. Mailbox
  540. <i class="nav-arrow bi bi-chevron-right"></i>
  541. </p>
  542. </a>
  543. <ul class="nav nav-treeview">
  544. <li class="nav-item">
  545. <a href="../mailbox/inbox.html" class="nav-link">
  546. <i class="nav-icon bi bi-circle"></i>
  547. <p>Inbox</p>
  548. </a>
  549. </li>
  550. <li class="nav-item">
  551. <a href="../mailbox/read.html" class="nav-link">
  552. <i class="nav-icon bi bi-circle"></i>
  553. <p>Read Message</p>
  554. </a>
  555. </li>
  556. <li class="nav-item">
  557. <a href="../mailbox/compose.html" class="nav-link">
  558. <i class="nav-icon bi bi-circle"></i>
  559. <p>Compose</p>
  560. </a>
  561. </li>
  562. </ul>
  563. </li>
  564. <li class="nav-item">
  565. <a href="#" class="nav-link">
  566. <i class="nav-icon bi bi-pencil-square"></i>
  567. <p>
  568. Forms
  569. <i class="nav-arrow bi bi-chevron-right"></i>
  570. </p>
  571. </a>
  572. <ul class="nav nav-treeview">
  573. <li class="nav-item">
  574. <a href="../forms/elements.html" class="nav-link">
  575. <i class="nav-icon bi bi-circle"></i>
  576. <p>Elements</p>
  577. </a>
  578. </li>
  579. <li class="nav-item">
  580. <a href="../forms/layout.html" class="nav-link">
  581. <i class="nav-icon bi bi-circle"></i>
  582. <p>Layout</p>
  583. </a>
  584. </li>
  585. <li class="nav-item">
  586. <a href="../forms/validation.html" class="nav-link">
  587. <i class="nav-icon bi bi-circle"></i>
  588. <p>Validation</p>
  589. </a>
  590. </li>
  591. <li class="nav-item">
  592. <a href="../forms/wizard.html" class="nav-link">
  593. <i class="nav-icon bi bi-circle"></i>
  594. <p>Wizard</p>
  595. </a>
  596. </li>
  597. </ul>
  598. </li>
  599. <li class="nav-item">
  600. <a href="#" class="nav-link">
  601. <i class="nav-icon bi bi-table"></i>
  602. <p>
  603. Tables
  604. <i class="nav-arrow bi bi-chevron-right"></i>
  605. </p>
  606. </a>
  607. <ul class="nav nav-treeview">
  608. <li class="nav-item">
  609. <a href="../tables/simple.html" class="nav-link">
  610. <i class="nav-icon bi bi-circle"></i>
  611. <p>Simple Tables</p>
  612. </a>
  613. </li>
  614. <li class="nav-item">
  615. <a href="../tables/data.html" class="nav-link">
  616. <i class="nav-icon bi bi-circle"></i>
  617. <p>Data Tables</p>
  618. </a>
  619. </li>
  620. </ul>
  621. </li>
  622. <li class="nav-header">PAGES</li>
  623. <li class="nav-item menu-open">
  624. <a href="#" class="nav-link active">
  625. <i class="nav-icon bi bi-file-earmark-text"></i>
  626. <p>
  627. Pages
  628. <i class="nav-arrow bi bi-chevron-right"></i>
  629. </p>
  630. </a>
  631. <ul class="nav nav-treeview">
  632. <li class="nav-item">
  633. <a href="../pages/profile.html" class="nav-link">
  634. <i class="nav-icon bi bi-circle"></i>
  635. <p>Profile</p>
  636. </a>
  637. </li>
  638. <li class="nav-item">
  639. <a href="../pages/settings.html" class="nav-link">
  640. <i class="nav-icon bi bi-circle"></i>
  641. <p>Settings</p>
  642. </a>
  643. </li>
  644. <li class="nav-item">
  645. <a href="../pages/invoice.html" class="nav-link">
  646. <i class="nav-icon bi bi-circle"></i>
  647. <p>Invoice</p>
  648. </a>
  649. </li>
  650. <li class="nav-item">
  651. <a href="../pages/calendar.html" class="nav-link">
  652. <i class="nav-icon bi bi-circle"></i>
  653. <p>Calendar</p>
  654. </a>
  655. </li>
  656. <li class="nav-item">
  657. <a href="../pages/kanban.html" class="nav-link">
  658. <i class="nav-icon bi bi-circle"></i>
  659. <p>Kanban</p>
  660. </a>
  661. </li>
  662. <li class="nav-item">
  663. <a href="../pages/chat.html" class="nav-link">
  664. <i class="nav-icon bi bi-circle"></i>
  665. <p>Chat</p>
  666. </a>
  667. </li>
  668. <li class="nav-item">
  669. <a href="../pages/file-manager.html" class="nav-link">
  670. <i class="nav-icon bi bi-circle"></i>
  671. <p>File Manager</p>
  672. </a>
  673. </li>
  674. <li class="nav-item">
  675. <a href="../pages/projects.html" class="nav-link">
  676. <i class="nav-icon bi bi-circle"></i>
  677. <p>Projects</p>
  678. </a>
  679. </li>
  680. <li class="nav-item">
  681. <a href="../pages/pricing.html" class="nav-link">
  682. <i class="nav-icon bi bi-circle"></i>
  683. <p>Pricing</p>
  684. </a>
  685. </li>
  686. <li class="nav-item">
  687. <a href="../pages/faq.html" class="nav-link active">
  688. <i class="nav-icon bi bi-circle"></i>
  689. <p>FAQ</p>
  690. </a>
  691. </li>
  692. <li class="nav-item">
  693. <a href="#" class="nav-link">
  694. <i class="nav-icon bi bi-circle"></i>
  695. <p>
  696. Error
  697. <i class="nav-arrow bi bi-chevron-right"></i>
  698. </p>
  699. </a>
  700. <ul class="nav nav-treeview">
  701. <li class="nav-item">
  702. <a href="../pages/404.html" class="nav-link">
  703. <i class="nav-icon bi bi-circle"></i>
  704. <p>404</p>
  705. </a>
  706. </li>
  707. <li class="nav-item">
  708. <a href="../pages/500.html" class="nav-link">
  709. <i class="nav-icon bi bi-circle"></i>
  710. <p>500</p>
  711. </a>
  712. </li>
  713. <li class="nav-item">
  714. <a href="../pages/maintenance.html" class="nav-link">
  715. <i class="nav-icon bi bi-circle"></i>
  716. <p>Maintenance</p>
  717. </a>
  718. </li>
  719. </ul>
  720. </li>
  721. </ul>
  722. </li>
  723. <li class="nav-header">EXAMPLES</li>
  724. <li class="nav-item">
  725. <a href="#" class="nav-link">
  726. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  727. <p>
  728. Auth
  729. <i class="nav-arrow bi bi-chevron-right"></i>
  730. </p>
  731. </a>
  732. <ul class="nav nav-treeview">
  733. <li class="nav-item">
  734. <a href="#" class="nav-link">
  735. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  736. <p>
  737. Version 1
  738. <i class="nav-arrow bi bi-chevron-right"></i>
  739. </p>
  740. </a>
  741. <ul class="nav nav-treeview">
  742. <li class="nav-item">
  743. <a href="../examples/login.html" class="nav-link">
  744. <i class="nav-icon bi bi-circle"></i>
  745. <p>Login</p>
  746. </a>
  747. </li>
  748. <li class="nav-item">
  749. <a href="../examples/register.html" class="nav-link">
  750. <i class="nav-icon bi bi-circle"></i>
  751. <p>Register</p>
  752. </a>
  753. </li>
  754. </ul>
  755. </li>
  756. <li class="nav-item">
  757. <a href="#" class="nav-link">
  758. <i class="nav-icon bi bi-box-arrow-in-right"></i>
  759. <p>
  760. Version 2
  761. <i class="nav-arrow bi bi-chevron-right"></i>
  762. </p>
  763. </a>
  764. <ul class="nav nav-treeview">
  765. <li class="nav-item">
  766. <a href="../examples/login-v2.html" class="nav-link">
  767. <i class="nav-icon bi bi-circle"></i>
  768. <p>Login</p>
  769. </a>
  770. </li>
  771. <li class="nav-item">
  772. <a href="../examples/register-v2.html" class="nav-link">
  773. <i class="nav-icon bi bi-circle"></i>
  774. <p>Register</p>
  775. </a>
  776. </li>
  777. </ul>
  778. </li>
  779. <li class="nav-item">
  780. <a href="../examples/lockscreen.html" class="nav-link">
  781. <i class="nav-icon bi bi-circle"></i>
  782. <p>Lockscreen</p>
  783. </a>
  784. </li>
  785. </ul>
  786. </li>
  787. <li class="nav-header">MULTI LEVEL EXAMPLE</li>
  788. <li class="nav-item">
  789. <a href="#" class="nav-link">
  790. <i class="nav-icon bi bi-circle-fill"></i>
  791. <p>Level 1</p>
  792. </a>
  793. </li>
  794. <li class="nav-item">
  795. <a href="#" class="nav-link">
  796. <i class="nav-icon bi bi-circle-fill"></i>
  797. <p>
  798. Level 1
  799. <i class="nav-arrow bi bi-chevron-right"></i>
  800. </p>
  801. </a>
  802. <ul class="nav nav-treeview">
  803. <li class="nav-item">
  804. <a href="#" class="nav-link">
  805. <i class="nav-icon bi bi-circle"></i>
  806. <p>Level 2</p>
  807. </a>
  808. </li>
  809. <li class="nav-item">
  810. <a href="#" class="nav-link">
  811. <i class="nav-icon bi bi-circle"></i>
  812. <p>
  813. Level 2
  814. <i class="nav-arrow bi bi-chevron-right"></i>
  815. </p>
  816. </a>
  817. <ul class="nav nav-treeview">
  818. <li class="nav-item">
  819. <a href="#" class="nav-link">
  820. <i class="nav-icon bi bi-record-circle-fill"></i>
  821. <p>Level 3</p>
  822. </a>
  823. </li>
  824. <li class="nav-item">
  825. <a href="#" class="nav-link">
  826. <i class="nav-icon bi bi-record-circle-fill"></i>
  827. <p>Level 3</p>
  828. </a>
  829. </li>
  830. <li class="nav-item">
  831. <a href="#" class="nav-link">
  832. <i class="nav-icon bi bi-record-circle-fill"></i>
  833. <p>Level 3</p>
  834. </a>
  835. </li>
  836. </ul>
  837. </li>
  838. <li class="nav-item">
  839. <a href="#" class="nav-link">
  840. <i class="nav-icon bi bi-circle"></i>
  841. <p>Level 2</p>
  842. </a>
  843. </li>
  844. </ul>
  845. </li>
  846. <li class="nav-item">
  847. <a href="#" class="nav-link">
  848. <i class="nav-icon bi bi-circle-fill"></i>
  849. <p>Level 1</p>
  850. </a>
  851. </li>
  852. <li class="nav-header">LABELS</li>
  853. <li class="nav-item">
  854. <a href="#" class="nav-link">
  855. <i class="nav-icon bi bi-circle text-danger"></i>
  856. <p class="text">Important</p>
  857. </a>
  858. </li>
  859. <li class="nav-item">
  860. <a href="#" class="nav-link">
  861. <i class="nav-icon bi bi-circle text-warning"></i>
  862. <p>Warning</p>
  863. </a>
  864. </li>
  865. <li class="nav-item">
  866. <a href="#" class="nav-link">
  867. <i class="nav-icon bi bi-circle text-info"></i>
  868. <p>Informational</p>
  869. </a>
  870. </li>
  871. </ul>
  872. <!--end::Sidebar Menu-->
  873. <!-- Docs CTA (bottom of sidebar) -->
  874. <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
  875. <a
  876. href="../docs/introduction.html"
  877. class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
  878. >
  879. <i class="bi bi-book" aria-hidden="true"></i>
  880. View documentation
  881. </a>
  882. </div>
  883. </nav>
  884. </div>
  885. <!--end::Sidebar Wrapper-->
  886. </aside>
  887. <!--end::Sidebar-->
  888. <main class="app-main">
  889. <div class="app-content-header">
  890. <div class="container-fluid">
  891. <div class="row">
  892. <div class="col-sm-6">
  893. <h3 class="mb-0">FAQ</h3>
  894. </div>
  895. <div class="col-sm-6">
  896. <ol class="breadcrumb float-sm-end">
  897. <li class="breadcrumb-item"><a href="#">Home</a></li>
  898. <li class="breadcrumb-item active" aria-current="page">FAQ</li>
  899. </ol>
  900. </div>
  901. </div>
  902. </div>
  903. </div>
  904. <div class="app-content">
  905. <div class="container-fluid">
  906. <!-- Headline + search -->
  907. <div class="text-center mb-4">
  908. <h2 class="mb-2">How can we help?</h2>
  909. <p class="text-secondary mb-3">
  910. Search our knowledge base, or browse the topics below.
  911. </p>
  912. <form
  913. class="row g-2 justify-content-center"
  914. role="search"
  915. onsubmit="event.preventDefault()"
  916. >
  917. <div class="col-md-8 col-lg-6">
  918. <div class="input-group input-group-lg">
  919. <span class="input-group-text bg-body">
  920. <i class="bi bi-search" aria-hidden="true"></i>
  921. </span>
  922. <input
  923. type="search"
  924. class="form-control"
  925. placeholder="Search the FAQ…"
  926. aria-label="Search the FAQ"
  927. />
  928. </div>
  929. </div>
  930. </form>
  931. </div>
  932. <div class="row g-4">
  933. <div class="col-lg-12">
  934. <div class="card">
  935. <div class="card-header d-flex align-items-center">
  936. <i class="bi bi-rocket-takeoff fs-4 text-primary me-2" aria-hidden="true"></i>
  937. <h3 class="card-title mb-0">Getting started</h3>
  938. </div>
  939. <div class="card-body">
  940. <div class="accordion accordion-flush" id="faq-0">
  941. <div class="accordion-item">
  942. <h2 class="accordion-header">
  943. <button
  944. class="accordion-button collapsed"
  945. type="button"
  946. data-bs-toggle="collapse"
  947. data-bs-target="#faq-0-0"
  948. aria-expanded="false"
  949. aria-controls="faq-0-0"
  950. >
  951. How do I create an account?
  952. </button>
  953. </h2>
  954. <div
  955. id="faq-0-0"
  956. class="accordion-collapse collapse"
  957. data-bs-parent="#faq-0"
  958. >
  959. <div class="accordion-body text-secondary">
  960. Click <strong>Sign up</strong> in the top-right corner, enter your email
  961. and a strong password, then verify your email to activate your
  962. workspace.
  963. </div>
  964. </div>
  965. </div>
  966. <div class="accordion-item">
  967. <h2 class="accordion-header">
  968. <button
  969. class="accordion-button collapsed"
  970. type="button"
  971. data-bs-toggle="collapse"
  972. data-bs-target="#faq-0-1"
  973. aria-expanded="false"
  974. aria-controls="faq-0-1"
  975. >
  976. Can I try the product before paying?
  977. </button>
  978. </h2>
  979. <div
  980. id="faq-0-1"
  981. class="accordion-collapse collapse"
  982. data-bs-parent="#faq-0"
  983. >
  984. <div class="accordion-body text-secondary">
  985. Yes. Every paid plan includes a 14-day free trial. No credit card is
  986. required to start.
  987. </div>
  988. </div>
  989. </div>
  990. <div class="accordion-item">
  991. <h2 class="accordion-header">
  992. <button
  993. class="accordion-button collapsed"
  994. type="button"
  995. data-bs-toggle="collapse"
  996. data-bs-target="#faq-0-2"
  997. aria-expanded="false"
  998. aria-controls="faq-0-2"
  999. >
  1000. How do I invite teammates?
  1001. </button>
  1002. </h2>
  1003. <div
  1004. id="faq-0-2"
  1005. class="accordion-collapse collapse"
  1006. data-bs-parent="#faq-0"
  1007. >
  1008. <div class="accordion-body text-secondary">
  1009. From <strong>Settings &rarr; Team</strong>, click
  1010. <strong>Invite member</strong> and enter their email. They&rsquo;ll
  1011. receive an invitation link valid for seven days.
  1012. </div>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. <div class="col-lg-12">
  1020. <div class="card">
  1021. <div class="card-header d-flex align-items-center">
  1022. <i class="bi bi-credit-card fs-4 text-primary me-2" aria-hidden="true"></i>
  1023. <h3 class="card-title mb-0">Billing &amp; plans</h3>
  1024. </div>
  1025. <div class="card-body">
  1026. <div class="accordion accordion-flush" id="faq-1">
  1027. <div class="accordion-item">
  1028. <h2 class="accordion-header">
  1029. <button
  1030. class="accordion-button collapsed"
  1031. type="button"
  1032. data-bs-toggle="collapse"
  1033. data-bs-target="#faq-1-0"
  1034. aria-expanded="false"
  1035. aria-controls="faq-1-0"
  1036. >
  1037. Which payment methods do you accept?
  1038. </button>
  1039. </h2>
  1040. <div
  1041. id="faq-1-0"
  1042. class="accordion-collapse collapse"
  1043. data-bs-parent="#faq-1"
  1044. >
  1045. <div class="accordion-body text-secondary">
  1046. We accept all major credit and debit cards. Annual Enterprise plans can
  1047. be paid by invoice.
  1048. </div>
  1049. </div>
  1050. </div>
  1051. <div class="accordion-item">
  1052. <h2 class="accordion-header">
  1053. <button
  1054. class="accordion-button collapsed"
  1055. type="button"
  1056. data-bs-toggle="collapse"
  1057. data-bs-target="#faq-1-1"
  1058. aria-expanded="false"
  1059. aria-controls="faq-1-1"
  1060. >
  1061. Can I change my plan later?
  1062. </button>
  1063. </h2>
  1064. <div
  1065. id="faq-1-1"
  1066. class="accordion-collapse collapse"
  1067. data-bs-parent="#faq-1"
  1068. >
  1069. <div class="accordion-body text-secondary">
  1070. Yes. Upgrades take effect immediately and are pro-rated. Downgrades take
  1071. effect at the end of the current billing cycle.
  1072. </div>
  1073. </div>
  1074. </div>
  1075. <div class="accordion-item">
  1076. <h2 class="accordion-header">
  1077. <button
  1078. class="accordion-button collapsed"
  1079. type="button"
  1080. data-bs-toggle="collapse"
  1081. data-bs-target="#faq-1-2"
  1082. aria-expanded="false"
  1083. aria-controls="faq-1-2"
  1084. >
  1085. Do you offer refunds?
  1086. </button>
  1087. </h2>
  1088. <div
  1089. id="faq-1-2"
  1090. class="accordion-collapse collapse"
  1091. data-bs-parent="#faq-1"
  1092. >
  1093. <div class="accordion-body text-secondary">
  1094. We offer a full refund within 30 days of your first paid invoice, no
  1095. questions asked.
  1096. </div>
  1097. </div>
  1098. </div>
  1099. </div>
  1100. </div>
  1101. </div>
  1102. </div>
  1103. <div class="col-lg-12">
  1104. <div class="card">
  1105. <div class="card-header d-flex align-items-center">
  1106. <i class="bi bi-shield-lock fs-4 text-primary me-2" aria-hidden="true"></i>
  1107. <h3 class="card-title mb-0">Security &amp; privacy</h3>
  1108. </div>
  1109. <div class="card-body">
  1110. <div class="accordion accordion-flush" id="faq-2">
  1111. <div class="accordion-item">
  1112. <h2 class="accordion-header">
  1113. <button
  1114. class="accordion-button collapsed"
  1115. type="button"
  1116. data-bs-toggle="collapse"
  1117. data-bs-target="#faq-2-0"
  1118. aria-expanded="false"
  1119. aria-controls="faq-2-0"
  1120. >
  1121. Where is my data stored?
  1122. </button>
  1123. </h2>
  1124. <div
  1125. id="faq-2-0"
  1126. class="accordion-collapse collapse"
  1127. data-bs-parent="#faq-2"
  1128. >
  1129. <div class="accordion-body text-secondary">
  1130. Data is stored in encrypted form in SOC 2-certified data centers. You
  1131. can choose your region (US or EU) when you set up your workspace.
  1132. </div>
  1133. </div>
  1134. </div>
  1135. <div class="accordion-item">
  1136. <h2 class="accordion-header">
  1137. <button
  1138. class="accordion-button collapsed"
  1139. type="button"
  1140. data-bs-toggle="collapse"
  1141. data-bs-target="#faq-2-1"
  1142. aria-expanded="false"
  1143. aria-controls="faq-2-1"
  1144. >
  1145. Do you support SSO?
  1146. </button>
  1147. </h2>
  1148. <div
  1149. id="faq-2-1"
  1150. class="accordion-collapse collapse"
  1151. data-bs-parent="#faq-2"
  1152. >
  1153. <div class="accordion-body text-secondary">
  1154. Yes, on the Enterprise plan. We support SAML 2.0 and OIDC with providers
  1155. including Okta, Azure AD, and Google Workspace.
  1156. </div>
  1157. </div>
  1158. </div>
  1159. <div class="accordion-item">
  1160. <h2 class="accordion-header">
  1161. <button
  1162. class="accordion-button collapsed"
  1163. type="button"
  1164. data-bs-toggle="collapse"
  1165. data-bs-target="#faq-2-2"
  1166. aria-expanded="false"
  1167. aria-controls="faq-2-2"
  1168. >
  1169. How can I export or delete my data?
  1170. </button>
  1171. </h2>
  1172. <div
  1173. id="faq-2-2"
  1174. class="accordion-collapse collapse"
  1175. data-bs-parent="#faq-2"
  1176. >
  1177. <div class="accordion-body text-secondary">
  1178. You can export your data at any time from
  1179. <strong>Settings &rarr; Data</strong>. Deletion requests are honored
  1180. within 30 days per our DPA.
  1181. </div>
  1182. </div>
  1183. </div>
  1184. </div>
  1185. </div>
  1186. </div>
  1187. </div>
  1188. </div>
  1189. <!-- Still need help? -->
  1190. <div class="card mt-4">
  1191. <div class="card-body text-center py-4">
  1192. <i
  1193. class="bi bi-chat-dots text-primary"
  1194. style="font-size: 2.5rem"
  1195. aria-hidden="true"
  1196. ></i>
  1197. <h3 class="h5 mt-3 mb-2">Still need help?</h3>
  1198. <p class="text-secondary mb-3">
  1199. Can&rsquo;t find what you&rsquo;re looking for? Our support team is happy to help.
  1200. </p>
  1201. <a href="mailto:support@example.com" class="btn btn-primary">
  1202. <i class="bi bi-envelope me-1" aria-hidden="true"></i>
  1203. Contact support
  1204. </a>
  1205. </div>
  1206. </div>
  1207. </div>
  1208. </div>
  1209. </main>
  1210. <!--begin::Footer-->
  1211. <footer class="app-footer">
  1212. <!--begin::To the end-->
  1213. <div class="float-end d-none d-sm-inline">Anything you want</div>
  1214. <!--end::To the end-->
  1215. <!--begin::Copyright-->
  1216. <strong>
  1217. Copyright &copy; 2014-2026&nbsp;
  1218. <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
  1219. </strong>
  1220. All rights reserved.
  1221. <!--end::Copyright-->
  1222. </footer>
  1223. <!--end::Footer-->
  1224. </div>
  1225. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  1226. <script
  1227. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  1228. crossorigin="anonymous"
  1229. ></script>
  1230. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  1231. <script
  1232. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  1233. crossorigin="anonymous"
  1234. ></script>
  1235. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  1236. <script
  1237. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  1238. crossorigin="anonymous"
  1239. ></script>
  1240. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  1241. <script src="../js/adminlte.js"></script>
  1242. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  1243. <script>
  1244. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  1245. const Default = {
  1246. scrollbarTheme: 'os-theme-light',
  1247. scrollbarAutoHide: 'leave',
  1248. scrollbarClickScroll: true,
  1249. };
  1250. document.addEventListener('DOMContentLoaded', function () {
  1251. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  1252. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  1253. const isMobile = window.innerWidth <= 992;
  1254. if (
  1255. sidebarWrapper &&
  1256. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  1257. !isMobile
  1258. ) {
  1259. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  1260. scrollbars: {
  1261. theme: Default.scrollbarTheme,
  1262. autoHide: Default.scrollbarAutoHide,
  1263. clickScroll: Default.scrollbarClickScroll,
  1264. },
  1265. });
  1266. }
  1267. });
  1268. </script>
  1269. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  1270. <script>
  1271. (() => {
  1272. 'use strict';
  1273. const STORAGE_KEY = 'lte-theme';
  1274. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  1275. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  1276. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  1277. const getPreferredTheme = () => {
  1278. const stored = getStoredTheme();
  1279. if (stored) return stored;
  1280. return prefersDark() ? 'dark' : 'light';
  1281. };
  1282. const setTheme = (theme) => {
  1283. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  1284. document.documentElement.setAttribute('data-bs-theme', resolved);
  1285. };
  1286. setTheme(getPreferredTheme());
  1287. const showActiveTheme = (theme) => {
  1288. // Highlight the active dropdown option
  1289. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  1290. el.classList.remove('active');
  1291. el.setAttribute('aria-pressed', 'false');
  1292. const check = el.querySelector('.bi-check-lg');
  1293. if (check) check.classList.add('d-none');
  1294. });
  1295. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  1296. if (active) {
  1297. active.classList.add('active');
  1298. active.setAttribute('aria-pressed', 'true');
  1299. const check = active.querySelector('.bi-check-lg');
  1300. if (check) check.classList.remove('d-none');
  1301. }
  1302. // Sync the topbar trigger icon
  1303. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  1304. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  1305. });
  1306. };
  1307. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  1308. const stored = getStoredTheme();
  1309. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  1310. });
  1311. document.addEventListener('DOMContentLoaded', () => {
  1312. showActiveTheme(getPreferredTheme());
  1313. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  1314. toggle.addEventListener('click', () => {
  1315. const theme = toggle.getAttribute('data-bs-theme-value');
  1316. setStoredTheme(theme);
  1317. setTheme(theme);
  1318. showActiveTheme(theme);
  1319. });
  1320. });
  1321. });
  1322. })();
  1323. </script>
  1324. <!--end::Color Mode Toggle-->
  1325. </body>
  1326. </html>