LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 7. November 2025, 22:42 Uhr

📸 Abfüllung scannen

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

🖼️

Bild hierher ziehen oder

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 mit Link ins Wiki.

Tipps für bessere Treffer

Foto frontal auf das Frontlabel richten
Gute Beleuchtung, Blende-Reflexe vermeiden
Label möglichst voll im Bild, wenig Hintergrund
Wenn Glas spiegelt: leicht schräg, aber nah

@@ Zeile 10: / Zeile 10: @@
    <div class="scan-grid">
-     <!-- Linke Spalte -->
+     <!-- Linke Spalte: Upload & Vorschau -->
      <div class="col">
        <div class="card">
+        <!-- Dropzone -->
-<!-- Dropzone (nur für Drag&Drop) -->
+        <label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen oder auswählen">
-<label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen">
+          <div class="icon">🖼️</div>
-  <div class="icon">🖼️</div>
+          <div><b>Bild hierher ziehen</b> oder</div>
-  <div><b>Bild hierher ziehen</b> oder unten auswählen</div>
+          <div style="margin-top:6px;">
-  <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
+            <button id="ados-scan-bigbtn" type="button" class="btn">📷 Foto aufnehmen / wählen</button>
-</label>
-<!-- getrennte Buttons + Inputs (NICHT im Label!) -->
-<div class="ados-scan__pick" style="margin-top:10px; display:flex; gap:6px; justify-content:center;">
-  <button id="ados-scan-btn-camera"  type="button" class="btn">📷 Foto aufnehmen</button>
-  <button id="ados-scan-btn-gallery" type="button" class="btn">🖼️ Bild wählen</button>
-</div>
-<input id="ados-scan-file-camera"  type="file" accept="image/*" capture="environment" hidden>
-<input id="ados-scan-file-gallery" type="file" accept="image/*" hidden>
            </div>
            <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
+          <input id="ados-scan-file" type="file" accept="image/*" capture="environment">
          </label>
@@ Zeile 42: / Zeile 31: @@
          </div>
-         <!-- Aktionen -->
+         <!-- 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="
-             document.getElementById('ados-scan-preview').innerHTML='<div class=\'note\'>Noch keine Vorschau. Wähle ein Foto.</div>';
+             const p=document.getElementById('ados-scan-preview'); if(p) p.innerHTML='';
-             document.getElementById('ados-scan-status').textContent='Bereit.';
+             const f=document.getElementById('ados-scan-file'); if(f) f.value='';
-             ['ados-scan-file-camera','ados-scan-file-gallery'].forEach(id=>{ const f=document.getElementById(id); if(f) f.value=''; });
+             const s=document.getElementById('ados-scan-status'); if(s) s.textContent='Bereit.';
            ">Zurücksetzen</button>
          </div>
        </div>
@@ Zeile 59: / Zeile 47: @@
        </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 -->
+     <!-- Rechte Spalte: Ergebnisse -->
      <div class="col">
        <div class="card">
-         <h3>🔎 Ergebnisse</h3>
+         <h3 style="margin:0 0 .4rem;">🔎 Ergebnisse</h3>
          <div id="ados-scan-results" class="results">
-           <div class="empty">Hier erscheinen passende Abfüllungen.</div>
+           <div class="empty">Hier erscheinen passende Abfüllungen mit Link ins Wiki.</div>
          </div>
        </div>
        <div class="card">
-         <h3>Tipps</h3>
+         <h3 style="margin:0 0 .4rem;">Tipps für bessere Treffer</h3>
-         <ul>
+         <ul style="margin:.25rem 0 .2rem 1.1rem;">
-           <li>Frontlabel direkt fotografieren</li>
+           <li>Foto frontal auf das <b>Frontlabel</b> richten</li>
-           <li>Gute Beleuchtung</li>
+           <li><b>Gute Beleuchtung</b>, Blende-Reflexe vermeiden</li>
-           <li>Label füllt möglichst das ganze Bild</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>