npm - domma-cms - Versions diffs - 0.1.0 → 0.2.0 - Mend

domma-cms 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/admin/css/admin.css +78 -1
package/admin/js/api.js +32 -0
package/admin/js/app.js +24 -7
package/admin/js/config/sidebar-config.js +8 -0
package/admin/js/templates/collection-editor.html +80 -0
package/admin/js/templates/collection-entries.html +36 -0
package/admin/js/templates/collections.html +12 -0
package/admin/js/templates/documentation.html +136 -0
package/admin/js/templates/navigation.html +26 -4
package/admin/js/templates/page-editor.html +91 -85
package/admin/js/templates/settings.html +433 -172
package/admin/js/views/collection-editor.js +487 -0
package/admin/js/views/collection-entries.js +484 -0
package/admin/js/views/collections.js +153 -0
package/admin/js/views/dashboard.js +14 -6
package/admin/js/views/index.js +9 -3
package/admin/js/views/login.js +3 -2
package/admin/js/views/navigation.js +77 -11
package/admin/js/views/page-editor.js +207 -25
package/admin/js/views/pages.js +14 -6
package/admin/js/views/settings.js +137 -2
package/admin/js/views/users.js +10 -7
package/bin/cli.js +37 -10
package/config/auth.json +2 -1
package/config/content.json +1 -0
package/config/navigation.json +14 -4
package/config/plugins.json +0 -18
package/config/presets.json +4 -8
package/config/site.json +44 -3
package/package.json +6 -2
package/plugins/domma-effects/admin/templates/domma-effects.html +92 -3
package/plugins/domma-effects/plugin.js +125 -0
package/plugins/domma-effects/public/inject-body.html +19 -0
package/plugins/example-analytics/admin/views/analytics.js +2 -2
package/plugins/example-analytics/plugin.json +8 -0
package/plugins/example-analytics/stats.json +15 -1
package/plugins/form-builder/admin/templates/form-editor.html +19 -6
package/plugins/form-builder/admin/views/form-editor.js +634 -9
package/plugins/form-builder/admin/views/form-submissions.js +4 -4
package/plugins/form-builder/admin/views/forms-list.js +5 -5
package/plugins/form-builder/data/forms/consent.json +104 -0
package/plugins/form-builder/data/forms/contacts.json +66 -0
package/plugins/form-builder/data/submissions/consent.json +13 -0
package/plugins/form-builder/data/submissions/contacts.json +26 -0
package/plugins/form-builder/plugin.js +62 -11
package/plugins/form-builder/plugin.json +12 -16
package/plugins/form-builder/public/form-logic-engine.js +568 -0
package/plugins/form-builder/public/inject-body.html +88 -6
package/plugins/form-builder/public/inject-head.html +16 -0
package/plugins/form-builder/public/package.json +1 -0
package/public/css/site.css +113 -0
package/public/js/btt.js +90 -0
package/public/js/cookie-consent.js +61 -0
package/public/js/site.js +129 -34
package/scripts/build.js +129 -0
package/scripts/seed.js +517 -7
package/server/routes/api/collections.js +301 -0
package/server/routes/api/settings.js +66 -2
package/server/server.js +19 -15
package/server/services/collections.js +430 -0
package/server/services/content.js +11 -2
package/server/services/hooks.js +109 -0
package/server/services/markdown.js +500 -149
package/server/services/plugins.js +6 -1
package/server/services/renderer.js +73 -7
package/server/templates/page.html +38 -3
package/plugins/back-to-top/admin/templates/back-to-top-settings.html +0 -55
package/plugins/back-to-top/admin/views/back-to-top-settings.js +0 -44
package/plugins/back-to-top/config.js +0 -10
package/plugins/back-to-top/plugin.js +0 -24
package/plugins/back-to-top/plugin.json +0 -36
package/plugins/back-to-top/public/inject-body.html +0 -105
package/plugins/cookie-consent/admin/templates/cookie-consent-settings.html +0 -113
package/plugins/cookie-consent/admin/views/cookie-consent-settings.js +0 -73
package/plugins/cookie-consent/config.js +0 -30
package/plugins/cookie-consent/plugin.js +0 -24
package/plugins/cookie-consent/plugin.json +0 -36
package/plugins/cookie-consent/public/inject-body.html +0 -69
package/plugins/custom-css/admin/templates/custom-css.html +0 -17
package/plugins/custom-css/admin/views/custom-css.js +0 -35
package/plugins/custom-css/config.js +0 -1
package/plugins/custom-css/data/custom.css +0 -0
package/plugins/custom-css/plugin.js +0 -63
package/plugins/custom-css/plugin.json +0 -32
package/plugins/custom-css/public/inject-head.html +0 -1
package/plugins/form-builder/data/forms/contact.json +0 -52
package/plugins/form-builder/data/submissions/contact.json +0 -14

package/admin/js/templates/settings.html CHANGED Viewed

@@ -3,188 +3,449 @@
     <button id="save-settings-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
 </div>
-<div class="card card-collapsible mb-4">
-  <div class="card-header" role="button" tabindex="0">
-    <div class="card-header-content"><h2>General</h2></div>
-    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+<div class="tabs" id="settings-tabs">
+  <div class="tab-list">
+    <button class="tab-item active">General</button>
+    <button class="tab-item">SEO</button>
+    <button class="tab-item">Footer</button>
+    <button class="tab-item">Email / SMTP</button>
+    <button class="tab-item">Back to Top</button>
+    <button class="tab-item">Cookie Consent</button>
+    <button class="tab-item">Custom CSS</button>
   </div>
-    <div class="card-body">
-        <div class="row mb-3">
-            <div class="col-6">
-                <label class="form-label">Site Title</label>
-                <input id="field-site-title" type="text" class="form-input" placeholder="My Site">
-            </div>
-            <div class="col-6">
-                <label class="form-label">Tagline</label>
-                <input id="field-tagline" type="text" class="form-input" placeholder="Built with Domma CMS">
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-6">
-                <label class="form-label">Public Site Theme</label>
-                <select id="field-theme" class="form-select">
-                    <optgroup label="Charcoal">
-                        <option value="charcoal-dark">Charcoal Dark</option>
-                        <option value="charcoal-light">Charcoal Light</option>
-                    </optgroup>
-                    <optgroup label="Ocean">
-                        <option value="ocean-dark">Ocean Dark</option>
-                        <option value="ocean-light">Ocean Light</option>
-                    </optgroup>
-                    <optgroup label="Forest">
-                        <option value="forest-dark">Forest Dark</option>
-                        <option value="forest-light">Forest Light</option>
-                    </optgroup>
-                    <optgroup label="Sunset">
-                        <option value="sunset-dark">Sunset Dark</option>
-                        <option value="sunset-light">Sunset Light</option>
-                    </optgroup>
-                    <optgroup label="Royal">
-                        <option value="royal-dark">Royal Dark</option>
-                        <option value="royal-light">Royal Light</option>
-                    </optgroup>
-                    <optgroup label="Lemon">
-                        <option value="lemon-dark">Lemon Dark</option>
-                        <option value="lemon-light">Lemon Light</option>
-                    </optgroup>
-                    <optgroup label="Silver">
-                        <option value="silver-dark">Silver Dark</option>
-                        <option value="silver-light">Silver Light</option>
-                    </optgroup>
-                    <optgroup label="Other">
-                        <option value="grayve">Grayve</option>
-                        <option value="christmas-dark">Christmas Dark</option>
-                        <option value="christmas-light">Christmas Light</option>
-                    </optgroup>
-                </select>
-                <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing website.</p>
-            </div>
-            <div class="col-6">
-                <label class="form-label">Admin Theme</label>
-                <select id="field-admin-theme" class="form-select">
-                    <optgroup label="Charcoal">
-                        <option value="charcoal-dark">Charcoal Dark</option>
-                        <option value="charcoal-light">Charcoal Light</option>
-                    </optgroup>
-                    <optgroup label="Ocean">
-                        <option value="ocean-dark">Ocean Dark</option>
-                        <option value="ocean-light">Ocean Light</option>
-                    </optgroup>
-                    <optgroup label="Forest">
-                        <option value="forest-dark">Forest Dark</option>
-                        <option value="forest-light">Forest Light</option>
-                    </optgroup>
-                    <optgroup label="Sunset">
-                        <option value="sunset-dark">Sunset Dark</option>
-                        <option value="sunset-light">Sunset Light</option>
-                    </optgroup>
-                    <optgroup label="Royal">
-                        <option value="royal-dark">Royal Dark</option>
-                        <option value="royal-light">Royal Light</option>
-                    </optgroup>
-                    <optgroup label="Lemon">
-                        <option value="lemon-dark">Lemon Dark</option>
-                        <option value="lemon-light">Lemon Light</option>
-                    </optgroup>
-                    <optgroup label="Silver">
-                        <option value="silver-dark">Silver Dark</option>
-                        <option value="silver-light">Silver Light</option>
-                    </optgroup>
-                    <optgroup label="Other">
-                        <option value="grayve">Grayve</option>
-                        <option value="christmas-dark">Christmas Dark</option>
-                        <option value="christmas-light">Christmas Light</option>
-                    </optgroup>
-                </select>
-                <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
-            </div>
+  <div class="tab-content">
+    <!-- General -->
+    <div class="tab-panel active">
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Site Title</label>
+          <input id="field-site-title" type="text" class="form-input" placeholder="My Site">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Tagline</label>
+          <input id="field-tagline" type="text" class="form-input" placeholder="Built with Domma CMS">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Font Family</label>
+          <select id="field-font-family" class="form-select">
+            <option value="Roboto">Roboto (default)</option>
+            <option value="Inter">Inter</option>
+            <option value="Open Sans">Open Sans</option>
+            <option value="Lato">Lato</option>
+            <option value="Nunito">Nunito</option>
+            <option value="Poppins">Poppins</option>
+            <option value="Source Sans 3">Source Sans 3</option>
+            <option value="Merriweather">Merriweather (serif)</option>
+            <option value="Playfair Display">Playfair Display (serif)</option>
+            <option value="system-ui">System UI (no web font)</option>
+          </select>
+          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
+            website body text.</p>
+        </div>
+        <div class="col-3">
+          <label class="form-label">Font Size</label>
+          <select id="field-font-size" class="form-select">
+            <option value="13">13px — Compact</option>
+            <option value="14">14px — Small</option>
+            <option value="15">15px — Slightly small</option>
+            <option value="16">16px — Default</option>
+            <option value="17">17px — Slightly large</option>
+            <option value="18">18px — Large</option>
+            <option value="20">20px — Extra large</option>
+          </select>
+          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Root font size. All rem/em values
+            scale with this.</p>
         </div>
+      </div>
+      <div class="row">
+        <div class="col-6">
+          <label class="form-label">Public Site Theme</label>
+          <select id="field-theme" class="form-select">
+            <optgroup label="Charcoal">
+              <option value="charcoal-dark">Charcoal Dark</option>
+              <option value="charcoal-light">Charcoal Light</option>
+            </optgroup>
+            <optgroup label="Ocean">
+              <option value="ocean-dark">Ocean Dark</option>
+              <option value="ocean-light">Ocean Light</option>
+            </optgroup>
+            <optgroup label="Forest">
+              <option value="forest-dark">Forest Dark</option>
+              <option value="forest-light">Forest Light</option>
+            </optgroup>
+            <optgroup label="Sunset">
+              <option value="sunset-dark">Sunset Dark</option>
+              <option value="sunset-light">Sunset Light</option>
+            </optgroup>
+            <optgroup label="Royal">
+              <option value="royal-dark">Royal Dark</option>
+              <option value="royal-light">Royal Light</option>
+            </optgroup>
+            <optgroup label="Lemon">
+              <option value="lemon-dark">Lemon Dark</option>
+              <option value="lemon-light">Lemon Light</option>
+            </optgroup>
+            <optgroup label="Silver">
+              <option value="silver-dark">Silver Dark</option>
+              <option value="silver-light">Silver Light</option>
+            </optgroup>
+            <optgroup label="Unicorn">
+              <option value="unicorn-dark">Unicorn Dark</option>
+              <option value="unicorn-light">Unicorn Light</option>
+            </optgroup>
+            <optgroup label="Dreamy">
+              <option value="dreamy-dark">Dreamy Dark</option>
+              <option value="dreamy-light">Dreamy Light</option>
+            </optgroup>
+            <optgroup label="Grayve">
+              <option value="grayve-dark">Grayve Dark</option>
+              <option value="grayve-light">Grayve Light</option>
+            </optgroup>
+            <optgroup label="Other">
+              <option value="christmas-dark">Christmas Dark</option>
+              <option value="christmas-light">Christmas Light</option>
+            </optgroup>
+          </select>
+          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing
+            website.</p>
+        </div>
+        <div class="col-6">
+          <label class="form-label">Admin Theme</label>
+          <select id="field-admin-theme" class="form-select">
+            <optgroup label="Charcoal">
+              <option value="charcoal-dark">Charcoal Dark</option>
+              <option value="charcoal-light">Charcoal Light</option>
+            </optgroup>
+            <optgroup label="Ocean">
+              <option value="ocean-dark">Ocean Dark</option>
+              <option value="ocean-light">Ocean Light</option>
+            </optgroup>
+            <optgroup label="Forest">
+              <option value="forest-dark">Forest Dark</option>
+              <option value="forest-light">Forest Light</option>
+            </optgroup>
+            <optgroup label="Sunset">
+              <option value="sunset-dark">Sunset Dark</option>
+              <option value="sunset-light">Sunset Light</option>
+            </optgroup>
+            <optgroup label="Royal">
+              <option value="royal-dark">Royal Dark</option>
+              <option value="royal-light">Royal Light</option>
+            </optgroup>
+            <optgroup label="Lemon">
+              <option value="lemon-dark">Lemon Dark</option>
+              <option value="lemon-light">Lemon Light</option>
+            </optgroup>
+            <optgroup label="Silver">
+              <option value="silver-dark">Silver Dark</option>
+              <option value="silver-light">Silver Light</option>
+            </optgroup>
+            <optgroup label="Unicorn">
+              <option value="unicorn-dark">Unicorn Dark</option>
+              <option value="unicorn-light">Unicorn Light</option>
+            </optgroup>
+            <optgroup label="Dreamy">
+              <option value="dreamy-dark">Dreamy Dark</option>
+              <option value="dreamy-light">Dreamy Light</option>
+            </optgroup>
+            <optgroup label="Grayve">
+              <option value="grayve-dark">Grayve Dark</option>
+              <option value="grayve-light">Grayve Light</option>
+            </optgroup>
+            <optgroup label="Other">
+              <option value="christmas-dark">Christmas Dark</option>
+              <option value="christmas-light">Christmas Light</option>
+            </optgroup>
+          </select>
+          <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
+        </div>
+      </div>
     </div>
-</div>
-<div class="card card-collapsible mb-4">
-  <div class="card-header" role="button" tabindex="0">
-    <div class="card-header-content"><h2>SEO Defaults</h2></div>
-    <span class="card-collapse-icon" data-icon="chevron-down"></span>
-  </div>
-    <div class="card-body">
-        <div class="row mb-3">
-            <div class="col-8">
-                <label class="form-label">Default Site Title</label>
-                <input id="field-seo-title" type="text" class="form-input" placeholder="My Site">
-            </div>
-            <div class="col-4">
-                <label class="form-label">Title Separator</label>
-                <input id="field-seo-separator" type="text" class="form-input" placeholder=" | ">
-            </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <label class="form-label">Default Meta Description</label>
-                <input id="field-seo-desc" type="text" class="form-input" placeholder="Brief description of your site">
-            </div>
+    <!-- SEO -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col-8">
+          <label class="form-label">Default Site Title</label>
+          <input id="field-seo-title" type="text" class="form-input" placeholder="My Site">
         </div>
+        <div class="col-4">
+          <label class="form-label">Title Separator</label>
+          <input id="field-seo-separator" type="text" class="form-input" placeholder=" | ">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <label class="form-label">Default Meta Description</label>
+          <input id="field-seo-desc" type="text" class="form-input" placeholder="Brief description of your site">
+        </div>
+      </div>
     </div>
-</div>
-<div class="card card-collapsible mb-4">
-  <div class="card-header" role="button" tabindex="0">
-    <div class="card-header-content"><h2>Footer</h2></div>
-    <span class="card-collapse-icon" data-icon="chevron-down"></span>
-  </div>
-    <div class="card-body">
-        <div class="row">
-            <div class="col">
-                <label class="form-label">Copyright Text</label>
-                <input id="field-footer-copy" type="text" class="form-input" placeholder="© 2026 My Site">
-            </div>
+    <!-- Footer -->
+    <div class="tab-panel">
+      <div class="row mb-4">
+        <div class="col">
+          <label class="form-label">Copyright Text</label>
+          <input id="field-footer-copy" type="text" class="form-input" placeholder="© 2026 My Site">
+        </div>
+      </div>
+      <h3 class="mb-3" style="font-size:1rem;font-weight:600;">Social Media Icons</h3>
+      <p class="text-muted mb-3" style="font-size:.875rem;">Enter the full URL for each platform to show its icon in the
+        footer. Leave blank to hide.</p>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">X / Twitter</label>
+          <input id="field-social-twitter" type="url" class="form-input" placeholder="https://x.com/yourhandle">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Facebook</label>
+          <input id="field-social-facebook" type="url" class="form-input" placeholder="https://facebook.com/yourpage">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Instagram</label>
+          <input id="field-social-instagram" type="url" class="form-input"
+                 placeholder="https://instagram.com/yourhandle">
         </div>
+        <div class="col-6">
+          <label class="form-label">LinkedIn</label>
+          <input id="field-social-linkedin" type="url" class="form-input"
+                 placeholder="https://linkedin.com/company/yourcompany">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-6">
+          <label class="form-label">GitHub</label>
+          <input id="field-social-github" type="url" class="form-input" placeholder="https://github.com/yourorg">
+        </div>
+        <div class="col-6">
+          <label class="form-label">YouTube</label>
+          <input id="field-social-youtube" type="url" class="form-input" placeholder="https://youtube.com/@yourchannel">
+        </div>
+      </div>
     </div>
-</div>
-<div class="card card-collapsible mb-4">
-  <div class="card-header" role="button" tabindex="0">
-    <div class="card-header-content"><h2>Email / SMTP</h2></div>
-    <span class="card-collapse-icon" data-icon="chevron-down"></span>
-  </div>
-    <div class="card-body">
-        <div class="row mb-3">
-            <div class="col-8">
-                <label class="form-label">SMTP Host</label>
-                <input id="field-smtp-host" type="text" class="form-input" placeholder="smtp.example.com">
-            </div>
-            <div class="col-4">
-                <label class="form-label">Port</label>
-                <input id="field-smtp-port" type="number" class="form-input" placeholder="587" value="587">
-            </div>
-        </div>
-        <div class="row mb-3">
-            <div class="col-6">
-                <label class="form-label">Username</label>
-                <input id="field-smtp-user" type="text" class="form-input" placeholder="user@example.com" autocomplete="off">
-            </div>
-            <div class="col-6">
-                <label class="form-label">Password</label>
-                <input id="field-smtp-pass" type="password" class="form-input" placeholder="••••••••" autocomplete="new-password">
-            </div>
-        </div>
-        <div class="row mb-3">
-            <div class="col">
-                <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                    <input id="field-smtp-secure" type="checkbox" class="form-check"> Use TLS (port 465)
-                </label>
-                <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Enable for SMTPS. Leave off for STARTTLS (port 587).</p>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-6">
-                <label class="form-label">From Address</label>
-                <input id="field-smtp-from-address" type="email" class="form-input" placeholder="noreply@example.com">
-            </div>
-            <div class="col-6">
-                <label class="form-label">From Name</label>
-                <input id="field-smtp-from-name" type="text" class="form-input" placeholder="My Website">
-            </div>
+    <!-- Email / SMTP -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col-8">
+          <label class="form-label">SMTP Host</label>
+          <input id="field-smtp-host" type="text" class="form-input" placeholder="smtp.example.com">
+        </div>
+        <div class="col-4">
+          <label class="form-label">Port</label>
+          <input id="field-smtp-port" type="number" class="form-input" placeholder="587" value="587">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Username</label>
+          <input id="field-smtp-user" type="text" class="form-input" placeholder="user@example.com" autocomplete="off">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Password</label>
+          <input id="field-smtp-pass" type="password" class="form-input" placeholder="••••••••"
+                 autocomplete="new-password">
         </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+            <input id="field-smtp-secure" type="checkbox" class="form-check"> Use TLS (port 465)
+          </label>
+          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Enable for SMTPS. Leave off for
+            STARTTLS (port 587).</p>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col-6">
+          <label class="form-label">From Address</label>
+          <input id="field-smtp-from-address" type="email" class="form-input" placeholder="noreply@example.com">
+        </div>
+        <div class="col-6">
+          <label class="form-label">From Name</label>
+          <input id="field-smtp-from-name" type="text" class="form-input" placeholder="My Website">
+        </div>
+      </div>
+      <div style="border-top:1px solid var(--border-color,#333);padding-top:1rem;">
+        <p class="form-label" style="margin-bottom:.5rem;">Send Test Email</p>
+        <p class="text-muted" style="font-size:.8rem;margin-bottom:.75rem;">Save your SMTP settings first, then send a test to verify the configuration.</p>
+        <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
+          <input id="field-test-email-to" type="email" class="form-input" placeholder="recipient@example.com" style="max-width:280px;">
+          <button id="send-test-email-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="mail"></span> Send Test
+          </button>
+          <span id="test-email-result" style="font-size:.85rem;"></span>
+        </div>
+      </div>
     </div>
+    <!-- Back to Top -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+            <input id="field-btt-enabled" type="checkbox" class="form-check"> Enable Back to Top button
+          </label>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-4">
+          <label class="form-label">Scroll Threshold (px)</label>
+          <input id="field-btt-threshold" type="number" class="form-input" placeholder="300">
+          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Show button after scrolling this many pixels.</p>
+        </div>
+        <div class="col-4">
+          <label class="form-label">Position</label>
+          <select id="field-btt-position" class="form-select">
+            <option value="bottom-right">Bottom Right</option>
+            <option value="bottom-left">Bottom Left</option>
+          </select>
+        </div>
+        <div class="col-4">
+          <label class="form-label">Bottom Offset (px)</label>
+          <input id="field-btt-offset" type="number" class="form-input" placeholder="32">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Label <span class="text-muted" style="font-weight:400;">(optional)</span></label>
+          <input id="field-btt-label" type="text" class="form-input" placeholder="Back to top">
+          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Leave blank for icon-only button.</p>
+        </div>
+        <div class="col-6" style="padding-top:2rem;">
+          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+            <input id="field-btt-smooth" type="checkbox" class="form-check"> Smooth scroll
+          </label>
+        </div>
+      </div>
+    </div>
+    <!-- Cookie Consent -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+            <input id="field-cc-enabled" type="checkbox" class="form-check"> Enable Cookie Consent banner
+          </label>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-label">Message</label>
+          <textarea id="field-cc-message" class="form-input" rows="3" placeholder="We use cookies…"></textarea>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-3">
+          <label class="form-label">Accept All Text</label>
+          <input id="field-cc-accept-all" type="text" class="form-input" placeholder="Accept All">
+        </div>
+        <div class="col-3">
+          <label class="form-label">Reject All Text</label>
+          <input id="field-cc-reject-all" type="text" class="form-input" placeholder="Reject All">
+        </div>
+        <div class="col-3">
+          <label class="form-label">Customise Text</label>
+          <input id="field-cc-customize" type="text" class="form-input" placeholder="Customize">
+        </div>
+        <div class="col-3">
+          <label class="form-label">Save Preferences Text</label>
+          <input id="field-cc-save-prefs" type="text" class="form-input" placeholder="Save Preferences">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Privacy Policy Text</label>
+          <input id="field-cc-privacy-text" type="text" class="form-input" placeholder="Privacy Policy">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Privacy Policy URL</label>
+          <input id="field-cc-privacy-url" type="text" class="form-input" placeholder="/privacy-policy">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Cookie Policy Text</label>
+          <input id="field-cc-cookie-text" type="text" class="form-input" placeholder="Cookie Policy">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Cookie Policy URL <span class="text-muted" style="font-weight:400;">(leave blank to hide)</span></label>
+          <input id="field-cc-cookie-url" type="text" class="form-input" placeholder="/cookie-policy">
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col-4">
+          <label class="form-label">Position</label>
+          <select id="field-cc-position" class="form-select">
+            <option value="bottom">Bottom</option>
+            <option value="top">Top</option>
+          </select>
+        </div>
+        <div class="col-4">
+          <label class="form-label">Layout</label>
+          <select id="field-cc-layout" class="form-select">
+            <option value="bar">Bar</option>
+            <option value="modal">Modal</option>
+          </select>
+        </div>
+        <div class="col-4">
+          <label class="form-label">Theme</label>
+          <select id="field-cc-theme" class="form-select">
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+          </select>
+        </div>
+      </div>
+      <div class="row mb-3">
+        <div class="col">
+          <label class="form-label" style="margin-bottom:.5rem;">Cookie Categories</label>
+          <p class="text-muted" style="font-size:.8rem;margin-bottom:.75rem;">Necessary cookies are always shown and required. Toggle additional categories below.</p>
+          <div style="display:flex;flex-direction:column;gap:.5rem;">
+            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+              <input id="field-cc-show-functional" type="checkbox" class="form-check"> Show Functional category
+            </label>
+            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+              <input id="field-cc-show-analytics" type="checkbox" class="form-check"> Show Analytics category
+            </label>
+            <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+              <input id="field-cc-show-marketing" type="checkbox" class="form-check"> Show Marketing category
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-4">
+          <label class="form-label">Consent Version</label>
+          <input id="field-cc-version" type="text" class="form-input" placeholder="1.0">
+          <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Increment to re-prompt users who already accepted.</p>
+        </div>
+      </div>
+    </div>
+    <!-- Custom CSS -->
+    <div class="tab-panel">
+      <div class="row mb-3">
+        <div class="col">
+          <p class="text-muted" style="font-size:.875rem;margin-bottom:1rem;">
+            CSS entered here is injected as an inline <code>&lt;style&gt;</code> block into the
+            <code>&lt;head&gt;</code> of every public page. Changes take effect immediately on save.
+          </p>
+          <textarea id="field-custom-css" class="form-input" style="font-family:monospace;min-height:420px;resize:vertical;" spellcheck="false" placeholder="/* Add your custom CSS here */"></textarea>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button id="save-css-btn" class="btn btn-primary"><span data-icon="save"></span> Save CSS</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>