hamlab/hamprint
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9e16b7879361d52faa3b5fa9633821ac1c28a8b7
hamprint/demo/index.html

152 lines
9.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>hamprint — public 3D print dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
</style>
</head>
<body class="min-h-screen bg-slate-50 text-slate-900">
<!-- Prototype navigator (not part of the real app) -->
<div class="bg-slate-900 text-slate-200 text-xs">
<div class="mx-auto max-w-6xl px-4 py-2 flex flex-wrap items-center gap-x-3 gap-y-1">
<span class="font-semibold text-amber-400">PROTOTYPE</span>
<a class="hover:text-white underline-offset-2 hover:underline" href="index.html">Dashboard</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="submit.html">Submit (guest)</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="submit-signed-in.html">Submit (signed-in)</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="login.html">Sign in</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="my-prints.html">My prints</a>
<span class="text-slate-500">|</span>
<a class="hover:text-white underline-offset-2 hover:underline" href="detail-pending.html">Detail: pending</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="detail-queued.html">queued</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="detail-printing.html">printing</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="detail-completed.html">completed</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="detail-rejected.html">rejected</a>
<a class="hover:text-white underline-offset-2 hover:underline" href="confirmed.html">confirmation link</a>
</div>
</div>
<!-- Top nav -->
<nav class="border-b border-slate-200 bg-white">
<div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
<a href="index.html" class="flex items-center gap-2">
<span class="inline-grid place-items-center w-8 h-8 rounded-md bg-amber-500 text-white font-bold">h</span>
<span class="font-bold text-lg tracking-tight">hamprint</span>
<span class="hidden sm:inline text-xs text-slate-500 ml-1">· hamlab.lt</span>
</a>
<div class="flex items-center gap-1">
<a href="index.html" class="px-3 py-1.5 text-sm rounded-md text-slate-900 bg-slate-100 font-medium">Dashboard</a>
<a href="submit.html" class="px-3 py-1.5 text-sm rounded-md bg-amber-500 text-white hover:bg-amber-600 font-medium">+ Submit a print</a>
<a href="login.html" class="px-3 py-1.5 text-sm rounded-md text-slate-700 hover:bg-slate-100">Sign in</a>
</div>
</div>
</nav>
<main class="mx-auto max-w-6xl px-4 py-8">
<!-- Page heading -->
<header class="mb-6">
<h1 class="text-2xl font-bold tracking-tight">Print dashboard</h1>
<p class="text-slate-600 mt-1">Every public print job submitted to the hamlab.lt printer. Look up your submission by its codename.</p>
</header>
<!-- Filter chips -->
<div class="flex flex-wrap items-center gap-2 mb-4">
<button class="px-3 py-1.5 text-sm rounded-full border border-slate-900 bg-slate-900 text-white">All <span class="opacity-70">42</span></button>
<button class="px-3 py-1.5 text-sm rounded-full border border-slate-300 bg-white text-slate-700 hover:bg-slate-100">Queued <span class="text-slate-400">7</span></button>
<button class="px-3 py-1.5 text-sm rounded-full border border-slate-300 bg-white text-slate-700 hover:bg-slate-100">Printing <span class="text-slate-400">1</span></button>
<button class="px-3 py-1.5 text-sm rounded-full border border-slate-300 bg-white text-slate-700 hover:bg-slate-100">Completed <span class="text-slate-400">34</span></button>
<div class="ml-auto flex items-center gap-2">
<input type="search" placeholder="Search by codename…" class="px-3 py-1.5 text-sm rounded-md border border-slate-300 bg-white w-64 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500" />
</div>
</div>
<!-- Submission list -->
<div class="bg-white border border-slate-200 rounded-lg overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-slate-50 border-b border-slate-200 text-slate-600">
<tr class="text-left">
<th class="px-4 py-2.5 font-medium">Codename</th>
<th class="px-4 py-2.5 font-medium">Status</th>
<th class="px-4 py-2.5 font-medium hidden sm:table-cell">Age</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-printing.html" class="mono text-amber-700 hover:underline font-medium">cheerful_curie</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-orange-100 text-orange-800 text-xs font-medium"><span class="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"></span>Printing</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">12 min</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-queued.html" class="mono text-amber-700 hover:underline font-medium">sleepy_volta</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-xs font-medium">Queued · #1</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">42 min</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-queued.html" class="mono text-amber-700 hover:underline font-medium">grumpy_hopper</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-xs font-medium">Queued · #2</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">1 h</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-completed.html" class="mono text-amber-700 hover:underline font-medium">jolly_bardeen</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs font-medium">Completed</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">3 h</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-completed.html" class="mono text-amber-700 hover:underline font-medium">vibrant_lovelace</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs font-medium">Completed</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">5 h</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-rejected.html" class="mono text-amber-700 hover:underline font-medium">stoic_turing</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-red-100 text-red-800 text-xs font-medium">Rejected</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">8 h</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-completed.html" class="mono text-amber-700 hover:underline font-medium">brave_hamilton</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs font-medium">Completed</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">1 d</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><a href="detail-completed.html" class="mono text-amber-700 hover:underline font-medium">cool_einstein</a></td>
<td class="px-4 py-3"><span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs font-medium">Completed</span></td>
<td class="px-4 py-3 hidden sm:table-cell text-slate-500">2 d</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex items-center justify-between mt-4 text-sm">
<p class="text-slate-500">Showing 1–8 of 42</p>
<div class="flex items-center gap-1">
<button disabled class="px-3 py-1.5 rounded-md border border-slate-200 text-slate-400 cursor-not-allowed">Previous</button>
<button class="px-3 py-1.5 rounded-md border border-slate-300 bg-white text-slate-700 hover:bg-slate-100">Next →</button>
</div>
</div>
<!-- Helper card -->
<div class="mt-10 rounded-lg border border-amber-200 bg-amber-50 p-4 flex items-start gap-3">
<div class="w-8 h-8 rounded-full bg-amber-500 text-white grid place-items-center flex-shrink-0 font-bold">?</div>
<div class="text-sm">
<p class="font-semibold text-amber-900">Don't have an account?</p>
<p class="text-amber-800/90 mt-0.5">You don't need one. Just hit <a href="submit.html" class="underline font-medium">Submit a print</a>, give us an email, and we'll send you a codename to track your job.</p>
</div>
</div>
</main>
<footer class="mt-12 border-t border-slate-200 bg-white">
<div class="mx-auto max-w-6xl px-4 py-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 text-sm text-slate-500">
<p>A community service of <a href="https://hamlab.lt" class="font-medium text-slate-700 hover:underline">hamlab.lt</a></p>
<p>Operators: please use the <a href="#" class="hover:underline">admin panel</a>.</p>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink