admin-lte 4.0.0-alpha1 → 4.0.0-alpha2
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.
- package/.bundlewatch.config.json +2 -2
- package/.cache/.eslintcache +1 -0
- package/.cache/.stylelintcache +1 -0
- package/.eslintignore +1 -0
- package/.eslintrc.json +16 -0
- package/.stylelintrc.json +47 -0
- package/LICENSE +1 -1
- package/README.md +5 -6
- package/dist/css/adminlte.css +2383 -2754
- package/dist/css/adminlte.css.map +1 -1
- package/dist/css/adminlte.min.css +2 -2
- package/dist/css/adminlte.min.css.map +1 -1
- package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
- package/dist/css/adminlte.rtl.css.map +1 -0
- package/dist/css/adminlte.rtl.min.css +7 -0
- package/dist/css/adminlte.rtl.min.css.map +1 -0
- package/dist/js/adminlte.js +173 -182
- package/dist/js/adminlte.js.map +1 -1
- package/dist/js/adminlte.min.js +6 -1
- package/dist/js/adminlte.min.js.map +1 -1
- package/dist/pages/UI/timeline.html +698 -0
- package/dist/pages/docs/browser-support.html +614 -0
- package/dist/pages/docs/color-mode.html +855 -0
- package/dist/pages/docs/components/main-header.html +926 -0
- package/dist/pages/docs/layout.html +617 -0
- package/dist/pages/docs.html +617 -0
- package/dist/pages/examples/login.html +114 -187
- package/dist/pages/examples/register.html +117 -190
- package/dist/pages/forms/general.html +598 -647
- package/dist/pages/index.html +1091 -0
- package/dist/pages/index2.html +1452 -0
- package/dist/pages/index3.html +950 -0
- package/dist/pages/layout/fixed-sidebar.html +590 -638
- package/dist/pages/layout/layout-rtl.html +623 -0
- package/dist/pages/layout/sidebar-mini.html +623 -0
- package/dist/pages/layout/unfixed-sidebar.html +589 -638
- package/dist/pages/tables/simple.html +837 -938
- package/dist/pages/widgets/cards.html +814 -698
- package/dist/pages/widgets/info-box.html +864 -951
- package/dist/pages/widgets/small-box.html +625 -678
- package/index.html +1 -6
- package/package.json +53 -36
- package/src/config/assets.config.mjs +8 -0
- package/src/config/astro.config.mjs +17 -0
- package/src/config/postcss.config.mjs +15 -0
- package/src/config/rollup.config.js +20 -0
- package/src/html/.eslintrc.json +24 -0
- package/src/html/.tsconfig.json +4 -0
- package/src/html/components/_head.astro +31 -0
- package/src/html/components/_scripts.astro +40 -0
- package/src/html/components/dashboard/_footer.astro +12 -0
- package/src/html/components/dashboard/_sidenav.astro +323 -0
- package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
- package/src/html/components/docs/browser-support/index.md +22 -0
- package/src/html/components/docs/color-mode/navbar-html.md +80 -0
- package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
- package/src/html/components/docs/components/main-header-1.md +159 -0
- package/src/html/components/docs/introduction/index.md +35 -0
- package/src/html/env.d.ts +1 -0
- package/src/html/pages/UI/timeline.astro +158 -0
- package/src/html/pages/docs/browser-support.astro +58 -0
- package/src/html/pages/docs/color-mode.astro +224 -0
- package/src/html/pages/docs/components/main-header.astro +232 -0
- package/src/html/pages/docs/index.astro +58 -0
- package/src/html/pages/docs/layout.astro +77 -0
- package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
- package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
- package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
- package/src/{index.html → html/pages/index.astro} +266 -189
- package/src/{index2.html → html/pages/index2.astro} +229 -284
- package/src/{index3.html → html/pages/index3.astro} +151 -169
- package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
- package/src/html/pages/layout/layout-rtl.astro +84 -0
- package/src/html/pages/layout/sidebar-mini.astro +83 -0
- package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
- package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
- package/src/html/pages/widgets/cards.astro +308 -0
- package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
- package/src/html/pages/widgets/small-box.astro +121 -0
- package/src/scss/_app-footer.scss +15 -0
- package/src/scss/_app-header.scss +26 -0
- package/src/scss/_app-main.scss +20 -0
- package/src/scss/_app-sidebar.scss +429 -0
- package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
- package/src/scss/_bootstrap-variables.scss +41 -26
- package/src/scss/_callouts.scss +34 -0
- package/src/scss/_cards.scss +30 -224
- package/src/scss/_direct-chat.scss +15 -9
- package/src/scss/_docs.scss +4 -0
- package/src/scss/_dropdown.scss +7 -5
- package/src/scss/_info-box.scss +2 -6
- package/src/scss/_miscellaneous.scss +0 -455
- package/src/scss/_mixins.scss +0 -6
- package/src/scss/_root.scss +2 -58
- package/src/scss/_small-box.scss +15 -38
- package/src/scss/_table.scss +0 -50
- package/src/scss/_timeline.scss +120 -0
- package/src/scss/_variables-dark.scss +15 -8
- package/src/scss/_variables.scss +30 -135
- package/src/scss/adminlte.scss +1 -1
- package/src/scss/mixins/_animations.scss +4 -0
- package/src/scss/mixins/_scrollbar.scss +2 -2
- package/src/scss/pages/_login_and_register.scss +1 -2
- package/src/scss/parts/_core.scss +7 -15
- package/src/scss/parts/_extra-components.scss +1 -2
- package/src/ts/adminlte.ts +0 -2
- package/src/ts/card-widget.ts +42 -18
- package/src/ts/direct-chat.ts +33 -8
- package/src/ts/layout.ts +6 -4
- package/src/ts/push-menu.ts +94 -145
- package/src/ts/treeview.ts +17 -23
- package/src/ts/util/index.ts +2 -2
- package/src/utils/index.js +11 -0
- package/tsconfig.json +11 -3
- package/.stylelintrc +0 -40
- package/CHECKLIST.md +0 -0
- package/dist/css/rtl/adminlte.rtl.css.map +0 -1
- package/dist/css/rtl/adminlte.rtl.min.css +0 -7
- package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
- package/dist/index.html +0 -1065
- package/dist/index2.html +0 -1629
- package/dist/index3.html +0 -1015
- package/gulpfile.js +0 -315
- package/src/pages/widgets/cards.html +0 -143
- package/src/pages/widgets/small-box.html +0 -124
- package/src/partials/_head.html +0 -31
- package/src/partials/dashboard/_footer.html +0 -9
- package/src/partials/dashboard/_sidenav.html +0 -244
- package/src/scss/_brand-container.scss +0 -72
- package/src/scss/_content-header.scss +0 -9
- package/src/scss/_content-wrapper.scss +0 -6
- package/src/scss/_content.scss +0 -3
- package/src/scss/_layout-fixed.scss +0 -43
- package/src/scss/_layout-mobile.scss +0 -22
- package/src/scss/_main-footer.scss +0 -28
- package/src/scss/_main-header.scss +0 -40
- package/src/scss/_main-sidebar.scss +0 -63
- package/src/scss/_nav-sidebar.scss +0 -66
- package/src/scss/_products.scss +0 -55
- package/src/scss/_sidebar-close.scss +0 -6
- package/src/scss/_sidebar-collapse.scss +0 -120
- package/src/scss/_sidebar-horizontal.scss +0 -67
- package/src/scss/_sidebar.scss +0 -11
- package/src/scss/_users-list.scss +0 -45
- package/src/scss/mixins/_brand-variant.scss +0 -9
- package/src/scss/mixins/_cards.scss +0 -53
- package/src/scss/mixins/_direct-chat.scss +0 -17
- package/src/scss/mixins/_header-variant.scss +0 -22
- package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
- package/src/scss/mixins/_nav-treeview-light.scss +0 -89
- package/src/scss/mixins/_sidebar-color.scss +0 -9
|
@@ -1,245 +1,192 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<!-- For RTL verison -->
|
|
4
|
-
<!-- <html lang="en" dir="rtl"> -->
|
|
5
3
|
|
|
6
4
|
<head>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<!-- By adding ../../css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
|
|
16
|
-
<meta name="color-scheme" content="light dark">
|
|
17
|
-
<!-- By adding ../../css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is dark. -->
|
|
18
|
-
<!-- <meta name="color-scheme" content="dark light"> -->
|
|
5
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
6
|
+
<!-- Primary Meta Tags -->
|
|
7
|
+
<title>AdminLTE 4 | Widgets - Info Box</title>
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
+
<meta name="title" content="AdminLTE 4 | Widgets - Info Box">
|
|
10
|
+
<meta name="author" content="ColorlibHQ">
|
|
11
|
+
<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
|
|
12
|
+
<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">
|
|
19
13
|
|
|
20
|
-
|
|
14
|
+
<!-- OPTIONAL LINKS -->
|
|
21
15
|
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
<!-- Google Font: Source Sans Pro -->
|
|
17
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
18
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
19
|
+
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
|
|
24
20
|
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
<!-- overlayscrollbars -->
|
|
22
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
|
|
27
23
|
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
<!-- @fortawesome/fontawesome-free -->
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
|
|
30
26
|
|
|
31
|
-
|
|
27
|
+
<!-- REQUIRED LINKS -->
|
|
32
28
|
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
<!-- Theme style -->
|
|
30
|
+
<link rel="stylesheet" href="../../../dist/css/adminlte.css">
|
|
31
|
+
</head>
|
|
35
32
|
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
|
34
|
+
<div class="app-wrapper">
|
|
35
|
+
<!-- Navbar -->
|
|
36
|
+
<nav class="app-header navbar navbar-expand bg-body">
|
|
37
|
+
<div class="container-fluid">
|
|
38
|
+
<!-- Start navbar links -->
|
|
39
|
+
<ul class="navbar-nav">
|
|
40
|
+
<li class="nav-item">
|
|
41
|
+
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
|
|
42
|
+
</li>
|
|
43
|
+
<li class="nav-item d-none d-md-block">
|
|
44
|
+
<a href="#" class="nav-link">Home</a>
|
|
45
|
+
</li>
|
|
46
|
+
<li class="nav-item d-none d-md-block">
|
|
47
|
+
<a href="#" class="nav-link">Contact</a>
|
|
48
|
+
</li>
|
|
49
|
+
</ul>
|
|
50
|
+
<!-- End navbar links -->
|
|
38
51
|
|
|
39
|
-
|
|
40
|
-
|
|
52
|
+
<ul class="navbar-nav ms-auto">
|
|
53
|
+
<!-- Navbar Search -->
|
|
54
|
+
<li class="nav-item">
|
|
55
|
+
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
|
56
|
+
<i class="fa-solid fa-search"></i>
|
|
57
|
+
</a>
|
|
58
|
+
</li>
|
|
41
59
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
</div>
|
|
173
|
-
</li>
|
|
174
|
-
<li class="nav-item dropdown user-menu">
|
|
175
|
-
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
176
|
-
<img src="../../assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
|
|
177
|
-
<span class="d-none d-md-inline">Alexander Pierce</span>
|
|
178
|
-
</a>
|
|
179
|
-
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
|
180
|
-
<!-- User image -->
|
|
181
|
-
<li class="user-header text-bg-primary">
|
|
182
|
-
<img src="../../assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
|
|
183
|
-
|
|
184
|
-
<p>
|
|
185
|
-
Alexander Pierce - Web Developer
|
|
186
|
-
<small>Member since Nov. 2012</small>
|
|
187
|
-
</p>
|
|
188
|
-
</li>
|
|
189
|
-
<!-- Menu Body -->
|
|
190
|
-
<li class="user-body">
|
|
191
|
-
<div class="row">
|
|
192
|
-
<div class="col-4 text-center">
|
|
193
|
-
<a href="#">Followers</a>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="col-4 text-center">
|
|
196
|
-
<a href="#">Sales</a>
|
|
197
|
-
</div>
|
|
198
|
-
<div class="col-4 text-center">
|
|
199
|
-
<a href="#">Friends</a>
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
<!-- /.row -->
|
|
203
|
-
</li>
|
|
204
|
-
<!-- Menu Footer-->
|
|
205
|
-
<li class="user-footer">
|
|
206
|
-
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
|
207
|
-
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
|
|
208
|
-
</li>
|
|
209
|
-
</ul>
|
|
210
|
-
</li>
|
|
211
|
-
<li class="nav-item dropdown">
|
|
212
|
-
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
|
|
213
|
-
<span class="theme-icon-active">
|
|
214
|
-
<i class="my-1"></i>
|
|
215
|
-
</span>
|
|
216
|
-
</button>
|
|
217
|
-
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
|
218
|
-
<li>
|
|
219
|
-
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
|
|
220
|
-
<i class="fa-regular fa-sun me-2 opacity-50"></i>
|
|
221
|
-
Light
|
|
222
|
-
<i class="fa-solid fa-check ms-auto d-none"></i>
|
|
223
|
-
</button>
|
|
224
|
-
</li>
|
|
225
|
-
<li>
|
|
226
|
-
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
|
|
227
|
-
<i class="fa-solid fa-moon me-2 opacity-50"></i>
|
|
228
|
-
Dark
|
|
229
|
-
<i class="fa-solid fa-check ms-auto d-none"></i>
|
|
230
|
-
</button>
|
|
231
|
-
</li>
|
|
232
|
-
<li>
|
|
233
|
-
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
|
|
234
|
-
<i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
|
|
235
|
-
Auto
|
|
236
|
-
<i class="fa-solid fa-check ms-auto d-none"></i>
|
|
237
|
-
</button>
|
|
238
|
-
</li>
|
|
239
|
-
</ul>
|
|
240
|
-
</li>
|
|
241
|
-
<!-- TODO tackel in v4.1 -->
|
|
242
|
-
<!-- <li class="nav-item">
|
|
60
|
+
<!-- Messages Dropdown Menu -->
|
|
61
|
+
<li class="nav-item dropdown">
|
|
62
|
+
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
|
63
|
+
<i class="fa-regular fa-comments"></i>
|
|
64
|
+
<span class="navbar-badge badge text-bg-danger">3</span>
|
|
65
|
+
</a>
|
|
66
|
+
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
|
67
|
+
<a href="#" class="dropdown-item">
|
|
68
|
+
<!-- Message Start -->
|
|
69
|
+
<div class="d-flex">
|
|
70
|
+
<div class="flex-shrink-0">
|
|
71
|
+
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
|
72
|
+
</div>
|
|
73
|
+
<div class="flex-grow-1">
|
|
74
|
+
<h3 class="dropdown-item-title">
|
|
75
|
+
Brad Diesel
|
|
76
|
+
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
|
|
77
|
+
</h3>
|
|
78
|
+
<p class="fs-7">Call me whenever you can...</p>
|
|
79
|
+
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<!-- Message End -->
|
|
83
|
+
</a>
|
|
84
|
+
<div class="dropdown-divider"></div>
|
|
85
|
+
<a href="#" class="dropdown-item">
|
|
86
|
+
<!-- Message Start -->
|
|
87
|
+
<div class="d-flex">
|
|
88
|
+
<div class="flex-shrink-0">
|
|
89
|
+
<img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
|
90
|
+
</div>
|
|
91
|
+
<div class="flex-grow-1">
|
|
92
|
+
<h3 class="dropdown-item-title">
|
|
93
|
+
John Pierce
|
|
94
|
+
<span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
|
|
95
|
+
</h3>
|
|
96
|
+
<p class="fs-7">I got your message bro</p>
|
|
97
|
+
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<!-- Message End -->
|
|
101
|
+
</a>
|
|
102
|
+
<div class="dropdown-divider"></div>
|
|
103
|
+
<a href="#" class="dropdown-item">
|
|
104
|
+
<!-- Message Start -->
|
|
105
|
+
<div class="d-flex">
|
|
106
|
+
<div class="flex-shrink-0">
|
|
107
|
+
<img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
|
108
|
+
</div>
|
|
109
|
+
<div class="flex-grow-1">
|
|
110
|
+
<h3 class="dropdown-item-title">
|
|
111
|
+
Nora Silvester
|
|
112
|
+
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
|
|
113
|
+
</h3>
|
|
114
|
+
<p class="fs-7">The subject goes here</p>
|
|
115
|
+
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<!-- Message End -->
|
|
119
|
+
</a>
|
|
120
|
+
<div class="dropdown-divider"></div>
|
|
121
|
+
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
|
122
|
+
</div>
|
|
123
|
+
</li>
|
|
124
|
+
<!-- Notifications Dropdown Menu -->
|
|
125
|
+
<li class="nav-item dropdown">
|
|
126
|
+
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
|
127
|
+
<i class="fa-regular fa-bell"></i>
|
|
128
|
+
<span class="navbar-badge badge text-bg-warning">15</span>
|
|
129
|
+
</a>
|
|
130
|
+
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
|
131
|
+
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
|
132
|
+
<div class="dropdown-divider"></div>
|
|
133
|
+
<a href="#" class="dropdown-item">
|
|
134
|
+
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
|
|
135
|
+
<span class="float-end text-secondary fs-7">3 mins</span>
|
|
136
|
+
</a>
|
|
137
|
+
<div class="dropdown-divider"></div>
|
|
138
|
+
<a href="#" class="dropdown-item">
|
|
139
|
+
<i class="fa-solid fa-users me-2"></i> 8 friend requests
|
|
140
|
+
<span class="float-end text-secondary fs-7">12 hours</span>
|
|
141
|
+
</a>
|
|
142
|
+
<div class="dropdown-divider"></div>
|
|
143
|
+
<a href="#" class="dropdown-item">
|
|
144
|
+
<i class="fa-solid fa-file me-2"></i> 3 new reports
|
|
145
|
+
<span class="float-end text-secondary fs-7">2 days</span>
|
|
146
|
+
</a>
|
|
147
|
+
<div class="dropdown-divider"></div>
|
|
148
|
+
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
|
149
|
+
</div>
|
|
150
|
+
</li>
|
|
151
|
+
<li class="nav-item dropdown user-menu">
|
|
152
|
+
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
153
|
+
<img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
|
|
154
|
+
<span class="d-none d-md-inline">Alexander Pierce</span>
|
|
155
|
+
</a>
|
|
156
|
+
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
|
157
|
+
<!-- User image -->
|
|
158
|
+
<li class="user-header text-bg-primary">
|
|
159
|
+
<img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
|
|
160
|
+
|
|
161
|
+
<p>
|
|
162
|
+
Alexander Pierce - Web Developer
|
|
163
|
+
<small>Member since Nov. 2023</small>
|
|
164
|
+
</p>
|
|
165
|
+
</li>
|
|
166
|
+
<!-- Menu Body -->
|
|
167
|
+
<li class="user-body">
|
|
168
|
+
<div class="row">
|
|
169
|
+
<div class="col-4 text-center">
|
|
170
|
+
<a href="#">Followers</a>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="col-4 text-center">
|
|
173
|
+
<a href="#">Sales</a>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="col-4 text-center">
|
|
176
|
+
<a href="#">Friends</a>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
<!-- /.row -->
|
|
180
|
+
</li>
|
|
181
|
+
<!-- Menu Footer-->
|
|
182
|
+
<li class="user-footer">
|
|
183
|
+
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
|
184
|
+
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
|
|
185
|
+
</li>
|
|
186
|
+
</ul>
|
|
187
|
+
</li>
|
|
188
|
+
<!-- TODO tackel in v4.1 -->
|
|
189
|
+
<!-- <li class="nav-item">
|
|
243
190
|
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
|
|
244
191
|
<i class="fa-solid fa-expand-arrows-alt"></i>
|
|
245
192
|
</a>
|
|
@@ -249,737 +196,703 @@
|
|
|
249
196
|
<i class="fa-solid fa-th-large"></i>
|
|
250
197
|
</a>
|
|
251
198
|
</li> -->
|
|
252
|
-
|
|
253
|
-
</div>
|
|
254
|
-
</nav>
|
|
255
|
-
<!-- /.navbar -->
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<!-- Main Sidebar Container -->
|
|
259
|
-
<aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
|
|
260
|
-
<div class="brand-container">
|
|
261
|
-
<a href="javascript:;" class="brand-link">
|
|
262
|
-
<img src="../../assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
|
|
263
|
-
<span class="brand-text fw-light">AdminLTE 4</span>
|
|
264
|
-
</a>
|
|
265
|
-
<a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button">
|
|
266
|
-
<i class="fa-solid fa-angle-double-left"></i>
|
|
267
|
-
</a>
|
|
268
|
-
</div>
|
|
269
|
-
<!-- Sidebar -->
|
|
270
|
-
<div class="sidebar">
|
|
271
|
-
<nav class="mt-2">
|
|
272
|
-
<!-- Sidebar Menu -->
|
|
273
|
-
<ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
|
|
274
|
-
<li class="nav-item ">
|
|
275
|
-
<a href="javascript:;" class="nav-link ">
|
|
276
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
277
|
-
<p>
|
|
278
|
-
Dashboard
|
|
279
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
280
|
-
</p>
|
|
281
|
-
</a>
|
|
282
|
-
<ul class="nav nav-treeview">
|
|
283
|
-
<li class="nav-item">
|
|
284
|
-
<a href="../../index.html" class="nav-link ">
|
|
285
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
286
|
-
<p>Dashboard v1</p>
|
|
287
|
-
</a>
|
|
288
|
-
</li>
|
|
289
|
-
<li class="nav-item">
|
|
290
|
-
<a href="../../index2.html" class="nav-link ">
|
|
291
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
292
|
-
<p>Dashboard v2</p>
|
|
293
|
-
</a>
|
|
294
|
-
</li>
|
|
295
|
-
<li class="nav-item">
|
|
296
|
-
<a href="../../index3.html" class="nav-link ">
|
|
297
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
298
|
-
<p>Dashboard v3</p>
|
|
299
|
-
</a>
|
|
300
|
-
</li>
|
|
301
|
-
</ul>
|
|
302
|
-
</li>
|
|
303
|
-
<li class="nav-item menu-open">
|
|
304
|
-
<a href="javascript:;" class="nav-link active">
|
|
305
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
306
|
-
<p>
|
|
307
|
-
Widgets
|
|
308
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
309
|
-
</p>
|
|
310
|
-
</a>
|
|
311
|
-
<ul class="nav nav-treeview">
|
|
312
|
-
<li class="nav-item">
|
|
313
|
-
<a href="../../pages/widgets/small-box.html" class="nav-link ">
|
|
314
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
315
|
-
<p>Small Box</p>
|
|
316
|
-
</a>
|
|
317
|
-
</li>
|
|
318
|
-
<li class="nav-item">
|
|
319
|
-
<a href="../../pages/widgets/info-box.html" class="nav-link active">
|
|
320
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
321
|
-
<p>info Box</p>
|
|
322
|
-
</a>
|
|
323
|
-
</li>
|
|
324
|
-
<li class="nav-item">
|
|
325
|
-
<a href="../../pages/widgets/cards.html" class="nav-link ">
|
|
326
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
327
|
-
<p>Cards</p>
|
|
328
|
-
</a>
|
|
329
|
-
</li>
|
|
330
|
-
</ul>
|
|
331
|
-
</li>
|
|
332
|
-
|
|
333
|
-
<li class="nav-item ">
|
|
334
|
-
<a href="javascript:;" class="nav-link ">
|
|
335
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
336
|
-
<p>
|
|
337
|
-
Layout Options
|
|
338
|
-
<span class="badge text-bg-info float-end me-3">6</span>
|
|
339
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
340
|
-
</p>
|
|
341
|
-
</a>
|
|
342
|
-
<ul class="nav nav-treeview">
|
|
343
|
-
<li class="nav-item">
|
|
344
|
-
<a href="../../pages/layout/unfixed-sidebar.html" class="nav-link ">
|
|
345
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
346
|
-
<p>Unfixed Sidebar</p>
|
|
347
|
-
</a>
|
|
348
|
-
</li>
|
|
349
|
-
<li class="nav-item">
|
|
350
|
-
<a href="../../pages/layout/fixed-sidebar.html" class="nav-link ">
|
|
351
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
352
|
-
<p>Fixed Sidebar</p>
|
|
353
|
-
</a>
|
|
354
|
-
</li>
|
|
355
|
-
</ul>
|
|
356
|
-
</li>
|
|
357
|
-
<li class="nav-item ">
|
|
358
|
-
<a href="javascript:;" class="nav-link ">
|
|
359
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
360
|
-
<p>
|
|
361
|
-
Forms
|
|
362
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
363
|
-
</p>
|
|
364
|
-
</a>
|
|
365
|
-
<ul class="nav nav-treeview">
|
|
366
|
-
<li class="nav-item">
|
|
367
|
-
<a href="../../pages/forms/general.html" class="nav-link ">
|
|
368
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
369
|
-
<p>General Elements</p>
|
|
370
|
-
</a>
|
|
371
|
-
</li>
|
|
372
|
-
</ul>
|
|
373
|
-
</li>
|
|
374
|
-
<li class="nav-item ">
|
|
375
|
-
<a href="javascript:;" class="nav-link ">
|
|
376
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
377
|
-
<p>
|
|
378
|
-
Tables
|
|
379
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
380
|
-
</p>
|
|
381
|
-
</a>
|
|
382
|
-
<ul class="nav nav-treeview">
|
|
383
|
-
<li class="nav-item">
|
|
384
|
-
<a href="../../pages/tables/simple.html" class="nav-link ">
|
|
385
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
386
|
-
<p>Simple Tables</p>
|
|
387
|
-
</a>
|
|
388
|
-
</li>
|
|
389
|
-
</ul>
|
|
390
|
-
</li>
|
|
391
|
-
<li class="nav-header">EXAMPLES</li>
|
|
392
|
-
<li class="nav-item">
|
|
393
|
-
<a href="javascript:;" class="nav-link">
|
|
394
|
-
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
|
|
395
|
-
<p>
|
|
396
|
-
Login & Register
|
|
397
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
398
|
-
</p>
|
|
399
|
-
</a>
|
|
400
|
-
<ul class="nav nav-treeview">
|
|
401
|
-
<li class="nav-item">
|
|
402
|
-
<a href="../../pages/examples/login.html" class="nav-link ">
|
|
403
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
404
|
-
<p>Login v1</p>
|
|
405
|
-
</a>
|
|
406
|
-
</li>
|
|
407
|
-
<li class="nav-item">
|
|
408
|
-
<a href="../../pages/examples/register.html" class="nav-link ">
|
|
409
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
410
|
-
<p>Register v1</p>
|
|
411
|
-
</a>
|
|
412
|
-
</li>
|
|
413
|
-
</ul>
|
|
414
|
-
</li>
|
|
415
|
-
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
|
416
|
-
<li class="nav-item">
|
|
417
|
-
<a href="javascript:;" class="nav-link">
|
|
418
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
419
|
-
<p>Level 1</p>
|
|
420
|
-
</a>
|
|
421
|
-
</li>
|
|
422
|
-
<li class="nav-item">
|
|
423
|
-
<a href="javascript:;" class="nav-link">
|
|
424
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
425
|
-
<p>
|
|
426
|
-
Level 1
|
|
427
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
428
|
-
</p>
|
|
429
|
-
</a>
|
|
430
|
-
<ul class="nav nav-treeview">
|
|
431
|
-
<li class="nav-item">
|
|
432
|
-
<a href="javascript:;" class="nav-link">
|
|
433
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
434
|
-
<p>Level 2</p>
|
|
435
|
-
</a>
|
|
436
|
-
</li>
|
|
437
|
-
<li class="nav-item">
|
|
438
|
-
<a href="javascript:;" class="nav-link">
|
|
439
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
440
|
-
<p>
|
|
441
|
-
Level 2
|
|
442
|
-
<i class="end fa-solid fa-angle-right"></i>
|
|
443
|
-
</p>
|
|
444
|
-
</a>
|
|
445
|
-
<ul class="nav nav-treeview">
|
|
446
|
-
<li class="nav-item">
|
|
447
|
-
<a href="javascript:;" class="nav-link">
|
|
448
|
-
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
449
|
-
<p>Level 3</p>
|
|
450
|
-
</a>
|
|
451
|
-
</li>
|
|
452
|
-
<li class="nav-item">
|
|
453
|
-
<a href="javascript:;" class="nav-link">
|
|
454
|
-
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
455
|
-
<p>Level 3</p>
|
|
456
|
-
</a>
|
|
457
|
-
</li>
|
|
458
|
-
<li class="nav-item">
|
|
459
|
-
<a href="javascript:;" class="nav-link">
|
|
460
|
-
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
461
|
-
<p>Level 3</p>
|
|
462
|
-
</a>
|
|
463
|
-
</li>
|
|
464
|
-
</ul>
|
|
465
|
-
</li>
|
|
466
|
-
<li class="nav-item">
|
|
467
|
-
<a href="javascript:;" class="nav-link">
|
|
468
|
-
<i class="nav-icon fa-regular fa-circle"></i>
|
|
469
|
-
<p>Level 2</p>
|
|
470
|
-
</a>
|
|
471
|
-
</li>
|
|
472
|
-
</ul>
|
|
473
|
-
</li>
|
|
474
|
-
<li class="nav-item">
|
|
475
|
-
<a href="javascript:;" class="nav-link">
|
|
476
|
-
<i class="nav-icon fa-solid fa-circle"></i>
|
|
477
|
-
<p>Level 1</p>
|
|
478
|
-
</a>
|
|
479
|
-
</li>
|
|
480
|
-
<li class="nav-header">LABELS</li>
|
|
481
|
-
<li class="nav-item">
|
|
482
|
-
<a href="javascript:;" class="nav-link">
|
|
483
|
-
<i class="nav-icon fa-regular fa-circle text-danger"></i>
|
|
484
|
-
<p class="text">Important</p>
|
|
485
|
-
</a>
|
|
486
|
-
</li>
|
|
487
|
-
<li class="nav-item">
|
|
488
|
-
<a href="javascript:;" class="nav-link">
|
|
489
|
-
<i class="nav-icon fa-regular fa-circle text-warning"></i>
|
|
490
|
-
<p>Warning</p>
|
|
491
|
-
</a>
|
|
492
|
-
</li>
|
|
493
|
-
<li class="nav-item">
|
|
494
|
-
<a href="javascript:;" class="nav-link">
|
|
495
|
-
<i class="nav-icon fa-regular fa-circle text-info"></i>
|
|
496
|
-
<p>Informational</p>
|
|
497
|
-
</a>
|
|
498
|
-
</li>
|
|
499
|
-
</ul>
|
|
500
|
-
</nav>
|
|
501
|
-
</div>
|
|
502
|
-
<!-- /.sidebar -->
|
|
503
|
-
</aside>
|
|
504
|
-
|
|
505
|
-
<!-- Main content -->
|
|
506
|
-
<main class="content-wrapper">
|
|
507
|
-
<div class="content-header">
|
|
508
|
-
<div class="container-fluid">
|
|
509
|
-
<div class="row mb-2">
|
|
510
|
-
<div class="col-sm-6">
|
|
511
|
-
<h3>Info Box</h3>
|
|
512
|
-
</div>
|
|
513
|
-
<div class="col-sm-6">
|
|
514
|
-
<ol class="breadcrumb float-sm-end">
|
|
515
|
-
<li class="breadcrumb-item">
|
|
516
|
-
<a href="#">Home</a>
|
|
517
|
-
</li>
|
|
518
|
-
<li class="breadcrumb-item active" aria-current="page">Info Box</li>
|
|
519
|
-
</ol>
|
|
520
|
-
</div>
|
|
521
|
-
</div>
|
|
522
|
-
</div>
|
|
523
|
-
</div>
|
|
524
|
-
<!-- Main content -->
|
|
525
|
-
<div class="content">
|
|
526
|
-
<div class="container-fluid">
|
|
527
|
-
<h5 class="mb-2">Info Box</h5>
|
|
528
|
-
<div class="row">
|
|
529
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
530
|
-
<div class="info-box">
|
|
531
|
-
<span class="info-box-icon text-bg-primary shadow-sm">
|
|
532
|
-
<i class="fa-solid fa-cog"></i>
|
|
533
|
-
</span>
|
|
534
|
-
|
|
535
|
-
<div class="info-box-content">
|
|
536
|
-
<span class="info-box-text">CPU Traffic</span>
|
|
537
|
-
<span class="info-box-number">
|
|
538
|
-
10
|
|
539
|
-
<small>%</small>
|
|
540
|
-
</span>
|
|
541
|
-
</div>
|
|
542
|
-
<!-- /.info-box-content -->
|
|
543
|
-
</div>
|
|
544
|
-
<!-- /.info-box -->
|
|
545
|
-
</div>
|
|
546
|
-
<!-- /.col -->
|
|
547
|
-
|
|
548
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
549
|
-
<div class="info-box">
|
|
550
|
-
<span class="info-box-icon text-bg-success shadow-sm">
|
|
551
|
-
<i class="fa-solid fa-shopping-cart"></i>
|
|
552
|
-
</span>
|
|
553
|
-
|
|
554
|
-
<div class="info-box-content">
|
|
555
|
-
<span class="info-box-text">Sales</span>
|
|
556
|
-
<span class="info-box-number">760</span>
|
|
557
|
-
</div>
|
|
558
|
-
<!-- /.info-box-content -->
|
|
559
|
-
</div>
|
|
560
|
-
<!-- /.info-box -->
|
|
561
|
-
</div>
|
|
562
|
-
<!-- /.col -->
|
|
563
|
-
|
|
564
|
-
<!-- fix for small devices only -->
|
|
565
|
-
<!-- <div class="clearfix hidden-md-up"></div> -->
|
|
566
|
-
|
|
567
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
568
|
-
<div class="info-box">
|
|
569
|
-
<span class="info-box-icon text-bg-warning shadow-sm">
|
|
570
|
-
<i class="fa-solid fa-users"></i>
|
|
571
|
-
</span>
|
|
572
|
-
|
|
573
|
-
<div class="info-box-content">
|
|
574
|
-
<span class="info-box-text">New Members</span>
|
|
575
|
-
<span class="info-box-number">2,000</span>
|
|
576
|
-
</div>
|
|
577
|
-
<!-- /.info-box-content -->
|
|
578
|
-
</div>
|
|
579
|
-
<!-- /.info-box -->
|
|
580
|
-
</div>
|
|
581
|
-
<!-- /.col -->
|
|
582
|
-
|
|
583
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
584
|
-
<div class="info-box">
|
|
585
|
-
<span class="info-box-icon text-bg-danger shadow-sm">
|
|
586
|
-
<i class="fa-solid fa-thumbs-up"></i>
|
|
587
|
-
</span>
|
|
588
|
-
|
|
589
|
-
<div class="info-box-content">
|
|
590
|
-
<span class="info-box-text">Likes</span>
|
|
591
|
-
<span class="info-box-number">41,410</span>
|
|
592
|
-
</div>
|
|
593
|
-
<!-- /.info-box-content -->
|
|
594
|
-
</div>
|
|
595
|
-
<!-- /.info-box -->
|
|
596
|
-
</div>
|
|
597
|
-
<!-- /.col -->
|
|
598
|
-
</div>
|
|
599
|
-
<!-- /.row -->
|
|
600
|
-
|
|
601
|
-
<!-- =========================================================== -->
|
|
602
|
-
<h5 class="mb-2">Info Box With Custom Shadows <small>
|
|
603
|
-
<i>Using Bootstrap's Shadow Utility</i>
|
|
604
|
-
</small>
|
|
605
|
-
</h5>
|
|
606
|
-
<div class="row">
|
|
607
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
608
|
-
<div class="info-box shadow-none">
|
|
609
|
-
<span class="info-box-icon text-bg-primary shadow-sm">
|
|
610
|
-
<i class="fa-solid fa-cog"></i>
|
|
611
|
-
</span>
|
|
612
|
-
|
|
613
|
-
<div class="info-box-content">
|
|
614
|
-
<span class="info-box-text">CPU Traffic</span>
|
|
615
|
-
<span class="info-box-number">
|
|
616
|
-
10
|
|
617
|
-
<small>%</small>
|
|
618
|
-
</span>
|
|
619
|
-
</div>
|
|
620
|
-
<!-- /.info-box-content -->
|
|
621
|
-
</div>
|
|
622
|
-
<!-- /.info-box -->
|
|
623
|
-
</div>
|
|
624
|
-
<!-- /.col -->
|
|
625
|
-
|
|
626
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
627
|
-
<div class="info-box shadow-sm">
|
|
628
|
-
<span class="info-box-icon text-bg-success shadow-sm">
|
|
629
|
-
<i class="fa-solid fa-shopping-cart"></i>
|
|
630
|
-
</span>
|
|
631
|
-
|
|
632
|
-
<div class="info-box-content">
|
|
633
|
-
<span class="info-box-text">Sales</span>
|
|
634
|
-
<span class="info-box-number">760</span>
|
|
635
|
-
</div>
|
|
636
|
-
<!-- /.info-box-content -->
|
|
637
|
-
</div>
|
|
638
|
-
<!-- /.info-box -->
|
|
639
|
-
</div>
|
|
640
|
-
<!-- /.col -->
|
|
641
|
-
|
|
642
|
-
<!-- fix for small devices only -->
|
|
643
|
-
<!-- <div class="clearfix hidden-md-up"></div> -->
|
|
644
|
-
|
|
645
|
-
<div class="col-12 col-sm-6 col-md-3">
|
|
646
|
-
<div class="info-box shadow">
|
|
647
|
-
<span class="info-box-icon text-bg-warning shadow-sm">
|
|
648
|
-
<i class="fa-solid fa-users"></i>
|
|
649
|
-
</span>
|
|
650
|
-
|
|
651
|
-
<div class="info-box-content">
|
|
652
|
-
<span class="info-box-text">New Members</span>
|
|
653
|
-
<span class="info-box-number">2,000</span>
|
|
654
|
-
</div>
|
|
655
|
-
<!-- /.info-box-content -->
|
|
656
|
-
</div>
|
|
657
|
-
<!-- /.info-box -->
|
|
199
|
+
</ul>
|
|
658
200
|
</div>
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
<span class="info-box-text">Likes</span>
|
|
669
|
-
<span class="info-box-number">41,410</span>
|
|
670
|
-
</div>
|
|
671
|
-
<!-- /.info-box-content -->
|
|
672
|
-
</div>
|
|
673
|
-
<!-- /.info-box -->
|
|
674
|
-
</div>
|
|
675
|
-
<!-- /.col -->
|
|
676
|
-
</div>
|
|
677
|
-
<!-- /.row -->
|
|
678
|
-
|
|
679
|
-
<!-- =========================================================== -->
|
|
680
|
-
<h5 class="mt-4 mb-2">Info Box With <code>bg-*</code>
|
|
681
|
-
</h5>
|
|
682
|
-
<div class="row">
|
|
683
|
-
<div class="col-md-3 col-sm-6 col-12">
|
|
684
|
-
<div class="info-box text-bg-primary">
|
|
685
|
-
<span class="info-box-icon">
|
|
686
|
-
<i class="fa-regular fa-bookmark"></i>
|
|
687
|
-
</span>
|
|
688
|
-
|
|
689
|
-
<div class="info-box-content">
|
|
690
|
-
<span class="info-box-text">Bookmarks</span>
|
|
691
|
-
<span class="info-box-number">41,410</span>
|
|
692
|
-
|
|
693
|
-
<div class="progress">
|
|
694
|
-
<div class="progress-bar" style="width: 70%"></div>
|
|
695
|
-
</div>
|
|
696
|
-
<span class="progress-description">
|
|
697
|
-
70% Increase in 30 Days
|
|
698
|
-
</span>
|
|
699
|
-
</div>
|
|
700
|
-
<!-- /.info-box-content -->
|
|
701
|
-
</div>
|
|
702
|
-
<!-- /.info-box -->
|
|
703
|
-
</div>
|
|
704
|
-
<!-- /.col -->
|
|
705
|
-
<div class="col-md-3 col-sm-6 col-12">
|
|
706
|
-
<div class="info-box text-bg-success">
|
|
707
|
-
<span class="info-box-icon">
|
|
708
|
-
<i class="fa-regular fa-thumbs-up"></i>
|
|
709
|
-
</span>
|
|
710
|
-
|
|
711
|
-
<div class="info-box-content">
|
|
712
|
-
<span class="info-box-text">Likes</span>
|
|
713
|
-
<span class="info-box-number">41,410</span>
|
|
714
|
-
|
|
715
|
-
<div class="progress">
|
|
716
|
-
<div class="progress-bar" style="width: 70%"></div>
|
|
717
|
-
</div>
|
|
718
|
-
<span class="progress-description">
|
|
719
|
-
70% Increase in 30 Days
|
|
720
|
-
</span>
|
|
721
|
-
</div>
|
|
722
|
-
<!-- /.info-box-content -->
|
|
723
|
-
</div>
|
|
724
|
-
<!-- /.info-box -->
|
|
725
|
-
</div>
|
|
726
|
-
<!-- /.col -->
|
|
727
|
-
<div class="col-md-3 col-sm-6 col-12">
|
|
728
|
-
<div class="info-box text-bg-warning">
|
|
729
|
-
<span class="info-box-icon">
|
|
730
|
-
<i class="fa-regular fa-calendar-alt"></i>
|
|
731
|
-
</span>
|
|
732
|
-
|
|
733
|
-
<div class="info-box-content">
|
|
734
|
-
<span class="info-box-text">Events</span>
|
|
735
|
-
<span class="info-box-number">41,410</span>
|
|
736
|
-
|
|
737
|
-
<div class="progress">
|
|
738
|
-
<div class="progress-bar" style="width: 70%"></div>
|
|
739
|
-
</div>
|
|
740
|
-
<span class="progress-description">
|
|
741
|
-
70% Increase in 30 Days
|
|
742
|
-
</span>
|
|
743
|
-
</div>
|
|
744
|
-
<!-- /.info-box-content -->
|
|
745
|
-
</div>
|
|
746
|
-
<!-- /.info-box -->
|
|
747
|
-
</div>
|
|
748
|
-
<!-- /.col -->
|
|
749
|
-
<div class="col-md-3 col-sm-6 col-12">
|
|
750
|
-
<div class="info-box text-bg-danger">
|
|
751
|
-
<span class="info-box-icon">
|
|
752
|
-
<i class="fa-solid fa-comments"></i>
|
|
753
|
-
</span>
|
|
754
|
-
|
|
755
|
-
<div class="info-box-content">
|
|
756
|
-
<span class="info-box-text">Comments</span>
|
|
757
|
-
<span class="info-box-number">41,410</span>
|
|
758
|
-
|
|
759
|
-
<div class="progress">
|
|
760
|
-
<div class="progress-bar" style="width: 70%"></div>
|
|
761
|
-
</div>
|
|
762
|
-
<span class="progress-description">
|
|
763
|
-
70% Increase in 30 Days
|
|
764
|
-
</span>
|
|
765
|
-
</div>
|
|
766
|
-
<!-- /.info-box-content -->
|
|
767
|
-
</div>
|
|
768
|
-
<!-- /.info-box -->
|
|
201
|
+
</nav>
|
|
202
|
+
<!-- /.navbar -->
|
|
203
|
+
<!-- Sidebar Container -->
|
|
204
|
+
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
|
205
|
+
<div class="sidebar-brand">
|
|
206
|
+
<a href="../../index.html" class="brand-link">
|
|
207
|
+
<img src="../../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
|
|
208
|
+
<span class="brand-text fw-light">AdminLTE 4</span>
|
|
209
|
+
</a>
|
|
769
210
|
</div>
|
|
770
|
-
<!--
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
211
|
+
<!-- Sidebar -->
|
|
212
|
+
<div class="sidebar-wrapper">
|
|
213
|
+
<nav class="mt-2">
|
|
214
|
+
<!-- Sidebar Menu -->
|
|
215
|
+
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
|
|
216
|
+
<li class="nav-item">
|
|
217
|
+
<a href="javascript:;" class="nav-link">
|
|
218
|
+
<i class="nav-icon fa-solid fa-gauge-high"></i>
|
|
219
|
+
<p>
|
|
220
|
+
Dashboard
|
|
221
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
222
|
+
</p>
|
|
223
|
+
</a>
|
|
224
|
+
<ul class="nav nav-treeview">
|
|
225
|
+
<li class="nav-item">
|
|
226
|
+
<a href="../../index.html" class="nav-link">
|
|
227
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
228
|
+
<p>Dashboard v1</p>
|
|
229
|
+
</a>
|
|
230
|
+
</li>
|
|
231
|
+
<li class="nav-item">
|
|
232
|
+
<a href="../../index2.html" class="nav-link">
|
|
233
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
234
|
+
<p>Dashboard v2</p>
|
|
235
|
+
</a>
|
|
236
|
+
</li>
|
|
237
|
+
<li class="nav-item">
|
|
238
|
+
<a href="../../index3.html" class="nav-link">
|
|
239
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
240
|
+
<p>Dashboard v3</p>
|
|
241
|
+
</a>
|
|
242
|
+
</li>
|
|
243
|
+
</ul>
|
|
244
|
+
</li>
|
|
245
|
+
<li class="nav-item menu-open">
|
|
246
|
+
<a href="javascript:;" class="nav-link active">
|
|
247
|
+
<i class="nav-icon fa-solid fa-box-open"></i>
|
|
248
|
+
<p>
|
|
249
|
+
Widgets
|
|
250
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
251
|
+
</p>
|
|
252
|
+
</a>
|
|
253
|
+
<ul class="nav nav-treeview">
|
|
254
|
+
<li class="nav-item">
|
|
255
|
+
<a href="../../widgets/small-box.html" class="nav-link">
|
|
256
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
257
|
+
<p>Small Box</p>
|
|
258
|
+
</a>
|
|
259
|
+
</li>
|
|
260
|
+
<li class="nav-item">
|
|
261
|
+
<a href="../../widgets/info-box.html" class="nav-link active">
|
|
262
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
263
|
+
<p>info Box</p>
|
|
264
|
+
</a>
|
|
265
|
+
</li>
|
|
266
|
+
<li class="nav-item">
|
|
267
|
+
<a href="../../widgets/cards.html" class="nav-link">
|
|
268
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
269
|
+
<p>Cards</p>
|
|
270
|
+
</a>
|
|
271
|
+
</li>
|
|
272
|
+
</ul>
|
|
273
|
+
</li>
|
|
274
|
+
|
|
275
|
+
<li class="nav-item">
|
|
276
|
+
<a href="javascript:;" class="nav-link">
|
|
277
|
+
<i class="nav-icon fa-solid fa-copy"></i>
|
|
278
|
+
<p>
|
|
279
|
+
Layout Options
|
|
280
|
+
<span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
|
|
281
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
282
|
+
</p>
|
|
283
|
+
</a>
|
|
284
|
+
<ul class="nav nav-treeview">
|
|
285
|
+
<li class="nav-item">
|
|
286
|
+
<a href="../../layout/unfixed-sidebar.html" class="nav-link">
|
|
287
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
288
|
+
<p>Unfixed Sidebar</p>
|
|
289
|
+
</a>
|
|
290
|
+
</li>
|
|
291
|
+
<li class="nav-item">
|
|
292
|
+
<a href="../../layout/fixed-sidebar.html" class="nav-link">
|
|
293
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
294
|
+
<p>Fixed Sidebar</p>
|
|
295
|
+
</a>
|
|
296
|
+
</li>
|
|
297
|
+
<li class="nav-item">
|
|
298
|
+
<a href="../../layout/sidebar-mini.html" class="nav-link">
|
|
299
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
300
|
+
<p>Sidebar Mini</p>
|
|
301
|
+
</a>
|
|
302
|
+
</li>
|
|
303
|
+
<li class="nav-item">
|
|
304
|
+
<a href="../../layout/layout-rtl.html" class="nav-link">
|
|
305
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
306
|
+
<p>Layout RTL</p>
|
|
307
|
+
</a>
|
|
308
|
+
</li>
|
|
309
|
+
</ul>
|
|
310
|
+
</li>
|
|
311
|
+
<li class="nav-item">
|
|
312
|
+
<a href="javascript:;" class="nav-link">
|
|
313
|
+
<i class="nav-icon fa-solid fa-tree"></i>
|
|
314
|
+
<p>
|
|
315
|
+
UI Elements
|
|
316
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
317
|
+
</p>
|
|
318
|
+
</a>
|
|
319
|
+
<ul class="nav nav-treeview">
|
|
320
|
+
<li class="nav-item">
|
|
321
|
+
<a href="../../UI/timeline.html" class="nav-link">
|
|
322
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
323
|
+
<p>Timeline</p>
|
|
324
|
+
</a>
|
|
325
|
+
</li>
|
|
326
|
+
</ul>
|
|
327
|
+
</li>
|
|
328
|
+
<li class="nav-item">
|
|
329
|
+
<a href="javascript:;" class="nav-link">
|
|
330
|
+
<i class="nav-icon fa-solid fa-pen-to-square"></i>
|
|
331
|
+
<p>
|
|
332
|
+
Forms
|
|
333
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
334
|
+
</p>
|
|
335
|
+
</a>
|
|
336
|
+
<ul class="nav nav-treeview">
|
|
337
|
+
<li class="nav-item">
|
|
338
|
+
<a href="../../forms/general.html" class="nav-link">
|
|
339
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
340
|
+
<p>General Elements</p>
|
|
341
|
+
</a>
|
|
342
|
+
</li>
|
|
343
|
+
</ul>
|
|
344
|
+
</li>
|
|
345
|
+
<li class="nav-item">
|
|
346
|
+
<a href="javascript:;" class="nav-link">
|
|
347
|
+
<i class="nav-icon fa-solid fa-table"></i>
|
|
348
|
+
<p>
|
|
349
|
+
Tables
|
|
350
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
351
|
+
</p>
|
|
352
|
+
</a>
|
|
353
|
+
<ul class="nav nav-treeview">
|
|
354
|
+
<li class="nav-item">
|
|
355
|
+
<a href="../../tables/simple.html" class="nav-link">
|
|
356
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
357
|
+
<p>Simple Tables</p>
|
|
358
|
+
</a>
|
|
359
|
+
</li>
|
|
360
|
+
</ul>
|
|
361
|
+
</li>
|
|
362
|
+
|
|
363
|
+
<li class="nav-header">EXAMPLES</li>
|
|
364
|
+
<li class="nav-item">
|
|
365
|
+
<a href="javascript:;" class="nav-link">
|
|
366
|
+
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
|
|
367
|
+
<p>
|
|
368
|
+
Login & Register
|
|
369
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
370
|
+
</p>
|
|
371
|
+
</a>
|
|
372
|
+
<ul class="nav nav-treeview">
|
|
373
|
+
<li class="nav-item">
|
|
374
|
+
<a href="../../examples/login.html" class="nav-link ">
|
|
375
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
376
|
+
<p>Login v1</p>
|
|
377
|
+
</a>
|
|
378
|
+
</li>
|
|
379
|
+
<li class="nav-item">
|
|
380
|
+
<a href="../../examples/register.html" class="nav-link ">
|
|
381
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
382
|
+
<p>Register v1</p>
|
|
383
|
+
</a>
|
|
384
|
+
</li>
|
|
385
|
+
</ul>
|
|
386
|
+
</li>
|
|
387
|
+
|
|
388
|
+
<li class="nav-header">DOCUMENTATIONS</li>
|
|
389
|
+
<li class="nav-item">
|
|
390
|
+
<a href="../../docs/index.html" class="nav-link">
|
|
391
|
+
<i class="nav-icon fa-solid fa-download"></i>
|
|
392
|
+
<p>Installation</p>
|
|
393
|
+
</a>
|
|
394
|
+
</li>
|
|
395
|
+
<li class="nav-item">
|
|
396
|
+
<a href="../../docs/layout.html" class="nav-link">
|
|
397
|
+
<i class="nav-icon fa-solid fa-grip"></i>
|
|
398
|
+
<p>Layout</p>
|
|
399
|
+
</a>
|
|
400
|
+
</li>
|
|
401
|
+
<li class="nav-item">
|
|
402
|
+
<a href="../../docs/color-mode.html" class="nav-link">
|
|
403
|
+
<i class="nav-icon fa-solid fa-star-half-stroke"></i>
|
|
404
|
+
<p>Color Mode</p>
|
|
405
|
+
</a>
|
|
406
|
+
</li>
|
|
407
|
+
<li class="nav-item">
|
|
408
|
+
<a href="javascript:;" class="nav-link">
|
|
409
|
+
<i class="nav-icon fa-solid fa-swatchbook"></i>
|
|
410
|
+
<p>
|
|
411
|
+
Components
|
|
412
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
413
|
+
</p>
|
|
414
|
+
</a>
|
|
415
|
+
<ul class="nav nav-treeview">
|
|
416
|
+
<li class="nav-item">
|
|
417
|
+
<a href="../../docs/components/main-header.html" class="nav-link">
|
|
418
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
419
|
+
<p>Main Header</p>
|
|
420
|
+
</a>
|
|
421
|
+
</li>
|
|
422
|
+
</ul>
|
|
423
|
+
</li>
|
|
424
|
+
<li class="nav-item">
|
|
425
|
+
<a href="../../docs/browser-support.html" class="nav-link">
|
|
426
|
+
<i class="nav-icon fa-solid fa-edge"></i>
|
|
427
|
+
<p>Browser Support</p>
|
|
428
|
+
</a>
|
|
429
|
+
</li>
|
|
430
|
+
|
|
431
|
+
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
|
432
|
+
<li class="nav-item">
|
|
433
|
+
<a href="javascript:;" class="nav-link">
|
|
434
|
+
<i class="nav-icon fa-solid fa-circle"></i>
|
|
435
|
+
<p>Level 1</p>
|
|
436
|
+
</a>
|
|
437
|
+
</li>
|
|
438
|
+
<li class="nav-item">
|
|
439
|
+
<a href="javascript:;" class="nav-link">
|
|
440
|
+
<i class="nav-icon fa-solid fa-circle"></i>
|
|
441
|
+
<p>
|
|
442
|
+
Level 1
|
|
443
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
444
|
+
</p>
|
|
445
|
+
</a>
|
|
446
|
+
<ul class="nav nav-treeview">
|
|
447
|
+
<li class="nav-item">
|
|
448
|
+
<a href="javascript:;" class="nav-link">
|
|
449
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
450
|
+
<p>Level 2</p>
|
|
451
|
+
</a>
|
|
452
|
+
</li>
|
|
453
|
+
<li class="nav-item">
|
|
454
|
+
<a href="javascript:;" class="nav-link">
|
|
455
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
456
|
+
<p>
|
|
457
|
+
Level 2
|
|
458
|
+
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
|
459
|
+
</p>
|
|
460
|
+
</a>
|
|
461
|
+
<ul class="nav nav-treeview">
|
|
462
|
+
<li class="nav-item">
|
|
463
|
+
<a href="javascript:;" class="nav-link">
|
|
464
|
+
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
465
|
+
<p>Level 3</p>
|
|
466
|
+
</a>
|
|
467
|
+
</li>
|
|
468
|
+
<li class="nav-item">
|
|
469
|
+
<a href="javascript:;" class="nav-link">
|
|
470
|
+
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
471
|
+
<p>Level 3</p>
|
|
472
|
+
</a>
|
|
473
|
+
</li>
|
|
474
|
+
<li class="nav-item">
|
|
475
|
+
<a href="javascript:;" class="nav-link">
|
|
476
|
+
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
|
477
|
+
<p>Level 3</p>
|
|
478
|
+
</a>
|
|
479
|
+
</li>
|
|
480
|
+
</ul>
|
|
481
|
+
</li>
|
|
482
|
+
<li class="nav-item">
|
|
483
|
+
<a href="javascript:;" class="nav-link">
|
|
484
|
+
<i class="nav-icon fa-regular fa-circle"></i>
|
|
485
|
+
<p>Level 2</p>
|
|
486
|
+
</a>
|
|
487
|
+
</li>
|
|
488
|
+
</ul>
|
|
489
|
+
</li>
|
|
490
|
+
<li class="nav-item">
|
|
491
|
+
<a href="javascript:;" class="nav-link">
|
|
492
|
+
<i class="nav-icon fa-solid fa-circle"></i>
|
|
493
|
+
<p>Level 1</p>
|
|
494
|
+
</a>
|
|
495
|
+
</li>
|
|
496
|
+
<li class="nav-header">LABELS</li>
|
|
497
|
+
<li class="nav-item">
|
|
498
|
+
<a href="javascript:;" class="nav-link">
|
|
499
|
+
<i class="nav-icon fa-regular fa-circle text-danger"></i>
|
|
500
|
+
<p class="text">Important</p>
|
|
501
|
+
</a>
|
|
502
|
+
</li>
|
|
503
|
+
<li class="nav-item">
|
|
504
|
+
<a href="javascript:;" class="nav-link">
|
|
505
|
+
<i class="nav-icon fa-regular fa-circle text-warning"></i>
|
|
506
|
+
<p>Warning</p>
|
|
507
|
+
</a>
|
|
508
|
+
</li>
|
|
509
|
+
<li class="nav-item">
|
|
510
|
+
<a href="javascript:;" class="nav-link">
|
|
511
|
+
<i class="nav-icon fa-regular fa-circle text-info"></i>
|
|
512
|
+
<p>Informational</p>
|
|
513
|
+
</a>
|
|
514
|
+
</li>
|
|
515
|
+
</ul>
|
|
516
|
+
</nav>
|
|
798
517
|
</div>
|
|
799
|
-
<!-- /.
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
518
|
+
<!-- /.sidebar -->
|
|
519
|
+
</aside>
|
|
520
|
+
<!-- Main content -->
|
|
521
|
+
<main class="app-main">
|
|
522
|
+
<div class="app-content-header">
|
|
523
|
+
<div class="container-fluid">
|
|
524
|
+
<div class="row">
|
|
525
|
+
<div class="col-sm-6">
|
|
526
|
+
<h3 class="mb-0">Info Box</h3>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="col-sm-6">
|
|
529
|
+
<ol class="breadcrumb float-sm-end">
|
|
530
|
+
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
531
|
+
<li class="breadcrumb-item active" aria-current="page">Info Box</li>
|
|
532
|
+
</ol>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
816
535
|
</div>
|
|
817
|
-
<!-- /.info-box-content -->
|
|
818
|
-
</div>
|
|
819
|
-
<!-- /.info-box -->
|
|
820
536
|
</div>
|
|
821
|
-
<!--
|
|
822
|
-
<div class="
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
537
|
+
<!-- Main content -->
|
|
538
|
+
<div class="app-content">
|
|
539
|
+
<div class="container-fluid">
|
|
540
|
+
<h5 class="mb-2">Info Box</h5>
|
|
541
|
+
<div class="row">
|
|
542
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
543
|
+
<div class="info-box">
|
|
544
|
+
<span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
|
|
545
|
+
|
|
546
|
+
<div class="info-box-content">
|
|
547
|
+
<span class="info-box-text">CPU Traffic</span>
|
|
548
|
+
<span class="info-box-number">
|
|
549
|
+
10
|
|
550
|
+
<small>%</small>
|
|
551
|
+
</span>
|
|
552
|
+
</div>
|
|
553
|
+
<!-- /.info-box-content -->
|
|
554
|
+
</div>
|
|
555
|
+
<!-- /.info-box -->
|
|
556
|
+
</div>
|
|
557
|
+
<!-- /.col -->
|
|
558
|
+
|
|
559
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
560
|
+
<div class="info-box">
|
|
561
|
+
<span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
|
|
562
|
+
|
|
563
|
+
<div class="info-box-content">
|
|
564
|
+
<span class="info-box-text">Sales</span>
|
|
565
|
+
<span class="info-box-number">760</span>
|
|
566
|
+
</div>
|
|
567
|
+
<!-- /.info-box-content -->
|
|
568
|
+
</div>
|
|
569
|
+
<!-- /.info-box -->
|
|
570
|
+
</div>
|
|
571
|
+
<!-- /.col -->
|
|
572
|
+
|
|
573
|
+
<!-- fix for small devices only -->
|
|
574
|
+
<!-- <div class="clearfix hidden-md-up"></div> -->
|
|
575
|
+
|
|
576
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
577
|
+
<div class="info-box">
|
|
578
|
+
<span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
|
|
579
|
+
|
|
580
|
+
<div class="info-box-content">
|
|
581
|
+
<span class="info-box-text">New Members</span>
|
|
582
|
+
<span class="info-box-number">2,000</span>
|
|
583
|
+
</div>
|
|
584
|
+
<!-- /.info-box-content -->
|
|
585
|
+
</div>
|
|
586
|
+
<!-- /.info-box -->
|
|
587
|
+
</div>
|
|
588
|
+
<!-- /.col -->
|
|
589
|
+
|
|
590
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
591
|
+
<div class="info-box">
|
|
592
|
+
<span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
|
|
593
|
+
|
|
594
|
+
<div class="info-box-content">
|
|
595
|
+
<span class="info-box-text">Likes</span>
|
|
596
|
+
<span class="info-box-number">41,410</span>
|
|
597
|
+
</div>
|
|
598
|
+
<!-- /.info-box-content -->
|
|
599
|
+
</div>
|
|
600
|
+
<!-- /.info-box -->
|
|
601
|
+
</div>
|
|
602
|
+
<!-- /.col -->
|
|
603
|
+
</div>
|
|
604
|
+
<!-- /.row -->
|
|
605
|
+
|
|
606
|
+
<!-- =========================================================== -->
|
|
607
|
+
<h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
|
|
608
|
+
<div class="row">
|
|
609
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
610
|
+
<div class="info-box shadow-none">
|
|
611
|
+
<span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
|
|
612
|
+
|
|
613
|
+
<div class="info-box-content">
|
|
614
|
+
<span class="info-box-text">CPU Traffic</span>
|
|
615
|
+
<span class="info-box-number">
|
|
616
|
+
10
|
|
617
|
+
<small>%</small>
|
|
618
|
+
</span>
|
|
619
|
+
</div>
|
|
620
|
+
<!-- /.info-box-content -->
|
|
621
|
+
</div>
|
|
622
|
+
<!-- /.info-box -->
|
|
623
|
+
</div>
|
|
624
|
+
<!-- /.col -->
|
|
625
|
+
|
|
626
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
627
|
+
<div class="info-box shadow-sm">
|
|
628
|
+
<span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
|
|
629
|
+
|
|
630
|
+
<div class="info-box-content">
|
|
631
|
+
<span class="info-box-text">Sales</span>
|
|
632
|
+
<span class="info-box-number">760</span>
|
|
633
|
+
</div>
|
|
634
|
+
<!-- /.info-box-content -->
|
|
635
|
+
</div>
|
|
636
|
+
<!-- /.info-box -->
|
|
637
|
+
</div>
|
|
638
|
+
<!-- /.col -->
|
|
639
|
+
|
|
640
|
+
<!-- fix for small devices only -->
|
|
641
|
+
<!-- <div class="clearfix hidden-md-up"></div> -->
|
|
642
|
+
|
|
643
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
644
|
+
<div class="info-box shadow">
|
|
645
|
+
<span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
|
|
646
|
+
|
|
647
|
+
<div class="info-box-content">
|
|
648
|
+
<span class="info-box-text">New Members</span>
|
|
649
|
+
<span class="info-box-number">2,000</span>
|
|
650
|
+
</div>
|
|
651
|
+
<!-- /.info-box-content -->
|
|
652
|
+
</div>
|
|
653
|
+
<!-- /.info-box -->
|
|
654
|
+
</div>
|
|
655
|
+
<!-- /.col -->
|
|
656
|
+
|
|
657
|
+
<div class="col-12 col-sm-6 col-md-3">
|
|
658
|
+
<div class="info-box shadow-lg">
|
|
659
|
+
<span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
|
|
660
|
+
|
|
661
|
+
<div class="info-box-content">
|
|
662
|
+
<span class="info-box-text">Likes</span>
|
|
663
|
+
<span class="info-box-number">41,410</span>
|
|
664
|
+
</div>
|
|
665
|
+
<!-- /.info-box-content -->
|
|
666
|
+
</div>
|
|
667
|
+
<!-- /.info-box -->
|
|
668
|
+
</div>
|
|
669
|
+
<!-- /.col -->
|
|
670
|
+
</div>
|
|
671
|
+
<!-- /.row -->
|
|
672
|
+
|
|
673
|
+
<!-- =========================================================== -->
|
|
674
|
+
<h5 class="mt-4 mb-2">Info Box With <code>bg-*</code></h5>
|
|
675
|
+
<div class="row">
|
|
676
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
677
|
+
<div class="info-box text-bg-primary">
|
|
678
|
+
<span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
|
|
679
|
+
|
|
680
|
+
<div class="info-box-content">
|
|
681
|
+
<span class="info-box-text">Bookmarks</span>
|
|
682
|
+
<span class="info-box-number">41,410</span>
|
|
683
|
+
|
|
684
|
+
<div class="progress">
|
|
685
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
686
|
+
</div>
|
|
687
|
+
<span class="progress-description">
|
|
688
|
+
70% Increase in 30 Days
|
|
689
|
+
</span>
|
|
690
|
+
</div>
|
|
691
|
+
<!-- /.info-box-content -->
|
|
692
|
+
</div>
|
|
693
|
+
<!-- /.info-box -->
|
|
694
|
+
</div>
|
|
695
|
+
<!-- /.col -->
|
|
696
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
697
|
+
<div class="info-box text-bg-success">
|
|
698
|
+
<span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
|
|
699
|
+
|
|
700
|
+
<div class="info-box-content">
|
|
701
|
+
<span class="info-box-text">Likes</span>
|
|
702
|
+
<span class="info-box-number">41,410</span>
|
|
703
|
+
|
|
704
|
+
<div class="progress">
|
|
705
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
706
|
+
</div>
|
|
707
|
+
<span class="progress-description">
|
|
708
|
+
70% Increase in 30 Days
|
|
709
|
+
</span>
|
|
710
|
+
</div>
|
|
711
|
+
<!-- /.info-box-content -->
|
|
712
|
+
</div>
|
|
713
|
+
<!-- /.info-box -->
|
|
714
|
+
</div>
|
|
715
|
+
<!-- /.col -->
|
|
716
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
717
|
+
<div class="info-box text-bg-warning">
|
|
718
|
+
<span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
|
|
719
|
+
|
|
720
|
+
<div class="info-box-content">
|
|
721
|
+
<span class="info-box-text">Events</span>
|
|
722
|
+
<span class="info-box-number">41,410</span>
|
|
723
|
+
|
|
724
|
+
<div class="progress">
|
|
725
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
726
|
+
</div>
|
|
727
|
+
<span class="progress-description">
|
|
728
|
+
70% Increase in 30 Days
|
|
729
|
+
</span>
|
|
730
|
+
</div>
|
|
731
|
+
<!-- /.info-box-content -->
|
|
732
|
+
</div>
|
|
733
|
+
<!-- /.info-box -->
|
|
734
|
+
</div>
|
|
735
|
+
<!-- /.col -->
|
|
736
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
737
|
+
<div class="info-box text-bg-danger">
|
|
738
|
+
<span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
|
|
739
|
+
|
|
740
|
+
<div class="info-box-content">
|
|
741
|
+
<span class="info-box-text">Comments</span>
|
|
742
|
+
<span class="info-box-number">41,410</span>
|
|
743
|
+
|
|
744
|
+
<div class="progress">
|
|
745
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
746
|
+
</div>
|
|
747
|
+
<span class="progress-description">
|
|
748
|
+
70% Increase in 30 Days
|
|
749
|
+
</span>
|
|
750
|
+
</div>
|
|
751
|
+
<!-- /.info-box-content -->
|
|
752
|
+
</div>
|
|
753
|
+
<!-- /.info-box -->
|
|
754
|
+
</div>
|
|
755
|
+
<!-- /.col -->
|
|
756
|
+
</div>
|
|
757
|
+
<!-- /.row -->
|
|
758
|
+
|
|
759
|
+
<!-- =========================================================== -->
|
|
760
|
+
<h5 class="mt-4 mb-2">Info Box With <code>bg-gradient</code></h5>
|
|
761
|
+
<div class="row">
|
|
762
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
763
|
+
<div class="info-box text-bg-primary bg-gradient">
|
|
764
|
+
<span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
|
|
765
|
+
|
|
766
|
+
<div class="info-box-content">
|
|
767
|
+
<span class="info-box-text">Bookmarks</span>
|
|
768
|
+
<span class="info-box-number">41,410</span>
|
|
769
|
+
|
|
770
|
+
<div class="progress">
|
|
771
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
772
|
+
</div>
|
|
773
|
+
<span class="progress-description">
|
|
774
|
+
70% Increase in 30 Days
|
|
775
|
+
</span>
|
|
776
|
+
</div>
|
|
777
|
+
<!-- /.info-box-content -->
|
|
778
|
+
</div>
|
|
779
|
+
<!-- /.info-box -->
|
|
780
|
+
</div>
|
|
781
|
+
<!-- /.col -->
|
|
782
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
783
|
+
<div class="info-box text-bg-success bg-gradient">
|
|
784
|
+
<span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
|
|
785
|
+
|
|
786
|
+
<div class="info-box-content">
|
|
787
|
+
<span class="info-box-text">Likes</span>
|
|
788
|
+
<span class="info-box-number">41,410</span>
|
|
789
|
+
|
|
790
|
+
<div class="progress">
|
|
791
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
792
|
+
</div>
|
|
793
|
+
<span class="progress-description">
|
|
794
|
+
70% Increase in 30 Days
|
|
795
|
+
</span>
|
|
796
|
+
</div>
|
|
797
|
+
<!-- /.info-box-content -->
|
|
798
|
+
</div>
|
|
799
|
+
<!-- /.info-box -->
|
|
800
|
+
</div>
|
|
801
|
+
<!-- /.col -->
|
|
802
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
803
|
+
<div class="info-box text-bg-warning bg-gradient">
|
|
804
|
+
<span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
|
|
805
|
+
|
|
806
|
+
<div class="info-box-content">
|
|
807
|
+
<span class="info-box-text">Events</span>
|
|
808
|
+
<span class="info-box-number">41,410</span>
|
|
809
|
+
|
|
810
|
+
<div class="progress">
|
|
811
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
812
|
+
</div>
|
|
813
|
+
<span class="progress-description">
|
|
814
|
+
70% Increase in 30 Days
|
|
815
|
+
</span>
|
|
816
|
+
</div>
|
|
817
|
+
<!-- /.info-box-content -->
|
|
818
|
+
</div>
|
|
819
|
+
<!-- /.info-box -->
|
|
820
|
+
</div>
|
|
821
|
+
<!-- /.col -->
|
|
822
|
+
<div class="col-md-3 col-sm-6 col-12">
|
|
823
|
+
<div class="info-box text-bg-danger bg-gradient">
|
|
824
|
+
<span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
|
|
825
|
+
|
|
826
|
+
<div class="info-box-content">
|
|
827
|
+
<span class="info-box-text">Comments</span>
|
|
828
|
+
<span class="info-box-number">41,410</span>
|
|
829
|
+
|
|
830
|
+
<div class="progress">
|
|
831
|
+
<div class="progress-bar" style="width: 70%"></div>
|
|
832
|
+
</div>
|
|
833
|
+
<span class="progress-description">
|
|
834
|
+
70% Increase in 30 Days
|
|
835
|
+
</span>
|
|
836
|
+
</div>
|
|
837
|
+
<!-- /.info-box-content -->
|
|
838
|
+
</div>
|
|
839
|
+
<!-- /.info-box -->
|
|
840
|
+
</div>
|
|
841
|
+
<!-- /.col -->
|
|
842
|
+
</div>
|
|
843
|
+
<!-- /.row -->
|
|
844
|
+
</div><!-- /.container-fluid -->
|
|
842
845
|
</div>
|
|
843
|
-
<!-- /.
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
<span class="info-box-number">41,410</span>
|
|
853
|
-
|
|
854
|
-
<div class="progress">
|
|
855
|
-
<div class="progress-bar" style="width: 70%"></div>
|
|
856
|
-
</div>
|
|
857
|
-
<span class="progress-description">
|
|
858
|
-
70% Increase in 30 Days
|
|
859
|
-
</span>
|
|
860
|
-
</div>
|
|
861
|
-
<!-- /.info-box-content -->
|
|
862
|
-
</div>
|
|
863
|
-
<!-- /.info-box -->
|
|
846
|
+
<!-- /.content -->
|
|
847
|
+
</main>
|
|
848
|
+
<!-- /.app-content -->
|
|
849
|
+
|
|
850
|
+
<!-- Main Footer -->
|
|
851
|
+
<footer class="app-footer">
|
|
852
|
+
<!-- To the end -->
|
|
853
|
+
<div class="float-end d-none d-sm-inline">
|
|
854
|
+
Anything you want
|
|
864
855
|
</div>
|
|
865
|
-
<!--
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
<!--
|
|
875
|
-
<
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
<!-- OPTIONAL SCRIPT For Bootstrap 5 -->
|
|
892
|
-
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
|
|
893
|
-
|
|
894
|
-
<!-- Bootstrap 5 -->
|
|
895
|
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
|
|
896
|
-
|
|
897
|
-
<!-- REQUIRED SCRIPTS -->
|
|
898
|
-
<!-- AdminLTE App -->
|
|
899
|
-
<script src="../../js/adminlte.js"></script>
|
|
900
|
-
|
|
901
|
-
<!-- OPTIONAL SCRIPTS -->
|
|
902
|
-
<script>
|
|
903
|
-
const SELECTOR_SIDEBAR = '.sidebar'
|
|
904
|
-
const Default = {
|
|
905
|
-
scrollbarTheme: 'os-theme-light',
|
|
906
|
-
scrollbarAutoHide: 'leave'
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
document.addEventListener("DOMContentLoaded", function() {
|
|
910
|
-
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
|
911
|
-
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
|
|
912
|
-
scrollbars: {
|
|
913
|
-
theme: Default.scrollbarTheme,
|
|
914
|
-
autoHide: Default.scrollbarAutoHide,
|
|
915
|
-
clickScroll: true
|
|
856
|
+
<!-- Default to the start -->
|
|
857
|
+
<strong>Copyright © 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
|
|
858
|
+
</footer>
|
|
859
|
+
</div>
|
|
860
|
+
<!-- ./app-wrapper -->
|
|
861
|
+
|
|
862
|
+
<!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
|
|
863
|
+
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
|
|
864
|
+
|
|
865
|
+
<!-- @popperjs for Bootstrap 5 -->
|
|
866
|
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
|
|
867
|
+
|
|
868
|
+
<!-- Bootstrap 5 -->
|
|
869
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
|
|
870
|
+
|
|
871
|
+
<!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
|
|
872
|
+
<script src="../../../dist/js/adminlte.js"></script>
|
|
873
|
+
|
|
874
|
+
<!-- OPTIONAL SCRIPTS -->
|
|
875
|
+
<script>
|
|
876
|
+
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
|
877
|
+
const Default = {
|
|
878
|
+
scrollbarTheme: 'os-theme-light',
|
|
879
|
+
scrollbarAutoHide: 'leave',
|
|
880
|
+
scrollbarClickScroll: true
|
|
916
881
|
}
|
|
917
|
-
})
|
|
918
|
-
}
|
|
919
|
-
})
|
|
920
|
-
</script>
|
|
921
|
-
|
|
922
|
-
<!-- DON'T USE THIS IN PRODUCTION -->
|
|
923
|
-
<script>
|
|
924
|
-
// Color Mode Toggler
|
|
925
|
-
(() => {
|
|
926
|
-
'use strict'
|
|
927
|
-
|
|
928
|
-
const storedTheme = localStorage.getItem('theme')
|
|
929
|
-
|
|
930
|
-
const getPreferredTheme = () => {
|
|
931
|
-
if (storedTheme) {
|
|
932
|
-
return storedTheme
|
|
933
|
-
}
|
|
934
|
-
|
|
935
|
-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
936
|
-
}
|
|
937
|
-
|
|
938
|
-
const setTheme = function (theme) {
|
|
939
|
-
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
940
|
-
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
|
941
|
-
} else {
|
|
942
|
-
document.documentElement.setAttribute('data-bs-theme', theme)
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
|
|
946
|
-
setTheme(getPreferredTheme())
|
|
947
|
-
|
|
948
|
-
const showActiveTheme = theme => {
|
|
949
|
-
const activeThemeIcon = document.querySelector('.theme-icon-active i')
|
|
950
|
-
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
|
951
|
-
const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
|
|
952
|
-
|
|
953
|
-
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
|
954
|
-
element.classList.remove('active')
|
|
955
|
-
})
|
|
956
|
-
|
|
957
|
-
btnToActive.classList.add('active')
|
|
958
|
-
activeThemeIcon.setAttribute('class', svgOfActiveBtn)
|
|
959
|
-
}
|
|
960
|
-
|
|
961
|
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
962
|
-
if (storedTheme !== 'light' || storedTheme !== 'dark') {
|
|
963
|
-
setTheme(getPreferredTheme())
|
|
964
|
-
}
|
|
965
|
-
})
|
|
966
|
-
|
|
967
|
-
window.addEventListener('DOMContentLoaded', () => {
|
|
968
|
-
showActiveTheme(getPreferredTheme())
|
|
969
|
-
|
|
970
|
-
document.querySelectorAll('[data-bs-theme-value]')
|
|
971
|
-
.forEach(toggle => {
|
|
972
|
-
toggle.addEventListener('click', () => {
|
|
973
|
-
const theme = toggle.getAttribute('data-bs-theme-value')
|
|
974
|
-
localStorage.setItem('theme', theme)
|
|
975
|
-
setTheme(theme)
|
|
976
|
-
showActiveTheme(theme)
|
|
977
|
-
})
|
|
978
|
-
})
|
|
979
|
-
})
|
|
980
|
-
})()
|
|
981
|
-
</script>
|
|
982
882
|
|
|
883
|
+
document.addEventListener("DOMContentLoaded", function() {
|
|
884
|
+
const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
|
|
885
|
+
if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
|
886
|
+
OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
|
|
887
|
+
scrollbars: {
|
|
888
|
+
theme: Default.scrollbarTheme,
|
|
889
|
+
autoHide: Default.scrollbarAutoHide,
|
|
890
|
+
clickScroll: Default.scrollbarClickScroll
|
|
891
|
+
}
|
|
892
|
+
})
|
|
893
|
+
}
|
|
894
|
+
})
|
|
895
|
+
</script>
|
|
983
896
|
</body>
|
|
984
897
|
|
|
985
898
|
</html>
|