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/pages/index.html ADDED
@@ -0,0 +1,1091 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <!-- Primary Meta Tags -->
7
+ <title>AdminLTE v4 | Dashboard</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <meta name="title" content="AdminLTE v4 | Dashboard">
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">
13
+
14
+ <!-- OPTIONAL LINKS -->
15
+
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">
20
+
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">
23
+
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">
26
+
27
+ <!-- REQUIRED LINKS -->
28
+
29
+ <!-- Theme style -->
30
+ <link rel="stylesheet" href="../../dist/css/adminlte.css">
31
+
32
+ <!-- apexcharts -->
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
34
+
35
+ <!-- jsvectormap -->
36
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css" integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4=" crossorigin="anonymous">
37
+ </head>
38
+
39
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
40
+ <div class="app-wrapper">
41
+ <!-- Navbar -->
42
+ <nav class="app-header navbar navbar-expand bg-body">
43
+ <div class="container-fluid">
44
+ <!-- Start navbar links -->
45
+ <ul class="navbar-nav">
46
+ <li class="nav-item">
47
+ <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
48
+ </li>
49
+ <li class="nav-item d-none d-md-block">
50
+ <a href="#" class="nav-link">Home</a>
51
+ </li>
52
+ <li class="nav-item d-none d-md-block">
53
+ <a href="#" class="nav-link">Contact</a>
54
+ </li>
55
+ </ul>
56
+ <!-- End navbar links -->
57
+
58
+ <ul class="navbar-nav ms-auto">
59
+ <!-- Navbar Search -->
60
+ <li class="nav-item">
61
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
62
+ <i class="fa-solid fa-search"></i>
63
+ </a>
64
+ </li>
65
+
66
+ <!-- Messages Dropdown Menu -->
67
+ <li class="nav-item dropdown">
68
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
69
+ <i class="fa-regular fa-comments"></i>
70
+ <span class="navbar-badge badge text-bg-danger">3</span>
71
+ </a>
72
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
73
+ <a href="#" class="dropdown-item">
74
+ <!-- Message Start -->
75
+ <div class="d-flex">
76
+ <div class="flex-shrink-0">
77
+ <img src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
78
+ </div>
79
+ <div class="flex-grow-1">
80
+ <h3 class="dropdown-item-title">
81
+ Brad Diesel
82
+ <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
83
+ </h3>
84
+ <p class="fs-7">Call me whenever you can...</p>
85
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
86
+ </div>
87
+ </div>
88
+ <!-- Message End -->
89
+ </a>
90
+ <div class="dropdown-divider"></div>
91
+ <a href="#" class="dropdown-item">
92
+ <!-- Message Start -->
93
+ <div class="d-flex">
94
+ <div class="flex-shrink-0">
95
+ <img src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
96
+ </div>
97
+ <div class="flex-grow-1">
98
+ <h3 class="dropdown-item-title">
99
+ John Pierce
100
+ <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
101
+ </h3>
102
+ <p class="fs-7">I got your message bro</p>
103
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
104
+ </div>
105
+ </div>
106
+ <!-- Message End -->
107
+ </a>
108
+ <div class="dropdown-divider"></div>
109
+ <a href="#" class="dropdown-item">
110
+ <!-- Message Start -->
111
+ <div class="d-flex">
112
+ <div class="flex-shrink-0">
113
+ <img src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
114
+ </div>
115
+ <div class="flex-grow-1">
116
+ <h3 class="dropdown-item-title">
117
+ Nora Silvester
118
+ <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
119
+ </h3>
120
+ <p class="fs-7">The subject goes here</p>
121
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
122
+ </div>
123
+ </div>
124
+ <!-- Message End -->
125
+ </a>
126
+ <div class="dropdown-divider"></div>
127
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
128
+ </div>
129
+ </li>
130
+ <!-- Notifications Dropdown Menu -->
131
+ <li class="nav-item dropdown">
132
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
133
+ <i class="fa-regular fa-bell"></i>
134
+ <span class="navbar-badge badge text-bg-warning">15</span>
135
+ </a>
136
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
137
+ <span class="dropdown-item dropdown-header">15 Notifications</span>
138
+ <div class="dropdown-divider"></div>
139
+ <a href="#" class="dropdown-item">
140
+ <i class="fa-solid fa-envelope me-2"></i> 4 new messages
141
+ <span class="float-end text-secondary fs-7">3 mins</span>
142
+ </a>
143
+ <div class="dropdown-divider"></div>
144
+ <a href="#" class="dropdown-item">
145
+ <i class="fa-solid fa-users me-2"></i> 8 friend requests
146
+ <span class="float-end text-secondary fs-7">12 hours</span>
147
+ </a>
148
+ <div class="dropdown-divider"></div>
149
+ <a href="#" class="dropdown-item">
150
+ <i class="fa-solid fa-file me-2"></i> 3 new reports
151
+ <span class="float-end text-secondary fs-7">2 days</span>
152
+ </a>
153
+ <div class="dropdown-divider"></div>
154
+ <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
155
+ </div>
156
+ </li>
157
+ <li class="nav-item dropdown user-menu">
158
+ <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
159
+ <img src="../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
160
+ <span class="d-none d-md-inline">Alexander Pierce</span>
161
+ </a>
162
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
163
+ <!-- User image -->
164
+ <li class="user-header text-bg-primary">
165
+ <img src="../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
166
+
167
+ <p>
168
+ Alexander Pierce - Web Developer
169
+ <small>Member since Nov. 2023</small>
170
+ </p>
171
+ </li>
172
+ <!-- Menu Body -->
173
+ <li class="user-body">
174
+ <div class="row">
175
+ <div class="col-4 text-center">
176
+ <a href="#">Followers</a>
177
+ </div>
178
+ <div class="col-4 text-center">
179
+ <a href="#">Sales</a>
180
+ </div>
181
+ <div class="col-4 text-center">
182
+ <a href="#">Friends</a>
183
+ </div>
184
+ </div>
185
+ <!-- /.row -->
186
+ </li>
187
+ <!-- Menu Footer-->
188
+ <li class="user-footer">
189
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
190
+ <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
191
+ </li>
192
+ </ul>
193
+ </li>
194
+ <!-- TODO tackel in v4.1 -->
195
+ <!-- <li class="nav-item">
196
+ <a class="nav-link" data-widget="fullscreen" href="#" role="button">
197
+ <i class="fa-solid fa-expand-arrows-alt"></i>
198
+ </a>
199
+ </li>
200
+ <li class="nav-item">
201
+ <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
202
+ <i class="fa-solid fa-th-large"></i>
203
+ </a>
204
+ </li> -->
205
+ </ul>
206
+ </div>
207
+ </nav>
208
+ <!-- /.navbar -->
209
+ <!-- Sidebar Container -->
210
+ <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
211
+ <div class="sidebar-brand">
212
+ <a href="../index.html" class="brand-link">
213
+ <img src="../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
214
+ <span class="brand-text fw-light">AdminLTE 4</span>
215
+ </a>
216
+ </div>
217
+ <!-- Sidebar -->
218
+ <div class="sidebar-wrapper">
219
+ <nav class="mt-2">
220
+ <!-- Sidebar Menu -->
221
+ <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
222
+ <li class="nav-item menu-open">
223
+ <a href="javascript:;" class="nav-link active">
224
+ <i class="nav-icon fa-solid fa-gauge-high"></i>
225
+ <p>
226
+ Dashboard
227
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
228
+ </p>
229
+ </a>
230
+ <ul class="nav nav-treeview">
231
+ <li class="nav-item">
232
+ <a href="../index.html" class="nav-link active">
233
+ <i class="nav-icon fa-regular fa-circle"></i>
234
+ <p>Dashboard v1</p>
235
+ </a>
236
+ </li>
237
+ <li class="nav-item">
238
+ <a href="../index2.html" class="nav-link">
239
+ <i class="nav-icon fa-regular fa-circle"></i>
240
+ <p>Dashboard v2</p>
241
+ </a>
242
+ </li>
243
+ <li class="nav-item">
244
+ <a href="../index3.html" class="nav-link">
245
+ <i class="nav-icon fa-regular fa-circle"></i>
246
+ <p>Dashboard v3</p>
247
+ </a>
248
+ </li>
249
+ </ul>
250
+ </li>
251
+ <li class="nav-item">
252
+ <a href="javascript:;" class="nav-link">
253
+ <i class="nav-icon fa-solid fa-box-open"></i>
254
+ <p>
255
+ Widgets
256
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
257
+ </p>
258
+ </a>
259
+ <ul class="nav nav-treeview">
260
+ <li class="nav-item">
261
+ <a href="../widgets/small-box.html" class="nav-link">
262
+ <i class="nav-icon fa-regular fa-circle"></i>
263
+ <p>Small Box</p>
264
+ </a>
265
+ </li>
266
+ <li class="nav-item">
267
+ <a href="../widgets/info-box.html" class="nav-link">
268
+ <i class="nav-icon fa-regular fa-circle"></i>
269
+ <p>info Box</p>
270
+ </a>
271
+ </li>
272
+ <li class="nav-item">
273
+ <a href="../widgets/cards.html" class="nav-link">
274
+ <i class="nav-icon fa-regular fa-circle"></i>
275
+ <p>Cards</p>
276
+ </a>
277
+ </li>
278
+ </ul>
279
+ </li>
280
+
281
+ <li class="nav-item">
282
+ <a href="javascript:;" class="nav-link">
283
+ <i class="nav-icon fa-solid fa-copy"></i>
284
+ <p>
285
+ Layout Options
286
+ <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
287
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
288
+ </p>
289
+ </a>
290
+ <ul class="nav nav-treeview">
291
+ <li class="nav-item">
292
+ <a href="../layout/unfixed-sidebar.html" class="nav-link">
293
+ <i class="nav-icon fa-regular fa-circle"></i>
294
+ <p>Unfixed Sidebar</p>
295
+ </a>
296
+ </li>
297
+ <li class="nav-item">
298
+ <a href="../layout/fixed-sidebar.html" class="nav-link">
299
+ <i class="nav-icon fa-regular fa-circle"></i>
300
+ <p>Fixed Sidebar</p>
301
+ </a>
302
+ </li>
303
+ <li class="nav-item">
304
+ <a href="../layout/sidebar-mini.html" class="nav-link">
305
+ <i class="nav-icon fa-regular fa-circle"></i>
306
+ <p>Sidebar Mini</p>
307
+ </a>
308
+ </li>
309
+ <li class="nav-item">
310
+ <a href="../layout/layout-rtl.html" class="nav-link">
311
+ <i class="nav-icon fa-regular fa-circle"></i>
312
+ <p>Layout RTL</p>
313
+ </a>
314
+ </li>
315
+ </ul>
316
+ </li>
317
+ <li class="nav-item">
318
+ <a href="javascript:;" class="nav-link">
319
+ <i class="nav-icon fa-solid fa-tree"></i>
320
+ <p>
321
+ UI Elements
322
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
323
+ </p>
324
+ </a>
325
+ <ul class="nav nav-treeview">
326
+ <li class="nav-item">
327
+ <a href="../UI/timeline.html" class="nav-link">
328
+ <i class="nav-icon fa-regular fa-circle"></i>
329
+ <p>Timeline</p>
330
+ </a>
331
+ </li>
332
+ </ul>
333
+ </li>
334
+ <li class="nav-item">
335
+ <a href="javascript:;" class="nav-link">
336
+ <i class="nav-icon fa-solid fa-pen-to-square"></i>
337
+ <p>
338
+ Forms
339
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
340
+ </p>
341
+ </a>
342
+ <ul class="nav nav-treeview">
343
+ <li class="nav-item">
344
+ <a href="../forms/general.html" class="nav-link">
345
+ <i class="nav-icon fa-regular fa-circle"></i>
346
+ <p>General Elements</p>
347
+ </a>
348
+ </li>
349
+ </ul>
350
+ </li>
351
+ <li class="nav-item">
352
+ <a href="javascript:;" class="nav-link">
353
+ <i class="nav-icon fa-solid fa-table"></i>
354
+ <p>
355
+ Tables
356
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
357
+ </p>
358
+ </a>
359
+ <ul class="nav nav-treeview">
360
+ <li class="nav-item">
361
+ <a href="../tables/simple.html" class="nav-link">
362
+ <i class="nav-icon fa-regular fa-circle"></i>
363
+ <p>Simple Tables</p>
364
+ </a>
365
+ </li>
366
+ </ul>
367
+ </li>
368
+
369
+ <li class="nav-header">EXAMPLES</li>
370
+ <li class="nav-item">
371
+ <a href="javascript:;" class="nav-link">
372
+ <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
373
+ <p>
374
+ Login & Register
375
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
376
+ </p>
377
+ </a>
378
+ <ul class="nav nav-treeview">
379
+ <li class="nav-item">
380
+ <a href="../examples/login.html" class="nav-link ">
381
+ <i class="nav-icon fa-regular fa-circle"></i>
382
+ <p>Login v1</p>
383
+ </a>
384
+ </li>
385
+ <li class="nav-item">
386
+ <a href="../examples/register.html" class="nav-link ">
387
+ <i class="nav-icon fa-regular fa-circle"></i>
388
+ <p>Register v1</p>
389
+ </a>
390
+ </li>
391
+ </ul>
392
+ </li>
393
+
394
+ <li class="nav-header">DOCUMENTATIONS</li>
395
+ <li class="nav-item">
396
+ <a href="../docs/index.html" class="nav-link">
397
+ <i class="nav-icon fa-solid fa-download"></i>
398
+ <p>Installation</p>
399
+ </a>
400
+ </li>
401
+ <li class="nav-item">
402
+ <a href="../docs/layout.html" class="nav-link">
403
+ <i class="nav-icon fa-solid fa-grip"></i>
404
+ <p>Layout</p>
405
+ </a>
406
+ </li>
407
+ <li class="nav-item">
408
+ <a href="../docs/color-mode.html" class="nav-link">
409
+ <i class="nav-icon fa-solid fa-star-half-stroke"></i>
410
+ <p>Color Mode</p>
411
+ </a>
412
+ </li>
413
+ <li class="nav-item">
414
+ <a href="javascript:;" class="nav-link">
415
+ <i class="nav-icon fa-solid fa-swatchbook"></i>
416
+ <p>
417
+ Components
418
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
419
+ </p>
420
+ </a>
421
+ <ul class="nav nav-treeview">
422
+ <li class="nav-item">
423
+ <a href="../docs/components/main-header.html" class="nav-link">
424
+ <i class="nav-icon fa-regular fa-circle"></i>
425
+ <p>Main Header</p>
426
+ </a>
427
+ </li>
428
+ </ul>
429
+ </li>
430
+ <li class="nav-item">
431
+ <a href="../docs/browser-support.html" class="nav-link">
432
+ <i class="nav-icon fa-solid fa-edge"></i>
433
+ <p>Browser Support</p>
434
+ </a>
435
+ </li>
436
+
437
+ <li class="nav-header">MULTI LEVEL EXAMPLE</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>Level 1</p>
442
+ </a>
443
+ </li>
444
+ <li class="nav-item">
445
+ <a href="javascript:;" class="nav-link">
446
+ <i class="nav-icon fa-solid fa-circle"></i>
447
+ <p>
448
+ Level 1
449
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
450
+ </p>
451
+ </a>
452
+ <ul class="nav nav-treeview">
453
+ <li class="nav-item">
454
+ <a href="javascript:;" class="nav-link">
455
+ <i class="nav-icon fa-regular fa-circle"></i>
456
+ <p>Level 2</p>
457
+ </a>
458
+ </li>
459
+ <li class="nav-item">
460
+ <a href="javascript:;" class="nav-link">
461
+ <i class="nav-icon fa-regular fa-circle"></i>
462
+ <p>
463
+ Level 2
464
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
465
+ </p>
466
+ </a>
467
+ <ul class="nav nav-treeview">
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
+ <li class="nav-item">
481
+ <a href="javascript:;" class="nav-link">
482
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
483
+ <p>Level 3</p>
484
+ </a>
485
+ </li>
486
+ </ul>
487
+ </li>
488
+ <li class="nav-item">
489
+ <a href="javascript:;" class="nav-link">
490
+ <i class="nav-icon fa-regular fa-circle"></i>
491
+ <p>Level 2</p>
492
+ </a>
493
+ </li>
494
+ </ul>
495
+ </li>
496
+ <li class="nav-item">
497
+ <a href="javascript:;" class="nav-link">
498
+ <i class="nav-icon fa-solid fa-circle"></i>
499
+ <p>Level 1</p>
500
+ </a>
501
+ </li>
502
+ <li class="nav-header">LABELS</li>
503
+ <li class="nav-item">
504
+ <a href="javascript:;" class="nav-link">
505
+ <i class="nav-icon fa-regular fa-circle text-danger"></i>
506
+ <p class="text">Important</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-warning"></i>
512
+ <p>Warning</p>
513
+ </a>
514
+ </li>
515
+ <li class="nav-item">
516
+ <a href="javascript:;" class="nav-link">
517
+ <i class="nav-icon fa-regular fa-circle text-info"></i>
518
+ <p>Informational</p>
519
+ </a>
520
+ </li>
521
+ </ul>
522
+ </nav>
523
+ </div>
524
+ <!-- /.sidebar -->
525
+ </aside>
526
+ <!-- Main content -->
527
+ <main class="app-main">
528
+ <div class="app-content-header">
529
+ <div class="container-fluid">
530
+ <div class="row">
531
+ <div class="col-sm-6">
532
+ <h3 class="mb-0">Dashboard</h3>
533
+ </div>
534
+ <div class="col-sm-6">
535
+ <ol class="breadcrumb float-sm-end">
536
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
537
+ <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
538
+ </ol>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="app-content">
544
+ <div class="container-fluid">
545
+ <!-- Small boxes (Stat box) -->
546
+ <div class="row">
547
+ <div class="col-lg-3 col-6">
548
+ <!-- small box -->
549
+ <div class="small-box text-bg-primary">
550
+ <div class="inner">
551
+ <h3>150</h3>
552
+
553
+ <p>New Orders</p>
554
+ </div>
555
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
556
+ <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
557
+ </svg>
558
+ <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
559
+ </div>
560
+ </div>
561
+ <!-- ./col -->
562
+ <div class="col-lg-3 col-6">
563
+ <!-- small box -->
564
+ <div class="small-box text-bg-success">
565
+ <div class="inner">
566
+ <h3>53<sup class="fs-5">%</sup></h3>
567
+
568
+ <p>Bounce Rate</p>
569
+ </div>
570
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
571
+ <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
572
+ </svg>
573
+ <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
574
+ </div>
575
+ </div>
576
+ <!-- ./col -->
577
+ <div class="col-lg-3 col-6">
578
+ <!-- small box -->
579
+ <div class="small-box text-bg-warning">
580
+ <div class="inner">
581
+ <h3>44</h3>
582
+
583
+ <p>User Registrations</p>
584
+ </div>
585
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
586
+ <path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
587
+ </svg>
588
+ <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
589
+ </div>
590
+ </div>
591
+ <!-- ./col -->
592
+ <div class="col-lg-3 col-6">
593
+ <!-- small box -->
594
+ <div class="small-box text-bg-danger">
595
+ <div class="inner">
596
+ <h3>65</h3>
597
+
598
+ <p>Unique Visitors</p>
599
+ </div>
600
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
601
+ <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
602
+ <path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
603
+ </svg>
604
+ <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
605
+ </div>
606
+ </div>
607
+ <!-- ./col -->
608
+ </div>
609
+ <!-- /.row -->
610
+ <!-- Main row -->
611
+ <div class="row">
612
+ <!-- Start col -->
613
+ <div class="col-lg-7 connectedSortable">
614
+ <div class="card">
615
+ <div class="card-header">
616
+ <h3 class="card-title">Sales Value</h3>
617
+ </div>
618
+
619
+ <div class="card-body">
620
+ <div id="revenue-chart"></div>
621
+ </div>
622
+ </div>
623
+ <!-- /.card -->
624
+
625
+ <!-- DIRECT CHAT -->
626
+ <div class="card direct-chat direct-chat-primary">
627
+ <div class="card-header">
628
+ <h3 class="card-title">Direct Chat</h3>
629
+
630
+ <div class="card-tools">
631
+ <span title="3 New Messages" class="badge text-bg-primary">3</span>
632
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
633
+ <i class="fa-solid fa-minus"></i>
634
+ </button>
635
+ <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
636
+ <i class="fa-solid fa-comments"></i>
637
+ </button>
638
+ <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
639
+ <i class="fa-solid fa-times"></i>
640
+ </button>
641
+ </div>
642
+ </div>
643
+ <!-- /.card-header -->
644
+ <div class="card-body">
645
+ <!-- Conversations are loaded here -->
646
+ <div class="direct-chat-messages">
647
+ <!-- Message. Default to the start -->
648
+ <div class="direct-chat-msg">
649
+ <div class="direct-chat-infos clearfix">
650
+ <span class="direct-chat-name float-start">Alexander Pierce</span>
651
+ <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
652
+ </div>
653
+ <!-- /.direct-chat-infos -->
654
+ <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image">
655
+ <!-- /.direct-chat-img -->
656
+ <div class="direct-chat-text">
657
+ Is this template really for free? That's unbelievable!
658
+ </div>
659
+ <!-- /.direct-chat-text -->
660
+ </div>
661
+ <!-- /.direct-chat-msg -->
662
+
663
+ <!-- Message to the end -->
664
+ <div class="direct-chat-msg end">
665
+ <div class="direct-chat-infos clearfix">
666
+ <span class="direct-chat-name float-end">Sarah Bullock</span>
667
+ <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
668
+ </div>
669
+ <!-- /.direct-chat-infos -->
670
+ <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image">
671
+ <!-- /.direct-chat-img -->
672
+ <div class="direct-chat-text">
673
+ You better believe it!
674
+ </div>
675
+ <!-- /.direct-chat-text -->
676
+ </div>
677
+ <!-- /.direct-chat-msg -->
678
+
679
+ <!-- Message. Default to the start -->
680
+ <div class="direct-chat-msg">
681
+ <div class="direct-chat-infos clearfix">
682
+ <span class="direct-chat-name float-start">Alexander Pierce</span>
683
+ <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
684
+ </div>
685
+ <!-- /.direct-chat-infos -->
686
+ <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image">
687
+ <!-- /.direct-chat-img -->
688
+ <div class="direct-chat-text">
689
+ Working with AdminLTE on a great new app! Wanna join?
690
+ </div>
691
+ <!-- /.direct-chat-text -->
692
+ </div>
693
+ <!-- /.direct-chat-msg -->
694
+
695
+ <!-- Message to the end -->
696
+ <div class="direct-chat-msg end">
697
+ <div class="direct-chat-infos clearfix">
698
+ <span class="direct-chat-name float-end">Sarah Bullock</span>
699
+ <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
700
+ </div>
701
+ <!-- /.direct-chat-infos -->
702
+ <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image">
703
+ <!-- /.direct-chat-img -->
704
+ <div class="direct-chat-text">
705
+ I would love to.
706
+ </div>
707
+ <!-- /.direct-chat-text -->
708
+ </div>
709
+ <!-- /.direct-chat-msg -->
710
+
711
+ </div>
712
+ <!-- /.direct-chat-messages-->
713
+
714
+ <!-- Contacts are loaded here -->
715
+ <div class="direct-chat-contacts">
716
+ <ul class="contacts-list">
717
+ <li>
718
+ <a href="#">
719
+ <img class="contacts-list-img" src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar">
720
+
721
+ <div class="contacts-list-info">
722
+ <span class="contacts-list-name">
723
+ Count Dracula
724
+ <small class="contacts-list-date float-end">2/28/2023</small>
725
+ </span>
726
+ <span class="contacts-list-msg">How have you been? I was...</span>
727
+ </div>
728
+ <!-- /.contacts-list-info -->
729
+ </a>
730
+ </li>
731
+ <!-- End Contact Item -->
732
+ <li>
733
+ <a href="#">
734
+ <img class="contacts-list-img" src="../../dist/assets/img/user7-128x128.jpg" alt="User Avatar">
735
+
736
+ <div class="contacts-list-info">
737
+ <span class="contacts-list-name">
738
+ Sarah Doe
739
+ <small class="contacts-list-date float-end">2/23/2023</small>
740
+ </span>
741
+ <span class="contacts-list-msg">I will be waiting for...</span>
742
+ </div>
743
+ <!-- /.contacts-list-info -->
744
+ </a>
745
+ </li>
746
+ <!-- End Contact Item -->
747
+ <li>
748
+ <a href="#">
749
+ <img class="contacts-list-img" src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar">
750
+
751
+ <div class="contacts-list-info">
752
+ <span class="contacts-list-name">
753
+ Nadia Jolie
754
+ <small class="contacts-list-date float-end">2/20/2023</small>
755
+ </span>
756
+ <span class="contacts-list-msg">I'll call you back at...</span>
757
+ </div>
758
+ <!-- /.contacts-list-info -->
759
+ </a>
760
+ </li>
761
+ <!-- End Contact Item -->
762
+ <li>
763
+ <a href="#">
764
+ <img class="contacts-list-img" src="../../dist/assets/img/user5-128x128.jpg" alt="User Avatar">
765
+
766
+ <div class="contacts-list-info">
767
+ <span class="contacts-list-name">
768
+ Nora S. Vans
769
+ <small class="contacts-list-date float-end">2/10/2023</small>
770
+ </span>
771
+ <span class="contacts-list-msg">Where is your new...</span>
772
+ </div>
773
+ <!-- /.contacts-list-info -->
774
+ </a>
775
+ </li>
776
+ <!-- End Contact Item -->
777
+ <li>
778
+ <a href="#">
779
+ <img class="contacts-list-img" src="../../dist/assets/img/user6-128x128.jpg" alt="User Avatar">
780
+
781
+ <div class="contacts-list-info">
782
+ <span class="contacts-list-name">
783
+ John K.
784
+ <small class="contacts-list-date float-end">1/27/2023</small>
785
+ </span>
786
+ <span class="contacts-list-msg">Can I take a look at...</span>
787
+ </div>
788
+ <!-- /.contacts-list-info -->
789
+ </a>
790
+ </li>
791
+ <!-- End Contact Item -->
792
+ <li>
793
+ <a href="#">
794
+ <img class="contacts-list-img" src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar">
795
+
796
+ <div class="contacts-list-info">
797
+ <span class="contacts-list-name">
798
+ Kenneth M.
799
+ <small class="contacts-list-date float-end">1/4/2023</small>
800
+ </span>
801
+ <span class="contacts-list-msg">Never mind I found...</span>
802
+ </div>
803
+ <!-- /.contacts-list-info -->
804
+ </a>
805
+ </li>
806
+ <!-- End Contact Item -->
807
+ </ul>
808
+ <!-- /.contacts-list -->
809
+ </div>
810
+ <!-- /.direct-chat-pane -->
811
+ </div>
812
+ <!-- /.card-body -->
813
+ <div class="card-footer">
814
+ <form action="#" method="post">
815
+ <div class="input-group">
816
+ <input type="text" name="message" placeholder="Type Message ..." class="form-control">
817
+ <span class="input-group-append">
818
+ <button type="button" class="btn btn-primary">Send</button>
819
+ </span>
820
+ </div>
821
+ </form>
822
+ </div>
823
+ <!-- /.card-footer-->
824
+ </div>
825
+ <!-- /.direct-chat -->
826
+ </div>
827
+ <!-- /.Start col -->
828
+
829
+ <!-- Start col -->
830
+ <div class="col-lg-5 connectedSortable">
831
+ <div class="card text-white bg-primary bg-gradient border-primary">
832
+ <div class="card-header border-0">
833
+ <h3 class="card-title">Sales Value</h3>
834
+ <div class="card-tools">
835
+ <button type="button" class="btn btn-primary btn-sm " data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
836
+ </button>
837
+ </div>
838
+ </div>
839
+ <div class="card-body">
840
+ <div id="world-map" style="height: 220px"></div>
841
+ </div>
842
+ <div class="card-footer border-0">
843
+ <div class="row">
844
+ <div class="col-4 text-center">
845
+ <div id="sparkline-1"></div>
846
+ <div class="text-white">Visitors</div>
847
+ </div>
848
+ <div class="col-4 text-center">
849
+ <div id="sparkline-2"></div>
850
+ <div class="text-white">Online</div>
851
+ </div>
852
+ <div class="col-4 text-center">
853
+ <div id="sparkline-3"></div>
854
+ <div class="text-white">Sales</div>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ <!-- /.Start col -->
861
+ </div>
862
+ <!-- /.row (main row) -->
863
+ </div><!-- /.container-fluid -->
864
+ </div>
865
+ </main>
866
+ <!-- /.app-content -->
867
+
868
+ <!-- Main Footer -->
869
+ <footer class="app-footer">
870
+ <!-- To the end -->
871
+ <div class="float-end d-none d-sm-inline">
872
+ Anything you want
873
+ </div>
874
+ <!-- Default to the start -->
875
+ <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
876
+ </footer>
877
+ </div>
878
+ <!-- ./app-wrapper -->
879
+
880
+ <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
881
+ <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
882
+
883
+ <!-- @popperjs for Bootstrap 5 -->
884
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
885
+
886
+ <!-- Bootstrap 5 -->
887
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
888
+
889
+ <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
890
+ <script src="../../dist/js/adminlte.js"></script>
891
+
892
+ <!-- OPTIONAL SCRIPTS -->
893
+ <script>
894
+ const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
895
+ const Default = {
896
+ scrollbarTheme: 'os-theme-light',
897
+ scrollbarAutoHide: 'leave',
898
+ scrollbarClickScroll: true
899
+ }
900
+
901
+ document.addEventListener("DOMContentLoaded", function() {
902
+ const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
903
+ if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
904
+ OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
905
+ scrollbars: {
906
+ theme: Default.scrollbarTheme,
907
+ autoHide: Default.scrollbarAutoHide,
908
+ clickScroll: Default.scrollbarClickScroll
909
+ }
910
+ })
911
+ }
912
+ })
913
+ </script>
914
+
915
+ <!-- OPTIONAL SCRIPTS -->
916
+
917
+ <!-- sortablejs -->
918
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" crossorigin="anonymous"></script>
919
+
920
+ <!-- sortablejs -->
921
+ <script>
922
+ const connectedSortables = document.querySelectorAll('.connectedSortable')
923
+ connectedSortables.forEach(connectedSortable => {
924
+ let sortable = new Sortable(connectedSortable, {
925
+ group: 'shared',
926
+ })
927
+ })
928
+
929
+ const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
930
+ cardHeaders.forEach(cardHeader => {
931
+ cardHeader.style.cursor = 'move';
932
+ });
933
+ </script>
934
+
935
+ <!-- apexcharts -->
936
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
937
+
938
+ <!-- ChartJS -->
939
+ <script>
940
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
941
+ // IT'S ALL JUST JUNK FOR DEMO
942
+ // ++++++++++++++++++++++++++++++++++++++++++
943
+
944
+ const sales_chart_options = {
945
+ series: [{
946
+ name: 'Digital Goods',
947
+ data: [28, 48, 40, 19, 86, 27, 90]
948
+ }, {
949
+ name: 'Electronics',
950
+ data: [65, 59, 80, 81, 56, 55, 40]
951
+ }],
952
+ chart: {
953
+ height: 300,
954
+ type: 'area',
955
+ toolbar: {
956
+ show: false,
957
+ },
958
+ },
959
+ legend: {
960
+ show: false
961
+ },
962
+ colors: ['#0d6efd', '#20c997'],
963
+ dataLabels: {
964
+ enabled: false,
965
+ },
966
+ stroke: {
967
+ curve: 'smooth'
968
+ },
969
+ xaxis: {
970
+ type: 'datetime',
971
+ categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
972
+ },
973
+ tooltip: {
974
+ x: {
975
+ format: 'MMMM yyyy'
976
+ },
977
+ },
978
+ };
979
+
980
+ const sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
981
+ sales_chart.render();
982
+ </script>
983
+
984
+ <!-- jsvectormap -->
985
+ <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" crossorigin="anonymous"></script>
986
+ <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" crossorigin="anonymous"></script>
987
+
988
+ <!-- jsvectormap -->
989
+ <script>
990
+ const visitorsData = {
991
+ US: 398, // USA
992
+ SA: 400, // Saudi Arabia
993
+ CA: 1000, // Canada
994
+ DE: 500, // Germany
995
+ FR: 760, // France
996
+ CN: 300, // China
997
+ AU: 700, // Australia
998
+ BR: 600, // Brazil
999
+ IN: 800, // India
1000
+ GB: 320, // Great Britain
1001
+ RU: 3000 // Russia
1002
+ }
1003
+
1004
+ // World map by jsVectorMap
1005
+ const map = new jsVectorMap({
1006
+ selector: "#world-map",
1007
+ map: "world",
1008
+ });
1009
+
1010
+ // Sparkline charts
1011
+ const option_sparkline1 = {
1012
+ series: [{
1013
+ data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
1014
+ }],
1015
+ chart: {
1016
+ type: 'area',
1017
+ height: 50,
1018
+ sparkline: {
1019
+ enabled: true
1020
+ },
1021
+ },
1022
+ stroke: {
1023
+ curve: 'straight'
1024
+ },
1025
+ fill: {
1026
+ opacity: 0.3,
1027
+ },
1028
+ yaxis: {
1029
+ min: 0
1030
+ },
1031
+ colors: ['#DCE6EC'],
1032
+ };
1033
+
1034
+ const sparkline1 = new ApexCharts(document.querySelector("#sparkline-1"), option_sparkline1);
1035
+ sparkline1.render();
1036
+
1037
+ const option_sparkline2 = {
1038
+ series: [{
1039
+ data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
1040
+ }],
1041
+ chart: {
1042
+ type: 'area',
1043
+ height: 50,
1044
+ sparkline: {
1045
+ enabled: true
1046
+ },
1047
+ },
1048
+ stroke: {
1049
+ curve: 'straight'
1050
+ },
1051
+ fill: {
1052
+ opacity: 0.3,
1053
+ },
1054
+ yaxis: {
1055
+ min: 0
1056
+ },
1057
+ colors: ['#DCE6EC'],
1058
+ };
1059
+
1060
+ const sparkline2 = new ApexCharts(document.querySelector("#sparkline-2"), option_sparkline2);
1061
+ sparkline2.render();
1062
+
1063
+ const option_sparkline3 = {
1064
+ series: [{
1065
+ data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
1066
+ }],
1067
+ chart: {
1068
+ type: 'area',
1069
+ height: 50,
1070
+ sparkline: {
1071
+ enabled: true
1072
+ },
1073
+ },
1074
+ stroke: {
1075
+ curve: 'straight'
1076
+ },
1077
+ fill: {
1078
+ opacity: 0.3,
1079
+ },
1080
+ yaxis: {
1081
+ min: 0
1082
+ },
1083
+ colors: ['#DCE6EC'],
1084
+ };
1085
+
1086
+ const sparkline3 = new ApexCharts(document.querySelector("#sparkline-3"), option_sparkline3);
1087
+ sparkline3.render();
1088
+ </script>
1089
+ </body>
1090
+
1091
+ </html>