212 lines
14 KiB
HTML
212 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Submit a print — hamprint</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; }
|
|
/* show/hide source inputs based on radio selection. Radios live inside a
|
|
grid <div> while the panes are siblings of the grid, so a plain `~`
|
|
combinator never matches -- we use `fieldset:has(...)` instead. */
|
|
.src-pane { display: none; }
|
|
fieldset:has(#src-upload:checked) .src-pane[data-pane="upload"],
|
|
fieldset:has(#src-printables:checked) .src-pane[data-pane="url"],
|
|
fieldset:has(#src-makerworld:checked) .src-pane[data-pane="url"],
|
|
fieldset:has(#src-thingiverse:checked) .src-pane[data-pane="url"] { display: block; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-50 text-slate-900">
|
|
|
|
<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>
|
|
|
|
<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-700 hover:bg-slate-100">Dashboard</a>
|
|
<a href="submit.html" class="px-3 py-1.5 text-sm rounded-md bg-amber-500 text-white 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-3xl px-4 py-8">
|
|
<header class="mb-6">
|
|
<h1 class="text-2xl font-bold tracking-tight">Submit a print</h1>
|
|
<p class="text-slate-600 mt-1">Anyone can submit a job. We'll send you a codename to follow it on the dashboard.</p>
|
|
</header>
|
|
|
|
<!-- Guest banner -->
|
|
<div class="rounded-lg border border-slate-200 bg-white p-4 mb-6 flex items-start gap-3 text-sm">
|
|
<span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-xs font-medium uppercase tracking-wide">Guest</span>
|
|
<p class="text-slate-700">You're submitting anonymously. We'll email you a confirmation link — click it within 1 hour to put your print in the queue. <a href="login.html" class="text-amber-700 font-medium hover:underline">Sign in with Google</a> to skip this step.</p>
|
|
</div>
|
|
|
|
<form class="space-y-6 bg-white border border-slate-200 rounded-lg p-6">
|
|
<!-- Source -->
|
|
<fieldset>
|
|
<legend class="block text-sm font-medium text-slate-900 mb-2">Where is the model coming from? <span class="text-red-500">*</span></legend>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
|
|
<input type="radio" name="source" id="src-upload" class="hidden peer/upload" checked />
|
|
<label for="src-upload" class="cursor-pointer border border-slate-300 rounded-md px-3 py-2 text-center text-sm hover:border-amber-500 peer-checked/upload:border-amber-500 peer-checked/upload:bg-amber-50 peer-checked/upload:text-amber-900 peer-checked/upload:font-medium">.stl file</label>
|
|
|
|
<input type="radio" name="source" id="src-printables" class="hidden peer/printables" />
|
|
<label for="src-printables" class="cursor-pointer border border-slate-300 rounded-md px-3 py-2 text-center text-sm hover:border-amber-500 peer-checked/printables:border-amber-500 peer-checked/printables:bg-amber-50 peer-checked/printables:text-amber-900 peer-checked/printables:font-medium">Printables</label>
|
|
|
|
<input type="radio" name="source" id="src-makerworld" class="hidden peer/makerworld" />
|
|
<label for="src-makerworld" class="cursor-pointer border border-slate-300 rounded-md px-3 py-2 text-center text-sm hover:border-amber-500 peer-checked/makerworld:border-amber-500 peer-checked/makerworld:bg-amber-50 peer-checked/makerworld:text-amber-900 peer-checked/makerworld:font-medium">MakerWorld</label>
|
|
|
|
<input type="radio" name="source" id="src-thingiverse" class="hidden peer/thingiverse" />
|
|
<label for="src-thingiverse" class="cursor-pointer border border-slate-300 rounded-md px-3 py-2 text-center text-sm hover:border-amber-500 peer-checked/thingiverse:border-amber-500 peer-checked/thingiverse:bg-amber-50 peer-checked/thingiverse:text-amber-900 peer-checked/thingiverse:font-medium">Thingiverse</label>
|
|
</div>
|
|
|
|
<!-- Upload pane: hidden native file input + dropzone label + JS-driven
|
|
filename feedback (see <script> at the bottom). -->
|
|
<div class="src-pane" data-pane="upload">
|
|
<label class="block cursor-pointer">
|
|
<div class="border-2 border-dashed border-slate-300 rounded-md p-6 text-center hover:border-amber-500 hover:bg-amber-50/40 transition">
|
|
<svg class="w-8 h-8 mx-auto text-slate-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0L9 12.75M12 9.75l3 3M3 17.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18v-.75" /></svg>
|
|
<p data-stl-prompt class="mt-2 text-sm font-medium text-slate-700">Drop your .stl here or click to browse</p>
|
|
<p data-stl-filename class="hidden mt-2 text-sm font-medium text-amber-700"></p>
|
|
<p class="text-xs text-slate-500 mt-1">Raw <span class="mono">.stl</span> only, max 4 MB. No <span class="mono">.3mf</span>, <span class="mono">.gcode</span>, <span class="mono">.zip</span>, etc.</p>
|
|
</div>
|
|
<input id="stl-file-input" type="file" accept=".stl" class="sr-only" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- URL pane (shared by Printables / MakerWorld / Thingiverse). The
|
|
label, placeholder, and help text are rewritten per source-type by
|
|
the <script> at the bottom so the user gets host-specific guidance. -->
|
|
<div class="src-pane" data-pane="url">
|
|
<label for="url-input" data-url-label class="block text-sm font-medium text-slate-700 mb-1">Printables.com URL</label>
|
|
<input id="url-input" type="url" placeholder="https://www.printables.com/model/…" class="w-full px-3 py-2 rounded-md border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500" />
|
|
<p data-url-help class="text-xs text-slate-500 mt-1">Must be a <span class="mono">printables.com</span> link.</p>
|
|
</div>
|
|
|
|
<p class="text-xs text-slate-500 mt-3">Got something from elsewhere? Download the <span class="mono">.stl</span> and upload it as a file.</p>
|
|
</fieldset>
|
|
|
|
<!-- Filament -->
|
|
<div>
|
|
<label for="filament" class="block text-sm font-medium text-slate-900 mb-1">Filament</label>
|
|
<select id="filament" class="w-full px-3 py-2 rounded-md border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
|
|
<option value="">No preference — operator's choice</option>
|
|
<option>Red PLA</option>
|
|
<option>Black PLA</option>
|
|
<option>White PLA</option>
|
|
<option>Silver PLA</option>
|
|
<option>Mil green PETG</option>
|
|
<option>Translucent PETG</option>
|
|
<option>Orange PETG</option>
|
|
<option>Black TPU 95A</option>
|
|
</select>
|
|
<p class="text-xs text-slate-500 mt-1">Only filaments currently loaded at hamlab.lt are listed. The list is curated by operators — out-of-stock options are hidden.</p>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div>
|
|
<label for="notes" class="block text-sm font-medium text-slate-900 mb-1">
|
|
Notes for the operator
|
|
<span class="ml-1 inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 text-[10px] font-medium uppercase tracking-wide align-middle">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
|
|
Private
|
|
</span>
|
|
</label>
|
|
<textarea id="notes" rows="3" placeholder="e.g. 0.2 mm layer height, 20% infill, pickup Saturday afternoon." class="w-full px-3 py-2 rounded-md border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500"></textarea>
|
|
<p class="text-xs text-slate-500 mt-1">Only the operator sees these — they're not shown on your public submission page. Layer height, infill, pickup arrangement, anything useful.</p>
|
|
</div>
|
|
|
|
<!-- Email (guest-only) -->
|
|
<div class="border-t border-slate-200 pt-6">
|
|
<label for="email" class="block text-sm font-medium text-slate-900 mb-1">Your email <span class="text-red-500">*</span></label>
|
|
<input id="email" type="email" placeholder="you@example.com" class="w-full px-3 py-2 rounded-md border border-slate-300 bg-white focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500" />
|
|
<p class="text-xs text-slate-500 mt-1">We'll send a confirmation link. The submission disappears in 1 hour if not confirmed. Never shown publicly.</p>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<div class="flex items-center justify-end gap-3 border-t border-slate-200 pt-6">
|
|
<a href="index.html" class="px-4 py-2 text-sm rounded-md text-slate-700 hover:bg-slate-100">Cancel</a>
|
|
<a href="detail-pending.html" class="px-4 py-2 text-sm rounded-md bg-amber-500 text-white hover:bg-amber-600 font-medium">Submit print</a>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
|
|
<footer class="mt-12 border-t border-slate-200 bg-white">
|
|
<div class="mx-auto max-w-6xl px-4 py-6 text-sm text-slate-500 text-center">
|
|
A community service of <a href="https://hamlab.lt" class="font-medium text-slate-700 hover:underline">hamlab.lt</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Filename feedback: swap the "Drop your .stl here" prompt for the picked
|
|
// file's name + size as soon as the user selects something.
|
|
(function() {
|
|
var input = document.getElementById("stl-file-input");
|
|
var prompt = document.querySelector("[data-stl-prompt]");
|
|
var filename = document.querySelector("[data-stl-filename]");
|
|
if (!input || !prompt || !filename) return;
|
|
input.addEventListener("change", function(e) {
|
|
var file = e.target.files && e.target.files[0];
|
|
if (file) {
|
|
prompt.classList.add("hidden");
|
|
filename.classList.remove("hidden");
|
|
filename.textContent = "✓ " + file.name + " (" + Math.round(file.size / 1024) + " KB)";
|
|
} else {
|
|
prompt.classList.remove("hidden");
|
|
filename.classList.add("hidden");
|
|
filename.textContent = "";
|
|
}
|
|
});
|
|
})();
|
|
|
|
// URL-pane copy: rewrite the label, the input's placeholder, and the help
|
|
// text per source-type so the user gets host-specific guidance.
|
|
(function() {
|
|
var COPY = {
|
|
printables: { label: "Printables.com URL", ph: "https://www.printables.com/model/…", help: "Must be a printables.com link." },
|
|
makerworld: { label: "MakerWorld URL", ph: "https://makerworld.com/en/models/…", help: "Must be a makerworld.com link." },
|
|
thingiverse: { label: "Thingiverse URL", ph: "https://www.thingiverse.com/thing:…", help: "Must be a thingiverse.com link." }
|
|
};
|
|
var labelEl = document.querySelector("[data-url-label]");
|
|
var inputEl = document.getElementById("url-input");
|
|
var helpEl = document.querySelector("[data-url-help]");
|
|
function apply(sourceType) {
|
|
var c = COPY[sourceType];
|
|
if (!c) return;
|
|
if (labelEl) labelEl.textContent = c.label;
|
|
if (inputEl) inputEl.placeholder = c.ph;
|
|
if (helpEl) helpEl.textContent = c.help;
|
|
}
|
|
document.querySelectorAll('input[name="source"]').forEach(function(radio) {
|
|
radio.addEventListener("change", function(e) { apply(e.target.value); });
|
|
if (radio.checked) apply(radio.value);
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|