From cd0c724bddbd79b4e2d4010e76a7e64a9d1280f5 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 18 Apr 2026 13:42:09 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20AMPP=20folder=20sync=20integration=20?=
 =?UTF-8?q?=E2=80=94=20pre-create=20folder=20hierarchy=20on=20upload,=20ex?=
 =?UTF-8?q?pose=20lookup=20endpoint=20for=20Script=20Task:=20settings.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/public/settings.html | 298 +++++++++++++++++++++++++++
 1 file changed, 298 insertions(+)
 create mode 100644 services/web-ui/public/settings.html
diff --git a/services/web-ui/public/settings.html b/services/web-ui/public/settings.html
new file mode 100644
index 0000000..0404467
--- /dev/null
+++ b/services/web-ui/public/settings.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wild Dragon - Settings</title>
+    <link rel="stylesheet" href="/css/common.css">
+    <style>
+        .settings-container {
+            max-width: 720px;
+            margin: 0 auto;
+            padding: var(--spacing-lg);
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-xl);
+        }
+
+        .settings-section {
+            background-color: var(--color-bg-tertiary);
+            border: 1px solid var(--color-border);
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+        }
+
+        .settings-section-header {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-md);
+            padding: var(--spacing-lg);
+            border-bottom: 1px solid var(--color-border);
+            background-color: var(--color-bg-secondary);
+        }
+
+        .settings-section-icon {
+            font-size: 1.4rem;
+        }
+
+        .settings-section-title {
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: var(--color-text-primary);
+            margin: 0;
+        }
+
+        .settings-section-subtitle {
+            font-size: 0.85rem;
+            color: var(--color-text-tertiary);
+            margin: 0;
+        }
+
+        .settings-body {
+            padding: var(--spacing-lg);
+            display: flex;
+            flex-direction: column;
+            gap: var(--spacing-md);
+        }
+
+        .settings-row {
+            display: flex;
+            gap: var(--spacing-md);
+            align-items: flex-end;
+        }
+
+        .settings-row .form-group {
+            flex: 1;
+            margin-bottom: 0;
+        }
+
+        .settings-actions {
+            display: flex;
+            gap: var(--spacing-sm);
+            align-items: center;
+            padding-top: var(--spacing-md);
+            border-top: 1px solid var(--color-border);
+        }
+
+        .status-msg {
+            font-size: 0.9rem;
+            padding: var(--spacing-sm) var(--spacing-md);
+            border-radius: var(--radius-md);
+            display: none;
+            align-items: center;
+            gap: var(--spacing-sm);
+        }
+
+        .status-msg.success {
+            display: flex;
+            background-color: rgba(16, 185, 129, 0.15);
+            color: var(--color-success);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+        }
+
+        .status-msg.error {
+            display: flex;
+            background-color: rgba(239, 68, 68, 0.15);
+            color: var(--color-danger);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+        }
+
+        .status-msg.loading {
+            display: flex;
+            background-color: rgba(59, 130, 246, 0.15);
+            color: var(--color-info);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+        }
+
+        .token-hint {
+            font-size: 0.82rem;
+            color: var(--color-text-tertiary);
+            margin-top: var(--spacing-xs);
+        }
+
+        .token-set-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 0.8rem;
+            color: var(--color-success);
+            background-color: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.25);
+            border-radius: 12px;
+            padding: 2px 8px;
+            margin-top: var(--spacing-xs);
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-logo">
+                <div class="header-logo-icon">D</div>
+                <span>WILD DRAGON</span>
+            </div>
+            <nav class="header-nav">
+                <div class="nav-item" data-page="assets">Assets</div>
+                <div class="nav-item" data-page="capture">Capture</div>
+                <div class="nav-item" data-page="upload">Upload</div>
+                <div class="nav-item" data-page="recorders">Recorders</div>
+                <div class="nav-item active" data-page="settings">Settings</div>
+            </nav>
+        </header>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <div class="content-area">
+                <div class="content-main">
+                    <div class="settings-container">
+
+                        <h1 style="margin-bottom: 0;">Settings</h1>
+
+                        <!-- AMPP Integration Section -->
+                        <div class="settings-section">
+                            <div class="settings-section-header">
+                                <div class="settings-section-icon">📡</div>
+                                <div>
+                                    <h3 class="settings-section-title">AMPP FramelightX</h3>
+                                    <p class="settings-section-subtitle">Dragon-Wind will pre-create folder paths in AMPP automatically on each upload.</p>
+                                </div>
+                            </div>
+                            <div class="settings-body">
+
+                                <div class="form-group">
+                                    <label class="form-label" for="amppBaseUrl">AMPP Base URL</label>
+                                    <input
+                                        type="url"
+                                        id="amppBaseUrl"
+                                        class="form-input"
+                                        placeholder="https://ampp.yourdomain.net"
+                                    >
+                                </div>
+
+                                <div class="form-group">
+                                    <label class="form-label" for="amppToken">API Token</label>
+                                    <input
+                                        type="password"
+                                        id="amppToken"
+                                        class="form-input"
+                                        placeholder="Paste token — leave blank to keep existing"
+                                    >
+                                    <div id="tokenSetBadge" class="token-set-badge" style="display: none;">✓ Token saved</div>
+                                    <div class="token-hint">Token is stored securely and never returned to the UI.</div>
+                                </div>
+
+                                <div id="amppStatus" class="status-msg"></div>
+
+                                <div class="settings-actions">
+                                    <button class="btn btn-primary" onclick="saveAmpp()">Save</button>
+                                    <button class="btn btn-secondary" onclick="testAmpp()">Test Connection</button>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Status Bar -->
+        <footer class="status-bar">
+            <div class="status-item">
+                <span class="status-indicator" id="statusIndicator"></span>
+                <span id="statusText">Settings</span>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        const API = '/api/v1';
+
+        // ── Navigation ──────────────────────────────────────────────
+        document.querySelectorAll('[data-page]').forEach(el => {
+            el.addEventListener('click', () => {
+                const page = el.dataset.page;
+                if (page === 'assets')    window.location.href = '/index.html';
+                if (page === 'capture')   window.location.href = '/capture.html';
+                if (page === 'upload')    window.location.href = '/upload.html';
+                if (page === 'recorders') window.location.href = '/recorders.html';
+            });
+        });
+
+        // ── Init ─────────────────────────────────────────────────────
+        document.addEventListener('DOMContentLoaded', loadAmppSettings);
+
+        async function loadAmppSettings() {
+            try {
+                const res = await fetch(`${API}/settings/ampp`);
+                if (!res.ok) return;
+                const data = await res.json();
+                if (data.ampp_base_url) {
+                    document.getElementById('amppBaseUrl').value = data.ampp_base_url;
+                }
+                if (data.ampp_token_exists) {
+                    document.getElementById('tokenSetBadge').style.display = 'inline-flex';
+                }
+            } catch (err) {
+                console.error('Failed to load AMPP settings:', err);
+            }
+        }
+
+        // ── Save ──────────────────────────────────────────────────────
+        async function saveAmpp() {
+            const baseUrl = document.getElementById('amppBaseUrl').value.trim();
+            const token   = document.getElementById('amppToken').value.trim();
+
+            if (!baseUrl) {
+                showStatus('amppStatus', 'error', 'Base URL is required.');
+                return;
+            }
+
+            showStatus('amppStatus', 'loading', 'Saving…');
+
+            try {
+                const body = { ampp_base_url: baseUrl };
+                if (token) body.ampp_token = token;
+
+                const res = await fetch(`${API}/settings/ampp`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body),
+                });
+
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Save failed');
+
+                if (token) {
+                    document.getElementById('amppToken').value = '';
+                    document.getElementById('tokenSetBadge').style.display = 'inline-flex';
+                }
+
+                showStatus('amppStatus', 'success', '✓ Settings saved.');
+            } catch (err) {
+                showStatus('amppStatus', 'error', err.message);
+            }
+        }
+
+        // ── Test ──────────────────────────────────────────────────────
+        async function testAmpp() {
+            showStatus('amppStatus', 'loading', 'Testing connection…');
+            try {
+                const res = await fetch(`${API}/settings/ampp/test`, { method: 'POST' });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Test failed');
+                showStatus('amppStatus', 'success', '✓ ' + data.message);
+            } catch (err) {
+                showStatus('amppStatus', 'error', err.message);
+            }
+        }
+
+        // ── Helpers ───────────────────────────────────────────────────
+        function showStatus(id, type, msg) {
+            const el = document.getElementById(id);
+            el.className = 'status-msg ' + type;
+            el.textContent = msg;
+        }
+    </script>
+</body>
+</html>
