LabelScan: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<html> | <html> | ||
<div id="ados-labelscan"> | <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 & 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> | </div> | ||
</html> | </html> | ||
Version vom 7. November 2025, 21:28 Uhr
📸 Abfüllung scannen
Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.
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