hamlab/hamprint
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update demo submit view

Browse Source
This commit is contained in:
Simonas Kareiva
2026-05-12 19:35:26 +03:00
parent 0fdb8b8a02
commit 6f19d10426
1 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
demo/submit.html
View File

@@ -8,12 +8,14 @@
<style> <style>
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } 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; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* show/hide source inputs based on radio selection */ /* show/hide source inputs based on radio selection. Radios live inside a
#src-upload:checked ~ .src-pane[data-pane="upload"] { display: block; } grid <div> while the panes are siblings of the grid, so a plain `~`
#src-printables:checked ~ .src-pane[data-pane="printables"] { display: block; } combinator never matches -- we use `fieldset:has(...)` instead. */
#src-makerworld:checked ~ .src-pane[data-pane="makerworld"] { display: block; }
#src-thingiverse:checked ~ .src-pane[data-pane="thingiverse"] { display: block; }
.src-pane { display: none; } .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> </style>
</head> </head>
<body class="min-h-screen bg-slate-50 text-slate-900"> <body class="min-h-screen bg-slate-50 text-slate-900">
@@ -81,37 +83,27 @@
<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> <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> </div>
<!-- Upload pane --> <!-- Upload pane: hidden native file input + dropzone label + JS-driven
filename feedback (see <script> at the bottom). -->
<div class="src-pane" data-pane="upload"> <div class="src-pane" data-pane="upload">
<label class="block"> <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 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> <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 class="mt-2 text-sm font-medium text-slate-700">Drop your .stl here or click to browse</p> <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> <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> </div>
<input type="file" accept=".stl" class="sr-only" /> <input id="stl-file-input" type="file" accept=".stl" class="sr-only" />
</label> </label>
</div> </div>
<!-- Printables pane --> <!-- URL pane (shared by Printables / MakerWorld / Thingiverse). The
<div class="src-pane" data-pane="printables"> label, placeholder, and help text are rewritten per source-type by
<label class="block text-sm font-medium text-slate-700 mb-1">Printables.com URL</label> the <script> at the bottom so the user gets host-specific guidance. -->
<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" /> <div class="src-pane" data-pane="url">
<p class="text-xs text-slate-500 mt-1">Must be a <span class="mono">printables.com</span> link.</p> <label for="url-input" data-url-label class="block text-sm font-medium text-slate-700 mb-1">Printables.com URL</label>
</div> <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>
<!-- Makerworld pane -->
<div class="src-pane" data-pane="makerworld">
<label class="block text-sm font-medium text-slate-700 mb-1">MakerWorld URL</label>
<input type="url" placeholder="https://makerworld.com/en/models/…" 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">Must be a <span class="mono">makerworld.com</span> link.</p>
</div>
<!-- Thingiverse pane -->
<div class="src-pane" data-pane="thingiverse">
<label class="block text-sm font-medium text-slate-700 mb-1">Thingiverse URL</label>
<input type="url" placeholder="https://www.thingiverse.com/thing:…" 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">Must be a <span class="mono">thingiverse.com</span> link.</p>
</div> </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> <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>
@@ -168,5 +160,52 @@
</div> </div>
</footer> </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> </body>
</html> </html>