ADOS Wiki

LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(39 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<html>
<html>
<div id="ados-labelscan" class="ados-scan">
<div id="ados-labelscan">
  <h2>📸 Abfüllung scannen</h2>
  <p>Foto der Front-Labelseite aufnehmen oder wählen. Die Erkennung läuft vollständig lokal im Browser.</p>


   <div class="ados-scan__uploader" id="ados-scan-drop">
   <!-- Kopf -->
    <button id="ados-scan-bigbtn" type="button" class="ados-scan__btn">
  <div class="card" style="margin-bottom:10px;">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2l1.5 2H14l1.5-2H19a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2h4zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2.2A2.8 2.8 0 1112 15a2.8 2.8 0 010-5.6z"/></svg>
    <h2>📸 Abfüllung scannen</h2>
      <span>Foto aufnehmen / wählen</span>
     <p class="sub">Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.</p>
      <small>Oder Bild hierher ziehen</small>
     </button>
    <!-- verstecktes echtes File-Input -->
    <input id="ados-scan-file" type="file" accept="image/*" capture="environment" style="display:none">
   </div>
   </div>


   <div class="ados-scan__progress" aria-live="polite">
   <div class="scan-grid">
    <div class="ados-scan__status" id="ados-scan-status">Bereit.</div>
 
    <progress id="ados-scan-progress" max="1" value="0" style="display:none"></progress>
    <!-- Linke Spalte -->
  </div>
    <div class="col">
 
      <div class="card">
 
        <!-- Dropzone (nur für Drag & Drop) -->
        <label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen">
          <div class="icon">🖼️</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 -->
        <div class="statusbar" style="margin-top:8px;">
          <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; display:flex; gap:8px; justify-content:center;">
          <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
          <button id="ados-scan-reset" type="button" class="btn btn-ghost">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 id="ados-scan-preview" class="ados-scan__preview" aria-hidden="true"></div>
    </div>


  <div class="ados-scan__actions">
    <!-- Rechte Spalte -->
     <button id="ados-scan-run" type="button" class="ados-scan__run">Erkennen &amp; suchen</button>
    <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</h3>
        <ul style="margin:.25rem 0 .2rem 1.1rem;">
          <li>Frontlabel direkt fotografieren</li>
          <li>Gute Beleuchtung</li>
          <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>
      </div>
     </div>
<button id="ados-install" class="mw-ui-button" style="display:none">📲 LabelScan installieren</button>
   </div>
   </div>
  <h3>Vorschläge</h3>
  <div id="ados-scan-results" class="ados-scan__results"></div>
</div>
</div>
</html>
</html>
Abgerufen von „https://ados-wiki.de/wiki/LabelScan“