404.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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 | 404 Error Page</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 | 404 Error Page" />
  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="bg-body-tertiary">
  58. <main class="d-flex align-items-center min-vh-100 py-5">
  59. <div class="container">
  60. <div class="row justify-content-center">
  61. <div class="col-md-8 col-lg-6 text-center">
  62. <div class="display-1 fw-bold text-primary lh-1 mb-3">404</div>
  63. <h1 class="h3 mb-3">Oops! Page not found.</h1>
  64. <p class="text-secondary mb-4">
  65. We could not find the page you were looking for. Meanwhile, you may return to the
  66. dashboard or try searching for what you need.
  67. </p>
  68. <form class="row g-2 justify-content-center mb-4" role="search">
  69. <div class="col-sm-8">
  70. <div class="input-group">
  71. <span class="input-group-text bg-body">
  72. <i class="bi bi-search" aria-hidden="true"></i>
  73. </span>
  74. <input
  75. type="search"
  76. class="form-control"
  77. placeholder="Search…"
  78. aria-label="Search"
  79. />
  80. </div>
  81. </div>
  82. <div class="col-sm-auto">
  83. <button class="btn btn-primary w-100" type="submit">Search</button>
  84. </div>
  85. </form>
  86. <a href="../index.html" class="btn btn-outline-secondary">
  87. <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
  88. Back to dashboard
  89. </a>
  90. </div>
  91. </div>
  92. </div>
  93. </main>
  94. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  95. <script
  96. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  97. crossorigin="anonymous"
  98. ></script>
  99. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  100. <script
  101. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  102. crossorigin="anonymous"
  103. ></script>
  104. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  105. <script
  106. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  107. crossorigin="anonymous"
  108. ></script>
  109. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  110. <script src="../js/adminlte.js"></script>
  111. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  112. <script>
  113. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  114. const Default = {
  115. scrollbarTheme: 'os-theme-light',
  116. scrollbarAutoHide: 'leave',
  117. scrollbarClickScroll: true,
  118. };
  119. document.addEventListener('DOMContentLoaded', function () {
  120. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  121. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  122. const isMobile = window.innerWidth <= 992;
  123. if (
  124. sidebarWrapper &&
  125. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  126. !isMobile
  127. ) {
  128. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  129. scrollbars: {
  130. theme: Default.scrollbarTheme,
  131. autoHide: Default.scrollbarAutoHide,
  132. clickScroll: Default.scrollbarClickScroll,
  133. },
  134. });
  135. }
  136. });
  137. </script>
  138. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  139. <script>
  140. (() => {
  141. 'use strict';
  142. const STORAGE_KEY = 'lte-theme';
  143. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  144. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  145. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  146. const getPreferredTheme = () => {
  147. const stored = getStoredTheme();
  148. if (stored) return stored;
  149. return prefersDark() ? 'dark' : 'light';
  150. };
  151. const setTheme = (theme) => {
  152. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  153. document.documentElement.setAttribute('data-bs-theme', resolved);
  154. };
  155. setTheme(getPreferredTheme());
  156. const showActiveTheme = (theme) => {
  157. // Highlight the active dropdown option
  158. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  159. el.classList.remove('active');
  160. el.setAttribute('aria-pressed', 'false');
  161. const check = el.querySelector('.bi-check-lg');
  162. if (check) check.classList.add('d-none');
  163. });
  164. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  165. if (active) {
  166. active.classList.add('active');
  167. active.setAttribute('aria-pressed', 'true');
  168. const check = active.querySelector('.bi-check-lg');
  169. if (check) check.classList.remove('d-none');
  170. }
  171. // Sync the topbar trigger icon
  172. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  173. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  174. });
  175. };
  176. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  177. const stored = getStoredTheme();
  178. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  179. });
  180. document.addEventListener('DOMContentLoaded', () => {
  181. showActiveTheme(getPreferredTheme());
  182. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  183. toggle.addEventListener('click', () => {
  184. const theme = toggle.getAttribute('data-bs-theme-value');
  185. setStoredTheme(theme);
  186. setTheme(theme);
  187. showActiveTheme(theme);
  188. });
  189. });
  190. });
  191. })();
  192. </script>
  193. <!--end::Color Mode Toggle-->
  194. </body>
  195. </html>