admin-lte 4.0.0-beta3 → 4.0.0-rc3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +460 -0
  4. package/README.md +50 -7
  5. package/dist/{pages/UI → UI}/general.html +79 -28
  6. package/dist/{pages/UI → UI}/icons.html +76 -25
  7. package/dist/{pages/UI → UI}/timeline.html +80 -29
  8. package/dist/css/adminlte.css +516 -332
  9. package/dist/css/adminlte.css.map +1 -1
  10. package/dist/css/adminlte.min.css +1 -1
  11. package/dist/css/adminlte.min.css.map +1 -1
  12. package/dist/css/adminlte.rtl.css +516 -332
  13. package/dist/css/adminlte.rtl.css.map +1 -1
  14. package/dist/css/adminlte.rtl.min.css +1 -1
  15. package/dist/css/adminlte.rtl.min.css.map +1 -1
  16. package/dist/{pages/docs → docs}/browser-support.html +77 -44
  17. package/dist/{pages/docs → docs}/color-mode.html +82 -50
  18. package/dist/{pages/docs → docs}/components/main-header.html +82 -49
  19. package/dist/{pages/docs → docs}/components/main-sidebar.html +78 -46
  20. package/dist/{pages/docs → docs}/faq.html +76 -42
  21. package/dist/{pages/docs → docs}/how-to-contribute.html +77 -44
  22. package/dist/{pages/docs → docs}/introduction.html +82 -54
  23. package/dist/{pages/docs → docs}/javascript/treeview.html +77 -44
  24. package/dist/{pages/docs → docs}/layout.html +76 -25
  25. package/dist/{pages/docs → docs}/license.html +76 -42
  26. package/dist/{pages/examples → examples}/lockscreen.html +49 -18
  27. package/dist/{pages/examples → examples}/login-v2.html +47 -16
  28. package/dist/{pages/examples → examples}/login.html +47 -16
  29. package/dist/{pages/examples → examples}/register-v2.html +47 -16
  30. package/dist/{pages/examples → examples}/register.html +47 -16
  31. package/dist/{pages/forms → forms}/general.html +76 -25
  32. package/dist/{pages/generate → generate}/theme.html +193 -24
  33. package/dist/{pages/index.html → index.html} +90 -57
  34. package/dist/{pages/index2.html → index2.html} +99 -48
  35. package/dist/{pages/index3.html → index3.html} +80 -29
  36. package/dist/js/adminlte.js +795 -345
  37. package/dist/js/adminlte.js.map +1 -1
  38. package/dist/js/adminlte.min.js +3 -3
  39. package/dist/js/adminlte.min.js.map +1 -1
  40. package/dist/{pages/layout → layout}/collapsed-sidebar.html +75 -24
  41. package/dist/layout/fixed-complete.html +883 -0
  42. package/dist/layout/fixed-footer.html +880 -0
  43. package/dist/layout/fixed-header.html +880 -0
  44. package/dist/{pages/layout → layout}/fixed-sidebar.html +76 -25
  45. package/dist/{pages/layout → layout}/layout-custom-area.html +76 -25
  46. package/dist/{pages/layout → layout}/layout-rtl.html +76 -25
  47. package/dist/{pages/layout → layout}/logo-switch.html +55 -24
  48. package/dist/{pages/layout → layout}/sidebar-mini.html +75 -24
  49. package/dist/{pages/layout → layout}/unfixed-sidebar.html +76 -25
  50. package/dist/{pages/tables → tables}/simple.html +76 -25
  51. package/dist/{pages/widgets → widgets}/cards.html +76 -25
  52. package/dist/{pages/widgets → widgets}/info-box.html +76 -25
  53. package/dist/{pages/widgets → widgets}/small-box.html +76 -25
  54. package/eslint.config.js +82 -0
  55. package/package.json +42 -37
  56. package/src/scss/_accessibility.scss +292 -0
  57. package/src/scss/_app-footer.scss +8 -0
  58. package/src/scss/_app-header.scss +8 -0
  59. package/src/scss/_app-sidebar.scss +12 -0
  60. package/src/scss/_table.scss +1 -9
  61. package/src/scss/_variables.scss +2 -1
  62. package/src/scss/adminlte.scss +3 -0
  63. package/src/ts/accessibility.ts +533 -0
  64. package/src/ts/adminlte.ts +48 -9
  65. package/src/ts/card-widget.ts +1 -2
  66. package/src/ts/push-menu.ts +1 -2
  67. package/src/ts/treeview.ts +13 -2
  68. package/src/ts/util/index.ts +39 -7
  69. package/.astro/content-assets.mjs +0 -1
  70. package/.astro/content-modules.mjs +0 -1
  71. package/.astro/content.d.ts +0 -166
  72. package/.astro/data-store.json +0 -1
  73. package/.astro/settings.json +0 -5
  74. package/.astro/types.d.ts +0 -2
  75. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  76. package/adminlte-v4.0.0-beta3.zip +0 -0
package/dist/{pages/forms → forms}/general.html RENAMED
@@ -4,50 +4,60 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | General Form Elements</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-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | General Form Elements" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- 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"
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"
18
23
  />
19
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-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="../css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
57
  </head>
48
58
  <!--end::Head-->
49
59
  <!--begin::Body-->
50
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
60
+ <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
51
61
  <!--begin::App Wrapper-->
52
62
  <div class="app-wrapper">
53
63
  <!--begin::Header-->
@@ -86,7 +96,7 @@
86
96
  <div class="d-flex">
87
97
  <div class="flex-shrink-0">
88
98
  <img
89
- src="../../../dist/assets/img/user1-128x128.jpg"
99
+ src="/assets/img/user1-128x128.jpg"
90
100
  alt="User Avatar"
91
101
  class="img-size-50 rounded-circle me-3"
92
102
  />
@@ -112,7 +122,7 @@
112
122
  <div class="d-flex">
113
123
  <div class="flex-shrink-0">
114
124
  <img
115
- src="../../../dist/assets/img/user8-128x128.jpg"
125
+ src="/assets/img/user8-128x128.jpg"
116
126
  alt="User Avatar"
117
127
  class="img-size-50 rounded-circle me-3"
118
128
  />
@@ -138,7 +148,7 @@
138
148
  <div class="d-flex">
139
149
  <div class="flex-shrink-0">
140
150
  <img
141
- src="../../../dist/assets/img/user3-128x128.jpg"
151
+ src="/assets/img/user3-128x128.jpg"
142
152
  alt="User Avatar"
143
153
  class="img-size-50 rounded-circle me-3"
144
154
  />
@@ -203,7 +213,7 @@
203
213
  <li class="nav-item dropdown user-menu">
204
214
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
205
215
  <img
206
- src="../../../dist/assets/img/user2-160x160.jpg"
216
+ src="/assets/img/user2-160x160.jpg"
207
217
  class="user-image rounded-circle shadow"
208
218
  alt="User Image"
209
219
  />
@@ -213,7 +223,7 @@
213
223
  <!--begin::User Image-->
214
224
  <li class="user-header text-bg-primary">
215
225
  <img
216
- src="../../../dist/assets/img/user2-160x160.jpg"
226
+ src="/assets/img/user2-160x160.jpg"
217
227
  class="rounded-circle shadow"
218
228
  alt="User Image"
219
229
  />
@@ -257,7 +267,7 @@
257
267
  <a href="../index.html" class="brand-link">
258
268
  <!--begin::Brand Image-->
259
269
  <img
260
- src="../../../dist/assets/img/AdminLTELogo.png"
270
+ src="/assets/img/AdminLTELogo.png"
261
271
  alt="AdminLTE Logo"
262
272
  class="brand-image opacity-75 shadow"
263
273
  />
@@ -276,8 +286,10 @@
276
286
  <ul
277
287
  class="nav sidebar-menu flex-column"
278
288
  data-lte-toggle="treeview"
279
- role="menu"
289
+ role="navigation"
290
+ aria-label="Main navigation"
280
291
  data-accordion="false"
292
+ id="navigation"
281
293
  >
282
294
  <li class="nav-item">
283
295
  <a href="#" class="nav-link">
@@ -365,6 +377,24 @@
365
377
  <p>Fixed Sidebar</p>
366
378
  </a>
367
379
  </li>
380
+ <li class="nav-item">
381
+ <a href="../layout/fixed-header.html" class="nav-link">
382
+ <i class="nav-icon bi bi-circle"></i>
383
+ <p>Fixed Header</p>
384
+ </a>
385
+ </li>
386
+ <li class="nav-item">
387
+ <a href="../layout/fixed-footer.html" class="nav-link">
388
+ <i class="nav-icon bi bi-circle"></i>
389
+ <p>Fixed Footer</p>
390
+ </a>
391
+ </li>
392
+ <li class="nav-item">
393
+ <a href="../layout/fixed-complete.html" class="nav-link">
394
+ <i class="nav-icon bi bi-circle"></i>
395
+ <p>Fixed Complete</p>
396
+ </a>
397
+ </li>
368
398
  <li class="nav-item">
369
399
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
400
  <i class="nav-icon bi bi-circle"></i>
@@ -1175,7 +1205,7 @@
1175
1205
  <!--end::To the end-->
1176
1206
  <!--begin::Copyright-->
1177
1207
  <strong>
1178
- Copyright &copy; 2014-2024&nbsp;
1208
+ Copyright &copy; 2014-2025&nbsp;
1179
1209
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1180
1210
  </strong>
1181
1211
  All rights reserved.
@@ -1187,24 +1217,21 @@
1187
1217
  <!--begin::Script-->
1188
1218
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1189
1219
  <script
1190
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
1191
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
1220
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
1192
1221
  crossorigin="anonymous"
1193
1222
  ></script>
1194
1223
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
1195
1224
  <script
1196
1225
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
1197
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
1198
1226
  crossorigin="anonymous"
1199
1227
  ></script>
1200
1228
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
1201
1229
  <script
1202
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
1203
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
1230
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
1204
1231
  crossorigin="anonymous"
1205
1232
  ></script>
1206
1233
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
1207
- <script src="../../../dist/js/adminlte.js"></script>
1234
+ <script src="../js/adminlte.js"></script>
1208
1235
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1209
1236
  <script>
1210
1237
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -1215,7 +1242,7 @@
1215
1242
  };
1216
1243
  document.addEventListener('DOMContentLoaded', function () {
1217
1244
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1218
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1245
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1219
1246
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1220
1247
  scrollbars: {
1221
1248
  theme: Default.scrollbarTheme,
@@ -1226,7 +1253,31 @@
1226
1253
  }
1227
1254
  });
1228
1255
  </script>
1229
- <!--end::OverlayScrollbars Configure-->
1256
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
1257
+ <script>
1258
+ document.addEventListener('DOMContentLoaded', () => {
1259
+ // Find the link tag for the main AdminLTE CSS file.
1260
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
1261
+ if (!cssLink) {
1262
+ return; // Exit if the link isn't found
1263
+ }
1264
+
1265
+ // Extract the base path from the CSS href.
1266
+ // e.g., from "../css/adminlte.css", we get "../"
1267
+ // e.g., from "./css/adminlte.css", we get "./"
1268
+ const cssHref = cssLink.getAttribute('href');
1269
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
1270
+
1271
+ // Find all images with absolute paths and fix them.
1272
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
1273
+ const originalSrc = img.getAttribute('src');
1274
+ if (originalSrc) {
1275
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
1276
+ img.src = deploymentPath + relativeSrc;
1277
+ }
1278
+ });
1279
+ });
1280
+ </script>
1230
1281
  <!--end::Script-->
1231
1282
  </body>
1232
1283
  <!--end::Body-->
package/dist/{pages/generate → generate}/theme.html RENAMED
@@ -4,50 +4,60 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Theme Customize</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-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Theme Customize" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- 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"
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"
18
23
  />
19
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-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="../css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
57
  </head>
48
58
  <!--end::Head-->
49
59
  <!--begin::Body-->
50
- <body class="sidebar-expand-lg bg-body-tertiary">
60
+ <body class="sidebar-expand-lg sidebar-open bg-body-tertiary">
51
61
  <!--begin::App Wrapper-->
52
62
  <div class="app-wrapper">
53
63
  <!--begin::Header-->
@@ -86,7 +96,7 @@
86
96
  <div class="d-flex">
87
97
  <div class="flex-shrink-0">
88
98
  <img
89
- src="../../../dist/assets/img/user1-128x128.jpg"
99
+ src="/assets/img/user1-128x128.jpg"
90
100
  alt="User Avatar"
91
101
  class="img-size-50 rounded-circle me-3"
92
102
  />
@@ -112,7 +122,7 @@
112
122
  <div class="d-flex">
113
123
  <div class="flex-shrink-0">
114
124
  <img
115
- src="../../../dist/assets/img/user8-128x128.jpg"
125
+ src="/assets/img/user8-128x128.jpg"
116
126
  alt="User Avatar"
117
127
  class="img-size-50 rounded-circle me-3"
118
128
  />
@@ -138,7 +148,7 @@
138
148
  <div class="d-flex">
139
149
  <div class="flex-shrink-0">
140
150
  <img
141
- src="../../../dist/assets/img/user3-128x128.jpg"
151
+ src="/assets/img/user3-128x128.jpg"
142
152
  alt="User Avatar"
143
153
  class="img-size-50 rounded-circle me-3"
144
154
  />
@@ -203,7 +213,7 @@
203
213
  <li class="nav-item dropdown user-menu">
204
214
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
205
215
  <img
206
- src="../../../dist/assets/img/user2-160x160.jpg"
216
+ src="/assets/img/user2-160x160.jpg"
207
217
  class="user-image rounded-circle shadow"
208
218
  alt="User Image"
209
219
  />
@@ -213,7 +223,7 @@
213
223
  <!--begin::User Image-->
214
224
  <li class="user-header text-bg-primary">
215
225
  <img
216
- src="../../../dist/assets/img/user2-160x160.jpg"
226
+ src="/assets/img/user2-160x160.jpg"
217
227
  class="rounded-circle shadow"
218
228
  alt="User Image"
219
229
  />
@@ -257,7 +267,7 @@
257
267
  <a href="../index.html" class="brand-link">
258
268
  <!--begin::Brand Image-->
259
269
  <img
260
- src="../../../dist/assets/img/AdminLTELogo.png"
270
+ src="/assets/img/AdminLTELogo.png"
261
271
  alt="AdminLTE Logo"
262
272
  class="brand-image opacity-75 shadow"
263
273
  />
@@ -530,6 +540,79 @@
530
540
  <!--end::Card Footer-->
531
541
  </div>
532
542
  <!--end::Card-->
543
+ <!--begin::Card-->
544
+ <div class="card mt-4">
545
+ <!--begin::Card Header-->
546
+ <div class="card-header">
547
+ <!--begin::Card Title-->
548
+ <h3 class="card-title">Footer Theme</h3>
549
+ <!--end::Card Title-->
550
+ <!--begin::Card Toolbar-->
551
+ <div class="card-tools">
552
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
553
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
554
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
555
+ </button>
556
+ <button
557
+ type="button"
558
+ class="btn btn-tool"
559
+ data-lte-toggle="card-remove"
560
+ title="Remove"
561
+ >
562
+ <i class="bi bi-x-lg"></i>
563
+ </button>
564
+ </div>
565
+ <!--end::Card Toolbar-->
566
+ </div>
567
+ <!--end::Card Header-->
568
+ <!--begin::Card Body-->
569
+ <div class="card-body">
570
+ <!--begin::Row-->
571
+ <div class="row">
572
+ <!--begin::Col-->
573
+ <div class="col-md-3">
574
+ <select
575
+ id="footer-color-modes"
576
+ class="form-select form-select-lg"
577
+ aria-label="Footer Color Mode Select"
578
+ >
579
+ <option value="">---Select---</option>
580
+ <option value="dark">Dark</option>
581
+ <option value="light">Light</option>
582
+ </select>
583
+ </div>
584
+ <!--end::Col-->
585
+ <!--begin::Col-->
586
+ <div class="col-md-3">
587
+ <select
588
+ id="footer-color"
589
+ class="form-select form-select-lg"
590
+ aria-label="Footer Color Select"
591
+ >
592
+ <option value="">---Select---</option>
593
+ </select>
594
+ </div>
595
+ <!--end::Col-->
596
+ <!--begin::Col-->
597
+ <div class="col-md-6"><div id="footer-color-code" class="w-100"></div></div>
598
+ <!--end::Col-->
599
+ </div>
600
+ <!--end::Row-->
601
+ </div>
602
+ <!--end::Card Body-->
603
+ <!--begin::Card Footer-->
604
+ <div class="card-footer">
605
+ Check more color in
606
+ <a
607
+ href="https://getbootstrap.com/docs/5.3/utilities/background/"
608
+ target="_blank"
609
+ class="link-primary"
610
+ >Bootstrap Background Colors</a
611
+ >
612
+ </div>
613
+ <!--end::Card Footer-->
614
+ </div>
615
+ <!--end::Card-->
533
616
  </div>
534
617
  <!--end::Col-->
535
618
  </div>
@@ -547,7 +630,7 @@
547
630
  <!--end::To the end-->
548
631
  <!--begin::Copyright-->
549
632
  <strong>
550
- Copyright &copy; 2014-2024&nbsp;
633
+ Copyright &copy; 2014-2025&nbsp;
551
634
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
552
635
  </strong>
553
636
  All rights reserved.
@@ -559,24 +642,21 @@
559
642
  <!--begin::Script-->
560
643
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
561
644
  <script
562
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
563
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
645
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
564
646
  crossorigin="anonymous"
565
647
  ></script>
566
648
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
567
649
  <script
568
650
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
569
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
570
651
  crossorigin="anonymous"
571
652
  ></script>
572
653
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
573
654
  <script
574
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
575
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
655
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
576
656
  crossorigin="anonymous"
577
657
  ></script>
578
658
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
579
- <script src="../../../dist/js/adminlte.js"></script>
659
+ <script src="../js/adminlte.js"></script>
580
660
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
581
661
  <script>
582
662
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -587,7 +667,7 @@
587
667
  };
588
668
  document.addEventListener('DOMContentLoaded', function () {
589
669
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
590
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
670
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
591
671
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
592
672
  scrollbars: {
593
673
  theme: Default.scrollbarTheme,
@@ -598,7 +678,31 @@
598
678
  }
599
679
  });
600
680
  </script>
601
- <!--end::OverlayScrollbars Configure-->
681
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
682
+ <script>
683
+ document.addEventListener('DOMContentLoaded', () => {
684
+ // Find the link tag for the main AdminLTE CSS file.
685
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
686
+ if (!cssLink) {
687
+ return; // Exit if the link isn't found
688
+ }
689
+
690
+ // Extract the base path from the CSS href.
691
+ // e.g., from "../css/adminlte.css", we get "../"
692
+ // e.g., from "./css/adminlte.css", we get "./"
693
+ const cssHref = cssLink.getAttribute('href');
694
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
695
+
696
+ // Find all images with absolute paths and fix them.
697
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
698
+ const originalSrc = img.getAttribute('src');
699
+ if (originalSrc) {
700
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
701
+ img.src = deploymentPath + relativeSrc;
702
+ }
703
+ });
704
+ });
705
+ </script>
602
706
  <script>
603
707
  document.addEventListener('DOMContentLoaded', () => {
604
708
  const appSidebar = document.querySelector('.app-sidebar');
@@ -730,6 +834,71 @@
730
834
  updateNavbar();
731
835
  });
732
836
  });
837
+
838
+ document.addEventListener('DOMContentLoaded', () => {
839
+ const appFooter = document.querySelector('.app-footer');
840
+ const footerColorModes = document.querySelector('#footer-color-modes');
841
+ const footerColor = document.querySelector('#footer-color');
842
+ const footerColorCode = document.querySelector('#footer-color-code');
843
+
844
+ const themeBg = [
845
+ 'bg-primary',
846
+ 'bg-primary-subtle',
847
+ 'bg-secondary',
848
+ 'bg-secondary-subtle',
849
+ 'bg-success',
850
+ 'bg-success-subtle',
851
+ 'bg-danger',
852
+ 'bg-danger-subtle',
853
+ 'bg-warning',
854
+ 'bg-warning-subtle',
855
+ 'bg-info',
856
+ 'bg-info-subtle',
857
+ 'bg-light',
858
+ 'bg-light-subtle',
859
+ 'bg-dark',
860
+ 'bg-dark-subtle',
861
+ 'bg-body-secondary',
862
+ 'bg-body-tertiary',
863
+ 'bg-body',
864
+ 'bg-black',
865
+ 'bg-white',
866
+ 'bg-transparent',
867
+ ];
868
+
869
+ // loop through each option themeBg array
870
+ document.querySelector('#footer-color').innerHTML = themeBg.map((bg) => {
871
+ // return option element with value and text
872
+ return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
873
+ });
874
+
875
+ let footerColorMode = '';
876
+ let footerBg = '';
877
+
878
+ function updateFooter() {
879
+ appFooter.setAttribute('data-bs-theme', footerColorMode);
880
+ footerColorCode.innerHTML = `<pre><code class="language-html">&lt;footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}"&gt;...&lt;/footer&gt;</code></pre>`;
881
+ }
882
+
883
+ footerColorModes.addEventListener('input', (event) => {
884
+ footerColorMode = event.target.value;
885
+ updateFooter();
886
+ });
887
+
888
+ footerColor.addEventListener('input', (event) => {
889
+ footerBg = event.target.value;
890
+
891
+ themeBg.forEach((className) => {
892
+ appFooter.classList.remove(className);
893
+ });
894
+
895
+ if (themeBg.includes(footerBg)) {
896
+ appFooter.classList.add(footerBg);
897
+ }
898
+
899
+ updateFooter();
900
+ });
901
+ });
733
902
  </script>
734
903
  <!--end::Script-->
735
904
  </body>