191 lines
8.3 KiB
HTML
191 lines
8.3 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>GTIN Generator · desfoto</title>
|
||
<meta
|
||
name="description"
|
||
content="Artikelnummer eingeben, GTIN erzeugen und den EAN-Barcode direkt vom Bildschirm scannen. Kostenlos, lokal im Browser und ohne Anmeldung."
|
||
/>
|
||
<link rel="canonical" href="https://desfoto.de/gtin/" />
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#ffffff" />
|
||
<meta name="color-scheme" content="light" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-title" content="GTIN" />
|
||
<link rel="manifest" href="./manifest.webmanifest" />
|
||
<link rel="icon" href="./icons/favicon.svg" type="image/svg+xml" />
|
||
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
|
||
<link rel="stylesheet" href="./css/app.css" />
|
||
</head>
|
||
<body>
|
||
<main class="app">
|
||
<!-- Kein sichtbarer Titel und keine Beschreibung: Auf dem Bildschirm
|
||
zaehlt nur die Eingabe mit GTIN und Barcode. Die Ueberschrift bleibt
|
||
fuer Hilfstechnik vorhanden. -->
|
||
<h1 class="nur-vorlesen">GTIN Generator</h1>
|
||
<p class="hinweis-badge" id="offline-hinweis" hidden>Offline – die Berechnung läuft weiter.</p>
|
||
|
||
<section class="karte eingabe" aria-labelledby="eingabe-titel">
|
||
<h2 class="feld-titel" id="eingabe-titel">Artikelnummer</h2>
|
||
<input
|
||
class="feld"
|
||
id="artikelnummer"
|
||
name="artikelnummer"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="[0-9]*"
|
||
autocomplete="off"
|
||
autocorrect="off"
|
||
autocapitalize="off"
|
||
spellcheck="false"
|
||
enterkeyhint="go"
|
||
placeholder="z. B. 5122"
|
||
aria-labelledby="eingabe-titel"
|
||
aria-describedby="format-hinweis"
|
||
/>
|
||
<p class="feld-hinweis" id="format-hinweis">Erlaubt sind 3, 4 oder 7 Ziffern.</p>
|
||
<p class="fehler" id="fehler" role="alert" hidden></p>
|
||
</section>
|
||
|
||
<section class="karte ergebnis" id="ergebnis" aria-live="polite" hidden>
|
||
<p class="gtin-typ" id="gtin-typ"></p>
|
||
<button class="gtin" id="gtin" type="button" title="GTIN kopieren"></button>
|
||
<div class="barcode" id="barcode"></div>
|
||
<div class="aktionen">
|
||
<button class="knopf knopf-stark" id="gross" type="button">Barcode groß anzeigen</button>
|
||
<div class="aktionen-reihe">
|
||
<button class="knopf" id="kopieren" type="button">GTIN kopieren</button>
|
||
<button class="knopf" id="neu" type="button">Neue Artikelnummer</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="karte verlauf" id="verlauf" hidden aria-labelledby="verlauf-titel">
|
||
<h2 class="verlauf-titel" id="verlauf-titel">Zuletzt verwendet</h2>
|
||
<ul class="verlauf-liste" id="verlauf-liste"></ul>
|
||
<button class="knopf knopf-leise" id="verlauf-loeschen" type="button">Verlauf löschen</button>
|
||
</section>
|
||
|
||
<footer class="fuss">
|
||
<button class="knopf knopf-stark" id="installieren" type="button" hidden>
|
||
App installieren
|
||
</button>
|
||
<p class="fuss-hinweis" id="ios-hinweis" hidden>
|
||
Installieren: Teilen → „Zum Home-Bildschirm“.
|
||
</p>
|
||
<!-- Kleiner Einstieg in den optionalen Listenmodus: Die Einzelansicht
|
||
bleibt unveraendert, die Liste liegt darunter als Link. -->
|
||
<p class="fuss-liste">
|
||
<button class="link-klein" id="liste-oeffnen" type="button" aria-haspopup="dialog">
|
||
Liste
|
||
</button>
|
||
</p>
|
||
<p class="fuss-datenschutz">
|
||
Eingaben und Verlauf bleiben in deinem Browser.
|
||
<a href="/datenschutz/">Datenschutz</a>
|
||
</p>
|
||
<nav class="fuss-rechtliches" aria-label="Rechtliche Informationen">
|
||
<a href="/impressum/">Impressum</a>
|
||
<a href="/datenschutz/">Datenschutz</a>
|
||
</nav>
|
||
</footer>
|
||
</main>
|
||
|
||
<div class="scan" id="scan" role="dialog" aria-modal="true" aria-label="Barcode im Scanmodus" hidden>
|
||
<div class="scan-innen" id="scan-innen" tabindex="-1">
|
||
<div class="scan-barcode" id="scan-barcode"></div>
|
||
<div class="scan-seite">
|
||
<p class="scan-gtin" id="scan-gtin"></p>
|
||
<p class="scan-hinweis" id="scan-hinweis" hidden>
|
||
Barcode wird nicht erkannt? Displayhelligkeit erhöhen.
|
||
</p>
|
||
<button class="knopf knopf-stark scan-zurueck" id="scan-zurueck" type="button">Zurück</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="toast" id="toast" role="status" aria-live="polite" hidden></p>
|
||
|
||
<div class="liste" id="liste" role="dialog" aria-modal="true" aria-label="Liste" hidden>
|
||
<div class="liste-innen" id="liste-innen">
|
||
<!-- Schritt 1: Nummern eingeben, jede ueber die Schaltflaeche oder die
|
||
Bestaetigungstaste der Bildschirmtastatur in die Liste uebernehmen. -->
|
||
<section class="liste-erfassen" id="liste-erfassen" aria-labelledby="liste-titel">
|
||
<h2 class="liste-titel" id="liste-titel">
|
||
Liste <span class="liste-anzahl" id="liste-anzahl">0</span>
|
||
</h2>
|
||
<!-- Ein echtes Formular: Ein Numpad auf dem Telefon hat keine
|
||
Eingabetaste, seine Bestaetigungstaste (Haekchen) loest aber das
|
||
submit-Ereignis aus. Der sichtbare Knopf deckt jedes Geraet ab. -->
|
||
<form class="liste-form" id="liste-form" novalidate>
|
||
<label class="feld-titel" for="liste-eingabe">Artikelnummer</label>
|
||
<div class="liste-eingabezeile">
|
||
<input
|
||
class="feld"
|
||
id="liste-eingabe"
|
||
name="liste-eingabe"
|
||
type="text"
|
||
inputmode="numeric"
|
||
pattern="[0-9]*"
|
||
autocomplete="off"
|
||
autocorrect="off"
|
||
autocapitalize="off"
|
||
spellcheck="false"
|
||
enterkeyhint="done"
|
||
placeholder="z. B. 5122"
|
||
aria-describedby="liste-format"
|
||
/>
|
||
<button class="knopf knopf-stark liste-hinzufuegen" id="liste-hinzufuegen" type="submit">
|
||
Hinzufügen
|
||
</button>
|
||
</div>
|
||
<p class="feld-hinweis" id="liste-format">
|
||
Hinzufügen übernimmt die Nummer; mehrere Nummern dürfen durch Leerzeichen getrennt sein.
|
||
</p>
|
||
<p class="fehler" id="liste-fehler" role="alert" hidden></p>
|
||
</form>
|
||
<ul class="liste-eintraege" id="liste-eintraege"></ul>
|
||
<p class="liste-leer" id="liste-leer">Noch keine Nummer in der Liste.</p>
|
||
<div class="liste-aktionen">
|
||
<button class="knopf" id="liste-weiter" type="button" disabled>
|
||
Weiter
|
||
</button>
|
||
<button class="link-klein" id="liste-schliessen" type="button">
|
||
Zurück zur Einzelansicht
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Schritt 2: GTIN und Barcode nacheinander anzeigen. -->
|
||
<section class="liste-anzeige" id="liste-anzeige" aria-label="Barcodes der Liste" hidden>
|
||
<p class="liste-zaehler" id="liste-zaehler"></p>
|
||
<div class="liste-buehne" id="liste-buehne">
|
||
<button class="liste-pfeil" id="liste-zurueck" type="button" aria-label="Vorheriger Eintrag">
|
||
←
|
||
</button>
|
||
<div class="liste-mitte" id="liste-mitte" tabindex="-1">
|
||
<div class="liste-barcode" id="liste-barcode"></div>
|
||
<p class="liste-gtin" id="liste-gtin" aria-live="polite"></p>
|
||
</div>
|
||
<button class="liste-pfeil" id="liste-vor" type="button" aria-label="Nächster Eintrag">
|
||
→
|
||
</button>
|
||
</div>
|
||
<p class="liste-artikel" id="liste-artikel"></p>
|
||
<div class="liste-links">
|
||
<button class="link-klein" id="liste-aendern" type="button">Liste ändern</button>
|
||
<button class="link-klein" id="liste-beenden" type="button">
|
||
Zurück zur Einzelansicht
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="./js/app.js"></script>
|
||
</body>
|
||
</html>
|