LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 7. November 2025, 22:24 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 10: / Zeile 10: @@
    <div class="scan-grid">
-     <!-- Linke Spalte: Upload & Vorschau -->
+     <!-- 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</div>
+           <div><b>Bild hierher ziehen</b> oder unten auswählen</div>
-           <div style="margin-top:6px;">
-             <button id="ados-scan-bigbtn" type="button" class="btn">📷 Foto aufnehmen / wählen</button>
+           <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>
-          <input id="ados-scan-file" type="file" accept="image/*" capture="environment">
          </label>
@@ Zeile 31: / Zeile 41: @@
          </div>
-         <!-- Actions -->
+         <!-- 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="
-             const p=document.getElementById('ados-scan-preview'); if(p) p.innerHTML='';
+             document.getElementById('ados-scan-preview').innerHTML='<div class=\'note\'>Noch keine Vorschau. Wähle ein Foto.</div>';
-             const f=document.getElementById('ados-scan-file'); if(f) f.value='';
+             document.getElementById('ados-scan-status').textContent='Bereit.';
-             const s=document.getElementById('ados-scan-status'); if(s) s.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>
@@ Zeile 47: / Zeile 58: @@
        </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 -->
+     <!-- Rechte Spalte -->
      <div class="col">
        <div class="card">
-         <h3 style="margin:0 0 .4rem;">🔎 Ergebnisse</h3>
+         <h3>🔎 Ergebnisse</h3>
          <div id="ados-scan-results" class="results">
-           <div class="empty">Hier erscheinen passende Abfüllungen mit Link ins Wiki.</div>
+           <div class="empty">Hier erscheinen passende Abfüllungen.</div>
          </div>
        </div>
        <div class="card">
-         <h3 style="margin:0 0 .4rem;">Tipps für bessere Treffer</h3>
+         <h3>Tipps</h3>
-         <ul style="margin:.25rem 0 .2rem 1.1rem;">
+         <ul>
-           <li>Foto frontal auf das <b>Frontlabel</b> richten</li>
+           <li>Frontlabel direkt fotografieren</li>
-           <li><b>Gute Beleuchtung</b>, Blende-Reflexe vermeiden</li>
+           <li>Gute Beleuchtung</li>
-           <li>Label möglichst <b>voll im Bild</b>, wenig Hintergrund</li>
+           <li>Label füllt möglichst das ganze Bild</li>
-          <li>Wenn Glas spiegelt: leicht schräg, aber nah</li>
          </ul>
        </div>