radix-cms 0.1.0 → 1.0.0

package/docs/Publishing Guidelines.txt

@@ -0,0 +1,14 @@
+For GitHub, create the repository, commit the source and documentation, tag v1.0.0, and create a GitHub release. Decide whether dist/ is committed; if not, configure GitHub Actions to build it before publishing to npm.
+
+The npm package name radix-cms already exists at version 0.1.0, so verify that it is your package before publishing. Then use:
+
+npm login
+npm publish --access public
+
+Before publishing, verify with:
+
+npm run build
+npm pack --dry-run
+
+The dry-run must contain dist/app.js, views, required public assets, LICENSE, and README.md, but must not contain .env, node_modules, or user-uploaded files.
+

package/package.json

@@ -1,11 +1,67 @@
 {
   "name": "radix-cms",
-  "version": "0.1.0",
-  "description": "Basic CMS for building custom web applications.",
-  "main": "index.js",
+  "version": "1.0.0",
+  "main": "dist/app.js",
   "bin": {
-    "radix-cms": "index.js"
+    "radix-cms": "dist/app.js"
+  },
+  "files": [
+    "dist/",
+    "views/",
+    "public/css/",
+    "public/hello.html",
+    ".env.example",
+    "LICENSE",
+    "NOTICE",
+    "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md",
+    "docs/"
+  ],
+  "keywords": [],
+  "author": "Ultra Spark Software",
+  "license": "GPL-3.0-or-later",
+  "description": "Basic CMS for building custom web applications.",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "npx tsc && node -e \"const fs=require('fs'),path=require('path'); const src=path.join(process.cwd(),'src','sql','radix.sql'); const destDir=path.join(process.cwd(),'dist','sql'); const dest=path.join(destDir,'radix.sql'); if(!fs.existsSync(src)){console.warn('copy-sql: src not found at',src); process.exit(0);} fs.mkdirSync(destDir,{recursive:true}); fs.copyFileSync(src,dest); console.log('copy-sql: copied', src, '->', dest);\"",
+    "start": "npx tsc && node dist/app.js",
+    "app": "node dist/app.js",
+    "dev": "npx tsx watch src/app.ts"
+  },
+  "devDependencies": {
+    "@types/adm-zip": "^0.5.8",
+    "@types/bcrypt": "^6.0.0",
+    "@types/ejs": "^3.1.5",
+    "@types/express": "^5.0.6",
+    "@types/express-session": "^1.19.0",
+    "@types/multer": "^2.2.0",
+    "@types/node": "^26.1.1",
+    "@types/sanitize-html": "^2.16.1",
+    "tsx": "^4.23.1",
+    "typescript": "^7.0.2"
+  },
+  "dependencies": {
+    "@types/nodemailer": "^8.0.1",
+    "adm-zip": "^0.6.0",
+    "bcrypt": "^6.0.0",
+    "dotenv": "^17.4.2",
+    "ejs": "^6.0.1",
+    "express": "^5.2.1",
+    "express-session": "^1.19.0",
+    "multer": "^2.2.0",
+    "mysql2": "^3.23.1",
+    "nodemailer": "^9.0.5",
+    "sanitize-html": "^2.17.6"
+  },
+  "allowScripts": {
+    "esbuild@0.28.1": true,
+    "bcrypt@6.0.0": true
   },
-  "license": "MIT",
-  "author": "Ultra Spark Software"
+  "overrides": {
+    "nanoid": "^3.3.18"
+  }
 }

package/public/css/admin.css

@@ -0,0 +1,178 @@
+/* Modern Admin Layout Shell */
+:root {
+  --sidebar-width: 240px;
+  --header-height: 60px;
+  --bg-dark: #1e1e2d;
+  --bg-dark-hover: #2b2b40;
+  --accent-color: #3b82f6;
+  --text-light: #a2a3b7;
+  --text-white: #ffffff;
+  --bg-main: #f5f7fb;
+  --border-color: #e2e8f0;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--bg-main);
+  color: #333;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Sidebar Navigation */
+.admin-sidebar {
+  width: var(--sidebar-width);
+  background-color: var(--bg-dark);
+  color: var(--text-light);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.admin-sidebar .brand {
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: var(--text-white);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.admin-sidebar .brand span {
+  color: var(--accent-color);
+  margin-left: 4px;
+}
+
+.admin-nav {
+  list-style: none;
+  padding: 15px 0;
+  flex-grow: 1;
+}
+
+.admin-nav li a {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  color: var(--text-light);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+}
+
+.admin-nav li a:hover,
+.admin-nav li.active a {
+  background-color: var(--bg-dark-hover);
+  color: var(--text-white);
+  border-left: 4px solid var(--accent-color);
+}
+
+.admin-nav li a .icon {
+  margin-right: 12px;
+  font-size: 1.1rem;
+}
+
+/* Main Content Area */
+.admin-wrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+/* Top Navigation Bar */
+.admin-header {
+  height: var(--header-height);
+  background-color: #ffffff;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 25px;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 0.9rem;
+}
+
+.user-badge {
+  background-color: #e0e7ff;
+  color: #3730a3;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+/* Content Body */
+.admin-content {
+  padding: 25px;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Common UI Cards & Tables */
+.card {
+  background: #ffffff;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 15px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.data-table th {
+  background-color: #f8fafc;
+  color: #64748b;
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+}
+
+.btn {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+}
+
+.btn-primary { background-color: var(--accent-color); color: #fff; }
+.btn-primary:hover { background-color: #2563eb; }
+.btn-danger { background-color: #ef4444; color: #fff; }
+.btn-danger:hover { background-color: #dc2626; }

package/public/css/fallback.css

@@ -0,0 +1,53 @@
+/* public/css/fallback.css */
+body {
+    font-family: system-ui, -apple-system, sans-serif;
+    background: #f4f6f9;
+    color: #2d3748;
+    margin: 0;
+    padding: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 80vh;
+}
+.error-card {
+    background: white;
+    padding: 40px;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    max-width: 500px;
+    width: 100%;
+    text-align: center;
+}
+.error-card h1 {
+    font-size: 4rem;
+    margin: 0;
+}
+.error-card.status-404 h1 {
+    color: #e53e3e;
+}
+.error-card.status-500 h1 {
+    color: #dd6b20;
+}
+.error-card h2 {
+    margin-top: 10px;
+    color: #4a5568;
+}
+.error-card p {
+    color: #718096;
+    line-height: 1.6;
+}
+.error-card nav {
+    margin-top: 25px;
+    border-top: 1px solid #e2e8f0;
+    padding-top: 20px;
+}
+.error-card nav a {
+    color: #3182ce;
+    text-decoration: none;
+    font-weight: 600;
+    margin: 0 10px;
+}
+.error-card nav a:hover {
+    text-decoration: underline;
+}

package/public/hello.html

@@ -0,0 +1 @@
+hello world

package/views/admin/create-page.ejs

@@ -0,0 +1,82 @@
+<%- include('partials/header', { title: 'Create Page', activeNav: 'pages' }) %>
+
+<div class="card" style="max-width: 900px; margin: 0 auto;">
+    <h1 style="font-size: 1.5rem; margin-bottom: 20px;">Create New Page</h1>
+
+    <form action="/admin/create" method="POST">
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Title</label>
+            <input type="text" name="title" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Slug</label>
+            <input type="text" name="slug" placeholder="e.g. my-page-title" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </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;">Status</label>
+                <select name="status" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                    <option value="Draft">Draft</option>
+                    <option value="Pending Review">Pending Review</option>
+                    <option value="Published">Published</option>
+                    <option value="Archived">Archived</option>
+                </select>
+            </div>
+
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">Minimum Access Role</label>
+                <select name="min_role" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                    <option value="Unregistered">Unregistered</option>
+                    <option value="Registered">Registered</option>
+                    <option value="Editor">Editor</option>
+                    <option value="Manager">Manager</option>
+                    <option value="Administrator">Administrator</option>
+                </select>
+            </div>
+        </div>
+
+        <%# Theme selector %>
+        <div>
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Theme / Template</label>
+            <select name="template_name" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                <% if (typeof templates !== 'undefined' && templates.length > 0) { %>
+                    <% templates.forEach(tpl => { %>
+                        <option value="<%= tpl %>" <%= tpl === 'default' ? 'selected' : '' %>>
+                            <%= tpl.charAt(0).toUpperCase() + tpl.slice(1) %>
+                        </option>
+                    <% }) %>
+                <% } else { %>
+                    <option value="default" selected>Default</option>
+                <% } %>
+            </select>
+        </div>
+
+        <div style="margin-bottom: 20px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Content</label>
+            <textarea id="content" name="content" rows="12" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;"></textarea>
+        </div>
+
+        <div style="display: flex; gap: 10px;">
+            <button type="submit" class="btn btn-primary">Save Page</button>
+            <a href="/admin/pages" class="btn" style="background: #e2e8f0; color: #334155;">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<!-- TinyMCE CDN & Initialization -->
+<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
+<script>
+    tinymce.init({
+        selector: '#content',
+        height: 450,
+        menubar: true,
+        plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount',
+        toolbar: 'undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image link code | help',
+        branding: false,
+        promotion: false
+    });
+</script>
+
+<%- include('partials/footer') %>

package/views/admin/dashboard.ejs

@@ -0,0 +1,44 @@
+<%- include('partials/header', { title: 'Dashboard', activeNav: 'dashboard' }) %>
+
+<h1 style="font-size: 1.5rem; margin-bottom: 20px;">System Overview</h1>
+
+<!-- Analytics Cards Grid -->
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px;">
+    
+    <div class="card" style="margin-bottom: 0;">
+        <h3 style="font-size: 0.85rem; color: #64748b; text-transform: uppercase;">Dynamic Pages</h3>
+        <p style="font-size: 2rem; font-weight: bold; margin-top: 8px; color: #1e293b;"><%= stats.totalPages %></p>
+        <small style="color: #64748b;"><%= stats.publishedPages %> Published / <%= stats.draftPages %> Drafts</small>
+    </div>
+
+    <div class="card" style="margin-bottom: 0;">
+        <h3 style="font-size: 0.85rem; color: #64748b; text-transform: uppercase;">Static EJS Views</h3>
+        <p style="font-size: 2rem; font-weight: bold; margin-top: 8px; color: #2563eb;"><%= stats.staticPagesCount %></p>
+        <small style="color: #64748b;">Located in <code>/views/pages</code></small>
+    </div>
+
+    <div class="card" style="margin-bottom: 0;">
+        <h3 style="font-size: 0.85rem; color: #64748b; text-transform: uppercase;">Media Library</h3>
+        <p style="font-size: 2rem; font-weight: bold; margin-top: 8px; color: #059669;"><%= stats.mediaCount %></p>
+        <small style="color: #64748b;">Uploaded files</small>
+    </div>
+
+    <div class="card" style="margin-bottom: 0;">
+        <h3 style="font-size: 0.85rem; color: #64748b; text-transform: uppercase;">User Accounts</h3>
+        <p style="font-size: 2rem; font-weight: bold; margin-top: 8px; color: #7c3aed;"><%= stats.totalUsers %></p>
+        <small style="color: #64748b;">Registered users & admins</small>
+    </div>
+
+</div>
+
+<!-- Quick Actions Card -->
+<div class="card">
+    <h2 style="font-size: 1.1rem; margin-bottom: 12px;">Quick Management</h2>
+    <div style="display: flex; gap: 10px;">
+        <a href="/admin/pages" class="btn btn-primary">Manage Pages</a>
+        <a href="/admin/create" class="btn" style="background: #e2e8f0; color: #334155;">+ New Page</a>
+        <a href="/admin/media" class="btn" style="background: #e2e8f0; color: #334155;">Upload Media</a>
+    </div>
+</div>
+
+<%- include('partials/footer') %>

package/views/admin/edit-page.ejs

@@ -0,0 +1,87 @@
+<%- include('partials/header', { title: 'Edit Page', activeNav: 'pages' }) %>
+
+<div class="card" style="max-width: 900px; margin: 0 auto;">
+    <h1 style="font-size: 1.5rem; margin-bottom: 20px;">Edit Page</h1>
+
+    <form action="/admin/edit/<%= page.id %>" method="POST">
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Title</label>
+            <input type="text" name="title" value="<%= page.title %>" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Slug</label>
+            <input type="text" name="slug" value="<%= page.slug %>" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </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;">Status</label>
+                <select name="status" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                    <option value="Draft" <%= page.status === 'Draft' ? 'selected' : '' %>>Draft</option>
+                    <option value="Pending Review" <%= page.status === 'Pending Review' ? 'selected' : '' %>>Pending Review</option>
+                    <option value="Published" <%= page.status === 'Published' ? 'selected' : '' %>>Published</option>
+                    <option value="Archived" <%= page.status === 'Archived' ? 'selected' : '' %>>Archived</option>
+                </select>
+            </div>
+
+            <div>
+                <label style="display: block; font-weight: 600; margin-bottom: 5px;">Minimum Access Role</label>
+                <select name="min_role" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                    <option value="Unregistered" <%= page.min_role === 'Unregistered' ? 'selected' : '' %>>Unregistered</option>
+                    <option value="Registered" <%= page.min_role === 'Registered' ? 'selected' : '' %>>Registered</option>
+                    <option value="Editor" <%= page.min_role === 'Editor' ? 'selected' : '' %>>Editor</option>
+                    <option value="Manager" <%= page.min_role === 'Manager' ? 'selected' : '' %>>Manager</option>
+                    <option value="Administrator" <%= page.min_role === 'Administrator' ? 'selected' : '' %>>Administrator</option>
+                </select>
+            </div>
+        </div>
+
+        <%# Theme selector %>
+        <div>
+        <label style="display: block; font-weight: 600; margin-bottom: 5px;">Theme / Template</label>
+            <select name="template_name" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                <% 
+                    // Fallback to 'default' if page.template_name is null or undefined
+                    const currentTemplate = (page && page.template_name) ? String(page.template_name).toLowerCase() : 'default';
+                %>
+                <% if (typeof templates !== 'undefined' && Array.isArray(templates) && templates.length > 0) { %>
+                    <% templates.forEach(tpl => { %>
+                        <% const tplSlug = String(tpl).toLowerCase(); %>
+                        <option value="<%= tplSlug %>" <%= currentTemplate === tplSlug ? 'selected' : '' %>>
+                            <%= tplSlug.charAt(0).toUpperCase() + tplSlug.slice(1) %>
+                        </option>
+                    <% }) %>
+                <% } else { %>
+                    <option value="default" selected>Default</option>
+                <% } %>
+            </select>
+        </div>
+
+        <div style="margin-bottom: 20px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Content</label>
+            <textarea id="content" name="content" rows="12" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;"><%= page.content %></textarea>
+        </div>
+
+        <div style="display: flex; gap: 10px;">
+            <button type="submit" class="btn btn-primary">Update Page</button>
+            <a href="/admin/pages" class="btn" style="background: #e2e8f0; color: #334155;">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<!-- TinyMCE CDN & Initialization -->
+<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
+<script>
+    tinymce.init({
+        selector: '#content',
+        height: 450,
+        menubar: true,
+        plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount',
+        toolbar: 'undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image link code | help',
+        branding: false,
+        promotion: false
+    });
+</script>
+
+<%- include('partials/footer') %>

package/views/admin/edit-user.ejs

@@ -0,0 +1,45 @@
+<%- include('partials/header', { title: 'Edit User', activeNav: 'users' }) %>
+
+<div class="card" style="max-width: 700px; margin: 0 auto;">
+    <h1 style="font-size: 1.5rem; margin-bottom: 20px;">Edit User</h1>
+
+    <form action="/admin/users/edit/<%= editUser.id %>" method="POST">
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Full Name</label>
+            <input type="text" name="full_name" value="<%= editUser.full_name || '' %>" placeholder="John Doe" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Username</label>
+            <input type="text" name="username" value="<%= editUser.username %>" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Email (Optional)</label>
+            <input type="email" name="email" value="<%= editUser.email || '' %>" placeholder="john@example.com" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="margin-bottom: 15px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">Role</label>
+            <select name="role" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+                <option value="Administrator" <%= editUser.role === 'Administrator' ? 'selected' : '' %>>Administrator</option>
+                <option value="Manager" <%= editUser.role === 'Manager' ? 'selected' : '' %>>Manager</option>
+                <option value="Editor" <%= editUser.role === 'Editor' ? 'selected' : '' %>>Editor</option>
+                <option value="Registered" <%= editUser.role === 'Registered' ? 'selected' : '' %>>Registered</option>
+                <option value="Unregistered" <%= editUser.role === 'Unregistered' ? 'selected' : '' %>>Unregistered</option>
+            </select>
+        </div>
+
+        <div style="margin-bottom: 20px;">
+            <label style="display: block; font-weight: 600; margin-bottom: 5px;">New Password (Optional)</label>
+            <input type="password" name="password" placeholder="Leave blank to keep current password" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px;">
+        </div>
+
+        <div style="display: flex; gap: 10px;">
+            <button type="submit" class="btn btn-primary">Update User</button>
+            <a href="/admin/users" class="btn" style="background: #e2e8f0; color: #334155;">Cancel</a>
+        </div>
+    </form>
+</div>
+
+<%- include('partials/footer') %>

package/views/admin/login.ejs

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Radix Admin Login</title>
+    <style>
+        body { font-family: system-ui, sans-serif; background: #e2e8f0; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+        .login-card { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
+        h1 { margin-top: 0; font-size: 1.75rem; text-align: center; color: #2d3748; }
+        .form-group { margin-bottom: 20px; }
+        label { display: block; font-weight: 600; margin-bottom: 6px; }
+        input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 4px; box-sizing: border-box; }
+        .btn-login { width: 100%; background: #3182ce; color: white; border: none; padding: 12px; border-radius: 4px; font-size: 1rem; font-weight: bold; cursor: pointer; }
+        .btn-login:hover { background: #2b6cb0; }
+        .error-msg { background: #fed7d7; color: #9b2c2c; padding: 10px; border-radius: 4px; margin-bottom: 20px; text-align: center; font-size: 0.9rem; }
+    </style>
+</head>
+<body>
+    <div class="login-card">
+        <h1>Radix Engine Gate</h1>
+        
+        <% if (error) { %>
+            <div class="error-msg"><%= error %></div>
+        <% } %>
+
+        <form action="/admin/login" method="POST">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required autocomplete="off">
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit" class="btn-login">Authenticate</button>
+        </form>
+    </div>
+</body>
+</html>