admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

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 (200) hide show
  1. package/.bundlewatch.config.json +8 -8
  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/.gitpod.yml +1 -1
  7. package/.idea/AdminLTE.iml +4 -0
  8. package/.idea/codeStyles/Project.xml +24 -0
  9. package/.idea/dbnavigator.xml +421 -0
  10. package/.idea/git_toolbox_prj.xml +15 -0
  11. package/.idea/jsLibraryMappings.xml +6 -0
  12. package/.idea/jsLinters/eslint.xml +6 -0
  13. package/.idea/vcs.xml +6 -0
  14. package/.stylelintrc.json +47 -0
  15. package/LICENSE +1 -1
  16. package/README.md +6 -7
  17. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  18. package/dist/css/adminlte.css +2716 -2710
  19. package/dist/css/adminlte.css.map +1 -1
  20. package/dist/css/adminlte.min.css +2 -2
  21. package/dist/css/adminlte.min.css.map +1 -1
  22. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2715 -2710
  23. package/dist/css/adminlte.rtl.css.map +1 -0
  24. package/dist/css/adminlte.rtl.min.css +7 -0
  25. package/dist/css/adminlte.rtl.min.css.map +1 -0
  26. package/dist/js/adminlte.js +204 -233
  27. package/dist/js/adminlte.js.map +1 -1
  28. package/dist/js/adminlte.min.js +6 -1
  29. package/dist/js/adminlte.min.js.map +1 -1
  30. package/dist/pages/UI/timeline.html +869 -0
  31. package/dist/pages/docs/browser-support.html +755 -0
  32. package/dist/pages/docs/color-mode.html +1067 -0
  33. package/dist/pages/docs/components/main-header.html +1137 -0
  34. package/dist/pages/docs/components/main-sidebar.html +858 -0
  35. package/dist/pages/docs/faq.html +743 -0
  36. package/dist/pages/docs/how-to-contribute.html +783 -0
  37. package/dist/pages/docs/introduction.html +767 -0
  38. package/dist/pages/docs/javascript/treeview.html +762 -0
  39. package/dist/pages/docs/layout.html +788 -0
  40. package/dist/pages/docs/license.html +746 -0
  41. package/dist/pages/examples/lockscreen.html +107 -0
  42. package/dist/pages/examples/login-v2.html +148 -0
  43. package/dist/pages/examples/login.html +128 -196
  44. package/dist/pages/examples/register-v2.html +155 -0
  45. package/dist/pages/examples/register.html +131 -199
  46. package/dist/pages/forms/general.html +1065 -652
  47. package/dist/pages/index.html +1320 -0
  48. package/dist/pages/index2.html +1776 -0
  49. package/dist/pages/index3.html +1111 -0
  50. package/dist/pages/layout/collapsed-sidebar.html +766 -0
  51. package/dist/pages/layout/fixed-complete.html +867 -0
  52. package/dist/pages/layout/fixed-sidebar.html +749 -654
  53. package/dist/pages/layout/layout-rtl.html +766 -0
  54. package/dist/pages/layout/logo-switch.html +433 -0
  55. package/dist/pages/layout/sidebar-mini.html +766 -0
  56. package/dist/pages/layout/unfixed-sidebar.html +747 -654
  57. package/dist/pages/tables/simple.html +1049 -946
  58. package/dist/pages/widgets/cards.html +974 -713
  59. package/dist/pages/widgets/info-box.html +1062 -966
  60. package/dist/pages/widgets/small-box.html +792 -694
  61. package/index.html +6 -15
  62. package/package.json +59 -39
  63. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  64. package/src/config/assets.config.mjs +8 -0
  65. package/src/config/astro.config.mjs +19 -0
  66. package/src/config/postcss.config.mjs +15 -0
  67. package/src/config/rollup.config.js +20 -0
  68. package/src/html/.eslintrc.json +24 -0
  69. package/src/html/.prettierrc.js +11 -0
  70. package/src/html/.tsconfig.json +4 -0
  71. package/src/html/components/_head.astro +47 -0
  72. package/src/html/components/_scripts.astro +51 -0
  73. package/src/html/components/dashboard/_footer.astro +18 -0
  74. package/src/html/components/dashboard/_sidenav.astro +553 -0
  75. package/src/html/components/dashboard/_topbar.astro +213 -0
  76. package/src/html/components/docs/browser-support.mdx +23 -0
  77. package/src/html/components/docs/color-mode.mdx +169 -0
  78. package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx} +67 -67
  79. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  80. package/src/html/components/docs/faq.mdx +11 -0
  81. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  82. package/src/html/components/docs/introduction.mdx +60 -0
  83. package/src/html/components/docs/license.mdx +9 -0
  84. package/src/html/components/javascript/treeview.mdx +39 -0
  85. package/src/html/env.d.ts +1 -0
  86. package/src/html/pages/UI/timeline.astro +221 -0
  87. package/src/html/pages/docs/browser-support.astro +71 -0
  88. package/src/html/pages/docs/color-mode.astro +271 -0
  89. package/src/html/pages/docs/components/main-header.astro +319 -0
  90. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  91. package/src/html/pages/docs/faq.astro +71 -0
  92. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  93. package/src/html/pages/docs/introduction.astro +71 -0
  94. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  95. package/src/html/pages/docs/layout.astro +120 -0
  96. package/src/html/pages/docs/license.astro +71 -0
  97. package/src/html/pages/examples/lockscreen.astro +63 -0
  98. package/src/html/pages/examples/login-v2.astro +109 -0
  99. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +40 -22
  100. package/src/html/pages/examples/register-v2.astro +116 -0
  101. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +42 -24
  102. package/src/html/pages/forms/general.astro +624 -0
  103. package/src/html/pages/index.astro +790 -0
  104. package/src/html/pages/index2.astro +1345 -0
  105. package/src/html/pages/index3.astro +513 -0
  106. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  107. package/src/html/pages/layout/fixed-complete.astro +209 -0
  108. package/src/html/pages/layout/fixed-sidebar.astro +109 -0
  109. package/src/html/pages/layout/layout-rtl.astro +109 -0
  110. package/src/html/pages/layout/logo-switch.astro +212 -0
  111. package/src/html/pages/layout/sidebar-mini.astro +108 -0
  112. package/src/html/pages/layout/unfixed-sidebar.astro +107 -0
  113. package/src/html/pages/tables/simple.astro +472 -0
  114. package/src/html/pages/widgets/cards.astro +373 -0
  115. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +110 -60
  116. package/src/html/pages/widgets/small-box.astro +182 -0
  117. package/src/scss/_app-content.scss +52 -0
  118. package/src/scss/_app-footer.scss +15 -0
  119. package/src/scss/_app-header.scss +26 -0
  120. package/src/scss/_app-main.scss +17 -0
  121. package/src/scss/_app-sidebar.scss +603 -0
  122. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  123. package/src/scss/_bootstrap-variables.scss +42 -27
  124. package/src/scss/_callouts.scss +34 -0
  125. package/src/scss/_cards.scss +54 -224
  126. package/src/scss/_compact-mode.scss +79 -0
  127. package/src/scss/_direct-chat.scss +15 -9
  128. package/src/scss/_docs.scss +4 -0
  129. package/src/scss/_dropdown.scss +7 -5
  130. package/src/scss/_info-box.scss +2 -6
  131. package/src/scss/_miscellaneous.scss +0 -455
  132. package/src/scss/_mixins.scss +0 -6
  133. package/src/scss/_root.scss +2 -58
  134. package/src/scss/_small-box.scss +15 -41
  135. package/src/scss/_table.scss +0 -50
  136. package/src/scss/_timeline.scss +120 -0
  137. package/src/scss/_variables-dark.scss +15 -8
  138. package/src/scss/_variables.scss +48 -136
  139. package/src/scss/adminlte.scss +1 -1
  140. package/src/scss/mixins/_animations.scss +0 -1
  141. package/src/scss/mixins/_scrollbar.scss +2 -2
  142. package/src/scss/pages/_lockscreen.scss +74 -0
  143. package/src/scss/pages/_login_and_register.scss +1 -5
  144. package/src/scss/parts/_core.scss +9 -15
  145. package/src/scss/parts/_extra-components.scss +1 -2
  146. package/src/scss/parts/_pages.scss +1 -0
  147. package/src/ts/adminlte.ts +0 -2
  148. package/src/ts/card-widget.ts +57 -66
  149. package/src/ts/direct-chat.ts +35 -10
  150. package/src/ts/layout.ts +8 -6
  151. package/src/ts/push-menu.ts +90 -158
  152. package/src/ts/treeview.ts +30 -30
  153. package/src/ts/util/index.ts +14 -12
  154. package/src/utils/index.js +28 -0
  155. package/tsconfig.json +11 -3
  156. package/.stylelintrc +0 -40
  157. package/CHECKLIST.md +0 -0
  158. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  159. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  160. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  161. package/dist/index.html +0 -1065
  162. package/dist/index2.html +0 -1629
  163. package/dist/index3.html +0 -1015
  164. package/gulpfile.js +0 -315
  165. package/src/index.html +0 -476
  166. package/src/index2.html +0 -968
  167. package/src/index3.html +0 -430
  168. package/src/pages/forms/general.html +0 -97
  169. package/src/pages/layout/fixed-sidebar.html +0 -87
  170. package/src/pages/layout/unfixed-sidebar.html +0 -87
  171. package/src/pages/tables/simple.html +0 -336
  172. package/src/pages/widgets/cards.html +0 -143
  173. package/src/pages/widgets/small-box.html +0 -124
  174. package/src/partials/_head.html +0 -31
  175. package/src/partials/_scripts.html +0 -95
  176. package/src/partials/dashboard/_footer.html +0 -9
  177. package/src/partials/dashboard/_sidenav.html +0 -244
  178. package/src/scss/_brand-container.scss +0 -72
  179. package/src/scss/_content-header.scss +0 -9
  180. package/src/scss/_content-wrapper.scss +0 -6
  181. package/src/scss/_content.scss +0 -3
  182. package/src/scss/_layout-fixed.scss +0 -43
  183. package/src/scss/_layout-mobile.scss +0 -22
  184. package/src/scss/_main-footer.scss +0 -28
  185. package/src/scss/_main-header.scss +0 -40
  186. package/src/scss/_main-sidebar.scss +0 -63
  187. package/src/scss/_nav-sidebar.scss +0 -66
  188. package/src/scss/_products.scss +0 -55
  189. package/src/scss/_sidebar-close.scss +0 -6
  190. package/src/scss/_sidebar-collapse.scss +0 -120
  191. package/src/scss/_sidebar-horizontal.scss +0 -67
  192. package/src/scss/_sidebar.scss +0 -11
  193. package/src/scss/_users-list.scss +0 -45
  194. package/src/scss/mixins/_brand-variant.scss +0 -9
  195. package/src/scss/mixins/_cards.scss +0 -53
  196. package/src/scss/mixins/_direct-chat.scss +0 -17
  197. package/src/scss/mixins/_header-variant.scss +0 -22
  198. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  199. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  200. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/dist/index3.html DELETED
@@ -1,1015 +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 3</title>
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <meta name="title" content="AdminLTE 4 | Dashboard 3">
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
- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
40
- </head>
41
-
42
- <body class="layout-fixed">
43
- <div class="wrapper">
44
- <!-- Navbar -->
45
- <nav class="main-header navbar navbar-expand navbar-light">
46
- <div class="container-fluid">
47
- <!-- Start navbar links -->
48
- <ul class="navbar-nav">
49
- <li class="nav-item">
50
- <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button">
51
- <i class="fa-solid fa-bars"></i>
52
- </a>
53
- </li>
54
- <li class="nav-item d-none d-md-block">
55
- <a href="#" class="nav-link">Home</a>
56
- </li>
57
- <li class="nav-item d-none d-md-block">
58
- <a href="#" class="nav-link">Contact</a>
59
- </li>
60
- </ul>
61
-
62
- <!-- End navbar links -->
63
- <ul class="navbar-nav ms-auto">
64
- <!-- Navbar Search -->
65
- <li class="nav-item">
66
- <a class="nav-link" data-widget="navbar-search" href="#" role="button">
67
- <i class="fa-solid fa-search"></i>
68
- </a>
69
- </li>
70
-
71
- <!-- Messages Dropdown Menu -->
72
- <li class="nav-item dropdown">
73
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
74
- <i class="fa-regular fa-comments"></i>
75
- <span class="navbar-badge badge text-bg-danger">3</span>
76
- </a>
77
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
78
- <a href="#" class="dropdown-item">
79
- <!-- Message Start -->
80
- <div class="d-flex">
81
- <div class="flex-shrink-0">
82
- <img src="./assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
83
- </div>
84
- <div class="flex-grow-1">
85
- <h3 class="dropdown-item-title">
86
- Brad Diesel
87
- <span class="float-end fs-7 text-danger">
88
- <i class="fa-solid fa-star"></i>
89
- </span>
90
- </h3>
91
- <p class="fs-7">Call me whenever you can...</p>
92
- <p class="fs-7 text-muted">
93
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
94
- </p>
95
- </div>
96
- </div>
97
- <!-- Message End -->
98
- </a>
99
- <div class="dropdown-divider"></div>
100
- <a href="#" class="dropdown-item">
101
- <!-- Message Start -->
102
- <div class="d-flex">
103
- <div class="flex-shrink-0">
104
- <img src="./assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
105
- </div>
106
- <div class="flex-grow-1">
107
- <h3 class="dropdown-item-title">
108
- John Pierce
109
- <span class="float-end fs-7 text-muted">
110
- <i class="fa-solid fa-star"></i>
111
- </span>
112
- </h3>
113
- <p class="fs-7">I got your message bro</p>
114
- <p class="fs-7 text-muted">
115
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
116
- </p>
117
- </div>
118
- </div>
119
- <!-- Message End -->
120
- </a>
121
- <div class="dropdown-divider"></div>
122
- <a href="#" class="dropdown-item">
123
- <!-- Message Start -->
124
- <div class="d-flex">
125
- <div class="flex-shrink-0">
126
- <img src="./assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
127
- </div>
128
- <div class="flex-grow-1">
129
- <h3 class="dropdown-item-title">
130
- Nora Silvester
131
- <span class="float-end fs-7 text-warning">
132
- <i class="fa-solid fa-star"></i>
133
- </span>
134
- </h3>
135
- <p class="fs-7">The subject goes here</p>
136
- <p class="fs-7 text-muted">
137
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
138
- </p>
139
- </div>
140
- </div>
141
- <!-- Message End -->
142
- </a>
143
- <div class="dropdown-divider"></div>
144
- <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
145
- </div>
146
- </li>
147
- <!-- Notifications Dropdown Menu -->
148
- <li class="nav-item dropdown">
149
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
150
- <i class="fa-regular fa-bell"></i>
151
- <span class="navbar-badge badge text-bg-warning">15</span>
152
- </a>
153
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
154
- <span class="dropdown-item dropdown-header">15 Notifications</span>
155
- <div class="dropdown-divider"></div>
156
- <a href="#" class="dropdown-item">
157
- <i class="fa-solid fa-envelope me-2"></i> 4 new messages
158
- <span class="float-end text-muted fs-7">3 mins</span>
159
- </a>
160
- <div class="dropdown-divider"></div>
161
- <a href="#" class="dropdown-item">
162
- <i class="fa-solid fa-users me-2"></i> 8 friend requests
163
- <span class="float-end text-muted fs-7">12 hours</span>
164
- </a>
165
- <div class="dropdown-divider"></div>
166
- <a href="#" class="dropdown-item">
167
- <i class="fa-solid fa-file me-2"></i> 3 new reports
168
- <span class="float-end text-muted fs-7">2 days</span>
169
- </a>
170
- <div class="dropdown-divider"></div>
171
- <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
172
- </div>
173
- </li>
174
- <li class="nav-item dropdown user-menu">
175
- <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
176
- <img src="./assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
177
- <span class="d-none d-md-inline">Alexander Pierce</span>
178
- </a>
179
- <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
180
- <!-- User image -->
181
- <li class="user-header text-bg-primary">
182
- <img src="./assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
183
-
184
- <p>
185
- Alexander Pierce - Web Developer
186
- <small>Member since Nov. 2012</small>
187
- </p>
188
- </li>
189
- <!-- Menu Body -->
190
- <li class="user-body">
191
- <div class="row">
192
- <div class="col-4 text-center">
193
- <a href="#">Followers</a>
194
- </div>
195
- <div class="col-4 text-center">
196
- <a href="#">Sales</a>
197
- </div>
198
- <div class="col-4 text-center">
199
- <a href="#">Friends</a>
200
- </div>
201
- </div>
202
- <!-- /.row -->
203
- </li>
204
- <!-- Menu Footer-->
205
- <li class="user-footer">
206
- <a href="#" class="btn btn-default btn-flat">Profile</a>
207
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
208
- </li>
209
- </ul>
210
- </li>
211
- <li class="nav-item dropdown">
212
- <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
213
- <span class="theme-icon-active">
214
- <i class="my-1"></i>
215
- </span>
216
- </button>
217
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
218
- <li>
219
- <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
220
- <i class="fa-regular fa-sun me-2 opacity-50"></i>
221
- Light
222
- <i class="fa-solid fa-check ms-auto d-none"></i>
223
- </button>
224
- </li>
225
- <li>
226
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
227
- <i class="fa-solid fa-moon me-2 opacity-50"></i>
228
- Dark
229
- <i class="fa-solid fa-check ms-auto d-none"></i>
230
- </button>
231
- </li>
232
- <li>
233
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
234
- <i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
235
- Auto
236
- <i class="fa-solid fa-check ms-auto d-none"></i>
237
- </button>
238
- </li>
239
- </ul>
240
- </li>
241
- <!-- TODO tackel in v4.1 -->
242
- <!-- <li class="nav-item">
243
- <a class="nav-link" data-widget="fullscreen" href="#" role="button">
244
- <i class="fa-solid fa-expand-arrows-alt"></i>
245
- </a>
246
- </li>
247
- <li class="nav-item">
248
- <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
249
- <i class="fa-solid fa-th-large"></i>
250
- </a>
251
- </li> -->
252
- </ul>
253
- </div>
254
- </nav>
255
- <!-- /.navbar -->
256
-
257
-
258
- <!-- Main Sidebar Container -->
259
- <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
260
- <div class="brand-container">
261
- <a href="javascript:;" class="brand-link">
262
- <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
263
- <span class="brand-text fw-light">AdminLTE 4</span>
264
- </a>
265
- <a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button">
266
- <i class="fa-solid fa-angle-double-left"></i>
267
- </a>
268
- </div>
269
- <!-- Sidebar -->
270
- <div class="sidebar">
271
- <nav class="mt-2">
272
- <!-- Sidebar Menu -->
273
- <ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
274
- <li class="nav-item menu-open">
275
- <a href="javascript:;" class="nav-link active">
276
- <i class="nav-icon fa-solid fa-circle"></i>
277
- <p>
278
- Dashboard
279
- <i class="end fa-solid fa-angle-right"></i>
280
- </p>
281
- </a>
282
- <ul class="nav nav-treeview">
283
- <li class="nav-item">
284
- <a href="./index.html" class="nav-link ">
285
- <i class="nav-icon fa-regular fa-circle"></i>
286
- <p>Dashboard v1</p>
287
- </a>
288
- </li>
289
- <li class="nav-item">
290
- <a href="./index2.html" class="nav-link ">
291
- <i class="nav-icon fa-regular fa-circle"></i>
292
- <p>Dashboard v2</p>
293
- </a>
294
- </li>
295
- <li class="nav-item">
296
- <a href="./index3.html" class="nav-link active">
297
- <i class="nav-icon fa-regular fa-circle"></i>
298
- <p>Dashboard v3</p>
299
- </a>
300
- </li>
301
- </ul>
302
- </li>
303
- <li class="nav-item ">
304
- <a href="javascript:;" class="nav-link ">
305
- <i class="nav-icon fa-solid fa-circle"></i>
306
- <p>
307
- Widgets
308
- <i class="end fa-solid fa-angle-right"></i>
309
- </p>
310
- </a>
311
- <ul class="nav nav-treeview">
312
- <li class="nav-item">
313
- <a href="./pages/widgets/small-box.html" class="nav-link ">
314
- <i class="nav-icon fa-regular fa-circle"></i>
315
- <p>Small Box</p>
316
- </a>
317
- </li>
318
- <li class="nav-item">
319
- <a href="./pages/widgets/info-box.html" class="nav-link ">
320
- <i class="nav-icon fa-regular fa-circle"></i>
321
- <p>info Box</p>
322
- </a>
323
- </li>
324
- <li class="nav-item">
325
- <a href="./pages/widgets/cards.html" class="nav-link ">
326
- <i class="nav-icon fa-regular fa-circle"></i>
327
- <p>Cards</p>
328
- </a>
329
- </li>
330
- </ul>
331
- </li>
332
-
333
- <li class="nav-item ">
334
- <a href="javascript:;" class="nav-link ">
335
- <i class="nav-icon fa-solid fa-circle"></i>
336
- <p>
337
- Layout Options
338
- <span class="badge text-bg-info float-end me-3">6</span>
339
- <i class="end fa-solid fa-angle-right"></i>
340
- </p>
341
- </a>
342
- <ul class="nav nav-treeview">
343
- <li class="nav-item">
344
- <a href="./pages/layout/unfixed-sidebar.html" class="nav-link ">
345
- <i class="nav-icon fa-regular fa-circle"></i>
346
- <p>Unfixed Sidebar</p>
347
- </a>
348
- </li>
349
- <li class="nav-item">
350
- <a href="./pages/layout/fixed-sidebar.html" class="nav-link ">
351
- <i class="nav-icon fa-regular fa-circle"></i>
352
- <p>Fixed Sidebar</p>
353
- </a>
354
- </li>
355
- </ul>
356
- </li>
357
- <li class="nav-item ">
358
- <a href="javascript:;" class="nav-link ">
359
- <i class="nav-icon fa-solid fa-circle"></i>
360
- <p>
361
- Forms
362
- <i class="end fa-solid fa-angle-right"></i>
363
- </p>
364
- </a>
365
- <ul class="nav nav-treeview">
366
- <li class="nav-item">
367
- <a href="./pages/forms/general.html" class="nav-link ">
368
- <i class="nav-icon fa-regular fa-circle"></i>
369
- <p>General Elements</p>
370
- </a>
371
- </li>
372
- </ul>
373
- </li>
374
- <li class="nav-item ">
375
- <a href="javascript:;" class="nav-link ">
376
- <i class="nav-icon fa-solid fa-circle"></i>
377
- <p>
378
- Tables
379
- <i class="end fa-solid fa-angle-right"></i>
380
- </p>
381
- </a>
382
- <ul class="nav nav-treeview">
383
- <li class="nav-item">
384
- <a href="./pages/tables/simple.html" class="nav-link ">
385
- <i class="nav-icon fa-regular fa-circle"></i>
386
- <p>Simple Tables</p>
387
- </a>
388
- </li>
389
- </ul>
390
- </li>
391
- <li class="nav-header">EXAMPLES</li>
392
- <li class="nav-item">
393
- <a href="javascript:;" class="nav-link">
394
- <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
395
- <p>
396
- Login & Register
397
- <i class="end fa-solid fa-angle-right"></i>
398
- </p>
399
- </a>
400
- <ul class="nav nav-treeview">
401
- <li class="nav-item">
402
- <a href="./pages/examples/login.html" class="nav-link ">
403
- <i class="nav-icon fa-regular fa-circle"></i>
404
- <p>Login v1</p>
405
- </a>
406
- </li>
407
- <li class="nav-item">
408
- <a href="./pages/examples/register.html" class="nav-link ">
409
- <i class="nav-icon fa-regular fa-circle"></i>
410
- <p>Register v1</p>
411
- </a>
412
- </li>
413
- </ul>
414
- </li>
415
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
416
- <li class="nav-item">
417
- <a href="javascript:;" class="nav-link">
418
- <i class="nav-icon fa-solid fa-circle"></i>
419
- <p>Level 1</p>
420
- </a>
421
- </li>
422
- <li class="nav-item">
423
- <a href="javascript:;" class="nav-link">
424
- <i class="nav-icon fa-solid fa-circle"></i>
425
- <p>
426
- Level 1
427
- <i class="end fa-solid fa-angle-right"></i>
428
- </p>
429
- </a>
430
- <ul class="nav nav-treeview">
431
- <li class="nav-item">
432
- <a href="javascript:;" class="nav-link">
433
- <i class="nav-icon fa-regular fa-circle"></i>
434
- <p>Level 2</p>
435
- </a>
436
- </li>
437
- <li class="nav-item">
438
- <a href="javascript:;" class="nav-link">
439
- <i class="nav-icon fa-regular fa-circle"></i>
440
- <p>
441
- Level 2
442
- <i class="end fa-solid fa-angle-right"></i>
443
- </p>
444
- </a>
445
- <ul class="nav nav-treeview">
446
- <li class="nav-item">
447
- <a href="javascript:;" class="nav-link">
448
- <i class="nav-icon fa-regular fa-dot-circle"></i>
449
- <p>Level 3</p>
450
- </a>
451
- </li>
452
- <li class="nav-item">
453
- <a href="javascript:;" class="nav-link">
454
- <i class="nav-icon fa-regular fa-dot-circle"></i>
455
- <p>Level 3</p>
456
- </a>
457
- </li>
458
- <li class="nav-item">
459
- <a href="javascript:;" class="nav-link">
460
- <i class="nav-icon fa-regular fa-dot-circle"></i>
461
- <p>Level 3</p>
462
- </a>
463
- </li>
464
- </ul>
465
- </li>
466
- <li class="nav-item">
467
- <a href="javascript:;" class="nav-link">
468
- <i class="nav-icon fa-regular fa-circle"></i>
469
- <p>Level 2</p>
470
- </a>
471
- </li>
472
- </ul>
473
- </li>
474
- <li class="nav-item">
475
- <a href="javascript:;" class="nav-link">
476
- <i class="nav-icon fa-solid fa-circle"></i>
477
- <p>Level 1</p>
478
- </a>
479
- </li>
480
- <li class="nav-header">LABELS</li>
481
- <li class="nav-item">
482
- <a href="javascript:;" class="nav-link">
483
- <i class="nav-icon fa-regular fa-circle text-danger"></i>
484
- <p class="text">Important</p>
485
- </a>
486
- </li>
487
- <li class="nav-item">
488
- <a href="javascript:;" class="nav-link">
489
- <i class="nav-icon fa-regular fa-circle text-warning"></i>
490
- <p>Warning</p>
491
- </a>
492
- </li>
493
- <li class="nav-item">
494
- <a href="javascript:;" class="nav-link">
495
- <i class="nav-icon fa-regular fa-circle text-info"></i>
496
- <p>Informational</p>
497
- </a>
498
- </li>
499
- </ul>
500
- </nav>
501
- </div>
502
- <!-- /.sidebar -->
503
- </aside>
504
-
505
- <!-- Main content -->
506
- <main class="content-wrapper">
507
- <div class="content-header">
508
- <div class="container-fluid">
509
- <div class="row mb-2">
510
- <div class="col-sm-6">
511
- <h3>Dashboard v3</h3>
512
- </div>
513
- <div class="col-sm-6">
514
- <ol class="breadcrumb float-sm-end">
515
- <li class="breadcrumb-item">
516
- <a href="#">Home</a>
517
- </li>
518
- <li class="breadcrumb-item active" aria-current="page">Dashboard v3</li>
519
- </ol>
520
- </div>
521
- </div>
522
- </div>
523
- </div>
524
- <div class="content">
525
- <div class="container-fluid">
526
- <div class="row">
527
- <div class="col-lg-6">
528
- <div class="card">
529
- <div class="card-header border-0">
530
- <div class="d-flex justify-content-between">
531
- <h3 class="card-title">Online Store Visitors</h3>
532
- <a href="javascript:void(0);">View Report</a>
533
- </div>
534
- </div>
535
- <div class="card-body">
536
- <div class="d-flex">
537
- <p class="d-flex flex-column">
538
- <span class="fw-bold text-lg">820</span>
539
- <span>Visitors Over Time</span>
540
- </p>
541
- <p class="ms-auto d-flex flex-column text-end">
542
- <span class="text-success">
543
- <i class="fa-solid fa-arrow-up"></i> 12.5%
544
- </span>
545
- <span class="text-muted">Since last week</span>
546
- </p>
547
- </div>
548
- <!-- /.d-flex -->
549
-
550
- <div class="position-relative mb-4">
551
- <canvas id="visitors-chart" height="200"></canvas>
552
- </div>
553
-
554
- <div class="d-flex flex-row justify-content-end">
555
- <span class="me-2">
556
- <i class="fa-solid fa-square text-primary"></i> This Week
557
- </span>
558
-
559
- <span>
560
- <i class="fa-solid fa-square text-gray"></i> Last Week
561
- </span>
562
- </div>
563
- </div>
564
- </div>
565
- <!-- /.card -->
566
-
567
- <div class="card">
568
- <div class="card-header border-0">
569
- <h3 class="card-title">Products</h3>
570
- <div class="card-tools">
571
- <a href="#" class="btn btn-tool btn-sm">
572
- <i class="fa-solid fa-download"></i>
573
- </a>
574
- <a href="#" class="btn btn-tool btn-sm">
575
- <i class="fa-solid fa-bars"></i>
576
- </a>
577
- </div>
578
- </div>
579
- <div class="card-body table-responsive p-0">
580
- <table class="table table-striped align-middle">
581
- <thead>
582
- <tr>
583
- <th>Product</th>
584
- <th>Price</th>
585
- <th>Sales</th>
586
- <th>More</th>
587
- </tr>
588
- </thead>
589
- <tbody>
590
- <tr>
591
- <td>
592
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
593
- Some Product
594
- </td>
595
- <td>$13 USD</td>
596
- <td>
597
- <small class="text-success me-1">
598
- <i class="fa-solid fa-arrow-up"></i>
599
- 12%
600
- </small>
601
- 12,000 Sold
602
- </td>
603
- <td>
604
- <a href="#" class="text-muted">
605
- <i class="fa-solid fa-search"></i>
606
- </a>
607
- </td>
608
- </tr>
609
- <tr>
610
- <td>
611
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
612
- Another Product
613
- </td>
614
- <td>$29 USD</td>
615
- <td>
616
- <small class="text-warning me-1">
617
- <i class="fa-solid fa-arrow-down"></i>
618
- 0.5%
619
- </small>
620
- 123,234 Sold
621
- </td>
622
- <td>
623
- <a href="#" class="text-muted">
624
- <i class="fa-solid fa-search"></i>
625
- </a>
626
- </td>
627
- </tr>
628
- <tr>
629
- <td>
630
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
631
- Amazing Product
632
- </td>
633
- <td>$1,230 USD</td>
634
- <td>
635
- <small class="text-danger me-1">
636
- <i class="fa-solid fa-arrow-down"></i>
637
- 3%
638
- </small>
639
- 198 Sold
640
- </td>
641
- <td>
642
- <a href="#" class="text-muted">
643
- <i class="fa-solid fa-search"></i>
644
- </a>
645
- </td>
646
- </tr>
647
- <tr>
648
- <td>
649
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
650
- Perfect Item
651
- <span class="badge text-bg-danger">NEW</span>
652
- </td>
653
- <td>$199 USD</td>
654
- <td>
655
- <small class="text-success me-1">
656
- <i class="fa-solid fa-arrow-up"></i>
657
- 63%
658
- </small>
659
- 87 Sold
660
- </td>
661
- <td>
662
- <a href="#" class="text-muted">
663
- <i class="fa-solid fa-search"></i>
664
- </a>
665
- </td>
666
- </tr>
667
- </tbody>
668
- </table>
669
- </div>
670
- </div>
671
- <!-- /.card -->
672
- </div>
673
- <!-- /.col-md-6 -->
674
- <div class="col-lg-6">
675
- <div class="card">
676
- <div class="card-header border-0">
677
- <div class="d-flex justify-content-between">
678
- <h3 class="card-title">Sales</h3>
679
- <a href="javascript:void(0);">View Report</a>
680
- </div>
681
- </div>
682
- <div class="card-body">
683
- <div class="d-flex">
684
- <p class="d-flex flex-column">
685
- <span class="fw-bold text-lg">$18,230.00</span>
686
- <span>Sales Over Time</span>
687
- </p>
688
- <p class="ms-auto d-flex flex-column text-end">
689
- <span class="text-success">
690
- <i class="fa-solid fa-arrow-up"></i> 33.1%
691
- </span>
692
- <span class="text-muted">Since last month</span>
693
- </p>
694
- </div>
695
- <!-- /.d-flex -->
696
-
697
- <div class="position-relative mb-4">
698
- <canvas id="sales-chart" height="200"></canvas>
699
- </div>
700
-
701
- <div class="d-flex flex-row justify-content-end">
702
- <span class="me-2">
703
- <i class="fa-solid fa-square text-primary"></i> This year
704
- </span>
705
-
706
- <span>
707
- <i class="fa-solid fa-square text-gray"></i> Last year
708
- </span>
709
- </div>
710
- </div>
711
- </div>
712
- <!-- /.card -->
713
-
714
- <div class="card">
715
- <div class="card-header border-0">
716
- <h3 class="card-title">Online Store Overview</h3>
717
- <div class="card-tools">
718
- <a href="#" class="btn btn-sm btn-tool">
719
- <i class="fa-solid fa-download"></i>
720
- </a>
721
- <a href="#" class="btn btn-sm btn-tool">
722
- <i class="fa-solid fa-bars"></i>
723
- </a>
724
- </div>
725
- </div>
726
- <div class="card-body">
727
- <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
728
- <p class="text-success fs-2">
729
- <i class="ion ion-ios-refresh-empty"></i>
730
- </p>
731
- <p class="d-flex flex-column text-end">
732
- <span class="fw-bold">
733
- <i class="ion ion-android-arrow-up text-success"></i> 12%
734
- </span>
735
- <span class="text-muted">CONVERSION RATE</span>
736
- </p>
737
- </div>
738
- <!-- /.d-flex -->
739
- <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
740
- <p class="text-warning fs-2">
741
- <i class="ion ion-ios-cart-outline"></i>
742
- </p>
743
- <p class="d-flex flex-column text-end">
744
- <span class="fw-bold">
745
- <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
746
- </span>
747
- <span class="text-muted">SALES RATE</span>
748
- </p>
749
- </div>
750
- <!-- /.d-flex -->
751
- <div class="d-flex justify-content-between align-items-center mb-0">
752
- <p class="text-danger fs-2">
753
- <i class="ion ion-ios-people-outline"></i>
754
- </p>
755
- <p class="d-flex flex-column text-end">
756
- <span class="fw-bold">
757
- <i class="ion ion-android-arrow-down text-danger"></i> 1%
758
- </span>
759
- <span class="text-muted">REGISTRATION RATE</span>
760
- </p>
761
- </div>
762
- <!-- /.d-flex -->
763
- </div>
764
- </div>
765
- </div>
766
- <!-- /.col-md-6 -->
767
- </div>
768
- <!-- /.row -->
769
- </div><!-- /.container-fluid -->
770
- </div>
771
- </main>
772
- <!-- /.content-wrapper -->
773
-
774
- <!-- Main Footer -->
775
- <footer class="main-footer">
776
- <!-- To the end -->
777
- <div class="float-end d-none d-sm-inline">
778
- Anything you want
779
- </div>
780
- <!-- Default to the start -->
781
- <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
782
- </footer>
783
-
784
- </div>
785
- <!-- ./wrapper -->
786
-
787
- <!-- OPTIONAL SCRIPTS -->
788
- <!-- overlayScrollbars -->
789
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
790
-
791
- <!-- OPTIONAL SCRIPT For Bootstrap 5 -->
792
- <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>
793
-
794
- <!-- Bootstrap 5 -->
795
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
796
-
797
- <!-- REQUIRED SCRIPTS -->
798
- <!-- AdminLTE App -->
799
- <script src="./js/adminlte.js"></script>
800
-
801
- <!-- OPTIONAL SCRIPTS -->
802
- <script>
803
- const SELECTOR_SIDEBAR = '.sidebar'
804
- const Default = {
805
- scrollbarTheme: 'os-theme-light',
806
- scrollbarAutoHide: 'leave'
807
- }
808
-
809
- document.addEventListener("DOMContentLoaded", function() {
810
- if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
811
- OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
812
- scrollbars: {
813
- theme: Default.scrollbarTheme,
814
- autoHide: Default.scrollbarAutoHide,
815
- clickScroll: true
816
- }
817
- })
818
- }
819
- })
820
- </script>
821
-
822
- <!-- DON'T USE THIS IN PRODUCTION -->
823
- <script>
824
- // Color Mode Toggler
825
- (() => {
826
- 'use strict'
827
-
828
- const storedTheme = localStorage.getItem('theme')
829
-
830
- const getPreferredTheme = () => {
831
- if (storedTheme) {
832
- return storedTheme
833
- }
834
-
835
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
836
- }
837
-
838
- const setTheme = function (theme) {
839
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
840
- document.documentElement.setAttribute('data-bs-theme', 'dark')
841
- } else {
842
- document.documentElement.setAttribute('data-bs-theme', theme)
843
- }
844
- }
845
-
846
- setTheme(getPreferredTheme())
847
-
848
- const showActiveTheme = theme => {
849
- const activeThemeIcon = document.querySelector('.theme-icon-active i')
850
- const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
851
- const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
852
-
853
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
854
- element.classList.remove('active')
855
- })
856
-
857
- btnToActive.classList.add('active')
858
- activeThemeIcon.setAttribute('class', svgOfActiveBtn)
859
- }
860
-
861
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
862
- if (storedTheme !== 'light' || storedTheme !== 'dark') {
863
- setTheme(getPreferredTheme())
864
- }
865
- })
866
-
867
- window.addEventListener('DOMContentLoaded', () => {
868
- showActiveTheme(getPreferredTheme())
869
-
870
- document.querySelectorAll('[data-bs-theme-value]')
871
- .forEach(toggle => {
872
- toggle.addEventListener('click', () => {
873
- const theme = toggle.getAttribute('data-bs-theme-value')
874
- localStorage.setItem('theme', theme)
875
- setTheme(theme)
876
- showActiveTheme(theme)
877
- })
878
- })
879
- })
880
- })()
881
- </script>
882
-
883
-
884
- <!-- OPTIONAL SCRIPTS -->
885
-
886
- <!-- ChartJS -->
887
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
888
- <!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
889
- <script src="./assets/js/dashboard3.js"></script>
890
- <script>
891
- // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
892
- // IT'S ALL JUST JUNK FOR DEMO
893
- // ++++++++++++++++++++++++++++++++++++++++++
894
-
895
- /* global Chart:false */
896
- (function () {
897
- 'use strict'
898
-
899
- var ticksStyle = {
900
- fontColor: '#495057',
901
- fontStyle: 'bold'
902
- }
903
-
904
- var mode = 'index'
905
- var intersect = true
906
-
907
- var salesChartSelector = document.querySelector('#sales-chart')
908
- // eslint-disable-next-line no-unused-vars
909
- var salesChart = new Chart(salesChartSelector, {
910
- type: 'bar',
911
- data: {
912
- labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
913
- datasets: [{
914
- label: 'My First Dataset',
915
- data: [65, 59, 80, 81, 56, 55, 40],
916
- backgroundColor: [
917
- 'rgba(255, 99, 132, 0.2)',
918
- 'rgba(255, 159, 64, 0.2)',
919
- 'rgba(255, 205, 86, 0.2)',
920
- 'rgba(75, 192, 192, 0.2)',
921
- 'rgba(54, 162, 235, 0.2)',
922
- 'rgba(153, 102, 255, 0.2)',
923
- 'rgba(201, 203, 207, 0.2)'
924
- ],
925
- borderColor: [
926
- 'rgb(255, 99, 132)',
927
- 'rgb(255, 159, 64)',
928
- 'rgb(255, 205, 86)',
929
- 'rgb(75, 192, 192)',
930
- 'rgb(54, 162, 235)',
931
- 'rgb(153, 102, 255)',
932
- 'rgb(201, 203, 207)'
933
- ],
934
- borderWidth: 1
935
- }]
936
- },
937
- options: {
938
- maintainAspectRatio: false,
939
- scales: {
940
- y: {
941
- beginAtZero: true
942
- }
943
- }
944
- }
945
- })
946
-
947
- var visitorsChartSelector = document.querySelector('#visitors-chart')
948
- var visitorsChart = new Chart(visitorsChartSelector, {
949
- data: {
950
- labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
951
- datasets: [{
952
- type: 'line',
953
- data: [100, 120, 170, 167, 180, 177, 160],
954
- backgroundColor: 'transparent',
955
- borderColor: '#007bff',
956
- pointBorderColor: '#007bff',
957
- pointBackgroundColor: '#007bff'
958
- // pointHoverBackgroundColor: '#007bff',
959
- // pointHoverBorderColor : '#007bff'
960
- },
961
- {
962
- type: 'line',
963
- data: [60, 80, 70, 67, 80, 77, 100],
964
- backgroundColor: 'tansparent',
965
- borderColor: '#ced4da',
966
- pointBorderColor: '#ced4da',
967
- pointBackgroundColor: '#ced4da'
968
- // pointHoverBackgroundColor: '#ced4da',
969
- // pointHoverBorderColor : '#ced4da'
970
- }]
971
- },
972
- options: {
973
- maintainAspectRatio: false,
974
- tooltip: {
975
- mode: mode,
976
- intersect: intersect
977
- },
978
- hover: {
979
- mode: mode,
980
- intersect: intersect
981
- },
982
- plugins: {
983
- legend: {
984
- display: false
985
- }
986
- },
987
- scales: {
988
- yAxes: {
989
- // display: false,
990
- gridLines: {
991
- display: true,
992
- lineWidth: '4px',
993
- color: 'rgba(0, 0, 0, .2)',
994
- zeroLineColor: 'transparent'
995
- },
996
- ticks: Object.assign({
997
- beginAtZero: true,
998
- suggestedMax: 200
999
- }, ticksStyle)
1000
- },
1001
- xAxes: {
1002
- display: true,
1003
- gridLines: {
1004
- display: false
1005
- },
1006
- ticks: ticksStyle
1007
- }
1008
- }
1009
- }
1010
- })
1011
- })()
1012
- </script>
1013
- </body>
1014
-
1015
- </html>