usbcheck.it/public/fakecheck/index.php

<?php
// public/fakecheck/index.php

// Sprachlogik wie auf der Startseite
$lang = $_GET['lang'] ?? 'en';
$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';

// User-Dummy (später über Login ersetzen)
$userInitials = null;

// Seitentitel & Description (SEO)
$pageTitle = 'usbcheck.it – Fake USB Check';
$pageDescription = 'Fake USB-Sticks erkennen: Browser-basierter Schnelltest für Kapazität, Schreib-/Lesegeschwindigkeit und Datenintegrität – ohne Installation.';

// Layout-Start einbinden
require __DIR__ . '/../partials/layout_start.php';
?>

<!-- HERO / INTRO -->
<section id="hero" class="relative overflow-hidden border-b border-brand-border/70">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_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-14 sm:py-20 flex flex-col lg:flex-row gap-10 items-center">
        <!-- Left: Text -->
        <div class="flex-1 space-y-6">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="fake_hero_kicker">
                FakeCheck – Browser-Modus
            </p>
            <h1 class="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-white" data-i18n="fake_hero_title">
                Ist mein USB-Stick fake?
            </h1>
            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="fake_hero_lead">
                Der FakeCheck hilft dir, typische Fake-Sticks aufzuspüren: Browser-basierte Schreib-/Lesetests und Plausibilitätsprüfungen der nutzbaren Kapazität – ohne Installation.
            </p>

            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
                <button
                    id="startButton"
                    class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold bg-brand-primary text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
                    data-i18n="fake_cta_start">
                    Browser-Test starten (Demo)
                </button>

                <a href="/?lang=<?= htmlspecialchars($lang) ?>"
                   class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium border border-brand-border text-brand-muted hover:border-brand-primary hover:text-brand-primary transition-colors"
                   data-i18n="fake_cta_back_home">
                    Zur Übersicht zurück
                </a>
            </div>

            <p class="text-xs text-brand-muted/80 max-w-md" data-i18n="fake_hero_hint">
                Der FakeCheck im Browser arbeitet mit Testdateien und Lese-/Schreibmustern, die du in einem ausgewählten Ordner anlegst. Deine echten Dateien bleiben unangetastet.
            </p>
        </div>

        <!-- Right: Explainer -->
        <div class="flex-1 max-w-md w-full">
            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft space-y-4">
                <h2 class="font-heading text-lg sm:text-xl font-semibold text-white" data-i18n="fake_box_title">
                    Was der Browser-Test leisten kann
                </h2>
                <ul class="space-y-3 text-sm text-brand-muted">
                    <li class="flex gap-2">
                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">1</span>
                        <div>
                            <p class="font-medium text-brand-text" data-i18n="fake_box_point1_title">Schreib-/Lesetest mit Testdateien</p>
                            <p data-i18n="fake_box_point1_text">
                                Der Browser legt Testdateien im gewählten Ordner an, misst Schreib- und Leseraten und prüft, ob gelesene Daten mit den geschriebenen Mustern übereinstimmen.
                            </p>
                        </div>
                    </li>
                    <li class="flex gap-2">
                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">2</span>
                        <div>
                            <p class="font-medium text-brand-text" data-i18n="fake_box_point2_title">Plausibilitätscheck der Kapazität</p>
                            <p data-i18n="fake_box_point2_text">
                                Aus der Menge der erfolgreich geschriebenen und verifizierten Daten ergibt sich ein realistischer Eindruck, wie viel Nutzkapazität tatsächlich stabil ankommt.
                            </p>
                        </div>
                    </li>
                    <li class="flex gap-2">
                        <span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">3</span>
                        <div>
                            <p class="font-medium text-brand-text" data-i18n="fake_box_point3_title">JSON-Report für deine Dokumentation</p>
                            <p data-i18n="fake_box_point3_text">
                                Alle Ergebnisse werden in einem strukturierten JSON-Report gesammelt, den du speichern, hochladen oder für spätere Vergleiche nutzen kannst.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- APP / DEMO-BEREICH -->
<section id="webcheck" class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
    <div class="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)] items-start">
        <!-- Links: Test-Steuerung (Platzhalter) -->
        <div class="space-y-6">
            <div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-6 sm:p-7 shadow-soft">
                <h2 class="font-heading text-xl sm:text-2xl font-semibold mb-2 text-white" data-i18n="fake_app_title">
                    Browser-Testoberfläche (Preview)
                </h2>
                <p class="text-sm text-brand-muted mb-4" data-i18n="fake_app_intro">
                    Hier entsteht die eigentliche FakeCheck-Web-App: Auswahl des Testordners, Konfiguration der Testmenge, Fortschrittsanzeige und Ergebnisübersicht. Aktuell zeigt der Button oben nur eine Demo-Ausgabe.
                </p>

                <ul class="space-y-2 text-xs text-brand-muted">
                    <li data-i18n="fake_app_point1">• Quick-Test mit kleiner Datenmenge.</li>
                    <li data-i18n="fake_app_point2">• Light-Benchmark: Schreib-/Lesegeschwindigkeit über begrenzte Zeit.</li>
                    <li data-i18n="fake_app_point3">• Write/Verify: Testdateien schreiben und direkt wieder verifizieren.</li>
                </ul>
            </div>
        </div>

        <!-- Rechts: Ergebnis / JSON-Report-Preview -->
        <div class="space-y-4">
            <div id="resultContainer" class="hidden rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft">
                <h3 class="font-heading text-lg font-semibold mb-2 text-white" data-i18n="fake_result_title">
                    Demo-Ausgabe des Browser-Tests
                </h3>
                <p class="text-xs text-brand-muted mb-3" data-i18n="fake_result_hint">
                    Diese Ausgabe dient nur als Vorschau. Später wird hier der echte JSON-Report aus dem Browser-Test angezeigt.
                </p>
                <pre id="resultOutput"
                     class="text-[11px] whitespace-pre-wrap bg-black/40 text-brand-muted rounded-xl p-3 font-mono overflow-x-auto min-h-[140px]">
                </pre>
            </div>
        </div>
    </div>
</section>

<?php
// Layout-Ende (Footer + Scripts)
require __DIR__ . '/../partials/layout_end.php';
?>

<!-- Seiteigener JS-Placeholder für die spätere Web-App-Logik -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const startButton = document.getElementById("startButton");
    const resultContainer = document.getElementById("resultContainer");
    const resultOutput = document.getElementById("resultOutput");

    if (!startButton || !resultContainer || !resultOutput) return;

    startButton.addEventListener("click", function () {
        const now = new Date().toISOString();
        const demoReport = {
            meta: {
                tool: "usbcheck.it/fakecheck",
                mode: "browser-demo",
                timestamp: now,
                locale: "<?= htmlspecialchars($lang) ?>"
            },
            tests: [
                { id: "quick_test", label: "Quick-Test (Demo)", status: "pending" },
                { id: "light_benchmark", label: "Light-Benchmark (Demo)", status: "pending" },
                { id: "write_verify", label: "Write/Verify (Demo)", status: "pending" }
            ],
            note: "Dies ist nur eine Platzhalter-Ausgabe. Die echte Web-Testlogik (File System Access, Fortschritt, realer JSON-Report) implementieren wir im nächsten Schritt."
        };

        resultOutput.textContent = JSON.stringify(demoReport, null, 2);
        resultContainer.classList.remove("hidden");
        resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
    });
});
</script>