LabelScan: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 15: | Zeile 15: | ||
<div class="card"> | <div class="card"> | ||
<!-- Dropzone --> | <!-- Dropzone (nur für Drag & Drop) --> | ||
<label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen | <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 unten auswählen</div> | <div><b>Bild hierher ziehen</b> oder unten auswählen</div> | ||
<div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div> | |||
</label> | |||
<!-- getrennte Buttons + Inputs --> | |||
<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> | |||
</ | |||
<!-- Status + Progress --> | <!-- Status + Progress --> | ||
<div class="statusbar"> | <div class="statusbar" style="margin-top:8px;"> | ||
<div id="ados-scan-status">Bereit.</div> | <div id="ados-scan-status">Bereit.</div> | ||
<progress id="ados-scan-progress" max="1" value="0" hidden></progress> | <progress id="ados-scan-progress" max="1" value="0" hidden></progress> | ||
| Zeile 42: | Zeile 38: | ||
<!-- Aktionen --> | <!-- Aktionen --> | ||
<div class="action-row" style="margin-top:8px;"> | <div class="action-row" style="margin-top:8px; display:flex; gap:8px; justify-content:center;"> | ||
<button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen & suchen</button> | <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen & suchen</button> | ||
<button type="button" class="btn btn-ghost | <button id="ados-scan-reset" type="button" class="btn btn-ghost">Zurücksetzen</button> | ||
</div> | </div> | ||
| Zeile 67: | Zeile 59: | ||
<div class="col"> | <div class="col"> | ||
<div class="card"> | <div class="card"> | ||
<h3>🔎 Ergebnisse</h3> | <h3 style="margin:0 0 .4rem;">🔎 Ergebnisse</h3> | ||
<div id="ados-scan-results" class="results"> | <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> | </div> | ||
<div class="card"> | <div class="card"> | ||
<h3>Tipps</h3> | <h3 style="margin:0 0 .4rem;">Tipps</h3> | ||
<ul> | <ul style="margin:.25rem 0 .2rem 1.1rem;"> | ||
<li>Frontlabel direkt fotografieren</li> | <li>Frontlabel direkt fotografieren</li> | ||
<li>Gute Beleuchtung</li> | <li>Gute Beleuchtung</li> | ||
<li>Label | <li>Label möglichst das ganze Bild füllen</li> | ||
<li>Bei Spiegelungen: leicht schräg, aber nah</li> | |||
<li>keine ähnlichen Flaschen im Hintergrund die im Fokus sind</li> | |||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
<button id="ados-install" class="mw-ui-button" style="display:none">📲 LabelScan installieren</button> | |||
</div> | </div> | ||
</div> | </div> | ||
</html> | </html> | ||