LabelScan: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
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 oder auswählen">
         <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>


          <div class="ados-scan__pick" style="margin-top:10px; display:flex; gap:6px; justify-content:center;">
        <!-- getrennte Buttons + Inputs -->
 
        <div class="ados-scan__pick" style="margin-top:10px; display:flex; gap:6px; justify-content:center;">
            <!-- Kamera -->
          <button id="ados-scan-btn-camera" type="button" class="btn">📷 Foto aufnehmen</button>
            <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>
            <input id="ados-scan-file-camera" type="file" accept="image/*" capture="environment" hidden>
        </div>
 
            <!-- Galerie -->
            <button id="ados-scan-btn-gallery" type="button" class="btn">🖼️ Bild wählen</button>
            <input id="ados-scan-file-gallery" type="file" accept="image/*" hidden>


          </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>
          <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
         </label>


         <!-- 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 &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>
            document.getElementById('ados-scan-preview').innerHTML='<div class=\'note\'>Noch keine Vorschau. Wähle ein Foto.</div>';
            document.getElementById('ados-scan-status').textContent='Bereit.';
            ['ados-scan-file-camera','ados-scan-file-gallery'].forEach(id=>{ const f=document.getElementById(id); if(f) f.value=''; });
          ">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 füllt möglichst das ganze Bild</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>
         </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>