projects/usbcheck.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cghaneg

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-18 23:02:44 +01:00
parent dcb7b81e50
commit 553fefbeaa
2 changed files with 1019 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

709
public/index.php
View File

@@ -1,234 +1,531 @@
<?php
// public/index.php
// Einfache Sprach-Erkennung
$supportedLangs = ['de', 'en', 'it', 'fr'];
$defaultLang = 'en';
// 1) Direkt per ?lang=de
if (isset($_GET['lang']) && in_array($_GET['lang'], $supportedLangs, true)) {
$currentLang = $_GET['lang'];
} else {
// 2) Grobe Erkennung aus Accept-Language
$currentLang = $defaultLang;
if (!empty($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
$accepted = strtolower(substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));
if (in_array($accepted, $supportedLangs, true)) {
$currentLang = $accepted;
}
}
}
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($currentLang); ?>">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>USBCheck – Test your USB drives</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<title>USBCheck – Test USB-Sticks auf Fakes</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Fonts: Montserrat + Inter -->
<meta name="description" content="Prüfe deine USB-Sticks auf Fakes, langsame Geschwindigkeit und Datenverlust. USBCheck bietet einen kostenlosen Browser-Schnelltest und einen Pro-Modus für Profis.">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="/assets/css/main.css?v=1">
<!-- Tailwind CDN (für Dev; später durch eigenes CSS ersetzbar) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
heading: ['Montserrat', 'system-ui', 'sans-serif'],
},
colors: {
brand: {
bg: '#1A1A1A', // deep_gray
surface: '#232323', // dunkles Panel
primary: '#0051FF', // brand_blue
primarySoft: '#0b1535',
text: '#FAFAFA',
muted: '#C8CBD0', // silver
border: '#333333',
}
},
boxShadow: {
'soft': '0 18px 45px rgba(0,0,0,0.55)',
},
borderRadius: {
'xl2': '1.25rem',
}
}
}
}
</script>
</head>
<body data-current-lang="<?php echo htmlspecialchars($currentLang); ?>">
<body class="bg-brand-bg text-brand-text font-sans antialiased scroll-smooth">
<?php
// Header-Partial einbinden (benutzt $currentLang)
include __DIR__ . '/partials/header.php';
?>
<main>
<!-- HERO -->
<section class="section hero" id="top">
<div class="container hero-grid">
<div class="hero-text">
<p class="hero-kicker" data-i18n="hero_kicker"></p>
<h1 class="hero-title" data-i18n="hero_title"></h1>
<p class="hero-subtitle" data-i18n="hero_subtitle"></p>
<div class="hero-actions">
<a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
class="btn btn-primary"
id="quick-test-btn"
data-i18n="cta_quick_test"></a>
<a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/', $currentLang)); ?>#how-it-works"
class="btn btn-ghost"
data-i18n="cta_how_it_works"></a>
</div>
<ul class="hero-bullets">
<li data-i18n="hero_bullet_1"></li>
<li data-i18n="hero_bullet_2"></li>
<li data-i18n="hero_bullet_3"></li>
</ul>
<!-- Page Wrapper -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="sticky top-0 z-40 border-b border-brand-border/70 backdrop-blur bg-brand-bg/85">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<!-- Logo & Brand -->
<div class="flex items-center gap-3">
<a href="#hero" class="flex items-center gap-3">
<!-- Logo Pfad: public/img/logo_slogan.png -->
<img src="/img/logo_slogan.png" alt="usbcheck.it Logo" class="h-9 w-auto">
<div class="hidden sm:flex flex-col leading-tight">
<span class="font-heading font-bold text-sm uppercase tracking-[0.18em] text-brand-muted" data-i18n="brand_wordmark">
usbcheck.it
</span>
<span class="text-xs text-brand-muted" data-i18n="brand_subtitle">
Test USB drives for fakes
</span>
</div>
</a>
</div>
<div class="hero-visual">
<div class="hero-card">
<img src="/img/logo_slogan.png" alt="usbcheck.it" class="hero-logo">
<p class="hero-card-title" data-i18n="hero_card_title"></p>
<div class="hero-metrics">
<div class="metric">
<span class="metric-label" data-i18n="metric_speed"></span>
<span class="metric-value">125 MB/s</span>
<!-- Navigation + Lang + Login -->
<div class="flex items-center gap-4 sm:gap-6">
<nav class="hidden md:flex items-center gap-6 text-xs font-medium text-brand-muted uppercase tracking-[0.18em]">
<a href="#how" class="hover:text-brand-primary transition-colors" data-i18n="nav_how">
How it works
</a>
<a href="#problem" class="hover:text-brand-primary transition-colors" data-i18n="nav_problem">
Why it matters
</a>
<a href="#features" class="hover:text-brand-primary transition-colors" data-i18n="nav_features">
Features
</a>
<a href="#security" class="hover:text-brand-primary transition-colors" data-i18n="nav_security">
Security
</a>
<a href="#faq" class="hover:text-brand-primary transition-colors" data-i18n="nav_faq">
FAQ
</a>
</nav>
<!-- Language Switch -->
<div class="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-brand-muted">
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="de">DE</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="en">EN</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="it">IT</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="fr">FR</button>
</div>
<!-- Login Button / Avatar -->
<button id="loginButton"
class="relative inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-brand-bg shadow-soft hover:bg-blue-400 transition-colors">
<span id="loginLabel" data-i18n="btn_login">Login</span>
</button>
<!-- Avatar (wird per JS ein-/ausgeblendet) -->
<button id="userAvatar"
class="hidden h-9 w-9 rounded-full border border-brand-border bg-brand-surface flex items-center justify-center text-xs font-semibold text-brand-text shadow-soft hover:border-brand-primary transition"
aria-label="Mein Konto">
<span id="avatarInitials">UC</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-1">
<!-- Hero -->
<section id="hero" class="relative overflow-hidden">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
<div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
<!-- Left: Text -->
<div class="flex-1 space-y-7">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
Detect fake USB sticks before you lose data
</p>
<h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white" data-i18n="hero_title">
Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
</h1>
<p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
USBCheck kombiniert einen schnellen Browser-Test mit einem professionellen Pro-Modus. So erkennst du gefälschte USB-Sticks, zu kleine echte Kapazität und langsame Billig-Controller – bevor deine Dateien verschwinden.
</p>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
<a href="https://usbcheck.com/fakecheck/"
class="inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-sm font-semibold text-brand-bg shadow-soft hover:bg-blue-400 transition-colors"
data-i18n="cta_quick">
Start free quick check
<svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a href="#features"
class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/40 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
data-i18n="cta_learn">
Learn more about Free &amp; Pro
</a>
</div>
<!-- Trust / Highlights -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t border-brand-border/60">
<div class="space-y-1">
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust1_title">No install for quick check</p>
<p class="text-sm text-brand-text/90" data-i18n="trust1_text">Browser-basierter Test direkt auf deinem Stick.</p>
</div>
<div class="metric">
<span class="metric-label" data-i18n="metric_integrity"></span>
<span class="metric-value">99.98%</span>
<div class="space-y-1">
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust2_title">Real write &amp; read tests</p>
<p class="text-sm text-brand-text/90" data-i18n="trust2_text">Schreib-/Lesetests mit echten Daten – keine synthetische Theorie.</p>
</div>
<div class="metric">
<span class="metric-label" data-i18n="metric_confidence"></span>
<span class="metric-value">✔</span>
<div class="space-y-1">
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust3_title">Privacy first</p>
<p class="text-sm text-brand-text/90" data-i18n="trust3_text">Deine Testdaten bleiben lokal – Reports nur auf Wunsch.</p>
</div>
</div>
<p class="hero-small" data-i18n="hero_small_hint"></p>
</div>
<div class="hero-stick">
<img src="/img/stick_blank.png" alt="USB Stick Illustration">
<!-- Right: Card (Teaser Quickcheck) -->
<div class="flex-1 w-full max-w-md lg:max-w-sm">
<div class="rounded-xl2 bg-brand-surface/90 border border-brand-border/70 shadow-soft p-5 sm:p-6 space-y-4">
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
QUICK CHECK PREVIEW
</p>
<h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
Test a USB drive in under 2 minutes
</h2>
</div>
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="badge_free">
Free
</span>
</div>
<div class="space-y-3 text-sm text-brand-muted">
<p data-i18n="quick_intro">
Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
</p>
<ul class="list-disc list-inside space-y-1">
<li data-i18n="quick_li1">Schreib- und Leserate</li>
<li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
<li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
</ul>
</div>
<div class="flex flex-col gap-2 text-xs text-brand-muted">
<div class="flex justify-between">
<span data-i18n="quick_metric1_label">Write performance</span>
<span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
</div>
<div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden">
<div class="h-full w-3/4 bg-brand-primary"></div>
</div>
<div class="flex justify-between">
<span data-i18n="quick_metric2_label">Integrity checks</span>
<span data-i18n="quick_metric2_value">512 MB sample</span>
</div>
<p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
*Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
</p>
</div>
<a href="https://usbcheck.com/fakecheck/"
class="block text-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
data-i18n="quick_cta">
Go to free quick check
</a>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- HOW IT WORKS -->
<section class="section" id="how-it-works">
<div class="container">
<h2 class="section-title" data-i18n="how_title"></h2>
<p class="section-lead" data-i18n="how_intro"></p>
<!-- How it works -->
<section id="how" class="border-t border-brand-border/70 bg-brand-primarySoft/30">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 grid gap-10 lg:grid-cols-[1.2fr,1fr]">
<div class="space-y-6">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="how_kicker">
How USBCheck works
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="how_title">
Schnelltest im Browser, Pro-Modus mit Tiefenanalyse.
</h2>
<p class="text-brand-muted text-sm sm:text-base" data-i18n="how_intro">
USBCheck wurde entwickelt, um zwei Welten zu verbinden: einen einfachen Schnelltest für alle und einen tiefgehenden Pro-Modus für Power-User, Techniker und Admins. Der Schnelltest läuft direkt im Browser, ohne Installation. Für den Pro-Modus wird ein kleines Helfer-Tool verwendet, das auf Wunsch F3- / badblocks-ähnliche Tests ausführt und damit Kapazitäts-Fakes sicher enttarnt.
</p>
<div class="steps-grid">
<article class="step-card">
<div class="step-icon">1</div>
<h3 data-i18n="how_step1_title"></h3>
<p data-i18n="how_step1_text"></p>
</article>
<article class="step-card">
<div class="step-icon">2</div>
<h3 data-i18n="how_step2_title"></h3>
<p data-i18n="how_step2_text"></p>
</article>
<article class="step-card">
<div class="step-icon">3</div>
<h3 data-i18n="how_step3_title"></h3>
<p data-i18n="how_step3_text"></p>
</article>
<article class="step-card">
<div class="step-icon">4</div>
<h3 data-i18n="how_step4_title"></h3>
<p data-i18n="how_step4_text"></p>
</article>
<ol class="space-y-4 text-sm text-brand-muted">
<li class="flex gap-3">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">01</span>
<div>
<h3 class="font-semibold text-brand-text" data-i18n="how_step1_title">Browser-Test starten</h3>
<p data-i18n="how_step1_text">
Du öffnest den Schnelltest unter <strong>usbcheck.com/fakecheck/</strong>, wählst deinen USB-Stick bzw. einen Ordner darauf aus und definierst, wie viel Daten getestet werden sollen.
</p>
</div>
</li>
<li class="flex gap-3">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">02</span>
<div>
<h3 class="font-semibold text-brand-text" data-i18n="how_step2_title">Schreib-, Lese- und Integritätsprüfung</h3>
<p data-i18n="how_step2_text">
Der Browser erstellt Testdateien, misst Schreib- und Leserate und vergleicht Hash-Werte, um Datenfehler zu erkennen – alles lokal und ohne Übertragung deiner Inhalte.
</p>
</div>
</li>
<li class="flex gap-3">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">03</span>
<div>
<h3 class="font-semibold text-brand-text" data-i18n="how_step3_title">Optional: Pro-Modus für Vollscan</h3>
<p data-i18n="how_step3_text">
Wer mehr wissen will, installiert das optionale Helfer-Tool. Dieses kann die gesamte Kapazität des Sticks prüfen, Fakes identifizieren und detaillierte Reports erzeugen – ideal für Refurbisher, IT-Abteilungen oder Labore.
</p>
</div>
</li>
</ol>
</div>
<!-- Small feature card -->
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
<h3 class="font-heading text-lg font-semibold text-white" data-i18n="how_side_title">
Free vs. Pro at a glance
</h3>
<ul class="space-y-3 text-sm text-brand-muted">
<li class="flex gap-2">
<span class="mt-1 h-5 w-5 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center text-[10px]">F</span>
<p data-i18n="how_side_free">
<strong>Free Quick Check:</strong> Geschwindigkeit &amp; Integritätstest im Browser – ideal für schnelle Einschätzungen.
</p>
</li>
<li class="flex gap-2">
<span class="mt-1 h-5 w-5 rounded-full bg-sky-500/10 text-sky-400 flex items-center justify-center text-[10px]">P</span>
<p data-i18n="how_side_pro">
<strong>Pro-Modus:</strong> Tiefenscan, Kapazitätsvalidierung, erweiterte Berichte und API-Integration für Unternehmen.
</p>
</li>
<li class="flex gap-2">
<span class="mt-1 h-5 w-5 rounded-full bg-violet-500/10 text-violet-400 flex items-center justify-center text-[10px]">A</span>
<p data-i18n="how_side_account">
<strong>Account &amp; Login:</strong> Nach dem Login kannst du Tests speichern, Berichte exportieren und mehrere Geräte verwalten.
</p>
</li>
</ul>
</div>
</div>
</section>
<!-- Problem -->
<section id="problem" class="border-t border-brand-border/70">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
<div class="max-w-3xl space-y-4">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="problem_kicker">
Why fake USB sticks are dangerous
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="problem_title">
Gefälschte USB-Sticks kosten Geld – und im schlimmsten Fall deine Daten.
</h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p1">
Viele Billig-USB-Sticks werben mit unrealistisch hohen Kapazitäten. In Wahrheit wurde der Controller manipuliert: Der Stick meldet z. B. 256&nbsp;GB, obwohl physisch nur 32&nbsp;GB verbaut sind. Die Folge: Daten werden scheinbar korrekt kopiert, später aber stillschweigend überschrieben oder beschädigt.
</p>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p2">
USBCheck hilft dir, solche Fakes zu erkennen, bevor du sie produktiv einsetzt – egal ob du einzelne Sticks privat nutzt oder größere Chargen für dein Unternehmen prüfst.
</p>
</div>
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="problem_card1_title">Verlust wichtiger Dateien</h3>
<p data-i18n="problem_card1_text">
Fotos, Projektdateien, Backups – alles kann betroffen sein, wenn der Stick weniger speichert als behauptet. Defekte Sektoren bleiben oft unbemerkt, bis es zu spät ist.
</p>
</div>
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="problem_card2_title">Kosten durch defekte Chargen</h3>
<p data-i18n="problem_card2_text">
Unternehmen, Reseller und Agenturen verteilen USB-Sticks oft in großer Stückzahl. Fakes bedeuten Reklamationen, Imageschaden und erneute Produktionskosten.
</p>
</div>
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="problem_card3_title">Unsichere Performance</h3>
<p data-i18n="problem_card3_text">
Langsame Controller, instabile Firmware und schwankende Schreibraten sind typisch für Fake-Sticks. Das erhöht das Risiko von Fehlern – besonders bei großen Dateien.
</p>
</div>
</div>
</div>
</section>
<!-- Features: Free vs Pro -->
<section id="features" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
<div class="max-w-3xl space-y-4">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="features_kicker">
Free &amp; Pro features
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="features_title">
Starte mit dem kostenlosen Schnelltest – wechsle in den Pro-Modus, wenn du mehr brauchst.
</h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="features_intro">
USBCheck wächst mit deinen Anforderungen: Private Nutzer brauchen oft nur eine schnelle Einschätzung. Profis möchten tiefer einsteigen, Kapazitäten verifizieren und Reports archivieren. Genau dafür ist der Pro-Modus gedacht.
</p>
</div>
<div class="grid gap-6 md:grid-cols-2">
<!-- Free -->
<div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-4">
<div class="flex items-center justify-between">
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_free_title">Free Quick Check</h3>
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="features_free_badge">
Recommended for most users
</span>
</div>
<p class="text-sm text-brand-muted" data-i18n="features_free_text">
Ideal für alle, die schnell prüfen möchten, ob ein USB-Stick zumindest grundlegend performant und stabil arbeitet – ganz ohne Installation.
</p>
<ul class="mt-2 space-y-2 text-sm text-brand-muted">
<li data-i18n="features_free_li1">• Browser-basierter Schnelltest direkt auf deinem Stick</li>
<li data-i18n="features_free_li2">• Schreib- und Lesegeschwindigkeit mit realen Testdaten</li>
<li data-i18n="features_free_li3">• Hash-basierte Integritätsprüfung einer Testmenge</li>
<li data-i18n="features_free_li4">• Auswahl verschiedener Teststufen (z. B. 200&nbsp;MB, 2&nbsp;GB)</li>
<li data-i18n="features_free_li5">• Keine Registrierung erforderlich</li>
</ul>
<a href="https://usbcheck.com/fakecheck/"
class="inline-flex mt-3 items-center text-sm font-semibold text-brand-primary hover:text-blue-300"
data-i18n="features_free_cta">
Start free quick check
<svg class="ml-1 h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z"/></svg>
</a>
</div>
<!-- Pro -->
<div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
<div class="flex items-center justify-between">
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_pro_title">Pro Mode</h3>
<span class="inline-flex items-center rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold text-brand-primary" data-i18n="features_pro_badge">
For power users &amp; teams
</span>
</div>
<p class="text-sm text-brand-muted" data-i18n="features_pro_text">
Für alle, die volle Kontrolle brauchen: IT-Abteilungen, Techniker, Refurbisher, Labore oder Unternehmen, die regelmäßig größere Stick-Mengen testen.
</p>
<ul class="mt-2 space-y-2 text-sm text-brand-muted">
<li data-i18n="features_pro_li1">• Tiefenscan der gesamten Kapazität (ähnlich F3 / badblocks)</li>
<li data-i18n="features_pro_li2">• Erkennung von Kapazitäts-Fakes und defekten Bereichen</li>
<li data-i18n="features_pro_li3">• Detaillierte, speicherbare Testberichte (JSON, PDF)</li>
<li data-i18n="features_pro_li4">• Optional: API-Zugriff für automatisierte Testprozesse</li>
<li data-i18n="features_pro_li5">• Multi-Device- und Multi-User-Support (über Login-Bereich)</li>
</ul>
<p class="mt-3 text-xs text-brand-muted/80" data-i18n="features_pro_note">
Der Pro-Modus erfordert ein kleines Helfer-Tool auf deinem System. Dieses arbeitet lokal und kann bei Bedarf mit deinem Account auf USBCheck verbunden werden.
</p>
</div>
</div>
</div>
</section>
<!-- Security & Privacy -->
<section id="security" class="border-t border-brand-border/70">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
<div class="max-w-3xl space-y-4">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="security_kicker">
Security &amp; privacy
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="security_title">
Privacy-first-Design: Deine Testdaten gehören dir.
</h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="security_intro">
USBCheck wurde von Anfang an so konzipiert, dass deine Daten geschützt bleiben. Der Browser-Schnelltest arbeitet ausschließlich mit Testdateien. Deine eigenen Dokumente, Bilder oder Backups werden weder gelesen noch übertragen. Im Pro-Modus hast du volle Kontrolle, ob und welche Reports mit deinem Account synchronisiert werden.
</p>
</div>
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="security_card1_title">Local-only Tests</h3>
<p data-i18n="security_card1_text">
Alle Schreib- und Lesetests erfolgen lokal auf deinem USB-Stick. Der Browser greift nur auf die Testdateien zu – nicht auf deine privaten Inhalte.
</p>
</div>
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="security_card2_title">Transparente Reports</h3>
<p data-i18n="security_card2_text">
Wenn du dich einloggst, kannst du Testberichte in deinem Account speichern, exportieren oder wieder löschen. Du entscheidest, welche Daten im System bleiben.
</p>
</div>
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
<h3 class="font-semibold text-brand-text" data-i18n="security_card3_title">Schonend für deine Hardware</h3>
<p data-i18n="security_card3_text">
Der Schnelltest arbeitet mit moderaten Datenmengen, um unnötigen Verschleiß zu vermeiden. Der Pro-Modus warnt deutlich, wenn ein Vollscan mit hoher Schreiblast ausgeführt wird.
</p>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="border-t border-brand-border/70 bg-brand-primarySoft/10">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
<div class="max-w-3xl space-y-4">
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="faq_kicker">
FAQ
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="faq_title">
Häufige Fragen zu USBCheck
</h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
Hier findest du Antworten auf häufig gestellte Fragen. Der FAQ-Bereich kann jederzeit erweitert werden, wenn neue Anwendungsfälle hinzukommen oder du Feedback von Nutzern erhältst.
</p>
</div>
<div class="space-y-4 text-sm text-brand-muted">
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="font-semibold text-brand-text" data-i18n="faq_q1">Ist der Schnelltest wirklich komplett im Browser?</span>
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
</summary>
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a1">
Ja. Der Schnelltest läuft vollständig im Browser und nutzt moderne Browser-APIs, um Testdateien auf deinem Stick zu schreiben und wieder auszulesen. Es wird nichts ohne deine Zustimmung hochgeladen.
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="font-semibold text-brand-text" data-i18n="faq_q2">Brauche ich ein Konto, um den Schnelltest zu benutzen?</span>
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
</summary>
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a2">
Nein. Der kostenlose Schnelltest ist ohne Registrierung nutzbar. Ein Login ist nur notwendig, wenn du Testberichte speichern, mehrere Sticks verwalten oder den Pro-Modus nutzen möchtest.
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="font-semibold text-brand-text" data-i18n="faq_q3">Kann USBCheck jeden Fake-Stick sicher erkennen?</span>
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
</summary>
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a3">
Kein Tool kann eine 100&nbsp;%-Garantie geben. Der Pro-Modus mit Vollscan ist jedoch darauf ausgelegt, typische Fälschungsmuster (Manipulation der gemeldeten Kapazität, instabile Bereiche, Fehler ab einer bestimmten Füllmenge) sehr zuverlässig zu erkennen.
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="font-semibold text-brand-text" data-i18n="faq_q4">Wie fügt sich das Tool in mein bestehendes System ein?</span>
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
</summary>
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a4">
USBCheck ist von Anfang an für Automatisierung gedacht. Über den Pro-Modus und die geplante API kannst du Tests in bestehende Workflows integrieren – beispielsweise in Wareneingangsprüfungen oder Qualitätskontrollen.
</div>
</details>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-brand-border/70">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-brand-muted">
<p data-i18n="footer_copy">© <?php echo date('Y'); ?> usbcheck.it. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="/impressum.php" class="hover:text-brand-primary transition-colors" data-i18n="footer_imprint">Impressum</a>
<a href="/datenschutz.php" class="hover:text-brand-primary transition-colors" data-i18n="footer_privacy">Datenschutz</a>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section section-alt" id="features">
<div class="container">
<h2 class="section-title" data-i18n="features_title"></h2>
<p class="section-lead" data-i18n="features_intro"></p>
<div class="features-grid">
<article class="feature-card">
<h3 data-i18n="feature_free_title"></h3>
<ul>
<li data-i18n="feature_free_1"></li>
<li data-i18n="feature_free_2"></li>
<li data-i18n="feature_free_3"></li>
</ul>
</article>
<article class="feature-card feature-card-pro">
<div class="pill" data-i18n="label_coming_soon"></div>
<h3 data-i18n="feature_pro_title"></h3>
<ul>
<li data-i18n="feature_pro_1"></li>
<li data-i18n="feature_pro_2"></li>
<li data-i18n="feature_pro_3"></li>
</ul>
</article>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section" id="pricing">
<div class="container">
<h2 class="section-title" data-i18n="pricing_title"></h2>
<p class="section-lead" data-i18n="pricing_intro"></p>
<div class="pricing-grid">
<article class="pricing-card">
<h3 data-i18n="pricing_free_title"></h3>
<p class="price-tag" data-i18n="pricing_free_price"></p>
<ul>
<li data-i18n="pricing_free_1"></li>
<li data-i18n="pricing_free_2"></li>
<li data-i18n="pricing_free_3"></li>
</ul>
<a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
class="btn btn-primary"
data-i18n="pricing_free_cta"></a>
</article>
<article class="pricing-card pricing-card-muted">
<h3 data-i18n="pricing_pro_title"></h3>
<p class="price-tag" data-i18n="pricing_pro_price"></p>
<ul>
<li data-i18n="pricing_pro_1"></li>
<li data-i18n="pricing_pro_2"></li>
<li data-i18n="pricing_pro_3"></li>
</ul>
<button class="btn btn-disabled" disabled data-i18n="pricing_pro_cta"></button>
</article>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section section-alt" id="faq">
<div class="container">
<h2 class="section-title" data-i18n="faq_title"></h2>
<p class="section-lead" data-i18n="faq_intro"></p>
<div class="faq-grid">
<details class="faq-item" open>
<summary data-i18n="faq_q1"></summary>
<p data-i18n="faq_a1"></p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q2"></summary>
<p data-i18n="faq_a2"></p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q3"></summary>
<p data-i18n="faq_a3"></p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q4"></summary>
<p data-i18n="faq_a4"></p>
</details>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<p>&copy; <?php echo date('Y'); ?> usbcheck.it</p>
<div class="footer-links">
<a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/impressum', $currentLang)); ?>"
data-i18n="footer_imprint"></a>
<a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/datenschutz', $currentLang)); ?>"
data-i18n="footer_privacy"></a>
</div>
</div>
</footer>
</footer>
</div>
<!-- I18n + Login/Avatar Logic -->
<script src="/assets/js/lang.js?v=1"></script>
</body>
</html>