admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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 (142) hide show
  1. package/.bundlewatch.config.json +6 -6
  2. package/.cache/.eslintcache +1 -1
  3. package/.cache/.stylelintcache +1 -1
  4. package/.gitpod.yml +1 -1
  5. package/README.md +9 -4
  6. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  7. package/dist/css/adminlte.css +879 -418
  8. package/dist/css/adminlte.css.map +1 -1
  9. package/dist/css/adminlte.min.css +2 -2
  10. package/dist/css/adminlte.min.css.map +1 -1
  11. package/dist/css/adminlte.rtl.css +886 -416
  12. package/dist/css/adminlte.rtl.css.map +1 -1
  13. package/dist/css/adminlte.rtl.min.css +2 -2
  14. package/dist/css/adminlte.rtl.min.css.map +1 -1
  15. package/dist/js/adminlte.js +178 -96
  16. package/dist/js/adminlte.js.map +1 -1
  17. package/dist/js/adminlte.min.js +3 -3
  18. package/dist/js/adminlte.min.js.map +1 -1
  19. package/dist/pages/UI/general.html +895 -0
  20. package/dist/pages/UI/timeline.html +309 -515
  21. package/dist/pages/docs/browser-support.html +265 -433
  22. package/dist/pages/docs/color-mode.html +482 -615
  23. package/dist/pages/docs/components/main-header.html +516 -703
  24. package/dist/pages/docs/components/main-sidebar.html +550 -0
  25. package/dist/pages/docs/faq.html +433 -0
  26. package/dist/pages/docs/how-to-contribute.html +474 -0
  27. package/dist/pages/docs/introduction.html +463 -0
  28. package/dist/pages/docs/javascript/treeview.html +453 -0
  29. package/dist/pages/docs/layout.html +293 -433
  30. package/dist/pages/docs/license.html +436 -0
  31. package/dist/pages/examples/lockscreen.html +69 -0
  32. package/dist/pages/examples/login-v2.html +88 -0
  33. package/dist/pages/examples/login.html +49 -100
  34. package/dist/pages/examples/register-v2.html +90 -0
  35. package/dist/pages/examples/register.html +50 -103
  36. package/dist/pages/forms/general.html +430 -454
  37. package/dist/pages/index.html +466 -740
  38. package/dist/pages/index2.html +672 -1041
  39. package/dist/pages/index3.html +371 -629
  40. package/dist/pages/layout/collapsed-sidebar.html +441 -0
  41. package/dist/pages/layout/fixed-complete.html +541 -0
  42. package/dist/pages/layout/fixed-sidebar.html +263 -446
  43. package/dist/pages/layout/layout-rtl.html +263 -445
  44. package/dist/pages/layout/logo-switch.html +234 -0
  45. package/dist/pages/layout/sidebar-mini.html +263 -445
  46. package/dist/pages/layout/unfixed-sidebar.html +263 -445
  47. package/dist/pages/tables/simple.html +314 -499
  48. package/dist/pages/widgets/cards.html +326 -629
  49. package/dist/pages/widgets/info-box.html +348 -674
  50. package/dist/pages/widgets/small-box.html +279 -465
  51. package/index.html +6 -10
  52. package/package.json +34 -30
  53. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  54. package/src/config/astro.config.mjs +3 -1
  55. package/src/html/.prettierrc.js +11 -0
  56. package/src/html/components/_head.astro +32 -26
  57. package/src/html/components/_scripts.astro +27 -28
  58. package/src/html/components/dashboard/_footer.astro +14 -8
  59. package/src/html/components/dashboard/_sidenav.astro +352 -113
  60. package/src/html/components/dashboard/_topbar.astro +99 -50
  61. package/src/html/components/docs/{browser-support/index.md → browser-support.mdx} +2 -1
  62. package/src/html/components/docs/color-mode.mdx +169 -0
  63. package/src/html/components/docs/components/{main-header-1.md → main-header.mdx} +60 -21
  64. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  65. package/src/html/components/docs/faq.mdx +11 -0
  66. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  67. package/src/html/components/docs/{introduction/index.md → introduction.mdx} +30 -5
  68. package/src/html/components/docs/license.mdx +9 -0
  69. package/src/html/components/javascript/treeview.mdx +39 -0
  70. package/src/html/pages/UI/general.astro +1451 -0
  71. package/src/html/pages/UI/timeline.astro +111 -48
  72. package/src/html/pages/docs/browser-support.astro +24 -11
  73. package/src/html/pages/docs/color-mode.astro +91 -42
  74. package/src/html/pages/docs/components/main-header.astro +134 -46
  75. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  76. package/src/html/pages/docs/faq.astro +71 -0
  77. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  78. package/src/html/pages/docs/{index.astro → introduction.astro} +24 -11
  79. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  80. package/src/html/pages/docs/layout.astro +62 -19
  81. package/src/html/pages/docs/license.astro +71 -0
  82. package/src/html/pages/examples/lockscreen.astro +63 -0
  83. package/src/html/pages/examples/login-v2.astro +109 -0
  84. package/src/html/pages/examples/login.astro +34 -16
  85. package/src/html/pages/examples/register-v2.astro +116 -0
  86. package/src/html/pages/examples/register.astro +36 -18
  87. package/src/html/pages/forms/general.astro +568 -37
  88. package/src/html/pages/index.astro +403 -157
  89. package/src/html/pages/index2.astro +715 -255
  90. package/src/html/pages/index3.astro +298 -197
  91. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  92. package/src/html/pages/layout/fixed-complete.astro +209 -0
  93. package/src/html/pages/layout/fixed-sidebar.astro +52 -27
  94. package/src/html/pages/layout/layout-rtl.astro +53 -28
  95. package/src/html/pages/layout/logo-switch.astro +212 -0
  96. package/src/html/pages/layout/sidebar-mini.astro +53 -28
  97. package/src/html/pages/layout/unfixed-sidebar.astro +51 -27
  98. package/src/html/pages/tables/simple.astro +226 -86
  99. package/src/html/pages/widgets/cards.astro +137 -72
  100. package/src/html/pages/widgets/info-box.astro +96 -41
  101. package/src/html/pages/widgets/small-box.astro +93 -32
  102. package/src/scss/_app-content.scss +52 -0
  103. package/src/scss/_app-footer.scss +1 -1
  104. package/src/scss/_app-main.scss +6 -5
  105. package/src/scss/_app-sidebar.scss +244 -70
  106. package/src/scss/_bootstrap-variables.scss +26 -22
  107. package/src/scss/_callouts.scss +6 -0
  108. package/src/scss/_cards.scss +32 -7
  109. package/src/scss/_compact-mode.scss +79 -0
  110. package/src/scss/_direct-chat.scss +5 -0
  111. package/src/scss/_dropdown.scss +1 -0
  112. package/src/scss/_info-box.scss +2 -10
  113. package/src/scss/_small-box.scss +0 -3
  114. package/src/scss/_timeline.scss +1 -0
  115. package/src/scss/_toasts.scss +33 -0
  116. package/src/scss/_variables.scss +32 -9
  117. package/src/scss/adminlte.scss +1 -2
  118. package/src/scss/mixins/_animations.scss +0 -5
  119. package/src/scss/pages/_lockscreen.scss +75 -0
  120. package/src/scss/pages/_login_and_register.scss +1 -3
  121. package/src/scss/parts/_core.scss +2 -0
  122. package/src/scss/parts/_extra-components.scss +1 -0
  123. package/src/scss/parts/_pages.scss +1 -0
  124. package/src/ts/adminlte.ts +3 -1
  125. package/src/ts/card-widget.ts +20 -52
  126. package/src/ts/direct-chat.ts +5 -4
  127. package/src/ts/fullscreen.ts +110 -0
  128. package/src/ts/layout.ts +5 -4
  129. package/src/ts/push-menu.ts +6 -22
  130. package/src/ts/treeview.ts +34 -11
  131. package/src/ts/util/index.ts +15 -13
  132. package/src/utils/index.js +20 -3
  133. package/.idea/AdminLTE.iml +0 -12
  134. package/.idea/codeStyles/Project.xml +0 -29
  135. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  136. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  137. package/.idea/modules.xml +0 -8
  138. package/.idea/php.xml +0 -28
  139. package/.idea/vcs.xml +0 -6
  140. package/dist/pages/docs.html +0 -617
  141. package/src/html/components/docs/color-mode/navbar-html.md +0 -80
  142. package/src/html/components/docs/color-mode/toggle-script.md +0 -48
package/dist/pages/index2.html CHANGED
@@ -1,529 +1,372 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en"> <!--begin::Head-->
3
3
 
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
- <!-- Primary Meta Tags -->
7
- <title>AdminLTE | Dashboard v2</title>
6
+ <title>AdminLTE | Dashboard v2</title><!--begin::Primary Meta Tags-->
8
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
8
  <meta name="title" content="AdminLTE | Dashboard v2">
10
9
  <meta name="author" content="ColorlibHQ">
11
10
  <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 -->
11
+ <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"><!--end::Primary Meta Tags--><!--begin::Fonts-->
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css" integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous"><!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
13
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous"><!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
14
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous"><!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
15
+ <link rel="stylesheet" href="../../dist/css/adminlte.css"><!--end::Required Plugin(AdminLTE)--><!-- apexcharts -->
33
16
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
34
17
  </head>
35
18
 
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 -->
19
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <!--begin::App Wrapper-->
20
+ <div class="app-wrapper"> <!--begin::Header-->
21
+ <nav class="app-header navbar navbar-expand bg-body"> <!--begin::Container-->
22
+ <div class="container-fluid"> <!--begin::Start Navbar Links-->
42
23
  <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 -->
24
+ <li class="nav-item"> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"> <i class="bi bi-list"></i> </a> </li>
25
+ <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Home</a> </li>
26
+ <li class="nav-item d-none d-md-block"> <a href="#" class="nav-link">Contact</a> </li>
27
+ </ul> <!--end::Start Navbar Links--> <!--begin::End Navbar Links-->
28
+ <ul class="navbar-nav ms-auto"> <!--begin::Navbar Search-->
29
+ <li class="nav-item"> <a class="nav-link" data-widget="navbar-search" href="#" role="button"> <i class="bi bi-search"></i> </a> </li> <!--end::Navbar Search--> <!--begin::Messages Dropdown Menu-->
30
+ <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i class="bi bi-chat-text"></i> <span class="navbar-badge badge text-bg-danger">3</span> </a>
31
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <a href="#" class="dropdown-item"> <!--begin::Message-->
72
32
  <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>
33
+ <div class="flex-shrink-0"> <img src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
76
34
  <div class="flex-grow-1">
77
35
  <h3 class="dropdown-item-title">
78
36
  Brad Diesel
79
- <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
37
+ <span class="float-end fs-7 text-danger"><i class="bi bi-star-fill"></i></span>
80
38
  </h3>
81
39
  <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>
40
+ <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
41
+ </p>
83
42
  </div>
84
- </div>
85
- <!-- Message End -->
43
+ </div> <!--end::Message-->
86
44
  </a>
87
- <div class="dropdown-divider"></div>
88
- <a href="#" class="dropdown-item">
89
- <!-- Message Start -->
45
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!--begin::Message-->
90
46
  <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>
47
+ <div class="flex-shrink-0"> <img src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
94
48
  <div class="flex-grow-1">
95
49
  <h3 class="dropdown-item-title">
96
50
  John Pierce
97
- <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
51
+ <span class="float-end fs-7 text-secondary"> <i class="bi bi-star-fill"></i> </span>
98
52
  </h3>
99
53
  <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>
54
+ <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
55
+ </p>
101
56
  </div>
102
- </div>
103
- <!-- Message End -->
57
+ </div> <!--end::Message-->
104
58
  </a>
105
- <div class="dropdown-divider"></div>
106
- <a href="#" class="dropdown-item">
107
- <!-- Message Start -->
59
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <!--begin::Message-->
108
60
  <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>
61
+ <div class="flex-shrink-0"> <img src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3"> </div>
112
62
  <div class="flex-grow-1">
113
63
  <h3 class="dropdown-item-title">
114
64
  Nora Silvester
115
- <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
65
+ <span class="float-end fs-7 text-warning"> <i class="bi bi-star-fill"></i> </span>
116
66
  </h3>
117
67
  <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>
68
+ <p class="fs-7 text-secondary"> <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
69
+ </p>
119
70
  </div>
120
- </div>
121
- <!-- Message End -->
71
+ </div> <!--end::Message-->
122
72
  </a>
123
- <div class="dropdown-divider"></div>
124
- <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
73
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
125
74
  </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>
75
+ </li> <!--end::Messages Dropdown Menu--> <!--begin::Notifications Dropdown Menu-->
76
+ <li class="nav-item dropdown"> <a class="nav-link" data-bs-toggle="dropdown" href="#"> <i class="bi bi-bell-fill"></i> <span class="navbar-badge badge text-bg-warning">15</span> </a>
77
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <span class="dropdown-item dropdown-header">15 Notifications</span>
78
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-envelope me-2"></i> 4 new messages
79
+ <span class="float-end text-secondary fs-7">3 mins</span> </a>
80
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-people-fill me-2"></i> 8 friend requests
81
+ <span class="float-end text-secondary fs-7">12 hours</span> </a>
82
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
83
+ <span class="float-end text-secondary fs-7">2 days</span> </a>
84
+ <div class="dropdown-divider"></div> <a href="#" class="dropdown-item dropdown-footer">
85
+ See All Notifications
144
86
  </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
87
  </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
-
88
+ </li> <!--end::Notifications Dropdown Menu--> <!--begin::Fullscreen Toggle-->
89
+ <li class="nav-item"> <a class="nav-link" href="#" data-lte-toggle="fullscreen"> <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i> <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none;"></i> </a> </li> <!--end::Fullscreen Toggle--> <!--begin::User Menu Dropdown-->
90
+ <li class="nav-item dropdown user-menu"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"> <img src="../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image"> <span class="d-none d-md-inline">Alexander Pierce</span> </a>
91
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <!--begin::User Image-->
92
+ <li class="user-header text-bg-primary"> <img src="../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
164
93
  <p>
165
94
  Alexander Pierce - Web Developer
166
95
  <small>Member since Nov. 2023</small>
167
96
  </p>
168
- </li>
169
- <!-- Menu Body -->
170
- <li class="user-body">
97
+ </li> <!--end::User Image--> <!--begin::Menu Body-->
98
+ <li class="user-body"> <!--begin::Row-->
171
99
  <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>
100
+ <div class="col-4 text-center"> <a href="#">Followers</a> </div>
101
+ <div class="col-4 text-center"> <a href="#">Sales</a> </div>
102
+ <div class="col-4 text-center"> <a href="#">Friends</a> </div>
103
+ </div> <!--end::Row-->
104
+ </li> <!--end::Menu Body--> <!--begin::Menu Footer-->
105
+ <li class="user-footer"> <a href="#" class="btn btn-default btn-flat">Profile</a> <a href="#" class="btn btn-default btn-flat float-end">Sign out</a> </li> <!--end::Menu Footer-->
189
106
  </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 -->
107
+ </li> <!--end::User Menu Dropdown-->
108
+ </ul> <!--end::End Navbar Links-->
109
+ </div> <!--end::Container-->
110
+ </nav> <!--end::Header--> <!--begin::Sidebar-->
111
+ <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark"> <!--begin::Sidebar Brand-->
112
+ <div class="sidebar-brand"> <!--begin::Brand Link--> <a href="./index.html" class="brand-link"> <!--begin::Brand Image--> <img src="../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow"> <!--end::Brand Image--> <!--begin::Brand Text--> <span class="brand-text fw-light">AdminLTE 4</span> <!--end::Brand Text--> </a> <!--end::Brand Link--> </div> <!--end::Sidebar Brand--> <!--begin::Sidebar Wrapper-->
215
113
  <div class="sidebar-wrapper">
216
- <nav class="mt-2">
217
- <!-- Sidebar Menu -->
114
+ <nav class="mt-2"> <!--begin::Sidebar Menu-->
218
115
  <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>
116
+ <li class="nav-item menu-open"> <a href="#" class="nav-link active"> <i class="nav-icon bi bi-speedometer"></i>
222
117
  <p>
223
118
  Dashboard
224
- <i class="nav-arrow fa-solid fa-angle-right"></i>
119
+ <i class="nav-arrow bi bi-chevron-right"></i>
225
120
  </p>
226
121
  </a>
227
122
  <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>
123
+ <li class="nav-item"> <a href="./index.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
231
124
  <p>Dashboard v1</p>
232
- </a>
233
- </li>
234
- <li class="nav-item">
235
- <a href="../index2.html" class="nav-link active">
236
- <i class="nav-icon fa-regular fa-circle"></i>
125
+ </a> </li>
126
+ <li class="nav-item"> <a href="./index2.html" class="nav-link active"> <i class="nav-icon bi bi-circle"></i>
237
127
  <p>Dashboard v2</p>
238
- </a>
239
- </li>
240
- <li class="nav-item">
241
- <a href="../index3.html" class="nav-link">
242
- <i class="nav-icon fa-regular fa-circle"></i>
128
+ </a> </li>
129
+ <li class="nav-item"> <a href="./index3.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
243
130
  <p>Dashboard v3</p>
244
- </a>
245
- </li>
131
+ </a> </li>
246
132
  </ul>
247
133
  </li>
248
- <li class="nav-item">
249
- <a href="javascript:;" class="nav-link">
250
- <i class="nav-icon fa-solid fa-box-open"></i>
134
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-seam-fill"></i>
251
135
  <p>
252
136
  Widgets
253
- <i class="nav-arrow fa-solid fa-angle-right"></i>
137
+ <i class="nav-arrow bi bi-chevron-right"></i>
254
138
  </p>
255
139
  </a>
256
140
  <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>
141
+ <li class="nav-item"> <a href="./widgets/small-box.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
260
142
  <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>
143
+ </a> </li>
144
+ <li class="nav-item"> <a href="./widgets/info-box.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
266
145
  <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>
146
+ </a> </li>
147
+ <li class="nav-item"> <a href="./widgets/cards.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
272
148
  <p>Cards</p>
273
- </a>
274
- </li>
149
+ </a> </li>
275
150
  </ul>
276
151
  </li>
277
-
278
- <li class="nav-item">
279
- <a href="javascript:;" class="nav-link">
280
- <i class="nav-icon fa-solid fa-copy"></i>
152
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-clipboard-fill"></i>
281
153
  <p>
282
154
  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>
155
+ <span class="nav-badge badge text-bg-secondary me-3">6</span> <i class="nav-arrow bi bi-chevron-right"></i>
285
156
  </p>
286
157
  </a>
287
158
  <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>
159
+ <li class="nav-item"> <a href="./layout/unfixed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
160
+ <p>Default Sidebar</p>
161
+ </a> </li>
162
+ <li class="nav-item"> <a href="./layout/fixed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
297
163
  <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>
164
+ </a> </li>
165
+ <li class="nav-item"> <a href="./layout/fixed-complete.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
166
+ <p>Fixed Complete</p>
167
+ </a> </li>
168
+ <li class="nav-item"> <a href="./layout/sidebar-mini.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
303
169
  <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>
170
+ </a> </li>
171
+ <li class="nav-item"> <a href="./layout/collapsed-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
172
+ <p>Sidebar Mini <small>+ Collapsed</small></p>
173
+ </a> </li>
174
+ <li class="nav-item"> <a href="./layout/logo-switch.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
175
+ <p>Sidebar Mini <small>+ Logo Switch</small></p>
176
+ </a> </li>
177
+ <li class="nav-item"> <a href="./layout/layout-rtl.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
309
178
  <p>Layout RTL</p>
310
- </a>
311
- </li>
179
+ </a> </li>
312
180
  </ul>
313
181
  </li>
314
- <li class="nav-item">
315
- <a href="javascript:;" class="nav-link">
316
- <i class="nav-icon fa-solid fa-tree"></i>
182
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-tree-fill"></i>
317
183
  <p>
318
184
  UI Elements
319
- <i class="nav-arrow fa-solid fa-angle-right"></i>
185
+ <i class="nav-arrow bi bi-chevron-right"></i>
320
186
  </p>
321
187
  </a>
322
188
  <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>
189
+ <li class="nav-item"> <a href="./UI/general.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
190
+ <p>General</p>
191
+ </a> </li>
192
+ <li class="nav-item"> <a href="./UI/timeline.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
326
193
  <p>Timeline</p>
327
- </a>
328
- </li>
194
+ </a> </li>
329
195
  </ul>
330
196
  </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>
197
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-pencil-square"></i>
334
198
  <p>
335
199
  Forms
336
- <i class="nav-arrow fa-solid fa-angle-right"></i>
200
+ <i class="nav-arrow bi bi-chevron-right"></i>
337
201
  </p>
338
202
  </a>
339
203
  <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>
204
+ <li class="nav-item"> <a href="./forms/general.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
343
205
  <p>General Elements</p>
344
- </a>
345
- </li>
206
+ </a> </li>
346
207
  </ul>
347
208
  </li>
348
- <li class="nav-item">
349
- <a href="javascript:;" class="nav-link">
350
- <i class="nav-icon fa-solid fa-table"></i>
209
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-table"></i>
351
210
  <p>
352
211
  Tables
353
- <i class="nav-arrow fa-solid fa-angle-right"></i>
212
+ <i class="nav-arrow bi bi-chevron-right"></i>
354
213
  </p>
355
214
  </a>
356
215
  <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>
216
+ <li class="nav-item"> <a href="./tables/simple.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
360
217
  <p>Simple Tables</p>
361
- </a>
362
- </li>
218
+ </a> </li>
363
219
  </ul>
364
220
  </li>
365
-
366
221
  <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>
222
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
370
223
  <p>
371
- Login & Register
372
- <i class="nav-arrow fa-solid fa-angle-right"></i>
224
+ Auth
225
+ <i class="nav-arrow bi bi-chevron-right"></i>
373
226
  </p>
374
227
  </a>
375
228
  <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>
229
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
230
+ <p>
231
+ Version 1
232
+ <i class="nav-arrow bi bi-chevron-right"></i>
233
+ </p>
380
234
  </a>
235
+ <ul class="nav nav-treeview">
236
+ <li class="nav-item"> <a href="./examples/login.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
237
+ <p>Login</p>
238
+ </a> </li>
239
+ <li class="nav-item"> <a href="./examples/register.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
240
+ <p>Register</p>
241
+ </a> </li>
242
+ </ul>
381
243
  </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>
244
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-box-arrow-in-right"></i>
245
+ <p>
246
+ Version 2
247
+ <i class="nav-arrow bi bi-chevron-right"></i>
248
+ </p>
386
249
  </a>
250
+ <ul class="nav nav-treeview">
251
+ <li class="nav-item"> <a href="./examples/login-v2.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
252
+ <p>Login</p>
253
+ </a> </li>
254
+ <li class="nav-item"> <a href="./examples/register-v2.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
255
+ <p>Register</p>
256
+ </a> </li>
257
+ </ul>
387
258
  </li>
259
+ <li class="nav-item"> <a href="./examples/lockscreen.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
260
+ <p>Lockscreen</p>
261
+ </a> </li>
388
262
  </ul>
389
263
  </li>
390
-
391
264
  <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>
265
+ <li class="nav-item"> <a href="./docs/introduction.html" class="nav-link"> <i class="nav-icon bi bi-download"></i>
395
266
  <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>
267
+ </a> </li>
268
+ <li class="nav-item"> <a href="./docs/layout.html" class="nav-link"> <i class="nav-icon bi bi-grip-horizontal"></i>
401
269
  <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>
270
+ </a> </li>
271
+ <li class="nav-item"> <a href="./docs/color-mode.html" class="nav-link"> <i class="nav-icon bi bi-star-half"></i>
407
272
  <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>
273
+ </a> </li>
274
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-ui-checks-grid"></i>
413
275
  <p>
414
276
  Components
415
- <i class="nav-arrow fa-solid fa-angle-right"></i>
277
+ <i class="nav-arrow bi bi-chevron-right"></i>
416
278
  </p>
417
279
  </a>
418
280
  <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>
281
+ <li class="nav-item"> <a href="./docs/components/main-header.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
422
282
  <p>Main Header</p>
423
- </a>
424
- </li>
283
+ </a> </li>
284
+ <li class="nav-item"> <a href="./docs/components/main-sidebar.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
285
+ <p>Main Sidebar</p>
286
+ </a> </li>
425
287
  </ul>
426
288
  </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>
289
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-filetype-js"></i>
290
+ <p>
291
+ Javascript
292
+ <i class="nav-arrow bi bi-chevron-right"></i>
293
+ </p>
431
294
  </a>
295
+ <ul class="nav nav-treeview">
296
+ <li class="nav-item"> <a href="./docs/javascript/treeview.html" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
297
+ <p>Treeview</p>
298
+ </a> </li>
299
+ </ul>
432
300
  </li>
433
-
301
+ <li class="nav-item"> <a href="./docs/browser-support.html" class="nav-link"> <i class="nav-icon bi bi-browser-edge"></i>
302
+ <p>Browser Support</p>
303
+ </a> </li>
304
+ <li class="nav-item"> <a href="./docs/how-to-contribute.html" class="nav-link"> <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
305
+ <p>How To Contribute</p>
306
+ </a> </li>
307
+ <li class="nav-item"> <a href="./docs/faq.html" class="nav-link"> <i class="nav-icon bi bi-question-circle-fill"></i>
308
+ <p>FAQ</p>
309
+ </a> </li>
310
+ <li class="nav-item"> <a href="./docs/license.html" class="nav-link"> <i class="nav-icon bi bi-patch-check-fill"></i>
311
+ <p>License</p>
312
+ </a> </li>
434
313
  <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>
314
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
438
315
  <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>
316
+ </a> </li>
317
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
444
318
  <p>
445
319
  Level 1
446
- <i class="nav-arrow fa-solid fa-angle-right"></i>
320
+ <i class="nav-arrow bi bi-chevron-right"></i>
447
321
  </p>
448
322
  </a>
449
323
  <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>
324
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
453
325
  <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>
326
+ </a> </li>
327
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
459
328
  <p>
460
329
  Level 2
461
- <i class="nav-arrow fa-solid fa-angle-right"></i>
330
+ <i class="nav-arrow bi bi-chevron-right"></i>
462
331
  </p>
463
332
  </a>
464
333
  <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>
334
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
468
335
  <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>
336
+ </a> </li>
337
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
474
338
  <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>
339
+ </a> </li>
340
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-record-circle-fill"></i>
480
341
  <p>Level 3</p>
481
- </a>
482
- </li>
342
+ </a> </li>
483
343
  </ul>
484
344
  </li>
485
- <li class="nav-item">
486
- <a href="javascript:;" class="nav-link">
487
- <i class="nav-icon fa-regular fa-circle"></i>
345
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle"></i>
488
346
  <p>Level 2</p>
489
- </a>
490
- </li>
347
+ </a> </li>
491
348
  </ul>
492
349
  </li>
493
- <li class="nav-item">
494
- <a href="javascript:;" class="nav-link">
495
- <i class="nav-icon fa-solid fa-circle"></i>
350
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle-fill"></i>
496
351
  <p>Level 1</p>
497
- </a>
498
- </li>
352
+ </a> </li>
499
353
  <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>
354
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-danger"></i>
503
355
  <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>
356
+ </a> </li>
357
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-warning"></i>
509
358
  <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>
359
+ </a> </li>
360
+ <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon bi bi-circle text-info"></i>
515
361
  <p>Informational</p>
516
- </a>
517
- </li>
518
- </ul>
362
+ </a> </li>
363
+ </ul> <!--end::Sidebar Menu-->
519
364
  </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">
365
+ </div> <!--end::Sidebar Wrapper-->
366
+ </aside> <!--end::Sidebar--> <!--begin::App Main-->
367
+ <main class="app-main"> <!--begin::App Content Header-->
368
+ <div class="app-content-header"> <!--begin::Container-->
369
+ <div class="container-fluid"> <!--begin::Row-->
527
370
  <div class="row">
528
371
  <div class="col-sm-6">
529
372
  <h3 class="mb-0">Dashboard v2</h3>
@@ -531,510 +374,304 @@
531
374
  <div class="col-sm-6">
532
375
  <ol class="breadcrumb float-sm-end">
533
376
  <li class="breadcrumb-item"><a href="#">Home</a></li>
534
- <li class="breadcrumb-item active" aria-current="page">Dashboard v2</li>
377
+ <li class="breadcrumb-item active" aria-current="page">
378
+ Dashboard v2
379
+ </li>
535
380
  </ol>
536
381
  </div>
537
- </div>
538
- </div>
382
+ </div> <!--end::Row-->
383
+ </div> <!--end::Container-->
539
384
  </div>
540
- <div class="app-content">
541
- <div class="container-fluid">
542
- <!-- Info boxes -->
385
+ <div class="app-content"> <!--begin::Container-->
386
+ <div class="container-fluid"> <!-- Info boxes -->
543
387
  <div class="row">
544
388
  <div class="col-12 col-sm-6 col-md-3">
545
- <div class="info-box">
546
- <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
547
-
548
- <div class="info-box-content">
549
- <span class="info-box-text">CPU Traffic</span>
550
- <span class="info-box-number">
389
+ <div class="info-box"> <span class="info-box-icon text-bg-primary shadow-sm"> <i class="bi bi-gear-fill"></i> </span>
390
+ <div class="info-box-content"> <span class="info-box-text">CPU Traffic</span> <span class="info-box-number">
551
391
  10
552
- <small>%</small>
553
- </span>
554
- </div>
555
- <!-- /.info-box-content -->
556
- </div>
557
- <!-- /.info-box -->
558
- </div>
559
- <!-- /.col -->
392
+ <small>%</small> </span> </div> <!-- /.info-box-content -->
393
+ </div> <!-- /.info-box -->
394
+ </div> <!-- /.col -->
560
395
  <div class="col-12 col-sm-6 col-md-3">
561
- <div class="info-box">
562
- <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
563
-
564
- <div class="info-box-content">
565
- <span class="info-box-text">Likes</span>
566
- <span class="info-box-number">41,410</span>
567
- </div>
568
- <!-- /.info-box-content -->
569
- </div>
570
- <!-- /.info-box -->
571
- </div>
572
- <!-- /.col -->
573
-
574
- <!-- fix for small devices only -->
575
- <!-- <div class="clearfix hidden-md-up"></div> -->
576
-
396
+ <div class="info-box"> <span class="info-box-icon text-bg-danger shadow-sm"> <i class="bi bi-hand-thumbs-up-fill"></i> </span>
397
+ <div class="info-box-content"> <span class="info-box-text">Likes</span> <span class="info-box-number">41,410</span> </div> <!-- /.info-box-content -->
398
+ </div> <!-- /.info-box -->
399
+ </div> <!-- /.col --> <!-- fix for small devices only --> <!-- <div class="clearfix hidden-md-up"></div> -->
577
400
  <div class="col-12 col-sm-6 col-md-3">
578
- <div class="info-box">
579
- <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
580
-
581
- <div class="info-box-content">
582
- <span class="info-box-text">Sales</span>
583
- <span class="info-box-number">760</span>
584
- </div>
585
- <!-- /.info-box-content -->
586
- </div>
587
- <!-- /.info-box -->
588
- </div>
589
- <!-- /.col -->
401
+ <div class="info-box"> <span class="info-box-icon text-bg-success shadow-sm"> <i class="bi bi-cart-fill"></i> </span>
402
+ <div class="info-box-content"> <span class="info-box-text">Sales</span> <span class="info-box-number">760</span> </div> <!-- /.info-box-content -->
403
+ </div> <!-- /.info-box -->
404
+ </div> <!-- /.col -->
590
405
  <div class="col-12 col-sm-6 col-md-3">
591
- <div class="info-box">
592
- <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
593
-
594
- <div class="info-box-content">
595
- <span class="info-box-text">New Members</span>
596
- <span class="info-box-number">2,000</span>
597
- </div>
598
- <!-- /.info-box-content -->
599
- </div>
600
- <!-- /.info-box -->
601
- </div>
602
- <!-- /.col -->
603
- </div>
604
- <!-- /.row -->
605
-
406
+ <div class="info-box"> <span class="info-box-icon text-bg-warning shadow-sm"> <i class="bi bi-people-fill"></i> </span>
407
+ <div class="info-box-content"> <span class="info-box-text">New Members</span> <span class="info-box-number">2,000</span> </div> <!-- /.info-box-content -->
408
+ </div> <!-- /.info-box -->
409
+ </div> <!-- /.col -->
410
+ </div> <!-- /.row --> <!--begin::Row-->
606
411
  <div class="row">
607
412
  <div class="col-md-12">
608
- <div class="card">
413
+ <div class="card mb-4">
609
414
  <div class="card-header">
610
415
  <h5 class="card-title">Monthly Recap Report</h5>
611
-
612
- <div class="card-tools">
613
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
614
- <i class="fa-solid fa-minus"></i>
615
- </button>
616
- <div class="btn-group">
617
- <button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown">
618
- <i class="fa-solid fa-wrench"></i>
619
- </button>
620
- <div class="dropdown-menu dropdown-menu-end" role="menu">
621
- <a href="#" class="dropdown-item">Action</a>
622
- <a href="#" class="dropdown-item">Another action</a>
623
- <a href="#" class="dropdown-item">Something else here</a>
624
- <a class="dropdown-divider"></a>
625
- <a href="#" class="dropdown-item">Separated link</a>
626
- </div>
627
- </div>
628
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
629
- <i class="fa-solid fa-times"></i>
630
- </button>
416
+ <div class="card-tools"> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button>
417
+ <div class="btn-group"> <button type="button" class="btn btn-tool dropdown-toggle" data-bs-toggle="dropdown"> <i class="bi bi-wrench"></i> </button>
418
+ <div class="dropdown-menu dropdown-menu-end" role="menu"> <a href="#" class="dropdown-item">Action</a> <a href="#" class="dropdown-item">Another action</a> <a href="#" class="dropdown-item">
419
+ Something else here
420
+ </a> <a class="dropdown-divider"></a> <a href="#" class="dropdown-item">Separated link</a> </div>
421
+ </div> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button>
631
422
  </div>
632
- </div>
633
- <!-- /.card-header -->
634
- <div class="card-body">
423
+ </div> <!-- /.card-header -->
424
+ <div class="card-body"> <!--begin::Row-->
635
425
  <div class="row">
636
426
  <div class="col-md-8">
637
- <p class="text-center">
638
- <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
639
- </p>
640
-
427
+ <p class="text-center"> <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong> </p>
641
428
  <div id="sales-chart"></div>
642
- </div>
643
- <!-- /.col -->
429
+ </div> <!-- /.col -->
644
430
  <div class="col-md-4">
645
- <p class="text-center">
646
- <strong>Goal Completion</strong>
647
- </p>
648
-
431
+ <p class="text-center"> <strong>Goal Completion</strong> </p>
649
432
  <div class="progress-group">
650
433
  Add Products to Cart
651
434
  <span class="float-end"><b>160</b>/200</span>
652
435
  <div class="progress progress-sm">
653
436
  <div class="progress-bar text-bg-primary" style="width: 80%"></div>
654
437
  </div>
655
- </div>
656
- <!-- /.progress-group -->
657
-
438
+ </div> <!-- /.progress-group -->
658
439
  <div class="progress-group">
659
440
  Complete Purchase
660
441
  <span class="float-end"><b>310</b>/400</span>
661
442
  <div class="progress progress-sm">
662
443
  <div class="progress-bar text-bg-danger" style="width: 75%"></div>
663
444
  </div>
664
- </div>
665
-
666
- <!-- /.progress-group -->
667
- <div class="progress-group">
668
- <span class="progress-text">Visit Premium Page</span>
669
- <span class="float-end"><b>480</b>/800</span>
445
+ </div> <!-- /.progress-group -->
446
+ <div class="progress-group"> <span class="progress-text">Visit Premium Page</span> <span class="float-end"><b>480</b>/800</span>
670
447
  <div class="progress progress-sm">
671
448
  <div class="progress-bar text-bg-success" style="width: 60%"></div>
672
449
  </div>
673
- </div>
674
-
675
- <!-- /.progress-group -->
450
+ </div> <!-- /.progress-group -->
676
451
  <div class="progress-group">
677
452
  Send Inquiries
678
453
  <span class="float-end"><b>250</b>/500</span>
679
454
  <div class="progress progress-sm">
680
455
  <div class="progress-bar text-bg-warning" style="width: 50%"></div>
681
456
  </div>
682
- </div>
683
- <!-- /.progress-group -->
684
- </div>
685
- <!-- /.col -->
686
- </div>
687
- <!-- /.row -->
688
- </div>
689
- <!-- ./card-body -->
690
- <div class="card-footer">
457
+ </div> <!-- /.progress-group -->
458
+ </div> <!-- /.col -->
459
+ </div> <!--end::Row-->
460
+ </div> <!-- ./card-body -->
461
+ <div class="card-footer"> <!--begin::Row-->
691
462
  <div class="row">
692
463
  <div class="col-md-3 col-6">
693
- <div class="text-center border-end">
694
- <span class="text-success"><i class="fa-solid fa-caret-up"></i> 17%</span>
695
- <h5 class="fw-bold mb-0">$35,210.43</h5>
696
- <span class="text-uppercase">TOTAL REVENUE</span>
464
+ <div class="text-center border-end"> <span class="text-success"> <i class="bi bi-caret-up-fill"></i> 17%
465
+ </span>
466
+ <h5 class="fw-bold mb-0">$35,210.43</h5> <span class="text-uppercase">TOTAL REVENUE</span>
697
467
  </div>
698
-
699
- </div>
700
-
701
- <!-- /.col -->
468
+ </div> <!-- /.col -->
702
469
  <div class="col-md-3 col-6">
703
- <div class="text-center border-end">
704
- <span class="text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
705
- <h5 class="fw-bold mb-0">$10,390.90</h5>
706
- <span class="text-uppercase">TOTAL COST</span>
470
+ <div class="text-center border-end"> <span class="text-info"> <i class="bi bi-caret-left-fill"></i> 0%
471
+ </span>
472
+ <h5 class="fw-bold mb-0">$10,390.90</h5> <span class="text-uppercase">TOTAL COST</span>
707
473
  </div>
708
-
709
- </div>
710
- <!-- /.col -->
474
+ </div> <!-- /.col -->
711
475
  <div class="col-md-3 col-6">
712
- <div class="text-center border-end">
713
- <span class="text-success"><i class="fa-solid fa-caret-up"></i> 20%</span>
714
- <h5 class="fw-bold mb-0">$24,813.53</h5>
715
- <span class="text-uppercase">TOTAL PROFIT</span>
476
+ <div class="text-center border-end"> <span class="text-success"> <i class="bi bi-caret-up-fill"></i> 20%
477
+ </span>
478
+ <h5 class="fw-bold mb-0">$24,813.53</h5> <span class="text-uppercase">TOTAL PROFIT</span>
716
479
  </div>
717
-
718
- </div>
719
- <!-- /.col -->
480
+ </div> <!-- /.col -->
720
481
  <div class="col-md-3 col-6">
721
- <div class="text-center">
722
- <span class="text-danger"><i class="fa-solid fa-caret-down"></i> 18%</span>
723
- <h5 class="fw-bold mb-0">1200</h5>
724
- <span class="text-uppercase">GOAL COMPLETIONS</span>
482
+ <div class="text-center"> <span class="text-danger"> <i class="bi bi-caret-down-fill"></i> 18%
483
+ </span>
484
+ <h5 class="fw-bold mb-0">1200</h5> <span class="text-uppercase">GOAL COMPLETIONS</span>
725
485
  </div>
726
-
727
486
  </div>
728
- </div>
729
- <!-- /.row -->
730
- </div>
731
- <!-- /.card-footer -->
732
- </div>
733
- <!-- /.card -->
734
- </div>
735
- <!-- /.col -->
736
- </div>
737
- <!-- /.row -->
738
-
739
- <!-- Main row -->
740
- <div class="row">
741
- <!-- Start col -->
742
- <div class="col-md-8">
743
- <div class="row">
744
- <div class="col-md-6">
745
- <!-- DIRECT CHAT -->
487
+ </div> <!--end::Row-->
488
+ </div> <!-- /.card-footer -->
489
+ </div> <!-- /.card -->
490
+ </div> <!-- /.col -->
491
+ </div> <!--end::Row--> <!--begin::Row-->
492
+ <div class="row"> <!-- Start col -->
493
+ <div class="col-md-8"> <!--begin::Row-->
494
+ <div class="row g-4 mb-4">
495
+ <div class="col-md-6"> <!-- DIRECT CHAT -->
746
496
  <div class="card direct-chat direct-chat-warning">
747
497
  <div class="card-header">
748
498
  <h3 class="card-title">Direct Chat</h3>
749
-
750
- <div class="card-tools">
751
- <span title="3 New Messages" class="badge text-bg-warning">3</span>
752
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
753
- <i class="fa-solid fa-minus"></i>
754
- </button>
755
- <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
756
- <i class="fa-solid fa-comments"></i>
757
- </button>
758
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
759
- <i class="fa-solid fa-times"></i>
760
- </button>
761
- </div>
762
- </div>
763
- <!-- /.card-header -->
764
- <div class="card-body">
765
- <!-- Conversations are loaded here -->
766
- <div class="direct-chat-messages">
767
- <!-- Message. Default to the start -->
499
+ <div class="card-tools"> <span title="3 New Messages" class="badge text-bg-warning">
500
+ 3
501
+ </span> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane"> <i class="bi bi-chat-text-fill"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
502
+ </div> <!-- /.card-header -->
503
+ <div class="card-body"> <!-- Conversations are loaded here -->
504
+ <div class="direct-chat-messages"> <!-- Message. Default to the start -->
768
505
  <div class="direct-chat-msg">
769
- <div class="direct-chat-infos clearfix">
770
- <span class="direct-chat-name float-start">Alexander Pierce</span>
771
- <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
772
- </div>
773
- <!-- /.direct-chat-infos -->
774
- <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image">
775
- <!-- /.direct-chat-img -->
506
+ <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-start">
507
+ Alexander Pierce
508
+ </span> <span class="direct-chat-timestamp float-end">
509
+ 23 Jan 2:00 pm
510
+ </span> </div> <!-- /.direct-chat-infos --> <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image"> <!-- /.direct-chat-img -->
776
511
  <div class="direct-chat-text">
777
- Is this template really for free? That's unbelievable!
778
- </div>
779
- <!-- /.direct-chat-text -->
780
- </div>
781
- <!-- /.direct-chat-msg -->
782
-
783
- <!-- Message to the end -->
512
+ Is this template really for free? That's
513
+ unbelievable!
514
+ </div> <!-- /.direct-chat-text -->
515
+ </div> <!-- /.direct-chat-msg --> <!-- Message to the end -->
784
516
  <div class="direct-chat-msg end">
785
- <div class="direct-chat-infos clearfix">
786
- <span class="direct-chat-name float-end">Sarah Bullock</span>
787
- <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
788
- </div>
789
- <!-- /.direct-chat-infos -->
790
- <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image">
791
- <!-- /.direct-chat-img -->
517
+ <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-end">
518
+ Sarah Bullock
519
+ </span> <span class="direct-chat-timestamp float-start">
520
+ 23 Jan 2:05 pm
521
+ </span> </div> <!-- /.direct-chat-infos --> <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image"> <!-- /.direct-chat-img -->
792
522
  <div class="direct-chat-text">
793
523
  You better believe it!
794
- </div>
795
- <!-- /.direct-chat-text -->
796
- </div>
797
- <!-- /.direct-chat-msg -->
798
-
799
- <!-- Message. Default to the start -->
524
+ </div> <!-- /.direct-chat-text -->
525
+ </div> <!-- /.direct-chat-msg --> <!-- Message. Default to the start -->
800
526
  <div class="direct-chat-msg">
801
- <div class="direct-chat-infos clearfix">
802
- <span class="direct-chat-name float-start">Alexander Pierce</span>
803
- <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
804
- </div>
805
- <!-- /.direct-chat-infos -->
806
- <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image">
807
- <!-- /.direct-chat-img -->
527
+ <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-start">
528
+ Alexander Pierce
529
+ </span> <span class="direct-chat-timestamp float-end">
530
+ 23 Jan 5:37 pm
531
+ </span> </div> <!-- /.direct-chat-infos --> <img class="direct-chat-img" src="../../dist/assets/img/user1-128x128.jpg" alt="message user image"> <!-- /.direct-chat-img -->
808
532
  <div class="direct-chat-text">
809
- Working with AdminLTE on a great new app! Wanna join?
810
- </div>
811
- <!-- /.direct-chat-text -->
812
- </div>
813
- <!-- /.direct-chat-msg -->
814
-
815
- <!-- Message to the end -->
533
+ Working with AdminLTE on a great new app! Wanna
534
+ join?
535
+ </div> <!-- /.direct-chat-text -->
536
+ </div> <!-- /.direct-chat-msg --> <!-- Message to the end -->
816
537
  <div class="direct-chat-msg end">
817
- <div class="direct-chat-infos clearfix">
818
- <span class="direct-chat-name float-end">Sarah Bullock</span>
819
- <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
820
- </div>
821
- <!-- /.direct-chat-infos -->
822
- <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image">
823
- <!-- /.direct-chat-img -->
824
- <div class="direct-chat-text">
825
- I would love to.
826
- </div>
827
- <!-- /.direct-chat-text -->
828
- </div>
829
- <!-- /.direct-chat-msg -->
830
-
831
- </div>
832
- <!-- /.direct-chat-messages-->
833
-
834
- <!-- Contacts are loaded here -->
538
+ <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-end">
539
+ Sarah Bullock
540
+ </span> <span class="direct-chat-timestamp float-start">
541
+ 23 Jan 6:10 pm
542
+ </span> </div> <!-- /.direct-chat-infos --> <img class="direct-chat-img" src="../../dist/assets/img/user3-128x128.jpg" alt="message user image"> <!-- /.direct-chat-img -->
543
+ <div class="direct-chat-text">I would love to.</div> <!-- /.direct-chat-text -->
544
+ </div> <!-- /.direct-chat-msg -->
545
+ </div> <!-- /.direct-chat-messages--> <!-- Contacts are loaded here -->
835
546
  <div class="direct-chat-contacts">
836
547
  <ul class="contacts-list">
837
- <li>
838
- <a href="#">
839
- <img class="contacts-list-img" src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar">
840
-
841
- <div class="contacts-list-info">
842
- <span class="contacts-list-name">
548
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user1-128x128.jpg" alt="User Avatar">
549
+ <div class="contacts-list-info"> <span class="contacts-list-name">
843
550
  Count Dracula
844
- <small class="contacts-list-date float-end">2/28/2023</small>
845
- </span>
846
- <span class="contacts-list-msg">How have you been? I was...</span>
847
- </div>
848
- <!-- /.contacts-list-info -->
849
- </a>
850
- </li>
851
- <!-- End Contact Item -->
852
- <li>
853
- <a href="#">
854
- <img class="contacts-list-img" src="../../dist/assets/img/user7-128x128.jpg" alt="User Avatar">
855
-
856
- <div class="contacts-list-info">
857
- <span class="contacts-list-name">
551
+ <small class="contacts-list-date float-end">
552
+ 2/28/2023
553
+ </small> </span> <span class="contacts-list-msg">
554
+ How have you been? I was...
555
+ </span> </div> <!-- /.contacts-list-info -->
556
+ </a> </li> <!-- End Contact Item -->
557
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user7-128x128.jpg" alt="User Avatar">
558
+ <div class="contacts-list-info"> <span class="contacts-list-name">
858
559
  Sarah Doe
859
- <small class="contacts-list-date float-end">2/23/2023</small>
860
- </span>
861
- <span class="contacts-list-msg">I will be waiting for...</span>
862
- </div>
863
- <!-- /.contacts-list-info -->
864
- </a>
865
- </li>
866
- <!-- End Contact Item -->
867
- <li>
868
- <a href="#">
869
- <img class="contacts-list-img" src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar">
870
-
871
- <div class="contacts-list-info">
872
- <span class="contacts-list-name">
560
+ <small class="contacts-list-date float-end">
561
+ 2/23/2023
562
+ </small> </span> <span class="contacts-list-msg">
563
+ I will be waiting for...
564
+ </span> </div> <!-- /.contacts-list-info -->
565
+ </a> </li> <!-- End Contact Item -->
566
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user3-128x128.jpg" alt="User Avatar">
567
+ <div class="contacts-list-info"> <span class="contacts-list-name">
873
568
  Nadia Jolie
874
- <small class="contacts-list-date float-end">2/20/2023</small>
875
- </span>
876
- <span class="contacts-list-msg">I'll call you back at...</span>
877
- </div>
878
- <!-- /.contacts-list-info -->
879
- </a>
880
- </li>
881
- <!-- End Contact Item -->
882
- <li>
883
- <a href="#">
884
- <img class="contacts-list-img" src="../../dist/assets/img/user5-128x128.jpg" alt="User Avatar">
885
-
886
- <div class="contacts-list-info">
887
- <span class="contacts-list-name">
569
+ <small class="contacts-list-date float-end">
570
+ 2/20/2023
571
+ </small> </span> <span class="contacts-list-msg">
572
+ I'll call you back at...
573
+ </span> </div> <!-- /.contacts-list-info -->
574
+ </a> </li> <!-- End Contact Item -->
575
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user5-128x128.jpg" alt="User Avatar">
576
+ <div class="contacts-list-info"> <span class="contacts-list-name">
888
577
  Nora S. Vans
889
- <small class="contacts-list-date float-end">2/10/2023</small>
890
- </span>
891
- <span class="contacts-list-msg">Where is your new...</span>
892
- </div>
893
- <!-- /.contacts-list-info -->
894
- </a>
895
- </li>
896
- <!-- End Contact Item -->
897
- <li>
898
- <a href="#">
899
- <img class="contacts-list-img" src="../../dist/assets/img/user6-128x128.jpg" alt="User Avatar">
900
-
901
- <div class="contacts-list-info">
902
- <span class="contacts-list-name">
578
+ <small class="contacts-list-date float-end">
579
+ 2/10/2023
580
+ </small> </span> <span class="contacts-list-msg">
581
+ Where is your new...
582
+ </span> </div> <!-- /.contacts-list-info -->
583
+ </a> </li> <!-- End Contact Item -->
584
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user6-128x128.jpg" alt="User Avatar">
585
+ <div class="contacts-list-info"> <span class="contacts-list-name">
903
586
  John K.
904
- <small class="contacts-list-date float-end">1/27/2023</small>
905
- </span>
906
- <span class="contacts-list-msg">Can I take a look at...</span>
907
- </div>
908
- <!-- /.contacts-list-info -->
909
- </a>
910
- </li>
911
- <!-- End Contact Item -->
912
- <li>
913
- <a href="#">
914
- <img class="contacts-list-img" src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar">
915
-
916
- <div class="contacts-list-info">
917
- <span class="contacts-list-name">
587
+ <small class="contacts-list-date float-end">
588
+ 1/27/2023
589
+ </small> </span> <span class="contacts-list-msg">
590
+ Can I take a look at...
591
+ </span> </div> <!-- /.contacts-list-info -->
592
+ </a> </li> <!-- End Contact Item -->
593
+ <li> <a href="#"> <img class="contacts-list-img" src="../../dist/assets/img/user8-128x128.jpg" alt="User Avatar">
594
+ <div class="contacts-list-info"> <span class="contacts-list-name">
918
595
  Kenneth M.
919
- <small class="contacts-list-date float-end">1/4/2023</small>
920
- </span>
921
- <span class="contacts-list-msg">Never mind I found...</span>
922
- </div>
923
- <!-- /.contacts-list-info -->
924
- </a>
925
- </li>
926
- <!-- End Contact Item -->
927
- </ul>
928
- <!-- /.contacts-list -->
929
- </div>
930
- <!-- /.direct-chat-pane -->
931
- </div>
932
- <!-- /.card-body -->
596
+ <small class="contacts-list-date float-end">
597
+ 1/4/2023
598
+ </small> </span> <span class="contacts-list-msg">
599
+ Never mind I found...
600
+ </span> </div> <!-- /.contacts-list-info -->
601
+ </a> </li> <!-- End Contact Item -->
602
+ </ul> <!-- /.contacts-list -->
603
+ </div> <!-- /.direct-chat-pane -->
604
+ </div> <!-- /.card-body -->
933
605
  <div class="card-footer">
934
606
  <form action="#" method="post">
935
- <div class="input-group">
936
- <input type="text" name="message" placeholder="Type Message ..." class="form-control">
937
- <span class="input-group-append">
938
- <button type="button" class="btn btn-warning">Send</button>
939
- </span>
940
- </div>
607
+ <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-warning">
608
+ Send
609
+ </button> </span> </div>
941
610
  </form>
942
- </div>
943
- <!-- /.card-footer-->
944
- </div>
945
- <!-- /.direct-chat -->
946
- </div>
947
- <!-- /.col -->
948
-
949
- <div class="col-md-6">
950
- <!-- USERS LIST -->
611
+ </div> <!-- /.card-footer-->
612
+ </div> <!-- /.direct-chat -->
613
+ </div> <!-- /.col -->
614
+ <div class="col-md-6"> <!-- USERS LIST -->
951
615
  <div class="card">
952
616
  <div class="card-header">
953
617
  <h3 class="card-title">Latest Members</h3>
954
-
955
- <div class="card-tools">
956
- <span class="badge text-bg-danger">8 New Members</span>
957
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
958
- <i class="fa-solid fa-minus"></i>
959
- </button>
960
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
961
- <i class="fa-solid fa-times"></i>
962
- </button>
963
- </div>
964
- </div>
965
- <!-- /.card-header -->
618
+ <div class="card-tools"> <span class="badge text-bg-danger">
619
+ 8 New Members
620
+ </span> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
621
+ </div> <!-- /.card-header -->
966
622
  <div class="card-body p-0">
967
623
  <div class="row text-center m-1">
968
- <div class="col-3 p-2">
969
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user1-128x128.jpg" alt="User Image">
970
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander Pierce</a>
624
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user1-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
625
+ Alexander Pierce
626
+ </a>
971
627
  <div class="fs-8">Today</div>
972
628
  </div>
973
- <div class="col-3 p-2">
974
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user1-128x128.jpg" alt="User Image">
975
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Norman</a>
629
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user1-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
630
+ Norman
631
+ </a>
976
632
  <div class="fs-8">Yesterday</div>
977
633
  </div>
978
- <div class="col-3 p-2">
979
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user7-128x128.jpg" alt="User Image">
980
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Jane</a>
634
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user7-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
635
+ Jane
636
+ </a>
981
637
  <div class="fs-8">12 Jan</div>
982
638
  </div>
983
- <div class="col-3 p-2">
984
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user6-128x128.jpg" alt="User Image">
985
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">John</a>
639
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user6-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
640
+ John
641
+ </a>
986
642
  <div class="fs-8">12 Jan</div>
987
643
  </div>
988
- <div class="col-3 p-2">
989
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user2-160x160.jpg" alt="User Image">
990
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander</a>
644
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user2-160x160.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
645
+ Alexander
646
+ </a>
991
647
  <div class="fs-8">13 Jan</div>
992
648
  </div>
993
- <div class="col-3 p-2">
994
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user5-128x128.jpg" alt="User Image">
995
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Sarah</a>
649
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user5-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
650
+ Sarah
651
+ </a>
996
652
  <div class="fs-8">14 Jan</div>
997
653
  </div>
998
- <div class="col-3 p-2">
999
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user4-128x128.jpg" alt="User Image">
1000
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nora</a>
654
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user4-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
655
+ Nora
656
+ </a>
1001
657
  <div class="fs-8">15 Jan</div>
1002
658
  </div>
1003
- <div class="col-3 p-2">
1004
- <img class="img-fluid rounded-circle" src="../../dist/assets/img/user3-128x128.jpg" alt="User Image">
1005
- <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nadia</a>
659
+ <div class="col-3 p-2"> <img class="img-fluid rounded-circle" src="../../dist/assets/img/user3-128x128.jpg" alt="User Image"> <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">
660
+ Nadia
661
+ </a>
1006
662
  <div class="fs-8">15 Jan</div>
1007
663
  </div>
1008
- </div>
1009
- <!-- /.users-list -->
1010
- </div>
1011
- <!-- /.card-body -->
1012
- <div class="card-footer text-center">
1013
- <a href="javascript:">View All Users</a>
1014
- </div>
1015
- <!-- /.card-footer -->
1016
- </div>
1017
- <!-- /.card -->
1018
- </div>
1019
- <!-- /.col -->
1020
- </div>
1021
- <!-- /.row -->
1022
-
1023
- <!-- TABLE: LATEST ORDERS -->
664
+ </div> <!-- /.users-list -->
665
+ </div> <!-- /.card-body -->
666
+ <div class="card-footer text-center"> <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a> </div> <!-- /.card-footer -->
667
+ </div> <!-- /.card -->
668
+ </div> <!-- /.col -->
669
+ </div> <!--end::Row--> <!--begin::Latest Order Widget-->
1024
670
  <div class="card">
1025
671
  <div class="card-header">
1026
672
  <h3 class="card-title">Latest Orders</h3>
1027
-
1028
- <div class="card-tools">
1029
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1030
- <i class="fa-solid fa-minus"></i>
1031
- </button>
1032
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1033
- <i class="fa-solid fa-times"></i>
1034
- </button>
1035
- </div>
1036
- </div>
1037
- <!-- /.card-header -->
673
+ <div class="card-tools"> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
674
+ </div> <!-- /.card-header -->
1038
675
  <div class="card-body p-0">
1039
676
  <div class="table-responsive">
1040
677
  <table class="table m-0">
@@ -1048,318 +685,225 @@
1048
685
  </thead>
1049
686
  <tbody>
1050
687
  <tr>
1051
- <td><a href="pages/examples/invoice.html">OR9842</a></td>
688
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a> </td>
1052
689
  <td>Call of Duty IV</td>
1053
- <td><span class="badge text-bg-success">Shipped</span></td>
690
+ <td> <span class="badge text-bg-success">
691
+ Shipped
692
+ </span> </td>
1054
693
  <td>
1055
- <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
694
+ <div id="table-sparkline-1"></div>
1056
695
  </td>
1057
696
  </tr>
1058
697
  <tr>
1059
- <td><a href="pages/examples/invoice.html">OR1848</a></td>
698
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a> </td>
1060
699
  <td>Samsung Smart TV</td>
1061
- <td><span class="badge text-bg-warning">Pending</span></td>
700
+ <td> <span class="badge text-bg-warning">Pending</span> </td>
1062
701
  <td>
1063
- <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
702
+ <div id="table-sparkline-2"></div>
1064
703
  </td>
1065
704
  </tr>
1066
705
  <tr>
1067
- <td><a href="pages/examples/invoice.html">OR7429</a></td>
706
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a> </td>
1068
707
  <td>iPhone 6 Plus</td>
1069
- <td><span class="badge text-bg-danger">Delivered</span></td>
708
+ <td> <span class="badge text-bg-danger">
709
+ Delivered
710
+ </span> </td>
1070
711
  <td>
1071
- <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
712
+ <div id="table-sparkline-3"></div>
1072
713
  </td>
1073
714
  </tr>
1074
715
  <tr>
1075
- <td><a href="pages/examples/invoice.html">OR7429</a></td>
716
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a> </td>
1076
717
  <td>Samsung Smart TV</td>
1077
- <td><span class="badge text-bg-info">Processing</span></td>
718
+ <td> <span class="badge text-bg-info">Processing</span> </td>
1078
719
  <td>
1079
- <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
720
+ <div id="table-sparkline-4"></div>
1080
721
  </td>
1081
722
  </tr>
1082
723
  <tr>
1083
- <td><a href="pages/examples/invoice.html">OR1848</a></td>
724
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a> </td>
1084
725
  <td>Samsung Smart TV</td>
1085
- <td><span class="badge text-bg-warning">Pending</span></td>
726
+ <td> <span class="badge text-bg-warning">Pending</span> </td>
1086
727
  <td>
1087
- <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
728
+ <div id="table-sparkline-5"></div>
1088
729
  </td>
1089
730
  </tr>
1090
731
  <tr>
1091
- <td><a href="pages/examples/invoice.html">OR7429</a></td>
732
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a> </td>
1092
733
  <td>iPhone 6 Plus</td>
1093
- <td><span class="badge text-bg-danger">Delivered</span></td>
734
+ <td> <span class="badge text-bg-danger">
735
+ Delivered
736
+ </span> </td>
1094
737
  <td>
1095
- <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
738
+ <div id="table-sparkline-6"></div>
1096
739
  </td>
1097
740
  </tr>
1098
741
  <tr>
1099
- <td><a href="pages/examples/invoice.html">OR9842</a></td>
742
+ <td> <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a> </td>
1100
743
  <td>Call of Duty IV</td>
1101
- <td><span class="badge text-bg-success">Shipped</span></td>
744
+ <td> <span class="badge text-bg-success">Shipped</span> </td>
1102
745
  <td>
1103
- <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
746
+ <div id="table-sparkline-7"></div>
1104
747
  </td>
1105
748
  </tr>
1106
749
  </tbody>
1107
750
  </table>
1108
- </div>
1109
- <!-- /.table-responsive -->
1110
- </div>
1111
- <!-- /.card-body -->
1112
- <div class="card-footer clearfix">
1113
- <a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">Place New Order</a>
1114
- <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">View All Orders</a>
1115
- </div>
1116
- <!-- /.card-footer -->
1117
- </div>
1118
- <!-- /.card -->
1119
- </div>
1120
- <!-- /.col -->
1121
-
1122
- <div class="col-md-4">
1123
- <!-- Info Boxes Style 2 -->
1124
- <div class="info-box mb-3 text-bg-warning">
1125
- <span class="info-box-icon"><i class="fa-solid fa-tag"></i></span>
1126
-
1127
- <div class="info-box-content">
1128
- <span class="info-box-text">Inventory</span>
1129
- <span class="info-box-number">5,200</span>
1130
- </div>
1131
- <!-- /.info-box-content -->
1132
- </div>
1133
- <!-- /.info-box -->
1134
- <div class="info-box mb-3 text-bg-success">
1135
- <span class="info-box-icon"><i class="fa-regular fa-heart"></i></span>
1136
-
1137
- <div class="info-box-content">
1138
- <span class="info-box-text">Mentions</span>
1139
- <span class="info-box-number">92,050</span>
1140
- </div>
1141
- <!-- /.info-box-content -->
1142
- </div>
1143
- <!-- /.info-box -->
1144
- <div class="info-box mb-3 text-bg-danger">
1145
- <span class="info-box-icon"><i class="fa-solid fa-cloud-download-alt"></i></span>
1146
-
1147
- <div class="info-box-content">
1148
- <span class="info-box-text">Downloads</span>
1149
- <span class="info-box-number">114,381</span>
1150
- </div>
1151
- <!-- /.info-box-content -->
1152
- </div>
1153
- <!-- /.info-box -->
1154
- <div class="info-box mb-3 text-bg-info">
1155
- <span class="info-box-icon"><i class="fa-regular fa-comment"></i></span>
1156
-
1157
- <div class="info-box-content">
1158
- <span class="info-box-text">Direct Messages</span>
1159
- <span class="info-box-number">163,921</span>
1160
- </div>
1161
- <!-- /.info-box-content -->
1162
- </div>
1163
- <!-- /.info-box -->
1164
-
1165
- <div class="card">
751
+ </div> <!-- /.table-responsive -->
752
+ </div> <!-- /.card-body -->
753
+ <div class="card-footer clearfix"> <a href="javascript:void(0)" class="btn btn-sm btn-primary float-start">
754
+ Place New Order
755
+ </a> <a href="javascript:void(0)" class="btn btn-sm btn-secondary float-end">
756
+ View All Orders
757
+ </a> </div> <!-- /.card-footer -->
758
+ </div> <!-- /.card -->
759
+ </div> <!-- /.col -->
760
+ <div class="col-md-4"> <!-- Info Boxes Style 2 -->
761
+ <div class="info-box mb-3 text-bg-warning"> <span class="info-box-icon"> <i class="bi bi-tag-fill"></i> </span>
762
+ <div class="info-box-content"> <span class="info-box-text">Inventory</span> <span class="info-box-number">5,200</span> </div> <!-- /.info-box-content -->
763
+ </div> <!-- /.info-box -->
764
+ <div class="info-box mb-3 text-bg-success"> <span class="info-box-icon"> <i class="bi bi-heart-fill"></i> </span>
765
+ <div class="info-box-content"> <span class="info-box-text">Mentions</span> <span class="info-box-number">92,050</span> </div> <!-- /.info-box-content -->
766
+ </div> <!-- /.info-box -->
767
+ <div class="info-box mb-3 text-bg-danger"> <span class="info-box-icon"> <i class="bi bi-cloud-download"></i> </span>
768
+ <div class="info-box-content"> <span class="info-box-text">Downloads</span> <span class="info-box-number">114,381</span> </div> <!-- /.info-box-content -->
769
+ </div> <!-- /.info-box -->
770
+ <div class="info-box mb-3 text-bg-info"> <span class="info-box-icon"> <i class="bi bi-chat-fill"></i> </span>
771
+ <div class="info-box-content"> <span class="info-box-text">Direct Messages</span> <span class="info-box-number">163,921</span> </div> <!-- /.info-box-content -->
772
+ </div> <!-- /.info-box -->
773
+ <div class="card mb-4">
1166
774
  <div class="card-header">
1167
775
  <h3 class="card-title">Browser Usage</h3>
1168
-
1169
- <div class="card-tools">
1170
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1171
- <i class="fa-solid fa-minus"></i>
1172
- </button>
1173
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1174
- <i class="fa-solid fa-times"></i>
1175
- </button>
1176
- </div>
1177
- </div>
1178
- <!-- /.card-header -->
1179
- <div class="card-body">
776
+ <div class="card-tools"> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
777
+ </div> <!-- /.card-header -->
778
+ <div class="card-body"> <!--begin::Row-->
1180
779
  <div class="row">
1181
780
  <div class="col-12">
1182
781
  <div id="pie-chart"></div>
1183
- </div>
1184
- <!-- /.col -->
1185
- </div>
1186
- <!-- /.row -->
1187
- </div>
1188
- <!-- /.card-body -->
782
+ </div> <!-- /.col -->
783
+ </div> <!--end::Row-->
784
+ </div> <!-- /.card-body -->
1189
785
  <div class="card-footer p-0">
1190
786
  <ul class="nav nav-pills flex-column">
1191
- <li class="nav-item">
1192
- <a href="#" class="nav-link">
787
+ <li class="nav-item"> <a href="#" class="nav-link">
1193
788
  United States of America
1194
- <span class="float-end text-danger">
1195
- <i class="fa-solid fa-arrow-down fs-7"></i>
1196
- 12%</span>
1197
- </a>
1198
- </li>
1199
- <li class="nav-item">
1200
- <a href="#" class="nav-link">
789
+ <span class="float-end text-danger"> <i class="bi bi-arrow-down fs-7"></i>
790
+ 12%
791
+ </span> </a> </li>
792
+ <li class="nav-item"> <a href="#" class="nav-link">
1201
793
  India
1202
- <span class="float-end text-success">
1203
- <i class="fa-solid fa-arrow-up fs-7"></i> 4%
1204
- </span>
1205
- </a>
1206
- </li>
1207
- <li class="nav-item">
1208
- <a href="#" class="nav-link">
794
+ <span class="float-end text-success"> <i class="bi bi-arrow-up fs-7"></i> 4%
795
+ </span> </a> </li>
796
+ <li class="nav-item"> <a href="#" class="nav-link">
1209
797
  China
1210
- <span class="float-end text-info">
1211
- <i class="fa-solid fa-arrow-left fs-7"></i> 0%
1212
- </span>
1213
- </a>
1214
- </li>
798
+ <span class="float-end text-info"> <i class="bi bi-arrow-left fs-7"></i> 0%
799
+ </span> </a> </li>
1215
800
  </ul>
1216
- </div>
1217
- <!-- /.footer -->
1218
- </div>
1219
- <!-- /.card -->
1220
-
1221
- <!-- PRODUCT LIST -->
801
+ </div> <!-- /.footer -->
802
+ </div> <!-- /.card --> <!-- PRODUCT LIST -->
1222
803
  <div class="card">
1223
804
  <div class="card-header">
1224
805
  <h3 class="card-title">Recently Added Products</h3>
1225
-
1226
- <div class="card-tools">
1227
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
1228
- <i class="fa-solid fa-minus"></i>
1229
- </button>
1230
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
1231
- <i class="fa-solid fa-times"></i>
1232
- </button>
1233
- </div>
1234
- </div>
1235
- <!-- /.card-header -->
806
+ <div class="card-tools"> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
807
+ </div> <!-- /.card-header -->
1236
808
  <div class="card-body p-0">
1237
809
  <div class="px-2">
1238
810
  <div class="d-flex border-top py-2 px-1">
1239
- <div class="col-2">
1240
- <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1241
- </div>
1242
- <div class="col-10">
1243
- <a href="javascript:void(0)" class="fw-bold">Samsung TV
1244
- <span class="badge text-bg-warning float-end">$1800</span></a>
811
+ <div class="col-2"> <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50"> </div>
812
+ <div class="col-10"> <a href="javascript:void(0)" class="fw-bold">
813
+ Samsung TV
814
+ <span class="badge text-bg-warning float-end">
815
+ $1800
816
+ </span> </a>
1245
817
  <div class="text-truncate">
1246
818
  Samsung 32" 1080p 60Hz LED Smart HDTV.
1247
819
  </div>
1248
820
  </div>
1249
- </div>
1250
- <!-- /.item -->
821
+ </div> <!-- /.item -->
1251
822
  <div class="d-flex border-top py-2 px-1">
1252
- <div class="col-2">
1253
- <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1254
- </div>
1255
- <div class="col-10">
1256
- <a href="javascript:void(0)" class="fw-bold">Bicycle
1257
- <span class="badge text-bg-info float-end">$700</span></a>
823
+ <div class="col-2"> <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50"> </div>
824
+ <div class="col-10"> <a href="javascript:void(0)" class="fw-bold">
825
+ Bicycle
826
+ <span class="badge text-bg-info float-end">
827
+ $700
828
+ </span> </a>
1258
829
  <div class="text-truncate">
1259
830
  26" Mongoose Dolomite Men's 7-speed, Navy Blue.
1260
831
  </div>
1261
832
  </div>
1262
- </div>
1263
- <!-- /.item -->
833
+ </div> <!-- /.item -->
1264
834
  <div class="d-flex border-top py-2 px-1">
1265
- <div class="col-2">
1266
- <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1267
- </div>
1268
- <div class="col-10">
1269
- <a href="javascript:void(0)" class="fw-bold">
1270
- Xbox One <span class="badge text-bg-danger float-end">
835
+ <div class="col-2"> <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50"> </div>
836
+ <div class="col-10"> <a href="javascript:void(0)" class="fw-bold">
837
+ Xbox One
838
+ <span class="badge text-bg-danger float-end">
1271
839
  $350
1272
- </span>
1273
- </a>
840
+ </span> </a>
1274
841
  <div class="text-truncate">
1275
- Xbox One Console Bundle with Halo Master Chief Collection.
842
+ Xbox One Console Bundle with Halo Master Chief
843
+ Collection.
1276
844
  </div>
1277
845
  </div>
1278
- </div>
1279
- <!-- /.item -->
846
+ </div> <!-- /.item -->
1280
847
  <div class="d-flex border-top py-2 px-1">
1281
- <div class="col-2">
1282
- <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
1283
- </div>
1284
- <div class="col-10">
1285
- <a href="javascript:void(0)" class="fw-bold">PlayStation 4
1286
- <span class="badge text-bg-success float-end">$399</span></a>
848
+ <div class="col-2"> <img src="../../dist/assets/img/default-150x150.png" alt="Product Image" class="img-size-50"> </div>
849
+ <div class="col-10"> <a href="javascript:void(0)" class="fw-bold">
850
+ PlayStation 4
851
+ <span class="badge text-bg-success float-end">
852
+ $399
853
+ </span> </a>
1287
854
  <div class="text-truncate">
1288
855
  PlayStation 4 500GB Console (PS4)
1289
856
  </div>
1290
857
  </div>
1291
- </div>
1292
- <!-- /.item -->
858
+ </div> <!-- /.item -->
1293
859
  </div>
1294
- </div>
1295
- <!-- /.card-body -->
1296
- <div class="card-footer text-center">
1297
- <a href="javascript:void(0)" class="uppercase">View All Products</a>
1298
- </div>
1299
- <!-- /.card-footer -->
1300
- </div>
1301
- <!-- /.card -->
1302
- </div>
1303
- <!-- /.col -->
1304
- </div>
1305
- <!-- /.row -->
1306
- </div><!-- /.container-fluid -->
1307
- </div>
1308
- </main>
1309
- <!-- /.app-content -->
1310
-
1311
- <!-- Main Footer -->
1312
- <footer class="app-footer">
1313
- <!-- To the end -->
1314
- <div class="float-end d-none d-sm-inline">
1315
- Anything you want
1316
- </div>
1317
- <!-- Default to the start -->
1318
- <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
1319
- </footer>
1320
- </div>
1321
- <!-- ./app-wrapper -->
1322
-
1323
- <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
1324
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
1325
-
1326
- <!-- @popperjs for Bootstrap 5 -->
1327
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
1328
-
1329
- <!-- Bootstrap 5 -->
1330
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
1331
-
1332
- <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
1333
- <script src="../../dist/js/adminlte.js"></script>
1334
-
1335
- <!-- OPTIONAL SCRIPTS -->
860
+ </div> <!-- /.card-body -->
861
+ <div class="card-footer text-center"> <a href="javascript:void(0)" class="uppercase">
862
+ View All Products
863
+ </a> </div> <!-- /.card-footer -->
864
+ </div> <!-- /.card -->
865
+ </div> <!-- /.col -->
866
+ </div> <!--end::Row-->
867
+ </div> <!--end::Container-->
868
+ </div> <!--end::App Content-->
869
+ </main> <!--end::App Main--> <!--begin::Footer-->
870
+ <footer class="app-footer"> <!--begin::To the end-->
871
+ <div class="float-end d-none d-sm-inline">Anything you want</div> <!--end::To the end--> <!--begin::Copyright--> <strong>
872
+ Copyright &copy; 2014-2024&nbsp;
873
+ <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
874
+ </strong>
875
+ All rights reserved.
876
+ <!--end::Copyright-->
877
+ </footer> <!--end::Footer-->
878
+ </div> <!--end::App Wrapper--> <!--begin::Script--> <!--begin::Third Party Plugin(OverlayScrollbars)-->
879
+ <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script> <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
880
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script> <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
881
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script> <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
882
+ <script src="../../dist/js/adminlte.js"></script> <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1336
883
  <script>
1337
- const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
884
+ const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
1338
885
  const Default = {
1339
- scrollbarTheme: 'os-theme-light',
1340
- scrollbarAutoHide: 'leave',
1341
- scrollbarClickScroll: true
1342
- }
1343
-
886
+ scrollbarTheme: "os-theme-light",
887
+ scrollbarAutoHide: "leave",
888
+ scrollbarClickScroll: true,
889
+ };
1344
890
  document.addEventListener("DOMContentLoaded", function() {
1345
- const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
1346
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
891
+ const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
892
+ if (
893
+ sidebarWrapper &&
894
+ typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
895
+ ) {
1347
896
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1348
897
  scrollbars: {
1349
898
  theme: Default.scrollbarTheme,
1350
899
  autoHide: Default.scrollbarAutoHide,
1351
- clickScroll: Default.scrollbarClickScroll
1352
- }
1353
- })
900
+ clickScroll: Default.scrollbarClickScroll,
901
+ },
902
+ });
1354
903
  }
1355
- })
1356
- </script>
1357
-
1358
- <!-- OPTIONAL SCRIPTS -->
1359
-
1360
- <!-- apexcharts -->
904
+ });
905
+ </script> <!--end::OverlayScrollbars Configure--> <!-- OPTIONAL SCRIPTS --> <!-- apexcharts -->
1361
906
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
1362
-
1363
907
  <script>
1364
908
  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
1365
909
  // IT'S ALL JUST JUNK FOR DEMO
@@ -1374,79 +918,166 @@
1374
918
  // - MONTHLY SALES CHART -
1375
919
  //-----------------------
1376
920
 
1377
- var sales_chart_options = {
921
+ const sales_chart_options = {
1378
922
  series: [{
1379
- name: 'Digital Goods',
1380
- data: [28, 48, 40, 19, 86, 27, 90]
1381
- }, {
1382
- name: 'Electronics',
1383
- data: [65, 59, 80, 81, 56, 55, 40]
1384
- }],
923
+ name: "Digital Goods",
924
+ data: [28, 48, 40, 19, 86, 27, 90],
925
+ },
926
+ {
927
+ name: "Electronics",
928
+ data: [65, 59, 80, 81, 56, 55, 40],
929
+ },
930
+ ],
1385
931
  chart: {
1386
932
  height: 180,
1387
- type: 'area',
933
+ type: "area",
1388
934
  toolbar: {
1389
935
  show: false,
1390
936
  },
1391
937
  },
1392
938
  legend: {
1393
- show: false
939
+ show: false,
1394
940
  },
1395
- colors: ['#0d6efd', '#20c997'],
941
+ colors: ["#0d6efd", "#20c997"],
1396
942
  dataLabels: {
1397
943
  enabled: false,
1398
944
  },
1399
945
  stroke: {
1400
- curve: 'smooth'
946
+ curve: "smooth",
1401
947
  },
1402
948
  xaxis: {
1403
- type: 'datetime',
1404
- categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
949
+ type: "datetime",
950
+ categories: [
951
+ "2023-01-01",
952
+ "2023-02-01",
953
+ "2023-03-01",
954
+ "2023-04-01",
955
+ "2023-05-01",
956
+ "2023-06-01",
957
+ "2023-07-01",
958
+ ],
1405
959
  },
1406
960
  tooltip: {
1407
961
  x: {
1408
- format: 'MMMM yyyy'
962
+ format: "MMMM yyyy",
1409
963
  },
1410
964
  },
1411
965
  };
1412
966
 
1413
- var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
967
+ const sales_chart = new ApexCharts(
968
+ document.querySelector("#sales-chart"),
969
+ sales_chart_options,
970
+ );
1414
971
  sales_chart.render();
1415
972
 
1416
973
  //---------------------------
1417
974
  // - END MONTHLY SALES CHART -
1418
975
  //---------------------------
1419
976
 
977
+ function createSparklineChart(selector, data) {
978
+ const options = {
979
+ series: [{
980
+ data
981
+ }],
982
+ chart: {
983
+ type: "line",
984
+ width: 150,
985
+ height: 30,
986
+ sparkline: {
987
+ enabled: true,
988
+ },
989
+ },
990
+ colors: ["var(--bs-primary)"],
991
+ stroke: {
992
+ width: 2,
993
+ },
994
+ tooltip: {
995
+ fixed: {
996
+ enabled: false,
997
+ },
998
+ x: {
999
+ show: false,
1000
+ },
1001
+ y: {
1002
+ title: {
1003
+ formatter: function(seriesName) {
1004
+ return "";
1005
+ },
1006
+ },
1007
+ },
1008
+ marker: {
1009
+ show: false,
1010
+ },
1011
+ },
1012
+ };
1013
+
1014
+ const chart = new ApexCharts(document.querySelector(selector), options);
1015
+ chart.render();
1016
+ }
1017
+
1018
+ const table_sparkline_1_data = [
1019
+ 25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
1020
+ ];
1021
+ const table_sparkline_2_data = [
1022
+ 12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
1023
+ ];
1024
+ const table_sparkline_3_data = [
1025
+ 15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
1026
+ ];
1027
+ const table_sparkline_4_data = [
1028
+ 30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
1029
+ ];
1030
+ const table_sparkline_5_data = [
1031
+ 20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
1032
+ ];
1033
+ const table_sparkline_6_data = [
1034
+ 5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
1035
+ ];
1036
+ const table_sparkline_7_data = [
1037
+ 12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
1038
+ ];
1039
+
1040
+ createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
1041
+ createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
1042
+ createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
1043
+ createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
1044
+ createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
1045
+ createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
1046
+ createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
1047
+
1420
1048
  //-------------
1421
1049
  // - PIE CHART -
1422
1050
  //-------------
1423
1051
 
1424
- var pie_chart_options = {
1052
+ const pie_chart_options = {
1425
1053
  series: [700, 500, 400, 600, 300, 100],
1426
1054
  chart: {
1427
- type: 'donut',
1055
+ type: "donut",
1428
1056
  },
1429
- labels: [
1430
- 'Chrome',
1431
- 'Edge',
1432
- 'FireFox',
1433
- 'Safari',
1434
- 'Opera',
1435
- 'IE',
1436
- ],
1057
+ labels: ["Chrome", "Edge", "FireFox", "Safari", "Opera", "IE"],
1437
1058
  dataLabels: {
1438
1059
  enabled: false,
1439
1060
  },
1440
- colors: ['#0d6efd', '#20c997', '#ffc107', '#d63384', '#6f42c1', '#adb5bd']
1061
+ colors: [
1062
+ "#0d6efd",
1063
+ "#20c997",
1064
+ "#ffc107",
1065
+ "#d63384",
1066
+ "#6f42c1",
1067
+ "#adb5bd",
1068
+ ],
1441
1069
  };
1442
1070
 
1443
- var pie_chart = new ApexCharts(document.querySelector("#pie-chart"), pie_chart_options);
1071
+ const pie_chart = new ApexCharts(
1072
+ document.querySelector("#pie-chart"),
1073
+ pie_chart_options,
1074
+ );
1444
1075
  pie_chart.render();
1445
1076
 
1446
1077
  //-----------------
1447
1078
  // - END PIE CHART -
1448
1079
  //-----------------
1449
- </script>
1450
- </body>
1080
+ </script> <!--end::Script-->
1081
+ </body><!--end::Body-->
1451
1082
 
1452
1083
  </html>