This commit is contained in:
2025-11-24 02:12:49 +01:00
parent 71b0a4c72a
commit b2584bc828
8 changed files with 656 additions and 0 deletions

View File

@@ -0,0 +1,92 @@
<section id="serialcheck-root" class="mx-auto max-w-3xl py-8 px-4">
<div class="mb-4 text-center">
<h2 class="text-2xl font-heading font-bold text-brand-primary mb-2">
Seriennummer prüfen (Quickcheck)
</h2>
<p class="text-sm text-brand-muted">
Gib die Seriennummer deines USB-Sticks ein und wir prüfen die Plausibilität
sowie die Konsistenz deiner Herstellerangabe zu Vendor-ID (falls vorhanden).
</p>
</div>
<div class="bg-white/80 dark:bg-slate-900/70 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-sm p-4 mb-4">
<form id="serialcheck-form" class="space-y-4">
<div>
<label for="sc-manufacturer" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
Hersteller (laut Aufdruck, optional)
</label>
<input
type="text"
id="sc-manufacturer"
name="manufacturer"
placeholder="z. B. SanDisk, Kingston..."
class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
/>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label for="sc-vid" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
Vendor-ID (VID, optional)
</label>
<input
type="text"
id="sc-vid"
name="vid"
placeholder="z. B. 0781"
class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
/>
<p class="mt-1 text-[10px] text-slate-500">
Hexadezimal, z. B. 0781 (falls bekannt).
</p>
</div>
<div>
<label for="sc-pid" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
Product-ID (PID, optional)
</label>
<input
type="text"
id="sc-pid"
name="pid"
placeholder="z. B. 5581"
class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
/>
</div>
</div>
<div>
<label for="sc-serial" class="block text-xs font-medium text-slate-700 dark:text-slate-200 mb-1">
Seriennummer (Pflicht)
</label>
<input
type="text"
id="sc-serial"
name="serial"
required
placeholder="Seriennummer genau so eingeben wie angezeigt"
class="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-brand-primary"
/>
</div>
<button
type="submit"
class="inline-flex items-center justify-center rounded-lg bg-brand-primary text-white text-xs font-semibold px-4 py-2 mt-1 hover:bg-brand-primary/90 focus:outline-none focus:ring-2 focus:ring-brand-primary"
>
Seriennummer prüfen
</button>
<p class="mt-2 text-[10px] text-slate-500">
Hinweis: Dieser Quickcheck bewertet nur Plausibilität und Konsistenz und ersetzt keinen
vollständigen Kapazitäts- oder Geschwindigkeitstest.
</p>
</form>
</div>
<div id="serialcheck-error" class="hidden border border-red-300 bg-red-50 text-red-800 rounded-xl px-3 py-2 text-xs mb-3">
<!-- Fehlermeldung -->
</div>
<div id="serialcheck-result" class="hidden bg-white/80 dark:bg-slate-900/70 border border-slate-200/70 dark:border-slate-700 rounded-2xl shadow-sm p-4 text-xs">
<!-- Ergebnis wird per JS eingefügt -->
</div>
</section>