adminator-admin-dashboard 2.8.1 → 4.1.5

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 (179) hide show
  1. package/CHANGELOG.md +499 -0
  2. package/CLAUDE.md +126 -154
  3. package/README.md +321 -370
  4. package/dist/2026.js +8751 -0
  5. package/dist/2026.js.map +1 -0
  6. package/dist/404.html +36 -16
  7. package/dist/500.html +36 -16
  8. package/dist/assets/static/images/logo.svg +3 -3
  9. package/dist/basic-table.html +152 -699
  10. package/dist/blank.html +42 -507
  11. package/dist/buttons.html +152 -448
  12. package/dist/calendar.html +246 -658
  13. package/dist/charts.html +124 -658
  14. package/dist/chat.html +209 -706
  15. package/dist/compose.html +141 -618
  16. package/dist/datatable.html +467 -991
  17. package/dist/email.html +430 -943
  18. package/dist/forms.html +208 -733
  19. package/dist/google-maps.html +123 -513
  20. package/dist/index.html +436 -1041
  21. package/dist/runtime.js +1299 -0
  22. package/dist/runtime.js.map +1 -0
  23. package/dist/signin.html +92 -92
  24. package/dist/signup.html +106 -91
  25. package/dist/ui.html +268 -897
  26. package/dist/vector-maps.html +132 -511
  27. package/dist/vendor-chartjs.js +14593 -0
  28. package/dist/vendor-chartjs.js.map +1 -0
  29. package/dist/vendor-fullcalendar.js +14793 -0
  30. package/dist/vendor-fullcalendar.js.map +1 -0
  31. package/dist/vendors.js +3758 -0
  32. package/dist/vendors.js.map +1 -0
  33. package/package.json +50 -52
  34. package/src/404.html +35 -15
  35. package/src/500.html +35 -15
  36. package/src/assets/scripts/2026/Shell.js +312 -0
  37. package/src/assets/scripts/2026/calendar.js +123 -0
  38. package/src/assets/scripts/2026/charts.js +259 -0
  39. package/src/assets/scripts/2026/index.js +35 -0
  40. package/src/assets/scripts/2026/init.js +207 -0
  41. package/src/assets/scripts/2026/maps.js +78 -0
  42. package/src/assets/scripts/2026/palette.js +266 -0
  43. package/src/assets/static/images/logo.svg +3 -3
  44. package/src/assets/styles/2026/_animations.scss +14 -0
  45. package/src/assets/styles/2026/_auth.scss +215 -0
  46. package/src/assets/styles/2026/_base.scss +37 -0
  47. package/src/assets/styles/2026/_calendar.scss +380 -0
  48. package/src/assets/styles/2026/_charts.scss +44 -0
  49. package/src/assets/styles/2026/_chat.scss +350 -0
  50. package/src/assets/styles/2026/_components.scss +140 -0
  51. package/src/assets/styles/2026/_dashboard.scss +520 -0
  52. package/src/assets/styles/2026/_data.scss +130 -0
  53. package/src/assets/styles/2026/_dropdowns.scss +128 -0
  54. package/src/assets/styles/2026/_email.scss +599 -0
  55. package/src/assets/styles/2026/_error.scss +98 -0
  56. package/src/assets/styles/2026/_forms.scss +215 -0
  57. package/src/assets/styles/2026/_fullcalendar.scss +134 -0
  58. package/src/assets/styles/2026/_palette.scss +173 -0
  59. package/src/assets/styles/2026/_responsive.scss +229 -0
  60. package/src/assets/styles/2026/_shell.scss +290 -0
  61. package/src/assets/styles/2026/_tokens.scss +80 -0
  62. package/src/assets/styles/2026/_ui.scss +365 -0
  63. package/src/assets/styles/2026/index.scss +23 -0
  64. package/src/basic-table.html +153 -710
  65. package/src/blank.html +42 -517
  66. package/src/buttons.html +152 -458
  67. package/src/calendar.html +246 -668
  68. package/src/charts.html +124 -668
  69. package/src/chat.html +209 -716
  70. package/src/compose.html +142 -629
  71. package/src/datatable.html +466 -1000
  72. package/src/email.html +429 -952
  73. package/src/forms.html +207 -742
  74. package/src/google-maps.html +128 -523
  75. package/src/index.html +438 -1050
  76. package/src/signin.html +92 -92
  77. package/src/signup.html +106 -91
  78. package/src/ui.html +267 -906
  79. package/src/vector-maps.html +133 -522
  80. package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
  81. package/dist/20fd1704ea223900efa9.woff2 +0 -0
  82. package/dist/29b39089170885ae2967.woff +0 -0
  83. package/dist/8b43027f47b20503057d.eot +0 -0
  84. package/dist/9bad94440d49256265a5.eot +0 -0
  85. package/dist/assets/fontawesome-webfont.svg +0 -2671
  86. package/dist/assets/themify.svg +0 -362
  87. package/dist/eda8b94308c6f538f04a.ttf +0 -0
  88. package/dist/f691f37e57f04c152e23.woff +0 -0
  89. package/dist/main.js +0 -61323
  90. package/dist/main.js.map +0 -1
  91. package/src/assets/scripts/app 2.js +0 -645
  92. package/src/assets/scripts/app.js +0 -645
  93. package/src/assets/scripts/charts/chartJS/index.js +0 -148
  94. package/src/assets/scripts/charts/easyPieChart/index.js +0 -200
  95. package/src/assets/scripts/charts/index.js +0 -3
  96. package/src/assets/scripts/charts/sparkline/index.js +0 -208
  97. package/src/assets/scripts/chat/index.js +0 -11
  98. package/src/assets/scripts/components/Chart.js +0 -1390
  99. package/src/assets/scripts/components/Sidebar.js +0 -241
  100. package/src/assets/scripts/constants/colors.js +0 -274
  101. package/src/assets/scripts/datatable/index.js +0 -379
  102. package/src/assets/scripts/datepicker/index.js +0 -302
  103. package/src/assets/scripts/email/index.js +0 -25
  104. package/src/assets/scripts/fullcalendar/index.js +0 -86
  105. package/src/assets/scripts/googleMaps/index.js +0 -93
  106. package/src/assets/scripts/index.js +0 -18
  107. package/src/assets/scripts/masonry/index.js +0 -14
  108. package/src/assets/scripts/popover/index.js +0 -109
  109. package/src/assets/scripts/scrollbar/index.js +0 -10
  110. package/src/assets/scripts/search/index.js +0 -15
  111. package/src/assets/scripts/sidebar/index.js +0 -140
  112. package/src/assets/scripts/skycons/index.js +0 -52
  113. package/src/assets/scripts/ui/index.js +0 -412
  114. package/src/assets/scripts/utils/date.js +0 -242
  115. package/src/assets/scripts/utils/dom.js +0 -349
  116. package/src/assets/scripts/utils/index.js +0 -45
  117. package/src/assets/scripts/utils/theme.js +0 -107
  118. package/src/assets/scripts/vectorMaps/index.js +0 -277
  119. package/src/assets/styles/index.scss +0 -801
  120. package/src/assets/styles/spec/components/easyPieChart.scss +0 -11
  121. package/src/assets/styles/spec/components/footer.scss +0 -4
  122. package/src/assets/styles/spec/components/forms.scss +0 -288
  123. package/src/assets/styles/spec/components/index.scss +0 -9
  124. package/src/assets/styles/spec/components/loader.scss +0 -46
  125. package/src/assets/styles/spec/components/masonry.scss +0 -1
  126. package/src/assets/styles/spec/components/pageContainer.scss +0 -255
  127. package/src/assets/styles/spec/components/progressBar.scss +0 -6
  128. package/src/assets/styles/spec/components/sidebar.scss +0 -642
  129. package/src/assets/styles/spec/components/topbar.scss +0 -455
  130. package/src/assets/styles/spec/generic/base.scss +0 -102
  131. package/src/assets/styles/spec/generic/index.scss +0 -1
  132. package/src/assets/styles/spec/index.scss +0 -4
  133. package/src/assets/styles/spec/screens/chat.scss +0 -147
  134. package/src/assets/styles/spec/screens/email.scss +0 -108
  135. package/src/assets/styles/spec/screens/index.scss +0 -2
  136. package/src/assets/styles/spec/settings/baseColors.scss +0 -103
  137. package/src/assets/styles/spec/settings/borders.scss +0 -6
  138. package/src/assets/styles/spec/settings/breakpoints.scss +0 -26
  139. package/src/assets/styles/spec/settings/fonts.scss +0 -4
  140. package/src/assets/styles/spec/settings/index.scss +0 -4
  141. package/src/assets/styles/spec/settings/materialColors.scss +0 -550
  142. package/src/assets/styles/spec/tools/index.scss +0 -1
  143. package/src/assets/styles/spec/tools/mixins/clearfix.scss +0 -15
  144. package/src/assets/styles/spec/tools/mixins/index.scss +0 -3
  145. package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +0 -58
  146. package/src/assets/styles/spec/tools/mixins/placeholder.scss +0 -10
  147. package/src/assets/styles/spec/utils/colors.scss +0 -33
  148. package/src/assets/styles/spec/utils/index.scss +0 -2
  149. package/src/assets/styles/spec/utils/layout/helpers/border.scss +0 -78
  150. package/src/assets/styles/spec/utils/layout/helpers/flex.scss +0 -220
  151. package/src/assets/styles/spec/utils/layout/helpers/index.scss +0 -11
  152. package/src/assets/styles/spec/utils/layout/helpers/layout.scss +0 -137
  153. package/src/assets/styles/spec/utils/layout/helpers/lists.scss +0 -23
  154. package/src/assets/styles/spec/utils/layout/helpers/margin.scss +0 -266
  155. package/src/assets/styles/spec/utils/layout/helpers/objects.scss +0 -91
  156. package/src/assets/styles/spec/utils/layout/helpers/padding.scss +0 -147
  157. package/src/assets/styles/spec/utils/layout/helpers/positions.scss +0 -118
  158. package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +0 -6
  159. package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +0 -157
  160. package/src/assets/styles/spec/utils/layout/helpers/typography.scss +0 -127
  161. package/src/assets/styles/spec/utils/layout/index.scss +0 -3
  162. package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +0 -25
  163. package/src/assets/styles/spec/utils/layout/mixins/index.scss +0 -2
  164. package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +0 -28
  165. package/src/assets/styles/spec/utils/layout/utils/center.scss +0 -54
  166. package/src/assets/styles/spec/utils/layout/utils/gap.scss +0 -229
  167. package/src/assets/styles/spec/utils/layout/utils/index.scss +0 -5
  168. package/src/assets/styles/spec/utils/layout/utils/layers.scss +0 -5
  169. package/src/assets/styles/spec/utils/layout/utils/peers.scss +0 -35
  170. package/src/assets/styles/utils/mobile.scss +0 -954
  171. package/src/assets/styles/utils/theme.css +0 -97
  172. package/src/assets/styles/vendor/datepicker.scss +0 -183
  173. package/src/assets/styles/vendor/font-awesome.css +0 -2337
  174. package/src/assets/styles/vendor/fullcalendar.scss +0 -217
  175. package/src/assets/styles/vendor/index.scss +0 -8
  176. package/src/assets/styles/vendor/jquery.datatables.scss +0 -162
  177. package/src/assets/styles/vendor/perfectScrollbar.scss +0 -4
  178. package/src/assets/styles/vendor/sparkline.scss +0 -6
  179. package/src/assets/styles/vendor/themify-icons.css +0 -1081
package/dist/ui.html CHANGED
@@ -1,930 +1,301 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html lang="en">
3
3
  <head>
4
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
-
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>UI Elements · 2026 Redesign Preview</title>
69
7
  <script>
70
- window.addEventListener('load', function load() {
71
- const loader = document.getElementById('loader');
72
- setTimeout(function() {
73
- loader.classList.add('fadeOut');
74
- }, 300);
75
- });
8
+ (function () {
9
+ try {
10
+ var saved = localStorage.getItem('dash26-theme');
11
+ var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
12
+ document.documentElement.setAttribute('data-theme', saved || (prefersDark ? 'dark' : 'light'));
13
+ } catch (e) {
14
+ document.documentElement.setAttribute('data-theme', 'light');
15
+ }
16
+ })();
76
17
  </script>
18
+ <script defer="defer" src="runtime.js"></script><script defer="defer" src="vendor-fullcalendar.js"></script><script defer="defer" src="vendor-chartjs.js"></script><script defer="defer" src="vendors.js"></script><script defer="defer" src="2026.js"></script></head>
19
+ <body data-active="ui" data-crumbs="Components | UI Elements">
20
+ <div class="shell">
21
+ <div data-shell-sidebar></div>
22
+ <div class="main">
23
+ <div data-shell-topbar></div>
24
+ <main class="content">
25
+ <section class="hero">
26
+ <div class="hero-text">
27
+ <span class="eyebrow">Components · 02</span>
28
+ <h1 class="hero-title">UI elements</h1>
29
+ <p class="hero-sub">Alerts, badges, progress bars, spinners, tabs, accordions, modals — every primitive a screen needs, theme-aware out of the box.</p>
30
+ </div>
31
+ </section>
32
+
33
+ <div class="grid">
77
34
 
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>
35
+
36
+ <section class="col-12 card">
37
+ <div class="card-head">
38
+ <div class="card-title-wrap">
39
+ <span class="eyebrow">Feedback</span>
40
+ <h2 class="card-title">Alerts</h2>
100
41
  </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>
42
+ </div>
43
+ <div class="alert primary">
44
+ <span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></span>
45
+ <div class="body">
46
+ <div class="title">New release · v3.1.0</div>
47
+ Two new components shipped today — segmented control and tonal buttons.
107
48
  </div>
49
+ <button class="close" aria-label="Dismiss"><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
108
50
  </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>
51
+ <div class="alert success">
52
+ <span class="ico"><svg viewBox="0 0 24 24"><path d="M22 11.1V12a10 10 0 1 1-5.9-9.1"/><path d="m22 4-10 10-3-3"/></svg></span>
53
+ <div class="body">
54
+ <div class="title">All checks passed</div>
55
+ CI completed in 1m 42s · 0 failing tests · ready to merge.
56
+ </div>
57
+ <button class="close" aria-label="Dismiss"><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
58
+ </div>
59
+ <div class="alert warning">
60
+ <span class="ico"><svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
61
+ <div class="body">
62
+ <div class="title">Storage 92% full</div>
63
+ You're approaching your plan limit. Upgrade to keep auto-backups running.
64
+ </div>
65
+ <button class="close" aria-label="Dismiss"><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
66
+ </div>
67
+ <div class="alert danger">
68
+ <span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg></span>
69
+ <div class="body">
70
+ <div class="title">Payment failed</div>
71
+ We couldn't charge your card ending in •• 4242. Update your billing details to continue.
72
+ </div>
73
+ <button class="close" aria-label="Dismiss"><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
74
+ </div>
75
+ <div class="alert info">
76
+ <span class="ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></span>
77
+ <div class="body">
78
+ Maintenance window scheduled for Saturday 02:00–03:00 UTC.
79
+ </div>
80
+ </div>
81
+ </section>
381
82
 
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>
83
+
84
+ <section class="col-6 card">
85
+ <div class="card-head">
86
+ <div class="card-title-wrap">
87
+ <span class="eyebrow">Indicators</span>
88
+ <h2 class="card-title">Badges</h2>
89
+ </div>
90
+ </div>
91
+ <div class="demo-row">
92
+ <span class="badge">Default</span>
93
+ <span class="badge primary">Primary</span>
94
+ <span class="badge success">Success</span>
95
+ <span class="badge warning">Warning</span>
96
+ <span class="badge danger">Danger</span>
97
+ <span class="badge info">Info</span>
98
+ <span class="badge purple">Purple</span>
99
+ <span class="badge solid">Solid</span>
100
+ </div>
101
+ <div class="demo-row" style="margin-top: 14px;">
102
+ <span class="badge primary dot">Live</span>
103
+ <span class="badge success dot">Online</span>
104
+ <span class="badge warning dot">Idle</span>
105
+ <span class="badge danger dot">Down</span>
106
+ </div>
107
+ </section>
504
108
 
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>
109
+
110
+ <section class="col-6 card">
111
+ <div class="card-head">
112
+ <div class="card-title-wrap">
113
+ <span class="eyebrow">Identity</span>
114
+ <h2 class="card-title">Avatar group</h2>
115
+ </div>
116
+ </div>
117
+ <div class="demo-row">
118
+ <div class="avatar-group">
119
+ <span class="av ma-1">JD</span>
120
+ <span class="av ma-2">SK</span>
121
+ <span class="av ma-3">LR</span>
122
+ <span class="av ma-4">MD</span>
123
+ <span class="av ma-5">PV</span>
124
+ <span class="av more">+8</span>
541
125
  </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>
126
+ </div>
127
+ <div class="demo-row" style="margin-top: 16px; gap: 12px;">
128
+ <span class="av ma-1" style="width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 600;">JD</span>
129
+ <span class="av ma-2" style="width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600;">SK</span>
130
+ <span class="av ma-3" style="width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 600;">LR</span>
131
+ <span class="av ma-4" style="width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 600;">MD</span>
132
+ </div>
133
+ </section>
572
134
 
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>
135
+
136
+ <section class="col-6 card">
137
+ <div class="card-head">
138
+ <div class="card-title-wrap">
139
+ <span class="eyebrow">Status</span>
140
+ <h2 class="card-title">Progress bars</h2>
141
+ </div>
142
+ </div>
143
+ <div style="display: flex; flex-direction: column; gap: 14px;">
144
+ <div>
145
+ <div style="display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t-muted); margin-bottom: 6px;"><span>Storage</span><strong style="color: var(--t-base); font-family: \'JetBrains Mono\', monospace;">7.4 / 15 GB</strong></div>
146
+ <div class="progress"><div class="progress-fill gradient" style="width: 49%;"></div></div>
147
+ </div>
148
+ <div>
149
+ <div style="display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t-muted); margin-bottom: 6px;"><span>API quota</span><strong style="color: var(--t-base); font-family: \'JetBrains Mono\', monospace;">82%</strong></div>
150
+ <div class="progress"><div class="progress-fill warning striped" style="width: 82%;"></div></div>
151
+ </div>
152
+ <div>
153
+ <div style="display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t-muted); margin-bottom: 6px;"><span>Failure rate</span><strong style="color: var(--t-base); font-family: \'JetBrains Mono\', monospace;">3%</strong></div>
154
+ <div class="progress"><div class="progress-fill danger" style="width: 3%; min-width: 8px;"></div></div>
155
+ </div>
156
+ <div>
157
+ <div style="display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t-muted); margin-bottom: 6px;"><span>Profile completion</span><strong style="color: var(--t-base); font-family: \'JetBrains Mono\', monospace;">100%</strong></div>
158
+ <div class="progress"><div class="progress-fill success" style="width: 100%;"></div></div>
159
+ </div>
160
+ <div>
161
+ <div style="font-size: 11.5px; color: var(--t-muted); margin-bottom: 6px;">Thin · 4px</div>
162
+ <div class="progress thin"><div class="progress-fill" style="width: 60%;"></div></div>
163
+ </div>
164
+ </div>
165
+ </section>
599
166
 
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>
167
+
168
+ <section class="col-6 card">
169
+ <div class="card-head">
170
+ <div class="card-title-wrap">
171
+ <span class="eyebrow">Status</span>
172
+ <h2 class="card-title">Spinners</h2>
618
173
  </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>
174
+ </div>
175
+ <div class="demo-row" style="gap: 24px; padding: 12px 0;">
176
+ <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"><span class="spinner sm"></span><span style="font-size: 10px; color: var(--t-light); font-family: \'JetBrains Mono\', monospace; letter-spacing: 0.06em;">SM</span></div>
177
+ <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"><span class="spinner"></span><span style="font-size: 10px; color: var(--t-light); font-family: \'JetBrains Mono\', monospace; letter-spacing: 0.06em;">DEFAULT</span></div>
178
+ <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"><span class="spinner lg"></span><span style="font-size: 10px; color: var(--t-light); font-family: \'JetBrains Mono\', monospace; letter-spacing: 0.06em;">LG</span></div>
179
+ <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"><span class="spinner" style="border-top-color: var(--success);"></span><span style="font-size: 10px; color: var(--t-light); font-family: \'JetBrains Mono\', monospace; letter-spacing: 0.06em;">SUCCESS</span></div>
180
+ <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"><span class="spinner" style="border-top-color: var(--danger);"></span><span style="font-size: 10px; color: var(--t-light); font-family: \'JetBrains Mono\', monospace; letter-spacing: 0.06em;">DANGER</span></div>
181
+ </div>
182
+ </section>
633
183
 
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>
184
+
185
+ <section class="col-6 card">
186
+ <div class="card-head">
187
+ <div class="card-title-wrap">
188
+ <span class="eyebrow">Navigation</span>
189
+ <h2 class="card-title">Tabs</h2>
650
190
  </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>
191
+ </div>
192
+ <div class="tabs">
193
+ <a class="tab is-active" href="#" data-tab="overview">Overview</a>
194
+ <a class="tab" href="#" data-tab="activity">Activity <span class="badge primary">12</span></a>
195
+ <a class="tab" href="#" data-tab="settings">Settings</a>
196
+ <a class="tab" href="#" data-tab="billing">Billing</a>
197
+ </div>
198
+ <div style="font-size: 13px; color: var(--t-muted); line-height: 1.6;">
199
+ The active tab uses the underline + primary color treatment. Pills variant available below.
200
+ </div>
201
+ <div style="margin-top: 18px;">
202
+ <div class="tabs pills">
203
+ <a class="tab" href="#">Day</a>
204
+ <a class="tab is-active" href="#">Week</a>
205
+ <a class="tab" href="#">Month</a>
206
+ <a class="tab" href="#">Year</a>
666
207
  </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>
208
+ </div>
209
+ </section>
675
210
 
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>
211
+
212
+ <section class="col-6 card">
213
+ <div class="card-head">
214
+ <div class="card-title-wrap">
215
+ <span class="eyebrow">Disclosure</span>
216
+ <h2 class="card-title">Accordion</h2>
704
217
  </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>
218
+ </div>
219
+ <div class="accordion">
220
+ <div class="accordion-item is-open" data-accordion>
221
+ <button class="accordion-trigger" data-accordion-trigger>
222
+ How does the dark mode work?
223
+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
224
+ </button>
225
+ <div class="accordion-body"><div class="accordion-body-inner">
226
+ Theme is stored in localStorage and applied via a data-theme attribute on &lt;html&gt;. CSS variables flip in one transition. No flash on load thanks to the early-paint script.
227
+ </div></div>
746
228
  </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>
229
+ <div class="accordion-item" data-accordion>
230
+ <button class="accordion-trigger" data-accordion-trigger>
231
+ Can I customize the brand color?
232
+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
233
+ </button>
234
+ <div class="accordion-body"><div class="accordion-body-inner">
235
+ Yes — change the --primary token in _tokens.scss. All components reference it via var(--primary), so a single edit propagates everywhere.
236
+ </div></div>
765
237
  </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>
238
+ <div class="accordion-item" data-accordion>
239
+ <button class="accordion-trigger" data-accordion-trigger>
240
+ Is jQuery required?
241
+ <span class="chev"><svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
242
+ </button>
243
+ <div class="accordion-body"><div class="accordion-body-inner">
244
+ No — the 2026 design system is 100% vanilla JS with native classList / querySelector / IntersectionObserver.
245
+ </div></div>
782
246
  </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>
247
+ </div>
248
+ </section>
249
+
250
+
251
+ <section class="col-12 card" style="align-items: center;">
252
+ <div class="card-head" style="width: 100%;">
253
+ <div class="card-title-wrap">
254
+ <span class="eyebrow">Overlays</span>
255
+ <h2 class="card-title">Modal</h2>
798
256
  </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>
257
+ </div>
258
+ <div class="modal-demo">
259
+ <div class="modal-head">
260
+ <div class="modal-title">Delete project?</div>
261
+ <button class="mail-tool" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="2" fill="none"/></svg></button>
832
262
  </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>
263
+ <div class="modal-body">
264
+ Once deleted, the <strong style="color: var(--t-base);">Northwind dashboard</strong> and its 142 saved views can\'t be recovered. Anyone with shared links will lose access immediately.
849
265
  </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>
266
+ <div class="modal-foot">
267
+ <button class="btn btn--ghost">Cancel</button>
268
+ <button class="btn btn--danger">Delete project</button>
873
269
  </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>
270
+ </div>
271
+ </section>
272
+
273
+
274
+ <section class="col-12 card">
275
+ <div class="card-head">
276
+ <div class="card-title-wrap">
277
+ <span class="eyebrow">Hints</span>
278
+ <h2 class="card-title">Tooltips</h2>
918
279
  </div>
919
-
920
280
  </div>
921
- </div>
281
+ <div class="demo-row" style="gap: 24px; padding: 18px 0 24px;">
282
+ <span class="popover-demo">
283
+ <span class="pop">Last sync 3 min ago</span>
284
+ <button class="btn btn--ghost">Hover me</button>
285
+ </span>
286
+ <span class="popover-demo">
287
+ <span class="pop">⌘ + Shift + P</span>
288
+ <button class="btn btn--soft-primary">Quick command</button>
289
+ </span>
290
+ <span class="popover-demo">
291
+ <span class="pop">Connected · Postgres 16.2</span>
292
+ <span class="badge success dot">Live</span>
293
+ </span>
294
+ </div>
295
+ </section>
296
+ </div>
922
297
  </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>
298
+ <div data-shell-footer></div>
928
299
  </div>
929
300
  </div>
930
301
  </body>