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/src/forms.html CHANGED
@@ -1,769 +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;
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Forms · 2026 Redesign Preview</title>
7
+ <script>
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');
54
15
  }
55
- }
56
- </style>
16
+ })();
17
+ </script>
57
18
  </head>
58
- <body class="app">
59
- <!-- @TOC -->
60
- <!-- =================================================== -->
61
- <!--
62
- + @Page Loader
63
- + @App Content
64
- - #Left Sidebar
65
- > $Sidebar Header
66
- > $Sidebar Menu
67
-
68
- - #Main
69
- > $Topbar
70
- > $App Screen Content
71
- -->
72
-
73
- <!-- @Page Loader -->
74
- <!-- =================================================== -->
75
- <div id='loader'>
76
- <div class="spinner"></div>
77
- </div>
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>
78
36
 
79
- <script>
80
- window.addEventListener('load', function load() {
81
- const loader = document.getElementById('loader');
82
- setTimeout(function() {
83
- loader.classList.add('fadeOut');
84
- }, 300);
85
- });
86
- </script>
37
+ <div class="grid">
87
38
 
88
- <!-- @App Content -->
89
- <!-- =================================================== -->
90
- <div>
91
- <!-- #Left Sidebar ==================== -->
92
- <div class="sidebar">
93
- <div class="sidebar-inner">
94
- <!-- ### $Sidebar Header ### -->
95
- <div class="sidebar-logo">
96
- <div class="peers ai-c fxw-nw">
97
- <div class="peer peer-greed">
98
- <a class="sidebar-link td-n" href="index.html">
99
- <div class="peers ai-c fxw-nw">
100
- <div class="peer">
101
- <div class="logo">
102
- <img src="assets/static/images/logo.svg" alt="">
103
- </div>
104
- </div>
105
- <div class="peer peer-greed">
106
- <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
107
- </div>
108
- </div>
109
- </a>
110
- </div>
111
- <div class="peer">
112
- <div class="mobile-toggle sidebar-toggle">
113
- <a href="" class="td-n">
114
- <i class="ti-arrow-circle-left"></i>
115
- </a>
116
- </div>
39
+ <!-- Working profile form -->
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>
117
45
  </div>
46
+ <span class="badge solid">DRAFT</span>
118
47
  </div>
119
- </div>
120
-
121
- <!-- ### $Sidebar Menu ### -->
122
- <ul class="sidebar-menu scrollable pos-r">
123
- <li class="nav-item mT-30">
124
- <a class="sidebar-link" href="index.html">
125
- <span class="icon-holder">
126
- <i class="c-blue-500 ti-home"></i>
127
- </span>
128
- <span class="title">Dashboard</span>
129
- </a>
130
- </li>
131
- <li class="nav-item">
132
- <a class='sidebar-link' href="email.html">
133
- <span class="icon-holder">
134
- <i class="c-brown-500 ti-email"></i>
135
- </span>
136
- <span class="title">Email</span>
137
- </a>
138
- </li>
139
- <li class="nav-item">
140
- <a class='sidebar-link' href="compose.html">
141
- <span class="icon-holder">
142
- <i class="c-blue-500 ti-share"></i>
143
- </span>
144
- <span class="title">Compose</span>
145
- </a>
146
- </li>
147
- <li class="nav-item">
148
- <a class='sidebar-link' href="calendar.html">
149
- <span class="icon-holder">
150
- <i class="c-deep-orange-500 ti-calendar"></i>
151
- </span>
152
- <span class="title">Calendar</span>
153
- </a>
154
- </li>
155
- <li class="nav-item">
156
- <a class='sidebar-link' href="chat.html">
157
- <span class="icon-holder">
158
- <i class="c-deep-purple-500 ti-comment-alt"></i>
159
- </span>
160
- <span class="title">Chat</span>
161
- </a>
162
- </li>
163
- <li class="nav-item">
164
- <a class='sidebar-link' href="charts.html">
165
- <span class="icon-holder">
166
- <i class="c-indigo-500 ti-bar-chart"></i>
167
- </span>
168
- <span class="title">Charts</span>
169
- </a>
170
- </li>
171
- <li class="nav-item">
172
- <a class='sidebar-link' href="forms.html">
173
- <span class="icon-holder">
174
- <i class="c-light-blue-500 ti-pencil"></i>
175
- </span>
176
- <span class="title">Forms</span>
177
- </a>
178
- </li>
179
- <li class="nav-item dropdown">
180
- <a class="sidebar-link" href="ui.html">
181
- <span class="icon-holder">
182
- <i class="c-pink-500 ti-palette"></i>
183
- </span>
184
- <span class="title">UI Elements</span>
185
- </a>
186
- </li>
187
- <li class="nav-item dropdown">
188
- <a class="dropdown-toggle" href="javascript:void(0);">
189
- <span class="icon-holder">
190
- <i class="c-orange-500 ti-layout-list-thumb"></i>
191
- </span>
192
- <span class="title">Tables</span>
193
- <span class="arrow">
194
- <i class="ti-angle-right"></i>
195
- </span>
196
- </a>
197
- <ul class="dropdown-menu">
198
- <li>
199
- <a class='sidebar-link' href="basic-table.html">Basic Table</a>
200
- </li>
201
- <li>
202
- <a class='sidebar-link' href="datatable.html">Data Table</a>
203
- </li>
204
- </ul>
205
- </li>
206
- <li class="nav-item dropdown">
207
- <a class="dropdown-toggle" href="javascript:void(0);">
208
- <span class="icon-holder">
209
- <i class="c-purple-500 ti-map"></i>
210
- </span>
211
- <span class="title">Maps</span>
212
- <span class="arrow">
213
- <i class="ti-angle-right"></i>
214
- </span>
215
- </a>
216
- <ul class="dropdown-menu">
217
- <li>
218
- <a href="google-maps.html">Google Map</a>
219
- </li>
220
- <li>
221
- <a href="vector-maps.html">Vector Map</a>
222
- </li>
223
- </ul>
224
- </li>
225
- <li class="nav-item dropdown">
226
- <a class="dropdown-toggle" href="javascript:void(0);">
227
- <span class="icon-holder">
228
- <i class="c-red-500 ti-files"></i>
229
- </span>
230
- <span class="title">Pages</span>
231
- <span class="arrow">
232
- <i class="ti-angle-right"></i>
233
- </span>
234
- </a>
235
- <ul class="dropdown-menu">
236
- <li>
237
- <a class='sidebar-link' href="blank.html">Blank</a>
238
- </li>
239
- <li>
240
- <a class='sidebar-link' href="404.html">404</a>
241
- </li>
242
- <li>
243
- <a class='sidebar-link' href="500.html">500</a>
244
- </li>
245
- <li>
246
- <a class='sidebar-link' href="signin.html">Sign In</a>
247
- </li>
248
- <li>
249
- <a class='sidebar-link' href="signup.html">Sign Up</a>
250
- </li>
251
- </ul>
252
- </li>
253
- <li class="nav-item dropdown">
254
- <a class="dropdown-toggle" href="javascript:void(0);">
255
- <span class="icon-holder">
256
- <i class="c-teal-500 ti-view-list-alt"></i>
257
- </span>
258
- <span class="title">Multiple Levels</span>
259
- <span class="arrow">
260
- <i class="ti-angle-right"></i>
261
- </span>
262
- </a>
263
- <ul class="dropdown-menu">
264
- <li class="nav-item dropdown">
265
- <a href="javascript:void(0);">
266
- <span>Menu Item</span>
267
- </a>
268
- </li>
269
- <li class="nav-item dropdown">
270
- <a href="javascript:void(0);">
271
- <span>Menu Item</span>
272
- <span class="arrow">
273
- <i class="ti-angle-right"></i>
274
- </span>
275
- </a>
276
- <ul class="dropdown-menu">
277
- <li>
278
- <a href="javascript:void(0);">Menu Item</a>
279
- </li>
280
- <li>
281
- <a href="javascript:void(0);">Menu Item</a>
282
- </li>
283
- </ul>
284
- </li>
285
- </ul>
286
- </li>
287
- </ul>
288
- </div>
289
- </div>
290
48
 
291
- <!-- #Main ============================ -->
292
- <div class="page-container">
293
- <!-- ### $Topbar ### -->
294
- <div class="header navbar">
295
- <div class="header-container">
296
- <ul class="nav-left">
297
- <li>
298
- <a id='sidebar-toggle' class="sidebar-toggle" href="javascript:void(0);">
299
- <i class="ti-menu"></i>
300
- </a>
301
- </li>
302
- <li class="search-box">
303
- <a class="search-toggle no-pdd-right" href="javascript:void(0);">
304
- <i class="search-icon ti-search pdd-right-10"></i>
305
- <i class="search-icon-close ti-close pdd-right-10"></i>
306
- </a>
307
- </li>
308
- <li class="search-input">
309
- <input class="form-control" type="text" placeholder="Search...">
310
- </li>
311
- </ul>
312
- <ul class="nav-right">
313
- <li class="notifications dropdown">
314
- <span class="counter bgc-red">3</span>
315
- <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
316
- <i class="ti-bell"></i>
317
- </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>
318
67
 
319
- <ul class="dropdown-menu">
320
- <li class="pX-20 pY-15 bdB">
321
- <i class="ti-bell pR-10"></i>
322
- <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
323
- </li>
324
- <li>
325
- <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
326
- <li>
327
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
328
- <div class="peer mR-15">
329
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
330
- </div>
331
- <div class="peer peer-greed">
332
- <span>
333
- <span class="fw-500">John Doe</span>
334
- <span class="c-grey-600">liked your <span class="text-dark">post</span>
335
- </span>
336
- </span>
337
- <p class="m-0">
338
- <small class="fsz-xs">5 mins ago</small>
339
- </p>
340
- </div>
341
- </a>
342
- </li>
343
- <li>
344
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
345
- <div class="peer mR-15">
346
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
347
- </div>
348
- <div class="peer peer-greed">
349
- <span>
350
- <span class="fw-500">Moo Doe</span>
351
- <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
352
- </span>
353
- </span>
354
- <p class="m-0">
355
- <small class="fsz-xs">7 mins ago</small>
356
- </p>
357
- </div>
358
- </a>
359
- </li>
360
- <li>
361
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
362
- <div class="peer mR-15">
363
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
364
- </div>
365
- <div class="peer peer-greed">
366
- <span>
367
- <span class="fw-500">Lee Doe</span>
368
- <span class="c-grey-600">commented on your <span class="text-dark">video</span>
369
- </span>
370
- </span>
371
- <p class="m-0">
372
- <small class="fsz-xs">10 mins ago</small>
373
- </p>
374
- </div>
375
- </a>
376
- </li>
377
- </ul>
378
- </li>
379
- <li class="pX-20 pY-15 ta-c bdT">
380
- <span>
381
- <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>
382
- </span>
383
- </li>
384
- </ul>
385
- </li>
386
- <li class="notifications dropdown">
387
- <span class="counter bgc-blue">3</span>
388
- <a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
389
- <i class="ti-email"></i>
390
- </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>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>Europe/Riga</option>
82
+ <option>America/New_York</option>
83
+ <option>Asia/Tokyo</option>
84
+ </select>
85
+ </div>
391
86
 
392
- <ul class="dropdown-menu">
393
- <li class="pX-20 pY-15 bdB">
394
- <i class="ti-email pR-10"></i>
395
- <span class="fsz-sm fw-600 c-grey-900">Emails</span>
396
- </li>
397
- <li>
398
- <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
399
- <li>
400
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
401
- <div class="peer mR-15">
402
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
403
- </div>
404
- <div class="peer peer-greed">
405
- <div>
406
- <div class="peers jc-sb fxw-nw mB-5">
407
- <div class="peer">
408
- <p class="fw-500 mB-0">John Doe</p>
409
- </div>
410
- <div class="peer">
411
- <small class="fsz-xs">5 mins ago</small>
412
- </div>
413
- </div>
414
- <span class="c-grey-600 fsz-sm">
415
- Want to create your own customized data generator for your app...
416
- </span>
417
- </div>
418
- </div>
419
- </a>
420
- </li>
421
- <li>
422
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
423
- <div class="peer mR-15">
424
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
425
- </div>
426
- <div class="peer peer-greed">
427
- <div>
428
- <div class="peers jc-sb fxw-nw mB-5">
429
- <div class="peer">
430
- <p class="fw-500 mB-0">Moo Doe</p>
431
- </div>
432
- <div class="peer">
433
- <small class="fsz-xs">15 mins ago</small>
434
- </div>
435
- </div>
436
- <span class="c-grey-600 fsz-sm">
437
- Want to create your own customized data generator for your app...
438
- </span>
439
- </div>
440
- </div>
441
- </a>
442
- </li>
443
- <li>
444
- <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
445
- <div class="peer mR-15">
446
- <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
447
- </div>
448
- <div class="peer peer-greed">
449
- <div>
450
- <div class="peers jc-sb fxw-nw mB-5">
451
- <div class="peer">
452
- <p class="fw-500 mB-0">Lee Doe</p>
453
- </div>
454
- <div class="peer">
455
- <small class="fsz-xs">25 mins ago</small>
456
- </div>
457
- </div>
458
- <span class="c-grey-600 fsz-sm">
459
- Want to create your own customized data generator for your app...
460
- </span>
461
- </div>
462
- </div>
463
- </a>
464
- </li>
465
- </ul>
466
- </li>
467
- <li class="pX-20 pY-15 ta-c bdT">
468
- <span>
469
- <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>
470
- </span>
471
- </li>
472
- </ul>
473
- </li>
474
- <li class="dropdown">
475
- <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
476
- <div class="peer mR-10">
477
- <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">
478
92
  </div>
479
- <div class="peer">
480
- <span class="fsz-sm c-grey-900">John Doe</span>
481
- </div>
482
- </a>
483
- <ul class="dropdown-menu fsz-sm">
484
- <li>
485
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
486
- <i class="ti-settings mR-10"></i>
487
- <span>Setting</span>
488
- </a>
489
- </li>
490
- <li>
491
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
492
- <i class="ti-user mR-10"></i>
493
- <span>Profile</span>
494
- </a>
495
- </li>
496
- <li>
497
- <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
498
- <i class="ti-email mR-10"></i>
499
- <span>Messages</span>
500
- </a>
501
- </li>
502
- <li role="separator" class="divider"></li>
503
- <li>
504
- <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
505
- <i class="ti-power-off mR-10"></i>
506
- <span>Logout</span>
507
- </a>
508
- </li>
509
- </ul>
510
- </li>
511
- </ul>
512
- </div>
513
- </div>
93
+ </div>
514
94
 
515
- <!-- ### $App Screen Content ### -->
516
- <main class='main-content bgc-grey-100'>
517
- <div id='mainContent'>
518
- <div class="row gap-20 masonry pos-r">
519
- <div class="masonry-sizer col-md-6"></div>
520
- <div class="masonry-item col-md-6">
521
- <div class="bgc-white p-20 bd">
522
- <h6 class="c-grey-900">Basic Form</h6>
523
- <div class="mT-30">
524
- <form>
525
- <div class="mb-3">
526
- <label class="form-label" for="exampleInputEmail1">Email address</label>
527
- <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
528
- <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
529
- </div>
530
- <div class="mb-3">
531
- <label class="form-label" for="exampleInputPassword1">Password</label>
532
- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
533
- </div>
534
- <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
535
- <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
536
- <label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
537
- <span class="peer peer-greed">Call John for Dinner</span>
538
- </label>
539
- </div>
540
- <button type="submit" class="btn btn-primary btn-color">Submit</button>
541
- </form>
542
- </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>
543
99
  </div>
544
100
  </div>
545
- <div class="masonry-item col-md-6">
546
- <div class="bgc-white p-20 bd">
547
- <h6 class="c-grey-900">Complex Form Layout</h6>
548
- <div class="mT-30">
549
- <form>
550
- <div class="row">
551
- <div class="mb-3 col-md-6">
552
- <label class="form-label" for="inputEmail4">Email</label>
553
- <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
554
- </div>
555
- <div class="mb-3 col-md-6">
556
- <label class="form-label" for="inputPassword4">Password</label>
557
- <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
558
- </div>
559
- </div>
560
- <div class="mb-3">
561
- <label class="form-label" for="inputAddress">Address</label>
562
- <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
563
- </div>
564
- <div class="mb-3">
565
- <label class="form-label" for="inputAddress2">Address 2</label>
566
- <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
567
- </div>
568
- <div class="row">
569
- <div class="mb-3 col-md-6">
570
- <label class="form-label" for="inputCity">City</label>
571
- <input type="text" class="form-control" id="inputCity">
572
- </div>
573
- <div class="mb-3 col-md-4">
574
- <label class="form-label" for="inputState">State</label>
575
- <select id="inputState" class="form-control">
576
- <option selected>Choose...</option>
577
- <option>...</option>
578
- </select>
579
- </div>
580
- <div class="mb-3 col-md-2">
581
- <label class="form-label" for="inputZip">Zip</label>
582
- <input type="text" class="form-control" id="inputZip">
583
- </div>
584
- </div>
585
- <div class="row">
586
- <div class="mb-3 col-md-6">
587
- <label class="form-label fw-500">Birthdate</label>
588
- <div class="timepicker-input input-icon mb-3">
589
- <div class="input-group">
590
- <div class="input-group-text bgc-white bd bdwR-0">
591
- <i class="ti-calendar"></i>
592
- </div>
593
- <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Select Date">
594
- </div>
595
- </div>
596
- </div>
597
- </div>
598
- <div class="mb-3">
599
- <div class="checkbox checkbox-circle checkbox-info peers ai-c">
600
- <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
601
- <label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
602
- <span class="peer peer-greed">Call John for Dinner</span>
603
- </label>
604
- </div>
605
- </div>
606
- <button type="submit" class="btn btn-primary btn-color">Sign in</button>
607
- </form>
608
- </div>
609
- </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><span class="track"></span> Weekly product updates</label>
105
+ <label class="switch span-2"><input type="checkbox" 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><span class="track"></span> Two-factor auth reminders</label>
610
108
  </div>
611
- <div class="masonry-item col-md-6">
612
- <div class="bgc-white p-20 bd">
613
- <h6 class="c-grey-900">Horizontal Form</h6>
614
- <div class="mT-30">
615
- <form>
616
- <div class="mb-3 row">
617
- <label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
618
- <div class="col-sm-10">
619
- <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
620
- </div>
621
- </div>
622
- <div class="mb-3 row">
623
- <label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
624
- <div class="col-sm-10">
625
- <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
626
- </div>
627
- </div>
628
- <fieldset class="mb-3">
629
- <div class="row">
630
- <legend class="col-form-legend col-sm-2">Radios</legend>
631
- <div class="col-sm-10">
632
- <div class="form-check">
633
- <label class="form-label form-check-label">
634
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
635
- Option one is this and that&mdash;be sure to include why it's great
636
- </label>
637
- </div>
638
- <div class="form-check">
639
- <label class="form-label form-check-label">
640
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
641
- Option two can be something else and selecting it will deselect option one
642
- </label>
643
- </div>
644
- <div class="form-check disabled">
645
- <label class="form-label form-check-label">
646
- <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
647
- Option three is disabled
648
- </label>
649
- </div>
650
- </div>
651
- </div>
652
- </fieldset>
653
- <div class="mb-3 row">
654
- <div class="col-sm-2">Checkbox</div>
655
- <div class="col-sm-10">
656
- <div class="form-check">
657
- <label class="form-label form-check-label">
658
- <input class="form-check-input" type="checkbox"> Check me out
659
- </label>
660
- </div>
661
- </div>
662
- </div>
663
- <div class="mb-3 row">
664
- <div class="col-sm-10">
665
- <button type="submit" class="btn btn-primary btn-color">Sign in</button>
666
- </div>
667
- </div>
668
- </form>
669
- </div>
670
- </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>
671
115
  </div>
672
- <div class="masonry-item col-md-6">
673
- <div class="bgc-white p-20 bd">
674
- <h6 class="c-grey-900">Disabled Forms</h6>
675
- <div class="mT-30">
676
- <form>
677
- <fieldset disabled>
678
- <div class="mb-3">
679
- <label class="form-label" for="disabledTextInput">Disabled input</label>
680
- <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
681
- </div>
682
- <div class="mb-3">
683
- <label class="form-label" for="disabledSelect">Disabled select menu</label>
684
- <select id="disabledSelect" class="form-control">
685
- <option>Disabled select</option>
686
- </select>
687
- </div>
688
- <div class="form-check">
689
- <label class="form-label" class="form-check-label">
690
- <input class="form-check-input" type="checkbox"> Can't check this
691
- </label>
692
- </div>
693
- <button type="submit" class="btn btn-primary btn-color">Submit</button>
694
- </fieldset>
695
- </form>
696
- </div>
116
+ </form>
117
+ </section>
118
+
119
+ <!-- Input states -->
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>
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...">
697
145
  </div>
698
146
  </div>
699
- <div class="masonry-item col-md-6">
700
- <div class="bgc-white p-20 bd">
701
- <h6 class="c-grey-900">Validation</h6>
702
- <div class="mT-30">
703
- <form class="container" id="needs-validation" novalidate>
704
- <div class="row">
705
- <div class="col-md-6 mb-3">
706
- <label class="form-label" for="validationCustom01">First name</label>
707
- <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
708
- </div>
709
- <div class="col-md-6 mb-3">
710
- <label class="form-label" for="validationCustom02">Last name</label>
711
- <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
712
- </div>
713
- </div>
714
- <div class="row">
715
- <div class="col-md-6 mb-3">
716
- <label class="form-label" for="validationCustom03">City</label>
717
- <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
718
- <div class="invalid-feedback">
719
- Please provide a valid city.
720
- </div>
721
- </div>
722
- <div class="col-md-3 mb-3">
723
- <label class="form-label" for="validationCustom04">State</label>
724
- <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
725
- <div class="invalid-feedback">
726
- Please provide a valid state.
727
- </div>
728
- </div>
729
- <div class="col-md-3 mb-3">
730
- <label class="form-label" for="validationCustom05">Zip</label>
731
- <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
732
- <div class="invalid-feedback">
733
- Please provide a valid zip.
734
- </div>
735
- </div>
736
- </div>
737
- <button class="btn btn-primary btn-color" type="submit">Submit form</button>
738
- </form>
739
- <script>
740
- // Example starter JavaScript for disabling form submissions if there are invalid fields
741
- (function() {
742
- 'use strict';
743
-
744
- window.addEventListener('load', function() {
745
- var form = document.getElementById('needs-validation');
746
- form.addEventListener('submit', function(event) {
747
- if (form.checkValidity() === false) {
748
- event.preventDefault();
749
- event.stopPropagation();
750
- }
751
- form.classList.add('was-validated');
752
- }, false);
753
- }, false);
754
- })();
755
- </script>
756
- </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.
757
153
  </div>
758
154
  </div>
759
155
  </div>
760
- </div>
156
+ </section>
157
+
158
+ <!-- Selects + textarea -->
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>
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
+ <!-- Checkboxes + radios -->
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><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><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><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
+ <!-- Switches -->
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><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><span class="track"></span> Auto-save drafts every 30 seconds</label>
222
+ <label class="switch"><input type="checkbox" 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>
761
230
  </main>
762
-
763
- <!-- ### $App Screen Footer ### -->
764
- <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
765
- <span>Copyright © 2025 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
766
- </footer>
231
+ <div data-shell-footer></div>
767
232
  </div>
768
233
  </div>
769
234
  </body>