LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 7. November 2025, 22:36 Uhr

📸 Abfüllung scannen

Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.

🖼️

Bild hierher ziehen oder unten auswählen

Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.

Bereit.

Noch keine Vorschau. Wähle ein Foto.

🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen.

🔎 Ergebnisse

Hier erscheinen passende Abfüllungen.

Tipps

Frontlabel direkt fotografieren
Gute Beleuchtung
Label füllt möglichst das ganze Bild

@@ Zeile 1: / Zeile 1: @@
-<html> <div id="ados-labelscan"> <!-- Kopf --> <div class="card" style="margin-bottom:10px;"> <h2>📸 Abfüllung scannen</h2> <p class="sub">Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.</p> </div> <div class="scan-grid"> <!-- Linke Spalte: Upload & Vorschau --> <div class="col"> <div class="card"> <!-- Dropzone --> <label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen oder auswählen"> <div class="icon">🖼️</div> <div><b>Bild hierher ziehen</b> oder</div> <div style="margin-top:6px;"> <button id="ados-scan-bigbtn" type="button" class="btn">📷 Foto aufnehmen / wählen</button> </div> <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div> <input id="ados-scan-file" type="file" accept="image/*" capture="environment"> </label> <!-- Status + Progress --> <div class="statusbar"> <div id="ados-scan-status">Bereit.</div> <progress id="ados-scan-progress" max="1" value="0" hidden></progress> </div> <!-- Actions --> <div class="action-row" style="margin-top:8px;"> <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen &amp; suchen</button> <button type="button" 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> </div> <!-- Vorschau --> <div id="ados-scan-preview" class="card preview" aria-live="polite" aria-atomic="true"> <div class="note">Noch keine Vorschau. Wähle ein Foto.</div> </div> <!-- Hinweis --> <div class="note" style="margin-top:6px;"> 🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen. </div> </div> <!-- Rechte Spalte: Ergebnisse --> <div class="col"> <div class="card"> <h3 style="margin:0 0 .4rem;">🔎 Ergebnisse</h3> <div id="ados-scan-results" class="results"> <div class="empty">Hier erscheinen passende Abfüllungen mit Link ins Wiki.</div> </div> </div> <div class="card"> <h3 style="margin:0 0 .4rem;">Tipps für bessere Treffer</h3> <ul style="margin:.25rem 0 .2rem 1.1rem;"> <li>Foto frontal auf das <b>Frontlabel</b> richten</li> <li><b>Gute Beleuchtung</b>, Blende-Reflexe vermeiden</li> <li>Label möglichst <b>voll im Bild</b>, wenig Hintergrund</li> <li>Wenn Glas spiegelt: leicht schräg, aber nah</li> </ul> </div> </div> </div> </div> </html>
+<html>
+<div id="ados-labelscan">
+  <!-- Kopf -->
+  <div class="card" style="margin-bottom:10px;">
+    <h2>📸 Abfüllung scannen</h2>
+    <p class="sub">Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.</p>
+  </div>
+  <div class="scan-grid">
+    <!-- Linke Spalte -->
+    <div class="col">
+      <div class="card">
+        <!-- Dropzone -->
+        <label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen oder auswählen">
+          <div class="icon">🖼️</div>
+          <div><b>Bild hierher ziehen</b> oder unten auswählen</div>
+          <div class="ados-scan__pick" style="margin-top:10px; display:flex; gap:6px; justify-content:center;">
+            <!-- Kamera -->
+            <button id="ados-scan-btn-camera" type="button" class="btn">📷 Foto aufnehmen</button>
+            <input id="ados-scan-file-camera" type="file" accept="image/*" capture="environment" hidden>
+            <!-- Galerie -->
+            <button id="ados-scan-btn-gallery" type="button" class="btn">🖼️ Bild wählen</button>
+            <input id="ados-scan-file-gallery" type="file" accept="image/*" hidden>
+          </div>
+          <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
+        </label>
+        <!-- Status + Progress -->
+        <div class="statusbar">
+          <div id="ados-scan-status">Bereit.</div>
+          <progress id="ados-scan-progress" max="1" value="0" hidden></progress>
+        </div>
+        <!-- Aktionen -->
+        <div class="action-row" style="margin-top:8px;">
+          <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
+          <button type="button" class="btn btn-ghost" onclick="
+            document.getElementById('ados-scan-preview').innerHTML='<div class=\'note\'>Noch keine Vorschau. Wähle ein Foto.</div>';
+            document.getElementById('ados-scan-status').textContent='Bereit.';
+            ['ados-scan-file-camera','ados-scan-file-gallery'].forEach(id=>{ const f=document.getElementById(id); if(f) f.value=''; });
+          ">Zurücksetzen</button>
+        </div>
+      </div>
+      <!-- Vorschau -->
+      <div id="ados-scan-preview" class="card preview" aria-live="polite" aria-atomic="true">
+        <div class="note">Noch keine Vorschau. Wähle ein Foto.</div>
+      </div>
+      <div class="note" style="margin-top:6px;">
+        🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen.
+      </div>
+    </div>
+    <!-- Rechte Spalte -->
+    <div class="col">
+      <div class="card">
+        <h3>🔎 Ergebnisse</h3>
+        <div id="ados-scan-results" class="results">
+          <div class="empty">Hier erscheinen passende Abfüllungen.</div>
+        </div>
+      </div>
+      <div class="card">
+        <h3>Tipps</h3>
+        <ul>
+          <li>Frontlabel direkt fotografieren</li>
+          <li>Gute Beleuchtung</li>
+          <li>Label füllt möglichst das ganze Bild</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+</html>