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/forms.html CHANGED
@@ -1,759 +1,234 @@
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>Forms</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>Forms · 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="forms" data-crumbs="Components | Forms">
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 · 03</span>
28
+ <h1 class="hero-title">Forms</h1>
29
+ <p class="hero-sub">Inputs, selects, textareas, switches, checkboxes, validation states — and a working "Profile settings" form to show how it all comes together.</p>
30
+ </div>
31
+ <div class="hero-actions">
32
+ <button class="btn btn--ghost">Cancel</button>
33
+ <button class="btn btn--primary">Save changes</button>
34
+ </div>
35
+ </section>
77
36
 
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>
37
+ <div class="grid">
38
+
39
+
40
+ <section class="col-12 card">
41
+ <div class="card-head">
42
+ <div class="card-title-wrap">
43
+ <span class="eyebrow">Live example</span>
44
+ <h2 class="card-title">Profile settings</h2>
107
45
  </div>
46
+ <span class="badge solid">DRAFT</span>
108
47
  </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
48
 
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>
49
+ <form onsubmit="event.preventDefault(); alert(\'Saved (demo)\');">
50
+ <div class="form-grid">
51
+ <div class="field">
52
+ <label class="field-label" for="first">First name <span class="req">*</span></label>
53
+ <input id="first" class="input" type="text" value="John" required>
54
+ </div>
55
+ <div class="field">
56
+ <label class="field-label" for="last">Last name <span class="req">*</span></label>
57
+ <input id="last" class="input" type="text" value="Doe" required>
58
+ </div>
59
+ <div class="field span-2">
60
+ <label class="field-label" for="email">Work email</label>
61
+ <div class="input-icon">
62
+ <span class="ico"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
63
+ <input id="email" class="input" type="email" value="john@adminator.app">
64
+ </div>
65
+ <div class="field-help">Used for sign-in and account notifications.</div>
66
+ </div>
308
67
 
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>
68
+ <div class="field">
69
+ <label class="field-label" for="role">Role</label>
70
+ <select id="role" class="select">
71
+ <option>Owner</option>
72
+ <option selected="selected">Admin</option>
73
+ <option>Editor</option>
74
+ <option>Viewer</option>
75
+ </select>
76
+ </div>
77
+ <div class="field">
78
+ <label class="field-label" for="tz">Timezone</label>
79
+ <select id="tz" class="select">
80
+ <option>UTC</option>
81
+ <option selected="selected">Europe/Riga</option>
82
+ <option>America/New_York</option>
83
+ <option>Asia/Tokyo</option>
84
+ </select>
85
+ </div>
381
86
 
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="">
87
+ <div class="field span-2">
88
+ <label class="field-label" for="url">Website</label>
89
+ <div class="input-group">
90
+ <span class="addon">https://</span>
91
+ <input id="url" class="input" type="text" placeholder="yourdomain.com">
468
92
  </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>
93
+ </div>
504
94
 
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
- <div class="masonry-sizer col-md-6"></div>
510
- <div class="masonry-item col-md-6">
511
- <div class="bgc-white p-20 bd">
512
- <h6 class="c-grey-900">Basic Form</h6>
513
- <div class="mT-30">
514
- <form>
515
- <div class="mb-3">
516
- <label class="form-label" for="exampleInputEmail1">Email address</label>
517
- <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
518
- <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
519
- </div>
520
- <div class="mb-3">
521
- <label class="form-label" for="exampleInputPassword1">Password</label>
522
- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
523
- </div>
524
- <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
525
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
526
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
527
- <span class="peer peer-greed">Call John for Dinner</span>
528
- </label>
529
- </div>
530
- <button type="submit" class="btn btn-primary btn-color">Submit</button>
531
- </form>
532
- </div>
95
+ <div class="field span-2">
96
+ <label class="field-label" for="bio">Short bio</label>
97
+ <textarea id="bio" class="textarea" placeholder="A few sentences about yourself…">Engineering lead. Building admin tools that don\'t hate their users.</textarea>
98
+ <div class="field-help">Up to 280 characters. Markdown supported.</div>
533
99
  </div>
534
100
  </div>
535
- <div class="masonry-item col-md-6">
536
- <div class="bgc-white p-20 bd">
537
- <h6 class="c-grey-900">Complex Form Layout</h6>
538
- <div class="mT-30">
539
- <form>
540
- <div class="row">
541
- <div class="mb-3 col-md-6">
542
- <label class="form-label" for="inputEmail4">Email</label>
543
- <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
544
- </div>
545
- <div class="mb-3 col-md-6">
546
- <label class="form-label" for="inputPassword4">Password</label>
547
- <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
548
- </div>
549
- </div>
550
- <div class="mb-3">
551
- <label class="form-label" for="inputAddress">Address</label>
552
- <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
553
- </div>
554
- <div class="mb-3">
555
- <label class="form-label" for="inputAddress2">Address 2</label>
556
- <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
557
- </div>
558
- <div class="row">
559
- <div class="mb-3 col-md-6">
560
- <label class="form-label" for="inputCity">City</label>
561
- <input type="text" class="form-control" id="inputCity">
562
- </div>
563
- <div class="mb-3 col-md-4">
564
- <label class="form-label" for="inputState">State</label>
565
- <select id="inputState" class="form-control">
566
- <option selected="selected">Choose...</option>
567
- <option>...</option>
568
- </select>
569
- </div>
570
- <div class="mb-3 col-md-2">
571
- <label class="form-label" for="inputZip">Zip</label>
572
- <input type="text" class="form-control" id="inputZip">
573
- </div>
574
- </div>
575
- <div class="row">
576
- <div class="mb-3 col-md-6">
577
- <label class="form-label fw-500">Birthdate</label>
578
- <div class="timepicker-input input-icon mb-3">
579
- <div class="input-group">
580
- <div class="input-group-text bgc-white bd bdwR-0">
581
- <i class="ti-calendar"></i>
582
- </div>
583
- <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Select Date">
584
- </div>
585
- </div>
586
- </div>
587
- </div>
588
- <div class="mb-3">
589
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
590
- <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
591
- <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
592
- <span class="peer peer-greed">Call John for Dinner</span>
593
- </label>
594
- </div>
595
- </div>
596
- <button type="submit" class="btn btn-primary btn-color">Sign in</button>
597
- </form>
598
- </div>
599
- </div>
101
+
102
+ <div class="section-h" style="margin: 24px 0 12px;">Notifications <span class="num">02</span></div>
103
+ <div class="form-grid">
104
+ <label class="switch span-2"><input type="checkbox" checked="checked"><span class="track"></span> Weekly product updates</label>
105
+ <label class="switch span-2"><input type="checkbox" checked="checked"><span class="track"></span> Mentions and replies</label>
106
+ <label class="switch span-2"><input type="checkbox"><span class="track"></span> Marketing newsletter</label>
107
+ <label class="switch span-2"><input type="checkbox" checked="checked"><span class="track"></span> Two-factor auth reminders</label>
600
108
  </div>
601
- <div class="masonry-item col-md-6">
602
- <div class="bgc-white p-20 bd">
603
- <h6 class="c-grey-900">Horizontal Form</h6>
604
- <div class="mT-30">
605
- <form>
606
- <div class="mb-3 row">
607
- <label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
608
- <div class="col-sm-10">
609
- <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
610
- </div>
611
- </div>
612
- <div class="mb-3 row">
613
- <label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
614
- <div class="col-sm-10">
615
- <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
616
- </div>
617
- </div>
618
- <fieldset class="mb-3">
619
- <div class="row">
620
- <legend class="col-form-legend col-sm-2">Radios</legend>
621
- <div class="col-sm-10">
622
- <div class="form-check">
623
- <label class="form-label form-check-label">
624
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="checked">
625
- Option one is this and that&mdash;be sure to include why it's great
626
- </label>
627
- </div>
628
- <div class="form-check">
629
- <label class="form-label form-check-label">
630
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
631
- Option two can be something else and selecting it will deselect option one
632
- </label>
633
- </div>
634
- <div class="form-check disabled">
635
- <label class="form-label form-check-label">
636
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="disabled">
637
- Option three is disabled
638
- </label>
639
- </div>
640
- </div>
641
- </div>
642
- </fieldset>
643
- <div class="mb-3 row">
644
- <div class="col-sm-2">Checkbox</div>
645
- <div class="col-sm-10">
646
- <div class="form-check">
647
- <label class="form-label form-check-label">
648
- <input class="form-check-input" type="checkbox"> Check me out
649
- </label>
650
- </div>
651
- </div>
652
- </div>
653
- <div class="mb-3 row">
654
- <div class="col-sm-10">
655
- <button type="submit" class="btn btn-primary btn-color">Sign in</button>
656
- </div>
657
- </div>
658
- </form>
659
- </div>
660
- </div>
109
+
110
+ <div class="form-actions">
111
+ <span class="badge dot success">All changes saved automatically</span>
112
+ <span class="spacer"></span>
113
+ <button type="button" class="btn btn--ghost">Cancel</button>
114
+ <button type="submit" class="btn btn--primary">Save profile</button>
661
115
  </div>
662
- <div class="masonry-item col-md-6">
663
- <div class="bgc-white p-20 bd">
664
- <h6 class="c-grey-900">Disabled Forms</h6>
665
- <div class="mT-30">
666
- <form>
667
- <fieldset disabled="disabled">
668
- <div class="mb-3">
669
- <label class="form-label" for="disabledTextInput">Disabled input</label>
670
- <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
671
- </div>
672
- <div class="mb-3">
673
- <label class="form-label" for="disabledSelect">Disabled select menu</label>
674
- <select id="disabledSelect" class="form-control">
675
- <option>Disabled select</option>
676
- </select>
677
- </div>
678
- <div class="form-check">
679
- <label class="form-label" class="form-check-label">
680
- <input class="form-check-input" type="checkbox"> Can't check this
681
- </label>
682
- </div>
683
- <button type="submit" class="btn btn-primary btn-color">Submit</button>
684
- </fieldset>
685
- </form>
686
- </div>
116
+ </form>
117
+ </section>
118
+
119
+
120
+ <section class="col-6 card">
121
+ <div class="card-head">
122
+ <div class="card-title-wrap">
123
+ <span class="eyebrow">Inputs</span>
124
+ <h2 class="card-title">States</h2>
125
+ </div>
126
+ </div>
127
+ <div style="display: flex; flex-direction: column; gap: 14px;">
128
+ <div class="field">
129
+ <label class="field-label">Default</label>
130
+ <input class="input" placeholder="Type here">
131
+ </div>
132
+ <div class="field">
133
+ <label class="field-label">Filled</label>
134
+ <input class="input" value="hello@adminator.app">
135
+ </div>
136
+ <div class="field">
137
+ <label class="field-label">Disabled</label>
138
+ <input class="input" value="Read only" disabled="disabled">
139
+ </div>
140
+ <div class="field">
141
+ <label class="field-label">With icon</label>
142
+ <div class="input-icon">
143
+ <span class="ico"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>
144
+ <input class="input" placeholder="Search...">
687
145
  </div>
688
146
  </div>
689
- <div class="masonry-item col-md-6">
690
- <div class="bgc-white p-20 bd">
691
- <h6 class="c-grey-900">Validation</h6>
692
- <div class="mT-30">
693
- <form class="container" id="needs-validation" novalidate>
694
- <div class="row">
695
- <div class="col-md-6 mb-3">
696
- <label class="form-label" for="validationCustom01">First name</label>
697
- <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
698
- </div>
699
- <div class="col-md-6 mb-3">
700
- <label class="form-label" for="validationCustom02">Last name</label>
701
- <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
702
- </div>
703
- </div>
704
- <div class="row">
705
- <div class="col-md-6 mb-3">
706
- <label class="form-label" for="validationCustom03">City</label>
707
- <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
708
- <div class="invalid-feedback">
709
- Please provide a valid city.
710
- </div>
711
- </div>
712
- <div class="col-md-3 mb-3">
713
- <label class="form-label" for="validationCustom04">State</label>
714
- <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
715
- <div class="invalid-feedback">
716
- Please provide a valid state.
717
- </div>
718
- </div>
719
- <div class="col-md-3 mb-3">
720
- <label class="form-label" for="validationCustom05">Zip</label>
721
- <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
722
- <div class="invalid-feedback">
723
- Please provide a valid zip.
724
- </div>
725
- </div>
726
- </div>
727
- <button class="btn btn-primary btn-color" type="submit">Submit form</button>
728
- </form>
729
- <script>
730
- // Example starter JavaScript for disabling form submissions if there are invalid fields
731
- (function() {
732
- 'use strict';
733
-
734
- window.addEventListener('load', function() {
735
- var form = document.getElementById('needs-validation');
736
- form.addEventListener('submit', function(event) {
737
- if (form.checkValidity() === false) {
738
- event.preventDefault();
739
- event.stopPropagation();
740
- }
741
- form.classList.add('was-validated');
742
- }, false);
743
- }, false);
744
- })();
745
- </script>
746
- </div>
147
+ <div class="field">
148
+ <label class="field-label">Invalid</label>
149
+ <input class="input is-invalid" value="not-an-email">
150
+ <div class="field-error">
151
+ <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="10"/><path d="M12 8v5M12 16h.01"/></svg>
152
+ Please enter a valid email address.
747
153
  </div>
748
154
  </div>
749
155
  </div>
750
- </div>
156
+ </section>
157
+
158
+
159
+ <section class="col-6 card">
160
+ <div class="card-head">
161
+ <div class="card-title-wrap">
162
+ <span class="eyebrow">Inputs</span>
163
+ <h2 class="card-title">Select & textarea</h2>
164
+ </div>
165
+ </div>
166
+ <div style="display: flex; flex-direction: column; gap: 14px;">
167
+ <div class="field">
168
+ <label class="field-label">Country</label>
169
+ <select class="select">
170
+ <option>Latvia</option>
171
+ <option>United States</option>
172
+ <option>Germany</option>
173
+ <option>Japan</option>
174
+ </select>
175
+ </div>
176
+ <div class="field">
177
+ <label class="field-label">Disabled select</label>
178
+ <select class="select" disabled="disabled">
179
+ <option>Locked plan</option>
180
+ </select>
181
+ </div>
182
+ <div class="field">
183
+ <label class="field-label">Description</label>
184
+ <textarea class="textarea" placeholder="Tell us a bit about your project..."></textarea>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+
190
+ <section class="col-6 card">
191
+ <div class="card-head">
192
+ <div class="card-title-wrap">
193
+ <span class="eyebrow">Choices</span>
194
+ <h2 class="card-title">Checkboxes & radios</h2>
195
+ </div>
196
+ </div>
197
+ <div style="display: flex; flex-direction: column; gap: 10px;">
198
+ <label class="check"><input type="checkbox" checked="checked"><span class="box"></span> Subscribe to changelog</label>
199
+ <label class="check"><input type="checkbox"><span class="box"></span> Get product tips weekly</label>
200
+ <label class="check"><input type="checkbox" disabled="disabled"><span class="box"></span> SMS notifications (coming soon)</label>
201
+ </div>
202
+ <div class="section-h" style="margin: 18px 0 10px; font-size: 13px;">Plan</div>
203
+ <div style="display: flex; flex-direction: column; gap: 10px;">
204
+ <label class="check radio"><input type="radio" name="plan" checked="checked"><span class="box"></span> Starter — $0 / mo</label>
205
+ <label class="check radio"><input type="radio" name="plan"><span class="box"></span> Pro — $19 / mo</label>
206
+ <label class="check radio"><input type="radio" name="plan"><span class="box"></span> Team — $49 / mo</label>
207
+ </div>
208
+ </section>
209
+
210
+
211
+ <section class="col-6 card">
212
+ <div class="card-head">
213
+ <div class="card-title-wrap">
214
+ <span class="eyebrow">Choices</span>
215
+ <h2 class="card-title">Toggle switches</h2>
216
+ </div>
217
+ </div>
218
+ <div style="display: flex; flex-direction: column; gap: 12px;">
219
+ <label class="switch"><input type="checkbox" checked="checked"><span class="track"></span> Enable two-factor auth</label>
220
+ <label class="switch"><input type="checkbox"><span class="track"></span> Public profile</label>
221
+ <label class="switch"><input type="checkbox" checked="checked"><span class="track"></span> Auto-save drafts every 30 seconds</label>
222
+ <label class="switch"><input type="checkbox" disabled="disabled"><span class="track"></span> Beta features (locked)</label>
223
+ </div>
224
+ <div class="alert info" style="margin-top: 18px;">
225
+ <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>
226
+ <div class="body">All changes save instantly — no submit button needed.</div>
227
+ </div>
228
+ </section>
229
+ </div>
751
230
  </main>
752
-
753
- <!-- ### $App Screen Footer ### -->
754
- <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
755
- <span>Copyright © 2025 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
756
- </footer>
231
+ <div data-shell-footer></div>
757
232
  </div>
758
233
  </div>
759
234
  </body>