179 lines
7.7 KiB
PHP
179 lines
7.7 KiB
PHP
<?php
|
||
// fakecheck.php – Template für das Browser-Test-Tool im Bereich /fakecheck
|
||
?>
|
||
<section class="section-band section-band--soft border-t border-brand-border/60 py-12 sm:py-16" id="fakecheck-tool">
|
||
<div class="px-4 sm:px-6 lg:px-8">
|
||
<div class="section-shell fc-container">
|
||
<div class="fc-header">
|
||
<div class="fc-header-text">
|
||
<h2>Browser-basierter USB-Test</h2>
|
||
<p>
|
||
Führe einen Schnelltest direkt im Browser durch – ohne Installation.
|
||
Für tiefere Analysen gibt es später den Pro-Modus mit lokalem Helper.
|
||
</p>
|
||
</div>
|
||
<div class="fc-header-badge">
|
||
<span class="dot"></span>
|
||
<span id="fc-env-label">
|
||
Browser-Modus aktiv – keine Installation nötig
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fc-layout" id="fc-root">
|
||
<!-- Linke Seite: Steuerung & Fortschritt -->
|
||
<section class="fc-card fc-main">
|
||
<h3 class="fc-card-title">Schritt 1: USB-Stick wählen</h3>
|
||
<p class="fc-card-subtitle">
|
||
Wähle das Wurzelverzeichnis deines USB-Sticks. Der Browser erhält nur Zugriff auf diesen Bereich.
|
||
</p>
|
||
|
||
<div class="fc-actions">
|
||
<button type="button" class="fc-btn" id="fc-btn-pick-directory">
|
||
USB-Stick auswählen
|
||
</button>
|
||
<button type="button" class="fc-btn fc-btn-secondary" id="fc-btn-clear-selection" disabled>
|
||
Auswahl zurücksetzen
|
||
</button>
|
||
</div>
|
||
|
||
<p class="fc-help" id="fc-selected-path-label">
|
||
Noch kein Verzeichnis gewählt.
|
||
</p>
|
||
|
||
<div class="fc-alert fc-alert-warn" id="fc-fsapi-warning" style="display:none;">
|
||
Dein Browser unterstützt die File System Access API nicht oder nur eingeschränkt.
|
||
Du kannst dieses Browser-Test-Tool nur mit aktuellen Chrome-/Edge-Versionen voll nutzen.
|
||
</div>
|
||
|
||
<hr class="fc-divider">
|
||
|
||
<h3 class="fc-card-title">Schritt 2: Testmodus</h3>
|
||
<p class="fc-card-subtitle">
|
||
Wähle, welche Tests du durchführen möchtest. Alle Tests arbeiten nur mit Testdateien
|
||
im gewählten Ordner.
|
||
</p>
|
||
|
||
<div class="fc-mode-grid" id="fc-mode-grid">
|
||
<article class="fc-mode-tile" data-mode="quick">
|
||
<div class="pill">Quick-Check</div>
|
||
<h4>Basis-Check</h4>
|
||
<p>Schreibt und liest eine kleine Testdatei, um grundlegende Schreib-/Lesefehler zu erkennen.</p>
|
||
<small>Empfohlen für einen ersten Eindruck in wenigen Sekunden.</small>
|
||
</article>
|
||
|
||
<article class="fc-mode-tile" data-mode="benchmark">
|
||
<div class="pill">Benchmark</div>
|
||
<h4>Speed-Test</h4>
|
||
<p>Misst sequentielle Schreib- und Leseraten auf deinem Stick im Browser.</p>
|
||
<small>Ideal für „Ist der Stick so langsam, wie er sich anfühlt?“</small>
|
||
</article>
|
||
|
||
<article class="fc-mode-tile" data-mode="writeverify">
|
||
<div class="pill">Write & Verify</div>
|
||
<h4>Intensiver Dateitest</h4>
|
||
<p>Schreibt mehrere Testblöcke und prüft sie direkt wieder – nur in Test-Dateien.</p>
|
||
<small>Dauert länger, liefert aber eine bessere Aussage zur Stabilität.</small>
|
||
</article>
|
||
|
||
<article class="fc-mode-tile" data-mode="all">
|
||
<div class="pill">All-Inclusive</div>
|
||
<h4>Alle Browser-Tests</h4>
|
||
<p>Führt Quick-Check, Benchmark und Write/Verify nacheinander aus.</p>
|
||
<small>Maximale Aussagekraft im Browsermodus (ohne Pro-Helper).</small>
|
||
</article>
|
||
</div>
|
||
|
||
<p class="fc-help">
|
||
Hinweis: Diese Tests erzeugen nur eigene Testdateien in deinem gewählten Ordner
|
||
und überschreiben keine bestehenden Dateien. Für vollflächige, destruktive Tests
|
||
ist später der Pro-Helper zuständig.
|
||
</p>
|
||
|
||
<hr class="fc-divider">
|
||
|
||
<div class="fc-status-line">
|
||
<span id="fc-status-text">Bereit. Wähle zuerst deinen USB-Stick aus.</span>
|
||
<span id="fc-status-mode" class="fc-tag">Kein Modus selektiert</span>
|
||
</div>
|
||
|
||
<div class="fc-progress" aria-hidden="true">
|
||
<div class="fc-progress-inner" id="fc-progress-inner"></div>
|
||
</div>
|
||
|
||
<div class="fc-actions fc-actions-bottom">
|
||
<button type="button" class="fc-btn" id="fc-btn-start-tests" disabled>
|
||
Tests starten
|
||
</button>
|
||
<button type="button" class="fc-btn fc-btn-secondary" id="fc-btn-cancel-tests" disabled>
|
||
Abbrechen
|
||
</button>
|
||
</div>
|
||
|
||
<div class="fc-log" id="fc-log"></div>
|
||
</section>
|
||
|
||
<!-- Rechte Seite: Ergebnis-Dashboard -->
|
||
<aside class="fc-card fc-sidebar">
|
||
<h3 class="fc-card-title">Ergebnis-Dashboard</h3>
|
||
<p class="fc-card-subtitle">
|
||
Zusammenfassung der Browser-Tests. Für tiefergehende Analysen kannst du später den Pro-Modus nutzen.
|
||
</p>
|
||
|
||
<div class="fc-overall-status-wrap">
|
||
<span id="fc-overall-status-pill" class="fc-pill-status fc-pill-ok">
|
||
<span class="fc-pill-dot"></span>
|
||
<span id="fc-overall-status-text">Noch kein Test durchgeführt</span>
|
||
</span>
|
||
</div>
|
||
|
||
<dl class="fc-kv-list">
|
||
<div class="fc-kv-item">
|
||
<dt>Modus</dt>
|
||
<dd id="fc-res-mode">–</dd>
|
||
</div>
|
||
<div class="fc-kv-item">
|
||
<dt>Gesamtlaufzeit</dt>
|
||
<dd id="fc-res-duration">–</dd>
|
||
</div>
|
||
<div class="fc-kv-item">
|
||
<dt>Write-Speed (Ø)</dt>
|
||
<dd id="fc-res-write-speed">–</dd>
|
||
</div>
|
||
<div class="fc-kv-item">
|
||
<dt>Read-Speed (Ø)</dt>
|
||
<dd id="fc-res-read-speed">–</dd>
|
||
</div>
|
||
<div class="fc-kv-item">
|
||
<dt>Geschriebene Testdaten</dt>
|
||
<dd id="fc-res-written-bytes">–</dd>
|
||
</div>
|
||
<div class="fc-kv-item">
|
||
<dt>Verifizierte Testdaten</dt>
|
||
<dd id="fc-res-verified-bytes">–</dd>
|
||
</div>
|
||
</dl>
|
||
|
||
<div class="fc-alert fc-alert-info" id="fc-save-hint" style="display:none;">
|
||
Testergebnisse werden – sofern du eingeloggt bist – automatisch als Resultat gespeichert.
|
||
</div>
|
||
|
||
<div class="fc-alert fc-alert-error" id="fc-save-error" style="display:none;">
|
||
Ergebnis konnte nicht automatisch gespeichert werden. Du kannst es später erneut versuchen.
|
||
</div>
|
||
|
||
<p class="fc-help">
|
||
Technischer Hinweis: Diese Seite arbeitet ausschließlich mit Testdateien im gewählten Ordner
|
||
und übermittelt keine Inhalte deiner privaten Dateien.
|
||
</p>
|
||
|
||
<p class="fc-help">
|
||
Der vollständige JSON-Report ist nach dem Test in der Browser-Konsole einsehbar
|
||
(F12 → Console).
|
||
</p>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|