maintenance.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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 | Maintenance</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 | Maintenance" />
  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. <i class="bi bi-tools text-warning" style="font-size: 4rem" aria-hidden="true"></i>
  63. <h1 class="h3 mt-3 mb-2">We&rsquo;ll be right back.</h1>
  64. <p class="text-secondary mb-4">
  65. The application is undergoing scheduled maintenance. We expect to be back online
  66. shortly. Thanks for your patience.
  67. </p>
  68. <div class="card mx-auto" style="max-width: 24rem">
  69. <div class="card-body text-start">
  70. <p class="text-secondary small mb-2">Estimated completion</p>
  71. <p class="fw-semibold mb-0">
  72. <i class="bi bi-clock me-1" aria-hidden="true"></i>
  73. In approximately 30 minutes
  74. </p>
  75. </div>
  76. </div>
  77. <p class="text-secondary small mt-4 mb-0">
  78. For urgent issues, reach us at
  79. <a href="mailto:support@example.com">support@example.com</a>
  80. </p>
  81. </div>
  82. </div>
  83. </div>
  84. </main>
  85. <!--begin::Third Party Plugin(OverlayScrollbars)-->
  86. <script
  87. src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
  88. crossorigin="anonymous"
  89. ></script>
  90. <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
  91. <script
  92. src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  93. crossorigin="anonymous"
  94. ></script>
  95. <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
  96. <script
  97. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
  98. crossorigin="anonymous"
  99. ></script>
  100. <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
  101. <script src="../js/adminlte.js"></script>
  102. <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
  103. <script>
  104. const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
  105. const Default = {
  106. scrollbarTheme: 'os-theme-light',
  107. scrollbarAutoHide: 'leave',
  108. scrollbarClickScroll: true,
  109. };
  110. document.addEventListener('DOMContentLoaded', function () {
  111. const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
  112. // Disable OverlayScrollbars on mobile devices to prevent touch interference
  113. const isMobile = window.innerWidth <= 992;
  114. if (
  115. sidebarWrapper &&
  116. OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
  117. !isMobile
  118. ) {
  119. OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
  120. scrollbars: {
  121. theme: Default.scrollbarTheme,
  122. autoHide: Default.scrollbarAutoHide,
  123. clickScroll: Default.scrollbarClickScroll,
  124. },
  125. });
  126. }
  127. });
  128. </script>
  129. <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
  130. <script>
  131. (() => {
  132. 'use strict';
  133. const STORAGE_KEY = 'lte-theme';
  134. const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
  135. const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
  136. const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
  137. const getPreferredTheme = () => {
  138. const stored = getStoredTheme();
  139. if (stored) return stored;
  140. return prefersDark() ? 'dark' : 'light';
  141. };
  142. const setTheme = (theme) => {
  143. const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
  144. document.documentElement.setAttribute('data-bs-theme', resolved);
  145. };
  146. setTheme(getPreferredTheme());
  147. const showActiveTheme = (theme) => {
  148. // Highlight the active dropdown option
  149. document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
  150. el.classList.remove('active');
  151. el.setAttribute('aria-pressed', 'false');
  152. const check = el.querySelector('.bi-check-lg');
  153. if (check) check.classList.add('d-none');
  154. });
  155. const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
  156. if (active) {
  157. active.classList.add('active');
  158. active.setAttribute('aria-pressed', 'true');
  159. const check = active.querySelector('.bi-check-lg');
  160. if (check) check.classList.remove('d-none');
  161. }
  162. // Sync the topbar trigger icon
  163. document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
  164. icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
  165. });
  166. };
  167. globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  168. const stored = getStoredTheme();
  169. if (!stored || stored === 'auto') setTheme(getPreferredTheme());
  170. });
  171. document.addEventListener('DOMContentLoaded', () => {
  172. showActiveTheme(getPreferredTheme());
  173. document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
  174. toggle.addEventListener('click', () => {
  175. const theme = toggle.getAttribute('data-bs-theme-value');
  176. setStoredTheme(theme);
  177. setTheme(theme);
  178. showActiveTheme(theme);
  179. });
  180. });
  181. });
  182. })();
  183. </script>
  184. <!--end::Color Mode Toggle-->
  185. </body>
  186. </html>