LabelScan: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Keine Bearbeitungszusammenfassung
 
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 10: Zeile 10:
   <div class="scan-grid">
   <div class="scan-grid">


     <!-- Linke Spalte: Upload & Vorschau -->
     <!-- 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 oder auswählen">
         <!-- 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>
           <div><b>Bild hierher ziehen</b> oder unten auswählen</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>
           <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
          <input id="ados-scan-file" type="file" accept="image/*" capture="environment">
         </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>


         <!-- Actions -->
         <!-- 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 &amp; suchen</button>
           <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
           <button type="button" class="btn btn-ghost" onclick="
           <button id="ados-scan-reset" type="button" class="btn btn-ghost">Zurücksetzen</button>
            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>
       </div>
       </div>


Zeile 47: Zeile 50:
       </div>
       </div>


      <!-- Hinweis -->
       <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: Ergebnisse -->
     <!-- 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 für bessere Treffer</h3>
         <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>Foto frontal auf das <b>Frontlabel</b> richten</li>
           <li>Frontlabel direkt fotografieren</li>
           <li><b>Gute Beleuchtung</b>, Blende-Reflexe vermeiden</li>
           <li>Gute Beleuchtung</li>
           <li>Label möglichst <b>voll im Bild</b>, wenig Hintergrund</li>
           <li>Label möglichst das ganze Bild füllen</li>
           <li>Wenn Glas spiegelt: leicht schräg, aber nah</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>