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/index3.html ADDED
@@ -0,0 +1,950 @@
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 | Dashboard v3</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <meta name="title" content="AdminLTE | Dashboard v3">
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
+ </head>
35
+
36
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
37
+ <div class="app-wrapper">
38
+ <!-- Navbar -->
39
+ <nav class="app-header navbar navbar-expand bg-body">
40
+ <div class="container-fluid">
41
+ <!-- Start navbar links -->
42
+ <ul class="navbar-nav">
43
+ <li class="nav-item">
44
+ <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
45
+ </li>
46
+ <li class="nav-item d-none d-md-block">
47
+ <a href="#" class="nav-link">Home</a>
48
+ </li>
49
+ <li class="nav-item d-none d-md-block">
50
+ <a href="#" class="nav-link">Contact</a>
51
+ </li>
52
+ </ul>
53
+ <!-- End navbar links -->
54
+
55
+ <ul class="navbar-nav ms-auto">
56
+ <!-- Navbar Search -->
57
+ <li class="nav-item">
58
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
59
+ <i class="fa-solid fa-search"></i>
60
+ </a>
61
+ </li>
62
+
63
+ <!-- Messages Dropdown Menu -->
64
+ <li class="nav-item dropdown">
65
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
66
+ <i class="fa-regular fa-comments"></i>
67
+ <span class="navbar-badge badge text-bg-danger">3</span>
68
+ </a>
69
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
70
+ <a href="#" class="dropdown-item">
71
+ <!-- Message Start -->
72
+ <div class="d-flex">
73
+ <div class="flex-shrink-0">
74
+ <img src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
75
+ </div>
76
+ <div class="flex-grow-1">
77
+ <h3 class="dropdown-item-title">
78
+ Brad Diesel
79
+ <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
80
+ </h3>
81
+ <p class="fs-7">Call me whenever you can...</p>
82
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
83
+ </div>
84
+ </div>
85
+ <!-- Message End -->
86
+ </a>
87
+ <div class="dropdown-divider"></div>
88
+ <a href="#" class="dropdown-item">
89
+ <!-- Message Start -->
90
+ <div class="d-flex">
91
+ <div class="flex-shrink-0">
92
+ <img src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
93
+ </div>
94
+ <div class="flex-grow-1">
95
+ <h3 class="dropdown-item-title">
96
+ John Pierce
97
+ <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
98
+ </h3>
99
+ <p class="fs-7">I got your message bro</p>
100
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
101
+ </div>
102
+ </div>
103
+ <!-- Message End -->
104
+ </a>
105
+ <div class="dropdown-divider"></div>
106
+ <a href="#" class="dropdown-item">
107
+ <!-- Message Start -->
108
+ <div class="d-flex">
109
+ <div class="flex-shrink-0">
110
+ <img src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
111
+ </div>
112
+ <div class="flex-grow-1">
113
+ <h3 class="dropdown-item-title">
114
+ Nora Silvester
115
+ <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
116
+ </h3>
117
+ <p class="fs-7">The subject goes here</p>
118
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
119
+ </div>
120
+ </div>
121
+ <!-- Message End -->
122
+ </a>
123
+ <div class="dropdown-divider"></div>
124
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
125
+ </div>
126
+ </li>
127
+ <!-- Notifications Dropdown Menu -->
128
+ <li class="nav-item dropdown">
129
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
130
+ <i class="fa-regular fa-bell"></i>
131
+ <span class="navbar-badge badge text-bg-warning">15</span>
132
+ </a>
133
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
134
+ <span class="dropdown-item dropdown-header">15 Notifications</span>
135
+ <div class="dropdown-divider"></div>
136
+ <a href="#" class="dropdown-item">
137
+ <i class="fa-solid fa-envelope me-2"></i> 4 new messages
138
+ <span class="float-end text-secondary fs-7">3 mins</span>
139
+ </a>
140
+ <div class="dropdown-divider"></div>
141
+ <a href="#" class="dropdown-item">
142
+ <i class="fa-solid fa-users me-2"></i> 8 friend requests
143
+ <span class="float-end text-secondary fs-7">12 hours</span>
144
+ </a>
145
+ <div class="dropdown-divider"></div>
146
+ <a href="#" class="dropdown-item">
147
+ <i class="fa-solid fa-file me-2"></i> 3 new reports
148
+ <span class="float-end text-secondary fs-7">2 days</span>
149
+ </a>
150
+ <div class="dropdown-divider"></div>
151
+ <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
152
+ </div>
153
+ </li>
154
+ <li class="nav-item dropdown user-menu">
155
+ <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
156
+ <img src="../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
157
+ <span class="d-none d-md-inline">Alexander Pierce</span>
158
+ </a>
159
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
160
+ <!-- User image -->
161
+ <li class="user-header text-bg-primary">
162
+ <img src="../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
163
+
164
+ <p>
165
+ Alexander Pierce - Web Developer
166
+ <small>Member since Nov. 2023</small>
167
+ </p>
168
+ </li>
169
+ <!-- Menu Body -->
170
+ <li class="user-body">
171
+ <div class="row">
172
+ <div class="col-4 text-center">
173
+ <a href="#">Followers</a>
174
+ </div>
175
+ <div class="col-4 text-center">
176
+ <a href="#">Sales</a>
177
+ </div>
178
+ <div class="col-4 text-center">
179
+ <a href="#">Friends</a>
180
+ </div>
181
+ </div>
182
+ <!-- /.row -->
183
+ </li>
184
+ <!-- Menu Footer-->
185
+ <li class="user-footer">
186
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
187
+ <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
188
+ </li>
189
+ </ul>
190
+ </li>
191
+ <!-- TODO tackel in v4.1 -->
192
+ <!-- <li class="nav-item">
193
+ <a class="nav-link" data-widget="fullscreen" href="#" role="button">
194
+ <i class="fa-solid fa-expand-arrows-alt"></i>
195
+ </a>
196
+ </li>
197
+ <li class="nav-item">
198
+ <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
199
+ <i class="fa-solid fa-th-large"></i>
200
+ </a>
201
+ </li> -->
202
+ </ul>
203
+ </div>
204
+ </nav>
205
+ <!-- /.navbar -->
206
+ <!-- Sidebar Container -->
207
+ <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
208
+ <div class="sidebar-brand">
209
+ <a href="../index.html" class="brand-link">
210
+ <img src="../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
211
+ <span class="brand-text fw-light">AdminLTE 4</span>
212
+ </a>
213
+ </div>
214
+ <!-- Sidebar -->
215
+ <div class="sidebar-wrapper">
216
+ <nav class="mt-2">
217
+ <!-- Sidebar Menu -->
218
+ <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
219
+ <li class="nav-item menu-open">
220
+ <a href="javascript:;" class="nav-link active">
221
+ <i class="nav-icon fa-solid fa-gauge-high"></i>
222
+ <p>
223
+ Dashboard
224
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
225
+ </p>
226
+ </a>
227
+ <ul class="nav nav-treeview">
228
+ <li class="nav-item">
229
+ <a href="../index.html" class="nav-link">
230
+ <i class="nav-icon fa-regular fa-circle"></i>
231
+ <p>Dashboard v1</p>
232
+ </a>
233
+ </li>
234
+ <li class="nav-item">
235
+ <a href="../index2.html" class="nav-link">
236
+ <i class="nav-icon fa-regular fa-circle"></i>
237
+ <p>Dashboard v2</p>
238
+ </a>
239
+ </li>
240
+ <li class="nav-item">
241
+ <a href="../index3.html" class="nav-link active">
242
+ <i class="nav-icon fa-regular fa-circle"></i>
243
+ <p>Dashboard v3</p>
244
+ </a>
245
+ </li>
246
+ </ul>
247
+ </li>
248
+ <li class="nav-item">
249
+ <a href="javascript:;" class="nav-link">
250
+ <i class="nav-icon fa-solid fa-box-open"></i>
251
+ <p>
252
+ Widgets
253
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
254
+ </p>
255
+ </a>
256
+ <ul class="nav nav-treeview">
257
+ <li class="nav-item">
258
+ <a href="../widgets/small-box.html" class="nav-link">
259
+ <i class="nav-icon fa-regular fa-circle"></i>
260
+ <p>Small Box</p>
261
+ </a>
262
+ </li>
263
+ <li class="nav-item">
264
+ <a href="../widgets/info-box.html" class="nav-link">
265
+ <i class="nav-icon fa-regular fa-circle"></i>
266
+ <p>info Box</p>
267
+ </a>
268
+ </li>
269
+ <li class="nav-item">
270
+ <a href="../widgets/cards.html" class="nav-link">
271
+ <i class="nav-icon fa-regular fa-circle"></i>
272
+ <p>Cards</p>
273
+ </a>
274
+ </li>
275
+ </ul>
276
+ </li>
277
+
278
+ <li class="nav-item">
279
+ <a href="javascript:;" class="nav-link">
280
+ <i class="nav-icon fa-solid fa-copy"></i>
281
+ <p>
282
+ Layout Options
283
+ <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
284
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
285
+ </p>
286
+ </a>
287
+ <ul class="nav nav-treeview">
288
+ <li class="nav-item">
289
+ <a href="../layout/unfixed-sidebar.html" class="nav-link">
290
+ <i class="nav-icon fa-regular fa-circle"></i>
291
+ <p>Unfixed Sidebar</p>
292
+ </a>
293
+ </li>
294
+ <li class="nav-item">
295
+ <a href="../layout/fixed-sidebar.html" class="nav-link">
296
+ <i class="nav-icon fa-regular fa-circle"></i>
297
+ <p>Fixed Sidebar</p>
298
+ </a>
299
+ </li>
300
+ <li class="nav-item">
301
+ <a href="../layout/sidebar-mini.html" class="nav-link">
302
+ <i class="nav-icon fa-regular fa-circle"></i>
303
+ <p>Sidebar Mini</p>
304
+ </a>
305
+ </li>
306
+ <li class="nav-item">
307
+ <a href="../layout/layout-rtl.html" class="nav-link">
308
+ <i class="nav-icon fa-regular fa-circle"></i>
309
+ <p>Layout RTL</p>
310
+ </a>
311
+ </li>
312
+ </ul>
313
+ </li>
314
+ <li class="nav-item">
315
+ <a href="javascript:;" class="nav-link">
316
+ <i class="nav-icon fa-solid fa-tree"></i>
317
+ <p>
318
+ UI Elements
319
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
320
+ </p>
321
+ </a>
322
+ <ul class="nav nav-treeview">
323
+ <li class="nav-item">
324
+ <a href="../UI/timeline.html" class="nav-link">
325
+ <i class="nav-icon fa-regular fa-circle"></i>
326
+ <p>Timeline</p>
327
+ </a>
328
+ </li>
329
+ </ul>
330
+ </li>
331
+ <li class="nav-item">
332
+ <a href="javascript:;" class="nav-link">
333
+ <i class="nav-icon fa-solid fa-pen-to-square"></i>
334
+ <p>
335
+ Forms
336
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
337
+ </p>
338
+ </a>
339
+ <ul class="nav nav-treeview">
340
+ <li class="nav-item">
341
+ <a href="../forms/general.html" class="nav-link">
342
+ <i class="nav-icon fa-regular fa-circle"></i>
343
+ <p>General Elements</p>
344
+ </a>
345
+ </li>
346
+ </ul>
347
+ </li>
348
+ <li class="nav-item">
349
+ <a href="javascript:;" class="nav-link">
350
+ <i class="nav-icon fa-solid fa-table"></i>
351
+ <p>
352
+ Tables
353
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
354
+ </p>
355
+ </a>
356
+ <ul class="nav nav-treeview">
357
+ <li class="nav-item">
358
+ <a href="../tables/simple.html" class="nav-link">
359
+ <i class="nav-icon fa-regular fa-circle"></i>
360
+ <p>Simple Tables</p>
361
+ </a>
362
+ </li>
363
+ </ul>
364
+ </li>
365
+
366
+ <li class="nav-header">EXAMPLES</li>
367
+ <li class="nav-item">
368
+ <a href="javascript:;" class="nav-link">
369
+ <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
370
+ <p>
371
+ Login & Register
372
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
373
+ </p>
374
+ </a>
375
+ <ul class="nav nav-treeview">
376
+ <li class="nav-item">
377
+ <a href="../examples/login.html" class="nav-link ">
378
+ <i class="nav-icon fa-regular fa-circle"></i>
379
+ <p>Login v1</p>
380
+ </a>
381
+ </li>
382
+ <li class="nav-item">
383
+ <a href="../examples/register.html" class="nav-link ">
384
+ <i class="nav-icon fa-regular fa-circle"></i>
385
+ <p>Register v1</p>
386
+ </a>
387
+ </li>
388
+ </ul>
389
+ </li>
390
+
391
+ <li class="nav-header">DOCUMENTATIONS</li>
392
+ <li class="nav-item">
393
+ <a href="../docs/index.html" class="nav-link">
394
+ <i class="nav-icon fa-solid fa-download"></i>
395
+ <p>Installation</p>
396
+ </a>
397
+ </li>
398
+ <li class="nav-item">
399
+ <a href="../docs/layout.html" class="nav-link">
400
+ <i class="nav-icon fa-solid fa-grip"></i>
401
+ <p>Layout</p>
402
+ </a>
403
+ </li>
404
+ <li class="nav-item">
405
+ <a href="../docs/color-mode.html" class="nav-link">
406
+ <i class="nav-icon fa-solid fa-star-half-stroke"></i>
407
+ <p>Color Mode</p>
408
+ </a>
409
+ </li>
410
+ <li class="nav-item">
411
+ <a href="javascript:;" class="nav-link">
412
+ <i class="nav-icon fa-solid fa-swatchbook"></i>
413
+ <p>
414
+ Components
415
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
416
+ </p>
417
+ </a>
418
+ <ul class="nav nav-treeview">
419
+ <li class="nav-item">
420
+ <a href="../docs/components/main-header.html" class="nav-link">
421
+ <i class="nav-icon fa-regular fa-circle"></i>
422
+ <p>Main Header</p>
423
+ </a>
424
+ </li>
425
+ </ul>
426
+ </li>
427
+ <li class="nav-item">
428
+ <a href="../docs/browser-support.html" class="nav-link">
429
+ <i class="nav-icon fa-solid fa-edge"></i>
430
+ <p>Browser Support</p>
431
+ </a>
432
+ </li>
433
+
434
+ <li class="nav-header">MULTI LEVEL EXAMPLE</li>
435
+ <li class="nav-item">
436
+ <a href="javascript:;" class="nav-link">
437
+ <i class="nav-icon fa-solid fa-circle"></i>
438
+ <p>Level 1</p>
439
+ </a>
440
+ </li>
441
+ <li class="nav-item">
442
+ <a href="javascript:;" class="nav-link">
443
+ <i class="nav-icon fa-solid fa-circle"></i>
444
+ <p>
445
+ Level 1
446
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
447
+ </p>
448
+ </a>
449
+ <ul class="nav nav-treeview">
450
+ <li class="nav-item">
451
+ <a href="javascript:;" class="nav-link">
452
+ <i class="nav-icon fa-regular fa-circle"></i>
453
+ <p>Level 2</p>
454
+ </a>
455
+ </li>
456
+ <li class="nav-item">
457
+ <a href="javascript:;" class="nav-link">
458
+ <i class="nav-icon fa-regular fa-circle"></i>
459
+ <p>
460
+ Level 2
461
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
462
+ </p>
463
+ </a>
464
+ <ul class="nav nav-treeview">
465
+ <li class="nav-item">
466
+ <a href="javascript:;" class="nav-link">
467
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
468
+ <p>Level 3</p>
469
+ </a>
470
+ </li>
471
+ <li class="nav-item">
472
+ <a href="javascript:;" class="nav-link">
473
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
474
+ <p>Level 3</p>
475
+ </a>
476
+ </li>
477
+ <li class="nav-item">
478
+ <a href="javascript:;" class="nav-link">
479
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
480
+ <p>Level 3</p>
481
+ </a>
482
+ </li>
483
+ </ul>
484
+ </li>
485
+ <li class="nav-item">
486
+ <a href="javascript:;" class="nav-link">
487
+ <i class="nav-icon fa-regular fa-circle"></i>
488
+ <p>Level 2</p>
489
+ </a>
490
+ </li>
491
+ </ul>
492
+ </li>
493
+ <li class="nav-item">
494
+ <a href="javascript:;" class="nav-link">
495
+ <i class="nav-icon fa-solid fa-circle"></i>
496
+ <p>Level 1</p>
497
+ </a>
498
+ </li>
499
+ <li class="nav-header">LABELS</li>
500
+ <li class="nav-item">
501
+ <a href="javascript:;" class="nav-link">
502
+ <i class="nav-icon fa-regular fa-circle text-danger"></i>
503
+ <p class="text">Important</p>
504
+ </a>
505
+ </li>
506
+ <li class="nav-item">
507
+ <a href="javascript:;" class="nav-link">
508
+ <i class="nav-icon fa-regular fa-circle text-warning"></i>
509
+ <p>Warning</p>
510
+ </a>
511
+ </li>
512
+ <li class="nav-item">
513
+ <a href="javascript:;" class="nav-link">
514
+ <i class="nav-icon fa-regular fa-circle text-info"></i>
515
+ <p>Informational</p>
516
+ </a>
517
+ </li>
518
+ </ul>
519
+ </nav>
520
+ </div>
521
+ <!-- /.sidebar -->
522
+ </aside>
523
+ <!-- Main content -->
524
+ <main class="app-main">
525
+ <div class="app-content-header">
526
+ <div class="container-fluid">
527
+ <div class="row">
528
+ <div class="col-sm-6">
529
+ <h3 class="mb-0">Dashboard v3</h3>
530
+ </div>
531
+ <div class="col-sm-6">
532
+ <ol class="breadcrumb float-sm-end">
533
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
534
+ <li class="breadcrumb-item active" aria-current="page">Dashboard v3</li>
535
+ </ol>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ <div class="app-content">
541
+ <div class="container-fluid">
542
+ <div class="row">
543
+ <div class="col-lg-6">
544
+ <div class="card">
545
+ <div class="card-header border-0">
546
+ <div class="d-flex justify-content-between">
547
+ <h3 class="card-title">Online Store Visitors</h3>
548
+ <a href="javascript:void(0);">View Report</a>
549
+ </div>
550
+ </div>
551
+ <div class="card-body">
552
+ <div class="d-flex">
553
+ <p class="d-flex flex-column">
554
+ <span class="fw-bold fs-5">820</span>
555
+ <span>Visitors Over Time</span>
556
+ </p>
557
+ <p class="ms-auto d-flex flex-column text-end">
558
+ <span class="text-success">
559
+ <i class="fa-solid fa-arrow-up"></i> 12.5%
560
+ </span>
561
+ <span class="text-secondary">Since last week</span>
562
+ </p>
563
+ </div>
564
+ <!-- /.d-flex -->
565
+
566
+ <div class="position-relative mb-4">
567
+ <div id="visitors-chart"></div>
568
+ </div>
569
+
570
+ <div class="d-flex flex-row justify-content-end">
571
+ <span class="me-2">
572
+ <i class="fa-solid fa-square text-primary"></i> This Week
573
+ </span>
574
+
575
+ <span>
576
+ <i class="fa-solid fa-square text-secondary"></i> Last Week
577
+ </span>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ <!-- /.card -->
582
+
583
+ <div class="card">
584
+ <div class="card-header border-0">
585
+ <h3 class="card-title">Products</h3>
586
+ <div class="card-tools">
587
+ <a href="#" class="btn btn-tool btn-sm">
588
+ <i class="fa-solid fa-download"></i>
589
+ </a>
590
+ <a href="#" class="btn btn-tool btn-sm">
591
+ <i class="fa-solid fa-bars"></i>
592
+ </a>
593
+ </div>
594
+ </div>
595
+ <div class="card-body table-responsive p-0">
596
+ <table class="table table-striped align-middle">
597
+ <thead>
598
+ <tr>
599
+ <th>Product</th>
600
+ <th>Price</th>
601
+ <th>Sales</th>
602
+ <th>More</th>
603
+ </tr>
604
+ </thead>
605
+ <tbody>
606
+ <tr>
607
+ <td>
608
+ <img src="../../dist/assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
609
+ Some Product
610
+ </td>
611
+ <td>$13 USD</td>
612
+ <td>
613
+ <small class="text-success me-1">
614
+ <i class="fa-solid fa-arrow-up"></i>
615
+ 12%
616
+ </small>
617
+ 12,000 Sold
618
+ </td>
619
+ <td>
620
+ <a href="#" class="text-secondary">
621
+ <i class="fa-solid fa-search"></i>
622
+ </a>
623
+ </td>
624
+ </tr>
625
+ <tr>
626
+ <td>
627
+ <img src="../../dist/assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
628
+ Another Product
629
+ </td>
630
+ <td>$29 USD</td>
631
+ <td>
632
+ <small class="text-warning me-1">
633
+ <i class="fa-solid fa-arrow-down"></i>
634
+ 0.5%
635
+ </small>
636
+ 123,234 Sold
637
+ </td>
638
+ <td>
639
+ <a href="#" class="text-secondary">
640
+ <i class="fa-solid fa-search"></i>
641
+ </a>
642
+ </td>
643
+ </tr>
644
+ <tr>
645
+ <td>
646
+ <img src="../../dist/assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
647
+ Amazing Product
648
+ </td>
649
+ <td>$1,230 USD</td>
650
+ <td>
651
+ <small class="text-danger me-1">
652
+ <i class="fa-solid fa-arrow-down"></i>
653
+ 3%
654
+ </small>
655
+ 198 Sold
656
+ </td>
657
+ <td>
658
+ <a href="#" class="text-secondary">
659
+ <i class="fa-solid fa-search"></i>
660
+ </a>
661
+ </td>
662
+ </tr>
663
+ <tr>
664
+ <td>
665
+ <img src="../../dist/assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
666
+ Perfect Item
667
+ <span class="badge text-bg-danger">NEW</span>
668
+ </td>
669
+ <td>$199 USD</td>
670
+ <td>
671
+ <small class="text-success me-1">
672
+ <i class="fa-solid fa-arrow-up"></i>
673
+ 63%
674
+ </small>
675
+ 87 Sold
676
+ </td>
677
+ <td>
678
+ <a href="#" class="text-secondary">
679
+ <i class="fa-solid fa-search"></i>
680
+ </a>
681
+ </td>
682
+ </tr>
683
+ </tbody>
684
+ </table>
685
+ </div>
686
+ </div>
687
+ <!-- /.card -->
688
+ </div>
689
+ <!-- /.col-md-6 -->
690
+ <div class="col-lg-6">
691
+ <div class="card">
692
+ <div class="card-header border-0">
693
+ <div class="d-flex justify-content-between">
694
+ <h3 class="card-title">Sales</h3>
695
+ <a href="javascript:void(0);">View Report</a>
696
+ </div>
697
+ </div>
698
+ <div class="card-body">
699
+ <div class="d-flex">
700
+ <p class="d-flex flex-column">
701
+ <span class="fw-bold fs-5">$18,230.00</span>
702
+ <span>Sales Over Time</span>
703
+ </p>
704
+ <p class="ms-auto d-flex flex-column text-end">
705
+ <span class="text-success">
706
+ <i class="fa-solid fa-arrow-up"></i> 33.1%
707
+ </span>
708
+ <span class="text-secondary">Since Past Year</span>
709
+ </p>
710
+ </div>
711
+ <!-- /.d-flex -->
712
+
713
+ <div class="position-relative mb-4">
714
+ <div id="sales-chart"></div>
715
+ </div>
716
+
717
+ <div class="d-flex flex-row justify-content-end">
718
+ <span class="me-2">
719
+ <i class="fa-solid fa-square text-primary"></i> This year
720
+ </span>
721
+
722
+ <span>
723
+ <i class="fa-solid fa-square text-secondary"></i> Last year
724
+ </span>
725
+ </div>
726
+ </div>
727
+ </div>
728
+ <!-- /.card -->
729
+
730
+ <div class="card">
731
+ <div class="card-header border-0">
732
+ <h3 class="card-title">Online Store Overview</h3>
733
+ <div class="card-tools">
734
+ <a href="#" class="btn btn-sm btn-tool">
735
+ <i class="fa-solid fa-download"></i>
736
+ </a>
737
+ <a href="#" class="btn btn-sm btn-tool">
738
+ <i class="fa-solid fa-bars"></i>
739
+ </a>
740
+ </div>
741
+ </div>
742
+ <div class="card-body">
743
+ <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
744
+ <p class="text-success fs-2">
745
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
746
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
747
+ </svg>
748
+ </p>
749
+ <p class="d-flex flex-column text-end">
750
+ <span class="fw-bold">
751
+ <i class="ion ion-android-arrow-up text-success"></i> 12%
752
+ </span>
753
+ <span class="text-secondary">CONVERSION RATE</span>
754
+ </p>
755
+ </div>
756
+ <!-- /.d-flex -->
757
+ <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
758
+ <p class="text-warning fs-2">
759
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
760
+ <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
761
+ </svg>
762
+ </p>
763
+ <p class="d-flex flex-column text-end">
764
+ <span class="fw-bold">
765
+ <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
766
+ </span>
767
+ <span class="text-secondary">SALES RATE</span>
768
+ </p>
769
+ </div>
770
+ <!-- /.d-flex -->
771
+ <div class="d-flex justify-content-between align-items-center mb-0">
772
+ <p class="text-danger fs-2">
773
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
774
+ <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
775
+ </svg>
776
+ </p>
777
+ <p class="d-flex flex-column text-end">
778
+ <span class="fw-bold">
779
+ <i class="ion ion-android-arrow-down text-danger"></i> 1%
780
+ </span>
781
+ <span class="text-secondary">REGISTRATION RATE</span>
782
+ </p>
783
+ </div>
784
+ <!-- /.d-flex -->
785
+ </div>
786
+ </div>
787
+ </div>
788
+ <!-- /.col-md-6 -->
789
+ </div>
790
+ <!-- /.row -->
791
+ </div><!-- /.container-fluid -->
792
+ </div>
793
+ </main>
794
+ <!-- /.app-content -->
795
+
796
+ <!-- Main Footer -->
797
+ <footer class="app-footer">
798
+ <!-- To the end -->
799
+ <div class="float-end d-none d-sm-inline">
800
+ Anything you want
801
+ </div>
802
+ <!-- Default to the start -->
803
+ <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
804
+ </footer>
805
+ </div>
806
+ <!-- ./app-wrapper -->
807
+
808
+ <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
809
+ <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
810
+
811
+ <!-- @popperjs for Bootstrap 5 -->
812
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
813
+
814
+ <!-- Bootstrap 5 -->
815
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
816
+
817
+ <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
818
+ <script src="../../dist/js/adminlte.js"></script>
819
+
820
+ <!-- OPTIONAL SCRIPTS -->
821
+ <script>
822
+ const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
823
+ const Default = {
824
+ scrollbarTheme: 'os-theme-light',
825
+ scrollbarAutoHide: 'leave',
826
+ scrollbarClickScroll: true
827
+ }
828
+
829
+ document.addEventListener("DOMContentLoaded", function() {
830
+ const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
831
+ if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
832
+ OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
833
+ scrollbars: {
834
+ theme: Default.scrollbarTheme,
835
+ autoHide: Default.scrollbarAutoHide,
836
+ clickScroll: Default.scrollbarClickScroll
837
+ }
838
+ })
839
+ }
840
+ })
841
+ </script>
842
+
843
+ <!-- OPTIONAL SCRIPTS -->
844
+
845
+ <!-- apexcharts -->
846
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
847
+
848
+ <script>
849
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
850
+ // IT'S ALL JUST JUNK FOR DEMO
851
+ // ++++++++++++++++++++++++++++++++++++++++++
852
+
853
+ var visitors_chart_options = {
854
+ series: [{
855
+ name: "High - 2023",
856
+ data: [100, 120, 170, 167, 180, 177, 160]
857
+ },
858
+ {
859
+ name: "Low - 2023",
860
+ data: [60, 80, 70, 67, 80, 77, 100]
861
+ }
862
+ ],
863
+ chart: {
864
+ height: 200,
865
+ type: 'line',
866
+ toolbar: {
867
+ show: false
868
+ }
869
+ },
870
+ colors: ['#0d6efd', '#adb5bd'],
871
+ stroke: {
872
+ curve: 'smooth'
873
+ },
874
+ grid: {
875
+ borderColor: '#e7e7e7',
876
+ row: {
877
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
878
+ opacity: 0.5
879
+ },
880
+ },
881
+ legend: {
882
+ show: false
883
+ },
884
+ markers: {
885
+ size: 1
886
+ },
887
+ xaxis: {
888
+ categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
889
+ },
890
+ };
891
+
892
+ var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
893
+ visitors_chart.render();
894
+
895
+
896
+ var sales_chart_options = {
897
+ series: [{
898
+ name: 'Net Profit',
899
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
900
+ }, {
901
+ name: 'Revenue',
902
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
903
+ }, {
904
+ name: 'Free Cash Flow',
905
+ data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
906
+ }],
907
+ chart: {
908
+ type: 'bar',
909
+ height: 200
910
+ },
911
+ plotOptions: {
912
+ bar: {
913
+ horizontal: false,
914
+ columnWidth: '55%',
915
+ endingShape: 'rounded'
916
+ },
917
+ },
918
+ legend: {
919
+ show: false
920
+ },
921
+ colors: ['#0d6efd', '#20c997', '#ffc107'],
922
+ dataLabels: {
923
+ enabled: false
924
+ },
925
+ stroke: {
926
+ show: true,
927
+ width: 2,
928
+ colors: ['transparent']
929
+ },
930
+ xaxis: {
931
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
932
+ },
933
+ fill: {
934
+ opacity: 1
935
+ },
936
+ tooltip: {
937
+ y: {
938
+ formatter: function(val) {
939
+ return "$ " + val + " thousands"
940
+ }
941
+ }
942
+ }
943
+ };
944
+
945
+ var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
946
+ sales_chart.render();
947
+ </script>
948
+ </body>
949
+
950
+ </html>