first push
This commit is contained in:
jason
@@ -0,0 +1,84 @@
|
||||
<%- include('../partials/head', { title: 'Categories' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin/categories' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-2xl mx-auto px-8 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-xl font-semibold text-white">Categories</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Organize your models into groups</p>
|
||||
</div>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="mb-6 flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<p class="text-sm text-red-400"><%= error %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- New category form -->
|
||||
<form method="POST" action="/admin/categories" class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-4">New Category</h2>
|
||||
<div class="flex gap-3">
|
||||
<input name="name" type="text" required placeholder="Category name"
|
||||
class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
|
||||
<input name="description" type="text" placeholder="Description (optional)"
|
||||
class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
|
||||
<button type="submit" class="btn-accent text-white rounded-lg px-5 py-2 text-sm font-medium transition-all shrink-0">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Category list -->
|
||||
<% if (categories.length === 0) { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl px-8 py-12 text-center">
|
||||
<p class="text-sm text-gray-500">No categories yet. Create one above.</p>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl overflow-hidden">
|
||||
<% categories.forEach((cat, i) => { %>
|
||||
<div class="<%= i > 0 ? 'border-t border-gray-800' : '' %> px-5 py-4 flex items-center gap-4 hover:bg-surface-800 transition-colors group">
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-white"><%= cat.name %></p>
|
||||
<% if (cat.description) { %>
|
||||
<p class="text-xs text-gray-500 mt-0.5"><%= cat.description %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
<span class="text-xs text-gray-600 shrink-0"><%= cat.model_count %> model<%= cat.model_count !== 1 ? 's' : '' %></span>
|
||||
|
||||
<!-- Inline edit form (hidden by default) -->
|
||||
<form method="POST" action="/admin/categories/<%= cat.id %>/edit" class="hidden edit-form gap-2 items-center">
|
||||
<input name="name" value="<%= cat.name %>" type="text" required
|
||||
class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:border-accent w-40 transition-colors" />
|
||||
<input name="description" value="<%= cat.description || '' %>" type="text" placeholder="Description"
|
||||
class="bg-surface-700 border border-gray-600 rounded-lg px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-44 transition-colors" />
|
||||
<button type="submit" class="text-xs btn-accent text-white rounded-lg px-3 py-1.5">Save</button>
|
||||
<button type="button" class="text-xs text-gray-500 hover:text-white cancel-edit">Cancel</button>
|
||||
</form>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-1 action-buttons">
|
||||
<button type="button" class="edit-btn p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors" title="Rename">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
|
||||
</svg>
|
||||
</button>
|
||||
<form method="POST" action="/admin/categories/<%= cat.id %>/delete"
|
||||
onsubmit="return confirm('Delete «<%= cat.name %>»? Models in this category will become uncategorized.')">
|
||||
<button type="submit" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Delete">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,156 @@
|
||||
<%- include('../partials/head', { title: 'Models' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-7xl mx-auto px-8 py-8">
|
||||
|
||||
<!-- Page header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-xl font-semibold text-white">Models</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5"><%= totalCount %> total · <%= publicCount %> public</p>
|
||||
</div>
|
||||
<a href="/admin/upload" class="inline-flex items-center gap-2 btn-accent text-white rounded-lg px-4 py-2 text-sm font-medium transition-all">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Upload Model
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<form method="GET" action="/admin" class="flex flex-wrap gap-3 mb-6">
|
||||
<input
|
||||
name="search" value="<%= filters.search || '' %>"
|
||||
placeholder="Search models…"
|
||||
class="bg-surface-900 border border-gray-800 rounded-lg px-3.5 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-64 transition-colors"
|
||||
/>
|
||||
<select name="category_id" class="bg-surface-900 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
|
||||
<option value="">All categories</option>
|
||||
<% categories.forEach(c => { %>
|
||||
<option value="<%= c.id %>" <%= filters.category_id == c.id ? 'selected' : '' %>><%= c.name %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
<select name="visibility" class="bg-surface-900 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
|
||||
<option value="">All visibility</option>
|
||||
<option value="public" <%= filters.visibility === 'public' ? 'selected' : '' %>>Public</option>
|
||||
<option value="private" <%= filters.visibility === 'private' ? 'selected' : '' %>>Private</option>
|
||||
</select>
|
||||
<button type="submit" class="bg-surface-800 hover:bg-surface-700 border border-gray-700 text-sm text-gray-300 rounded-lg px-4 py-2 transition-colors">
|
||||
Filter
|
||||
</button>
|
||||
<% if (filters.search || filters.category_id || filters.visibility) { %>
|
||||
<a href="/admin" class="bg-surface-800 hover:bg-surface-700 border border-gray-700 text-sm text-gray-400 rounded-lg px-4 py-2 transition-colors">
|
||||
Clear
|
||||
</a>
|
||||
<% } %>
|
||||
</form>
|
||||
|
||||
<!-- Table -->
|
||||
<% if (models.length === 0) { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl px-8 py-16 text-center">
|
||||
<svg class="w-12 h-12 text-gray-700 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
<p class="text-gray-500 text-sm">No models yet. <a href="/admin/upload" class="text-accent underline">Upload your first model.</a></p>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-800">
|
||||
<th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
||||
<th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Category</th>
|
||||
<th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">Type</th>
|
||||
<th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">PDFs</th>
|
||||
<th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Visibility</th>
|
||||
<th class="text-right px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-800">
|
||||
<% models.forEach(model => { %>
|
||||
<tr class="hover:bg-surface-800 transition-colors group" data-model-id="<%= model.id %>">
|
||||
<td class="px-5 py-4">
|
||||
<div class="font-medium text-white"><%= model.name %></div>
|
||||
<% if (model.description) { %>
|
||||
<div class="text-xs text-gray-500 mt-0.5 truncate max-w-xs"><%= model.description %></div>
|
||||
<% } %>
|
||||
</td>
|
||||
<td class="px-5 py-4 hidden md:table-cell">
|
||||
<span class="text-gray-400"><%= model.category_name || '—' %></span>
|
||||
</td>
|
||||
<td class="px-5 py-4 hidden lg:table-cell">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono bg-surface-800 border border-gray-700 text-gray-400"><%= model.file_type.toUpperCase() %></span>
|
||||
</td>
|
||||
<td class="px-5 py-4 hidden lg:table-cell text-gray-400">
|
||||
<%= model.pdf_count %>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<button
|
||||
type="button"
|
||||
class="visibility-toggle inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors cursor-pointer
|
||||
<%= model.is_public ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-gray-700/50 border-gray-700 text-gray-500' %>"
|
||||
data-model-id="<%= model.id %>"
|
||||
data-is-public="<%= model.is_public %>"
|
||||
>
|
||||
<span class="w-1.5 h-1.5 rounded-full <%= model.is_public ? 'bg-green-400' : 'bg-gray-500' %>"></span>
|
||||
<%= model.is_public ? 'Public' : 'Private' %>
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<!-- Copy link -->
|
||||
<button
|
||||
type="button"
|
||||
title="Copy share link"
|
||||
class="copy-link-btn p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors"
|
||||
data-url="<%= baseUrl %>/view/<%= model.slug %>"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- View -->
|
||||
<a href="/view/<%= model.slug %>" target="_blank" title="View model"
|
||||
class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.574-3.007-9.964-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- Edit -->
|
||||
<a href="/admin/models/<%= model.id %>/edit" title="Edit model"
|
||||
class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- Delete -->
|
||||
<form method="POST" action="/admin/models/<%= model.id %>/delete" class="inline" onsubmit="return confirm('Delete «<%= model.name %>»? This cannot be undone.')">
|
||||
<button type="submit" title="Delete model"
|
||||
class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast notification -->
|
||||
<div id="toast" class="fixed bottom-6 right-6 bg-surface-800 border border-gray-700 text-white text-sm px-4 py-3 rounded-xl shadow-2xl opacity-0 translate-y-2 transition-all duration-300 pointer-events-none z-50">
|
||||
<span id="toast-msg"></span>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<%- include('../partials/head', { title: 'Edit Model' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-2xl mx-auto px-8 py-8">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<a href="/admin" class="text-gray-500 hover:text-white transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</a>
|
||||
<h1 class="text-xl font-semibold text-white">Edit Model</h1>
|
||||
</div>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="mb-6 flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<p class="text-sm text-red-400"><%= error %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Model details form -->
|
||||
<form method="POST" action="/admin/models/<%= model.id %>/edit" class="bg-surface-900 border border-gray-800 rounded-2xl p-6 space-y-5 mb-6">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Display Name <span class="text-red-400">*</span></label>
|
||||
<input name="name" type="text" required value="<%= model.name %>"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Description</label>
|
||||
<textarea name="description" rows="3"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors resize-none"
|
||||
><%= model.description || '' %></textarea>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Category</label>
|
||||
<select name="category_id"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
|
||||
<option value="">Uncategorized</option>
|
||||
<% categories.forEach(c => { %>
|
||||
<option value="<%= c.id %>" <%= model.category_id == c.id ? 'selected' : '' %>><%= c.name %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end pb-0.5">
|
||||
<label class="flex items-center gap-2.5 cursor-pointer">
|
||||
<div class="relative">
|
||||
<input name="is_public" type="checkbox" <%= model.is_public ? 'checked' : '' %> class="sr-only peer" />
|
||||
<div class="w-9 h-5 bg-gray-700 rounded-full peer-checked:bg-accent transition-colors"></div>
|
||||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-4"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400">Public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="btn-accent text-white rounded-lg px-5 py-2 text-sm font-medium transition-all">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Attached PDFs -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-4">Shop Diagrams / PDFs</h2>
|
||||
<% if (pdfs.length === 0) { %>
|
||||
<p class="text-sm text-gray-500 mb-4">No PDFs attached yet.</p>
|
||||
<% } else { %>
|
||||
<ul class="space-y-2 mb-4">
|
||||
<% pdfs.forEach(pdf => { %>
|
||||
<li class="flex items-center justify-between bg-surface-800 rounded-lg px-4 py-2.5">
|
||||
<span class="text-sm text-gray-300"><%= pdf.display_name %></span>
|
||||
<form method="POST" action="/admin/pdfs/<%= pdf.id %>/delete" onsubmit="return confirm('Remove this PDF?')">
|
||||
<button type="submit" class="text-xs text-gray-500 hover:text-red-400 transition-colors">Remove</button>
|
||||
</form>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<% } %>
|
||||
<form method="POST" action="/admin/models/<%= model.id %>/pdf" enctype="multipart/form-data" class="flex gap-3 items-end">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Attach PDF</label>
|
||||
<input type="file" name="pdf_file" accept=".pdf" required
|
||||
class="w-full text-sm text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-surface-700 file:text-gray-300 hover:file:bg-surface-600 transition-colors" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Display Name</label>
|
||||
<input type="text" name="display_name" placeholder="e.g. Sheet 1 — Overview"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors" />
|
||||
</div>
|
||||
<button type="submit" class="bg-surface-700 hover:bg-surface-600 border border-gray-700 text-sm text-gray-300 rounded-lg px-4 py-2 transition-colors shrink-0">
|
||||
Attach
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Share link -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-3">Share Link</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<input readonly value="<%= typeof baseUrl !== 'undefined' ? baseUrl : '' %>/view/<%= model.slug %>"
|
||||
class="flex-1 bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-gray-400 focus:outline-none" />
|
||||
<button type="button" class="copy-link-btn btn-accent text-white rounded-lg px-4 py-2.5 text-sm font-medium transition-all shrink-0"
|
||||
data-url="<%= typeof baseUrl !== 'undefined' ? baseUrl : '' %>/view/<%= model.slug %>">
|
||||
Copy Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="fixed bottom-6 right-6 bg-surface-800 border border-gray-700 text-white text-sm px-4 py-3 rounded-xl shadow-2xl opacity-0 translate-y-2 transition-all duration-300 pointer-events-none z-50">
|
||||
<span id="toast-msg"></span>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<%- include('../partials/head', { title: 'Sign In' }) %>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-sm">
|
||||
|
||||
<!-- Logo / Brand -->
|
||||
<div class="text-center mb-8">
|
||||
<% if (brand.brand_logo_path) { %>
|
||||
<img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-12 w-auto mx-auto mb-4 object-contain" />
|
||||
<% } else { %>
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl btn-accent mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
</div>
|
||||
<% } %>
|
||||
<h1 class="text-xl font-semibold text-white"><%= brand.brand_name %></h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Admin</p>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-8 shadow-2xl">
|
||||
<h2 class="text-base font-semibold text-white mb-6">Sign in to continue</h2>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="mb-5 flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<svg class="w-4 h-4 text-red-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<p class="text-sm text-red-400"><%= error %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<form method="POST" action="/admin/login" class="space-y-4">
|
||||
<input type="hidden" name="next" value="<%= next %>" />
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5" for="username">Username</label>
|
||||
<input
|
||||
id="username" name="username" type="text"
|
||||
autocomplete="username" required
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent focus:ring-1 ring-accent transition-colors"
|
||||
placeholder="admin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5" for="password">Password</label>
|
||||
<input
|
||||
id="password" name="password" type="password"
|
||||
autocomplete="current-password" required
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent focus:ring-1 ring-accent transition-colors"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full btn-accent text-white rounded-lg px-4 py-2.5 text-sm font-semibold transition-all mt-2">
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<%- include('../partials/head', { title: 'Settings' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin/settings' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-2xl mx-auto px-8 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-xl font-semibold text-white">Settings</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Branding, appearance, and app configuration</p>
|
||||
</div>
|
||||
|
||||
<% if (saved) { %>
|
||||
<div class="mb-6 flex items-start gap-3 bg-green-500/10 border border-green-500/30 rounded-lg px-4 py-3">
|
||||
<svg class="w-4 h-4 text-green-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p class="text-sm text-green-400">Settings saved.</p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Branding -->
|
||||
<form method="POST" action="/admin/settings" class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6 space-y-5">
|
||||
<h2 class="text-sm font-semibold text-white">Branding</h2>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">App Name</label>
|
||||
<input name="brand_name" type="text" value="<%= settings.brand_name %>"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent transition-colors"
|
||||
placeholder="StepView" />
|
||||
<p class="text-xs text-gray-600 mt-1.5">Shown in the browser tab, viewer overlay, and admin sidebar.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Tagline</label>
|
||||
<input name="brand_tagline" type="text" value="<%= settings.brand_tagline %>"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-accent transition-colors"
|
||||
placeholder="3D Model Viewer" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Accent Color</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="color" name="brand_accent" value="<%= settings.brand_accent %>"
|
||||
class="h-10 w-16 rounded-lg border border-gray-700 bg-surface-800 cursor-pointer p-1" />
|
||||
<input type="text" id="accent-hex" value="<%= settings.brand_accent %>"
|
||||
class="bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white font-mono w-32 focus:outline-none focus:border-accent transition-colors"
|
||||
placeholder="#3b82f6" />
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 mt-1.5">Used for buttons, highlights, and active nav items.</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="btn-accent text-white rounded-lg px-5 py-2 text-sm font-medium transition-all">
|
||||
Save Branding
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-6 mb-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-4">Logo</h2>
|
||||
|
||||
<% if (settings.brand_logo_path) { %>
|
||||
<div class="flex items-center gap-4 mb-5 p-4 bg-surface-800 rounded-xl border border-gray-700">
|
||||
<img src="/brand/logo" alt="Current logo" class="h-10 w-auto object-contain" />
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-gray-300">Logo uploaded</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">PNG, SVG, or JPEG recommended</p>
|
||||
</div>
|
||||
<form method="POST" action="/admin/settings/logo/delete">
|
||||
<button type="submit" class="text-xs text-gray-500 hover:text-red-400 transition-colors">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
<% } else { %>
|
||||
<p class="text-sm text-gray-500 mb-4">No logo uploaded. A default icon is shown.</p>
|
||||
<% } %>
|
||||
|
||||
<form method="POST" action="/admin/settings/logo" enctype="multipart/form-data" class="flex items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Upload Logo</label>
|
||||
<input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg,.webp" required
|
||||
class="w-full text-sm text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-surface-700 file:text-gray-300 hover:file:bg-surface-600 transition-colors" />
|
||||
<p class="text-xs text-gray-600 mt-1">Max 2 MB. PNG or SVG recommended for best quality.</p>
|
||||
</div>
|
||||
<button type="submit" class="bg-surface-700 hover:bg-surface-600 border border-gray-700 text-sm text-gray-300 rounded-lg px-4 py-2 transition-colors shrink-0">
|
||||
Upload
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Favicon -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-6">
|
||||
<h2 class="text-sm font-semibold text-white mb-4">Favicon</h2>
|
||||
<form method="POST" action="/admin/settings/favicon" enctype="multipart/form-data" class="flex items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5">Upload Favicon</label>
|
||||
<input type="file" name="favicon" accept=".ico,.png,.svg" required
|
||||
class="w-full text-sm text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-surface-700 file:text-gray-300 hover:file:bg-surface-600 transition-colors" />
|
||||
<p class="text-xs text-gray-600 mt-1">ICO or PNG, max 512 KB. Ideal size: 32×32 px.</p>
|
||||
</div>
|
||||
<button type="submit" class="bg-surface-700 hover:bg-surface-600 border border-gray-700 text-sm text-gray-300 rounded-lg px-4 py-2 transition-colors shrink-0">
|
||||
Upload
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Keep color picker and hex input in sync
|
||||
const colorInput = document.querySelector('input[type="color"]')
|
||||
const hexInput = document.getElementById('accent-hex')
|
||||
if (colorInput && hexInput) {
|
||||
colorInput.addEventListener('input', () => { hexInput.value = colorInput.value })
|
||||
hexInput.addEventListener('input', () => {
|
||||
if (/^#[0-9a-fA-F]{6}$/.test(hexInput.value)) colorInput.value = hexInput.value
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<%- include('../partials/head', { title: 'Upload Model' }) %>
|
||||
<%- include('../partials/adminNav', { currentPath: '/admin/upload' }) %>
|
||||
|
||||
<div class="pl-56 min-h-screen">
|
||||
<%- include('../partials/adminBanner') %>
|
||||
<div class="max-w-2xl mx-auto px-8 py-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-xl font-semibold text-white">Upload Model</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Supported formats: STEP, STP, STL</p>
|
||||
</div>
|
||||
|
||||
<% if (error) { %>
|
||||
<div class="mb-6 flex items-start gap-3 bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<svg class="w-4 h-4 text-red-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<p class="text-sm text-red-400"><%= error %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<form method="POST" action="/admin/models" enctype="multipart/form-data" class="space-y-6">
|
||||
|
||||
<!-- Drop zone -->
|
||||
<div id="drop-zone" class="border-2 border-dashed border-gray-700 hover:border-accent rounded-2xl p-12 text-center transition-colors cursor-pointer">
|
||||
<svg class="w-10 h-10 text-gray-600 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||
</svg>
|
||||
<p class="text-sm text-gray-400">Drop a <span class="text-white font-medium">.STEP, .STP, or .STL</span> file here</p>
|
||||
<p class="text-xs text-gray-600 mt-1">or</p>
|
||||
<label class="mt-3 inline-block cursor-pointer">
|
||||
<span class="text-sm text-accent underline">Browse files</span>
|
||||
<input id="model_file" name="model_file" type="file" accept=".step,.stp,.stl" required class="hidden" />
|
||||
</label>
|
||||
<p id="file-name" class="text-xs text-gray-400 mt-3 hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="bg-surface-900 border border-gray-800 rounded-2xl p-6 space-y-5">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5" for="name">Display Name <span class="text-red-400">*</span></label>
|
||||
<input id="name" name="name" type="text" required
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors"
|
||||
placeholder="e.g. Main Assembly v3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5" for="description">Description</label>
|
||||
<textarea id="description" name="description" rows="3"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3.5 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent transition-colors resize-none"
|
||||
placeholder="Optional notes about this model…"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-400 mb-1.5" for="category_id">Category</label>
|
||||
<select id="category_id" name="category_id"
|
||||
class="w-full bg-surface-800 border border-gray-700 rounded-lg px-3 py-2.5 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
|
||||
<option value="">Uncategorized</option>
|
||||
<% categories.forEach(c => { %>
|
||||
<option value="<%= c.id %>"><%= c.name %></option>
|
||||
<% }) %>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end pb-0.5">
|
||||
<label class="flex items-center gap-2.5 cursor-pointer">
|
||||
<div class="relative">
|
||||
<input id="is_public" name="is_public" type="checkbox" checked class="sr-only peer" />
|
||||
<div class="w-9 h-5 bg-gray-700 rounded-full peer-checked:bg-accent transition-colors"></div>
|
||||
<div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform peer-checked:translate-x-4"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400">Make public</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button type="submit" class="btn-accent text-white rounded-lg px-6 py-2.5 text-sm font-medium transition-all">
|
||||
Upload Model
|
||||
</button>
|
||||
<a href="/admin" class="bg-surface-800 hover:bg-surface-700 border border-gray-700 text-gray-300 rounded-lg px-6 py-2.5 text-sm font-medium transition-colors">
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<%- include('./partials/head', { title: String(status) }) %>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center px-6">
|
||||
<div class="text-center">
|
||||
<p class="text-6xl font-bold text-gray-800 mb-4"><%= status %></p>
|
||||
<p class="text-base text-gray-400 mb-6"><%= message %></p>
|
||||
<a href="/" class="text-sm text-accent hover:underline">← Go back home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<%- include('./partials/head', { title: 'Models' }) %>
|
||||
|
||||
<div class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<header class="border-b border-gray-800 bg-surface-900/80 backdrop-blur-sm sticky top-0 z-10">
|
||||
<div class="max-w-5xl mx-auto px-6 py-4 flex items-center gap-4">
|
||||
<% if (brand.brand_logo_path) { %>
|
||||
<img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-7 w-auto object-contain" />
|
||||
<% } else { %>
|
||||
<div class="h-7 w-7 rounded-md btn-accent flex items-center justify-center shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
</div>
|
||||
<% } %>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-white"><%= brand.brand_name %></span>
|
||||
<% if (brand.brand_tagline) { %>
|
||||
<span class="text-sm text-gray-600 ml-2"><%= brand.brand_tagline %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-5xl mx-auto px-6 py-10">
|
||||
<% const hasModels = categorised.length > 0 || uncategorized.length > 0 %>
|
||||
|
||||
<% if (!hasModels) { %>
|
||||
<div class="text-center py-24">
|
||||
<svg class="w-14 h-14 text-gray-800 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
<p class="text-gray-600 text-sm">No models are available yet.</p>
|
||||
</div>
|
||||
|
||||
<% } else { %>
|
||||
|
||||
<%
|
||||
// Reusable model card macro (EJS doesn't have macros, so we use a loop target)
|
||||
function modelCard(model) { /* rendered inline below */ }
|
||||
%>
|
||||
|
||||
<!-- Categorised sections -->
|
||||
<% categorised.forEach(({ category, models }) => { %>
|
||||
<section class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider"><%= category.name %></h2>
|
||||
<div class="flex-1 h-px bg-gray-800"></div>
|
||||
<span class="text-xs text-gray-700"><%= models.length %> model<%= models.length !== 1 ? 's' : '' %></span>
|
||||
</div>
|
||||
<% if (category.description) { %>
|
||||
<p class="text-xs text-gray-600 mb-4 -mt-3"><%= category.description %></p>
|
||||
<% } %>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<% models.forEach(model => { %>
|
||||
<%- include('./partials/modelCard', { model }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
</section>
|
||||
<% }) %>
|
||||
|
||||
<!-- Uncategorized -->
|
||||
<% if (uncategorized.length > 0) { %>
|
||||
<section>
|
||||
<% if (categorised.length > 0) { %>
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Other</h2>
|
||||
<div class="flex-1 h-px bg-gray-800"></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<% uncategorized.forEach(model => { %>
|
||||
<%- include('./partials/modelCard', { model }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
|
||||
<% } %>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<% if (typeof defaultPassword !== 'undefined' && defaultPassword) { %>
|
||||
<div class="bg-amber-500/10 border-b border-amber-500/20 px-8 py-2.5 flex items-center gap-3">
|
||||
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<p class="text-xs text-amber-400">
|
||||
You're using the default password. <a href="/admin/settings" class="underline font-medium hover:text-amber-300">Change it now</a> before exposing this app to a network.
|
||||
</p>
|
||||
</div>
|
||||
<% } %>
|
||||
@@ -0,0 +1,59 @@
|
||||
<aside class="fixed inset-y-0 left-0 w-56 bg-surface-900 border-r border-gray-800 flex flex-col z-20">
|
||||
<!-- Brand -->
|
||||
<div class="flex items-center gap-3 px-5 py-5 border-b border-gray-800">
|
||||
<% if (brand.brand_logo_path) { %>
|
||||
<img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-7 w-auto object-contain" />
|
||||
<% } else { %>
|
||||
<div class="h-7 w-7 rounded-md btn-accent flex items-center justify-center shrink-0">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="overflow-hidden">
|
||||
<p class="text-sm font-semibold text-white truncate"><%= brand.brand_name %></p>
|
||||
<p class="text-xs text-gray-500 truncate">Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav links -->
|
||||
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
||||
<%
|
||||
const navItems = [
|
||||
{ href: '/admin', label: 'Models', icon: 'cube' },
|
||||
{ href: '/admin/upload', label: 'Upload', icon: 'upload' },
|
||||
{ href: '/admin/categories', label: 'Categories', icon: 'folder' },
|
||||
{ href: '/admin/settings', label: 'Settings', icon: 'settings' },
|
||||
]
|
||||
const icons = {
|
||||
cube: '<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />',
|
||||
upload: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />',
|
||||
folder: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />',
|
||||
settings: '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />',
|
||||
}
|
||||
%>
|
||||
<% navItems.forEach(item => {
|
||||
const active = currentPath && (currentPath === item.href || (item.href !== '/admin' && currentPath.startsWith(item.href)))
|
||||
%>
|
||||
<a href="<%= item.href %>"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors <%= active ? 'btn-accent text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-surface-800' %>">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<%- icons[item.icon] %>
|
||||
</svg>
|
||||
<%= item.label %>
|
||||
</a>
|
||||
<% }) %>
|
||||
</nav>
|
||||
|
||||
<!-- Logout -->
|
||||
<div class="p-3 border-t border-gray-800">
|
||||
<form method="POST" action="/admin/logout">
|
||||
<button type="submit" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-surface-800 transition-colors">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
|
||||
</svg>
|
||||
Sign out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= typeof title !== 'undefined' ? title + ' — ' : '' %><%= brand.brand_name %></title>
|
||||
|
||||
<% if (brand.brand_favicon_path) { %>
|
||||
<link rel="icon" href="/brand/favicon" />
|
||||
<% } %>
|
||||
|
||||
<!-- Inter font -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
|
||||
<!-- Dynamic brand accent color -->
|
||||
<style>
|
||||
:root { --accent: <%= brand.brand_accent %>; }
|
||||
.btn-accent { background-color: var(--accent); }
|
||||
.btn-accent:hover { filter: brightness(1.12); }
|
||||
.border-accent { border-color: var(--accent); }
|
||||
.text-accent { color: var(--accent); }
|
||||
.ring-accent:focus { --tw-ring-color: var(--accent); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-950 text-gray-100 font-sans antialiased min-h-screen">
|
||||
@@ -0,0 +1,31 @@
|
||||
<a href="/view/<%= model.slug %>"
|
||||
class="group bg-surface-900 border border-gray-800 hover:border-gray-600 rounded-2xl overflow-hidden transition-all duration-200 hover:shadow-2xl hover:shadow-black/30 hover:-translate-y-0.5 flex flex-col">
|
||||
|
||||
<!-- Thumbnail / placeholder -->
|
||||
<div class="aspect-video bg-surface-800 flex items-center justify-center overflow-hidden">
|
||||
<% if (model.thumbnail_path) { %>
|
||||
<img src="/files/thumbnail/<%= model.id %>"
|
||||
alt="<%= model.name %>"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
|
||||
<% } else { %>
|
||||
<svg class="w-10 h-10 text-gray-700 group-hover:text-gray-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="p-4 flex-1 flex flex-col gap-1">
|
||||
<p class="text-sm font-medium text-white group-hover:text-accent transition-colors leading-snug">
|
||||
<%= model.name %>
|
||||
</p>
|
||||
<% if (model.description) { %>
|
||||
<p class="text-xs text-gray-500 line-clamp-2 leading-relaxed"><%= model.description %></p>
|
||||
<% } %>
|
||||
<div class="flex items-center gap-2 mt-auto pt-2">
|
||||
<span class="text-xs font-mono bg-surface-800 border border-gray-700 text-gray-500 px-1.5 py-0.5 rounded">
|
||||
<%= model.file_type.toUpperCase() %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -0,0 +1,152 @@
|
||||
<%- include('./partials/head', { title: model.name }) %>
|
||||
|
||||
<style>
|
||||
body { overflow: hidden; }
|
||||
#viewer-canvas { display: block; width: 100vw; height: 100vh; }
|
||||
#pdf-panel { transition: transform 0.3s ease; }
|
||||
#pdf-panel.closed { transform: translateX(100%); }
|
||||
</style>
|
||||
|
||||
<!-- 3D Canvas -->
|
||||
<canvas id="viewer-canvas"></canvas>
|
||||
|
||||
<!-- Loading overlay -->
|
||||
<div id="loading-overlay" class="fixed inset-0 bg-surface-950 flex items-center justify-center z-30">
|
||||
<div class="text-center">
|
||||
<div class="w-10 h-10 border-2 border-accent border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
||||
<p class="text-sm text-gray-400" id="loading-msg">Loading model…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error overlay -->
|
||||
<div id="error-overlay" class="fixed inset-0 bg-surface-950 items-center justify-center z-30 hidden">
|
||||
<div class="text-center max-w-sm px-6">
|
||||
<svg class="w-12 h-12 text-red-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<p class="text-sm text-gray-300 font-medium mb-2">Failed to load model</p>
|
||||
<p id="error-msg" class="text-xs text-gray-500"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-right controls -->
|
||||
<div class="fixed top-5 right-5 flex items-center gap-2 z-20">
|
||||
|
||||
<!-- Wireframe toggle -->
|
||||
<button id="wireframe-btn" title="Toggle wireframe"
|
||||
class="flex items-center justify-center w-8 h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Reset camera -->
|
||||
<button id="reset-camera-btn" title="Reset camera"
|
||||
class="flex items-center justify-center w-8 h-8 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-400 hover:text-white rounded-xl transition-all">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Copy link -->
|
||||
<button id="copy-link-btn"
|
||||
data-url="<%= shareUrl %>"
|
||||
class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2 text-xs font-medium transition-all">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
||||
</svg>
|
||||
Copy Link
|
||||
</button>
|
||||
|
||||
<!-- PDF toggle (only shown if PDFs exist) -->
|
||||
<% if (pdfs.length > 0) { %>
|
||||
<button id="pdf-toggle-btn"
|
||||
class="flex items-center gap-2 bg-surface-900/90 backdrop-blur-sm border border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white rounded-xl px-3.5 py-2 text-xs font-medium transition-all">
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
Diagrams <span class="opacity-60">(<%= pdfs.length %>)</span>
|
||||
</button>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<!-- Bottom-left model info -->
|
||||
<div class="fixed bottom-6 left-6 z-20 max-w-xs">
|
||||
<% if (brand.brand_logo_path) { %>
|
||||
<img src="/brand/logo" alt="<%= brand.brand_name %>" class="h-5 w-auto object-contain mb-3 opacity-70" />
|
||||
<% } %>
|
||||
<h1 class="text-base font-semibold text-white leading-tight"><%= model.name %></h1>
|
||||
<% if (model.category_name) { %>
|
||||
<p class="text-xs text-gray-500 mt-0.5"><%= model.category_name %></p>
|
||||
<% } %>
|
||||
<% if (model.description) { %>
|
||||
<p class="text-xs text-gray-400 mt-1.5 leading-relaxed"><%= model.description %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<!-- Bottom-right orbit hint -->
|
||||
<div class="fixed bottom-6 right-6 z-20 text-right hidden md:block">
|
||||
<p class="text-xs text-gray-700">Left drag — rotate · Right drag — pan · Scroll — zoom</p>
|
||||
</div>
|
||||
|
||||
<!-- PDF slide-in panel -->
|
||||
<% if (pdfs.length > 0) { %>
|
||||
<div id="pdf-panel" class="fixed top-0 right-0 h-full w-full max-w-md bg-surface-900 border-l border-gray-800 z-20 closed flex flex-col">
|
||||
<!-- Panel header -->
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-gray-800 shrink-0">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold text-white">Shop Diagrams</h2>
|
||||
<p class="text-xs text-gray-500 mt-0.5"><%= model.name %></p>
|
||||
</div>
|
||||
<button id="pdf-close-btn" class="p-1.5 rounded-lg text-gray-500 hover:text-white hover:bg-surface-800 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- PDF tabs -->
|
||||
<% if (pdfs.length > 1) { %>
|
||||
<div class="flex border-b border-gray-800 overflow-x-auto shrink-0">
|
||||
<% pdfs.forEach((pdf, i) => { %>
|
||||
<button
|
||||
class="pdf-tab px-4 py-2.5 text-xs whitespace-nowrap font-medium transition-colors border-b-2 <%= i === 0 ? 'border-accent text-white' : 'border-transparent text-gray-500 hover:text-gray-300' %>"
|
||||
data-tab="<%= i %>">
|
||||
<%= pdf.display_name %>
|
||||
</button>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- PDF viewer -->
|
||||
<div class="flex-1 overflow-hidden relative">
|
||||
<% pdfs.forEach((pdf, i) => { %>
|
||||
<iframe
|
||||
src="/files/pdf/<%= model.id %>/<%= pdf.id %>#toolbar=0&navpanes=0&view=FitH"
|
||||
class="pdf-frame absolute inset-0 w-full h-full border-0 <%= i > 0 ? 'hidden' : '' %>"
|
||||
data-frame="<%= i %>"
|
||||
></iframe>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- Toast -->
|
||||
<div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-surface-800 border border-gray-700 text-white text-sm px-4 py-3 rounded-xl shadow-2xl opacity-0 transition-all duration-300 pointer-events-none z-50">
|
||||
<span id="toast-msg"></span>
|
||||
</div>
|
||||
|
||||
<!-- Model data passed to viewer JS -->
|
||||
<script>
|
||||
window.__STEPVIEW__ = {
|
||||
modelId: <%= model.id %>,
|
||||
fileType: '<%= model.file_type %>',
|
||||
shareUrl: '<%- shareUrl %>',
|
||||
hasPdfs: <%= pdfs.length > 0 %>,
|
||||
hasGeometry: <%= typeof hasGeometry !== 'undefined' ? hasGeometry : false %>,
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="/viewer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user