LabelScan: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 10: | Zeile 10: | ||
<div class="scan-grid"> | <div class="scan-grid"> | ||
<!-- Linke Spalte | <!-- Linke Spalte --> | ||
<div class="col"> | <div class="col"> | ||
<div class="card"> | <div class="card"> | ||
<!-- Dropzone --> | |||
<label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen | <!-- Dropzone (nur für Drag & Drop) --> | ||
<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><b>Bild hierher ziehen</b> oder unten auswählen</div> | ||
<div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div> | <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div> | ||
</label> | </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> | ||
</div> | </div> | ||
<!-- | <!-- 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> | ||
</div> | </div> | ||
| Zeile 47: | Zeile 50: | ||
</div> | </div> | ||
<div class="note" style="margin-top:6px;"> | <div class="note" style="margin-top:6px;"> | ||
🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen. | 🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen. | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Rechte Spalte | <!-- Rechte Spalte --> | ||
<div class="col"> | <div class="col"> | ||
<div class="card"> | <div class="card"> | ||
| Zeile 61: | Zeile 64: | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="card"> | <div class="card"> | ||
<h3 style="margin:0 0 .4rem;">Tipps | <h3 style="margin:0 0 .4rem;">Tipps</h3> | ||
<ul style="margin:.25rem 0 .2rem 1.1rem;"> | <ul style="margin:.25rem 0 .2rem 1.1rem;"> | ||
<li | <li>Frontlabel direkt fotografieren</li> | ||
<li | <li>Gute Beleuchtung</li> | ||
<li>Label möglichst | <li>Label möglichst das ganze Bild füllen</li> | ||
<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> | ||