jason
85 lines
3.2 KiB
Plaintext
85 lines
3.2 KiB
Plaintext
<%- 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>
|