From 6f19d10426932761dd856145da48d50463912222 Mon Sep 17 00:00:00 2001
From: Simonas Kareiva <simonas@5grupe.lt>
Date: Tue, 12 May 2026 19:35:26 +0300
Subject: [PATCH] Update demo submit view

---
 demo/submit.html | 97 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 68 insertions(+), 29 deletions(-)
diff --git a/demo/submit.html b/demo/submit.html
index 419a74e..4ac4337 100644
--- a/demo/submit.html
+++ b/demo/submit.html
@@ -8,12 +8,14 @@
 <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 */
-  #src-upload:checked     ~ .src-pane[data-pane="upload"]     { display: block; }
-  #src-printables:checked ~ .src-pane[data-pane="printables"] { display: block; }
-  #src-makerworld:checked ~ .src-pane[data-pane="makerworld"] { display: block; }
-  #src-thingiverse:checked ~ .src-pane[data-pane="thingiverse"] { display: block; }
+  /* 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">
@@ -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>
       </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">
-        <label class="block">
-          <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">
+        <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 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>
           </div>
-          <input type="file" accept=".stl" class="sr-only" />
+          <input id="stl-file-input" type="file" accept=".stl" class="sr-only" />
         </label>
       </div>
 
-      <!-- Printables pane -->
-      <div class="src-pane" data-pane="printables">
-        <label class="block text-sm font-medium text-slate-700 mb-1">Printables.com URL</label>
-        <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 class="text-xs text-slate-500 mt-1">Must be a <span class="mono">printables.com</span> link.</p>
-      </div>
-
-      <!-- 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>
+      <!-- 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>
@@ -168,5 +160,52 @@
   </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>
