500.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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 | 500 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 | 500 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-danger lh-1 mb-3">500</div>
  63. <h1 class="h3 mb-3">Something went wrong on our end.</h1>
  64. <p class="text-secondary mb-4">
  65. The server encountered an unexpected condition. Our team has been notified. Please try
  66. again in a moment, or contact support if the issue persists.
  67. </p>
  68. <div class="d-flex gap-2 justify-content-center">
  69. <a href="../index.html" class="btn btn-primary">
  70. <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
  71. Back to dashboard
  72. </a>
  73. <a href="mailto:support@example.com" class="btn btn-outline-secondary">
  74. <i class="bi bi-life-preserver me-1" aria-hidden="true"></i>
  75. Contact support
  76. </a>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </main>
  82. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  83. <script
  84. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  85. crossorigin="anonymous"
  86. ></script>
  87. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  88. <script
  89. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  90. crossorigin="anonymous"
  91. ></script>
  92. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  93. <script
  94. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  95. crossorigin="anonymous"
  96. ></script>
  97. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  98. <script src="../js/adminlte.js"></script>
  99. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  100. <script>
  101. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  102. const Default = {
  103. scrollbarTheme: 'os-theme-light',
  104. scrollbarAutoHide: 'leave',
  105. scrollbarClickScroll: true,
  106. };
  107. document.addEventListener('DOMContentLoaded', function () {
  108. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  109. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  110. const isMobile = window.innerWidth <= 992;
  111. if (
  112. sidebarWrapper &&
  113. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  114. !isMobile
  115. ) {
  116. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  117. scrollbars: {
  118. theme: Default.scrollbarTheme,
  119. autoHide: Default.scrollbarAutoHide,
  120. clickScroll: Default.scrollbarClickScroll,
  121. },
  122. });
  123. }
  124. });
  125. </script>
  126. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  127. <script>
  128. (() => {
  129. 'use strict';
  130. const STORAGE_KEY = 'lte-theme';
  131. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  132. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  133. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  134. const getPreferredTheme = () => {
  135. const stored = getStoredTheme();
  136. if (stored) return stored;
  137. return prefersDark() ? 'dark' : 'light';
  138. };
  139. const setTheme = (theme) => {
  140. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  141. document.documentElement.setAttribute('data-bs-theme', resolved);
  142. };
  143. setTheme(getPreferredTheme());
  144. const showActiveTheme = (theme) => {
  145. // Highlight the active dropdown option
  146. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  147. el.classList.remove('active');
  148. el.setAttribute('aria-pressed', 'false');
  149. const check = el.querySelector('.bi-check-lg');
  150. if (check) check.classList.add('d-none');
  151. });
  152. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  153. if (active) {
  154. active.classList.add('active');
  155. active.setAttribute('aria-pressed', 'true');
  156. const check = active.querySelector('.bi-check-lg');
  157. if (check) check.classList.remove('d-none');
  158. }
  159. // Sync the topbar trigger icon
  160. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  161. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  162. });
  163. };
  164. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  165. const stored = getStoredTheme();
  166. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  167. });
  168. document.addEventListener('DOMContentLoaded', () => {
  169. showActiveTheme(getPreferredTheme());
  170. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  171. toggle.addEventListener('click', () => {
  172. const theme = toggle.getAttribute('data-bs-theme-value');
  173. setStoredTheme(theme);
  174. setTheme(theme);
  175. showActiveTheme(theme);
  176. });
  177. });
  178. });
  179. })();
  180. </script>
  181. <!--end::Color Mode Toggle-->
  182. </body>
  183. </html>