LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 7. November 2025, 22:28 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 1: / Zeile 1: @@
-<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: 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>
-<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>