denny/desfoto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: publish unlisted GTIN tool

Browse Source
This commit is contained in:
desfoto automation
2026-09-25 19:01:51 +02:00
parent 68613788b8
commit 160d72f144
35 changed files with 5632 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
site/gtin/index.html Normal file
View File

@@ -0,0 +1,190 @@
<!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&nbsp;→&nbsp;„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>