LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1: / Zeile 1: @@
+<html>
 <div id="ados-labelscan" class="ados-scan">
-  <h2>📷 Abfüllung scannen</h2>
-   <form id="ados-scan-form" class="ados-scan__form">
+  <header class="ados-scan__header">
-     <button id="ados-scan-bigbtn" type="button" class="ados-scan__btn">Foto aufnehmen / wählen</button>
+    <h2>📸 Abfüllung scannen</h2>
-    <input id="ados-scan-file" type="file" accept="image/*" capture="environment" style="display:none">
+    <p class="ados-scan__sub">Foto der Front-Label-Seite aufnehmen oder wählen. Die Erkennung läuft lokal im Browser.</p>
-     <div class="ados-scan__status">
+  </header>
-       <span id="ados-scan-status">Bereit.</span>
-       <progress id="ados-scan-progress" max="1" value="0" hidden></progress>
+   <form id="ados-scan-form" class="ados-scan__form" onsubmit="return false">
+     <!-- Upload / Dropzone -->
+    <label for="ados-scan-file" class="ados-scan__drop" id="ados-scan-drop" aria-label="Datei wählen oder hier ablegen">
+      <div class="ados-scan__drop-icon">🖼️</div>
+      <div class="ados-scan__drop-text">
+        <b>Bild hierher ziehen</b> oder
+        <button id="ados-scan-bigbtn" type="button" class="btn btn-secondary">Foto aufnehmen / wählen</button>
+      </div>
+      <input id="ados-scan-file" type="file" accept="image/*" capture="environment" hidden>
+    </label>
+    <!-- Vorschau + Status -->
+     <div class="ados-scan__statusrow">
+       <div id="ados-scan-status" class="ados-scan__status">Bereit.</div>
+       <progress id="ados-scan-progress" max="1" value="0" class="ados-scan__progress" hidden></progress>
+    </div>
+    <div id="ados-scan-preview" class="ados-scan__preview" aria-live="polite" aria-atomic="true"></div>
+    <!-- Actions -->
+    <div class="ados-scan__actions">
+      <button id="ados-scan-run" type="submit" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
+      <button type="reset" class="btn btn-ghost" onclick="
+        const p=document.getElementById('ados-scan-preview'); if(p) p.innerHTML='';
+        const f=document.getElementById('ados-scan-file'); if(f) f.value='';
+        const s=document.getElementById('ados-scan-status'); if(s) s.textContent='Bereit.';
+      ">Zurücksetzen</button>
      </div>
-    <button id="ados-scan-run" type="submit" class="ados-scan__run">Erkennen & suchen</button>
    </form>
-   <div id="ados-scan-preview" class="ados-scan__preview" aria-hidden="true"></div>
+   <section class="ados-scan__resultswrap">
-  <h3>Vorschläge</h3>
+    <h3>Vorschläge</h3>
-  <div id="ados-scan-results"></div>
+    <div id="ados-scan-results" class="ados-scan__results"></div>
-   <details style="margin-top:.5rem;">
+   </section>
-    <summary>OCR-Text (Debug)</summary>
-    <div id="ados-scan-ocr" style="white-space:pre-wrap; font-size:12px; color:#666;"></div>
+  <footer class="ados-scan__note">🔒 Das Bild bleibt auf deinem Gerät. Es wird nicht hochgeladen.</footer>
-  </details>
 </div>
+</html>
+<div id="ados-scan-ocr" style="white-space:pre-wrap; font-size:12px; color:#666; margin-top:.5rem;"></div>

Version vom 5. November 2025, 23:22 Uhr

Vorschläge