domma-cms 0.1.0

package/plugins/domma-effects/public/inject-body.html

@@ -0,0 +1,268 @@
+<script>
+  (function () {
+    'use strict';
+
+    fetch('/api/plugins/domma-effects/settings')
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (cfg) {
+        var respectMotion = cfg.respectMotion !== false;
+        var defaultDuration = cfg.defaultDuration || 600;
+        var defaultAnim = cfg.defaultAnimation || 'fade';
+        var defaultThresh = cfg.defaultThreshold != null ? cfg.defaultThreshold : 0.1;
+        var reducedMotion = respectMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+        var body = document.querySelector('.page-body');
+        if (!body) return;
+
+        function attr(el, key) {
+          return el.getAttribute('data-fx-' + key);
+        }
+
+        function numAttr(el, key, fb) {
+          var v = attr(el, key);
+          return v !== null ? parseFloat(v) : fb;
+        }
+
+        function boolAttr(el, key, fb) {
+          var v = attr(el, key);
+          if (v === null) return fb;
+          return v === 'true' || v === '1';
+        }
+
+        function onVisible(el, thresh, cb) {
+          var o = new IntersectionObserver(function (es) {
+            if (es[0].isIntersecting) {
+              o.unobserve(el);
+              cb();
+            }
+          }, {threshold: thresh});
+          o.observe(el);
+        }
+
+        // ── REVEAL ──────────────────────────────────────────────────────────
+        body.querySelectorAll('.dm-fx-reveal').forEach(function (el) {
+          var animation = attr(el, 'animation') || defaultAnim;
+          var duration = numAttr(el, 'duration', defaultDuration);
+          var delay = numAttr(el, 'delay', 0);
+          var threshold = numAttr(el, 'threshold', defaultThresh);
+          var once = boolAttr(el, 'once', true);
+
+          if (reducedMotion) return;
+
+          // Set initial hidden state before any paint
+          el.style.opacity = '0';
+          el.style.transition = 'none';
+          if (animation === 'slide-up') el.style.transform = 'translateY(30px)';
+          else if (animation === 'slide-down') el.style.transform = 'translateY(-30px)';
+          else if (animation === 'zoom') el.style.transform = 'scale(0.85)';
+          else if (animation === 'flip') el.style.transform = 'rotateY(90deg)';
+
+          // Double rAF: ensures the hidden state is painted before the
+          // IntersectionObserver can fire and trigger the reveal transition.
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              el.style.transition = 'opacity ' + duration + 'ms ease ' + delay + 'ms, transform ' + duration + 'ms ease ' + delay + 'ms';
+
+              var obs = new IntersectionObserver(function (entries) {
+                entries.forEach(function (entry) {
+                  if (entry.isIntersecting) {
+                    el.style.opacity = '1';
+                    el.style.transform = '';
+                    if (once) obs.unobserve(el);
+                  } else if (!once) {
+                    el.style.opacity = '0';
+                    if (animation === 'slide-up') el.style.transform = 'translateY(30px)';
+                    else if (animation === 'slide-down') el.style.transform = 'translateY(-30px)';
+                    else if (animation === 'zoom') el.style.transform = 'scale(0.85)';
+                    else if (animation === 'flip') el.style.transform = 'rotateY(90deg)';
+                    else el.style.transform = '';
+                  }
+                });
+              }, {threshold: threshold});
+              obs.observe(el);
+            });
+          });
+        });
+
+        // ── COUNTER ─────────────────────────────────────────────────────────
+        body.querySelectorAll('.dm-fx-counter').forEach(function (el) {
+          var to = numAttr(el, 'to', 0);
+          var from = numAttr(el, 'from', 0);
+          var duration = numAttr(el, 'duration', 2000);
+          var prefix = attr(el, 'prefix') || '';
+          var suffix = attr(el, 'suffix') || '';
+          var decimals = numAttr(el, 'decimals', 0);
+          var separator = attr(el, 'separator') || '';
+
+          function fmt(n) {
+            var s = n.toFixed(decimals);
+            if (separator) {
+              var parts = s.split('.');
+              parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+              s = parts.join('.');
+            }
+            return prefix + s + suffix;
+          }
+
+          if (reducedMotion) {
+            el.textContent = fmt(to);
+            return;
+          }
+
+          onVisible(el, 0.5, function () {
+            var start = null;
+            requestAnimationFrame(function step(ts) {
+              if (!start) start = ts;
+              var p = Math.min((ts - start) / duration, 1);
+              var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
+              el.textContent = fmt(from + (to - from) * eased);
+              if (p < 1) requestAnimationFrame(step);
+            });
+          });
+        });
+
+        // ── SCRAMBLE ────────────────────────────────────────────────────────
+        if (!reducedMotion) {
+          body.querySelectorAll('.dm-fx-scramble').forEach(function (el) {
+            var speed = numAttr(el, 'speed', 50);
+            var original = el.textContent;
+            var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&';
+            var revealed = 0;
+
+            onVisible(el, 0.3, function () {
+              var iv = setInterval(function () {
+                var out = '';
+                for (var i = 0; i < original.length; i++) {
+                  if (i < revealed || original[i] === ' ') out += original[i];
+                  else out += chars[Math.floor(Math.random() * chars.length)];
+                }
+                el.textContent = out;
+                if (revealed < original.length) revealed++;
+                else clearInterval(iv);
+              }, speed);
+            });
+          });
+        }
+
+        // ── SHAKE ───────────────────────────────────────────────────────────
+        if (!reducedMotion) {
+          body.querySelectorAll('.dm-fx-shake').forEach(function (el) {
+            var intensity = numAttr(el, 'intensity', 5);
+            var duration = numAttr(el, 'duration', 500);
+            var dir = attr(el, 'direction') || 'horizontal';
+            var axis = dir === 'vertical' ? 'translateY' : 'translateX';
+
+            el.animate([
+              {transform: axis + '(0)'},
+              {transform: axis + '(-' + intensity + 'px)'},
+              {transform: axis + '(' + intensity + 'px)'},
+              {transform: axis + '(-' + intensity + 'px)'},
+              {transform: axis + '(' + intensity + 'px)'},
+              {transform: axis + '(0)'}
+            ], {duration: duration, easing: 'ease-in-out'});
+          });
+        }
+
+        // ── RIPPLE ──────────────────────────────────────────────────────────
+        body.querySelectorAll('.dm-fx-ripple').forEach(function (el) {
+          el.style.position = 'relative';
+          el.style.overflow = 'hidden';
+
+          el.addEventListener('click', function (e) {
+            var colour = attr(el, 'colour') || 'rgba(255,255,255,0.3)';
+            var duration = numAttr(el, 'duration', 600);
+            var rect = el.getBoundingClientRect();
+            var size = Math.max(rect.width, rect.height) * 2;
+            var r = document.createElement('span');
+            r.style.cssText = 'position:absolute;border-radius:50%;pointer-events:none;'
+              + 'width:' + size + 'px;height:' + size + 'px;'
+              + 'left:' + (e.clientX - rect.left - size / 2) + 'px;'
+              + 'top:' + (e.clientY - rect.top - size / 2) + 'px;'
+              + 'background:' + colour + ';transform:scale(0);opacity:1;'
+              + 'transition:transform ' + duration + 'ms ease,opacity ' + duration + 'ms ease;';
+            el.appendChild(r);
+            requestAnimationFrame(function () {
+              r.style.transform = 'scale(1)';
+              r.style.opacity = '0';
+            });
+            setTimeout(function () {
+              r.remove();
+            }, duration);
+          });
+        });
+
+        // ── DOMMA NATIVE EFFECTS (breathe, pulse, scribe, twinkle) ──────────
+        var E = window.Domma && window.Domma.effects;
+        if (E) {
+          body.querySelectorAll('.dm-fx-breathe').forEach(function (el) {
+            if (reducedMotion) return;
+            var opts = {};
+            if (attr(el, 'amplitude')) opts.amplitude = numAttr(el, 'amplitude', 6);
+            if (attr(el, 'duration')) opts.duration = numAttr(el, 'duration', 3000);
+            if (attr(el, 'easing')) opts.easing = attr(el, 'easing');
+            if (attr(el, 'stagger')) opts.stagger = numAttr(el, 'stagger', 0);
+            E.breathe(el, opts);
+          });
+
+          body.querySelectorAll('.dm-fx-pulse').forEach(function (el) {
+            if (reducedMotion) return;
+            var opts = {};
+            if (attr(el, 'scale')) opts.scale = numAttr(el, 'scale', 1.05);
+            if (attr(el, 'duration')) opts.duration = numAttr(el, 'duration', 2000);
+            if (attr(el, 'easing')) opts.easing = attr(el, 'easing');
+            E.pulse(el, opts);
+          });
+
+          body.querySelectorAll('.dm-fx-scribe').forEach(function (el) {
+            var opts = {};
+            if (attr(el, 'speed')) opts.speed = numAttr(el, 'speed', 50);
+            if (attr(el, 'cursor')) opts.cursor = boolAttr(el, 'cursor', true);
+            if (attr(el, 'mode')) opts.mode = attr(el, 'mode');
+            if (attr(el, 'loop')) opts.loop = boolAttr(el, 'loop', false);
+            E.scribe(el, opts);
+          });
+
+          body.querySelectorAll('.dm-fx-twinkle').forEach(function (el) {
+            var opts = {};
+            if (attr(el, 'count')) opts.count = numAttr(el, 'count', 100);
+            if (attr(el, 'shape')) opts.shape = attr(el, 'shape');
+            if (attr(el, 'colour')) opts.colour = attr(el, 'colour');
+            if (attr(el, 'min-size')) opts.minSize = numAttr(el, 'min-size', 1);
+            if (attr(el, 'max-size')) opts.maxSize = numAttr(el, 'max-size', 3);
+            E.twinkle(el, opts);
+          });
+        }
+
+        // ── CELEBRATE ───────────────────────────────────────────────────────
+        var celebrateEls = body.querySelectorAll('.dm-fx-celebrate');
+        if (celebrateEls.length && !reducedMotion) {
+          import('/plugins/domma-effects/public/celebrations/index.js')
+            .then(function (mod) {
+              var CelebrationsEffect = mod.CelebrationsEffect;
+              celebrateEls.forEach(function (el) {
+                var theme = el.getAttribute('data-fx-theme') || 'auto';
+                var intensity = el.getAttribute('data-fx-intensity') || 'medium';
+                var zIndex = el.getAttribute('data-fx-z-index') ? parseInt(el.getAttribute('data-fx-z-index'), 10) : 999;
+
+                if (theme === 'auto') {
+                  theme = CelebrationsEffect.getCurrentTheme();
+                  if (!theme) return; // No active celebration season — skip silently
+                }
+
+                var effect = new CelebrationsEffect({theme: theme, intensity: intensity, enabled: true, zIndex: zIndex});
+                effect.init().then(function () {
+                  effect.start();
+                });
+              });
+            })
+            .catch(function () {
+              // Module not available — degrade silently
+            });
+        }
+      })
+      .catch(function () {
+      });
+  })();
+</script>

package/plugins/example-analytics/admin/templates/analytics.html

@@ -0,0 +1,10 @@
+<div class="view-header">
+    <h1><span data-icon="chart-bar"></span> Analytics</h1>
+    <button id="reset-btn" class="btn btn-ghost btn-sm">Reset stats</button>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="analytics-table"></div>
+    </div>
+</div>

package/plugins/example-analytics/admin/views/analytics.js

@@ -0,0 +1,51 @@
+/**
+ * Analytics Plugin — Admin View
+ * Shows a sortable table of page hit counts.
+ * Loaded dynamically from /plugins/ static path.
+ */
+export const analyticsView = {
+    templateUrl: '/plugins/example-analytics/admin/templates/analytics.html',
+
+    async onMount($container) {
+        await loadStats($container);
+
+        $container.find('#reset-btn').on('click', async () => {
+            const confirmed = await E.confirm('Reset all analytics data? This cannot be undone.');
+            if (!confirmed) return;
+            try {
+              await fetch('/api/plugins/example-analytics/stats', {
+                method: 'DELETE',
+                headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+              });
+                E.toast('Analytics reset.', { type: 'success' });
+                await loadStats($container);
+            } catch {
+                E.toast('Reset failed.', { type: 'error' });
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};
+
+async function loadStats($container) {
+    let stats = [];
+    try {
+      const res = await fetch('/api/plugins/example-analytics/stats', {
+        headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        stats = await res.json();
+    } catch {
+        E.toast('Could not load analytics data.', { type: 'error' });
+    }
+
+    T.create('#analytics-table', {
+        data: stats,
+        columns: [
+            { key: 'url',  label: 'Page URL', render: (val) => `<code>${val}</code>` },
+            { key: 'hits', label: 'Page views' }
+        ],
+        emptyMessage: 'No page views recorded yet.'
+    });
+}

package/plugins/example-analytics/config.js

@@ -0,0 +1,6 @@
+/**
+ * Example Analytics Plugin — Default Configuration
+ */
+export default {
+    excludeAdmin: true
+};

package/plugins/example-analytics/plugin.js

@@ -0,0 +1,58 @@
+/**
+ * Example Analytics Plugin — Server
+ * Tracks page hits in a JSON file alongside the plugin.
+ * Endpoints:
+ *   POST   /api/plugins/example-analytics/hit    - public: record a hit { url }
+ *   GET    /api/plugins/example-analytics/stats  - admin: return all hit counts
+ *   DELETE /api/plugins/example-analytics/stats  - admin: reset all stats
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const STATS_FILE = path.join(__dirname, 'stats.json');
+
+async function readStats() {
+    try {
+        return JSON.parse(await fs.readFile(STATS_FILE, 'utf8'));
+    } catch {
+        return {};
+    }
+}
+
+async function writeStats(stats) {
+    await fs.writeFile(STATS_FILE, JSON.stringify(stats, null, 2) + '\n', 'utf8');
+}
+
+export default async function analyticsPlugin(fastify, options) {
+  const {authenticate, requireAdmin} = options.auth;
+
+  // Record a page hit — called by the client-side injection script (public)
+    fastify.post('/hit', async (request, reply) => {
+        const { url } = request.body || {};
+        if (!url || typeof url !== 'string') {
+            return reply.status(400).send({ error: 'url is required' });
+        }
+
+        const normalised = url.split('?')[0].replace(/\/$/, '') || '/';
+        const stats = await readStats();
+        stats[normalised] = (stats[normalised] || 0) + 1;
+        await writeStats(stats);
+        return { ok: true };
+    });
+
+  // Return all stats — admin only
+  fastify.get('/stats', {preHandler: [authenticate, requireAdmin]}, async () => {
+        const stats = await readStats();
+        return Object.entries(stats)
+            .map(([url, hits]) => ({ url, hits }))
+            .sort((a, b) => b.hits - a.hits);
+    });
+
+  // Reset stats — admin only
+  fastify.delete('/stats', {preHandler: [authenticate, requireAdmin]}, async () => {
+        await writeStats({});
+        return { ok: true };
+    });
+}

package/plugins/example-analytics/plugin.json

@@ -0,0 +1,27 @@
+{
+    "name": "example-analytics",
+    "displayName": "Analytics",
+    "version": "1.0.0",
+    "description": "Basic page view analytics. Tracks hits per page using a simple JSON store.",
+    "author": "Darryl Waterhouse",
+    "date": "2026-03-01",
+    "icon": "chart-bar",
+    "admin": {
+        "sidebar": [
+            { "id": "analytics", "text": "Analytics", "icon": "chart-bar", "url": "#/plugins/analytics", "section": "#/plugins/analytics" }
+        ],
+        "routes": [
+            { "path": "/plugins/analytics", "view": "plugin-analytics", "title": "Analytics - Domma CMS" }
+        ],
+        "views": {
+            "plugin-analytics": {
+                "entry": "example-analytics/admin/views/analytics.js",
+                "exportName": "analyticsView"
+            }
+        }
+    },
+    "inject": {
+        "head": "public/inject-head.html",
+        "bodyEnd": "public/inject-body.html"
+    }
+}

package/plugins/example-analytics/public/inject-body.html

@@ -0,0 +1,13 @@
+<!-- example-analytics: page view tracker -->
+<script>
+(function () {
+    var url = window.location.pathname;
+    if (typeof fetch === 'function') {
+      fetch('/api/plugins/example-analytics/hit', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url: url })
+        }).catch(function () { /* silent fail */ });
+    }
+})();
+</script>

package/plugins/example-analytics/public/inject-head.html

@@ -0,0 +1 @@
+<!-- example-analytics: head injection (empty — tracking is done via body script) -->

package/plugins/example-analytics/stats.json

@@ -0,0 +1 @@
+{}

package/plugins/form-builder/admin/templates/form-editor.html

@@ -0,0 +1,158 @@
+<div class="view-header">
+    <h1 id="editor-title"><span data-icon="edit-3"></span> Form Editor</h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="#/plugins/form-builder" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Forms
+        </a>
+        <button id="preview-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="eye"></span> Preview
+        </button>
+        <button id="save-form-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save
+        </button>
+    </div>
+</div>
+
+<div class="row">
+    <!-- Left column: metadata + fields -->
+    <div class="col-8">
+        <div class="card mb-4">
+            <div class="card-header"><h2>Form Details</h2></div>
+            <div class="card-body">
+                <div class="row mb-3">
+                    <div class="col-7">
+                        <label class="form-label">Title</label>
+                        <input id="field-title" type="text" class="form-input" placeholder="My Form">
+                    </div>
+                    <div class="col-5">
+                        <label class="form-label">Slug</label>
+                        <input id="field-slug" type="text" class="form-input" placeholder="my-form">
+                        <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code></p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <label class="form-label">Description</label>
+                        <textarea id="field-description" class="form-input" rows="2" placeholder="Optional form description..."></textarea>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4">
+            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+                <h2>Fields</h2>
+                <div style="display:flex;gap:.4rem;">
+                    <button id="add-field-btn" class="btn btn-ghost btn-sm">
+                        <span data-icon="plus"></span> Add Field
+                    </button>
+                    <button id="add-page-break-btn" class="btn btn-ghost btn-sm" title="Add a wizard step separator">
+                        <span data-icon="minus"></span> Add Page Break
+                    </button>
+                </div>
+            </div>
+            <div class="card-body" style="padding:0;">
+                <div id="fields-list" style="padding:1rem;">
+                    <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click "Add Field" to get started.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4" id="preview-card" style="display:none;">
+          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+            <h2><span data-icon="eye"></span> Preview</h2>
+            <span id="preview-test-badge"
+                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--primary,#6366f1);">Test Mode — submissions are stored</span>
+          </div>
+            <div class="card-body">
+                <div id="preview-container"></div>
+              <div id="preview-test-result"
+                   style="display:none;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Right column: settings + actions -->
+    <div class="col-4">
+        <div class="card mb-4">
+            <div class="card-header"><h2>Settings</h2></div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label class="form-label">Submit Button Text</label>
+                    <input id="setting-submit-text" type="text" class="form-input" placeholder="Submit" value="Submit">
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">Success Message</label>
+                    <textarea id="setting-success-message" class="form-input" rows="3" placeholder="Thank you for your submission."></textarea>
+                </div>
+                <div>
+                    <label class="form-label">Layout</label>
+                    <select id="setting-layout" class="form-input">
+                        <option value="stacked">Stacked</option>
+                        <option value="inline">Inline</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4">
+            <div class="card-header"><h2>Email Action</h2></div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                        <input id="action-email-enabled" type="checkbox"> Send email on submit
+                    </label>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">Recipients</label>
+                    <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
+                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global SMTP settings.</p>
+                </div>
+                <div>
+                    <label class="form-label">Subject Prefix</label>
+                    <input id="action-email-subject-prefix" type="text" class="form-input" placeholder="[Form]">
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4">
+            <div class="card-header"><h2>Webhook Action</h2></div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                        <input id="action-webhook-enabled" type="checkbox"> POST to webhook on submit
+                    </label>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">URL</label>
+                    <input id="action-webhook-url" type="url" class="form-input" placeholder="https://hooks.example.com/form">
+                </div>
+                <div>
+                    <label class="form-label">Method</label>
+                    <select id="action-webhook-method" class="form-input">
+                        <option value="POST">POST</option>
+                        <option value="PUT">PUT</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mb-4">
+            <div class="card-header"><h2>Spam Protection</h2></div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                        <input id="setting-honeypot" type="checkbox" checked> Enable honeypot field
+                    </label>
+                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Silently discards bot submissions that fill a hidden field.</p>
+                </div>
+                <div>
+                    <label class="form-label">Rate Limit (per minute)</label>
+                    <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
+                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per minute.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

package/plugins/form-builder/admin/templates/form-settings.html

@@ -0,0 +1,29 @@
+<div class="view-header">
+    <h1><span data-icon="settings"></span> Form Builder Settings</h1>
+    <div style="display:flex;gap:.5rem;">
+        <a href="#/plugins/form-builder" class="btn btn-ghost btn-sm">
+            <span data-icon="layout"></span> All Forms
+        </a>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <div class="card-body" style="display:flex;align-items:center;gap:1rem;">
+        <span data-icon="info" style="flex-shrink:0;"></span>
+        <div>
+            <p style="margin:0 0 .25rem;">SMTP and email identity settings have moved to <a href="#/settings" class="link">Site Settings</a>.</p>
+            <p class="text-muted" style="margin:0;font-size:.85rem;">Configure your mail server there, then use the button below to verify the connection.</p>
+        </div>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header"><h2>Test Email</h2></div>
+    <div class="card-body">
+        <p class="text-muted" style="margin:0 0 1rem;font-size:.9rem;">Send a test email using the SMTP settings configured in Site Settings to verify your mail server connection.</p>
+        <button id="test-email-btn" class="btn btn-primary">
+            <span data-icon="send"></span> Send Test Email
+        </button>
+        <p id="test-email-result" class="form-hint" style="margin-top:.75rem;display:none;"></p>
+    </div>
+</div>