adminator-admin-dashboard 2.7.0

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 (191) hide show
  1. package/CLAUDE.md +162 -0
  2. package/LICENSE +21 -0
  3. package/README.md +376 -0
  4. package/RELEASE_NOTES.md +92 -0
  5. package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
  6. package/dist/20fd1704ea223900efa9.woff2 +0 -0
  7. package/dist/29b39089170885ae2967.woff +0 -0
  8. package/dist/404.html +24 -0
  9. package/dist/500.html +24 -0
  10. package/dist/55b07f26c86c8e3d3754.svg +1 -0
  11. package/dist/8b43027f47b20503057d.eot +0 -0
  12. package/dist/9bad94440d49256265a5.eot +0 -0
  13. package/dist/9fad440d8ee7a949a9a9.svg +1 -0
  14. package/dist/assets/c1e38fd9e0e74ba58f7a2b77ef29fdd3.svg +2671 -0
  15. package/dist/assets/f0fc8c798eac5636249c4ea287832422.svg +362 -0
  16. package/dist/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
  17. package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
  18. package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
  19. package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
  20. package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
  21. package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
  22. package/dist/assets/static/fonts/icons/themify/themify.eot +0 -0
  23. package/dist/assets/static/fonts/icons/themify/themify.svg +362 -0
  24. package/dist/assets/static/fonts/icons/themify/themify.ttf +0 -0
  25. package/dist/assets/static/fonts/icons/themify/themify.woff +0 -0
  26. package/dist/assets/static/images/404.png +0 -0
  27. package/dist/assets/static/images/500.png +0 -0
  28. package/dist/assets/static/images/bg.jpg +0 -0
  29. package/dist/assets/static/images/datatables/sort_asc.png +0 -0
  30. package/dist/assets/static/images/datatables/sort_asc_disabled.png +0 -0
  31. package/dist/assets/static/images/datatables/sort_both.png +0 -0
  32. package/dist/assets/static/images/datatables/sort_desc.png +0 -0
  33. package/dist/assets/static/images/datatables/sort_desc_disabled.png +0 -0
  34. package/dist/assets/static/images/logo-circle.svg +7 -0
  35. package/dist/assets/static/images/logo-gradient.svg +13 -0
  36. package/dist/assets/static/images/logo-outline.svg +7 -0
  37. package/dist/assets/static/images/logo.png +0 -0
  38. package/dist/assets/static/images/logo.svg +5 -0
  39. package/dist/basic-table.html +715 -0
  40. package/dist/blank.html +522 -0
  41. package/dist/buttons.html +467 -0
  42. package/dist/calendar.html +692 -0
  43. package/dist/charts.html +681 -0
  44. package/dist/chat.html +730 -0
  45. package/dist/compose.html +643 -0
  46. package/dist/datatable.html +1009 -0
  47. package/dist/eda8b94308c6f538f04a.ttf +0 -0
  48. package/dist/email.html +992 -0
  49. package/dist/f691f37e57f04c152e23.woff +0 -0
  50. package/dist/forms.html +760 -0
  51. package/dist/google-maps.html +530 -0
  52. package/dist/index.html +1090 -0
  53. package/dist/main.js +61239 -0
  54. package/dist/main.js.map +1 -0
  55. package/dist/signin.html +107 -0
  56. package/dist/signup.html +104 -0
  57. package/dist/test.html +91 -0
  58. package/dist/ui.html +931 -0
  59. package/dist/vector-maps.html +529 -0
  60. package/package.json +112 -0
  61. package/src/404.html +24 -0
  62. package/src/500.html +24 -0
  63. package/src/assets/scripts/app.js +644 -0
  64. package/src/assets/scripts/charts/chartJS/index.js +148 -0
  65. package/src/assets/scripts/charts/easyPieChart/index.js +200 -0
  66. package/src/assets/scripts/charts/index.js +3 -0
  67. package/src/assets/scripts/charts/sparkline/index.js +208 -0
  68. package/src/assets/scripts/chat/index.js +11 -0
  69. package/src/assets/scripts/components/Chart.js +1390 -0
  70. package/src/assets/scripts/components/Sidebar.js +241 -0
  71. package/src/assets/scripts/constants/colors.js +274 -0
  72. package/src/assets/scripts/datatable/index.js +379 -0
  73. package/src/assets/scripts/datepicker/index.js +302 -0
  74. package/src/assets/scripts/email/index.js +25 -0
  75. package/src/assets/scripts/fullcalendar/index.js +86 -0
  76. package/src/assets/scripts/googleMaps/index.js +93 -0
  77. package/src/assets/scripts/index.js +18 -0
  78. package/src/assets/scripts/masonry/index.js +14 -0
  79. package/src/assets/scripts/popover/index.js +109 -0
  80. package/src/assets/scripts/scrollbar/index.js +10 -0
  81. package/src/assets/scripts/search/index.js +15 -0
  82. package/src/assets/scripts/sidebar/index.js +140 -0
  83. package/src/assets/scripts/skycons/index.js +52 -0
  84. package/src/assets/scripts/ui/index.js +412 -0
  85. package/src/assets/scripts/utils/date.js +242 -0
  86. package/src/assets/scripts/utils/dom.js +349 -0
  87. package/src/assets/scripts/utils/index.js +45 -0
  88. package/src/assets/scripts/utils/theme.js +105 -0
  89. package/src/assets/scripts/vectorMaps/index.js +277 -0
  90. package/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
  91. package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
  92. package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
  93. package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
  94. package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
  95. package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
  96. package/src/assets/static/fonts/icons/themify/themify.eot +0 -0
  97. package/src/assets/static/fonts/icons/themify/themify.svg +362 -0
  98. package/src/assets/static/fonts/icons/themify/themify.ttf +0 -0
  99. package/src/assets/static/fonts/icons/themify/themify.woff +0 -0
  100. package/src/assets/static/images/404.png +0 -0
  101. package/src/assets/static/images/500.png +0 -0
  102. package/src/assets/static/images/bg.jpg +0 -0
  103. package/src/assets/static/images/datatables/sort_asc.png +0 -0
  104. package/src/assets/static/images/datatables/sort_asc_disabled.png +0 -0
  105. package/src/assets/static/images/datatables/sort_both.png +0 -0
  106. package/src/assets/static/images/datatables/sort_desc.png +0 -0
  107. package/src/assets/static/images/datatables/sort_desc_disabled.png +0 -0
  108. package/src/assets/static/images/logo-circle.svg +7 -0
  109. package/src/assets/static/images/logo-gradient.svg +13 -0
  110. package/src/assets/static/images/logo-outline.svg +7 -0
  111. package/src/assets/static/images/logo.png +0 -0
  112. package/src/assets/static/images/logo.svg +5 -0
  113. package/src/assets/styles/index.scss +801 -0
  114. package/src/assets/styles/spec/components/easyPieChart.scss +11 -0
  115. package/src/assets/styles/spec/components/footer.scss +4 -0
  116. package/src/assets/styles/spec/components/forms.scss +288 -0
  117. package/src/assets/styles/spec/components/index.scss +9 -0
  118. package/src/assets/styles/spec/components/loader.scss +46 -0
  119. package/src/assets/styles/spec/components/masonry.scss +1 -0
  120. package/src/assets/styles/spec/components/pageContainer.scss +255 -0
  121. package/src/assets/styles/spec/components/progressBar.scss +6 -0
  122. package/src/assets/styles/spec/components/sidebar.scss +642 -0
  123. package/src/assets/styles/spec/components/topbar.scss +455 -0
  124. package/src/assets/styles/spec/generic/base.scss +102 -0
  125. package/src/assets/styles/spec/generic/index.scss +1 -0
  126. package/src/assets/styles/spec/index.scss +4 -0
  127. package/src/assets/styles/spec/screens/chat.scss +147 -0
  128. package/src/assets/styles/spec/screens/email.scss +108 -0
  129. package/src/assets/styles/spec/screens/index.scss +2 -0
  130. package/src/assets/styles/spec/settings/baseColors.scss +103 -0
  131. package/src/assets/styles/spec/settings/borders.scss +6 -0
  132. package/src/assets/styles/spec/settings/breakpoints.scss +26 -0
  133. package/src/assets/styles/spec/settings/fonts.scss +4 -0
  134. package/src/assets/styles/spec/settings/index.scss +4 -0
  135. package/src/assets/styles/spec/settings/materialColors.scss +550 -0
  136. package/src/assets/styles/spec/tools/index.scss +1 -0
  137. package/src/assets/styles/spec/tools/mixins/clearfix.scss +15 -0
  138. package/src/assets/styles/spec/tools/mixins/index.scss +3 -0
  139. package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +58 -0
  140. package/src/assets/styles/spec/tools/mixins/placeholder.scss +10 -0
  141. package/src/assets/styles/spec/utils/colors.scss +33 -0
  142. package/src/assets/styles/spec/utils/index.scss +2 -0
  143. package/src/assets/styles/spec/utils/layout/helpers/border.scss +78 -0
  144. package/src/assets/styles/spec/utils/layout/helpers/flex.scss +220 -0
  145. package/src/assets/styles/spec/utils/layout/helpers/index.scss +11 -0
  146. package/src/assets/styles/spec/utils/layout/helpers/layout.scss +137 -0
  147. package/src/assets/styles/spec/utils/layout/helpers/lists.scss +23 -0
  148. package/src/assets/styles/spec/utils/layout/helpers/margin.scss +266 -0
  149. package/src/assets/styles/spec/utils/layout/helpers/objects.scss +91 -0
  150. package/src/assets/styles/spec/utils/layout/helpers/padding.scss +147 -0
  151. package/src/assets/styles/spec/utils/layout/helpers/positions.scss +118 -0
  152. package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +6 -0
  153. package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +157 -0
  154. package/src/assets/styles/spec/utils/layout/helpers/typography.scss +127 -0
  155. package/src/assets/styles/spec/utils/layout/index.scss +3 -0
  156. package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +25 -0
  157. package/src/assets/styles/spec/utils/layout/mixins/index.scss +2 -0
  158. package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +28 -0
  159. package/src/assets/styles/spec/utils/layout/utils/center.scss +54 -0
  160. package/src/assets/styles/spec/utils/layout/utils/gap.scss +229 -0
  161. package/src/assets/styles/spec/utils/layout/utils/index.scss +5 -0
  162. package/src/assets/styles/spec/utils/layout/utils/layers.scss +5 -0
  163. package/src/assets/styles/spec/utils/layout/utils/peers.scss +35 -0
  164. package/src/assets/styles/utils/mobile.scss +954 -0
  165. package/src/assets/styles/utils/theme.css +97 -0
  166. package/src/assets/styles/vendor/datepicker.scss +183 -0
  167. package/src/assets/styles/vendor/font-awesome.css +2337 -0
  168. package/src/assets/styles/vendor/fullcalendar.scss +217 -0
  169. package/src/assets/styles/vendor/index.scss +8 -0
  170. package/src/assets/styles/vendor/jquery.datatables.scss +162 -0
  171. package/src/assets/styles/vendor/perfectScrollbar.scss +4 -0
  172. package/src/assets/styles/vendor/sparkline.scss +6 -0
  173. package/src/assets/styles/vendor/themify-icons.css +1081 -0
  174. package/src/basic-table.html +725 -0
  175. package/src/blank.html +532 -0
  176. package/src/buttons.html +477 -0
  177. package/src/calendar.html +702 -0
  178. package/src/charts.html +691 -0
  179. package/src/chat.html +740 -0
  180. package/src/compose.html +653 -0
  181. package/src/datatable.html +1019 -0
  182. package/src/email.html +1002 -0
  183. package/src/forms.html +770 -0
  184. package/src/google-maps.html +540 -0
  185. package/src/index.html +1100 -0
  186. package/src/signin.html +107 -0
  187. package/src/signup.html +104 -0
  188. package/src/test.html +96 -0
  189. package/src/ui.html +941 -0
  190. package/src/vector-maps.html +539 -0
  191. package/webpack.config.js +3 -0
package/src/index.html ADDED
@@ -0,0 +1,1100 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
+ <title>Dashboard</title>
7
+
8
+ <style>
9
+ #loader {
10
+ transition: all 0.3s ease-in-out;
11
+ opacity: 1;
12
+ visibility: visible;
13
+ position: fixed;
14
+ height: 100vh;
15
+ width: 100%;
16
+ background: #fff;
17
+ z-index: 90000;
18
+ }
19
+
20
+ #loader.fadeOut {
21
+ opacity: 0;
22
+ visibility: hidden;
23
+ }
24
+
25
+ .spinner {
26
+ width: 40px;
27
+ height: 40px;
28
+ position: absolute;
29
+ top: calc(50% - 20px);
30
+ left: calc(50% - 20px);
31
+ background-color: #333;
32
+ border-radius: 100%;
33
+ -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
34
+ animation: sk-scaleout 1.0s infinite ease-in-out;
35
+ }
36
+
37
+ @-webkit-keyframes sk-scaleout {
38
+ 0% { -webkit-transform: scale(0) }
39
+ 100% {
40
+ -webkit-transform: scale(1.0);
41
+ opacity: 0;
42
+ }
43
+ }
44
+
45
+ @keyframes sk-scaleout {
46
+ 0% {
47
+ -webkit-transform: scale(0);
48
+ transform: scale(0);
49
+ } 100% {
50
+ -webkit-transform: scale(1.0);
51
+ transform: scale(1.0);
52
+ opacity: 0;
53
+ }
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="app">
58
+ <!-- @TOC -->
59
+ <!-- =================================================== -->
60
+ <!--
61
+ + @Page Loader
62
+ + @App Content
63
+ - #Left Sidebar
64
+ > $Sidebar Header
65
+ > $Sidebar Menu
66
+
67
+ - #Main
68
+ > $Topbar
69
+ > $App Screen Content
70
+ -->
71
+
72
+ <!-- @Page Loader -->
73
+ <!-- =================================================== -->
74
+ <div id='loader'>
75
+ <div class="spinner"></div>
76
+ </div>
77
+
78
+ <script>
79
+ window.addEventListener('load', function load() {
80
+ const loader = document.getElementById('loader');
81
+ setTimeout(function() {
82
+ loader.classList.add('fadeOut');
83
+ }, 300);
84
+ });
85
+ </script>
86
+
87
+ <!-- @App Content -->
88
+ <!-- =================================================== -->
89
+ <div>
90
+ <!-- #Left Sidebar ==================== -->
91
+ <div class="sidebar">
92
+ <div class="sidebar-inner">
93
+ <!-- ### $Sidebar Header ### -->
94
+ <div class="sidebar-logo">
95
+ <div class="peers ai-c fxw-nw">
96
+ <div class="peer peer-greed">
97
+ <a class="sidebar-link td-n" href="index.html">
98
+ <div class="peers ai-c fxw-nw">
99
+ <div class="peer">
100
+ <div class="logo">
101
+ <img src="assets/static/images/logo.svg" alt="">
102
+ </div>
103
+ </div>
104
+ <div class="peer peer-greed">
105
+ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
106
+ </div>
107
+ </div>
108
+ </a>
109
+ </div>
110
+ <div class="peer">
111
+ <div class="mobile-toggle sidebar-toggle">
112
+ <a href="" class="td-n">
113
+ <i class="ti-arrow-circle-left"></i>
114
+ </a>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- ### $Sidebar Menu ### -->
121
+ <ul class="sidebar-menu scrollable pos-r">
122
+ <li class="nav-item mT-30">
123
+ <a class="sidebar-link" href="index.html">
124
+ <span class="icon-holder">
125
+ <i class="c-blue-500 ti-home"></i>
126
+ </span>
127
+ <span class="title">Dashboard</span>
128
+ </a>
129
+ </li>
130
+ <li class="nav-item">
131
+ <a class='sidebar-link' href="email.html">
132
+ <span class="icon-holder">
133
+ <i class="c-brown-500 ti-email"></i>
134
+ </span>
135
+ <span class="title">Email</span>
136
+ </a>
137
+ </li>
138
+ <li class="nav-item">
139
+ <a class='sidebar-link' href="compose.html">
140
+ <span class="icon-holder">
141
+ <i class="c-blue-500 ti-share"></i>
142
+ </span>
143
+ <span class="title">Compose</span>
144
+ </a>
145
+ </li>
146
+ <li class="nav-item">
147
+ <a class='sidebar-link' href="calendar.html">
148
+ <span class="icon-holder">
149
+ <i class="c-deep-orange-500 ti-calendar"></i>
150
+ </span>
151
+ <span class="title">Calendar</span>
152
+ </a>
153
+ </li>
154
+ <li class="nav-item">
155
+ <a class='sidebar-link' href="chat.html">
156
+ <span class="icon-holder">
157
+ <i class="c-deep-purple-500 ti-comment-alt"></i>
158
+ </span>
159
+ <span class="title">Chat</span>
160
+ </a>
161
+ </li>
162
+ <li class="nav-item">
163
+ <a class='sidebar-link' href="charts.html">
164
+ <span class="icon-holder">
165
+ <i class="c-indigo-500 ti-bar-chart"></i>
166
+ </span>
167
+ <span class="title">Charts</span>
168
+ </a>
169
+ </li>
170
+ <li class="nav-item">
171
+ <a class='sidebar-link' href="forms.html">
172
+ <span class="icon-holder">
173
+ <i class="c-light-blue-500 ti-pencil"></i>
174
+ </span>
175
+ <span class="title">Forms</span>
176
+ </a>
177
+ </li>
178
+ <li class="nav-item dropdown">
179
+ <a class="sidebar-link" href="ui.html">
180
+ <span class="icon-holder">
181
+ <i class="c-pink-500 ti-palette"></i>
182
+ </span>
183
+ <span class="title">UI Elements</span>
184
+ </a>
185
+ </li>
186
+ <li class="nav-item dropdown">
187
+ <a class="dropdown-toggle" href="javascript:void(0);">
188
+ <span class="icon-holder">
189
+ <i class="c-orange-500 ti-layout-list-thumb"></i>
190
+ </span>
191
+ <span class="title">Tables</span>
192
+ <span class="arrow">
193
+ <i class="ti-angle-right"></i>
194
+ </span>
195
+ </a>
196
+ <ul class="dropdown-menu">
197
+ <li>
198
+ <a class='sidebar-link' href="basic-table.html">Basic Table</a>
199
+ </li>
200
+ <li>
201
+ <a class='sidebar-link' href="datatable.html">Data Table</a>
202
+ </li>
203
+ </ul>
204
+ </li>
205
+ <li class="nav-item dropdown">
206
+ <a class="dropdown-toggle" href="javascript:void(0);">
207
+ <span class="icon-holder">
208
+ <i class="c-purple-500 ti-map"></i>
209
+ </span>
210
+ <span class="title">Maps</span>
211
+ <span class="arrow">
212
+ <i class="ti-angle-right"></i>
213
+ </span>
214
+ </a>
215
+ <ul class="dropdown-menu">
216
+ <li>
217
+ <a href="google-maps.html">Google Map</a>
218
+ </li>
219
+ <li>
220
+ <a href="vector-maps.html">Vector Map</a>
221
+ </li>
222
+ </ul>
223
+ </li>
224
+ <li class="nav-item dropdown">
225
+ <a class="dropdown-toggle" href="javascript:void(0);">
226
+ <span class="icon-holder">
227
+ <i class="c-red-500 ti-files"></i>
228
+ </span>
229
+ <span class="title">Pages</span>
230
+ <span class="arrow">
231
+ <i class="ti-angle-right"></i>
232
+ </span>
233
+ </a>
234
+ <ul class="dropdown-menu">
235
+ <li>
236
+ <a class='sidebar-link' href="blank.html">Blank</a>
237
+ </li>
238
+ <li>
239
+ <a class='sidebar-link' href="404.html">404</a>
240
+ </li>
241
+ <li>
242
+ <a class='sidebar-link' href="500.html">500</a>
243
+ </li>
244
+ <li>
245
+ <a class='sidebar-link' href="signin.html">Sign In</a>
246
+ </li>
247
+ <li>
248
+ <a class='sidebar-link' href="signup.html">Sign Up</a>
249
+ </li>
250
+ </ul>
251
+ </li>
252
+ <li class="nav-item dropdown">
253
+ <a class="dropdown-toggle" href="javascript:void(0);">
254
+ <span class="icon-holder">
255
+ <i class="c-teal-500 ti-view-list-alt"></i>
256
+ </span>
257
+ <span class="title">Multiple Levels</span>
258
+ <span class="arrow">
259
+ <i class="ti-angle-right"></i>
260
+ </span>
261
+ </a>
262
+ <ul class="dropdown-menu">
263
+ <li class="nav-item dropdown">
264
+ <a href="javascript:void(0);">
265
+ <span>Menu Item</span>
266
+ </a>
267
+ </li>
268
+ <li class="nav-item dropdown">
269
+ <a href="javascript:void(0);">
270
+ <span>Menu Item</span>
271
+ <span class="arrow">
272
+ <i class="ti-angle-right"></i>
273
+ </span>
274
+ </a>
275
+ <ul class="dropdown-menu">
276
+ <li>
277
+ <a href="javascript:void(0);">Menu Item</a>
278
+ </li>
279
+ <li>
280
+ <a href="javascript:void(0);">Menu Item</a>
281
+ </li>
282
+ </ul>
283
+ </li>
284
+ </ul>
285
+ </li>
286
+ </ul>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- #Main ============================ -->
291
+ <div class="page-container">
292
+ <!-- ### $Topbar ### -->
293
+ <div class="header navbar">
294
+ <div class="header-container">
295
+ <ul class="nav-left">
296
+ <li>
297
+ <a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
298
+ <i class="ti-menu"></i>
299
+ </a>
300
+ </li>
301
+ <li class="search-box">
302
+ <a class="search-toggle no-pdd-right" href="javascript:void(0);">
303
+ <i class="search-icon ti-search pdd-right-10"></i>
304
+ <i class="search-icon-close ti-close pdd-right-10"></i>
305
+ </a>
306
+ </li>
307
+ <li class="search-input">
308
+ <input class="form-control" type="text" placeholder="Search...">
309
+ </li>
310
+ </ul>
311
+ <ul class="nav-right">
312
+ <li class="notifications dropdown">
313
+ <span class="counter bgc-red">3</span>
314
+ <a href="" class="dropdown-toggle no-after" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
315
+ <i class="ti-bell"></i>
316
+ </a>
317
+
318
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
319
+ <li class="pX-20 pY-15 bdB">
320
+ <i class="ti-bell pR-10"></i>
321
+ <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
322
+ </li>
323
+ <li>
324
+ <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
325
+ <li>
326
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
327
+ <div class="peer mR-15">
328
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
329
+ </div>
330
+ <div class="peer peer-greed">
331
+ <span>
332
+ <span class="fw-500">John Doe</span>
333
+ <span class="c-grey-600">liked your <span class="text-dark">post</span>
334
+ </span>
335
+ </span>
336
+ <p class="m-0">
337
+ <small class="fsz-xs">5 mins ago</small>
338
+ </p>
339
+ </div>
340
+ </a>
341
+ </li>
342
+ <li>
343
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
344
+ <div class="peer mR-15">
345
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
346
+ </div>
347
+ <div class="peer peer-greed">
348
+ <span>
349
+ <span class="fw-500">Moo Doe</span>
350
+ <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
351
+ </span>
352
+ </span>
353
+ <p class="m-0">
354
+ <small class="fsz-xs">7 mins ago</small>
355
+ </p>
356
+ </div>
357
+ </a>
358
+ </li>
359
+ <li>
360
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
361
+ <div class="peer mR-15">
362
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
363
+ </div>
364
+ <div class="peer peer-greed">
365
+ <span>
366
+ <span class="fw-500">Lee Doe</span>
367
+ <span class="c-grey-600">commented on your <span class="text-dark">video</span>
368
+ </span>
369
+ </span>
370
+ <p class="m-0">
371
+ <small class="fsz-xs">10 mins ago</small>
372
+ </p>
373
+ </div>
374
+ </a>
375
+ </li>
376
+ </ul>
377
+ </li>
378
+ <li class="pX-20 pY-15 ta-c bdT">
379
+ <span>
380
+ <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
381
+ </span>
382
+ </li>
383
+ </ul>
384
+ </li>
385
+ <li class="notifications dropdown">
386
+ <span class="counter bgc-blue">3</span>
387
+ <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
388
+ <i class="ti-email"></i>
389
+ </a>
390
+
391
+ <ul class="dropdown-menu">
392
+ <li class="pX-20 pY-15 bdB">
393
+ <i class="ti-email pR-10"></i>
394
+ <span class="fsz-sm fw-600 c-grey-900">Emails</span>
395
+ </li>
396
+ <li>
397
+ <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
398
+ <li>
399
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
400
+ <div class="peer mR-15">
401
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
402
+ </div>
403
+ <div class="peer peer-greed">
404
+ <div>
405
+ <div class="peers jc-sb fxw-nw mB-5">
406
+ <div class="peer">
407
+ <p class="fw-500 mB-0">John Doe</p>
408
+ </div>
409
+ <div class="peer">
410
+ <small class="fsz-xs">5 mins ago</small>
411
+ </div>
412
+ </div>
413
+ <span class="c-grey-600 fsz-sm">
414
+ Want to create your own customized data generator for your app...
415
+ </span>
416
+ </div>
417
+ </div>
418
+ </a>
419
+ </li>
420
+ <li>
421
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
422
+ <div class="peer mR-15">
423
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
424
+ </div>
425
+ <div class="peer peer-greed">
426
+ <div>
427
+ <div class="peers jc-sb fxw-nw mB-5">
428
+ <div class="peer">
429
+ <p class="fw-500 mB-0">Moo Doe</p>
430
+ </div>
431
+ <div class="peer">
432
+ <small class="fsz-xs">15 mins ago</small>
433
+ </div>
434
+ </div>
435
+ <span class="c-grey-600 fsz-sm">
436
+ Want to create your own customized data generator for your app...
437
+ </span>
438
+ </div>
439
+ </div>
440
+ </a>
441
+ </li>
442
+ <li>
443
+ <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
444
+ <div class="peer mR-15">
445
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
446
+ </div>
447
+ <div class="peer peer-greed">
448
+ <div>
449
+ <div class="peers jc-sb fxw-nw mB-5">
450
+ <div class="peer">
451
+ <p class="fw-500 mB-0">Lee Doe</p>
452
+ </div>
453
+ <div class="peer">
454
+ <small class="fsz-xs">25 mins ago</small>
455
+ </div>
456
+ </div>
457
+ <span class="c-grey-600 fsz-sm">
458
+ Want to create your own customized data generator for your app...
459
+ </span>
460
+ </div>
461
+ </div>
462
+ </a>
463
+ </li>
464
+ </ul>
465
+ </li>
466
+ <li class="pX-20 pY-15 ta-c bdT">
467
+ <span>
468
+ <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
469
+ </span>
470
+ </li>
471
+ </ul>
472
+ </li>
473
+ <li class="dropdown">
474
+ <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
475
+ <div class="peer mR-10">
476
+ <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
477
+ </div>
478
+ <div class="peer">
479
+ <span class="fsz-sm c-grey-900">John Doe</span>
480
+ </div>
481
+ </a>
482
+ <ul class="dropdown-menu fsz-sm">
483
+ <li>
484
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
485
+ <i class="ti-settings mR-10"></i>
486
+ <span>Setting</span>
487
+ </a>
488
+ </li>
489
+ <li>
490
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
491
+ <i class="ti-user mR-10"></i>
492
+ <span>Profile</span>
493
+ </a>
494
+ </li>
495
+ <li>
496
+ <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
497
+ <i class="ti-email mR-10"></i>
498
+ <span>Messages</span>
499
+ </a>
500
+ </li>
501
+ <li role="separator" class="divider"></li>
502
+ <li>
503
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
504
+ <i class="ti-power-off mR-10"></i>
505
+ <span>Logout</span>
506
+ </a>
507
+ </li>
508
+ </ul>
509
+ </li>
510
+ </ul>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- ### $App Screen Content ### -->
515
+ <main class='main-content bgc-grey-100'>
516
+ <div id='mainContent'>
517
+ <div class="row gap-20 masonry pos-r">
518
+ <div class="masonry-sizer col-md-6"></div>
519
+ <div class="masonry-item w-100">
520
+ <div class="row gap-20">
521
+ <!-- #Toatl Visits ==================== -->
522
+ <div class='col-md-3'>
523
+ <div class="layers bd bgc-white p-20">
524
+ <div class="layer w-100 mB-10">
525
+ <h6 class="lh-1">Total Visits</h6>
526
+ </div>
527
+ <div class="layer w-100">
528
+ <div class="peers ai-sb fxw-nw">
529
+ <div class="peer peer-greed">
530
+ <span id="sparklinedash"></span>
531
+ </div>
532
+ <div class="peer">
533
+ <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <!-- #Total Page Views ==================== -->
541
+ <div class='col-md-3'>
542
+ <div class="layers bd bgc-white p-20">
543
+ <div class="layer w-100 mB-10">
544
+ <h6 class="lh-1">Total Page Views</h6>
545
+ </div>
546
+ <div class="layer w-100">
547
+ <div class="peers ai-sb fxw-nw">
548
+ <div class="peer peer-greed">
549
+ <span id="sparklinedash2"></span>
550
+ </div>
551
+ <div class="peer">
552
+ <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- #Unique Visitors ==================== -->
560
+ <div class='col-md-3'>
561
+ <div class="layers bd bgc-white p-20">
562
+ <div class="layer w-100 mB-10">
563
+ <h6 class="lh-1">Unique Visitor</h6>
564
+ </div>
565
+ <div class="layer w-100">
566
+ <div class="peers ai-sb fxw-nw">
567
+ <div class="peer peer-greed">
568
+ <span id="sparklinedash3"></span>
569
+ </div>
570
+ <div class="peer">
571
+ <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <!-- #Bounce Rate ==================== -->
579
+ <div class='col-md-3'>
580
+ <div class="layers bd bgc-white p-20">
581
+ <div class="layer w-100 mB-10">
582
+ <h6 class="lh-1">Bounce Rate</h6>
583
+ </div>
584
+ <div class="layer w-100">
585
+ <div class="peers ai-sb fxw-nw">
586
+ <div class="peer peer-greed">
587
+ <span id="sparklinedash4"></span>
588
+ </div>
589
+ <div class="peer">
590
+ <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ <div class="masonry-item col-12">
599
+ <!-- #Site Visits ==================== -->
600
+ <div class="bd bgc-white">
601
+ <div class="peers fxw-nw@lg+ ai-s">
602
+ <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
603
+ <div class="layers">
604
+ <div class="layer w-100 mB-10">
605
+ <h6 class="lh-1">Site Visits</h6>
606
+ </div>
607
+ <div class="layer w-100">
608
+ <div id="world-map-marker"></div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
613
+ <div class="layers">
614
+ <div class="layer w-100">
615
+ <!-- Progress Bars -->
616
+ <div class="layers">
617
+ <div class="layer w-100">
618
+ <h5 class="mB-5">100k</h5>
619
+ <small class="fw-600 c-grey-700">Visitors From USA</small>
620
+ <span class="pull-right c-grey-600 fsz-sm">50%</span>
621
+ <div class="progress mT-10">
622
+ <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
623
+ </div>
624
+ </div>
625
+ <div class="layer w-100 mT-15">
626
+ <h5 class="mB-5">1M</h5>
627
+ <small class="fw-600 c-grey-700">Visitors From Europe</small>
628
+ <span class="pull-right c-grey-600 fsz-sm">80%</span>
629
+ <div class="progress mT-10">
630
+ <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
631
+ </div>
632
+ </div>
633
+ <div class="layer w-100 mT-15">
634
+ <h5 class="mB-5">450k</h5>
635
+ <small class="fw-600 c-grey-700">Visitors From Australia</small>
636
+ <span class="pull-right c-grey-600 fsz-sm">40%</span>
637
+ <div class="progress mT-10">
638
+ <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
639
+ </div>
640
+ </div>
641
+ <div class="layer w-100 mT-15">
642
+ <h5 class="mB-5">1B</h5>
643
+ <small class="fw-600 c-grey-700">Visitors From India</small>
644
+ <span class="pull-right c-grey-600 fsz-sm">90%</span>
645
+ <div class="progress mT-10">
646
+ <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+
651
+ <!-- Pie Charts -->
652
+ <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
653
+ <div class="peer">
654
+ <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
655
+ <span></span>
656
+ </div>
657
+ <h6 class="fsz-sm">New Users</h6>
658
+ </div>
659
+ <div class="peer">
660
+ <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
661
+ <span></span>
662
+ </div>
663
+ <h6 class="fsz-sm">New Purchases</h6>
664
+ </div>
665
+ <div class="peer">
666
+ <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
667
+ <span></span>
668
+ </div>
669
+ <h6 class="fsz-sm">Bounce Rate</h6>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ <div class="masonry-item col-md-6">
679
+ <!-- #Monthly Stats ==================== -->
680
+ <div class="bd bgc-white">
681
+ <div class="layers">
682
+ <div class="layer w-100 pX-20 pT-20">
683
+ <h6 class="lh-1">Monthly Stats</h6>
684
+ </div>
685
+ <div class="layer w-100 p-20">
686
+ <canvas id="line-chart" height="220"></canvas>
687
+ </div>
688
+ <div class="layer bdT p-20 w-100">
689
+ <div class="peers ai-c jc-c gapX-20">
690
+ <div class="peer">
691
+ <span class="fsz-def fw-600 mR-10 c-grey-800">54% <i class="fa fa-level-up c-green-500"></i></span>
692
+ <small class="c-grey-500 fw-600">Sales Growth</small>
693
+ </div>
694
+ <div class="peer fw-600">
695
+ <span class="fsz-def fw-600 mR-10 c-grey-800">$185K <i class="fa fa-level-up c-green-500"></i></span>
696
+ <small class="c-grey-500 fw-600">Dec Sales</small>
697
+ </div>
698
+ <div class="peer fw-600">
699
+ <span class="fsz-def fw-600 mR-10 c-grey-800">60% <i class="fa fa-level-up c-green-500"></i></span>
700
+ <small class="c-grey-500 fw-600">Profit Growth</small>
701
+ </div>
702
+ <div class="peer fw-600">
703
+ <span class="fsz-def fw-600 mR-10 c-grey-800">$72K <i class="fa fa-level-up c-green-500"></i></span>
704
+ <small class="c-grey-500 fw-600">Dec Profit</small>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ <div class="masonry-item col-md-6">
712
+ <!-- #Todo ==================== -->
713
+ <div class="bd bgc-white p-20">
714
+ <div class="layers">
715
+ <div class="layer w-100 mB-10">
716
+ <h6 class="lh-1">Todo List</h6>
717
+ </div>
718
+ <div class="layer w-100">
719
+ <ul class="list-task list-group" data-role="tasklist">
720
+ <li class="list-group-item bdw-0" data-role="task">
721
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
722
+ <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
723
+ <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
724
+ <span class="peer peer-greed">Call John for Dinner</span>
725
+ </label>
726
+ </div>
727
+ </li>
728
+ <li class="list-group-item bdw-0" data-role="task">
729
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
730
+ <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
731
+ <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
732
+ <span class="peer peer-greed">Book Boss Flight</span>
733
+ <span class="peer">
734
+ <span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
735
+ </span>
736
+ </label>
737
+ </div>
738
+ </li>
739
+ <li class="list-group-item bdw-0" data-role="task">
740
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
741
+ <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
742
+ <label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
743
+ <span class="peer peer-greed">Hit the Gym</span>
744
+ <span class="peer">
745
+ <span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
746
+ </span>
747
+ </label>
748
+ </div>
749
+ </li>
750
+ <li class="list-group-item bdw-0" data-role="task">
751
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
752
+ <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
753
+ <label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
754
+ <span class="peer peer-greed">Give Purchase Report</span>
755
+ <span class="peer">
756
+ <span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
757
+ </span>
758
+ </label>
759
+ </div>
760
+ </li>
761
+ <li class="list-group-item bdw-0" data-role="task">
762
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
763
+ <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
764
+ <label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
765
+ <span class="peer peer-greed">Watch Game of Thrones Episode</span>
766
+ <span class="peer">
767
+ <span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
768
+ </span>
769
+ </label>
770
+ </div>
771
+ </li>
772
+ <li class="list-group-item bdw-0" data-role="task">
773
+ <div class="checkbox checkbox-circle checkbox-info peers ai-c">
774
+ <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
775
+ <label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
776
+ <span class="peer peer-greed">Give Purchase report</span>
777
+ <span class="peer">
778
+ <span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
779
+ </span>
780
+ </label>
781
+ </div>
782
+ </li>
783
+ </ul>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ </div>
788
+ <div class="masonry-item col-md-6">
789
+ <!-- #Sales Report ==================== -->
790
+ <div class="bd bgc-white">
791
+ <div class="layers">
792
+ <div class="layer w-100 p-20">
793
+ <h6 class="lh-1">Sales Report</h6>
794
+ </div>
795
+ <div class="layer w-100">
796
+ <div class="sales-report-header p-20">
797
+ <div class="peers ai-c jc-sb gap-40">
798
+ <div class="peer peer-greed">
799
+ <h5>November 2029</h5>
800
+ <p class="mB-0">Sales Report</p>
801
+ </div>
802
+ <div class="peer">
803
+ <h3 class="text-end">$6,000</h3>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ <div class="table-responsive p-20">
808
+ <table class="table">
809
+ <thead>
810
+ <tr>
811
+ <th class=" bdwT-0">Name</th>
812
+ <th class=" bdwT-0">Status</th>
813
+ <th class=" bdwT-0">Date</th>
814
+ <th class=" bdwT-0">Price</th>
815
+ </tr>
816
+ </thead>
817
+ <tbody>
818
+ <tr>
819
+ <td class="fw-600">Item #1 Name</td>
820
+ <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
821
+ <td>Nov 18</td>
822
+ <td><span class="text-success">$12</span></td>
823
+ </tr>
824
+ <tr>
825
+ <td class="fw-600">Item #2 Name</td>
826
+ <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
827
+ <td>Nov 19</td>
828
+ <td><span class="text-info">$34</span></td>
829
+ </tr>
830
+ <tr>
831
+ <td class="fw-600">Item #3 Name</td>
832
+ <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
833
+ <td>Nov 20</td>
834
+ <td><span class="text-danger">-$45</span></td>
835
+ </tr>
836
+ <tr>
837
+ <td class="fw-600">Item #4 Name</td>
838
+ <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
839
+ <td>Nov 21</td>
840
+ <td><span class="text-success">$65</span></td>
841
+ </tr>
842
+ <tr>
843
+ <td class="fw-600">Item #5 Name</td>
844
+ <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
845
+ <td>Nov 22</td>
846
+ <td><span class="text-success">$78</span></td>
847
+ </tr>
848
+ <tr>
849
+ <td class="fw-600">Item #6 Name</td>
850
+ <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
851
+ <td>Nov 23</td>
852
+ <td><span class="text-danger">-$88</span></td>
853
+ </tr>
854
+ <tr>
855
+ <td class="fw-600">Item #7 Name</td>
856
+ <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
857
+ <td>Nov 22</td>
858
+ <td><span class="text-success">$56</span></td>
859
+ </tr>
860
+ </tbody>
861
+ </table>
862
+ </div>
863
+ </div>
864
+ </div>
865
+ <div class="ta-c bdT w-100 p-20">
866
+ <a href="#">Check all the sales</a>
867
+ </div>
868
+ </div>
869
+ </div>
870
+ <div class="masonry-item col-md-6">
871
+ <!-- #Weather ==================== -->
872
+ <div class="bd bgc-white p-20">
873
+ <div class="layers">
874
+ <!-- Widget Title -->
875
+ <div class="layer w-100 mB-20">
876
+ <h6 class="lh-1">Weather</h6>
877
+ </div>
878
+
879
+ <!-- Today Weather -->
880
+ <div class="layer w-100">
881
+ <div class="peers ai-c jc-sb fxw-nw">
882
+ <div class="peer peer-greed">
883
+ <div class="layers">
884
+ <!-- Temprature -->
885
+ <div class="layer w-100">
886
+ <div class="peers fxw-nw ai-c">
887
+ <div class="peer mR-20">
888
+ <h3>32<sup>°F</sup></h3>
889
+ </div>
890
+ <div class="peer">
891
+ <canvas class="sleet" width="44" height="44"></canvas>
892
+ </div>
893
+ </div>
894
+ </div>
895
+
896
+ <!-- Condition -->
897
+ <div class="layer w-100">
898
+ <span class="fw-600 c-grey-600">Partly Clouds</span>
899
+ </div>
900
+ </div>
901
+ </div>
902
+ <div class="peer">
903
+ <div class="layers ai-fe">
904
+ <div class="layer">
905
+ <h5 class="mB-5">Monday</h5>
906
+ </div>
907
+ <div class="layer">
908
+ <span class="fw-600 c-grey-600">Nov, 01 2032</span>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+
915
+ <!-- Today Weather Extended -->
916
+ <div class="layer w-100 mY-30">
917
+ <div class="layers bdB">
918
+ <div class="layer w-100 bdT pY-5">
919
+ <div class="peers ai-c jc-sb fxw-nw">
920
+ <div class="peer">
921
+ <span>Wind</span>
922
+ </div>
923
+ <div class="peer ta-r">
924
+ <span class="fw-600 c-grey-800">10km/h</span>
925
+ </div>
926
+ </div>
927
+ </div>
928
+ <div class="layer w-100 bdT pY-5">
929
+ <div class="peers ai-c jc-sb fxw-nw">
930
+ <div class="peer">
931
+ <span>Sunrise</span>
932
+ </div>
933
+ <div class="peer ta-r">
934
+ <span class="fw-600 c-grey-800">05:00 AM</span>
935
+ </div>
936
+ </div>
937
+ </div>
938
+ <div class="layer w-100 bdT pY-5">
939
+ <div class="peers ai-c jc-sb fxw-nw">
940
+ <div class="peer">
941
+ <span>Pressure</span>
942
+ </div>
943
+ <div class="peer ta-r">
944
+ <span class="fw-600 c-grey-800">1B</span>
945
+ </div>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+
951
+ <!-- Week Forecast -->
952
+ <div class="layer w-100">
953
+ <div class="peers peers-greed ai-fs ta-c">
954
+ <div class="peer">
955
+ <h6 class="mB-10">MON</h6>
956
+ <canvas class="sleet" width="30" height="30"></canvas>
957
+ <span class="d-b fw-600">32<sup>°F</sup></span>
958
+ </div>
959
+ <div class="peer">
960
+ <h6 class="mB-10">TUE</h6>
961
+ <canvas class="clear-day" width="30" height="30"></canvas>
962
+ <span class="d-b fw-600">30<sup>°F</sup></span>
963
+ </div>
964
+ <div class="peer">
965
+ <h6 class="mB-10">WED</h6>
966
+ <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
967
+ <span class="d-b fw-600">28<sup>°F</sup></span>
968
+ </div>
969
+ <div class="peer">
970
+ <h6 class="mB-10">THR</h6>
971
+ <canvas class="cloudy" width="30" height="30"></canvas>
972
+ <span class="d-b fw-600">32<sup>°F</sup></span>
973
+ </div>
974
+ <div class="peer">
975
+ <h6 class="mB-10">FRI</h6>
976
+ <canvas class="snow" width="30" height="30"></canvas>
977
+ <span class="d-b fw-600">24<sup>°F</sup></span>
978
+ </div>
979
+ <div class="peer">
980
+ <h6 class="mB-10">SAT</h6>
981
+ <canvas class="wind" width="30" height="30"></canvas>
982
+ <span class="d-b fw-600">28<sup>°F</sup></span>
983
+ </div>
984
+ <div class="peer">
985
+ <h6 class="mB-10">SUN</h6>
986
+ <canvas class="sleet" width="30" height="30"></canvas>
987
+ <span class="d-b fw-600">32<sup>°F</sup></span>
988
+ </div>
989
+ </div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ </div>
994
+ <div class="masonry-item col-md-6">
995
+ <!-- #Chat ==================== -->
996
+ <div class="bd bgc-white">
997
+ <div class="layers">
998
+ <div class="layer w-100 p-20">
999
+ <h6 class="lh-1">Quick Chat</h6>
1000
+ </div>
1001
+ <div class="layer w-100">
1002
+ <!-- Chat Box -->
1003
+ <div class="bgc-grey-200 p-20 gapY-15">
1004
+ <!-- Chat Conversation -->
1005
+ <div class="peers fxw-nw">
1006
+ <div class="peer mR-20">
1007
+ <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
1008
+ </div>
1009
+ <div class="peer peer-greed">
1010
+ <div class="layers ai-fs gapY-5">
1011
+ <div class="layer">
1012
+ <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
1013
+ <div class="peer mR-10">
1014
+ <small>10:00 AM</small>
1015
+ </div>
1016
+ <div class="peer-greed">
1017
+ <span>Lorem Ipsum is simply dummy text of</span>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ <div class="layer">
1022
+ <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
1023
+ <div class="peer mR-10">
1024
+ <small>10:00 AM</small>
1025
+ </div>
1026
+ <div class="peer-greed">
1027
+ <span>the printing and typesetting industry.</span>
1028
+ </div>
1029
+ </div>
1030
+ </div>
1031
+ <div class="layer">
1032
+ <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
1033
+ <div class="peer mR-10">
1034
+ <small>10:00 AM</small>
1035
+ </div>
1036
+ <div class="peer-greed">
1037
+ <span>Lorem Ipsum has been the industry's</span>
1038
+ </div>
1039
+ </div>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <!-- Chat Conversation -->
1046
+ <div class="peers fxw-nw ai-fe">
1047
+ <div class="peer ord-1 mL-20">
1048
+ <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
1049
+ </div>
1050
+ <div class="peer peer-greed ord-0">
1051
+ <div class="layers ai-fe gapY-10">
1052
+ <div class="layer">
1053
+ <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
1054
+ <div class="peer mL-10 ord-1">
1055
+ <small>10:00 AM</small>
1056
+ </div>
1057
+ <div class="peer-greed ord-0">
1058
+ <span>Heloo</span>
1059
+ </div>
1060
+ </div>
1061
+ </div>
1062
+ <div class="layer">
1063
+ <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
1064
+ <div class="peer mL-10 ord-1">
1065
+ <small>10:00 AM</small>
1066
+ </div>
1067
+ <div class="peer-greed ord-0">
1068
+ <span>??</span>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ </div>
1075
+ </div>
1076
+ <!-- Chat Send -->
1077
+ <div class="p-20 bdT bgc-white">
1078
+ <div class="pos-r">
1079
+ <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
1080
+ <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
1081
+ <i class="fa fa-paper-plane-o"></i>
1082
+ </button>
1083
+ </div>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ </main>
1092
+
1093
+ <!-- ### $App Screen Footer ### -->
1094
+ <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
1095
+ <span>Copyright © 2025 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
1096
+ </footer>
1097
+ </div>
1098
+ </div>
1099
+ </body>
1100
+ </html>