LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

@@ Zeile 1: / Zeile 1: @@
 <html>
 <div id="ados-labelscan">
-   <input id="ados-scan-file" type="file" accept="image/*" capture="environment">
-  <button id="ados-scan-run" type="button">Erkennen & suchen</button>
+  <!-- Kopf -->
-  <div id="ados-scan-status">Bereit.</div>
+   <div class="card" style="margin-bottom:10px;">
-  <progress id="ados-scan-progress" max="1" value="0" hidden></progress>
+    <h2>📸 Abfüllung scannen</h2>
-  <div id="ados-scan-preview"></div>
+    <p class="sub">Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.</p>
-  <div id="ados-scan-results"></div>
+  </div>
+  <div class="scan-grid">
+    <!-- Linke Spalte -->
+    <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>
+    <!-- Rechte Spalte -->
+    <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>
 </html>