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.
Files changed (151) hide show
  1. package/.bundlewatch.config.json +2 -2
  2. package/.cache/.eslintcache +1 -0
  3. package/.cache/.stylelintcache +1 -0
  4. package/.eslintignore +1 -0
  5. package/.eslintrc.json +16 -0
  6. package/.stylelintrc.json +47 -0
  7. package/LICENSE +1 -1
  8. package/README.md +5 -6
  9. package/dist/css/adminlte.css +2383 -2754
  10. package/dist/css/adminlte.css.map +1 -1
  11. package/dist/css/adminlte.min.css +2 -2
  12. package/dist/css/adminlte.min.css.map +1 -1
  13. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
  14. package/dist/css/adminlte.rtl.css.map +1 -0
  15. package/dist/css/adminlte.rtl.min.css +7 -0
  16. package/dist/css/adminlte.rtl.min.css.map +1 -0
  17. package/dist/js/adminlte.js +173 -182
  18. package/dist/js/adminlte.js.map +1 -1
  19. package/dist/js/adminlte.min.js +6 -1
  20. package/dist/js/adminlte.min.js.map +1 -1
  21. package/dist/pages/UI/timeline.html +698 -0
  22. package/dist/pages/docs/browser-support.html +614 -0
  23. package/dist/pages/docs/color-mode.html +855 -0
  24. package/dist/pages/docs/components/main-header.html +926 -0
  25. package/dist/pages/docs/layout.html +617 -0
  26. package/dist/pages/docs.html +617 -0
  27. package/dist/pages/examples/login.html +114 -187
  28. package/dist/pages/examples/register.html +117 -190
  29. package/dist/pages/forms/general.html +598 -647
  30. package/dist/pages/index.html +1091 -0
  31. package/dist/pages/index2.html +1452 -0
  32. package/dist/pages/index3.html +950 -0
  33. package/dist/pages/layout/fixed-sidebar.html +590 -638
  34. package/dist/pages/layout/layout-rtl.html +623 -0
  35. package/dist/pages/layout/sidebar-mini.html +623 -0
  36. package/dist/pages/layout/unfixed-sidebar.html +589 -638
  37. package/dist/pages/tables/simple.html +837 -938
  38. package/dist/pages/widgets/cards.html +814 -698
  39. package/dist/pages/widgets/info-box.html +864 -951
  40. package/dist/pages/widgets/small-box.html +625 -678
  41. package/index.html +1 -6
  42. package/package.json +53 -36
  43. package/src/config/assets.config.mjs +8 -0
  44. package/src/config/astro.config.mjs +17 -0
  45. package/src/config/postcss.config.mjs +15 -0
  46. package/src/config/rollup.config.js +20 -0
  47. package/src/html/.eslintrc.json +24 -0
  48. package/src/html/.tsconfig.json +4 -0
  49. package/src/html/components/_head.astro +31 -0
  50. package/src/html/components/_scripts.astro +40 -0
  51. package/src/html/components/dashboard/_footer.astro +12 -0
  52. package/src/html/components/dashboard/_sidenav.astro +323 -0
  53. package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
  54. package/src/html/components/docs/browser-support/index.md +22 -0
  55. package/src/html/components/docs/color-mode/navbar-html.md +80 -0
  56. package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
  57. package/src/html/components/docs/components/main-header-1.md +159 -0
  58. package/src/html/components/docs/introduction/index.md +35 -0
  59. package/src/html/env.d.ts +1 -0
  60. package/src/html/pages/UI/timeline.astro +158 -0
  61. package/src/html/pages/docs/browser-support.astro +58 -0
  62. package/src/html/pages/docs/color-mode.astro +224 -0
  63. package/src/html/pages/docs/components/main-header.astro +232 -0
  64. package/src/html/pages/docs/index.astro +58 -0
  65. package/src/html/pages/docs/layout.astro +77 -0
  66. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
  67. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
  68. package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
  69. package/src/{index.html → html/pages/index.astro} +266 -189
  70. package/src/{index2.html → html/pages/index2.astro} +229 -284
  71. package/src/{index3.html → html/pages/index3.astro} +151 -169
  72. package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
  73. package/src/html/pages/layout/layout-rtl.astro +84 -0
  74. package/src/html/pages/layout/sidebar-mini.astro +83 -0
  75. package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
  76. package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
  77. package/src/html/pages/widgets/cards.astro +308 -0
  78. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
  79. package/src/html/pages/widgets/small-box.astro +121 -0
  80. package/src/scss/_app-footer.scss +15 -0
  81. package/src/scss/_app-header.scss +26 -0
  82. package/src/scss/_app-main.scss +20 -0
  83. package/src/scss/_app-sidebar.scss +429 -0
  84. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  85. package/src/scss/_bootstrap-variables.scss +41 -26
  86. package/src/scss/_callouts.scss +34 -0
  87. package/src/scss/_cards.scss +30 -224
  88. package/src/scss/_direct-chat.scss +15 -9
  89. package/src/scss/_docs.scss +4 -0
  90. package/src/scss/_dropdown.scss +7 -5
  91. package/src/scss/_info-box.scss +2 -6
  92. package/src/scss/_miscellaneous.scss +0 -455
  93. package/src/scss/_mixins.scss +0 -6
  94. package/src/scss/_root.scss +2 -58
  95. package/src/scss/_small-box.scss +15 -38
  96. package/src/scss/_table.scss +0 -50
  97. package/src/scss/_timeline.scss +120 -0
  98. package/src/scss/_variables-dark.scss +15 -8
  99. package/src/scss/_variables.scss +30 -135
  100. package/src/scss/adminlte.scss +1 -1
  101. package/src/scss/mixins/_animations.scss +4 -0
  102. package/src/scss/mixins/_scrollbar.scss +2 -2
  103. package/src/scss/pages/_login_and_register.scss +1 -2
  104. package/src/scss/parts/_core.scss +7 -15
  105. package/src/scss/parts/_extra-components.scss +1 -2
  106. package/src/ts/adminlte.ts +0 -2
  107. package/src/ts/card-widget.ts +42 -18
  108. package/src/ts/direct-chat.ts +33 -8
  109. package/src/ts/layout.ts +6 -4
  110. package/src/ts/push-menu.ts +94 -145
  111. package/src/ts/treeview.ts +17 -23
  112. package/src/ts/util/index.ts +2 -2
  113. package/src/utils/index.js +11 -0
  114. package/tsconfig.json +11 -3
  115. package/.stylelintrc +0 -40
  116. package/CHECKLIST.md +0 -0
  117. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  118. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  119. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  120. package/dist/index.html +0 -1065
  121. package/dist/index2.html +0 -1629
  122. package/dist/index3.html +0 -1015
  123. package/gulpfile.js +0 -315
  124. package/src/pages/widgets/cards.html +0 -143
  125. package/src/pages/widgets/small-box.html +0 -124
  126. package/src/partials/_head.html +0 -31
  127. package/src/partials/dashboard/_footer.html +0 -9
  128. package/src/partials/dashboard/_sidenav.html +0 -244
  129. package/src/scss/_brand-container.scss +0 -72
  130. package/src/scss/_content-header.scss +0 -9
  131. package/src/scss/_content-wrapper.scss +0 -6
  132. package/src/scss/_content.scss +0 -3
  133. package/src/scss/_layout-fixed.scss +0 -43
  134. package/src/scss/_layout-mobile.scss +0 -22
  135. package/src/scss/_main-footer.scss +0 -28
  136. package/src/scss/_main-header.scss +0 -40
  137. package/src/scss/_main-sidebar.scss +0 -63
  138. package/src/scss/_nav-sidebar.scss +0 -66
  139. package/src/scss/_products.scss +0 -55
  140. package/src/scss/_sidebar-close.scss +0 -6
  141. package/src/scss/_sidebar-collapse.scss +0 -120
  142. package/src/scss/_sidebar-horizontal.scss +0 -67
  143. package/src/scss/_sidebar.scss +0 -11
  144. package/src/scss/_users-list.scss +0 -45
  145. package/src/scss/mixins/_brand-variant.scss +0 -9
  146. package/src/scss/mixins/_cards.scss +0 -53
  147. package/src/scss/mixins/_direct-chat.scss +0 -17
  148. package/src/scss/mixins/_header-variant.scss +0 -22
  149. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  150. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  151. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/dist/index2.html DELETED
@@ -1,1629 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
-
6
- <head>
7
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8
- <!-- Primary Meta Tags -->
9
- <title>AdminLTE 4 | Dashboard 2</title>
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <meta name="title" content="AdminLTE 4 | Dashboard 2">
12
- <meta name="author" content="ColorlibHQ">
13
- <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard featuring over 800 components, 10+ plugins and 20 example pages using Vanilla JS.">
14
- <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" />
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"> -->
19
-
20
- <!-- OPTIONAL LINKS -->
21
-
22
- <!-- Google Font: Source Sans Pro -->
23
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
24
-
25
- <!-- overlayScrollbars -->
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
27
-
28
- <!-- Font Awesome -->
29
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
30
-
31
- <!-- REQUIRED LINKS -->
32
-
33
- <!-- Theme style -->
34
- <link rel="stylesheet" href="./css/adminlte.css">
35
-
36
- <!-- For RTL verison use ./css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
37
- <!-- <link rel="stylesheet" href="./css/rtl/adminlte.rtl.css""> -->
38
-
39
- </head>
40
-
41
- <body class="layout-fixed">
42
- <div class="wrapper">
43
- <!-- Navbar -->
44
- <nav class="main-header navbar navbar-expand navbar-light">
45
- <div class="container-fluid">
46
- <!-- Start navbar links -->
47
- <ul class="navbar-nav">
48
- <li class="nav-item">
49
- <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button">
50
- <i class="fa-solid fa-bars"></i>
51
- </a>
52
- </li>
53
- <li class="nav-item d-none d-md-block">
54
- <a href="#" class="nav-link">Home</a>
55
- </li>
56
- <li class="nav-item d-none d-md-block">
57
- <a href="#" class="nav-link">Contact</a>
58
- </li>
59
- </ul>
60
-
61
- <!-- End navbar links -->
62
- <ul class="navbar-nav ms-auto">
63
- <!-- Navbar Search -->
64
- <li class="nav-item">
65
- <a class="nav-link" data-widget="navbar-search" href="#" role="button">
66
- <i class="fa-solid fa-search"></i>
67
- </a>
68
- </li>
69
-
70
- <!-- Messages Dropdown Menu -->
71
- <li class="nav-item dropdown">
72
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
73
- <i class="fa-regular fa-comments"></i>
74
- <span class="navbar-badge badge text-bg-danger">3</span>
75
- </a>
76
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
77
- <a href="#" class="dropdown-item">
78
- <!-- Message Start -->
79
- <div class="d-flex">
80
- <div class="flex-shrink-0">
81
- <img src="./assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
82
- </div>
83
- <div class="flex-grow-1">
84
- <h3 class="dropdown-item-title">
85
- Brad Diesel
86
- <span class="float-end fs-7 text-danger">
87
- <i class="fa-solid fa-star"></i>
88
- </span>
89
- </h3>
90
- <p class="fs-7">Call me whenever you can...</p>
91
- <p class="fs-7 text-muted">
92
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
93
- </p>
94
- </div>
95
- </div>
96
- <!-- Message End -->
97
- </a>
98
- <div class="dropdown-divider"></div>
99
- <a href="#" class="dropdown-item">
100
- <!-- Message Start -->
101
- <div class="d-flex">
102
- <div class="flex-shrink-0">
103
- <img src="./assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
104
- </div>
105
- <div class="flex-grow-1">
106
- <h3 class="dropdown-item-title">
107
- John Pierce
108
- <span class="float-end fs-7 text-muted">
109
- <i class="fa-solid fa-star"></i>
110
- </span>
111
- </h3>
112
- <p class="fs-7">I got your message bro</p>
113
- <p class="fs-7 text-muted">
114
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
115
- </p>
116
- </div>
117
- </div>
118
- <!-- Message End -->
119
- </a>
120
- <div class="dropdown-divider"></div>
121
- <a href="#" class="dropdown-item">
122
- <!-- Message Start -->
123
- <div class="d-flex">
124
- <div class="flex-shrink-0">
125
- <img src="./assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
126
- </div>
127
- <div class="flex-grow-1">
128
- <h3 class="dropdown-item-title">
129
- Nora Silvester
130
- <span class="float-end fs-7 text-warning">
131
- <i class="fa-solid fa-star"></i>
132
- </span>
133
- </h3>
134
- <p class="fs-7">The subject goes here</p>
135
- <p class="fs-7 text-muted">
136
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
137
- </p>
138
- </div>
139
- </div>
140
- <!-- Message End -->
141
- </a>
142
- <div class="dropdown-divider"></div>
143
- <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
144
- </div>
145
- </li>
146
- <!-- Notifications Dropdown Menu -->
147
- <li class="nav-item dropdown">
148
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
149
- <i class="fa-regular fa-bell"></i>
150
- <span class="navbar-badge badge text-bg-warning">15</span>
151
- </a>
152
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
153
- <span class="dropdown-item dropdown-header">15 Notifications</span>
154
- <div class="dropdown-divider"></div>
155
- <a href="#" class="dropdown-item">
156
- <i class="fa-solid fa-envelope me-2"></i> 4 new messages
157
- <span class="float-end text-muted fs-7">3 mins</span>
158
- </a>
159
- <div class="dropdown-divider"></div>
160
- <a href="#" class="dropdown-item">
161
- <i class="fa-solid fa-users me-2"></i> 8 friend requests
162
- <span class="float-end text-muted fs-7">12 hours</span>
163
- </a>
164
- <div class="dropdown-divider"></div>
165
- <a href="#" class="dropdown-item">
166
- <i class="fa-solid fa-file me-2"></i> 3 new reports
167
- <span class="float-end text-muted fs-7">2 days</span>
168
- </a>
169
- <div class="dropdown-divider"></div>
170
- <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
171
- </div>
172
- </li>
173
- <li class="nav-item dropdown user-menu">
174
- <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
175
- <img src="./assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
176
- <span class="d-none d-md-inline">Alexander Pierce</span>
177
- </a>
178
- <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
179
- <!-- User image -->
180
- <li class="user-header text-bg-primary">
181
- <img src="./assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
182
-
183
- <p>
184
- Alexander Pierce - Web Developer
185
- <small>Member since Nov. 2012</small>
186
- </p>
187
- </li>
188
- <!-- Menu Body -->
189
- <li class="user-body">
190
- <div class="row">
191
- <div class="col-4 text-center">
192
- <a href="#">Followers</a>
193
- </div>
194
- <div class="col-4 text-center">
195
- <a href="#">Sales</a>
196
- </div>
197
- <div class="col-4 text-center">
198
- <a href="#">Friends</a>
199
- </div>
200
- </div>
201
- <!-- /.row -->
202
- </li>
203
- <!-- Menu Footer-->
204
- <li class="user-footer">
205
- <a href="#" class="btn btn-default btn-flat">Profile</a>
206
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
207
- </li>
208
- </ul>
209
- </li>
210
- <li class="nav-item dropdown">
211
- <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">
212
- <span class="theme-icon-active">
213
- <i class="my-1"></i>
214
- </span>
215
- </button>
216
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
217
- <li>
218
- <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
219
- <i class="fa-regular fa-sun me-2 opacity-50"></i>
220
- Light
221
- <i class="fa-solid fa-check ms-auto d-none"></i>
222
- </button>
223
- </li>
224
- <li>
225
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
226
- <i class="fa-solid fa-moon me-2 opacity-50"></i>
227
- Dark
228
- <i class="fa-solid fa-check ms-auto d-none"></i>
229
- </button>
230
- </li>
231
- <li>
232
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
233
- <i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
234
- Auto
235
- <i class="fa-solid fa-check ms-auto d-none"></i>
236
- </button>
237
- </li>
238
- </ul>
239
- </li>
240
- <!-- TODO tackel in v4.1 -->
241
- <!-- <li class="nav-item">
242
- <a class="nav-link" data-widget="fullscreen" href="#" role="button">
243
- <i class="fa-solid fa-expand-arrows-alt"></i>
244
- </a>
245
- </li>
246
- <li class="nav-item">
247
- <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
248
- <i class="fa-solid fa-th-large"></i>
249
- </a>
250
- </li> -->
251
- </ul>
252
- </div>
253
- </nav>
254
- <!-- /.navbar -->
255
-
256
-
257
- <!-- Main Sidebar Container -->
258
- <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
259
- <div class="brand-container">
260
- <a href="javascript:;" class="brand-link">
261
- <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
262
- <span class="brand-text fw-light">AdminLTE 4</span>
263
- </a>
264
- <a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button">
265
- <i class="fa-solid fa-angle-double-left"></i>
266
- </a>
267
- </div>
268
- <!-- Sidebar -->
269
- <div class="sidebar">
270
- <nav class="mt-2">
271
- <!-- Sidebar Menu -->
272
- <ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
273
- <li class="nav-item menu-open">
274
- <a href="javascript:;" class="nav-link active">
275
- <i class="nav-icon fa-solid fa-circle"></i>
276
- <p>
277
- Dashboard
278
- <i class="end fa-solid fa-angle-right"></i>
279
- </p>
280
- </a>
281
- <ul class="nav nav-treeview">
282
- <li class="nav-item">
283
- <a href="./index.html" class="nav-link ">
284
- <i class="nav-icon fa-regular fa-circle"></i>
285
- <p>Dashboard v1</p>
286
- </a>
287
- </li>
288
- <li class="nav-item">
289
- <a href="./index2.html" class="nav-link active">
290
- <i class="nav-icon fa-regular fa-circle"></i>
291
- <p>Dashboard v2</p>
292
- </a>
293
- </li>
294
- <li class="nav-item">
295
- <a href="./index3.html" class="nav-link ">
296
- <i class="nav-icon fa-regular fa-circle"></i>
297
- <p>Dashboard v3</p>
298
- </a>
299
- </li>
300
- </ul>
301
- </li>
302
- <li class="nav-item ">
303
- <a href="javascript:;" class="nav-link ">
304
- <i class="nav-icon fa-solid fa-circle"></i>
305
- <p>
306
- Widgets
307
- <i class="end fa-solid fa-angle-right"></i>
308
- </p>
309
- </a>
310
- <ul class="nav nav-treeview">
311
- <li class="nav-item">
312
- <a href="./pages/widgets/small-box.html" class="nav-link ">
313
- <i class="nav-icon fa-regular fa-circle"></i>
314
- <p>Small Box</p>
315
- </a>
316
- </li>
317
- <li class="nav-item">
318
- <a href="./pages/widgets/info-box.html" class="nav-link ">
319
- <i class="nav-icon fa-regular fa-circle"></i>
320
- <p>info Box</p>
321
- </a>
322
- </li>
323
- <li class="nav-item">
324
- <a href="./pages/widgets/cards.html" class="nav-link ">
325
- <i class="nav-icon fa-regular fa-circle"></i>
326
- <p>Cards</p>
327
- </a>
328
- </li>
329
- </ul>
330
- </li>
331
-
332
- <li class="nav-item ">
333
- <a href="javascript:;" class="nav-link ">
334
- <i class="nav-icon fa-solid fa-circle"></i>
335
- <p>
336
- Layout Options
337
- <span class="badge text-bg-info float-end me-3">6</span>
338
- <i class="end fa-solid fa-angle-right"></i>
339
- </p>
340
- </a>
341
- <ul class="nav nav-treeview">
342
- <li class="nav-item">
343
- <a href="./pages/layout/unfixed-sidebar.html" class="nav-link ">
344
- <i class="nav-icon fa-regular fa-circle"></i>
345
- <p>Unfixed Sidebar</p>
346
- </a>
347
- </li>
348
- <li class="nav-item">
349
- <a href="./pages/layout/fixed-sidebar.html" class="nav-link ">
350
- <i class="nav-icon fa-regular fa-circle"></i>
351
- <p>Fixed Sidebar</p>
352
- </a>
353
- </li>
354
- </ul>
355
- </li>
356
- <li class="nav-item ">
357
- <a href="javascript:;" class="nav-link ">
358
- <i class="nav-icon fa-solid fa-circle"></i>
359
- <p>
360
- Forms
361
- <i class="end fa-solid fa-angle-right"></i>
362
- </p>
363
- </a>
364
- <ul class="nav nav-treeview">
365
- <li class="nav-item">
366
- <a href="./pages/forms/general.html" class="nav-link ">
367
- <i class="nav-icon fa-regular fa-circle"></i>
368
- <p>General Elements</p>
369
- </a>
370
- </li>
371
- </ul>
372
- </li>
373
- <li class="nav-item ">
374
- <a href="javascript:;" class="nav-link ">
375
- <i class="nav-icon fa-solid fa-circle"></i>
376
- <p>
377
- Tables
378
- <i class="end fa-solid fa-angle-right"></i>
379
- </p>
380
- </a>
381
- <ul class="nav nav-treeview">
382
- <li class="nav-item">
383
- <a href="./pages/tables/simple.html" class="nav-link ">
384
- <i class="nav-icon fa-regular fa-circle"></i>
385
- <p>Simple Tables</p>
386
- </a>
387
- </li>
388
- </ul>
389
- </li>
390
- <li class="nav-header">EXAMPLES</li>
391
- <li class="nav-item">
392
- <a href="javascript:;" class="nav-link">
393
- <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
394
- <p>
395
- Login & Register
396
- <i class="end fa-solid fa-angle-right"></i>
397
- </p>
398
- </a>
399
- <ul class="nav nav-treeview">
400
- <li class="nav-item">
401
- <a href="./pages/examples/login.html" class="nav-link ">
402
- <i class="nav-icon fa-regular fa-circle"></i>
403
- <p>Login v1</p>
404
- </a>
405
- </li>
406
- <li class="nav-item">
407
- <a href="./pages/examples/register.html" class="nav-link ">
408
- <i class="nav-icon fa-regular fa-circle"></i>
409
- <p>Register v1</p>
410
- </a>
411
- </li>
412
- </ul>
413
- </li>
414
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
415
- <li class="nav-item">
416
- <a href="javascript:;" class="nav-link">
417
- <i class="nav-icon fa-solid fa-circle"></i>
418
- <p>Level 1</p>
419
- </a>
420
- </li>
421
- <li class="nav-item">
422
- <a href="javascript:;" class="nav-link">
423
- <i class="nav-icon fa-solid fa-circle"></i>
424
- <p>
425
- Level 1
426
- <i class="end fa-solid fa-angle-right"></i>
427
- </p>
428
- </a>
429
- <ul class="nav nav-treeview">
430
- <li class="nav-item">
431
- <a href="javascript:;" class="nav-link">
432
- <i class="nav-icon fa-regular fa-circle"></i>
433
- <p>Level 2</p>
434
- </a>
435
- </li>
436
- <li class="nav-item">
437
- <a href="javascript:;" class="nav-link">
438
- <i class="nav-icon fa-regular fa-circle"></i>
439
- <p>
440
- Level 2
441
- <i class="end fa-solid fa-angle-right"></i>
442
- </p>
443
- </a>
444
- <ul class="nav nav-treeview">
445
- <li class="nav-item">
446
- <a href="javascript:;" class="nav-link">
447
- <i class="nav-icon fa-regular fa-dot-circle"></i>
448
- <p>Level 3</p>
449
- </a>
450
- </li>
451
- <li class="nav-item">
452
- <a href="javascript:;" class="nav-link">
453
- <i class="nav-icon fa-regular fa-dot-circle"></i>
454
- <p>Level 3</p>
455
- </a>
456
- </li>
457
- <li class="nav-item">
458
- <a href="javascript:;" class="nav-link">
459
- <i class="nav-icon fa-regular fa-dot-circle"></i>
460
- <p>Level 3</p>
461
- </a>
462
- </li>
463
- </ul>
464
- </li>
465
- <li class="nav-item">
466
- <a href="javascript:;" class="nav-link">
467
- <i class="nav-icon fa-regular fa-circle"></i>
468
- <p>Level 2</p>
469
- </a>
470
- </li>
471
- </ul>
472
- </li>
473
- <li class="nav-item">
474
- <a href="javascript:;" class="nav-link">
475
- <i class="nav-icon fa-solid fa-circle"></i>
476
- <p>Level 1</p>
477
- </a>
478
- </li>
479
- <li class="nav-header">LABELS</li>
480
- <li class="nav-item">
481
- <a href="javascript:;" class="nav-link">
482
- <i class="nav-icon fa-regular fa-circle text-danger"></i>
483
- <p class="text">Important</p>
484
- </a>
485
- </li>
486
- <li class="nav-item">
487
- <a href="javascript:;" class="nav-link">
488
- <i class="nav-icon fa-regular fa-circle text-warning"></i>
489
- <p>Warning</p>
490
- </a>
491
- </li>
492
- <li class="nav-item">
493
- <a href="javascript:;" class="nav-link">
494
- <i class="nav-icon fa-regular fa-circle text-info"></i>
495
- <p>Informational</p>
496
- </a>
497
- </li>
498
- </ul>
499
- </nav>
500
- </div>
501
- <!-- /.sidebar -->
502
- </aside>
503
-
504
- <!-- Main content -->
505
- <main class="content-wrapper">
506
- <div class="content-header">
507
- <div class="container-fluid">
508
- <div class="row mb-2">
509
- <div class="col-sm-6">
510
- <h3>Dashboard v2</h3>
511
- </div>
512
- <div class="col-sm-6">
513
- <ol class="breadcrumb float-sm-end">
514
- <li class="breadcrumb-item">
515
- <a href="#">Home</a>
516
- </li>
517
- <li class="breadcrumb-item active" aria-current="page">Dashboard v2</li>
518
- </ol>
519
- </div>
520
- </div>
521
- </div>
522
- </div>
523
- <div class="content">
524
- <div class="container-fluid">
525
- <!-- Info boxes -->
526
- <div class="row">
527
- <div class="col-12 col-sm-6 col-md-3">
528
- <div class="info-box">
529
- <span class="info-box-icon text-bg-primary shadow-sm">
530
- <i class="fa-solid fa-cog"></i>
531
- </span>
532
-
533
- <div class="info-box-content">
534
- <span class="info-box-text">CPU Traffic</span>
535
- <span class="info-box-number">
536
- 10
537
- <small>%</small>
538
- </span>
539
- </div>
540
- <!-- /.info-box-content -->
541
- </div>
542
- <!-- /.info-box -->
543
- </div>
544
- <!-- /.col -->
545
- <div class="col-12 col-sm-6 col-md-3">
546
- <div class="info-box">
547
- <span class="info-box-icon text-bg-danger shadow-sm">
548
- <i class="fa-solid fa-thumbs-up"></i>
549
- </span>
550
-
551
- <div class="info-box-content">
552
- <span class="info-box-text">Likes</span>
553
- <span class="info-box-number">41,410</span>
554
- </div>
555
- <!-- /.info-box-content -->
556
- </div>
557
- <!-- /.info-box -->
558
- </div>
559
- <!-- /.col -->
560
-
561
- <!-- fix for small devices only -->
562
- <!-- <div class="clearfix hidden-md-up"></div> -->
563
-
564
- <div class="col-12 col-sm-6 col-md-3">
565
- <div class="info-box">
566
- <span class="info-box-icon text-bg-success shadow-sm">
567
- <i class="fa-solid fa-shopping-cart"></i>
568
- </span>
569
-
570
- <div class="info-box-content">
571
- <span class="info-box-text">Sales</span>
572
- <span class="info-box-number">760</span>
573
- </div>
574
- <!-- /.info-box-content -->
575
- </div>
576
- <!-- /.info-box -->
577
- </div>
578
- <!-- /.col -->
579
- <div class="col-12 col-sm-6 col-md-3">
580
- <div class="info-box">
581
- <span class="info-box-icon text-bg-warning shadow-sm">
582
- <i class="fa-solid fa-users"></i>
583
- </span>
584
-
585
- <div class="info-box-content">
586
- <span class="info-box-text">New Members</span>
587
- <span class="info-box-number">2,000</span>
588
- </div>
589
- <!-- /.info-box-content -->
590
- </div>
591
- <!-- /.info-box -->
592
- </div>
593
- <!-- /.col -->
594
- </div>
595
- <!-- /.row -->
596
-
597
- <div class="row">
598
- <div class="col-md-12">
599
- <div class="card">
600
- <div class="card-header">
601
- <h5 class="card-title">Monthly Recap Report</h5>
602
-
603
- <div class="card-tools">
604
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
605
- <i class="fa-solid fa-minus"></i>
606
- </button>
607
- <div class="btn-group">
608
- <button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
609
- <i class="fa-solid fa-wrench"></i>
610
- </button>
611
- <div class="dropdown-menu dropdown-menu-end" role="menu">
612
- <a href="#" class="dropdown-item">Action</a>
613
- <a href="#" class="dropdown-item">Another action</a>
614
- <a href="#" class="dropdown-item">Something else here</a>
615
- <a class="dropdown-divider"></a>
616
- <a href="#" class="dropdown-item">Separated link</a>
617
- </div>
618
- </div>
619
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
620
- <i class="fa-solid fa-times"></i>
621
- </button>
622
- </div>
623
- </div>
624
- <!-- /.card-header -->
625
- <div class="card-body">
626
- <div class="row">
627
- <div class="col-md-8">
628
- <p class="text-center">
629
- <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
630
- </p>
631
-
632
- <div class="chart">
633
- <!-- Sales Chart Canvas -->
634
- <canvas id="salesChart" style="height: 180px;"></canvas>
635
- </div>
636
- <!-- /.chart-responsive -->
637
- </div>
638
- <!-- /.col -->
639
- <div class="col-md-4">
640
- <p class="text-center">
641
- <strong>Goal Completion</strong>
642
- </p>
643
-
644
- <div class="progress-group">
645
- Add Products to Cart
646
- <span class="float-end">
647
- <b>160</b>/200
648
- </span>
649
- <div class="progress progress-sm">
650
- <div class="progress-bar text-bg-primary" style="width: 80%"></div>
651
- </div>
652
- </div>
653
- <!-- /.progress-group -->
654
-
655
- <div class="progress-group">
656
- Complete Purchase
657
- <span class="float-end">
658
- <b>310</b>/400
659
- </span>
660
- <div class="progress progress-sm">
661
- <div class="progress-bar text-bg-danger" style="width: 75%"></div>
662
- </div>
663
- </div>
664
-
665
- <!-- /.progress-group -->
666
- <div class="progress-group">
667
- <span class="progress-text">Visit Premium Page</span>
668
- <span class="float-end">
669
- <b>480</b>/800
670
- </span>
671
- <div class="progress progress-sm">
672
- <div class="progress-bar text-bg-success" style="width: 60%"></div>
673
- </div>
674
- </div>
675
-
676
- <!-- /.progress-group -->
677
- <div class="progress-group">
678
- Send Inquiries
679
- <span class="float-end">
680
- <b>250</b>/500
681
- </span>
682
- <div class="progress progress-sm">
683
- <div class="progress-bar text-bg-warning" style="width: 50%"></div>
684
- </div>
685
- </div>
686
- <!-- /.progress-group -->
687
- </div>
688
- <!-- /.col -->
689
- </div>
690
- <!-- /.row -->
691
- </div>
692
- <!-- ./card-body -->
693
- <div class="card-footer">
694
- <div class="row">
695
- <div class="col-sm-3 col-6">
696
- <div class="description-block border-end">
697
- <span class="description-percentage text-success">
698
- <i class="fa-solid fa-caret-up"></i> 17%
699
- </span>
700
- <h5 class="description-header">$35,210.43</h5>
701
- <span class="description-text">TOTAL REVENUE</span>
702
- </div>
703
- <!-- /.description-block -->
704
- </div>
705
- <!-- /.col -->
706
- <div class="col-sm-3 col-6">
707
- <div class="description-block border-end">
708
- <span class="description-percentage text-info">
709
- <i class="fa-solid fa-caret-left"></i> 0%
710
- </span>
711
- <h5 class="description-header">$10,390.90</h5>
712
- <span class="description-text">TOTAL COST</span>
713
- </div>
714
- <!-- /.description-block -->
715
- </div>
716
- <!-- /.col -->
717
- <div class="col-sm-3 col-6">
718
- <div class="description-block border-end">
719
- <span class="description-percentage text-success">
720
- <i class="fa-solid fa-caret-up"></i> 20%
721
- </span>
722
- <h5 class="description-header">$24,813.53</h5>
723
- <span class="description-text">TOTAL PROFIT</span>
724
- </div>
725
- <!-- /.description-block -->
726
- </div>
727
- <!-- /.col -->
728
- <div class="col-sm-3 col-6">
729
- <div class="description-block">
730
- <span class="description-percentage text-danger">
731
- <i class="fa-solid fa-caret-down"></i> 18%
732
- </span>
733
- <h5 class="description-header">1200</h5>
734
- <span class="description-text">GOAL COMPLETIONS</span>
735
- </div>
736
- <!-- /.description-block -->
737
- </div>
738
- </div>
739
- <!-- /.row -->
740
- </div>
741
- <!-- /.card-footer -->
742
- </div>
743
- <!-- /.card -->
744
- </div>
745
- <!-- /.col -->
746
- </div>
747
- <!-- /.row -->
748
-
749
- <!-- Main row -->
750
- <div class="row">
751
- <!-- Start col -->
752
- <div class="col-md-8">
753
- <div class="row">
754
- <div class="col-md-6">
755
- <!-- DIRECT CHAT -->
756
- <div class="card direct-chat direct-chat-warning">
757
- <div class="card-header">
758
- <h3 class="card-title">Direct Chat</h3>
759
-
760
- <div class="card-tools">
761
- <span title="3 New Messages" class="badge text-bg-warning">3</span>
762
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
763
- <i class="fa-solid fa-minus"></i>
764
- </button>
765
- <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
766
- <i class="fa-solid fa-comments"></i>
767
- </button>
768
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
769
- <i class="fa-solid fa-times"></i>
770
- </button>
771
- </div>
772
- </div>
773
- <!-- /.card-header -->
774
- <div class="card-body">
775
- <!-- Conversations are loaded here -->
776
- <div class="direct-chat-messages">
777
- <!-- Message. Default to the start -->
778
- <div class="direct-chat-msg">
779
- <div class="direct-chat-infos clearfix">
780
- <span class="direct-chat-name float-start">Alexander Pierce</span>
781
- <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
782
- </div>
783
- <!-- /.direct-chat-infos -->
784
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
785
- <!-- /.direct-chat-img -->
786
- <div class="direct-chat-text">
787
- Is this template really for free? That's unbelievable!
788
- </div>
789
- <!-- /.direct-chat-text -->
790
- </div>
791
- <!-- /.direct-chat-msg -->
792
-
793
- <!-- Message to the end -->
794
- <div class="direct-chat-msg end">
795
- <div class="direct-chat-infos clearfix">
796
- <span class="direct-chat-name float-end">Sarah Bullock</span>
797
- <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
798
- </div>
799
- <!-- /.direct-chat-infos -->
800
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
801
- <!-- /.direct-chat-img -->
802
- <div class="direct-chat-text">
803
- You better believe it!
804
- </div>
805
- <!-- /.direct-chat-text -->
806
- </div>
807
- <!-- /.direct-chat-msg -->
808
-
809
- <!-- Message. Default to the start -->
810
- <div class="direct-chat-msg">
811
- <div class="direct-chat-infos clearfix">
812
- <span class="direct-chat-name float-start">Alexander Pierce</span>
813
- <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
814
- </div>
815
- <!-- /.direct-chat-infos -->
816
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
817
- <!-- /.direct-chat-img -->
818
- <div class="direct-chat-text">
819
- Working with AdminLTE on a great new app! Wanna join?
820
- </div>
821
- <!-- /.direct-chat-text -->
822
- </div>
823
- <!-- /.direct-chat-msg -->
824
-
825
- <!-- Message to the end -->
826
- <div class="direct-chat-msg end">
827
- <div class="direct-chat-infos clearfix">
828
- <span class="direct-chat-name float-end">Sarah Bullock</span>
829
- <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
830
- </div>
831
- <!-- /.direct-chat-infos -->
832
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
833
- <!-- /.direct-chat-img -->
834
- <div class="direct-chat-text">
835
- I would love to.
836
- </div>
837
- <!-- /.direct-chat-text -->
838
- </div>
839
- <!-- /.direct-chat-msg -->
840
-
841
- </div>
842
- <!--/.direct-chat-messages-->
843
-
844
- <!-- Contacts are loaded here -->
845
- <div class="direct-chat-contacts">
846
- <ul class="contacts-list">
847
- <li>
848
- <a href="#">
849
- <img class="contacts-list-img" src="./assets/img/user1-128x128.jpg" alt="User Avatar">
850
-
851
- <div class="contacts-list-info">
852
- <span class="contacts-list-name">
853
- Count Dracula
854
- <small class="contacts-list-date float-end">2/28/2015</small>
855
- </span>
856
- <span class="contacts-list-msg">How have you been? I was...</span>
857
- </div>
858
- <!-- /.contacts-list-info -->
859
- </a>
860
- </li>
861
- <!-- End Contact Item -->
862
- <li>
863
- <a href="#">
864
- <img class="contacts-list-img" src="./assets/img/user7-128x128.jpg" alt="User Avatar">
865
-
866
- <div class="contacts-list-info">
867
- <span class="contacts-list-name">
868
- Sarah Doe
869
- <small class="contacts-list-date float-end">2/23/2015</small>
870
- </span>
871
- <span class="contacts-list-msg">I will be waiting for...</span>
872
- </div>
873
- <!-- /.contacts-list-info -->
874
- </a>
875
- </li>
876
- <!-- End Contact Item -->
877
- <li>
878
- <a href="#">
879
- <img class="contacts-list-img" src="./assets/img/user3-128x128.jpg" alt="User Avatar">
880
-
881
- <div class="contacts-list-info">
882
- <span class="contacts-list-name">
883
- Nadia Jolie
884
- <small class="contacts-list-date float-end">2/20/2015</small>
885
- </span>
886
- <span class="contacts-list-msg">I'll call you back at...</span>
887
- </div>
888
- <!-- /.contacts-list-info -->
889
- </a>
890
- </li>
891
- <!-- End Contact Item -->
892
- <li>
893
- <a href="#">
894
- <img class="contacts-list-img" src="./assets/img/user5-128x128.jpg" alt="User Avatar">
895
-
896
- <div class="contacts-list-info">
897
- <span class="contacts-list-name">
898
- Nora S. Vans
899
- <small class="contacts-list-date float-end">2/10/2015</small>
900
- </span>
901
- <span class="contacts-list-msg">Where is your new...</span>
902
- </div>
903
- <!-- /.contacts-list-info -->
904
- </a>
905
- </li>
906
- <!-- End Contact Item -->
907
- <li>
908
- <a href="#">
909
- <img class="contacts-list-img" src="./assets/img/user6-128x128.jpg" alt="User Avatar">
910
-
911
- <div class="contacts-list-info">
912
- <span class="contacts-list-name">
913
- John K.
914
- <small class="contacts-list-date float-end">1/27/2015</small>
915
- </span>
916
- <span class="contacts-list-msg">Can I take a look at...</span>
917
- </div>
918
- <!-- /.contacts-list-info -->
919
- </a>
920
- </li>
921
- <!-- End Contact Item -->
922
- <li>
923
- <a href="#">
924
- <img class="contacts-list-img" src="./assets/img/user8-128x128.jpg" alt="User Avatar">
925
-
926
- <div class="contacts-list-info">
927
- <span class="contacts-list-name">
928
- Kenneth M.
929
- <small class="contacts-list-date float-end">1/4/2015</small>
930
- </span>
931
- <span class="contacts-list-msg">Never mind I found...</span>
932
- </div>
933
- <!-- /.contacts-list-info -->
934
- </a>
935
- </li>
936
- <!-- End Contact Item -->
937
- </ul>
938
- <!-- /.contacts-list -->
939
- </div>
940
- <!-- /.direct-chat-pane -->
941
- </div>
942
- <!-- /.card-body -->
943
- <div class="card-footer">
944
- <form action="#" method="post">
945
- <div class="input-group">
946
- <input type="text" name="message" placeholder="Type Message ..." class="form-control">
947
- <span class="input-group-append">
948
- <button type="button" class="btn btn-warning">Send</button>
949
- </span>
950
- </div>
951
- </form>
952
- </div>
953
- <!-- /.card-footer-->
954
- </div>
955
- <!--/.direct-chat -->
956
- </div>
957
- <!-- /.col -->
958
-
959
- <div class="col-md-6">
960
- <!-- USERS LIST -->
961
- <div class="card">
962
- <div class="card-header">
963
- <h3 class="card-title">Latest Members</h3>
964
-
965
- <div class="card-tools">
966
- <span class="badge text-bg-danger">8 New Members</span>
967
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
968
- <i class="fa-solid fa-minus"></i>
969
- </button>
970
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
971
- <i class="fa-solid fa-times"></i>
972
- </button>
973
- </div>
974
- </div>
975
- <!-- /.card-header -->
976
- <div class="card-body p-0">
977
- <ul class="users-list clearfix">
978
- <li>
979
- <img src="./assets/img/user1-128x128.jpg" alt="User Image">
980
- <a class="users-list-name" href="#">Alexander Pierce</a>
981
- <span class="users-list-date">Today</span>
982
- </li>
983
- <li>
984
- <img src="./assets/img/user8-128x128.jpg" alt="User Image">
985
- <a class="users-list-name" href="#">Norman</a>
986
- <span class="users-list-date">Yesterday</span>
987
- </li>
988
- <li>
989
- <img src="./assets/img/user7-128x128.jpg" alt="User Image">
990
- <a class="users-list-name" href="#">Jane</a>
991
- <span class="users-list-date">12 Jan</span>
992
- </li>
993
- <li>
994
- <img src="./assets/img/user6-128x128.jpg" alt="User Image">
995
- <a class="users-list-name" href="#">John</a>
996
- <span class="users-list-date">12 Jan</span>
997
- </li>
998
- <li>
999
- <img src="./assets/img/user2-160x160.jpg" alt="User Image">
1000
- <a class="users-list-name" href="#">Alexander</a>
1001
- <span class="users-list-date">13 Jan</span>
1002
- </li>
1003
- <li>
1004
- <img src="./assets/img/user5-128x128.jpg" alt="User Image">
1005
- <a class="users-list-name" href="#">Sarah</a>
1006
- <span class="users-list-date">14 Jan</span>
1007
- </li>
1008
- <li>
1009
- <img src="./assets/img/user4-128x128.jpg" alt="User Image">
1010
- <a class="users-list-name" href="#">Nora</a>
1011
- <span class="users-list-date">15 Jan</span>
1012
- </li>
1013
- <li>
1014
- <img src="./assets/img/user3-128x128.jpg" alt="User Image">
1015
- <a class="users-list-name" href="#">Nadia</a>
1016
- <span class="users-list-date">15 Jan</span>
1017
- </li>
1018
- </ul>
1019
- <!-- /.users-list -->
1020
- </div>
1021
- <!-- /.card-body -->
1022
- <div class="card-footer text-center">
1023
- <a href="javascript:">View All Users</a>
1024
- </div>
1025
- <!-- /.card-footer -->
1026
- </div>
1027
- <!--/.card -->
1028
- </div>
1029
- <!-- /.col -->
1030
- </div>
1031
- <!-- /.row -->
1032
-
1033
- <!-- TABLE: LATEST ORDERS -->
1034
- <div class="card">
1035
- <div class="card-header border-transparent">
1036
- <h3 class="card-title">Latest Orders</h3>
1037
-
1038
- <div class="card-tools">
1039
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1040
- <i class="fa-solid fa-minus"></i>
1041
- </button>
1042
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1043
- <i class="fa-solid fa-times"></i>
1044
- </button>
1045
- </div>
1046
- </div>
1047
- <!-- /.card-header -->
1048
- <div class="card-body p-0">
1049
- <div class="table-responsive">
1050
- <table class="table m-0">
1051
- <thead>
1052
- <tr>
1053
- <th>Order ID</th>
1054
- <th>Item</th>
1055
- <th>Status</th>
1056
- <th>Popularity</th>
1057
- </tr>
1058
- </thead>
1059
- <tbody>
1060
- <tr>
1061
- <td>
1062
- <a href="pages/examples/invoice.html">OR9842</a>
1063
- </td>
1064
- <td>Call of Duty IV</td>
1065
- <td>
1066
- <span class="badge text-bg-success">Shipped</span>
1067
- </td>
1068
- <td>
1069
- <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
1070
- </td>
1071
- </tr>
1072
- <tr>
1073
- <td>
1074
- <a href="pages/examples/invoice.html">OR1848</a>
1075
- </td>
1076
- <td>Samsung Smart TV</td>
1077
- <td>
1078
- <span class="badge text-bg-warning">Pending</span>
1079
- </td>
1080
- <td>
1081
- <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
1082
- </td>
1083
- </tr>
1084
- <tr>
1085
- <td>
1086
- <a href="pages/examples/invoice.html">OR7429</a>
1087
- </td>
1088
- <td>iPhone 6 Plus</td>
1089
- <td>
1090
- <span class="badge text-bg-danger">Delivered</span>
1091
- </td>
1092
- <td>
1093
- <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
1094
- </td>
1095
- </tr>
1096
- <tr>
1097
- <td>
1098
- <a href="pages/examples/invoice.html">OR7429</a>
1099
- </td>
1100
- <td>Samsung Smart TV</td>
1101
- <td>
1102
- <span class="badge text-bg-info">Processing</span>
1103
- </td>
1104
- <td>
1105
- <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
1106
- </td>
1107
- </tr>
1108
- <tr>
1109
- <td>
1110
- <a href="pages/examples/invoice.html">OR1848</a>
1111
- </td>
1112
- <td>Samsung Smart TV</td>
1113
- <td>
1114
- <span class="badge text-bg-warning">Pending</span>
1115
- </td>
1116
- <td>
1117
- <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
1118
- </td>
1119
- </tr>
1120
- <tr>
1121
- <td>
1122
- <a href="pages/examples/invoice.html">OR7429</a>
1123
- </td>
1124
- <td>iPhone 6 Plus</td>
1125
- <td>
1126
- <span class="badge text-bg-danger">Delivered</span>
1127
- </td>
1128
- <td>
1129
- <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
1130
- </td>
1131
- </tr>
1132
- <tr>
1133
- <td>
1134
- <a href="pages/examples/invoice.html">OR9842</a>
1135
- </td>
1136
- <td>Call of Duty IV</td>
1137
- <td>
1138
- <span class="badge text-bg-success">Shipped</span>
1139
- </td>
1140
- <td>
1141
- <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
1142
- </td>
1143
- </tr>
1144
- </tbody>
1145
- </table>
1146
- </div>
1147
- <!-- /.table-responsive -->
1148
- </div>
1149
- <!-- /.card-body -->
1150
- <div class="card-footer clearfix">
1151
- <a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">Place New Order</a>
1152
- <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">View All Orders</a>
1153
- </div>
1154
- <!-- /.card-footer -->
1155
- </div>
1156
- <!-- /.card -->
1157
- </div>
1158
- <!-- /.col -->
1159
-
1160
- <div class="col-md-4">
1161
- <!-- Info Boxes Style 2 -->
1162
- <div class="info-box mb-3 text-bg-warning">
1163
- <span class="info-box-icon">
1164
- <i class="fa-solid fa-tag"></i>
1165
- </span>
1166
-
1167
- <div class="info-box-content">
1168
- <span class="info-box-text">Inventory</span>
1169
- <span class="info-box-number">5,200</span>
1170
- </div>
1171
- <!-- /.info-box-content -->
1172
- </div>
1173
- <!-- /.info-box -->
1174
- <div class="info-box mb-3 text-bg-success">
1175
- <span class="info-box-icon">
1176
- <i class="fa-regular fa-heart"></i>
1177
- </span>
1178
-
1179
- <div class="info-box-content">
1180
- <span class="info-box-text">Mentions</span>
1181
- <span class="info-box-number">92,050</span>
1182
- </div>
1183
- <!-- /.info-box-content -->
1184
- </div>
1185
- <!-- /.info-box -->
1186
- <div class="info-box mb-3 text-bg-danger">
1187
- <span class="info-box-icon">
1188
- <i class="fa-solid fa-cloud-download-alt"></i>
1189
- </span>
1190
-
1191
- <div class="info-box-content">
1192
- <span class="info-box-text">Downloads</span>
1193
- <span class="info-box-number">114,381</span>
1194
- </div>
1195
- <!-- /.info-box-content -->
1196
- </div>
1197
- <!-- /.info-box -->
1198
- <div class="info-box mb-3 text-bg-info">
1199
- <span class="info-box-icon">
1200
- <i class="fa-regular fa-comment"></i>
1201
- </span>
1202
-
1203
- <div class="info-box-content">
1204
- <span class="info-box-text">Direct Messages</span>
1205
- <span class="info-box-number">163,921</span>
1206
- </div>
1207
- <!-- /.info-box-content -->
1208
- </div>
1209
- <!-- /.info-box -->
1210
-
1211
- <div class="card">
1212
- <div class="card-header">
1213
- <h3 class="card-title">Browser Usage</h3>
1214
-
1215
- <div class="card-tools">
1216
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1217
- <i class="fa-solid fa-minus"></i>
1218
- </button>
1219
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1220
- <i class="fa-solid fa-times"></i>
1221
- </button>
1222
- </div>
1223
- </div>
1224
- <!-- /.card-header -->
1225
- <div class="card-body">
1226
- <div class="row">
1227
- <div class="col-md-8">
1228
- <div class="chart-responsive">
1229
- <canvas id="pieChart" height="150"></canvas>
1230
- </div>
1231
- <!-- ./chart-responsive -->
1232
- </div>
1233
- <!-- /.col -->
1234
- <div class="col-md-4">
1235
- <ul class="chart-legend clearfix">
1236
- <li>
1237
- <i class="fa-regular fa-circle text-danger"></i> Chrome
1238
- </li>
1239
- <li>
1240
- <i class="fa-regular fa-circle text-success"></i> IE
1241
- </li>
1242
- <li>
1243
- <i class="fa-regular fa-circle text-warning"></i> FireFox
1244
- </li>
1245
- <li>
1246
- <i class="fa-regular fa-circle text-info"></i> Safari
1247
- </li>
1248
- <li>
1249
- <i class="fa-regular fa-circle text-primary"></i> Opera
1250
- </li>
1251
- <li>
1252
- <i class="fa-regular fa-circle text-secondary"></i> Navigator
1253
- </li>
1254
- </ul>
1255
- </div>
1256
- <!-- /.col -->
1257
- </div>
1258
- <!-- /.row -->
1259
- </div>
1260
- <!-- /.card-body -->
1261
- <div class="card-footer p-0">
1262
- <ul class="nav nav-pills flex-column">
1263
- <li class="nav-item">
1264
- <a href="#" class="nav-link">
1265
- United States of America
1266
- <span class="float-end text-danger">
1267
- <i class="fa-solid fa-arrow-down fs-7"></i>
1268
- 12%
1269
- </span>
1270
- </a>
1271
- </li>
1272
- <li class="nav-item">
1273
- <a href="#" class="nav-link">
1274
- India
1275
- <span class="float-end text-success">
1276
- <i class="fa-solid fa-arrow-up fs-7"></i> 4%
1277
- </span>
1278
- </a>
1279
- </li>
1280
- <li class="nav-item">
1281
- <a href="#" class="nav-link">
1282
- China
1283
- <span class="float-end text-info">
1284
- <i class="fa-solid fa-arrow-left fs-7"></i> 0%
1285
- </span>
1286
- </a>
1287
- </li>
1288
- </ul>
1289
- </div>
1290
- <!-- /.footer -->
1291
- </div>
1292
- <!-- /.card -->
1293
-
1294
- <!-- PRODUCT LIST -->
1295
- <div class="card">
1296
- <div class="card-header">
1297
- <h3 class="card-title">Recently Added Products</h3>
1298
-
1299
- <div class="card-tools">
1300
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1301
- <i class="fa-solid fa-minus"></i>
1302
- </button>
1303
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1304
- <i class="fa-solid fa-times"></i>
1305
- </button>
1306
- </div>
1307
- </div>
1308
- <!-- /.card-header -->
1309
- <div class="card-body p-0">
1310
- <ul class="products-list product-list-in-card ps-2 pe-2">
1311
- <li class="item">
1312
- <div class="product-img">
1313
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1314
- </div>
1315
- <div class="product-info">
1316
- <a href="javascript:void(0)" class="product-title">Samsung TV
1317
- <span class="badge text-bg-warning float-end">$1800</span>
1318
- </a>
1319
- <span class="product-description">
1320
- Samsung 32" 1080p 60Hz LED Smart HDTV.
1321
- </span>
1322
- </div>
1323
- </li>
1324
- <!-- /.item -->
1325
- <li class="item">
1326
- <div class="product-img">
1327
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1328
- </div>
1329
- <div class="product-info">
1330
- <a href="javascript:void(0)" class="product-title">Bicycle
1331
- <span class="badge text-bg-info float-end">$700</span>
1332
- </a>
1333
- <span class="product-description">
1334
- 26" Mongoose Dolomite Men's 7-speed, Navy Blue.
1335
- </span>
1336
- </div>
1337
- </li>
1338
- <!-- /.item -->
1339
- <li class="item">
1340
- <div class="product-img">
1341
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1342
- </div>
1343
- <div class="product-info">
1344
- <a href="javascript:void(0)" class="product-title">
1345
- Xbox One <span class="badge text-bg-danger float-end">
1346
- $350
1347
- </span>
1348
- </a>
1349
- <span class="product-description">
1350
- Xbox One Console Bundle with Halo Master Chief Collection.
1351
- </span>
1352
- </div>
1353
- </li>
1354
- <!-- /.item -->
1355
- <li class="item">
1356
- <div class="product-img">
1357
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1358
- </div>
1359
- <div class="product-info">
1360
- <a href="javascript:void(0)" class="product-title">PlayStation 4
1361
- <span class="badge text-bg-success float-end">$399</span>
1362
- </a>
1363
- <span class="product-description">
1364
- PlayStation 4 500GB Console (PS4)
1365
- </span>
1366
- </div>
1367
- </li>
1368
- <!-- /.item -->
1369
- </ul>
1370
- </div>
1371
- <!-- /.card-body -->
1372
- <div class="card-footer text-center">
1373
- <a href="javascript:void(0)" class="uppercase">View All Products</a>
1374
- </div>
1375
- <!-- /.card-footer -->
1376
- </div>
1377
- <!-- /.card -->
1378
- </div>
1379
- <!-- /.col -->
1380
- </div>
1381
- <!-- /.row -->
1382
- </div><!-- /.container-fluid -->
1383
- </div>
1384
- </main>
1385
- <!-- /.content-wrapper -->
1386
-
1387
- <!-- Main Footer -->
1388
- <footer class="main-footer">
1389
- <!-- To the end -->
1390
- <div class="float-end d-none d-sm-inline">
1391
- Anything you want
1392
- </div>
1393
- <!-- Default to the start -->
1394
- <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
1395
- </footer>
1396
-
1397
- </div>
1398
- <!-- ./wrapper -->
1399
-
1400
- <!-- OPTIONAL SCRIPTS -->
1401
- <!-- overlayScrollbars -->
1402
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
1403
-
1404
- <!-- OPTIONAL SCRIPT For Bootstrap 5 -->
1405
- <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>
1406
-
1407
- <!-- Bootstrap 5 -->
1408
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
1409
-
1410
- <!-- REQUIRED SCRIPTS -->
1411
- <!-- AdminLTE App -->
1412
- <script src="./js/adminlte.js"></script>
1413
-
1414
- <!-- OPTIONAL SCRIPTS -->
1415
- <script>
1416
- const SELECTOR_SIDEBAR = '.sidebar'
1417
- const Default = {
1418
- scrollbarTheme: 'os-theme-light',
1419
- scrollbarAutoHide: 'leave'
1420
- }
1421
-
1422
- document.addEventListener("DOMContentLoaded", function() {
1423
- if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1424
- OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
1425
- scrollbars: {
1426
- theme: Default.scrollbarTheme,
1427
- autoHide: Default.scrollbarAutoHide,
1428
- clickScroll: true
1429
- }
1430
- })
1431
- }
1432
- })
1433
- </script>
1434
-
1435
- <!-- DON'T USE THIS IN PRODUCTION -->
1436
- <script>
1437
- // Color Mode Toggler
1438
- (() => {
1439
- 'use strict'
1440
-
1441
- const storedTheme = localStorage.getItem('theme')
1442
-
1443
- const getPreferredTheme = () => {
1444
- if (storedTheme) {
1445
- return storedTheme
1446
- }
1447
-
1448
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
1449
- }
1450
-
1451
- const setTheme = function (theme) {
1452
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
1453
- document.documentElement.setAttribute('data-bs-theme', 'dark')
1454
- } else {
1455
- document.documentElement.setAttribute('data-bs-theme', theme)
1456
- }
1457
- }
1458
-
1459
- setTheme(getPreferredTheme())
1460
-
1461
- const showActiveTheme = theme => {
1462
- const activeThemeIcon = document.querySelector('.theme-icon-active i')
1463
- const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
1464
- const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
1465
-
1466
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
1467
- element.classList.remove('active')
1468
- })
1469
-
1470
- btnToActive.classList.add('active')
1471
- activeThemeIcon.setAttribute('class', svgOfActiveBtn)
1472
- }
1473
-
1474
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1475
- if (storedTheme !== 'light' || storedTheme !== 'dark') {
1476
- setTheme(getPreferredTheme())
1477
- }
1478
- })
1479
-
1480
- window.addEventListener('DOMContentLoaded', () => {
1481
- showActiveTheme(getPreferredTheme())
1482
-
1483
- document.querySelectorAll('[data-bs-theme-value]')
1484
- .forEach(toggle => {
1485
- toggle.addEventListener('click', () => {
1486
- const theme = toggle.getAttribute('data-bs-theme-value')
1487
- localStorage.setItem('theme', theme)
1488
- setTheme(theme)
1489
- showActiveTheme(theme)
1490
- })
1491
- })
1492
- })
1493
- })()
1494
- </script>
1495
-
1496
-
1497
- <!-- OPTIONAL SCRIPTS -->
1498
-
1499
- <!-- ChartJS -->
1500
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
1501
-
1502
- <script>
1503
- // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
1504
- // IT'S ALL JUST JUNK FOR DEMO
1505
- // ++++++++++++++++++++++++++++++++++++++++++
1506
-
1507
- /* ChartJS
1508
- * -------
1509
- * Here we will create a few charts using ChartJS
1510
- */
1511
-
1512
- //-----------------------
1513
- // - MONTHLY SALES CHART -
1514
- //-----------------------
1515
- (function () {
1516
- 'use strict'
1517
- // Get context with querySelector - using Chart.js .getContext('2d') method.
1518
- var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
1519
-
1520
- var salesChartData = {
1521
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
1522
- datasets: [
1523
- {
1524
- label: 'Digital Goods',
1525
- backgroundColor: 'rgba(60,141,188,0.9)',
1526
- borderColor: 'rgba(60,141,188,0.8)',
1527
- fill: true,
1528
- pointRadius: 0,
1529
- pointColor: '#3b8bba',
1530
- pointStrokeColor: 'rgba(60,141,188,1)',
1531
- pointHighlightFill: '#fff',
1532
- pointHighlightStroke: 'rgba(60,141,188,1)',
1533
- data: [28, 48, 40, 19, 86, 27, 90]
1534
- },
1535
- {
1536
- label: 'Electronics',
1537
- backgroundColor: 'rgba(210, 214, 222, 1)',
1538
- borderColor: 'rgba(210, 214, 222, 1)',
1539
- fill: true,
1540
- pointRadius: 0,
1541
- pointColor: 'rgba(210, 214, 222, 1)',
1542
- pointStrokeColor: '#c1c7d1',
1543
- pointHighlightFill: '#fff',
1544
- pointHighlightStroke: 'rgba(220,220,220,1)',
1545
- data: [65, 59, 80, 81, 56, 55, 40]
1546
- }
1547
- ]
1548
- }
1549
-
1550
- var salesChartOptions = {
1551
- maintainAspectRatio: false,
1552
- responsive: true,
1553
- tension: 0.4,
1554
- plugins: {
1555
- legend: {
1556
- display: false
1557
- }
1558
- },
1559
- scales: {
1560
- xAxes: {
1561
- gridLines: {
1562
- display: false
1563
- }
1564
- },
1565
- yAxes: {
1566
- gridLines: {
1567
- display: false
1568
- }
1569
- }
1570
- }
1571
- }
1572
-
1573
- // This will get the first returned node in the js collection.
1574
- var salesChart = new Chart(salesChartCanvas, {
1575
- type: 'line',
1576
- data: salesChartData,
1577
- options: salesChartOptions
1578
- })
1579
-
1580
- //---------------------------
1581
- // - END MONTHLY SALES CHART -
1582
- //---------------------------
1583
-
1584
- //-------------
1585
- // - PIE CHART -
1586
- //-------------
1587
-
1588
- // Get context with querySelector - using Chart.js .getContext('2d') method.
1589
- var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
1590
-
1591
- var pieData = {
1592
- labels: [
1593
- 'Chrome',
1594
- 'IE',
1595
- 'FireFox',
1596
- 'Safari',
1597
- 'Opera',
1598
- 'Navigator'
1599
- ],
1600
- datasets: [
1601
- {
1602
- data: [700, 500, 400, 600, 300, 100],
1603
- backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
1604
- }
1605
- ]
1606
- }
1607
- var pieOptions = {
1608
- plugins: {
1609
- legend: {
1610
- display: false
1611
- }
1612
- }
1613
- }
1614
- // Create pie or douhnut chart
1615
- // You can switch between pie and douhnut using the method below.
1616
- // eslint-disable-next-line no-unused-vars
1617
- var pieChart = new Chart(pieChartCanvas, {
1618
- type: 'doughnut',
1619
- data: pieData,
1620
- options: pieOptions
1621
- })
1622
- })()
1623
- //-----------------
1624
- // - END PIE CHART -
1625
- //-----------------
1626
- </script>
1627
- </body>
1628
-
1629
- </html>