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/dist/ui.html ADDED
@@ -0,0 +1,931 @@
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>UI Elements</title>
7
+ <style>
8
+ #loader {
9
+ transition: all 0.3s ease-in-out;
10
+ opacity: 1;
11
+ visibility: visible;
12
+ position: fixed;
13
+ height: 100vh;
14
+ width: 100%;
15
+ background: #fff;
16
+ z-index: 90000;
17
+ }
18
+
19
+ #loader.fadeOut {
20
+ opacity: 0;
21
+ visibility: hidden;
22
+ }
23
+
24
+
25
+
26
+ .spinner {
27
+ width: 40px;
28
+ height: 40px;
29
+ position: absolute;
30
+ top: calc(50% - 20px);
31
+ left: calc(50% - 20px);
32
+ background-color: #333;
33
+ border-radius: 100%;
34
+ -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
35
+ animation: sk-scaleout 1.0s infinite ease-in-out;
36
+ }
37
+
38
+ @-webkit-keyframes sk-scaleout {
39
+ 0% { -webkit-transform: scale(0) }
40
+ 100% {
41
+ -webkit-transform: scale(1.0);
42
+ opacity: 0;
43
+ }
44
+ }
45
+
46
+ @keyframes sk-scaleout {
47
+ 0% {
48
+ -webkit-transform: scale(0);
49
+ transform: scale(0);
50
+ } 100% {
51
+ -webkit-transform: scale(1.0);
52
+ transform: scale(1.0);
53
+ opacity: 0;
54
+ }
55
+ }
56
+ </style>
57
+ <script defer="defer" src="main.js"></script></head>
58
+ <body class="app">
59
+
60
+
61
+
62
+
63
+
64
+
65
+ <div id="loader">
66
+ <div class="spinner"></div>
67
+ </div>
68
+
69
+ <script>
70
+ window.addEventListener('load', function load() {
71
+ const loader = document.getElementById('loader');
72
+ setTimeout(function() {
73
+ loader.classList.add('fadeOut');
74
+ }, 300);
75
+ });
76
+ </script>
77
+
78
+
79
+
80
+ <div>
81
+ <!-- #Left Sidebar ==================== -->
82
+ <div class="sidebar">
83
+ <div class="sidebar-inner">
84
+ <!-- ### $Sidebar Header ### -->
85
+ <div class="sidebar-logo">
86
+ <div class="peers ai-c fxw-nw">
87
+ <div class="peer peer-greed">
88
+ <a class="sidebar-link td-n" href="index.html">
89
+ <div class="peers ai-c fxw-nw">
90
+ <div class="peer">
91
+ <div class="logo">
92
+ <img src="assets/static/images/logo.svg" alt="">
93
+ </div>
94
+ </div>
95
+ <div class="peer peer-greed">
96
+ <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
97
+ </div>
98
+ </div>
99
+ </a>
100
+ </div>
101
+ <div class="peer">
102
+ <div class="mobile-toggle sidebar-toggle">
103
+ <a href="" class="td-n">
104
+ <i class="ti-arrow-circle-left"></i>
105
+ </a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- ### $Sidebar Menu ### -->
112
+ <ul class="sidebar-menu scrollable pos-r">
113
+ <li class="nav-item mT-30">
114
+ <a class="sidebar-link" href="index.html">
115
+ <span class="icon-holder">
116
+ <i class="c-blue-500 ti-home"></i>
117
+ </span>
118
+ <span class="title">Dashboard</span>
119
+ </a>
120
+ </li>
121
+ <li class="nav-item">
122
+ <a class="sidebar-link" href="email.html">
123
+ <span class="icon-holder">
124
+ <i class="c-brown-500 ti-email"></i>
125
+ </span>
126
+ <span class="title">Email</span>
127
+ </a>
128
+ </li>
129
+ <li class="nav-item">
130
+ <a class="sidebar-link" href="compose.html">
131
+ <span class="icon-holder">
132
+ <i class="c-blue-500 ti-share"></i>
133
+ </span>
134
+ <span class="title">Compose</span>
135
+ </a>
136
+ </li>
137
+ <li class="nav-item">
138
+ <a class="sidebar-link" href="calendar.html">
139
+ <span class="icon-holder">
140
+ <i class="c-deep-orange-500 ti-calendar"></i>
141
+ </span>
142
+ <span class="title">Calendar</span>
143
+ </a>
144
+ </li>
145
+ <li class="nav-item">
146
+ <a class="sidebar-link" href="chat.html">
147
+ <span class="icon-holder">
148
+ <i class="c-deep-purple-500 ti-comment-alt"></i>
149
+ </span>
150
+ <span class="title">Chat</span>
151
+ </a>
152
+ </li>
153
+ <li class="nav-item">
154
+ <a class="sidebar-link" href="charts.html">
155
+ <span class="icon-holder">
156
+ <i class="c-indigo-500 ti-bar-chart"></i>
157
+ </span>
158
+ <span class="title">Charts</span>
159
+ </a>
160
+ </li>
161
+ <li class="nav-item">
162
+ <a class="sidebar-link" href="forms.html">
163
+ <span class="icon-holder">
164
+ <i class="c-light-blue-500 ti-pencil"></i>
165
+ </span>
166
+ <span class="title">Forms</span>
167
+ </a>
168
+ </li>
169
+ <li class="nav-item dropdown">
170
+ <a class="sidebar-link" href="ui.html">
171
+ <span class="icon-holder">
172
+ <i class="c-pink-500 ti-palette"></i>
173
+ </span>
174
+ <span class="title">UI Elements</span>
175
+ </a>
176
+ </li>
177
+ <li class="nav-item dropdown">
178
+ <a class="dropdown-toggle" href="javascript:void(0);">
179
+ <span class="icon-holder">
180
+ <i class="c-orange-500 ti-layout-list-thumb"></i>
181
+ </span>
182
+ <span class="title">Tables</span>
183
+ <span class="arrow">
184
+ <i class="ti-angle-right"></i>
185
+ </span>
186
+ </a>
187
+ <ul class="dropdown-menu">
188
+ <li>
189
+ <a class="sidebar-link" href="basic-table.html">Basic Table</a>
190
+ </li>
191
+ <li>
192
+ <a class="sidebar-link" href="datatable.html">Data Table</a>
193
+ </li>
194
+ </ul>
195
+ </li>
196
+ <li class="nav-item dropdown">
197
+ <a class="dropdown-toggle" href="javascript:void(0);">
198
+ <span class="icon-holder">
199
+ <i class="c-purple-500 ti-map"></i>
200
+ </span>
201
+ <span class="title">Maps</span>
202
+ <span class="arrow">
203
+ <i class="ti-angle-right"></i>
204
+ </span>
205
+ </a>
206
+ <ul class="dropdown-menu">
207
+ <li>
208
+ <a href="google-maps.html">Google Map</a>
209
+ </li>
210
+ <li>
211
+ <a href="vector-maps.html">Vector Map</a>
212
+ </li>
213
+ </ul>
214
+ </li>
215
+ <li class="nav-item dropdown">
216
+ <a class="dropdown-toggle" href="javascript:void(0);">
217
+ <span class="icon-holder">
218
+ <i class="c-red-500 ti-files"></i>
219
+ </span>
220
+ <span class="title">Pages</span>
221
+ <span class="arrow">
222
+ <i class="ti-angle-right"></i>
223
+ </span>
224
+ </a>
225
+ <ul class="dropdown-menu">
226
+ <li>
227
+ <a class="sidebar-link" href="blank.html">Blank</a>
228
+ </li>
229
+ <li>
230
+ <a class="sidebar-link" href="404.html">404</a>
231
+ </li>
232
+ <li>
233
+ <a class="sidebar-link" href="500.html">500</a>
234
+ </li>
235
+ <li>
236
+ <a class="sidebar-link" href="signin.html">Sign In</a>
237
+ </li>
238
+ <li>
239
+ <a class="sidebar-link" href="signup.html">Sign Up</a>
240
+ </li>
241
+ </ul>
242
+ </li>
243
+ <li class="nav-item dropdown">
244
+ <a class="dropdown-toggle" href="javascript:void(0);">
245
+ <span class="icon-holder">
246
+ <i class="c-teal-500 ti-view-list-alt"></i>
247
+ </span>
248
+ <span class="title">Multiple Levels</span>
249
+ <span class="arrow">
250
+ <i class="ti-angle-right"></i>
251
+ </span>
252
+ </a>
253
+ <ul class="dropdown-menu">
254
+ <li class="nav-item dropdown">
255
+ <a href="javascript:void(0);">
256
+ <span>Menu Item</span>
257
+ </a>
258
+ </li>
259
+ <li class="nav-item dropdown">
260
+ <a href="javascript:void(0);">
261
+ <span>Menu Item</span>
262
+ <span class="arrow">
263
+ <i class="ti-angle-right"></i>
264
+ </span>
265
+ </a>
266
+ <ul class="dropdown-menu">
267
+ <li>
268
+ <a href="javascript:void(0);">Menu Item</a>
269
+ </li>
270
+ <li>
271
+ <a href="javascript:void(0);">Menu Item</a>
272
+ </li>
273
+ </ul>
274
+ </li>
275
+ </ul>
276
+ </li>
277
+ </ul>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- #Main ============================ -->
282
+ <div class="page-container">
283
+ <!-- ### $Topbar ### -->
284
+ <div class="header navbar">
285
+ <div class="header-container">
286
+ <ul class="nav-left">
287
+ <li>
288
+ <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
289
+ <i class="ti-menu"></i>
290
+ </a>
291
+ </li>
292
+ <li class="search-box">
293
+ <a class="search-toggle no-pdd-right" href="javascript:void(0);">
294
+ <i class="search-icon ti-search pdd-right-10"></i>
295
+ <i class="search-icon-close ti-close pdd-right-10"></i>
296
+ </a>
297
+ </li>
298
+ <li class="search-input">
299
+ <input class="form-control" type="text" placeholder="Search...">
300
+ </li>
301
+ </ul>
302
+ <ul class="nav-right">
303
+ <li class="notifications dropdown">
304
+ <span class="counter bgc-red">3</span>
305
+ <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
306
+ <i class="ti-bell"></i>
307
+ </a>
308
+
309
+ <ul class="dropdown-menu">
310
+ <li class="pX-20 pY-15 bdB">
311
+ <i class="ti-bell pR-10"></i>
312
+ <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
313
+ </li>
314
+ <li>
315
+ <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
316
+ <li>
317
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
318
+ <div class="peer mR-15">
319
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
320
+ </div>
321
+ <div class="peer peer-greed">
322
+ <span>
323
+ <span class="fw-500">John Doe</span>
324
+ <span class="c-grey-600">liked your <span class="text-dark">post</span>
325
+ </span>
326
+ </span>
327
+ <p class="m-0">
328
+ <small class="fsz-xs">5 mins ago</small>
329
+ </p>
330
+ </div>
331
+ </a>
332
+ </li>
333
+ <li>
334
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
335
+ <div class="peer mR-15">
336
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
337
+ </div>
338
+ <div class="peer peer-greed">
339
+ <span>
340
+ <span class="fw-500">Moo Doe</span>
341
+ <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
342
+ </span>
343
+ </span>
344
+ <p class="m-0">
345
+ <small class="fsz-xs">7 mins ago</small>
346
+ </p>
347
+ </div>
348
+ </a>
349
+ </li>
350
+ <li>
351
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
352
+ <div class="peer mR-15">
353
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
354
+ </div>
355
+ <div class="peer peer-greed">
356
+ <span>
357
+ <span class="fw-500">Lee Doe</span>
358
+ <span class="c-grey-600">commented on your <span class="text-dark">video</span>
359
+ </span>
360
+ </span>
361
+ <p class="m-0">
362
+ <small class="fsz-xs">10 mins ago</small>
363
+ </p>
364
+ </div>
365
+ </a>
366
+ </li>
367
+ </ul>
368
+ </li>
369
+ <li class="pX-20 pY-15 ta-c bdT">
370
+ <span>
371
+ <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>
372
+ </span>
373
+ </li>
374
+ </ul>
375
+ </li>
376
+ <li class="notifications dropdown">
377
+ <span class="counter bgc-blue">3</span>
378
+ <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
379
+ <i class="ti-email"></i>
380
+ </a>
381
+
382
+ <ul class="dropdown-menu">
383
+ <li class="pX-20 pY-15 bdB">
384
+ <i class="ti-email pR-10"></i>
385
+ <span class="fsz-sm fw-600 c-grey-900">Emails</span>
386
+ </li>
387
+ <li>
388
+ <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
389
+ <li>
390
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
391
+ <div class="peer mR-15">
392
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
393
+ </div>
394
+ <div class="peer peer-greed">
395
+ <div>
396
+ <div class="peers jc-sb fxw-nw mB-5">
397
+ <div class="peer">
398
+ <p class="fw-500 mB-0">John Doe</p>
399
+ </div>
400
+ <div class="peer">
401
+ <small class="fsz-xs">5 mins ago</small>
402
+ </div>
403
+ </div>
404
+ <span class="c-grey-600 fsz-sm">
405
+ Want to create your own customized data generator for your app...
406
+ </span>
407
+ </div>
408
+ </div>
409
+ </a>
410
+ </li>
411
+ <li>
412
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
413
+ <div class="peer mR-15">
414
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
415
+ </div>
416
+ <div class="peer peer-greed">
417
+ <div>
418
+ <div class="peers jc-sb fxw-nw mB-5">
419
+ <div class="peer">
420
+ <p class="fw-500 mB-0">Moo Doe</p>
421
+ </div>
422
+ <div class="peer">
423
+ <small class="fsz-xs">15 mins ago</small>
424
+ </div>
425
+ </div>
426
+ <span class="c-grey-600 fsz-sm">
427
+ Want to create your own customized data generator for your app...
428
+ </span>
429
+ </div>
430
+ </div>
431
+ </a>
432
+ </li>
433
+ <li>
434
+ <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
435
+ <div class="peer mR-15">
436
+ <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
437
+ </div>
438
+ <div class="peer peer-greed">
439
+ <div>
440
+ <div class="peers jc-sb fxw-nw mB-5">
441
+ <div class="peer">
442
+ <p class="fw-500 mB-0">Lee Doe</p>
443
+ </div>
444
+ <div class="peer">
445
+ <small class="fsz-xs">25 mins ago</small>
446
+ </div>
447
+ </div>
448
+ <span class="c-grey-600 fsz-sm">
449
+ Want to create your own customized data generator for your app...
450
+ </span>
451
+ </div>
452
+ </div>
453
+ </a>
454
+ </li>
455
+ </ul>
456
+ </li>
457
+ <li class="pX-20 pY-15 ta-c bdT">
458
+ <span>
459
+ <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>
460
+ </span>
461
+ </li>
462
+ </ul>
463
+ </li>
464
+ <li class="dropdown">
465
+ <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
466
+ <div class="peer mR-10">
467
+ <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
468
+ </div>
469
+ <div class="peer">
470
+ <span class="fsz-sm c-grey-900">John Doe</span>
471
+ </div>
472
+ </a>
473
+ <ul class="dropdown-menu fsz-sm">
474
+ <li>
475
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
476
+ <i class="ti-settings mR-10"></i>
477
+ <span>Setting</span>
478
+ </a>
479
+ </li>
480
+ <li>
481
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
482
+ <i class="ti-user mR-10"></i>
483
+ <span>Profile</span>
484
+ </a>
485
+ </li>
486
+ <li>
487
+ <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
488
+ <i class="ti-email mR-10"></i>
489
+ <span>Messages</span>
490
+ </a>
491
+ </li>
492
+ <li role="separator" class="divider"></li>
493
+ <li>
494
+ <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
495
+ <i class="ti-power-off mR-10"></i>
496
+ <span>Logout</span>
497
+ </a>
498
+ </li>
499
+ </ul>
500
+ </li>
501
+ </ul>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- ### $App Screen Content ### -->
506
+ <main class="main-content bgc-grey-100">
507
+ <div id="mainContent">
508
+ <div class="row gap-20 masonry pos-r">
509
+ <h4 class="c-grey-900">UI Elements</h4>
510
+ <div class="masonry-sizer col-md-6"></div>
511
+ <div class="masonry-item col-md-6">
512
+ <div class="bgc-white p-20 bd">
513
+ <h6 class="c-grey-900">Alerts</h6>
514
+ <div class="mT-30">
515
+ <div class="alert alert-primary" role="alert">
516
+ This is a primary alert—check it out!
517
+ </div>
518
+ <div class="alert alert-secondary" role="alert">
519
+ This is a secondary alert—check it out!
520
+ </div>
521
+ <div class="alert alert-success" role="alert">
522
+ This is a success alert—check it out!
523
+ </div>
524
+ <div class="alert alert-danger" role="alert">
525
+ This is a danger alert—check it out!
526
+ </div>
527
+ <div class="alert alert-warning" role="alert">
528
+ This is a warning alert—check it out!
529
+ </div>
530
+ <div class="alert alert-info" role="alert">
531
+ This is a info alert—check it out!
532
+ </div>
533
+ <div class="alert alert-light" role="alert">
534
+ This is a light alert—check it out!
535
+ </div>
536
+ <div class="alert alert-dark" role="alert">
537
+ This is a dark alert—check it out!
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <div class="masonry-item col-md-6">
543
+ <div class="bgc-white p-20 bd">
544
+ <h6 class="c-grey-900">Buttons</h6>
545
+ <div class="mT-30">
546
+ <div class="gap-10 peers">
547
+ <div class="peer">
548
+ <button type="button" class="btn cur-p btn-primary btn-color">Primary</button>
549
+ </div>
550
+ <div class="peer">
551
+ <button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
552
+ </div>
553
+ <div class="peer">
554
+ <button type="button" class="btn cur-p btn-success btn-color">Success</button>
555
+ </div>
556
+ <div class="peer">
557
+ <button type="button" class="btn cur-p btn-danger btn-color">Danger</button>
558
+ </div>
559
+ <div class="peer">
560
+ <button type="button" class="btn cur-p btn-warning">Warning</button>
561
+ </div>
562
+ <div class="peer">
563
+ <button type="button" class="btn cur-p btn-info btn-color">Info</button>
564
+ </div>
565
+ <div class="peer">
566
+ <button type="button" class="btn cur-p btn-light">Light</button>
567
+ </div>
568
+ <div class="peer">
569
+ <button type="button" class="btn cur-p btn-dark btn-color">Dark</button>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="w-100 gap-10 peers mY-20">
574
+ <div class="peer">
575
+ <button type="button" class="btn cur-p btn-outline-primary">Primary</button>
576
+ </div>
577
+ <div class="peer">
578
+ <button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
579
+ </div>
580
+ <div class="peer">
581
+ <button type="button" class="btn cur-p btn-outline-success">Success</button>
582
+ </div>
583
+ <div class="peer">
584
+ <button type="button" class="btn cur-p btn-outline-danger">Danger</button>
585
+ </div>
586
+ <div class="peer">
587
+ <button type="button" class="btn cur-p btn-outline-warning">Warning</button>
588
+ </div>
589
+ <div class="peer">
590
+ <button type="button" class="btn cur-p btn-outline-info">Info</button>
591
+ </div>
592
+ <div class="peer">
593
+ <button type="button" class="btn cur-p btn-outline-light">Light</button>
594
+ </div>
595
+ <div class="peer">
596
+ <button type="button" class="btn cur-p btn-outline-dark">Dark</button>
597
+ </div>
598
+ </div>
599
+
600
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
601
+ <div class="btn-group me-2" role="group" aria-label="First group">
602
+ <button type="button" class="btn btn-success btn-color">1</button>
603
+ <button type="button" class="btn btn-success btn-color">2</button>
604
+ <button type="button" class="btn btn-success btn-color">3</button>
605
+ <button type="button" class="btn btn-success btn-color">4</button>
606
+ </div>
607
+ <div class="btn-group me-2" role="group" aria-label="Second group">
608
+ <button type="button" class="btn btn-success btn-color">5</button>
609
+ <button type="button" class="btn btn-success btn-color">6</button>
610
+ <button type="button" class="btn btn-success btn-color">7</button>
611
+ </div>
612
+ <div class="btn-group" role="group" aria-label="Third group">
613
+ <button type="button" class="btn btn-success btn-color">8</button>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ <div class="masonry-item col-md-6">
620
+ <div class="bgc-white p-20 bd">
621
+ <h6 class="c-grey-900">Dropdowns</h6>
622
+ <div class="mT-30">
623
+ <div class="dropdown">
624
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
625
+ Dropdown button
626
+ </button>
627
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
628
+ <a class="dropdown-item" href="#">Action</a>
629
+ <a class="dropdown-item" href="#">Another action</a>
630
+ <a class="dropdown-item" href="#">Something else here</a>
631
+ </div>
632
+ </div>
633
+
634
+
635
+ <div class="btn-group mT-20">
636
+ <button type="button" class="btn btn-danger btn-color">Action</button>
637
+ <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
638
+ <span class="visually-hidden">Toggle Dropdown</span>
639
+ </button>
640
+ <div class="dropdown-menu">
641
+ <a class="dropdown-item" href="#">Action</a>
642
+ <a class="dropdown-item" href="#">Another action</a>
643
+ <a class="dropdown-item" href="#">Something else here</a>
644
+ <div class="dropdown-divider"></div>
645
+ <a class="dropdown-item" href="#">Separated link</a>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ <div class="masonry-item col-md-6">
652
+ <div class="bgc-white p-20 bd">
653
+ <h6 class="c-grey-900">List Group</h6>
654
+ <div class="mT-30">
655
+ <div class="list-group">
656
+ <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
657
+ The current link item
658
+ </a>
659
+ <a href="#" class="list-group-item list-group-item-action">A second link item</a>
660
+ <a href="#" class="list-group-item list-group-item-action">A third link item</a>
661
+ <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
662
+ <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ <div class="masonry-item col-md-6">
668
+ <div class="bgc-white p-20 bd">
669
+ <h6 class="c-grey-900">Modal</h6>
670
+ <div class="mT-30">
671
+
672
+ <button type="button" class="btn btn-primary btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
673
+ Launch demo modal
674
+ </button>
675
+
676
+
677
+ <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
678
+ <div class="modal-dialog">
679
+ <div class="modal-content">
680
+ <div class="modal-header">
681
+ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
682
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
683
+ </div>
684
+ <div class="modal-body">
685
+ ...
686
+ </div>
687
+ <div class="modal-footer">
688
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
689
+ <button type="button" class="btn btn-primary">Save changes</button>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ <div class="masonry-item col-md-6">
698
+ <div class="bgc-white p-20 bd">
699
+ <h6 class="c-grey-900">Popover</h6>
700
+ <div class="mT-30">
701
+ <button type="button" class="btn btn-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ <div class="masonry-item col-md-6">
706
+ <div class="bgc-white p-20 bd">
707
+ <h6 class="c-grey-900">Progress</h6>
708
+ <div class="mT-30">
709
+
710
+ <div class="layers">
711
+ <div class="layer w-100">
712
+ <h5 class="mB-5">100k</h5>
713
+ <small class="fw-600 c-grey-700">Visitors From USA</small>
714
+ <span class="pull-right c-grey-600 fsz-sm">50%</span>
715
+ <div class="progress mT-10">
716
+ <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>
717
+ </div>
718
+ </div>
719
+ <div class="layer w-100 mT-15">
720
+ <h5 class="mB-5">1M</h5>
721
+ <small class="fw-600 c-grey-700">Visitors From Europe</small>
722
+ <span class="pull-right c-grey-600 fsz-sm">80%</span>
723
+ <div class="progress mT-10">
724
+ <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>
725
+ </div>
726
+ </div>
727
+ <div class="layer w-100 mT-15">
728
+ <h5 class="mB-5">450k</h5>
729
+ <small class="fw-600 c-grey-700">Visitors From Australia</small>
730
+ <span class="pull-right c-grey-600 fsz-sm">40%</span>
731
+ <div class="progress mT-10">
732
+ <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>
733
+ </div>
734
+ </div>
735
+ <div class="layer w-100 mT-15">
736
+ <h5 class="mB-5">1B</h5>
737
+ <small class="fw-600 c-grey-700">Visitors From India</small>
738
+ <span class="pull-right c-grey-600 fsz-sm">90%</span>
739
+ <div class="progress mT-10">
740
+ <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>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ <div class="masonry-item col-md-6">
748
+ <div class="bgc-white p-20 bd">
749
+ <h6 class="c-grey-900">Tootips</h6>
750
+ <div class="mT-30">
751
+ <button type="button" class="btn btn-primary btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
752
+ Tooltip on top
753
+ </button>
754
+ <button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
755
+ Tooltip on right
756
+ </button>
757
+ <button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
758
+ Tooltip on bottom
759
+ </button>
760
+ <button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
761
+ Tooltip on left
762
+ </button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+
767
+
768
+ <div class="masonry-item col-md-6">
769
+ <div class="bgc-white p-20 bd">
770
+ <h6 class="c-grey-900">Button Sizes</h6>
771
+ <div class="mT-30">
772
+ <button type="button" class="btn btn-primary btn-lg btn-color mR-10">Large button</button>
773
+ <button type="button" class="btn btn-secondary btn-lg mR-10">Large button</button>
774
+ <br><br>
775
+ <button type="button" class="btn btn-primary btn-color mR-10">Default button</button>
776
+ <button type="button" class="btn btn-secondary mR-10">Default button</button>
777
+ <br><br>
778
+ <button type="button" class="btn btn-primary btn-sm btn-color mR-10">Small button</button>
779
+ <button type="button" class="btn btn-secondary btn-sm mR-10">Small button</button>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <div class="masonry-item col-md-6">
785
+ <div class="bgc-white p-20 bd">
786
+ <h6 class="c-grey-900">Badges</h6>
787
+ <div class="mT-30">
788
+ <h5>Example heading <span class="badge bg-primary">New</span></h5>
789
+ <h5>Example heading <span class="badge bg-secondary">2</span></h5>
790
+ <h5>Example heading <span class="badge bg-success">Success</span></h5>
791
+ <h5>Example heading <span class="badge bg-danger">Danger</span></h5>
792
+ <h5>Example heading <span class="badge bg-warning text-dark">Warning</span></h5>
793
+ <h5>Example heading <span class="badge bg-info">Info</span></h5>
794
+ <h5>Example heading <span class="badge bg-light text-dark">Light</span></h5>
795
+ <h5>Example heading <span class="badge bg-dark">Dark</span></h5>
796
+ </div>
797
+ </div>
798
+ </div>
799
+
800
+ <div class="masonry-item col-md-6">
801
+ <div class="bgc-white p-20 bd">
802
+ <h6 class="c-grey-900">Accordion</h6>
803
+ <div class="mT-30">
804
+ <div class="accordion" id="accordionExample">
805
+ <div class="accordion-item">
806
+ <h2 class="accordion-header" id="headingOne">
807
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
808
+ Accordion Item #1
809
+ </button>
810
+ </h2>
811
+ <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
812
+ <div class="accordion-body">
813
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes.
814
+ </div>
815
+ </div>
816
+ </div>
817
+ <div class="accordion-item">
818
+ <h2 class="accordion-header" id="headingTwo">
819
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
820
+ Accordion Item #2
821
+ </button>
822
+ </h2>
823
+ <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
824
+ <div class="accordion-body">
825
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes.
826
+ </div>
827
+ </div>
828
+ </div>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </div>
833
+
834
+ <div class="masonry-item col-md-6">
835
+ <div class="bgc-white p-20 bd">
836
+ <h6 class="c-grey-900">Cards</h6>
837
+ <div class="mT-30">
838
+ <div class="card" style="width: 18rem;">
839
+ <div class="card-body">
840
+ <h5 class="card-title">Card title</h5>
841
+ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
842
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
843
+ <a href="#" class="card-link">Card link</a>
844
+ <a href="#" class="card-link">Another link</a>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+
851
+ <div class="masonry-item col-md-6">
852
+ <div class="bgc-white p-20 bd">
853
+ <h6 class="c-grey-900">List Groups</h6>
854
+ <div class="mT-30">
855
+ <ul class="list-group">
856
+ <li class="list-group-item">An item</li>
857
+ <li class="list-group-item">A second item</li>
858
+ <li class="list-group-item">A third item</li>
859
+ <li class="list-group-item">A fourth item</li>
860
+ <li class="list-group-item">And a fifth one</li>
861
+ </ul>
862
+ <br>
863
+ <div class="list-group">
864
+ <a href="#" class="list-group-item list-group-item-action active">
865
+ The current link item
866
+ </a>
867
+ <a href="#" class="list-group-item list-group-item-action">A second link item</a>
868
+ <a href="#" class="list-group-item list-group-item-action">A third link item</a>
869
+ <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ </div>
874
+
875
+ <div class="masonry-item col-md-6">
876
+ <div class="bgc-white p-20 bd">
877
+ <h6 class="c-grey-900">Spinners</h6>
878
+ <div class="mT-30">
879
+ <div class="spinner-border text-primary" role="status">
880
+ <span class="visually-hidden">Loading...</span>
881
+ </div>
882
+ <div class="spinner-border text-secondary" role="status">
883
+ <span class="visually-hidden">Loading...</span>
884
+ </div>
885
+ <div class="spinner-border text-success" role="status">
886
+ <span class="visually-hidden">Loading...</span>
887
+ </div>
888
+ <div class="spinner-border text-danger" role="status">
889
+ <span class="visually-hidden">Loading...</span>
890
+ </div>
891
+ <div class="spinner-border text-warning" role="status">
892
+ <span class="visually-hidden">Loading...</span>
893
+ </div>
894
+ <div class="spinner-border text-info" role="status">
895
+ <span class="visually-hidden">Loading...</span>
896
+ </div>
897
+ <div class="spinner-border text-light" role="status">
898
+ <span class="visually-hidden">Loading...</span>
899
+ </div>
900
+ <div class="spinner-border text-dark" role="status">
901
+ <span class="visually-hidden">Loading...</span>
902
+ </div>
903
+ <br><br>
904
+ <div class="spinner-grow text-primary" role="status">
905
+ <span class="visually-hidden">Loading...</span>
906
+ </div>
907
+ <div class="spinner-grow text-secondary" role="status">
908
+ <span class="visually-hidden">Loading...</span>
909
+ </div>
910
+ <div class="spinner-grow text-success" role="status">
911
+ <span class="visually-hidden">Loading...</span>
912
+ </div>
913
+ <div class="spinner-grow text-danger" role="status">
914
+ <span class="visually-hidden">Loading...</span>
915
+ </div>
916
+ </div>
917
+ </div>
918
+ </div>
919
+
920
+ </div>
921
+ </div>
922
+ </main>
923
+
924
+ <!-- ### $App Screen Footer ### -->
925
+ <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
926
+ <span>Copyright © 2025 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
927
+ </footer>
928
+ </div>
929
+ </div>
930
+ </body>
931
+ </html>