radix-cms 0.1.0 → 1.0.0

package/views/admin/media.ejs

@@ -0,0 +1,79 @@
+<%- include('partials/header', { title: 'Media Library', activeNav: 'media' }) %>
+
+<!-- Dropzone CSS & JS CDN -->
+<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
+<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
+
+<!-- Drag & Drop Upload Card -->
+<div class="card" style="margin-bottom: 25px;">
+    <h2 style="font-size: 1.25rem; margin-bottom: 10px;">Upload Files</h2>
+    <p style="font-size: 0.85rem; color: #64748b; margin-bottom: 15px;">Drag & drop images here or click to upload. Files manually copied to <code>/public/uploads</code> will also automatically appear below.</p>
+    
+    <form action="/admin/media/upload" class="dropzone" id="mediaDropzone" style="border: 2px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; padding: 20px; text-align: center; cursor: pointer;">
+        <div class="dz-message" data-dz-message>
+            <span style="font-size: 2rem;">📁</span>
+            <p style="font-weight: 600; margin-top: 8px;">Drop files here or click to upload</p>
+        </div>
+    </form>
+</div>
+
+<!-- Media Grid Card -->
+<div class="card">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <h1 style="font-size: 1.5rem;">Media Library (<%= media.length %>)</h1>
+    </div>
+
+    <% if (media && media.length > 0) { %>
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px;">
+            <% media.forEach(file => { %>
+                <div style="border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column;">
+                    <div style="height: 140px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+                        <img src="<%= file.url %>" alt="<%= file.name %>" style="max-width: 100%; max-height: 100%; object-fit: contain;">
+                    </div>
+                    <div style="padding: 10px; font-size: 0.8rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
+                        <div>
+                            <div style="font-weight: 600; word-break: break-all; margin-bottom: 4px;" title="<%= file.name %>"><%= file.name %></div>
+                            <div style="color: #64748b; font-size: 0.75rem;"><%= file.size %></div>
+                        </div>
+                        <div style="margin-top: 10px; display: flex; justify-content: space-between; align-items: center;">
+                            <button type="button" onclick="copyUrl('<%= file.url %>')" class="btn" style="padding: 3px 8px; font-size: 0.75rem; background: #e2e8f0; color: #334155;">Copy URL</button>
+                            
+                            <% if (user && user.role === 'Administrator') { %>
+                                <form action="/admin/media/delete" method="POST" onsubmit="return confirm('Delete this image?');" style="display: inline;">
+                                    <input type="hidden" name="filename" value="<%= file.name %>">
+                                    <button type="submit" class="btn btn-danger" style="padding: 3px 8px; font-size: 0.75rem;">Delete</button>
+                                </form>
+                            <% } %>
+                        </div>
+                    </div>
+                </div>
+            <% }) %>
+        </div>
+    <% } else { %>
+        <p style="color: #64748b; text-align: center; padding: 40px 0;">No media files uploaded yet. Drag files into the box above or drop images into <code>/public/uploads/</code>.</p>
+    <% } %>
+</div>
+
+<script>
+    // Initialize Dropzone
+    Dropzone.options.mediaDropzone = {
+        paramName: "file",
+        maxFilesize: 10, // MB
+        acceptedFiles: "image/*",
+        init: function() {
+            this.on("queuecomplete", function() {
+                // Auto-refresh page once all files in the batch finish uploading
+                window.location.reload();
+            });
+        }
+    };
+
+    // Helper to copy image relative URL to clipboard
+    function copyUrl(url) {
+        navigator.clipboard.writeText(url).then(() => {
+            alert('Image URL copied: ' + url);
+        });
+    }
+</script>
+
+<%- include('partials/footer') %>

package/views/admin/pages.ejs

@@ -0,0 +1,82 @@
+<%- include('partials/header', { title: 'Pages Management', activeNav: 'pages' }) %>
+
+<div class="card">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <div>
+            <h1 style="font-size: 1.5rem; margin-bottom: 6px;"><%= showTrash ? 'Trash Bin' : 'Pages Management' %></h1>
+            
+            <div style="display: flex; gap: 12px; font-size: 0.85rem;">
+                <a href="/admin/pages" style="color: <%= !showTrash ? '#2563eb' : '#64748b' %>; font-weight: <%= !showTrash ? '600' : 'normal' %>; text-decoration: none;">All Active Pages</a> | 
+                <a href="/admin/pages?view=trash" style="color: <%= showTrash ? '#ef4444' : '#64748b' %>; font-weight: <%= showTrash ? '600' : 'normal' %>; text-decoration: none;">Trash 🗑️</a>
+            </div>
+        </div>
+
+        <% if (!showTrash) { %>
+            <a href="/admin/create" class="btn btn-primary">+ Create New Page</a>
+        <% } %>
+    </div>
+
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>Title</th>
+                <th>Status</th>
+                <th>Min Access</th>
+                <th>Publish Date</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            <% if (pages && pages.length > 0) { %>
+                <% pages.forEach(page => { %>
+                    <tr>
+                        <td>
+                            <strong><%= page.title %></strong>
+                            <% if (page.isStaticOverride) { %>
+                                <span style="display: inline-block; background-color: #fef3c7; color: #b45309; border: 1px solid #fde68a; font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: 6px;" title="This page content is overridden by a file in /views/pages/">
+                                    ⚡ Static Override
+                                </span>
+                            <% } %>
+                            <br>
+                            <small style="color: #64748b;">/<%= page.slug %></small>
+                        </td>
+                        <td>
+                            <span style="padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; 
+                                background: <%= page.status === 'Published' ? '#dcfce7' : page.status === 'Draft' ? '#f1f5f9' : page.status === 'Pending Review' ? '#fef3c7' : page.status === 'Archived' ? '#e2e8f0' : '#fee2e2' %>; 
+                                color: <%= page.status === 'Published' ? '#166534' : page.status === 'Draft' ? '#475569' : page.status === 'Pending Review' ? '#92400e' : page.status === 'Archived' ? '#334155' : '#991b1b' %>;">
+                                <%= page.status %>
+                            </span>
+                        </td>
+                        <td><code><%= page.min_role %></code></td>
+                        <td><%= new Date(page.publish_at).toLocaleString() %></td>
+                        <td>
+                            <% if (!showTrash) { %>
+                                <a href="/admin/edit/<%= page.id %>" class="btn btn-primary" style="padding: 4px 10px; font-size: 0.8rem;">Edit</a>
+                                <form action="/admin/delete/<%= page.id %>" method="POST" style="display: inline;" onsubmit="return confirm('Move page to trash?');">
+                                    <button type="submit" class="btn btn-danger" style="padding: 4px 10px; font-size: 0.8rem;">Trash</button>
+                                </form>
+                            <% } else { %>
+                                <form action="/admin/restore/<%= page.id %>" method="POST" style="display: inline;">
+                                    <button type="submit" class="btn" style="padding: 4px 10px; font-size: 0.8rem; background: #e2e8f0; color: #1e293b;">Restore</button>
+                                </form>
+                                <% if (user && user.role === 'Administrator') { %>
+                                    <form action="/admin/permanent-delete/<%= page.id %>" method="POST" style="display: inline;" onsubmit="return confirm('Permanently delete this page? This action cannot be undone.');">
+                                        <button type="submit" class="btn btn-danger" style="padding: 4px 10px; font-size: 0.8rem;">Delete Permanently</button>
+                                    </form>
+                                <% } %>
+                            <% } %>
+                        </td>
+                    </tr>
+                <% }) %>
+            <% } else { %>
+                <tr>
+                    <td colspan="5" style="text-align: center; color: #64748b; padding: 20px;">
+                        <%= showTrash ? 'Trash is empty.' : 'No pages found.' %>
+                    </td>
+                </tr>
+            <% } %>
+        </tbody>
+    </table>
+</div>
+
+<%- include('partials/footer') %>

package/views/admin/partials/footer.ejs

@@ -0,0 +1,4 @@
+</main>
+    </div>
+</body>
+</html>

package/views/admin/partials/header.ejs

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= typeof title !== 'undefined' ? title : 'Admin' %> | Radix Engine</title>
+    <link rel="stylesheet" href="/css/admin.css">
+    <% if (typeof tinyApiKey !== 'undefined' && tinyApiKey) { %>
+        <script src="https://cdn.tiny.cloud/1/<%= tinyApiKey %>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+    <% } %>
+</head>
+<body>
+
+    <!-- Sidebar Navigation Shell -->
+    <aside class="admin-sidebar">
+        <div class="brand">Radix<span>CMS</span></div>
+        <ul class="admin-nav">
+            <li class="<%= activeNav === 'dashboard' ? 'active' : '' %>">
+                <a href="/admin"><span class="icon">📊</span> Dashboard</a>
+            </li>
+            <li class="<%= activeNav === 'updates' ? 'active' : '' %>">
+                <a href="/admin/updates"><span class="icon">🚀</span> Updates</a>
+            </li>
+            <li class="<%= activeNav === 'pages' ? 'active' : '' %>">
+                <a href="/admin/pages"><span class="icon">📄</span> Pages</a>
+            </li>
+            <li class="<%= activeNav === 'themes' ? 'active' : '' %>">
+                <a href="/admin/themes"><span class="icon">🎨</span> Themes</a>
+            </li>
+            <li class="<%= activeNav === 'media' ? 'active' : '' %>">
+                <a href="/admin/media"><span class="icon">🖼️</span> Media Library</a>
+            </li>
+            <li class="<%= activeNav === 'users' ? 'active' : '' %>">
+                <a href="/admin/users"><span class="icon">👥</span> Users & Roles</a>
+            </li>    
+            <li class="<%= activeNav === 'settings' ? 'active' : '' %>">
+                <a href="/admin/settings"><span class="icon">⚙️</span> Settings</a>
+			</li>     
+        </ul>
+    </aside>
+
+    <!-- Main Content Area Wrapper -->
+    <div class="admin-wrapper">
+        <header class="admin-header">
+            <div class="header-left">
+                <a href="/" target="_blank" style="text-decoration: none; color: #64748b; font-size: 0.9rem;">
+                    🏠 View Site
+                </a>
+            </div>
+            <div class="header-right">
+                <span>Logged in as <strong><%= user ? user.username : 'Admin' %></strong></span>
+                <span class="user-badge"><%= user ? user.role : 'User' %></span>
+                <a href="/admin/logout" style="color: #ef4444; text-decoration: none; font-weight: 500;">Logout</a>
+            </div>
+        </header>
+
+        <main class="admin-content">

package/views/admin/settings.ejs

@@ -0,0 +1,91 @@
+<%- include('partials/header', { title: 'Settings', activeNav: 'settings' }) %>
+
+<h1 style="font-size: 1.5rem; margin-bottom: 20px;">System Settings</h1>
+
+<% if (message) { %>
+    <div style="background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px;">
+        <%= message %>
+    </div>
+<% } %>
+
+<% if (error) { %>
+    <div style="background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px;">
+        <%= error %>
+    </div>
+<% } %>
+
+<form action="/admin/settings" method="POST">
+    <!-- Branding Section -->
+    <div class="card" style="margin-bottom: 25px;">
+        <h2 style="font-size: 1.2rem; margin-bottom: 15px;">Site Branding</h2>
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Website Logo Path/URL</label>
+            <div style="display: flex; gap: 10px;">
+                <input type="text" id="site_logo" name="site_logo" value="<%= settings.site_logo || '' %>" placeholder="/uploads/logo.png" style="flex: 1; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                <a href="/admin/media" target="_blank" class="btn" style="background: #e2e8f0; color: #334155;">Browse Media</a>
+            </div>
+            <small style="color: #64748b; margin-top: 4px; display: block;">Enter path from Media Library or external image URL.</small>
+        </div>
+
+        <% if (settings.site_logo) { %>
+            <div style="margin-top: 10px; padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; width: fit-content;">
+                <small style="display: block; color: #64748b; margin-bottom: 5px;">Logo Preview:</small>
+                <img src="<%= settings.site_logo %>" alt="Site Logo" style="max-height: 50px; object-fit: contain;">
+            </div>
+        <% } %>
+    </div>
+
+    <!-- SMTP Configuration Section -->
+    <div class="card" style="margin-bottom: 25px;">
+        <h2 style="font-size: 1.2rem; margin-bottom: 15px;">Mail Server Configuration (SMTP)</h2>
+        
+        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 15px; margin-bottom: 15px;">
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">SMTP Host</label>
+                <input type="text" name="mail_host" value="<%= settings.mail_host || '192.168.11.10' %>" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+            </div>
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">Port</label>
+                <input type="number" name="mail_port" value="<%= settings.mail_port || '25' %>" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+            </div>
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">Encryption</label>
+                <select name="mail_secure" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                    <option value="0" <%= settings.mail_secure !== '1' ? 'selected' : '' %>>None / STARTTLS</option>
+                    <option value="1" <%= settings.mail_secure === '1' ? 'selected' : '' %>>SSL / TLS</option>
+                </select>
+            </div>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">SMTP Username</label>
+                <input type="text" name="mail_user" value="<%= settings.mail_user || '' %>" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+            </div>
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">SMTP Password</label>
+                <input type="password" name="mail_pass" value="<%= settings.mail_pass || '' %>" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+            </div>
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Sender Email ("From" Address)</label>
+            <input type="email" name="mail_from" value="<%= settings.mail_from || 'noreply@radixcms.local' %>" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <button type="submit" class="btn btn-primary">Save Settings</button>
+    </div>
+</form>
+
+<!-- Test Email Card -->
+<div class="card">
+    <h2 style="font-size: 1.2rem; margin-bottom: 10px;">Send Test Email</h2>
+    <p style="color: #64748b; font-size: 0.9rem; margin-bottom: 15px;">Verify your SMTP configuration by sending a test message.</p>
+
+    <form action="/admin/settings/test-email" method="POST" style="display: flex; gap: 10px; max-width: 500px;">
+        <input type="email" name="recipient_email" required placeholder="recipient@example.com" style="flex: 1; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        <button type="submit" class="btn" style="background: #059669; color: #fff;">Send Test Email</button>
+    </form>
+</div>
+
+<%- include('partials/footer') %>

package/views/admin/setup-admin.ejs

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Radix - Site & Admin Setup</title>
+  <style>
+    body { font-family: system-ui, sans-serif; background: #f7fafc; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+    .card { background: #fff; padding: 28px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); width: 100%; max-width: 640px; }
+    h1 { margin-top: 0; font-size: 1.5rem; text-align: center; }
+    .form-row { display: flex; gap: 12px; }
+    .form-group { margin-bottom: 12px; flex: 1; }
+    label { display:block; font-weight:600; margin-bottom:6px }
+    input[type="text"], input[type="password"], input[type="email"] { width:100%; padding:10px; border:1px solid #e2e8f0; border-radius:4px }
+    .btn { background:#2b6cb0; color:#fff; border:none; padding:10px 14px; border-radius:4px; cursor:pointer; font-weight:700 }
+    .error { background:#fed7d7; color:#9b2c2c; padding:8px; border-radius:4px; margin-bottom:12px }
+    .hint { font-size:0.9rem; color:#4a5568 }
+    .checkbox { display:flex; align-items:center; gap:8px }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Phase 2: Site Information & Admin Setup</h1>
+
+    <% if (error) { %>
+      <div class="error"><%= error %></div>
+    <% } %>
+
+    <p class="hint">After validating the database connection, provide the site title and administrator account details.</p>
+
+    <form action="/admin/setup/admin" method="POST">
+      <div class="form-group">
+        <label for="siteTitle">Site Title</label>
+        <input type="text" id="siteTitle" name="siteTitle" value="<%= values.siteTitle || 'My Radix Site' %>" required />
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="username">Admin Username</label>
+          <input type="text" id="username" name="username" value="<%= values.username || '' %>" required />
+        </div>
+        <div class="form-group">
+          <label for="email">Admin Email</label>
+          <input type="email" id="email" name="email" value="<%= values.email || '' %>" required />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" required />
+        </div>
+        <div class="form-group">
+          <label for="passwordConfirm">Confirm Password</label>
+          <input type="password" id="passwordConfirm" name="passwordConfirm" required />
+        </div>
+      </div>
+
+      <div class="form-group checkbox">
+        <input type="checkbox" id="searchEngineVisibility" name="searchEngineVisibility" <%= values.searchEngineVisibility ? 'checked' : '' %> />
+        <label for="searchEngineVisibility">Discourage search engines from indexing this site (recommended for local/staging)</label>
+      </div>
+
+      <div style="text-align:center; margin-top:16px">
+        <button type="submit" class="btn">Create Site & Admin Account</button>
+      </div>
+    </form>
+  </div>
+</body>
+</html>

package/views/admin/setup-db.ejs

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Radix - Database Setup</title>
+  <style>
+    body { font-family: system-ui, sans-serif; background: #f7fafc; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+    .card { background: #fff; padding: 28px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); width: 100%; max-width: 640px; }
+    h1 { margin-top: 0; font-size: 1.5rem; text-align: center; }
+    .form-row { display: flex; gap: 12px; }
+    .form-group { margin-bottom: 12px; flex: 1; }
+    label { display:block; font-weight:600; margin-bottom:6px }
+    input[type="text"], input[type="password"], input[type="number"] { width:100%; padding:10px; border:1px solid #e2e8f0; border-radius:4px }
+    .btn { background:#2b6cb0; color:#fff; border:none; padding:10px 14px; border-radius:4px; cursor:pointer; font-weight:700 }
+    .error { background:#fed7d7; color:#9b2c2c; padding:8px; border-radius:4px; margin-bottom:12px }
+    .hint { font-size:0.9rem; color:#4a5568 }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Phase 1: Database Connection Setup</h1>
+
+    <% if (error) { %>
+      <div class="error"><%= error %></div>
+    <% } %>
+
+    <p class="hint">These details tell Radix where your database is located and how to log into it. Values are saved to your .env file.</p>
+
+    <form action="/admin/setup/db" method="POST">
+      <div class="form-row">
+        <div class="form-group">
+          <label for="dbName">Database Name</label>
+          <input type="text" id="dbName" name="dbName" value="<%= values.dbName || 'radix' %>" required />
+        </div>
+        <div class="form-group">
+          <label for="tablePrefix">Table Prefix</label>
+          <input type="text" id="tablePrefix" name="tablePrefix" value="<%= values.tablePrefix || '' %>" placeholder="Optional" />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="dbUser">Username</label>
+          <input type="text" id="dbUser" name="dbUser" value="<%= values.dbUser || '' %>" required />
+        </div>
+        <div class="form-group">
+          <label for="dbPass">Password</label>
+          <input type="password" id="dbPass" name="dbPass" value="" />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="dbHost">Database Host</label>
+          <input type="text" id="dbHost" name="dbHost" value="<%= values.dbHost || '127.0.0.1' %>" required />
+        </div>
+        <div class="form-group">
+          <label for="dbPort">Port</label>
+          <input type="number" id="dbPort" name="dbPort" value="<%= values.dbPort || '3306' %>" />
+        </div>
+      </div>
+
+      <div style="text-align:center; margin-top:16px; display:flex; gap:8px; justify-content:center; align-items:center;">
+        <button type="button" id="testConn" class="btn" style="background:#059669;">Test Connection</button>
+        <button type="submit" class="btn">Save & Initialize Database</button>
+      </div>
+      <div id="testResult" style="margin-top:12px; text-align:center; display:none;" aria-live="polite"></div>
+    </form>
+  </div>
+
+  <script>
+    document.getElementById('testConn').addEventListener('click', async function () {
+      const dbName = document.getElementById('dbName').value;
+      const dbUser = document.getElementById('dbUser').value;
+      const dbPass = document.getElementById('dbPass').value;
+      const dbHost = document.getElementById('dbHost').value;
+      const dbPort = document.getElementById('dbPort').value;
+      const resultDiv = document.getElementById('testResult');
+
+      resultDiv.style.display = 'block';
+      resultDiv.style.color = '#0f172a';
+      resultDiv.textContent = 'Testing connection...';
+
+      try {
+        const resp = await fetch('/admin/setup/db/test', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ dbName, dbUser, dbPass, dbHost, dbPort })
+        });
+
+        const data = await resp.json();
+        if (resp.ok && data.ok) {
+          resultDiv.style.background = '#ecfdf5';
+          resultDiv.style.border = '1px solid #bbf7d0';
+          resultDiv.style.color = '#065f46';
+          resultDiv.textContent = data.message || 'Connection successful';
+        } else {
+          resultDiv.style.background = '#fee2e2';
+          resultDiv.style.border = '1px solid #fecaca';
+          resultDiv.style.color = '#9b2c2c';
+          resultDiv.textContent = (data && data.error) ? data.error : 'Connection failed';
+        }
+      } catch (err) {
+        resultDiv.style.background = '#fee2e2';
+        resultDiv.style.border = '1px solid #fecaca';
+        resultDiv.style.color = '#9b2c2c';
+        resultDiv.textContent = String(err) || 'Connection failed';
+      }
+    });
+  </script>
+</body>
+</html>

package/views/admin/themes.ejs

@@ -0,0 +1,24 @@
+<%- include('partials/header', { title: 'Themes & Templates', activeNav: 'themes' }) %>
+
+<div class="card">
+    <h1 style="font-size: 1.5rem; margin-bottom: 8px;">Available Themes & Templates</h1>
+    <p style="color: #64748b; margin-bottom: 20px;">Discovered layout files ready to apply across dynamic pages.</p>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;">
+        <% if (templates && templates.length > 0) { %>
+            <% templates.forEach(tpl => { %>
+                <div style="border: 1px solid #e2e8f0; padding: 16px; border-radius: 6px; background: #f8fafc;">
+                    <div style="font-size: 1.2rem; margin-bottom: 6px;">🎨 <strong><%= tpl %></strong></div>
+                    <small style="color: #64748b; display: block; margin-bottom: 10px;">Template Name: <code><%= tpl %></code></small>
+                    <span style="display: inline-block; background: #dbeafe; color: #1e40af; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 12px;">
+                        Active Layout
+                    </span>
+                </div>
+            <% }) %>
+        <% } else { %>
+            <p style="color: #64748b;">No dynamic theme templates found in the themes directory.</p>
+        <% } %>
+    </div>
+</div>
+
+<%- include('partials/footer') %>

package/views/admin/updates.ejs

@@ -0,0 +1,79 @@
+<%- include('partials/header', { title: 'System Updates', activeNav: 'updates' }) %>
+
+<div class="card" style="max-width: 900px; margin: 0 auto;">
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+        <h1 style="font-size: 1.5rem;">System Updates</h1>
+        <a href="/admin/updates" class="btn" style="background: #e2e8f0; color: #334155; font-size: 0.85rem;">🔄 Check Again</a>
+    </div>
+
+    <% if (message) { %>
+        <div style="background: #dcfce7; border: 1px solid #bbf7d0; color: #15803d; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
+            ✅ <strong><%= message %></strong>
+        </div>
+    <% } %>
+
+    <% if (error || updateInfo.error) { %>
+        <div style="background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
+            ⚠️ <strong>Update Error:</strong> <%= error || updateInfo.error %>
+        </div>
+    <% } %>
+
+    <!-- Current Version Overview Card -->
+    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 20px; margin-bottom: 20px;">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+            <div>
+                <small style="color: #64748b; text-transform: uppercase; font-weight: 600;">Installed Version</small>
+                <div style="font-size: 1.8rem; font-weight: bold; color: #1e293b; margin-top: 4px;">
+                    v<%= updateInfo.currentVersion %>
+                </div>
+            </div>
+            <div>
+                <small style="color: #64748b; text-transform: uppercase; font-weight: 600;">Latest Remote Release</small>
+                <div style="font-size: 1.8rem; font-weight: bold; color: #2563eb; margin-top: 4px;">
+                    <%= updateInfo.remoteVersion ? 'v' + updateInfo.remoteVersion : 'Unavailable' %>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Release Status Details -->
+    <% if (updateInfo.hasUpdate && updateInfo.details) { %>
+        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; padding: 20px; border-radius: 6px; margin-bottom: 20px;">
+            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+                <span style="font-size: 1.4rem;">🚀</span>
+                <h2 style="font-size: 1.2rem; color: #166534; margin: 0;">New Update Available!</h2>
+            </div>
+            <p style="color: #15803d; font-size: 0.95rem; margin-bottom: 15px;">
+                Version <strong><%= updateInfo.remoteVersion %></strong> was released on <strong><%= updateInfo.details.ReleaseDate %></strong>.
+            </p>
+
+            <% if (updateInfo.details.Notes) { %>
+                <div style="background: #ffffff; border: 1px solid #cbd5e1; padding: 12px; border-radius: 4px; margin-bottom: 15px; font-size: 0.9rem; color: #334155;">
+                    <strong>Release Notes:</strong>
+                    <p style="margin-top: 5px;"><%= updateInfo.details.Notes %></p>
+                </div>
+            <% } %>
+
+            <!-- Action Buttons -->
+            <div style="display: flex; gap: 12px; align-items: center; margin-top: 15px;">
+                <form action="/admin/updates/apply" method="POST" onsubmit="return confirm('Are you sure you want to update Radix CMS codebase? Clean backup recommended prior to update.');">
+                    <button type="submit" class="btn btn-primary" style="background: #16a34a; border-color: #16a34a;">
+                        ⚡ Perform Auto-Update
+                    </button>
+                </form>
+
+                <a href="https://vault.ultraspark.net/radix/<%= updateInfo.details.InstallFile %>" class="btn" style="background: #e2e8f0; color: #334155;" target="_blank" download>
+                    📥 Download Zip File
+                </a>
+            </div>
+        </div>
+    <% } else if (!updateInfo.error) { %>
+        <div style="background: #f0f9ff; border: 1px solid #bae6fd; padding: 20px; border-radius: 6px; text-align: center;">
+            <span style="font-size: 2rem;">✅</span>
+            <h2 style="font-size: 1.2rem; color: #0369a1; margin-top: 8px;">Radix CMS is up to date</h2>
+            <p style="color: #0284c7; font-size: 0.9rem; margin-top: 4px;">You are running the latest release (v<%= updateInfo.currentVersion %>).</p>
+        </div>
+    <% } %>
+</div>
+
+<%- include('partials/footer') %>