admin-lte 4.0.0-beta1 → 4.0.0-beta3

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 (166) hide show
  1. package/.astro/content-assets.mjs +1 -0
  2. package/.astro/content-modules.mjs +1 -0
  3. package/.astro/content.d.ts +166 -0
  4. package/.astro/data-store.json +1 -0
  5. package/.astro/settings.json +5 -0
  6. package/.astro/types.d.ts +2 -0
  7. package/.prettierrc +6 -0
  8. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  9. package/adminlte-v4.0.0-beta3.zip +0 -0
  10. package/dist/css/adminlte.css +55 -127
  11. package/dist/css/adminlte.css.map +1 -1
  12. package/dist/css/adminlte.min.css +2 -2
  13. package/dist/css/adminlte.min.css.map +1 -1
  14. package/dist/css/adminlte.rtl.css +55 -127
  15. package/dist/css/adminlte.rtl.css.map +1 -1
  16. package/dist/css/adminlte.rtl.min.css +2 -2
  17. package/dist/css/adminlte.rtl.min.css.map +1 -1
  18. package/dist/js/adminlte.js +2 -2
  19. package/dist/js/adminlte.js.map +1 -1
  20. package/dist/js/adminlte.min.js +2 -2
  21. package/dist/js/adminlte.min.js.map +1 -1
  22. package/dist/pages/UI/general.html +1886 -883
  23. package/dist/pages/UI/icons.html +818 -0
  24. package/dist/pages/UI/timeline.html +894 -490
  25. package/dist/pages/docs/browser-support.html +839 -434
  26. package/dist/pages/docs/color-mode.html +985 -539
  27. package/dist/pages/docs/components/main-header.html +1016 -535
  28. package/dist/pages/docs/components/main-sidebar.html +831 -431
  29. package/dist/pages/docs/faq.html +831 -432
  30. package/dist/pages/docs/how-to-contribute.html +904 -472
  31. package/dist/pages/docs/introduction.html +883 -451
  32. package/dist/pages/docs/javascript/treeview.html +837 -443
  33. package/dist/pages/docs/layout.html +835 -473
  34. package/dist/pages/docs/license.html +828 -434
  35. package/dist/pages/examples/lockscreen.html +129 -66
  36. package/dist/pages/examples/login-v2.html +157 -85
  37. package/dist/pages/examples/login.html +147 -80
  38. package/dist/pages/examples/register-v2.html +167 -88
  39. package/dist/pages/examples/register.html +152 -81
  40. package/dist/pages/forms/general.html +1223 -599
  41. package/dist/pages/generate/theme.html +737 -0
  42. package/dist/pages/index.html +1400 -793
  43. package/dist/pages/index2.html +1852 -1051
  44. package/dist/pages/index3.html +1183 -684
  45. package/dist/pages/layout/collapsed-sidebar.html +829 -440
  46. package/dist/pages/layout/fixed-sidebar.html +829 -440
  47. package/dist/pages/layout/layout-custom-area.html +862 -0
  48. package/dist/pages/layout/layout-rtl.html +829 -440
  49. package/dist/pages/layout/logo-switch.html +486 -233
  50. package/dist/pages/layout/sidebar-mini.html +829 -440
  51. package/dist/pages/layout/unfixed-sidebar.html +827 -439
  52. package/dist/pages/tables/simple.html +1079 -686
  53. package/dist/pages/widgets/cards.html +1034 -544
  54. package/dist/pages/widgets/info-box.html +1052 -571
  55. package/dist/pages/widgets/small-box.html +914 -474
  56. package/package.json +25 -24
  57. package/src/scss/_app-content.scss +0 -49
  58. package/src/scss/_app-main.scss +21 -1
  59. package/src/scss/_app-sidebar.scss +1 -6
  60. package/src/scss/_bootstrap-variables.scss +11 -9
  61. package/src/scss/_compact-mode.scss +0 -26
  62. package/src/scss/_variables.scss +19 -7
  63. package/src/scss/adminlte.scss +1 -1
  64. package/src/ts/push-menu.ts +1 -1
  65. package/.bundlewatch.config.json +0 -28
  66. package/.cache/.eslintcache +0 -1
  67. package/.cache/.stylelintcache +0 -1
  68. package/.editorconfig +0 -14
  69. package/.eslintignore +0 -7
  70. package/.eslintrc.json +0 -120
  71. package/.gitattributes +0 -6
  72. package/.gitpod.yml +0 -6
  73. package/.stylelintignore +0 -8
  74. package/.stylelintrc.json +0 -47
  75. package/composer.json +0 -25
  76. package/dist/pages/layout/fixed-complete.html +0 -541
  77. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  78. package/src/assets/img/AdminLTELogo.png +0 -0
  79. package/src/assets/img/avatar.png +0 -0
  80. package/src/assets/img/avatar2.png +0 -0
  81. package/src/assets/img/avatar3.png +0 -0
  82. package/src/assets/img/avatar4.png +0 -0
  83. package/src/assets/img/avatar5.png +0 -0
  84. package/src/assets/img/boxed-bg.jpg +0 -0
  85. package/src/assets/img/boxed-bg.png +0 -0
  86. package/src/assets/img/credit/american-express.png +0 -0
  87. package/src/assets/img/credit/cirrus.png +0 -0
  88. package/src/assets/img/credit/mastercard.png +0 -0
  89. package/src/assets/img/credit/paypal.png +0 -0
  90. package/src/assets/img/credit/paypal2.png +0 -0
  91. package/src/assets/img/credit/visa.png +0 -0
  92. package/src/assets/img/default-150x150.png +0 -0
  93. package/src/assets/img/icons.png +0 -0
  94. package/src/assets/img/photo1.png +0 -0
  95. package/src/assets/img/photo2.png +0 -0
  96. package/src/assets/img/photo3.jpg +0 -0
  97. package/src/assets/img/photo4.jpg +0 -0
  98. package/src/assets/img/prod-1.jpg +0 -0
  99. package/src/assets/img/prod-2.jpg +0 -0
  100. package/src/assets/img/prod-3.jpg +0 -0
  101. package/src/assets/img/prod-4.jpg +0 -0
  102. package/src/assets/img/prod-5.jpg +0 -0
  103. package/src/assets/img/user1-128x128.jpg +0 -0
  104. package/src/assets/img/user2-160x160.jpg +0 -0
  105. package/src/assets/img/user3-128x128.jpg +0 -0
  106. package/src/assets/img/user4-128x128.jpg +0 -0
  107. package/src/assets/img/user5-128x128.jpg +0 -0
  108. package/src/assets/img/user6-128x128.jpg +0 -0
  109. package/src/assets/img/user7-128x128.jpg +0 -0
  110. package/src/assets/img/user8-128x128.jpg +0 -0
  111. package/src/config/assets.config.mjs +0 -8
  112. package/src/config/astro.config.mjs +0 -19
  113. package/src/config/postcss.config.mjs +0 -15
  114. package/src/config/rollup.config.js +0 -20
  115. package/src/html/.eslintrc.json +0 -24
  116. package/src/html/.prettierrc.js +0 -11
  117. package/src/html/.tsconfig.json +0 -4
  118. package/src/html/components/_head.astro +0 -37
  119. package/src/html/components/_scripts.astro +0 -39
  120. package/src/html/components/dashboard/_footer.astro +0 -18
  121. package/src/html/components/dashboard/_sidenav.astro +0 -562
  122. package/src/html/components/dashboard/_topbar.astro +0 -221
  123. package/src/html/components/docs/browser-support.mdx +0 -23
  124. package/src/html/components/docs/color-mode.mdx +0 -169
  125. package/src/html/components/docs/components/main-header.mdx +0 -198
  126. package/src/html/components/docs/components/main-sidebar.mdx +0 -129
  127. package/src/html/components/docs/faq.mdx +0 -11
  128. package/src/html/components/docs/how-to-contribute.mdx +0 -34
  129. package/src/html/components/docs/introduction.mdx +0 -60
  130. package/src/html/components/docs/license.mdx +0 -9
  131. package/src/html/components/javascript/treeview.mdx +0 -39
  132. package/src/html/env.d.ts +0 -1
  133. package/src/html/pages/UI/general.astro +0 -1451
  134. package/src/html/pages/UI/timeline.astro +0 -221
  135. package/src/html/pages/docs/browser-support.astro +0 -71
  136. package/src/html/pages/docs/color-mode.astro +0 -273
  137. package/src/html/pages/docs/components/main-header.astro +0 -320
  138. package/src/html/pages/docs/components/main-sidebar.astro +0 -71
  139. package/src/html/pages/docs/faq.astro +0 -71
  140. package/src/html/pages/docs/how-to-contribute.astro +0 -71
  141. package/src/html/pages/docs/introduction.astro +0 -71
  142. package/src/html/pages/docs/javascript/treeview.astro +0 -71
  143. package/src/html/pages/docs/layout.astro +0 -120
  144. package/src/html/pages/docs/license.astro +0 -71
  145. package/src/html/pages/examples/lockscreen.astro +0 -63
  146. package/src/html/pages/examples/login-v2.astro +0 -109
  147. package/src/html/pages/examples/login.astro +0 -99
  148. package/src/html/pages/examples/register-v2.astro +0 -116
  149. package/src/html/pages/examples/register.astro +0 -102
  150. package/src/html/pages/forms/general.astro +0 -624
  151. package/src/html/pages/index.astro +0 -799
  152. package/src/html/pages/index2.astro +0 -1373
  153. package/src/html/pages/index3.astro +0 -513
  154. package/src/html/pages/layout/collapsed-sidebar.astro +0 -110
  155. package/src/html/pages/layout/fixed-complete.astro +0 -209
  156. package/src/html/pages/layout/fixed-sidebar.astro +0 -109
  157. package/src/html/pages/layout/layout-rtl.astro +0 -109
  158. package/src/html/pages/layout/logo-switch.astro +0 -212
  159. package/src/html/pages/layout/sidebar-mini.astro +0 -108
  160. package/src/html/pages/layout/unfixed-sidebar.astro +0 -107
  161. package/src/html/pages/tables/simple.astro +0 -472
  162. package/src/html/pages/widgets/cards.astro +0 -373
  163. package/src/html/pages/widgets/info-box.astro +0 -413
  164. package/src/html/pages/widgets/small-box.astro +0 -182
  165. package/src/utils/index.js +0 -28
  166. package/tsconfig.json +0 -31
package/dist/pages/UI/general.html CHANGED
@@ -1,895 +1,1898 @@
1
- <!DOCTYPE html>
2
- <html lang="en"> <!--begin::Head-->
3
-
4
- <head>
5
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
- <title>AdminLTE 4 | General UI Elements</title><!--begin::Primary Meta Tags-->
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <meta name="title" content="AdminLTE 4 | General UI Elements">
9
- <meta name="author" content="ColorlibHQ">
10
- <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
11
- <meta name="keywords" 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"><!--end::Primary Meta Tags--><!--begin::Fonts-->
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css" integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous"><!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous"><!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
14
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous"><!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
15
- <link rel="stylesheet" href="../../../dist/css/adminlte.css"><!--end::Required Plugin(AdminLTE)-->
16
- </head> <!--end::Head--> <!--begin::Body-->
17
-
18
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <!--begin::App Wrapper-->
19
- <div class="app-wrapper"> <!--begin::Header-->
20
- <nav class="app-header navbar navbar-expand bg-body"> <!--begin::Container-->
21
- <div class="container-fluid"> <!--begin::Start Navbar Links-->
22
- <ul class="navbar-nav">
23
- <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i class="bi bi-list"></i> </a> </li>
24
- <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
25
- <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li>
26
- </ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
27
- <ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
28
- <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="bi bi-search"></i> </a> </li> <!--end::Navbar Search--> <!--begin::Messages Dropdown Menu-->
29
- <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i class="bi bi-chat-text"></i> <span class="navbar-badge badge text-bg-danger">3</span> </a>
30
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <a href="#" class="dropdown-item"> <!--begin::Message-->
31
- <div class="d-flex">
32
- <div class="flex-shrink-0"> <img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
33
- <div class="flex-grow-1">
34
- <h3 class="dropdown-item-title">
35
- Brad Diesel
36
- <span class="float-end fs-7 text-danger"><i class="bi bi-star-fill"></i></span>
37
- </h3>
38
- <p class="fs-7">Call me whenever you can...</p>
39
- <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
40
- </p>
41
- </div>
42
- </div> <!--end::Message-->
43
- </a>
44
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!--begin::Message-->
45
- <div class="d-flex">
46
- <div class="flex-shrink-0"> <img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
47
- <div class="flex-grow-1">
48
- <h3 class="dropdown-item-title">
49
- John Pierce
50
- <span class="float-end fs-7 text-secondary"> <i class="bi bi-star-fill"></i> </span>
51
- </h3>
52
- <p class="fs-7">I got your message bro</p>
53
- <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
54
- </p>
55
- </div>
56
- </div> <!--end::Message-->
57
- </a>
58
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!--begin::Message-->
59
- <div class="d-flex">
60
- <div class="flex-shrink-0"> <img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
61
- <div class="flex-grow-1">
62
- <h3 class="dropdown-item-title">
63
- Nora Silvester
64
- <span class="float-end fs-7 text-warning"> <i class="bi bi-star-fill"></i> </span>
65
- </h3>
66
- <p class="fs-7">The subject goes here</p>
67
- <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
68
- </p>
69
- </div>
70
- </div> <!--end::Message-->
71
- </a>
72
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <!--begin::Head-->
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
+ <title>AdminLTE 4 | General UI Elements</title>
7
+ <!--begin::Primary Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
+ <meta name="title" content="AdminLTE 4 | General UI Elements" />
10
+ <meta name="author" content="ColorlibHQ" />
11
+ <meta
12
+ name="description"
13
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
14
+ />
15
+ <meta
16
+ 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"
18
+ />
19
+ <!--end::Primary Meta Tags-->
20
+ <!--begin::Fonts-->
21
+ <link
22
+ rel="stylesheet"
23
+ href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
+ integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
+ crossorigin="anonymous"
26
+ />
27
+ <!--end::Fonts-->
28
+ <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
+ <link
30
+ rel="stylesheet"
31
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
+ integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
33
+ crossorigin="anonymous"
34
+ />
35
+ <!--end::Third Party Plugin(OverlayScrollbars)-->
36
+ <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
+ <link
38
+ 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="
41
+ crossorigin="anonymous"
42
+ />
43
+ <!--end::Third Party Plugin(Bootstrap Icons)-->
44
+ <!--begin::Required Plugin(AdminLTE)-->
45
+ <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
46
+ <!--end::Required Plugin(AdminLTE)-->
47
+ </head>
48
+ <!--end::Head-->
49
+ <!--begin::Body-->
50
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
51
+ <!--begin::App Wrapper-->
52
+ <div class="app-wrapper">
53
+ <!--begin::Header-->
54
+ <nav class="app-header navbar navbar-expand bg-body">
55
+ <!--begin::Container-->
56
+ <div class="container-fluid">
57
+ <!--begin::Start Navbar Links-->
58
+ <ul class="navbar-nav">
59
+ <li class="nav-item">
60
+ <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
61
+ <i class="bi bi-list"></i>
62
+ </a>
63
+ </li>
64
+ <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
65
+ <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
66
+ </ul>
67
+ <!--end::Start Navbar Links-->
68
+ <!--begin::End Navbar Links-->
69
+ <ul class="navbar-nav ms-auto">
70
+ <!--begin::Navbar Search-->
71
+ <li class="nav-item">
72
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
73
+ <i class="bi bi-search"></i>
74
+ </a>
75
+ </li>
76
+ <!--end::Navbar Search-->
77
+ <!--begin::Messages Dropdown Menu-->
78
+ <li class="nav-item dropdown">
79
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
80
+ <i class="bi bi-chat-text"></i>
81
+ <span class="navbar-badge badge text-bg-danger">3</span>
82
+ </a>
83
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
84
+ <a href="#" class="dropdown-item">
85
+ <!--begin::Message-->
86
+ <div class="d-flex">
87
+ <div class="flex-shrink-0">
88
+ <img
89
+ src="../../../dist/assets/img/user1-128x128.jpg"
90
+ alt="User Avatar"
91
+ class="img-size-50 rounded-circle me-3"
92
+ />
93
+ </div>
94
+ <div class="flex-grow-1">
95
+ <h3 class="dropdown-item-title">
96
+ Brad Diesel
97
+ <span class="float-end fs-7 text-danger"
98
+ ><i class="bi bi-star-fill"></i
99
+ ></span>
100
+ </h3>
101
+ <p class="fs-7">Call me whenever you can...</p>
102
+ <p class="fs-7 text-secondary">
103
+ <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
104
+ </p>
105
+ </div>
106
+ </div>
107
+ <!--end::Message-->
108
+ </a>
109
+ <div class="dropdown-divider"></div>
110
+ <a href="#" class="dropdown-item">
111
+ <!--begin::Message-->
112
+ <div class="d-flex">
113
+ <div class="flex-shrink-0">
114
+ <img
115
+ src="../../../dist/assets/img/user8-128x128.jpg"
116
+ alt="User Avatar"
117
+ class="img-size-50 rounded-circle me-3"
118
+ />
119
+ </div>
120
+ <div class="flex-grow-1">
121
+ <h3 class="dropdown-item-title">
122
+ John Pierce
123
+ <span class="float-end fs-7 text-secondary">
124
+ <i class="bi bi-star-fill"></i>
125
+ </span>
126
+ </h3>
127
+ <p class="fs-7">I got your message bro</p>
128
+ <p class="fs-7 text-secondary">
129
+ <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
130
+ </p>
131
+ </div>
132
+ </div>
133
+ <!--end::Message-->
134
+ </a>
135
+ <div class="dropdown-divider"></div>
136
+ <a href="#" class="dropdown-item">
137
+ <!--begin::Message-->
138
+ <div class="d-flex">
139
+ <div class="flex-shrink-0">
140
+ <img
141
+ src="../../../dist/assets/img/user3-128x128.jpg"
142
+ alt="User Avatar"
143
+ class="img-size-50 rounded-circle me-3"
144
+ />
145
+ </div>
146
+ <div class="flex-grow-1">
147
+ <h3 class="dropdown-item-title">
148
+ Nora Silvester
149
+ <span class="float-end fs-7 text-warning">
150
+ <i class="bi bi-star-fill"></i>
151
+ </span>
152
+ </h3>
153
+ <p class="fs-7">The subject goes here</p>
154
+ <p class="fs-7 text-secondary">
155
+ <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
156
+ </p>
157
+ </div>
158
+ </div>
159
+ <!--end::Message-->
160
+ </a>
161
+ <div class="dropdown-divider"></div>
162
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
163
+ </div>
164
+ </li>
165
+ <!--end::Messages Dropdown Menu-->
166
+ <!--begin::Notifications Dropdown Menu-->
167
+ <li class="nav-item dropdown">
168
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
169
+ <i class="bi bi-bell-fill"></i>
170
+ <span class="navbar-badge badge text-bg-warning">15</span>
171
+ </a>
172
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
173
+ <span class="dropdown-item dropdown-header">15 Notifications</span>
174
+ <div class="dropdown-divider"></div>
175
+ <a href="#" class="dropdown-item">
176
+ <i class="bi bi-envelope me-2"></i> 4 new messages
177
+ <span class="float-end text-secondary fs-7">3 mins</span>
178
+ </a>
179
+ <div class="dropdown-divider"></div>
180
+ <a href="#" class="dropdown-item">
181
+ <i class="bi bi-people-fill me-2"></i> 8 friend requests
182
+ <span class="float-end text-secondary fs-7">12 hours</span>
183
+ </a>
184
+ <div class="dropdown-divider"></div>
185
+ <a href="#" class="dropdown-item">
186
+ <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
187
+ <span class="float-end text-secondary fs-7">2 days</span>
188
+ </a>
189
+ <div class="dropdown-divider"></div>
190
+ <a href="#" class="dropdown-item dropdown-footer"> See All Notifications </a>
191
+ </div>
192
+ </li>
193
+ <!--end::Notifications Dropdown Menu-->
194
+ <!--begin::Fullscreen Toggle-->
195
+ <li class="nav-item">
196
+ <a class="nav-link" href="#" data-lte-toggle="fullscreen">
197
+ <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
198
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
199
+ </a>
200
+ </li>
201
+ <!--end::Fullscreen Toggle-->
202
+ <!--begin::User Menu Dropdown-->
203
+ <li class="nav-item dropdown user-menu">
204
+ <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
205
+ <img
206
+ src="../../../dist/assets/img/user2-160x160.jpg"
207
+ class="user-image rounded-circle shadow"
208
+ alt="User Image"
209
+ />
210
+ <span class="d-none d-md-inline">Alexander Pierce</span>
211
+ </a>
212
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
213
+ <!--begin::User Image-->
214
+ <li class="user-header text-bg-primary">
215
+ <img
216
+ src="../../../dist/assets/img/user2-160x160.jpg"
217
+ class="rounded-circle shadow"
218
+ alt="User Image"
219
+ />
220
+ <p>
221
+ Alexander Pierce - Web Developer
222
+ <small>Member since Nov. 2023</small>
223
+ </p>
224
+ </li>
225
+ <!--end::User Image-->
226
+ <!--begin::Menu Body-->
227
+ <li class="user-body">
228
+ <!--begin::Row-->
229
+ <div class="row">
230
+ <div class="col-4 text-center"><a href="#">Followers</a></div>
231
+ <div class="col-4 text-center"><a href="#">Sales</a></div>
232
+ <div class="col-4 text-center"><a href="#">Friends</a></div>
233
+ </div>
234
+ <!--end::Row-->
235
+ </li>
236
+ <!--end::Menu Body-->
237
+ <!--begin::Menu Footer-->
238
+ <li class="user-footer">
239
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
240
+ <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
241
+ </li>
242
+ <!--end::Menu Footer-->
243
+ </ul>
244
+ </li>
245
+ <!--end::User Menu Dropdown-->
246
+ </ul>
247
+ <!--end::End Navbar Links-->
248
+ </div>
249
+ <!--end::Container-->
250
+ </nav>
251
+ <!--end::Header-->
252
+ <!--begin::Sidebar-->
253
+ <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
254
+ <!--begin::Sidebar Brand-->
255
+ <div class="sidebar-brand">
256
+ <!--begin::Brand Link-->
257
+ <a href="../index.html" class="brand-link">
258
+ <!--begin::Brand Image-->
259
+ <img
260
+ src="../../../dist/assets/img/AdminLTELogo.png"
261
+ alt="AdminLTE Logo"
262
+ class="brand-image opacity-75 shadow"
263
+ />
264
+ <!--end::Brand Image-->
265
+ <!--begin::Brand Text-->
266
+ <span class="brand-text fw-light">AdminLTE 4</span>
267
+ <!--end::Brand Text-->
268
+ </a>
269
+ <!--end::Brand Link-->
270
+ </div>
271
+ <!--end::Sidebar Brand-->
272
+ <!--begin::Sidebar Wrapper-->
273
+ <div class="sidebar-wrapper">
274
+ <nav class="mt-2">
275
+ <!--begin::Sidebar Menu-->
276
+ <ul
277
+ class="nav sidebar-menu flex-column"
278
+ data-lte-toggle="treeview"
279
+ role="menu"
280
+ data-accordion="false"
281
+ >
282
+ <li class="nav-item">
283
+ <a href="#" class="nav-link">
284
+ <i class="nav-icon bi bi-speedometer"></i>
285
+ <p>
286
+ Dashboard
287
+ <i class="nav-arrow bi bi-chevron-right"></i>
288
+ </p>
289
+ </a>
290
+ <ul class="nav nav-treeview">
291
+ <li class="nav-item">
292
+ <a href="../index.html" class="nav-link">
293
+ <i class="nav-icon bi bi-circle"></i>
294
+ <p>Dashboard v1</p>
295
+ </a>
296
+ </li>
297
+ <li class="nav-item">
298
+ <a href="../index2.html" class="nav-link">
299
+ <i class="nav-icon bi bi-circle"></i>
300
+ <p>Dashboard v2</p>
301
+ </a>
302
+ </li>
303
+ <li class="nav-item">
304
+ <a href="../index3.html" class="nav-link">
305
+ <i class="nav-icon bi bi-circle"></i>
306
+ <p>Dashboard v3</p>
307
+ </a>
308
+ </li>
309
+ </ul>
310
+ </li>
311
+ <li class="nav-item">
312
+ <a href="../generate/theme.html" class="nav-link">
313
+ <i class="nav-icon bi bi-palette"></i>
314
+ <p>Theme Generate</p>
315
+ </a>
316
+ </li>
317
+ <li class="nav-item">
318
+ <a href="#" class="nav-link">
319
+ <i class="nav-icon bi bi-box-seam-fill"></i>
320
+ <p>
321
+ Widgets
322
+ <i class="nav-arrow bi bi-chevron-right"></i>
323
+ </p>
324
+ </a>
325
+ <ul class="nav nav-treeview">
326
+ <li class="nav-item">
327
+ <a href="../widgets/small-box.html" class="nav-link">
328
+ <i class="nav-icon bi bi-circle"></i>
329
+ <p>Small Box</p>
330
+ </a>
331
+ </li>
332
+ <li class="nav-item">
333
+ <a href="../widgets/info-box.html" class="nav-link">
334
+ <i class="nav-icon bi bi-circle"></i>
335
+ <p>info Box</p>
336
+ </a>
337
+ </li>
338
+ <li class="nav-item">
339
+ <a href="../widgets/cards.html" class="nav-link">
340
+ <i class="nav-icon bi bi-circle"></i>
341
+ <p>Cards</p>
342
+ </a>
343
+ </li>
344
+ </ul>
345
+ </li>
346
+ <li class="nav-item">
347
+ <a href="#" class="nav-link">
348
+ <i class="nav-icon bi bi-clipboard-fill"></i>
349
+ <p>
350
+ Layout Options
351
+ <span class="nav-badge badge text-bg-secondary me-3">6</span>
352
+ <i class="nav-arrow bi bi-chevron-right"></i>
353
+ </p>
354
+ </a>
355
+ <ul class="nav nav-treeview">
356
+ <li class="nav-item">
357
+ <a href="../layout/unfixed-sidebar.html" class="nav-link">
358
+ <i class="nav-icon bi bi-circle"></i>
359
+ <p>Default Sidebar</p>
360
+ </a>
361
+ </li>
362
+ <li class="nav-item">
363
+ <a href="../layout/fixed-sidebar.html" class="nav-link">
364
+ <i class="nav-icon bi bi-circle"></i>
365
+ <p>Fixed Sidebar</p>
366
+ </a>
367
+ </li>
368
+ <li class="nav-item">
369
+ <a href="../layout/layout-custom-area.html" class="nav-link">
370
+ <i class="nav-icon bi bi-circle"></i>
371
+ <p>Layout <small>+ Custom Area </small></p>
372
+ </a>
373
+ </li>
374
+ <li class="nav-item">
375
+ <a href="../layout/sidebar-mini.html" class="nav-link">
376
+ <i class="nav-icon bi bi-circle"></i>
377
+ <p>Sidebar Mini</p>
378
+ </a>
379
+ </li>
380
+ <li class="nav-item">
381
+ <a href="../layout/collapsed-sidebar.html" class="nav-link">
382
+ <i class="nav-icon bi bi-circle"></i>
383
+ <p>Sidebar Mini <small>+ Collapsed</small></p>
384
+ </a>
385
+ </li>
386
+ <li class="nav-item">
387
+ <a href="../layout/logo-switch.html" class="nav-link">
388
+ <i class="nav-icon bi bi-circle"></i>
389
+ <p>Sidebar Mini <small>+ Logo Switch</small></p>
390
+ </a>
391
+ </li>
392
+ <li class="nav-item">
393
+ <a href="../layout/layout-rtl.html" class="nav-link">
394
+ <i class="nav-icon bi bi-circle"></i>
395
+ <p>Layout RTL</p>
396
+ </a>
397
+ </li>
398
+ </ul>
399
+ </li>
400
+ <li class="nav-item menu-open">
401
+ <a href="#" class="nav-link active">
402
+ <i class="nav-icon bi bi-tree-fill"></i>
403
+ <p>
404
+ UI Elements
405
+ <i class="nav-arrow bi bi-chevron-right"></i>
406
+ </p>
407
+ </a>
408
+ <ul class="nav nav-treeview">
409
+ <li class="nav-item">
410
+ <a href="../UI/general.html" class="nav-link active">
411
+ <i class="nav-icon bi bi-circle"></i>
412
+ <p>General</p>
413
+ </a>
414
+ </li>
415
+ <li class="nav-item">
416
+ <a href="../UI/icons.html" class="nav-link">
417
+ <i class="nav-icon bi bi-circle"></i>
418
+ <p>Icons</p>
419
+ </a>
420
+ </li>
421
+ <li class="nav-item">
422
+ <a href="../UI/timeline.html" class="nav-link">
423
+ <i class="nav-icon bi bi-circle"></i>
424
+ <p>Timeline</p>
425
+ </a>
426
+ </li>
427
+ </ul>
428
+ </li>
429
+ <li class="nav-item">
430
+ <a href="#" class="nav-link">
431
+ <i class="nav-icon bi bi-pencil-square"></i>
432
+ <p>
433
+ Forms
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="../forms/general.html" class="nav-link active">
440
+ <i class="nav-icon bi bi-circle"></i>
441
+ <p>General Elements</p>
442
+ </a>
443
+ </li>
444
+ </ul>
445
+ </li>
446
+ <li class="nav-item">
447
+ <a href="#" class="nav-link">
448
+ <i class="nav-icon bi bi-table"></i>
449
+ <p>
450
+ Tables
451
+ <i class="nav-arrow bi bi-chevron-right"></i>
452
+ </p>
453
+ </a>
454
+ <ul class="nav nav-treeview">
455
+ <li class="nav-item">
456
+ <a href="../tables/simple.html" class="nav-link">
457
+ <i class="nav-icon bi bi-circle"></i>
458
+ <p>Simple Tables</p>
459
+ </a>
460
+ </li>
461
+ </ul>
462
+ </li>
463
+ <li class="nav-header">EXAMPLES</li>
464
+ <li class="nav-item">
465
+ <a href="#" class="nav-link">
466
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
467
+ <p>
468
+ Auth
469
+ <i class="nav-arrow bi bi-chevron-right"></i>
470
+ </p>
471
+ </a>
472
+ <ul class="nav nav-treeview">
473
+ <li class="nav-item">
474
+ <a href="#" class="nav-link">
475
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
476
+ <p>
477
+ Version 1
478
+ <i class="nav-arrow bi bi-chevron-right"></i>
479
+ </p>
480
+ </a>
481
+ <ul class="nav nav-treeview">
482
+ <li class="nav-item">
483
+ <a href="../examples/login.html" class="nav-link">
484
+ <i class="nav-icon bi bi-circle"></i>
485
+ <p>Login</p>
486
+ </a>
487
+ </li>
488
+ <li class="nav-item">
489
+ <a href="../examples/register.html" class="nav-link">
490
+ <i class="nav-icon bi bi-circle"></i>
491
+ <p>Register</p>
492
+ </a>
493
+ </li>
494
+ </ul>
495
+ </li>
496
+ <li class="nav-item">
497
+ <a href="#" class="nav-link">
498
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
499
+ <p>
500
+ Version 2
501
+ <i class="nav-arrow bi bi-chevron-right"></i>
502
+ </p>
503
+ </a>
504
+ <ul class="nav nav-treeview">
505
+ <li class="nav-item">
506
+ <a href="../examples/login-v2.html" class="nav-link">
507
+ <i class="nav-icon bi bi-circle"></i>
508
+ <p>Login</p>
509
+ </a>
510
+ </li>
511
+ <li class="nav-item">
512
+ <a href="../examples/register-v2.html" class="nav-link">
513
+ <i class="nav-icon bi bi-circle"></i>
514
+ <p>Register</p>
515
+ </a>
516
+ </li>
517
+ </ul>
518
+ </li>
519
+ <li class="nav-item">
520
+ <a href="../examples/lockscreen.html" class="nav-link">
521
+ <i class="nav-icon bi bi-circle"></i>
522
+ <p>Lockscreen</p>
523
+ </a>
524
+ </li>
525
+ </ul>
526
+ </li>
527
+ <li class="nav-header">DOCUMENTATIONS</li>
528
+ <li class="nav-item">
529
+ <a href="../docs/introduction.html" class="nav-link">
530
+ <i class="nav-icon bi bi-download"></i>
531
+ <p>Installation</p>
532
+ </a>
533
+ </li>
534
+ <li class="nav-item">
535
+ <a href="../docs/layout.html" class="nav-link">
536
+ <i class="nav-icon bi bi-grip-horizontal"></i>
537
+ <p>Layout</p>
538
+ </a>
539
+ </li>
540
+ <li class="nav-item">
541
+ <a href="../docs/color-mode.html" class="nav-link">
542
+ <i class="nav-icon bi bi-star-half"></i>
543
+ <p>Color Mode</p>
544
+ </a>
545
+ </li>
546
+ <li class="nav-item">
547
+ <a href="#" class="nav-link">
548
+ <i class="nav-icon bi bi-ui-checks-grid"></i>
549
+ <p>
550
+ Components
551
+ <i class="nav-arrow bi bi-chevron-right"></i>
552
+ </p>
553
+ </a>
554
+ <ul class="nav nav-treeview">
555
+ <li class="nav-item">
556
+ <a href="../docs/components/main-header.html" class="nav-link">
557
+ <i class="nav-icon bi bi-circle"></i>
558
+ <p>Main Header</p>
559
+ </a>
560
+ </li>
561
+ <li class="nav-item">
562
+ <a href="../docs/components/main-sidebar.html" class="nav-link">
563
+ <i class="nav-icon bi bi-circle"></i>
564
+ <p>Main Sidebar</p>
565
+ </a>
566
+ </li>
567
+ </ul>
568
+ </li>
569
+ <li class="nav-item">
570
+ <a href="#" class="nav-link">
571
+ <i class="nav-icon bi bi-filetype-js"></i>
572
+ <p>
573
+ Javascript
574
+ <i class="nav-arrow bi bi-chevron-right"></i>
575
+ </p>
576
+ </a>
577
+ <ul class="nav nav-treeview">
578
+ <li class="nav-item">
579
+ <a href="../docs/javascript/treeview.html" class="nav-link">
580
+ <i class="nav-icon bi bi-circle"></i>
581
+ <p>Treeview</p>
582
+ </a>
583
+ </li>
584
+ </ul>
585
+ </li>
586
+ <li class="nav-item">
587
+ <a href="../docs/browser-support.html" class="nav-link">
588
+ <i class="nav-icon bi bi-browser-edge"></i>
589
+ <p>Browser Support</p>
590
+ </a>
591
+ </li>
592
+ <li class="nav-item">
593
+ <a href="../docs/how-to-contribute.html" class="nav-link">
594
+ <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
595
+ <p>How To Contribute</p>
596
+ </a>
597
+ </li>
598
+ <li class="nav-item">
599
+ <a href="../docs/faq.html" class="nav-link">
600
+ <i class="nav-icon bi bi-question-circle-fill"></i>
601
+ <p>FAQ</p>
602
+ </a>
603
+ </li>
604
+ <li class="nav-item">
605
+ <a href="../docs/license.html" class="nav-link">
606
+ <i class="nav-icon bi bi-patch-check-fill"></i>
607
+ <p>License</p>
608
+ </a>
609
+ </li>
610
+ <li class="nav-header">MULTI LEVEL EXAMPLE</li>
611
+ <li class="nav-item">
612
+ <a href="#" class="nav-link">
613
+ <i class="nav-icon bi bi-circle-fill"></i>
614
+ <p>Level 1</p>
615
+ </a>
616
+ </li>
617
+ <li class="nav-item">
618
+ <a href="#" class="nav-link">
619
+ <i class="nav-icon bi bi-circle-fill"></i>
620
+ <p>
621
+ Level 1
622
+ <i class="nav-arrow bi bi-chevron-right"></i>
623
+ </p>
624
+ </a>
625
+ <ul class="nav nav-treeview">
626
+ <li class="nav-item">
627
+ <a href="#" class="nav-link">
628
+ <i class="nav-icon bi bi-circle"></i>
629
+ <p>Level 2</p>
630
+ </a>
631
+ </li>
632
+ <li class="nav-item">
633
+ <a href="#" class="nav-link">
634
+ <i class="nav-icon bi bi-circle"></i>
635
+ <p>
636
+ Level 2
637
+ <i class="nav-arrow bi bi-chevron-right"></i>
638
+ </p>
639
+ </a>
640
+ <ul class="nav nav-treeview">
641
+ <li class="nav-item">
642
+ <a href="#" class="nav-link">
643
+ <i class="nav-icon bi bi-record-circle-fill"></i>
644
+ <p>Level 3</p>
645
+ </a>
646
+ </li>
647
+ <li class="nav-item">
648
+ <a href="#" class="nav-link">
649
+ <i class="nav-icon bi bi-record-circle-fill"></i>
650
+ <p>Level 3</p>
651
+ </a>
652
+ </li>
653
+ <li class="nav-item">
654
+ <a href="#" class="nav-link">
655
+ <i class="nav-icon bi bi-record-circle-fill"></i>
656
+ <p>Level 3</p>
657
+ </a>
658
+ </li>
659
+ </ul>
660
+ </li>
661
+ <li class="nav-item">
662
+ <a href="#" class="nav-link">
663
+ <i class="nav-icon bi bi-circle"></i>
664
+ <p>Level 2</p>
665
+ </a>
666
+ </li>
667
+ </ul>
668
+ </li>
669
+ <li class="nav-item">
670
+ <a href="#" class="nav-link">
671
+ <i class="nav-icon bi bi-circle-fill"></i>
672
+ <p>Level 1</p>
673
+ </a>
674
+ </li>
675
+ <li class="nav-header">LABELS</li>
676
+ <li class="nav-item">
677
+ <a href="#" class="nav-link">
678
+ <i class="nav-icon bi bi-circle text-danger"></i>
679
+ <p class="text">Important</p>
680
+ </a>
681
+ </li>
682
+ <li class="nav-item">
683
+ <a href="#" class="nav-link">
684
+ <i class="nav-icon bi bi-circle text-warning"></i>
685
+ <p>Warning</p>
686
+ </a>
687
+ </li>
688
+ <li class="nav-item">
689
+ <a href="#" class="nav-link">
690
+ <i class="nav-icon bi bi-circle text-info"></i>
691
+ <p>Informational</p>
692
+ </a>
693
+ </li>
694
+ </ul>
695
+ <!--end::Sidebar Menu-->
696
+ </nav>
697
+ </div>
698
+ <!--end::Sidebar Wrapper-->
699
+ </aside>
700
+ <!--end::Sidebar-->
701
+ <!--begin::App Main-->
702
+ <main class="app-main">
703
+ <!--begin::App Content Header-->
704
+ <div class="app-content-header">
705
+ <!--begin::Container-->
706
+ <div class="container-fluid">
707
+ <!--begin::Row-->
708
+ <div class="row">
709
+ <div class="col-sm-6"><h3 class="mb-0">General UI Elements</h3></div>
710
+ <div class="col-sm-6">
711
+ <ol class="breadcrumb float-sm-end">
712
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
713
+ <li class="breadcrumb-item active" aria-current="page">General UI Elements</li>
714
+ </ol>
715
+ </div>
716
+ </div>
717
+ <!--end::Row-->
718
+ </div>
719
+ <!--end::Container-->
720
+ </div>
721
+ <!--end::App Content Header-->
722
+ <!--begin::App Content-->
723
+ <div class="app-content">
724
+ <!--begin::Container-->
725
+ <div class="container-fluid">
726
+ <!--begin::Row-->
727
+ <div class="row g-4">
728
+ <!--begin::Col-->
729
+ <div class="col-12">
730
+ <div class="callout callout-info">
731
+ For detailed documentation of Components visit
732
+ <a
733
+ href="https://getbootstrap.com/docs/5.3/components/"
734
+ target="_blank"
735
+ rel="noopener noreferrer"
736
+ class="callout-link"
737
+ >
738
+ Bootstrap Components
739
+ </a>
740
+ </div>
741
+ </div>
742
+ <!--end::Col-->
743
+ <!--begin::Col-->
744
+ <div class="col-md-6">
745
+ <!--begin::Accordion-->
746
+ <div class="card card-primary card-outline mb-4">
747
+ <!--begin::Header-->
748
+ <div class="card-header"><div class="card-title">Accordion</div></div>
749
+ <!--end::Header-->
750
+ <!--begin::Body-->
751
+ <div class="card-body">
752
+ <div class="accordion" id="accordionExample">
753
+ <div class="accordion-item">
754
+ <h2 class="accordion-header">
755
+ <button
756
+ class="accordion-button"
757
+ type="button"
758
+ data-bs-toggle="collapse"
759
+ data-bs-target="#collapseOne"
760
+ aria-expanded="true"
761
+ aria-controls="collapseOne"
762
+ >
763
+ Accordion Item #1
764
+ </button>
765
+ </h2>
766
+ <div
767
+ id="collapseOne"
768
+ class="accordion-collapse collapse show"
769
+ data-bs-parent="#accordionExample"
770
+ >
771
+ <div class="accordion-body">
772
+ <strong>This is the first item's accordion body.</strong> It is shown by
773
+ default, until the collapse plugin adds the appropriate classes that we
774
+ use to style each element. These classes control the overall appearance,
775
+ as well as the showing and hiding via CSS transitions. You can modify
776
+ any of this with custom CSS or overriding our default variables. It's
777
+ also worth noting that just about any HTML can go within the
778
+ <code>.accordion-body</code>, though the transition does limit overflow.
779
+ </div>
73
780
  </div>
74
- </li> <!--end::Messages Dropdown Menu--> <!--begin::Notifications Dropdown Menu-->
75
- <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i class="bi bi-bell-fill"></i> <span class="navbar-badge badge text-bg-warning">15</span> </a>
76
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <span class="dropdown-item dropdown-header">15 Notifications</span>
77
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-envelope me-2"></i> 4 new messages
78
- <span class="float-end text-secondary fs-7">3 mins</span> </a>
79
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-people-fill me-2"></i> 8 friend requests
80
- <span class="float-end text-secondary fs-7">12 hours</span> </a>
81
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
82
- <span class="float-end text-secondary fs-7">2 days</span> </a>
83
- <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">
84
- See All Notifications
85
- </a>
781
+ </div>
782
+ <div class="accordion-item">
783
+ <h2 class="accordion-header">
784
+ <button
785
+ class="accordion-button collapsed"
786
+ type="button"
787
+ data-bs-toggle="collapse"
788
+ data-bs-target="#collapseTwo"
789
+ aria-expanded="false"
790
+ aria-controls="collapseTwo"
791
+ >
792
+ Accordion Item #2
793
+ </button>
794
+ </h2>
795
+ <div
796
+ id="collapseTwo"
797
+ class="accordion-collapse collapse"
798
+ data-bs-parent="#accordionExample"
799
+ >
800
+ <div class="accordion-body">
801
+ <strong>This is the second item's accordion body.</strong> It is hidden
802
+ by default, until the collapse plugin adds the appropriate classes that
803
+ we use to style each element. These classes control the overall
804
+ appearance, as well as the showing and hiding via CSS transitions. You
805
+ can modify any of this with custom CSS or overriding our default
806
+ variables. It's also worth noting that just about any HTML can go within
807
+ the <code>.accordion-body</code>, though the transition does limit
808
+ overflow.
809
+ </div>
86
810
  </div>
87
- </li> <!--end::Notifications Dropdown Menu--> <!--begin::Fullscreen Toggle-->
88
- <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i> <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i> </a> </li> <!--end::Fullscreen Toggle--> <!--begin::User Menu Dropdown-->
89
- <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"> <img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image"> <span class="d-none d-md-inline">Alexander Pierce</span> </a>
90
- <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <!--begin::User Image-->
91
- <li class="user-header text-bg-primary"> <img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
92
- <p>
93
- Alexander Pierce - Web Developer
94
- <small>Member since Nov. 2023</small>
95
- </p>
96
- </li> <!--end::User Image--> <!--begin::Menu Body-->
97
- <li class="user-body"> <!--begin::Row-->
98
- <div class="row">
99
- <div class="col-4 text-center"> <a href="#">Followers</a> </div>
100
- <div class="col-4 text-center"> <a href="#">Sales</a> </div>
101
- <div class="col-4 text-center"> <a href="#">Friends</a> </div>
102
- </div> <!--end::Row-->
103
- </li> <!--end::Menu Body--> <!--begin::Menu Footer-->
104
- <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a href="#" class="btn btn-default btn-flat float-end">Sign out</a> </li> <!--end::Menu Footer-->
811
+ </div>
812
+ <div class="accordion-item">
813
+ <h2 class="accordion-header">
814
+ <button
815
+ class="accordion-button collapsed"
816
+ type="button"
817
+ data-bs-toggle="collapse"
818
+ data-bs-target="#collapseThree"
819
+ aria-expanded="false"
820
+ aria-controls="collapseThree"
821
+ >
822
+ Accordion Item #3
823
+ </button>
824
+ </h2>
825
+ <div
826
+ id="collapseThree"
827
+ class="accordion-collapse collapse"
828
+ data-bs-parent="#accordionExample"
829
+ >
830
+ <div class="accordion-body">
831
+ <strong>This is the third item's accordion body.</strong> It is hidden
832
+ by default, until the collapse plugin adds the appropriate classes that
833
+ we use to style each element. These classes control the overall
834
+ appearance, as well as the showing and hiding via CSS transitions. You
835
+ can modify any of this with custom CSS or overriding our default
836
+ variables. It's also worth noting that just about any HTML can go within
837
+ the <code>.accordion-body</code>, though the transition does limit
838
+ overflow.
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ <!--end::Body-->
845
+ </div>
846
+ <!--end::Accordion-->
847
+ <!--begin::Alert-->
848
+ <div class="card card-success card-outline mb-4">
849
+ <!--begin::Header-->
850
+ <div class="card-header"><div class="card-title">Alert</div></div>
851
+ <!--end::Header-->
852
+ <!--begin::Body-->
853
+ <div class="card-body">
854
+ <div class="alert alert-primary" role="alert">
855
+ A simple primary alert with
856
+ <a href="#" class="alert-link">an example link</a>. Give it a click if you
857
+ like.
858
+ </div>
859
+ <div class="alert alert-secondary" role="alert">
860
+ A simple secondary alert with
861
+ <a href="#" class="alert-link">an example link</a>. Give it a click if you
862
+ like.
863
+ </div>
864
+ <div class="alert alert-success" role="alert">
865
+ A simple success alert with
866
+ <a href="#" class="alert-link">an example link</a>. Give it a click if you
867
+ like.
868
+ </div>
869
+ <div class="alert alert-danger" role="alert">
870
+ A simple danger alert with <a href="#" class="alert-link">an example link</a>.
871
+ Give it a click if you like.
872
+ </div>
873
+ <div class="alert alert-warning" role="alert">
874
+ A simple warning alert with
875
+ <a href="#" class="alert-link">an example link</a>. Give it a click if you
876
+ like.
877
+ </div>
878
+ <div class="alert alert-info" role="alert">
879
+ A simple info alert with <a href="#" class="alert-link">an example link</a>.
880
+ Give it a click if you like.
881
+ </div>
882
+ <div class="alert alert-light" role="alert">
883
+ A simple light alert with <a href="#" class="alert-link">an example link</a>.
884
+ Give it a click if you like.
885
+ </div>
886
+ <div class="alert alert-dark" role="alert">
887
+ A simple dark alert with <a href="#" class="alert-link">an example link</a>.
888
+ Give it a click if you like.
889
+ </div>
890
+ </div>
891
+ <!--end::Body-->
892
+ </div>
893
+ <!--end::Alert-->
894
+ <!--begin::Badge-->
895
+ <div class="card card-warning card-outline mb-4">
896
+ <!--begin::Header-->
897
+ <div class="card-header"><div class="card-title">Badge</div></div>
898
+ <!--end::Header-->
899
+ <!--begin::Body-->
900
+ <div class="card-body">
901
+ <h1>Example heading <span class="badge bg-secondary">New</span></h1>
902
+ <h2>Example heading <span class="badge bg-secondary">New</span></h2>
903
+ <h3>Example heading <span class="badge bg-secondary">New</span></h3>
904
+ <h4>Example heading <span class="badge bg-secondary">New</span></h4>
905
+ <h5>Example heading <span class="badge bg-secondary">New</span></h5>
906
+ <h6>Example heading <span class="badge bg-secondary">New</span></h6>
907
+ <hr />
908
+ <button type="button" class="btn btn-primary">
909
+ Notifications <span class="badge text-bg-secondary">4</span>
910
+ </button>
911
+ <hr />
912
+ <button type="button" class="btn btn-primary position-relative">
913
+ Inbox
914
+ <span
915
+ class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
916
+ >
917
+ 99+
918
+ <span class="visually-hidden">unread messages</span>
919
+ </span>
920
+ </button>
921
+ <hr />
922
+ <button type="button" class="btn btn-primary position-relative">
923
+ Profile
924
+ <span
925
+ class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"
926
+ >
927
+ <span class="visually-hidden">New alerts</span>
928
+ </span>
929
+ </button>
930
+ <hr />
931
+ <span class="badge text-bg-primary">Primary</span>
932
+ <span class="badge text-bg-secondary">Secondary</span>
933
+ <span class="badge text-bg-success">Success</span>
934
+ <span class="badge text-bg-danger">Danger</span>
935
+ <span class="badge text-bg-warning">Warning</span>
936
+ <span class="badge text-bg-info">Info</span>
937
+ <span class="badge text-bg-light">Light</span>
938
+ <span class="badge text-bg-dark">Dark</span>
939
+ <hr />
940
+ <span class="badge rounded-pill text-bg-primary">Primary</span>
941
+ <span class="badge rounded-pill text-bg-secondary">Secondary</span>
942
+ <span class="badge rounded-pill text-bg-success">Success</span>
943
+ <span class="badge rounded-pill text-bg-danger">Danger</span>
944
+ <span class="badge rounded-pill text-bg-warning">Warning</span>
945
+ <span class="badge rounded-pill text-bg-info">Info</span>
946
+ <span class="badge rounded-pill text-bg-light">Light</span>
947
+ <span class="badge rounded-pill text-bg-dark">Dark</span>
948
+ </div>
949
+ <!--end::Body-->
950
+ </div>
951
+ <!--end::Badge-->
952
+ <!--begin::Button-->
953
+ <div class="card card-danger card-outline mb-4">
954
+ <!--begin::Header-->
955
+ <div class="card-header"><div class="card-title">Button</div></div>
956
+ <!--end::Header-->
957
+ <!--begin::Body-->
958
+ <div class="card-body">
959
+ <button type="button" class="btn btn-primary mb-2">Primary</button>
960
+ <button type="button" class="btn btn-secondary mb-2">Secondary</button>
961
+ <button type="button" class="btn btn-success mb-2">Success</button>
962
+ <button type="button" class="btn btn-danger mb-2">Danger</button>
963
+ <button type="button" class="btn btn-warning mb-2">Warning</button>
964
+ <button type="button" class="btn btn-info mb-2">Info</button>
965
+ <button type="button" class="btn btn-light mb-2">Light</button>
966
+ <button type="button" class="btn btn-dark mb-2">Dark</button>
967
+ <button type="button" class="btn btn-link mb-2">Link</button>
968
+ <hr />
969
+ <button type="button" class="btn btn-primary mb-2" disabled>
970
+ Primary (disabled)
971
+ </button>
972
+ <button type="button" class="btn btn-secondary mb-2" disabled>
973
+ Secondary (disabled)
974
+ </button>
975
+ <button type="button" class="btn btn-success mb-2" disabled>
976
+ Success (disabled)
977
+ </button>
978
+ <button type="button" class="btn btn-danger mb-2" disabled>
979
+ Danger (disabled)
980
+ </button>
981
+ <button type="button" class="btn btn-warning mb-2" disabled>
982
+ Warning (disabled)
983
+ </button>
984
+ <button type="button" class="btn btn-info mb-2" disabled>
985
+ Info (disabled)
986
+ </button>
987
+ <hr />
988
+ <button type="button" class="btn btn-outline-primary mb-2">Primary</button>
989
+ <button type="button" class="btn btn-outline-secondary mb-2">Secondary</button>
990
+ <button type="button" class="btn btn-outline-success mb-2">Success</button>
991
+ <button type="button" class="btn btn-outline-danger mb-2">Danger</button>
992
+ <button type="button" class="btn btn-outline-warning mb-2">Warning</button>
993
+ <button type="button" class="btn btn-outline-info mb-2">Info</button>
994
+ <button type="button" class="btn btn-outline-light mb-2">Light</button>
995
+ <button type="button" class="btn btn-outline-dark mb-2">Dark</button>
996
+ <hr />
997
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
998
+ <button type="button" class="btn btn-warning btn-sm">Small button</button>
999
+ <button
1000
+ type="button"
1001
+ class="btn btn-danger"
1002
+ style="
1003
+ --bs-btn-padding-y: 0.25rem;
1004
+ --bs-btn-padding-x: 0.5rem;
1005
+ --bs-btn-font-size: 0.75rem;
1006
+ "
1007
+ >
1008
+ Custom button
1009
+ </button>
1010
+ </div>
1011
+ <!--end::Body-->
1012
+ </div>
1013
+ <!--end::Button-->
1014
+ </div>
1015
+ <!--end::Col-->
1016
+ <!--begin::Col-->
1017
+ <div class="col-md-6">
1018
+ <!--begin::Button Group-->
1019
+ <div class="card card-info card-outline mb-4">
1020
+ <!--begin::Header-->
1021
+ <div class="card-header"><div class="card-title">Button Group</div></div>
1022
+ <!--end::Header-->
1023
+ <!--begin::Body-->
1024
+ <div class="card-body">
1025
+ <div class="btn-group mb-2" role="group" aria-label="Basic example">
1026
+ <button type="button" class="btn btn-primary">Left</button>
1027
+ <button type="button" class="btn btn-primary">Middle</button>
1028
+ <button type="button" class="btn btn-primary">Right</button>
1029
+ </div>
1030
+ <div
1031
+ class="btn-group mb-2"
1032
+ role="group"
1033
+ aria-label="Basic mixed styles example"
1034
+ >
1035
+ <button type="button" class="btn btn-danger">Left</button>
1036
+ <button type="button" class="btn btn-warning">Middle</button>
1037
+ <button type="button" class="btn btn-success">Right</button>
1038
+ </div>
1039
+ <div class="btn-group mb-2" role="group" aria-label="Basic outlined example">
1040
+ <button type="button" class="btn btn-outline-primary">Left</button>
1041
+ <button type="button" class="btn btn-outline-primary">Middle</button>
1042
+ <button type="button" class="btn btn-outline-primary">Right</button>
1043
+ </div>
1044
+ <hr />
1045
+ <div
1046
+ class="btn-group mb-2"
1047
+ role="group"
1048
+ aria-label="Basic checkbox toggle button group"
1049
+ >
1050
+ <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" />
1051
+ <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
1052
+ <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" />
1053
+ <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
1054
+ <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" />
1055
+ <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
1056
+ </div>
1057
+ <div
1058
+ class="btn-group mb-2"
1059
+ role="group"
1060
+ aria-label="Basic radio toggle button group"
1061
+ >
1062
+ <input
1063
+ type="radio"
1064
+ class="btn-check"
1065
+ name="btnradio"
1066
+ id="btnradio1"
1067
+ autocomplete="off"
1068
+ checked
1069
+ />
1070
+ <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
1071
+ <input
1072
+ type="radio"
1073
+ class="btn-check"
1074
+ name="btnradio"
1075
+ id="btnradio2"
1076
+ autocomplete="off"
1077
+ />
1078
+ <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
1079
+ <input
1080
+ type="radio"
1081
+ class="btn-check"
1082
+ name="btnradio"
1083
+ id="btnradio3"
1084
+ autocomplete="off"
1085
+ />
1086
+ <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
1087
+ </div>
1088
+ <hr />
1089
+ <div
1090
+ class="btn-group mb-2"
1091
+ role="group"
1092
+ aria-label="Button group with nested dropdown"
1093
+ >
1094
+ <button type="button" class="btn btn-primary">1</button>
1095
+ <button type="button" class="btn btn-primary">2</button>
1096
+ <div class="btn-group" role="group">
1097
+ <button
1098
+ type="button"
1099
+ class="btn btn-primary dropdown-toggle"
1100
+ data-bs-toggle="dropdown"
1101
+ aria-expanded="false"
1102
+ >
1103
+ Dropdown
1104
+ </button>
1105
+ <ul class="dropdown-menu">
1106
+ <li><a class="dropdown-item" href="#">Dropdown link</a></li>
1107
+ <li><a class="dropdown-item" href="#">Dropdown link</a></li>
105
1108
  </ul>
106
- </li> <!--end::User Menu Dropdown-->
107
- </ul> <!--end::End Navbar Links-->
108
- </div> <!--end::Container-->
109
- </nav> <!--end::Header--> <!--begin::Sidebar-->
110
- <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark"> <!--begin::Sidebar Brand-->
111
- <div class="sidebar-brand"> <!--begin::Brand Link--> <a href="../index.html" class="brand-link"> <!--begin::Brand Image--> <img src="../../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow"> <!--end::Brand Image--> <!--begin::Brand Text--> <span class="brand-text fw-light">AdminLTE 4</span> <!--end::Brand Text--> </a> <!--end::Brand Link--> </div> <!--end::Sidebar Brand--> <!--begin::Sidebar Wrapper-->
112
- <div class="sidebar-wrapper">
113
- <nav class="mt-2"> <!--begin::Sidebar Menu-->
114
- <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
115
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-speedometer"></i>
116
- <p>
117
- Dashboard
118
- <i class="nav-arrow bi bi-chevron-right"></i>
119
- </p>
120
- </a>
121
- <ul class="nav nav-treeview">
122
- <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
123
- <p>Dashboard v1</p>
124
- </a> </li>
125
- <li class="nav-item"> <a href="../index2.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
126
- <p>Dashboard v2</p>
127
- </a> </li>
128
- <li class="nav-item"> <a href="../index3.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
129
- <p>Dashboard v3</p>
130
- </a> </li>
131
- </ul>
132
- </li>
133
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-seam-fill"></i>
134
- <p>
135
- Widgets
136
- <i class="nav-arrow bi bi-chevron-right"></i>
137
- </p>
138
- </a>
139
- <ul class="nav nav-treeview">
140
- <li class="nav-item"> <a href="../widgets/small-box.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
141
- <p>Small Box</p>
142
- </a> </li>
143
- <li class="nav-item"> <a href="../widgets/info-box.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
144
- <p>info Box</p>
145
- </a> </li>
146
- <li class="nav-item"> <a href="../widgets/cards.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
147
- <p>Cards</p>
148
- </a> </li>
149
- </ul>
150
- </li>
151
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-clipboard-fill"></i>
152
- <p>
153
- Layout Options
154
- <span class="nav-badge badge text-bg-secondary me-3">6</span> <i class="nav-arrow bi bi-chevron-right"></i>
155
- </p>
156
- </a>
157
- <ul class="nav nav-treeview">
158
- <li class="nav-item"> <a href="../layout/unfixed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
159
- <p>Default Sidebar</p>
160
- </a> </li>
161
- <li class="nav-item"> <a href="../layout/fixed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
162
- <p>Fixed Sidebar</p>
163
- </a> </li>
164
- <li class="nav-item"> <a href="../layout/fixed-complete.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
165
- <p>Fixed Complete</p>
166
- </a> </li>
167
- <li class="nav-item"> <a href="../layout/sidebar-mini.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
168
- <p>Sidebar Mini</p>
169
- </a> </li>
170
- <li class="nav-item"> <a href="../layout/collapsed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
171
- <p>Sidebar Mini <small>+ Collapsed</small></p>
172
- </a> </li>
173
- <li class="nav-item"> <a href="../layout/logo-switch.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
174
- <p>Sidebar Mini <small>+ Logo Switch</small></p>
175
- </a> </li>
176
- <li class="nav-item"> <a href="../layout/layout-rtl.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
177
- <p>Layout RTL</p>
178
- </a> </li>
179
- </ul>
180
- </li>
181
- <li class="nav-item menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon bi bi-tree-fill"></i>
182
- <p>
183
- UI Elements
184
- <i class="nav-arrow bi bi-chevron-right"></i>
185
- </p>
186
- </a>
187
- <ul class="nav nav-treeview">
188
- <li class="nav-item"> <a href="../UI/general.html" class="nav-link active"> <i class="nav-icon bi bi-circle"></i>
189
- <p>General</p>
190
- </a> </li>
191
- <li class="nav-item"> <a href="../UI/timeline.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
192
- <p>Timeline</p>
193
- </a> </li>
194
- </ul>
195
- </li>
196
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-pencil-square"></i>
197
- <p>
198
- Forms
199
- <i class="nav-arrow bi bi-chevron-right"></i>
200
- </p>
201
- </a>
202
- <ul class="nav nav-treeview">
203
- <li class="nav-item"> <a href="../forms/general.html" class="nav-link active"> <i class="nav-icon bi bi-circle"></i>
204
- <p>General Elements</p>
205
- </a> </li>
206
- </ul>
207
- </li>
208
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-table"></i>
209
- <p>
210
- Tables
211
- <i class="nav-arrow bi bi-chevron-right"></i>
212
- </p>
213
- </a>
214
- <ul class="nav nav-treeview">
215
- <li class="nav-item"> <a href="../tables/simple.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
216
- <p>Simple Tables</p>
217
- </a> </li>
218
- </ul>
219
- </li>
220
- <li class="nav-header">EXAMPLES</li>
221
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
222
- <p>
223
- Auth
224
- <i class="nav-arrow bi bi-chevron-right"></i>
225
- </p>
226
- </a>
227
- <ul class="nav nav-treeview">
228
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
229
- <p>
230
- Version 1
231
- <i class="nav-arrow bi bi-chevron-right"></i>
232
- </p>
233
- </a>
234
- <ul class="nav nav-treeview">
235
- <li class="nav-item"> <a href="../examples/login.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
236
- <p>Login</p>
237
- </a> </li>
238
- <li class="nav-item"> <a href="../examples/register.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
239
- <p>Register</p>
240
- </a> </li>
241
- </ul>
242
- </li>
243
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
244
- <p>
245
- Version 2
246
- <i class="nav-arrow bi bi-chevron-right"></i>
247
- </p>
248
- </a>
249
- <ul class="nav nav-treeview">
250
- <li class="nav-item"> <a href="../examples/login-v2.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
251
- <p>Login</p>
252
- </a> </li>
253
- <li class="nav-item"> <a href="../examples/register-v2.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
254
- <p>Register</p>
255
- </a> </li>
256
- </ul>
257
- </li>
258
- <li class="nav-item"> <a href="../examples/lockscreen.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
259
- <p>Lockscreen</p>
260
- </a> </li>
261
- </ul>
262
- </li>
263
- <li class="nav-header">DOCUMENTATIONS</li>
264
- <li class="nav-item"> <a href="../docs/introduction.html" class="nav-link"> <i class="nav-icon bi bi-download"></i>
265
- <p>Installation</p>
266
- </a> </li>
267
- <li class="nav-item"> <a href="../docs/layout.html" class="nav-link"> <i class="nav-icon bi bi-grip-horizontal"></i>
268
- <p>Layout</p>
269
- </a> </li>
270
- <li class="nav-item"> <a href="../docs/color-mode.html" class="nav-link"> <i class="nav-icon bi bi-star-half"></i>
271
- <p>Color Mode</p>
272
- </a> </li>
273
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-ui-checks-grid"></i>
274
- <p>
275
- Components
276
- <i class="nav-arrow bi bi-chevron-right"></i>
277
- </p>
278
- </a>
279
- <ul class="nav nav-treeview">
280
- <li class="nav-item"> <a href="../docs/components/main-header.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
281
- <p>Main Header</p>
282
- </a> </li>
283
- <li class="nav-item"> <a href="../docs/components/main-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
284
- <p>Main Sidebar</p>
285
- </a> </li>
286
- </ul>
1109
+ </div>
1110
+ </div>
1111
+ </div>
1112
+ <!--end::Body-->
1113
+ </div>
1114
+ <!--end::Button Group-->
1115
+ <!--begin::Collapse-->
1116
+ <div class="card card-primary card-outline mb-4">
1117
+ <!--begin::Header-->
1118
+ <div class="card-header"><div class="card-title">Collapse</div></div>
1119
+ <!--end::Header-->
1120
+ <!--begin::Body-->
1121
+ <div class="card-body">
1122
+ <p class="d-inline-flex gap-1">
1123
+ <a
1124
+ class="btn btn-primary"
1125
+ data-bs-toggle="collapse"
1126
+ href="#collapseExample"
1127
+ role="button"
1128
+ aria-expanded="false"
1129
+ aria-controls="collapseExample"
1130
+ >
1131
+ Link with href
1132
+ </a>
1133
+ <button
1134
+ class="btn btn-success"
1135
+ type="button"
1136
+ data-bs-toggle="collapse"
1137
+ data-bs-target="#collapseExample"
1138
+ aria-expanded="false"
1139
+ aria-controls="collapseExample"
1140
+ >
1141
+ Button with data-bs-target
1142
+ </button>
1143
+ </p>
1144
+ <div class="collapse" id="collapseExample">
1145
+ <div class="card card-body">
1146
+ Some placeholder content for the collapse component. This panel is hidden by
1147
+ default but revealed when the user activates the relevant trigger.
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ <!--end::Body-->
1152
+ </div>
1153
+ <!--end::Collapse-->
1154
+ <!--begin::Dropdowns-->
1155
+ <div class="card card-success card-outline mb-4">
1156
+ <!--begin::Header-->
1157
+ <div class="card-header"><div class="card-title">Dropdowns</div></div>
1158
+ <!--end::Header-->
1159
+ <!--begin::Body-->
1160
+ <div class="card-body">
1161
+ <div class="btn-group">
1162
+ <button
1163
+ type="button"
1164
+ class="btn btn-primary dropdown-toggle"
1165
+ data-bs-toggle="dropdown"
1166
+ aria-expanded="false"
1167
+ >
1168
+ Primary
1169
+ </button>
1170
+ <ul class="dropdown-menu">
1171
+ <li><a class="dropdown-item" href="#">Action</a></li>
1172
+ <li><a class="dropdown-item" href="#">Another action</a></li>
1173
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
1174
+ <li><hr class="dropdown-divider" /></li>
1175
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
1176
+ </ul>
1177
+ </div>
1178
+ <div class="btn-group">
1179
+ <button
1180
+ type="button"
1181
+ class="btn btn-secondary dropdown-toggle"
1182
+ data-bs-toggle="dropdown"
1183
+ aria-expanded="false"
1184
+ >
1185
+ Secondary
1186
+ </button>
1187
+ <ul class="dropdown-menu">
1188
+ <li><a class="dropdown-item" href="#">Action</a></li>
1189
+ <li><a class="dropdown-item" href="#">Another action</a></li>
1190
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
1191
+ <li><hr class="dropdown-divider" /></li>
1192
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
1193
+ </ul>
1194
+ </div>
1195
+ <hr />
1196
+ <div class="btn-group">
1197
+ <button type="button" class="btn btn-danger">Danger Split</button>
1198
+ <button
1199
+ type="button"
1200
+ class="btn btn-danger dropdown-toggle dropdown-toggle-split"
1201
+ data-bs-toggle="dropdown"
1202
+ aria-expanded="false"
1203
+ >
1204
+ <span class="visually-hidden">Toggle Dropdown</span>
1205
+ </button>
1206
+ <ul class="dropdown-menu">
1207
+ <li><a class="dropdown-item" href="#">Action</a></li>
1208
+ <li><a class="dropdown-item" href="#">Another action</a></li>
1209
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
1210
+ <li><hr class="dropdown-divider" /></li>
1211
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
1212
+ </ul>
1213
+ </div>
1214
+ <div class="btn-group">
1215
+ <button type="button" class="btn btn-warning">Warning Split</button>
1216
+ <button
1217
+ type="button"
1218
+ class="btn btn-warning dropdown-toggle dropdown-toggle-split"
1219
+ data-bs-toggle="dropdown"
1220
+ aria-expanded="false"
1221
+ >
1222
+ <span class="visually-hidden">Toggle Dropdown</span>
1223
+ </button>
1224
+ <ul class="dropdown-menu">
1225
+ <li><a class="dropdown-item" href="#">Action</a></li>
1226
+ <li><a class="dropdown-item" href="#">Another action</a></li>
1227
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
1228
+ <li><hr class="dropdown-divider" /></li>
1229
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
1230
+ </ul>
1231
+ </div>
1232
+ </div>
1233
+ <!--end::Body-->
1234
+ </div>
1235
+ <!--end::Dropdowns-->
1236
+ <!--begin::List Group-->
1237
+ <div class="card card-warning card-outline mb-4">
1238
+ <!--begin::Header-->
1239
+ <div class="card-header"><div class="card-title">List Group</div></div>
1240
+ <!--end::Header-->
1241
+ <!--begin::Body-->
1242
+ <div class="card-body">
1243
+ <div class="list-group">
1244
+ <a
1245
+ href="#"
1246
+ class="list-group-item list-group-item-action active"
1247
+ aria-current="true"
1248
+ >
1249
+ The current link item
1250
+ </a>
1251
+ <a href="#" class="list-group-item list-group-item-action"
1252
+ >A second link item</a
1253
+ >
1254
+ <a href="#" class="list-group-item list-group-item-action"
1255
+ >A third link item</a
1256
+ >
1257
+ <a href="#" class="list-group-item list-group-item-action"
1258
+ >A fourth link item</a
1259
+ >
1260
+ <a
1261
+ class="list-group-item list-group-item-action disabled"
1262
+ aria-disabled="true"
1263
+ >A disabled link item</a
1264
+ >
1265
+ </div>
1266
+ </div>
1267
+ <!--end::Body-->
1268
+ </div>
1269
+ <!--end::List Group-->
1270
+ <!--begin::Navbar-->
1271
+ <div class="card card-danger card-outline mb-4">
1272
+ <!--begin::Header-->
1273
+ <div class="card-header"><div class="card-title">Navbar</div></div>
1274
+ <!--end::Header-->
1275
+ <!--begin::Body-->
1276
+ <div class="card-body">
1277
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
1278
+ <div class="container-fluid">
1279
+ <a class="navbar-brand" href="#">Navbar</a>
1280
+ <button
1281
+ class="navbar-toggler"
1282
+ type="button"
1283
+ data-bs-toggle="collapse"
1284
+ data-bs-target="#navbarSupportedContent"
1285
+ aria-controls="navbarSupportedContent"
1286
+ aria-expanded="false"
1287
+ aria-label="Toggle navigation"
1288
+ >
1289
+ <span class="navbar-toggler-icon"></span>
1290
+ </button>
1291
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
1292
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
1293
+ <li class="nav-item">
1294
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
1295
+ </li>
1296
+ <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
1297
+ <li class="nav-item dropdown">
1298
+ <a
1299
+ class="nav-link dropdown-toggle"
1300
+ href="#"
1301
+ role="button"
1302
+ data-bs-toggle="dropdown"
1303
+ aria-expanded="false"
1304
+ >
1305
+ Dropdown
1306
+ </a>
1307
+ <ul class="dropdown-menu">
1308
+ <li><a class="dropdown-item" href="#">Action</a></li>
1309
+ <li><a class="dropdown-item" href="#">Another action</a></li>
1310
+ <li><hr class="dropdown-divider" /></li>
1311
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
1312
+ </ul>
1313
+ </li>
1314
+ <li class="nav-item">
1315
+ <a class="nav-link disabled" aria-disabled="true">Disabled</a>
1316
+ </li>
1317
+ </ul>
1318
+ <form class="d-flex" role="search">
1319
+ <input
1320
+ class="form-control me-2"
1321
+ type="search"
1322
+ placeholder="Search"
1323
+ aria-label="Search"
1324
+ />
1325
+ <button class="btn btn-outline-success" type="submit">Search</button>
1326
+ </form>
1327
+ </div>
1328
+ </div>
1329
+ </nav>
1330
+ </div>
1331
+ <!--end::Body-->
1332
+ </div>
1333
+ <!--end::Navbar-->
1334
+ <!--begin::Pagination-->
1335
+ <div class="card card-info card-outline mb-4">
1336
+ <!--begin::Header-->
1337
+ <div class="card-header"><div class="card-title">Pagination</div></div>
1338
+ <!--end::Header-->
1339
+ <!--begin::Body-->
1340
+ <div class="card-body">
1341
+ <nav aria-label="Page navigation example">
1342
+ <ul class="pagination">
1343
+ <li class="page-item"><a class="page-link" href="#">Previous</a></li>
1344
+ <li class="page-item"><a class="page-link" href="#">1</a></li>
1345
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
1346
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
1347
+ <li class="page-item"><a class="page-link" href="#">Next</a></li>
1348
+ </ul>
1349
+ </nav>
1350
+ <hr />
1351
+ <nav aria-label="Page navigation example">
1352
+ <ul class="pagination">
1353
+ <li class="page-item">
1354
+ <a class="page-link" href="#" aria-label="Previous">
1355
+ <span aria-hidden="true">&laquo;</span>
1356
+ </a>
287
1357
  </li>
288
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-filetype-js"></i>
289
- <p>
290
- Javascript
291
- <i class="nav-arrow bi bi-chevron-right"></i>
292
- </p>
293
- </a>
294
- <ul class="nav nav-treeview">
295
- <li class="nav-item"> <a href="../docs/javascript/treeview.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
296
- <p>Treeview</p>
297
- </a> </li>
298
- </ul>
1358
+ <li class="page-item"><a class="page-link" href="#">1</a></li>
1359
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
1360
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
1361
+ <li class="page-item">
1362
+ <a class="page-link" href="#" aria-label="Next">
1363
+ <span aria-hidden="true">&raquo;</span>
1364
+ </a>
299
1365
  </li>
300
- <li class="nav-item"> <a href="../docs/browser-support.html" class="nav-link"> <i class="nav-icon bi bi-browser-edge"></i>
301
- <p>Browser Support</p>
302
- </a> </li>
303
- <li class="nav-item"> <a href="../docs/how-to-contribute.html" class="nav-link"> <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
304
- <p>How To Contribute</p>
305
- </a> </li>
306
- <li class="nav-item"> <a href="../docs/faq.html" class="nav-link"> <i class="nav-icon bi bi-question-circle-fill"></i>
307
- <p>FAQ</p>
308
- </a> </li>
309
- <li class="nav-item"> <a href="../docs/license.html" class="nav-link"> <i class="nav-icon bi bi-patch-check-fill"></i>
310
- <p>License</p>
311
- </a> </li>
312
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
313
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
314
- <p>Level 1</p>
315
- </a> </li>
316
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
317
- <p>
318
- Level 1
319
- <i class="nav-arrow bi bi-chevron-right"></i>
320
- </p>
321
- </a>
322
- <ul class="nav nav-treeview">
323
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
324
- <p>Level 2</p>
325
- </a> </li>
326
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
327
- <p>
328
- Level 2
329
- <i class="nav-arrow bi bi-chevron-right"></i>
330
- </p>
331
- </a>
332
- <ul class="nav nav-treeview">
333
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
334
- <p>Level 3</p>
335
- </a> </li>
336
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
337
- <p>Level 3</p>
338
- </a> </li>
339
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
340
- <p>Level 3</p>
341
- </a> </li>
342
- </ul>
343
- </li>
344
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
345
- <p>Level 2</p>
346
- </a> </li>
347
- </ul>
1366
+ </ul>
1367
+ </nav>
1368
+ <hr />
1369
+ <nav aria-label="...">
1370
+ <ul class="pagination">
1371
+ <li class="page-item disabled"><a class="page-link">Previous</a></li>
1372
+ <li class="page-item active" aria-current="page">
1373
+ <a class="page-link" href="#">1</a>
348
1374
  </li>
349
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
350
- <p>Level 1</p>
351
- </a> </li>
352
- <li class="nav-header">LABELS</li>
353
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-danger"></i>
354
- <p class="text">Important</p>
355
- </a> </li>
356
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-warning"></i>
357
- <p>Warning</p>
358
- </a> </li>
359
- <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-info"></i>
360
- <p>Informational</p>
361
- </a> </li>
362
- </ul> <!--end::Sidebar Menu-->
363
- </nav>
364
- </div> <!--end::Sidebar Wrapper-->
365
- </aside> <!--end::Sidebar--> <!--begin::App Main-->
366
- <main class="app-main"> <!--begin::App Content Header-->
367
- <div class="app-content-header"> <!--begin::Container-->
368
- <div class="container-fluid"> <!--begin::Row-->
369
- <div class="row">
370
- <div class="col-sm-6">
371
- <h3 class="mb-0">General UI Elements</h3>
1375
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
1376
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
1377
+ <li class="page-item"><a class="page-link" href="#">Next</a></li>
1378
+ </ul>
1379
+ </nav>
1380
+ </div>
1381
+ <!--end::Body-->
1382
+ </div>
1383
+ <!--end::Pagination-->
1384
+ <!--begin::Placeholder-->
1385
+ <div class="card card-secondary card-outline mb-4">
1386
+ <!--begin::Header-->
1387
+ <div class="card-header"><div class="card-title">Placeholder</div></div>
1388
+ <!--end::Header-->
1389
+ <!--begin::Body-->
1390
+ <div class="card-body">
1391
+ <div class="card" aria-hidden="true">
1392
+ <div class="card-body">
1393
+ <h5 class="card-title placeholder-glow">
1394
+ <span class="placeholder col-6"></span>
1395
+ </h5>
1396
+ <p class="card-text placeholder-glow">
1397
+ <span class="placeholder col-7"></span>
1398
+ <span class="placeholder col-4"></span>
1399
+ <span class="placeholder col-4"></span>
1400
+ <span class="placeholder col-6"></span>
1401
+ <span class="placeholder col-8"></span>
1402
+ </p>
1403
+ </div>
1404
+ </div>
1405
+ </div>
1406
+ <!--end::Body-->
1407
+ </div>
1408
+ <!--end::Placeholder-->
1409
+ <!--begin::Progress-->
1410
+ <div class="card card-primary card-outline mb-4">
1411
+ <!--begin::Header-->
1412
+ <div class="card-header"><div class="card-title">Progress</div></div>
1413
+ <!--end::Header-->
1414
+ <!--begin::Body-->
1415
+ <div class="card-body">
1416
+ <div
1417
+ class="progress mb-2"
1418
+ role="progressbar"
1419
+ aria-label="Success example"
1420
+ aria-valuenow="25"
1421
+ aria-valuemin="0"
1422
+ aria-valuemax="100"
1423
+ >
1424
+ <div
1425
+ class="progress-bar bg-success"
1426
+ style="width: 25%; border-radius: 0.375rem"
1427
+ ></div>
1428
+ </div>
1429
+ <div
1430
+ class="progress mb-2"
1431
+ role="progressbar"
1432
+ aria-label="Default striped example"
1433
+ aria-valuenow="10"
1434
+ aria-valuemin="0"
1435
+ aria-valuemax="100"
1436
+ >
1437
+ <div class="progress-bar" style="width: 10%; border-radius: 0.375rem"></div>
1438
+ </div>
1439
+ <div
1440
+ class="progress mb-2"
1441
+ role="progressbar"
1442
+ aria-label="Info striped example"
1443
+ aria-valuenow="50"
1444
+ aria-valuemin="0"
1445
+ aria-valuemax="100"
1446
+ >
1447
+ <div
1448
+ class="progress-bar progress-bar-striped bg-info"
1449
+ style="width: 50%; border-radius: 0.375rem"
1450
+ ></div>
1451
+ </div>
1452
+ <div
1453
+ class="progress mb-2"
1454
+ role="progressbar"
1455
+ aria-label="Warning striped example"
1456
+ aria-valuenow="75"
1457
+ aria-valuemin="0"
1458
+ aria-valuemax="100"
1459
+ >
1460
+ <div
1461
+ class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
1462
+ style="width: 75%; border-radius: 0.375rem"
1463
+ ></div>
1464
+ </div>
1465
+ <div
1466
+ class="progress mb-2"
1467
+ role="progressbar"
1468
+ aria-label="Danger striped example"
1469
+ aria-valuenow="100"
1470
+ aria-valuemin="0"
1471
+ aria-valuemax="100"
1472
+ >
1473
+ <div
1474
+ class="progress-bar progress-bar-striped progress-bar-animated bg-danger"
1475
+ style="width: 100%; border-radius: 0.375rem"
1476
+ ></div>
1477
+ </div>
1478
+ </div>
1479
+ <!--end::Body-->
1480
+ </div>
1481
+ <!--end::Progress-->
1482
+ <!--begin::Toast-->
1483
+ <div class="card card-primary card-outline mb-4">
1484
+ <!--begin::Header-->
1485
+ <div class="card-header"><div class="card-title">Toast</div></div>
1486
+ <!--end::Header-->
1487
+ <!--begin::Body-->
1488
+ <div class="card-body">
1489
+ <button
1490
+ type="button"
1491
+ class="btn btn-primary mb-2"
1492
+ data-bs-toggle="toast"
1493
+ data-bs-target="toastDefault"
1494
+ >
1495
+ Show default toast
1496
+ </button>
1497
+ <hr />
1498
+ <button
1499
+ type="button"
1500
+ class="btn btn-primary mb-2"
1501
+ data-bs-toggle="toast"
1502
+ data-bs-target="toastPrimary"
1503
+ >
1504
+ Show primary toast
1505
+ </button>
1506
+ <button
1507
+ type="button"
1508
+ class="btn btn-secondary mb-2"
1509
+ data-bs-toggle="toast"
1510
+ data-bs-target="toastSecondary"
1511
+ >
1512
+ Show secondary toast
1513
+ </button>
1514
+ <button
1515
+ type="button"
1516
+ class="btn btn-success mb-2"
1517
+ data-bs-toggle="toast"
1518
+ data-bs-target="toastSuccess"
1519
+ >
1520
+ Show success toast
1521
+ </button>
1522
+ <button
1523
+ type="button"
1524
+ class="btn btn-danger mb-2"
1525
+ data-bs-toggle="toast"
1526
+ data-bs-target="toastDanger"
1527
+ >
1528
+ Show danger toast
1529
+ </button>
1530
+ <button
1531
+ type="button"
1532
+ class="btn btn-warning mb-2"
1533
+ data-bs-toggle="toast"
1534
+ data-bs-target="toastWarning"
1535
+ >
1536
+ Show warning toast
1537
+ </button>
1538
+ <button
1539
+ type="button"
1540
+ class="btn btn-info mb-2"
1541
+ data-bs-toggle="toast"
1542
+ data-bs-target="toastInfo"
1543
+ >
1544
+ Show info toast
1545
+ </button>
1546
+ <button
1547
+ type="button"
1548
+ class="btn btn-light mb-2"
1549
+ data-bs-toggle="toast"
1550
+ data-bs-target="toastLight"
1551
+ >
1552
+ Show light toast
1553
+ </button>
1554
+ <button
1555
+ type="button"
1556
+ class="btn btn-dark mb-2"
1557
+ data-bs-toggle="toast"
1558
+ data-bs-target="toastDark"
1559
+ >
1560
+ Show dark toast
1561
+ </button>
1562
+ <div class="toast-container position-fixed bottom-0 end-0 p-3">
1563
+ <div
1564
+ id="toastDefault"
1565
+ class="toast"
1566
+ role="alert"
1567
+ aria-live="assertive"
1568
+ aria-atomic="true"
1569
+ >
1570
+ <div class="toast-header">
1571
+ <i class="bi bi-circle me-2"></i>
1572
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1573
+ <button
1574
+ type="button"
1575
+ class="btn-close"
1576
+ data-bs-dismiss="toast"
1577
+ aria-label="Close"
1578
+ ></button>
372
1579
  </div>
373
- <div class="col-sm-6">
374
- <ol class="breadcrumb float-sm-end">
375
- <li class="breadcrumb-item"><a href="#">Home</a></li>
376
- <li class="breadcrumb-item active" aria-current="page"> General UI Elements </li>
377
- </ol>
1580
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1581
+ </div>
1582
+ <div
1583
+ id="toastPrimary"
1584
+ class="toast toast-primary"
1585
+ role="alert"
1586
+ aria-live="assertive"
1587
+ aria-atomic="true"
1588
+ >
1589
+ <div class="toast-header">
1590
+ <i class="bi bi-circle me-2"></i>
1591
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1592
+ <button
1593
+ type="button"
1594
+ class="btn-close"
1595
+ data-bs-dismiss="toast"
1596
+ aria-label="Close"
1597
+ ></button>
378
1598
  </div>
379
- </div> <!--end::Row-->
380
- </div> <!--end::Container-->
381
- </div> <!--end::App Content Header--> <!--begin::App Content-->
382
- <div class="app-content"> <!--begin::Container-->
383
- <div class="container-fluid"> <!--begin::Row-->
384
- <div class="row g-4"> <!--begin::Col-->
385
- <div class="col-12">
386
- <div class="callout callout-info">
387
- For detailed documentation of Components visit <a href="https://getbootstrap.com/docs/5.3/components/" target="_blank" rel="noopener noreferrer" class="callout-link">
388
- Bootstrap Components
389
- </a> </div>
390
- </div> <!--end::Col--> <!--begin::Col-->
391
- <div class="col-md-6"> <!--begin::Accordion-->
392
- <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
393
- <div class="card-header">
394
- <div class="card-title">Accordion</div>
395
- </div> <!--end::Header--> <!--begin::Body-->
396
- <div class="card-body">
397
- <div class="accordion" id="accordionExample">
398
- <div class="accordion-item">
399
- <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
400
- Accordion Item #1
401
- </button> </h2>
402
- <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
403
- <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin
404
- adds the appropriate classes that we use to style
405
- each element. These classes control the overall
406
- appearance, as well as the showing and hiding via
407
- CSS transitions. You can modify any of this with
408
- custom CSS or overriding our default variables. It's
409
- also worth noting that just about any HTML can go
410
- within the <code>.accordion-body</code>, though the
411
- transition does limit overflow.
412
- </div>
413
- </div>
414
- </div>
415
- <div class="accordion-item">
416
- <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
417
- Accordion Item #2
418
- </button> </h2>
419
- <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
420
- <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin
421
- adds the appropriate classes that we use to style
422
- each element. These classes control the overall
423
- appearance, as well as the showing and hiding via
424
- CSS transitions. You can modify any of this with
425
- custom CSS or overriding our default variables. It's
426
- also worth noting that just about any HTML can go
427
- within the <code>.accordion-body</code>, though the
428
- transition does limit overflow.
429
- </div>
430
- </div>
431
- </div>
432
- <div class="accordion-item">
433
- <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
434
- Accordion Item #3
435
- </button> </h2>
436
- <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
437
- <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin
438
- adds the appropriate classes that we use to style
439
- each element. These classes control the overall
440
- appearance, as well as the showing and hiding via
441
- CSS transitions. You can modify any of this with
442
- custom CSS or overriding our default variables. It's
443
- also worth noting that just about any HTML can go
444
- within the <code>.accordion-body</code>, though the
445
- transition does limit overflow.
446
- </div>
447
- </div>
448
- </div>
449
- </div>
450
- </div> <!--end::Body-->
451
- </div> <!--end::Accordion--> <!--begin::Alert-->
452
- <div class="card card-success card-outline mb-4"> <!--begin::Header-->
453
- <div class="card-header">
454
- <div class="card-title">Alert</div>
455
- </div> <!--end::Header--> <!--begin::Body-->
456
- <div class="card-body">
457
- <div class="alert alert-primary" role="alert">
458
- A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
459
- </div>
460
- <div class="alert alert-secondary" role="alert">
461
- A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
462
- </div>
463
- <div class="alert alert-success" role="alert">
464
- A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
465
- </div>
466
- <div class="alert alert-danger" role="alert">
467
- A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
468
- </div>
469
- <div class="alert alert-warning" role="alert">
470
- A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
471
- </div>
472
- <div class="alert alert-info" role="alert">
473
- A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
474
- </div>
475
- <div class="alert alert-light" role="alert">
476
- A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
477
- </div>
478
- <div class="alert alert-dark" role="alert">
479
- A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
480
- </div>
481
- </div> <!--end::Body-->
482
- </div> <!--end::Alert--> <!--begin::Badge-->
483
- <div class="card card-warning card-outline mb-4"> <!--begin::Header-->
484
- <div class="card-header">
485
- <div class="card-title">Badge</div>
486
- </div> <!--end::Header--> <!--begin::Body-->
487
- <div class="card-body">
488
- <h1>
489
- Example heading <span class="badge bg-secondary">New</span> </h1>
490
- <h2>
491
- Example heading <span class="badge bg-secondary">New</span> </h2>
492
- <h3>
493
- Example heading <span class="badge bg-secondary">New</span> </h3>
494
- <h4>
495
- Example heading <span class="badge bg-secondary">New</span> </h4>
496
- <h5>
497
- Example heading <span class="badge bg-secondary">New</span> </h5>
498
- <h6>
499
- Example heading <span class="badge bg-secondary">New</span> </h6>
500
- <hr> <button type="button" class="btn btn-primary">
501
- Notifications <span class="badge text-bg-secondary">4</span> </button>
502
- <hr> <button type="button" class="btn btn-primary position-relative">
503
- Inbox
504
- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
505
- 99+
506
- <span class="visually-hidden">unread messages</span> </span> </button>
507
- <hr> <button type="button" class="btn btn-primary position-relative">
508
- Profile
509
- <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> <span class="visually-hidden">New alerts</span> </span> </button>
510
- <hr> <span class="badge text-bg-primary">Primary</span> <span class="badge text-bg-secondary">Secondary</span> <span class="badge text-bg-success">Success</span> <span class="badge text-bg-danger">Danger</span> <span class="badge text-bg-warning">Warning</span> <span class="badge text-bg-info">Info</span> <span class="badge text-bg-light">Light</span> <span class="badge text-bg-dark">Dark</span>
511
- <hr> <span class="badge rounded-pill text-bg-primary">Primary</span> <span class="badge rounded-pill text-bg-secondary">Secondary</span> <span class="badge rounded-pill text-bg-success">Success</span> <span class="badge rounded-pill text-bg-danger">Danger</span> <span class="badge rounded-pill text-bg-warning">Warning</span> <span class="badge rounded-pill text-bg-info">Info</span> <span class="badge rounded-pill text-bg-light">Light</span> <span class="badge rounded-pill text-bg-dark">Dark</span>
512
- </div> <!--end::Body-->
513
- </div> <!--end::Badge--> <!--begin::Button-->
514
- <div class="card card-danger card-outline mb-4"> <!--begin::Header-->
515
- <div class="card-header">
516
- <div class="card-title">Button</div>
517
- </div> <!--end::Header--> <!--begin::Body-->
518
- <div class="card-body"> <button type="button" class="btn btn-primary mb-2">Primary</button> <button type="button" class="btn btn-secondary mb-2">Secondary</button> <button type="button" class="btn btn-success mb-2">Success</button> <button type="button" class="btn btn-danger mb-2">Danger</button> <button type="button" class="btn btn-warning mb-2">Warning</button> <button type="button" class="btn btn-info mb-2">Info</button> <button type="button" class="btn btn-light mb-2">Light</button> <button type="button" class="btn btn-dark mb-2">Dark</button> <button type="button" class="btn btn-link mb-2">Link</button>
519
- <hr> <button type="button" class="btn btn-primary mb-2" disabled>Primary (disabled)</button> <button type="button" class="btn btn-secondary mb-2" disabled>Secondary (disabled)</button> <button type="button" class="btn btn-success mb-2" disabled>Success (disabled)</button> <button type="button" class="btn btn-danger mb-2" disabled>Danger (disabled)</button> <button type="button" class="btn btn-warning mb-2" disabled>Warning (disabled)</button> <button type="button" class="btn btn-info mb-2" disabled>Info (disabled)</button>
520
- <hr> <button type="button" class="btn btn-outline-primary mb-2">Primary</button> <button type="button" class="btn btn-outline-secondary mb-2">Secondary</button> <button type="button" class="btn btn-outline-success mb-2">Success</button> <button type="button" class="btn btn-outline-danger mb-2">Danger</button> <button type="button" class="btn btn-outline-warning mb-2">Warning</button> <button type="button" class="btn btn-outline-info mb-2">Info</button> <button type="button" class="btn btn-outline-light mb-2">Light</button> <button type="button" class="btn btn-outline-dark mb-2">Dark</button>
521
- <hr> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-warning btn-sm">Small button</button> <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">Custom button</button>
522
- </div> <!--end::Body-->
523
- </div> <!--end::Button-->
524
- </div> <!--end::Col--> <!--begin::Col-->
525
- <div class="col-md-6"> <!--begin::Button Group-->
526
- <div class="card card-info card-outline mb-4"> <!--begin::Header-->
527
- <div class="card-header">
528
- <div class="card-title">Button Group</div>
529
- </div> <!--end::Header--> <!--begin::Body-->
530
- <div class="card-body">
531
- <div class="btn-group mb-2" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>
532
- <div class="btn-group mb-2" role="group" aria-label="Basic mixed styles example"> <button type="button" class="btn btn-danger">Left</button> <button type="button" class="btn btn-warning">Middle</button> <button type="button" class="btn btn-success">Right</button> </div>
533
- <div class="btn-group mb-2" role="group" aria-label="Basic outlined example"> <button type="button" class="btn btn-outline-primary">Left</button> <button type="button" class="btn btn-outline-primary">Middle</button> <button type="button" class="btn btn-outline-primary">Right</button> </div>
534
- <hr>
535
- <div class="btn-group mb-2" role="group" aria-label="Basic checkbox toggle button group"> <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label> <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label> <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label> </div>
536
- <div class="btn-group mb-2" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label> </div>
537
- <hr>
538
- <div class="btn-group mb-2" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button>
539
- <div class="btn-group" role="group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
540
- Dropdown
541
- </button>
542
- <ul class="dropdown-menu">
543
- <li> <a class="dropdown-item" href="#">Dropdown link</a> </li>
544
- <li> <a class="dropdown-item" href="#">Dropdown link</a> </li>
545
- </ul>
546
- </div>
547
- </div>
548
- </div> <!--end::Body-->
549
- </div> <!--end::Button Group--> <!--begin::Collapse-->
550
- <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
551
- <div class="card-header">
552
- <div class="card-title">Collapse</div>
553
- </div> <!--end::Header--> <!--begin::Body-->
554
- <div class="card-body">
555
- <p class="d-inline-flex gap-1"> <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
556
- Link with href
557
- </a> <button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
558
- Button with data-bs-target
559
- </button> </p>
560
- <div class="collapse" id="collapseExample">
561
- <div class="card card-body">
562
- Some placeholder content for the collapse component.
563
- This panel is hidden by default but revealed when the
564
- user activates the relevant trigger.
565
- </div>
566
- </div>
567
- </div> <!--end::Body-->
568
- </div> <!--end::Collapse--> <!--begin::Dropdowns-->
569
- <div class="card card-success card-outline mb-4"> <!--begin::Header-->
570
- <div class="card-header">
571
- <div class="card-title">Dropdowns</div>
572
- </div> <!--end::Header--> <!--begin::Body-->
573
- <div class="card-body">
574
- <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
575
- Primary
576
- </button>
577
- <ul class="dropdown-menu">
578
- <li><a class="dropdown-item" href="#">Action</a></li>
579
- <li> <a class="dropdown-item" href="#">Another action</a> </li>
580
- <li> <a class="dropdown-item" href="#">Something else here</a> </li>
581
- <li>
582
- <hr class="dropdown-divider">
583
- </li>
584
- <li> <a class="dropdown-item" href="#">Separated link</a> </li>
585
- </ul>
586
- </div>
587
- <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
588
- Secondary
589
- </button>
590
- <ul class="dropdown-menu">
591
- <li><a class="dropdown-item" href="#">Action</a></li>
592
- <li> <a class="dropdown-item" href="#">Another action</a> </li>
593
- <li> <a class="dropdown-item" href="#">Something else here</a> </li>
594
- <li>
595
- <hr class="dropdown-divider">
596
- </li>
597
- <li> <a class="dropdown-item" href="#">Separated link</a> </li>
598
- </ul>
599
- </div>
600
- <hr>
601
- <div class="btn-group"> <button type="button" class="btn btn-danger">Danger Split</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button>
602
- <ul class="dropdown-menu">
603
- <li><a class="dropdown-item" href="#">Action</a></li>
604
- <li> <a class="dropdown-item" href="#">Another action</a> </li>
605
- <li> <a class="dropdown-item" href="#">Something else here</a> </li>
606
- <li>
607
- <hr class="dropdown-divider">
608
- </li>
609
- <li> <a class="dropdown-item" href="#">Separated link</a> </li>
610
- </ul>
611
- </div>
612
- <div class="btn-group"> <button type="button" class="btn btn-warning">Warning Split</button> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Toggle Dropdown</span> </button>
613
- <ul class="dropdown-menu">
614
- <li><a class="dropdown-item" href="#">Action</a></li>
615
- <li> <a class="dropdown-item" href="#">Another action</a> </li>
616
- <li> <a class="dropdown-item" href="#">Something else here</a> </li>
617
- <li>
618
- <hr class="dropdown-divider">
619
- </li>
620
- <li> <a class="dropdown-item" href="#">Separated link</a> </li>
621
- </ul>
622
- </div>
623
- </div> <!--end::Body-->
624
- </div> <!--end::Dropdowns--> <!--begin::List Group-->
625
- <div class="card card-warning card-outline mb-4"> <!--begin::Header-->
626
- <div class="card-header">
627
- <div class="card-title">List Group</div>
628
- </div> <!--end::Header--> <!--begin::Body-->
629
- <div class="card-body">
630
- <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
631
- The current link item
632
- </a> <a href="#" class="list-group-item list-group-item-action">A second link item</a> <a href="#" class="list-group-item list-group-item-action">A third link item</a> <a href="#" class="list-group-item list-group-item-action">A fourth link item</a> <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a> </div>
633
- </div> <!--end::Body-->
634
- </div> <!--end::List Group--> <!--begin::Navbar-->
635
- <div class="card card-danger card-outline mb-4"> <!--begin::Header-->
636
- <div class="card-header">
637
- <div class="card-title">Navbar</div>
638
- </div> <!--end::Header--> <!--begin::Body-->
639
- <div class="card-body">
640
- <nav class="navbar navbar-expand-lg bg-body-tertiary">
641
- <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
642
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
643
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
644
- <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li>
645
- <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
646
- <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
647
- Dropdown
648
- </a>
649
- <ul class="dropdown-menu">
650
- <li> <a class="dropdown-item" href="#">Action</a> </li>
651
- <li> <a class="dropdown-item" href="#">Another action</a> </li>
652
- <li>
653
- <hr class="dropdown-divider">
654
- </li>
655
- <li> <a class="dropdown-item" href="#">Something else here</a> </li>
656
- </ul>
657
- </li>
658
- <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li>
659
- </ul>
660
- <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form>
661
- </div>
662
- </div>
663
- </nav>
664
- </div> <!--end::Body-->
665
- </div> <!--end::Navbar--> <!--begin::Pagination-->
666
- <div class="card card-info card-outline mb-4"> <!--begin::Header-->
667
- <div class="card-header">
668
- <div class="card-title">Pagination</div>
669
- </div> <!--end::Header--> <!--begin::Body-->
670
- <div class="card-body">
671
- <nav aria-label="Page navigation example">
672
- <ul class="pagination">
673
- <li class="page-item"> <a class="page-link" href="#">Previous</a> </li>
674
- <li class="page-item"> <a class="page-link" href="#">1</a> </li>
675
- <li class="page-item"> <a class="page-link" href="#">2</a> </li>
676
- <li class="page-item"> <a class="page-link" href="#">3</a> </li>
677
- <li class="page-item"> <a class="page-link" href="#">Next</a> </li>
678
- </ul>
679
- </nav>
680
- <hr>
681
- <nav aria-label="Page navigation example">
682
- <ul class="pagination">
683
- <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li>
684
- <li class="page-item"> <a class="page-link" href="#">1</a> </li>
685
- <li class="page-item"> <a class="page-link" href="#">2</a> </li>
686
- <li class="page-item"> <a class="page-link" href="#">3</a> </li>
687
- <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li>
688
- </ul>
689
- </nav>
690
- <hr>
691
- <nav aria-label="...">
692
- <ul class="pagination">
693
- <li class="page-item disabled"> <a class="page-link">Previous</a> </li>
694
- <li class="page-item active" aria-current="page"> <a class="page-link" href="#">1</a> </li>
695
- <li class="page-item"> <a class="page-link" href="#">2</a> </li>
696
- <li class="page-item"> <a class="page-link" href="#">3</a> </li>
697
- <li class="page-item"> <a class="page-link" href="#">Next</a> </li>
698
- </ul>
699
- </nav>
700
- </div> <!--end::Body-->
701
- </div> <!--end::Pagination--> <!--begin::Placeholder-->
702
- <div class="card card-secondary card-outline mb-4"> <!--begin::Header-->
703
- <div class="card-header">
704
- <div class="card-title">Placeholder</div>
705
- </div> <!--end::Header--> <!--begin::Body-->
706
- <div class="card-body">
707
- <div class="card" aria-hidden="true">
708
- <div class="card-body">
709
- <h5 class="card-title placeholder-glow"> <span class="placeholder col-6"></span> </h5>
710
- <p class="card-text placeholder-glow"> <span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p>
711
- </div>
712
- </div>
713
- </div> <!--end::Body-->
714
- </div> <!--end::Placeholder--> <!--begin::Progress-->
715
- <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
716
- <div class="card-header">
717
- <div class="card-title">Progress</div>
718
- </div> <!--end::Header--> <!--begin::Body-->
719
- <div class="card-body">
720
- <div class="progress mb-2" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
721
- <div class="progress-bar bg-success" style="width: 25%; border-radius: 0.375rem;"></div>
722
- </div>
723
- <div class="progress mb-2" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
724
- <div class="progress-bar" style="width: 10%; border-radius: 0.375rem;"></div>
725
- </div>
726
- <div class="progress mb-2" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
727
- <div class="progress-bar progress-bar-striped bg-info" style="width: 50%; border-radius: 0.375rem;"></div>
728
- </div>
729
- <div class="progress mb-2" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
730
- <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%; border-radius: 0.375rem;"></div>
731
- </div>
732
- <div class="progress mb-2" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
733
- <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%; border-radius: 0.375rem;"></div>
734
- </div>
735
- </div> <!--end::Body-->
736
- </div> <!--end::Progress--> <!--begin::Toast-->
737
- <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
738
- <div class="card-header">
739
- <div class="card-title">Toast</div>
740
- </div> <!--end::Header--> <!--begin::Body-->
741
- <div class="card-body"> <button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastDefault">Show default toast</button>
742
- <hr> <button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastPrimary">Show primary toast</button> <button type="button" class="btn btn-secondary mb-2" data-bs-toggle="toast" data-bs-target="toastSecondary">Show secondary toast</button> <button type="button" class="btn btn-success mb-2" data-bs-toggle="toast" data-bs-target="toastSuccess">Show success toast</button> <button type="button" class="btn btn-danger mb-2" data-bs-toggle="toast" data-bs-target="toastDanger">Show danger toast</button> <button type="button" class="btn btn-warning mb-2" data-bs-toggle="toast" data-bs-target="toastWarning">Show warning toast</button> <button type="button" class="btn btn-info mb-2" data-bs-toggle="toast" data-bs-target="toastInfo">Show info toast</button> <button type="button" class="btn btn-light mb-2" data-bs-toggle="toast" data-bs-target="toastLight">Show light toast</button> <button type="button" class="btn btn-dark mb-2" data-bs-toggle="toast" data-bs-target="toastDark">Show dark toast</button>
743
- <div class="toast-container position-fixed bottom-0 end-0 p-3">
744
- <div id="toastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
745
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
746
- <div class="toast-body">
747
- Hello, world! This is a toast message.
748
- </div>
749
- </div>
750
- <div id="toastPrimary" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true">
751
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
752
- <div class="toast-body">
753
- Hello, world! This is a toast message.
754
- </div>
755
- </div>
756
- <div id="toastSecondary" class="toast toast-secondary" role="alert" aria-live="assertive" aria-atomic="true">
757
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
758
- <div class="toast-body">
759
- Hello, world! This is a toast message.
760
- </div>
761
- </div>
762
- <div id="toastSuccess" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
763
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
764
- <div class="toast-body">
765
- Hello, world! This is a toast message.
766
- </div>
767
- </div>
768
- <div id="toastDanger" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
769
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
770
- <div class="toast-body">
771
- Hello, world! This is a toast message.
772
- </div>
773
- </div>
774
- <div id="toastWarning" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
775
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
776
- <div class="toast-body">
777
- Hello, world! This is a toast message.
778
- </div>
779
- </div>
780
- <div id="toastInfo" class="toast toast-info" role="alert" aria-live="assertive" aria-atomic="true">
781
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
782
- <div class="toast-body">
783
- Hello, world! This is a toast message.
784
- </div>
785
- </div>
786
- <div id="toastLight" class="toast toast-light" role="alert" aria-live="assertive" aria-atomic="true">
787
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
788
- <div class="toast-body">
789
- Hello, world! This is a toast message.
790
- </div>
791
- </div>
792
- <div id="toastDark" class="toast toast-dark" role="alert" aria-live="assertive" aria-atomic="true">
793
- <div class="toast-header"> <i class="bi bi-circle me-2"></i> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div>
794
- <div class="toast-body">
795
- Hello, world! This is a toast message.
796
- </div>
797
- </div>
798
- </div>
799
- </div> <!--end::Body-->
800
- </div> <!--end::Toast--> <!--begin::Tooltip-->
801
- <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
802
- <div class="card-header">
803
- <div class="card-title">Tooltip</div>
804
- </div> <!--end::Header--> <!--begin::Body-->
805
- <div class="card-body">
806
- <p class="muted">
807
- Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer.
808
- Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips
809
- would look when used in real-world situations. So
810
- hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
811
- </p>
812
- </div> <!--end::Body-->
813
- </div> <!--end::Toast--> <!--begin::Spinner-->
814
- <div class="card card-success card-outline mb-4"> <!--begin::Header-->
815
- <div class="card-header">
816
- <div class="card-title">Spinner</div>
817
- </div> <!--end::Header--> <!--begin::Body-->
818
- <div class="card-body">
819
- <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div>
820
- <div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div>
821
- <div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span> </div>
822
- <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div>
823
- <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div>
824
- <div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span> </div>
825
- <div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span> </div>
826
- <div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
827
- </div> <!--end::Body-->
828
- </div> <!--end::Spinner-->
829
- </div> <!--end::Col-->
830
- </div> <!--end::Row-->
831
- </div> <!--end::Container-->
832
- </div> <!--end::App Content-->
833
- </main> <!--end::App Main--> <!--begin::Footer-->
834
- <footer class="app-footer"> <!--begin::To the end-->
835
- <div class="float-end d-none d-sm-inline">Anything you want</div> <!--end::To the end--> <!--begin::Copyright--> <strong>
836
- Copyright &copy; 2014-2024&nbsp;
837
- <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
838
- </strong>
839
- All rights reserved.
840
- <!--end::Copyright-->
841
- </footer> <!--end::Footer-->
842
- </div> <!--end::App Wrapper--> <!--begin::Script--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
843
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script> <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
844
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script> <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
845
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script> <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
846
- <script src="../../../dist/js/adminlte.js"></script> <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1599
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1600
+ </div>
1601
+ <div
1602
+ id="toastSecondary"
1603
+ class="toast toast-secondary"
1604
+ role="alert"
1605
+ aria-live="assertive"
1606
+ aria-atomic="true"
1607
+ >
1608
+ <div class="toast-header">
1609
+ <i class="bi bi-circle me-2"></i>
1610
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1611
+ <button
1612
+ type="button"
1613
+ class="btn-close"
1614
+ data-bs-dismiss="toast"
1615
+ aria-label="Close"
1616
+ ></button>
1617
+ </div>
1618
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1619
+ </div>
1620
+ <div
1621
+ id="toastSuccess"
1622
+ class="toast toast-success"
1623
+ role="alert"
1624
+ aria-live="assertive"
1625
+ aria-atomic="true"
1626
+ >
1627
+ <div class="toast-header">
1628
+ <i class="bi bi-circle me-2"></i>
1629
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1630
+ <button
1631
+ type="button"
1632
+ class="btn-close"
1633
+ data-bs-dismiss="toast"
1634
+ aria-label="Close"
1635
+ ></button>
1636
+ </div>
1637
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1638
+ </div>
1639
+ <div
1640
+ id="toastDanger"
1641
+ class="toast toast-danger"
1642
+ role="alert"
1643
+ aria-live="assertive"
1644
+ aria-atomic="true"
1645
+ >
1646
+ <div class="toast-header">
1647
+ <i class="bi bi-circle me-2"></i>
1648
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1649
+ <button
1650
+ type="button"
1651
+ class="btn-close"
1652
+ data-bs-dismiss="toast"
1653
+ aria-label="Close"
1654
+ ></button>
1655
+ </div>
1656
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1657
+ </div>
1658
+ <div
1659
+ id="toastWarning"
1660
+ class="toast toast-warning"
1661
+ role="alert"
1662
+ aria-live="assertive"
1663
+ aria-atomic="true"
1664
+ >
1665
+ <div class="toast-header">
1666
+ <i class="bi bi-circle me-2"></i>
1667
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1668
+ <button
1669
+ type="button"
1670
+ class="btn-close"
1671
+ data-bs-dismiss="toast"
1672
+ aria-label="Close"
1673
+ ></button>
1674
+ </div>
1675
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1676
+ </div>
1677
+ <div
1678
+ id="toastInfo"
1679
+ class="toast toast-info"
1680
+ role="alert"
1681
+ aria-live="assertive"
1682
+ aria-atomic="true"
1683
+ >
1684
+ <div class="toast-header">
1685
+ <i class="bi bi-circle me-2"></i>
1686
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1687
+ <button
1688
+ type="button"
1689
+ class="btn-close"
1690
+ data-bs-dismiss="toast"
1691
+ aria-label="Close"
1692
+ ></button>
1693
+ </div>
1694
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1695
+ </div>
1696
+ <div
1697
+ id="toastLight"
1698
+ class="toast toast-light"
1699
+ role="alert"
1700
+ aria-live="assertive"
1701
+ aria-atomic="true"
1702
+ >
1703
+ <div class="toast-header">
1704
+ <i class="bi bi-circle me-2"></i>
1705
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1706
+ <button
1707
+ type="button"
1708
+ class="btn-close"
1709
+ data-bs-dismiss="toast"
1710
+ aria-label="Close"
1711
+ ></button>
1712
+ </div>
1713
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1714
+ </div>
1715
+ <div
1716
+ id="toastDark"
1717
+ class="toast toast-dark"
1718
+ role="alert"
1719
+ aria-live="assertive"
1720
+ aria-atomic="true"
1721
+ >
1722
+ <div class="toast-header">
1723
+ <i class="bi bi-circle me-2"></i>
1724
+ <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1725
+ <button
1726
+ type="button"
1727
+ class="btn-close"
1728
+ data-bs-dismiss="toast"
1729
+ aria-label="Close"
1730
+ ></button>
1731
+ </div>
1732
+ <div class="toast-body">Hello, world! This is a toast message.</div>
1733
+ </div>
1734
+ </div>
1735
+ </div>
1736
+ <!--end::Body-->
1737
+ </div>
1738
+ <!--end::Toast-->
1739
+ <!--begin::Tooltip-->
1740
+ <div class="card card-primary card-outline mb-4">
1741
+ <!--begin::Header-->
1742
+ <div class="card-header"><div class="card-title">Tooltip</div></div>
1743
+ <!--end::Header-->
1744
+ <!--begin::Body-->
1745
+ <div class="card-body">
1746
+ <p class="muted">
1747
+ Placeholder text to demonstrate some
1748
+ <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip"
1749
+ >inline links</a
1750
+ >
1751
+ with tooltips. This is now just filler, no killer. Content placed here just to
1752
+ mimic the presence of
1753
+ <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip"
1754
+ >real text</a
1755
+ >. And all that just to give you an idea of how tooltips would look when used
1756
+ in real-world situations. So hopefully you've now seen how
1757
+ <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too"
1758
+ >these tooltips on links</a
1759
+ >
1760
+ can work in practice, once you use them on
1761
+ <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!"
1762
+ >your own</a
1763
+ >
1764
+ site or project.
1765
+ </p>
1766
+ </div>
1767
+ <!--end::Body-->
1768
+ </div>
1769
+ <!--end::Toast-->
1770
+ <!--begin::Spinner-->
1771
+ <div class="card card-success card-outline mb-4">
1772
+ <!--begin::Header-->
1773
+ <div class="card-header"><div class="card-title">Spinner</div></div>
1774
+ <!--end::Header-->
1775
+ <!--begin::Body-->
1776
+ <div class="card-body">
1777
+ <div class="spinner-border text-primary" role="status">
1778
+ <span class="visually-hidden">Loading...</span>
1779
+ </div>
1780
+ <div class="spinner-border text-secondary" role="status">
1781
+ <span class="visually-hidden">Loading...</span>
1782
+ </div>
1783
+ <div class="spinner-border text-success" role="status">
1784
+ <span class="visually-hidden">Loading...</span>
1785
+ </div>
1786
+ <div class="spinner-border text-danger" role="status">
1787
+ <span class="visually-hidden">Loading...</span>
1788
+ </div>
1789
+ <div class="spinner-border text-warning" role="status">
1790
+ <span class="visually-hidden">Loading...</span>
1791
+ </div>
1792
+ <div class="spinner-border text-info" role="status">
1793
+ <span class="visually-hidden">Loading...</span>
1794
+ </div>
1795
+ <div class="spinner-border text-light" role="status">
1796
+ <span class="visually-hidden">Loading...</span>
1797
+ </div>
1798
+ <div class="spinner-border text-dark" role="status">
1799
+ <span class="visually-hidden">Loading...</span>
1800
+ </div>
1801
+ </div>
1802
+ <!--end::Body-->
1803
+ </div>
1804
+ <!--end::Spinner-->
1805
+ </div>
1806
+ <!--end::Col-->
1807
+ </div>
1808
+ <!--end::Row-->
1809
+ </div>
1810
+ <!--end::Container-->
1811
+ </div>
1812
+ <!--end::App Content-->
1813
+ </main>
1814
+ <!--end::App Main-->
1815
+ <!--begin::Footer-->
1816
+ <footer class="app-footer">
1817
+ <!--begin::To the end-->
1818
+ <div class="float-end d-none d-sm-inline">Anything you want</div>
1819
+ <!--end::To the end-->
1820
+ <!--begin::Copyright-->
1821
+ <strong>
1822
+ Copyright &copy; 2014-2024&nbsp;
1823
+ <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1824
+ </strong>
1825
+ All rights reserved.
1826
+ <!--end::Copyright-->
1827
+ </footer>
1828
+ <!--end::Footer-->
1829
+ </div>
1830
+ <!--end::App Wrapper-->
1831
+ <!--begin::Script-->
1832
+ <!--begin::Third Party Plugin(OverlayScrollbars)-->
1833
+ <script
1834
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
1835
+ integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
1836
+ crossorigin="anonymous"
1837
+ ></script>
1838
+ <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
1839
+ <script
1840
+ src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
1841
+ integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
1842
+ crossorigin="anonymous"
1843
+ ></script>
1844
+ <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
1845
+ <script
1846
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
1847
+ integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
1848
+ crossorigin="anonymous"
1849
+ ></script>
1850
+ <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
1851
+ <script src="../../../dist/js/adminlte.js"></script>
1852
+ <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
847
1853
  <script>
848
- const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
849
- const Default = {
850
- scrollbarTheme: "os-theme-light",
851
- scrollbarAutoHide: "leave",
852
- scrollbarClickScroll: true,
853
- };
854
- document.addEventListener("DOMContentLoaded", function() {
855
- const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
856
- if (
857
- sidebarWrapper &&
858
- typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
859
- ) {
860
- OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
861
- scrollbars: {
862
- theme: Default.scrollbarTheme,
863
- autoHide: Default.scrollbarAutoHide,
864
- clickScroll: Default.scrollbarClickScroll,
865
- },
866
- });
867
- }
868
- });
869
- </script> <!--end::OverlayScrollbars Configure--> <!--begin::Bootstrap Tooltips-->
1854
+ const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
1855
+ const Default = {
1856
+ scrollbarTheme: 'os-theme-light',
1857
+ scrollbarAutoHide: 'leave',
1858
+ scrollbarClickScroll: true,
1859
+ };
1860
+ document.addEventListener('DOMContentLoaded', function () {
1861
+ const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1862
+ if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1863
+ OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1864
+ scrollbars: {
1865
+ theme: Default.scrollbarTheme,
1866
+ autoHide: Default.scrollbarAutoHide,
1867
+ clickScroll: Default.scrollbarClickScroll,
1868
+ },
1869
+ });
1870
+ }
1871
+ });
1872
+ </script>
1873
+ <!--end::OverlayScrollbars Configure-->
1874
+ <!--begin::Bootstrap Tooltips-->
870
1875
  <script>
871
- const tooltipTriggerList = document.querySelectorAll(
872
- '[data-bs-toggle="tooltip"]',
873
- );
874
- const tooltipList = [...tooltipTriggerList].map(
875
- (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
876
- );
877
- </script> <!--end::Bootstrap Tooltips--> <!--begin::Bootstrap Toasts-->
1876
+ const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
1877
+ const tooltipList = [...tooltipTriggerList].map(
1878
+ (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl),
1879
+ );
1880
+ </script>
1881
+ <!--end::Bootstrap Tooltips-->
1882
+ <!--begin::Bootstrap Toasts-->
878
1883
  <script>
879
- const toastTriggerList = document.querySelectorAll(
880
- '[data-bs-toggle="toast"]',
881
- );
882
- toastTriggerList.forEach((btn) => {
883
- btn.addEventListener("click", (event) => {
884
- event.preventDefault();
885
- const toastEle = document.getElementById(
886
- btn.getAttribute("data-bs-target"),
887
- );
888
- const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
889
- toastBootstrap.show();
890
- });
1884
+ const toastTriggerList = document.querySelectorAll('[data-bs-toggle="toast"]');
1885
+ toastTriggerList.forEach((btn) => {
1886
+ btn.addEventListener('click', (event) => {
1887
+ event.preventDefault();
1888
+ const toastEle = document.getElementById(btn.getAttribute('data-bs-target'));
1889
+ const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
1890
+ toastBootstrap.show();
891
1891
  });
892
- </script> <!--end::Bootstrap Toasts--> <!--end::Script-->
893
- </body><!--end::Body-->
894
-
895
- </html>
1892
+ });
1893
+ </script>
1894
+ <!--end::Bootstrap Toasts-->
1895
+ <!--end::Script-->
1896
+ </body>
1897
+ <!--end::Body-->
1898
+ </html>