update
This commit is contained in:
@@ -1,36 +1,174 @@
|
||||
<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>
|
||||
<?php
|
||||
// fakecheck.php – Template für das Browser-Test-Tool im Bereich /fakecheck
|
||||
?>
|
||||
<section class="fc-container" id="fakecheck-tool">
|
||||
<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>
|
||||
|
||||
<!-- 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 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>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user