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

update

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-24 00:57:19 +01:00
parent 0b6f30a83e
commit f3cd26ba89
6 changed files with 1319 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
api/result/browser-quick-test.php Normal file
View File

@@ -0,0 +1,54 @@
<?php
// public/api/results/save-browser-test.php
// Achtung: Passe Pfad und Bootstrapping an dein Projekt an!
require __DIR__ . '/../../../config/fileload.php';
session_start();
// Nur eingeloggte User
if (empty($_SESSION['user_id'])) {
http_response_code(401);
echo json_encode(['error' => 'not_authenticated']);
exit;
}
$userId = (int)$_SESSION['user_id'];
// JSON einlesen
$raw = file_get_contents('php://input');
$data = json_decode($raw, true);
if (!is_array($data)) {
http_response_code(400);
echo json_encode(['error' => 'invalid_json']);
exit;
}
// Minimale Validierung
$mode = $data['mode_requested'] ?? null;
$totalDuration = $data['total_duration_s'] ?? null;
// DB: Beispiel (mysqli/PDO – hier PDO angenommen)
$db = get_db_connection(); // implementiere in deiner config
$stmt = $db->prepare("
INSERT INTO usb_results_browser
(user_id, mode, total_duration_s, report_json, created_at)
VALUES
(:user_id, :mode, :total_duration_s, :report_json, NOW())
");
$stmt->execute([
':user_id' => $userId,
':mode' => $mode,
':total_duration_s'=> $totalDuration,
':report_json' => json_encode($data, JSON_UNESCAPED_UNICODE),
]);
$id = (int)$db->lastInsertId();
header('Content-Type: application/json; charset=utf-8');
echo json_encode([
'status' => 'ok',
'id' => $id,
]);

192
partials/landing/fakecheck/webcheck.php
View File

@@ -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.
<?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>
<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 class="fc-header-badge">
<span class="dot"></span>
<span id="fc-env-label">
Browser-Modus aktiv – keine Installation nötig
</span>
</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.
<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>
<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 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 &amp; 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>

2
partials/structure/header.php
View File

@@ -70,7 +70,7 @@ if ($isLoggedIn) {
<div class="flex items-center gap-6">
<!-- Hauptnavigation -->
<nav class="hidden md:flex items-center gap-6 text-xs font-medium text-brand-muted uppercase tracking-[0.18em]">
<nav class="flex flex-wrap items-center gap-4 sm:gap-6 text-xs font-medium text-brand-muted uppercase tracking-[0.18em]">
<?php foreach ($navAnchors as $item): ?>
<a href="<?= htmlspecialchars($item['href']) ?>"
class="hover:text-brand-primary transition-colors"

399
public/assets/css/fakecheck.css Normal file
View File

@@ -0,0 +1,399 @@
/* /public/assets/css/fakecheck.css */
:root {
--fc-brand-primary: #2563eb;
--fc-brand-secondary: #0f172a;
--fc-brand-bg: #020617;
--fc-brand-border: #1f2937;
--fc-success: #16a34a;
--fc-warning: #f59e0b;
--fc-danger: #dc2626;
--fc-text: #e5e7eb;
--fc-text-muted: #9ca3af;
}
.fc-container {
max-width: 1120px;
margin: 0 auto;
padding: 2rem 1.25rem 3rem;
color: var(--fc-text);
}
.fc-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.75rem;
align-items: center;
}
.fc-header-text h2 {
margin: 0 0 0.3rem;
font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
font-size: 1.7rem;
}
.fc-header-text p {
margin: 0;
color: var(--fc-text-muted);
font-size: 0.95rem;
}
.fc-header-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(37, 99, 235, 0.15);
color: var(--fc-text-muted);
font-size: 0.75rem;
}
.fc-header-badge .dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
}
.fc-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr);
gap: 1.5rem;
}
@media (max-width: 900px) {
.fc-layout {
grid-template-columns: minmax(0, 1fr);
}
}
/* Karten */
.fc-card {
background: rgba(15, 23, 42, 0.96);
border-radius: 1rem;
border: 1px solid var(--fc-brand-border);
padding: 1.5rem 1.5rem 1.75rem;
backdrop-filter: blur(12px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
}
.fc-card-title {
margin: 0 0 0.45rem;
font-size: 1.05rem;
font-family: "Montserrat", system-ui, sans-serif;
font-weight: 600;
}
.fc-card-subtitle {
margin: 0 0 0.8rem;
font-size: 0.9rem;
color: var(--fc-text-muted);
}
/* Buttons */
.fc-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.fc-actions-bottom {
margin-top: 0.9rem;
}
.fc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.55rem 1.1rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.25);
background: linear-gradient(to right, #1d4ed8, #3b82f6);
color: #f9fafb;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
white-space: nowrap;
}
.fc-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.fc-btn:hover:not([disabled]) {
transform: translateY(-1px);
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.55);
}
.fc-btn-secondary {
background: transparent;
border-color: rgba(148, 163, 184, 0.4);
color: var(--fc-text-muted);
}
.fc-btn-secondary:hover:not([disabled]) {
background: rgba(15, 23, 42, 0.9);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.65);
}
/* Modus-Kacheln */
.fc-mode-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 0.75rem;
}
@media (max-width: 600px) {
.fc-mode-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.fc-mode-tile {
border-radius: 0.9rem;
padding: 0.9rem 0.95rem;
border: 1px solid rgba(31, 41, 55, 0.9);
background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), rgba(15, 23, 42, 0.96));
cursor: pointer;
transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.fc-mode-tile h4 {
margin: 0 0 0.35rem;
font-size: 0.95rem;
font-weight: 600;
}
.fc-mode-tile p {
margin: 0;
font-size: 0.8rem;
color: var(--fc-text-muted);
}
.fc-mode-tile small {
display: block;
margin-top: 0.3rem;
font-size: 0.7rem;
color: var(--fc-text-muted);
}
.fc-mode-tile .pill {
display: inline-flex;
align-items: center;
padding: 0.1rem 0.45rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.4);
font-size: 0.65rem;
color: var(--fc-text-muted);
margin-bottom: 0.35rem;
}
.fc-mode-tile.selected {
border-color: var(--fc-brand-primary);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.58), 0 12px 30px rgba(15, 23, 42, 0.9);
transform: translateY(-1px);
}
.fc-mode-tile.disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Divider, Status, Progress */
.fc-divider {
margin: 1.25rem 0 1rem;
height: 1px;
border: none;
background: radial-gradient(circle, rgba(148, 163, 184, 0.35), transparent);
}
.fc-status-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--fc-text-muted);
flex-wrap: wrap;
}
.fc-tag {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.6rem;
border-radius: 999px;
border: 1px solid rgba(75, 85, 99, 0.8);
font-size: 0.75rem;
color: var(--fc-text-muted);
white-space: nowrap;
}
.fc-progress {
margin-top: 0.6rem;
width: 100%;
height: 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
overflow: hidden;
border: 1px solid rgba(31, 41, 55, 0.9);
}
.fc-progress-inner {
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(to right, #22c55e, #16a34a);
transition: width 0.15s ease;
}
/* Log */
.fc-log {
margin-top: 0.75rem;
padding: 0.6rem 0.7rem;
border-radius: 0.6rem;
background: rgba(15, 23, 42, 0.98);
border: 1px dashed rgba(55, 65, 81, 0.9);
max-height: 220px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.78rem;
color: #9ca3af;
}
.fc-log-line {
white-space: pre-wrap;
}
.fc-log-line strong {
color: #e5e7eb;
}
/* Help-Text */
.fc-help {
font-size: 0.78rem;
color: var(--fc-text-muted);
margin-top: 0.3rem;
}
/* Alerts */
.fc-alert {
margin-top: 0.75rem;
padding: 0.6rem 0.75rem;
border-radius: 0.6rem;
font-size: 0.78rem;
}
.fc-alert-info {
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.45);
color: #bfdbfe;
}
.fc-alert-warn {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.45);
color: #fef3c7;
}
.fc-alert-error {
background: rgba(220, 38, 38, 0.1);
border: 1px solid rgba(220, 38, 38, 0.6);
color: #fee2e2;
}
/* Dashboard / Key-Value-Liste */
.fc-kv-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem 1.2rem;
font-size: 0.8rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.fc-kv-list {
grid-template-columns: minmax(0, 1fr);
}
}
.fc-kv-item dt {
margin: 0 0 0.15rem;
color: var(--fc-text-muted);
font-weight: 400;
}
.fc-kv-item dd {
margin: 0;
font-weight: 600;
}
/* Overall-Status */
.fc-overall-status-wrap {
margin-bottom: 0.7rem;
}
.fc-pill-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
border: 1px solid transparent;
}
.fc-pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
}
.fc-pill-ok {
background: rgba(22, 163, 74, 0.12);
color: #bbf7d0;
border-color: rgba(34, 197, 94, 0.5);
}
.fc-pill-ok .fc-pill-dot {
background: #22c55e;
}
.fc-pill-warn {
background: rgba(245, 158, 11, 0.12);
color: #fef3c7;
border-color: rgba(245, 158, 11, 0.6);
}
.fc-pill-warn .fc-pill-dot {
background: #fbbf24;
}
.fc-pill-bad {
background: rgba(220, 38, 38, 0.12);
color: #fee2e2;
border-color: rgba(220, 38, 38, 0.6);
}
.fc-pill-bad .fc-pill-dot {
background: #ef4444;
}

701
public/assets/js/fakecheck.js
View File

@@ -1,37 +1,692 @@
// /public/assets/js/fakecheck.js
document.addEventListener("DOMContentLoaded", () => {
// Werte kommen aus globalen Variablen, die wir in PHP setzen:
const baseUrl = window.fakecheckBaseUrl || "";
const locale = window.fakecheckLocale || "en";
const startButton = document.getElementById("startButton");
const resultContainer = document.getElementById("resultContainer");
const resultOutput = document.getElementById("resultOutput");
const root = document.getElementById("fc-root");
if (!root) {
// Auf anderen Seiten eingebunden? Dann einfach nichts tun.
return;
}
if (!startButton || !resultContainer || !resultOutput) return;
// --- DOM-Helper ---------------------------------------------------------
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
startButton.addEventListener("click", () => {
const now = new Date().toISOString();
const logEl = $("#fc-log");
const statusTextEl = $("#fc-status-text");
const statusModeEl = $("#fc-status-mode");
const progressInner = $("#fc-progress-inner");
const overallPill = $("#fc-overall-status-pill");
const overallStatus = $("#fc-overall-status-text");
const fsapiWarning = $("#fc-fsapi-warning");
const selectedPathText = $("#fc-selected-path-label");
const saveHint = $("#fc-save-hint");
const saveError = $("#fc-save-error");
const demoReport = {
meta: {
tool: baseUrl,
mode: "browser-demo",
timestamp: now,
locale: locale
},
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."
const resMode = $("#fc-res-mode");
const resDuration = $("#fc-res-duration");
const resWriteSpeed = $("#fc-res-write-speed");
const resReadSpeed = $("#fc-res-read-speed");
const resWritten = $("#fc-res-written-bytes");
const resVerified = $("#fc-res-verified-bytes");
const btnPickDir = $("#fc-btn-pick-directory");
const btnClearSel = $("#fc-btn-clear-selection");
const btnStart = $("#fc-btn-start-tests");
const btnCancel = $("#fc-btn-cancel-tests");
const modeTiles = $$("#fc-mode-grid .fc-mode-tile");
// Falls du einen Login-Indikator hast, kannst du ihn global setzen,
// z. B. window.fakecheckIsLoggedIn = true/false
if (window.fakecheckIsLoggedIn) {
saveHint.style.display = "block";
}
function logLine(message, level = "info") {
if (!logEl) return;
const line = document.createElement("div");
line.className = "fc-log-line";
const prefix =
level === "error" ? "[ERROR] " :
level === "warn" ? "[WARN] " :
"[INFO] ";
line.innerHTML = `<strong>${prefix}</strong>${message}`;
logEl.appendChild(line);
logEl.scrollTop = logEl.scrollHeight;
}
function setStatus(text) {
if (statusTextEl) statusTextEl.textContent = text;
}
function setModeLabel(text) {
if (statusModeEl) statusModeEl.textContent = text;
}
function setProgress(percent) {
if (!progressInner) return;
const v = Math.min(100, Math.max(0, percent));
progressInner.style.width = v + "%";
}
function setOverallStatus(state, text) {
if (!overallPill || !overallStatus) return;
overallPill.classList.remove("fc-pill-ok", "fc-pill-warn", "fc-pill-bad");
if (state === "ok") overallPill.classList.add("fc-pill-ok");
else if (state === "warn") overallPill.classList.add("fc-pill-warn");
else overallPill.classList.add("fc-pill-bad");
overallStatus.textContent = text;
}
function formatBytes(bytes) {
if (bytes == null) return "–";
const units = ["B", "KB", "MB", "GB", "TB"];
let u = 0;
let v = bytes;
while (v >= 1024 && u < units.length - 1) {
v /= 1024;
u++;
}
return v.toFixed(1) + " " + units[u];
}
function formatMbps(bytes, seconds) {
if (!seconds || seconds <= 0) return "–";
const bits = bytes * 8;
const mbits = bits / (1000 * 1000);
return mbits.toFixed(1) + " Mbit/s";
}
function formatDuration(seconds) {
if (!seconds) return "–";
const s = Math.round(seconds);
if (s < 60) return s + " s";
const m = Math.floor(s / 60);
const r = s % 60;
if (m < 60) return `${m} min ${r}s`;
const h = Math.floor(m / 60);
const rm = m % 60;
return `${h} h ${rm} min`;
}
// --- Test-Engine (Browser) ---------------------------------------------
class UsbBrowserTester {
constructor() {
this.rootHandle = null;
this.abortController = null;
}
hasFsApiSupport() {
return "showDirectoryPicker" in window;
}
async pickDirectory() {
if (!this.hasFsApiSupport()) {
throw new Error("File System Access API wird von diesem Browser nicht unterstützt.");
}
const handle = await window.showDirectoryPicker();
this.rootHandle = handle;
return handle;
}
async clearSelection() {
this.rootHandle = null;
}
async runQuickCheck(report, progressCb, abortSignal) {
const TEST_FILENAME = "usbcheck_quick_test.bin";
const TEST_SIZE_MB = 8;
const CHUNK_SIZE = 1024 * 1024;
const dirHandle = this.rootHandle;
if (!dirHandle) throw new Error("Kein Verzeichnis ausgewählt.");
logLine("Quick-Check: Vorbereitung...", "info");
const fileHandle = await dirHandle.getFileHandle(TEST_FILENAME, { create: true });
const writable = await fileHandle.createWritable();
const totalBytes = TEST_SIZE_MB * 1024 * 1024;
let writtenBytes = 0;
const writeStart = performance.now();
while (writtenBytes < totalBytes) {
if (abortSignal.aborted) {
await writable.abort();
throw new DOMException("Abgebrochen", "AbortError");
}
const remaining = totalBytes - writtenBytes;
const chunkLen = Math.min(CHUNK_SIZE, remaining);
const chunk = new Uint8Array(chunkLen);
for (let i = 0; i < chunkLen; i++) {
chunk[i] = (i + writtenBytes) % 251;
}
await writable.write(chunk);
writtenBytes += chunkLen;
progressCb((writtenBytes / totalBytes) * 100 * 0.5);
}
await writable.close();
const writeEnd = performance.now();
logLine("Quick-Check: Schreiben abgeschlossen. Verifiziere Daten...", "info");
const file = await fileHandle.getFile();
const readStart = performance.now();
const reader = file.stream().getReader();
let offset = 0;
let verifiedBytes = 0;
while (true) {
if (abortSignal.aborted) {
reader.cancel();
throw new DOMException("Abgebrochen", "AbortError");
}
const { done, value } = await reader.read();
if (done) break;
const chunk = value;
for (let i = 0; i < chunk.length; i++) {
const expected = (offset + i) % 251;
if (chunk[i] !== expected) {
logLine(`Quick-Check: Datenfehler bei Byte ${offset + i}`, "error");
throw new Error(`Datenfehler im Quick-Check bei Byte ${offset + i}`);
}
}
offset += chunk.length;
verifiedBytes += chunk.length;
progressCb(50 + (verifiedBytes / totalBytes) * 100 * 0.5);
}
const readEnd = performance.now();
const writeSeconds = (writeEnd - writeStart) / 1000;
const readSeconds = (readEnd - readStart) / 1000;
report.quick = {
mode: "quick",
test_file: TEST_FILENAME,
size_bytes: totalBytes,
write_bytes: writtenBytes,
read_bytes: verifiedBytes,
write_duration_s: writeSeconds,
read_duration_s: readSeconds,
write_mbit_s: writeSeconds ? (writtenBytes * 8 / (writeSeconds * 1e6)) : null,
read_mbit_s: readSeconds ? (verifiedBytes * 8 / (readSeconds * 1e6)) : null,
ok: true
};
resultOutput.textContent = JSON.stringify(demoReport, null, 2);
logLine("Quick-Check: Erfolgreich abgeschlossen.", "info");
}
resultContainer.classList.remove("hidden");
resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
async runBenchmark(report, progressCb, abortSignal) {
const TEST_FILENAME = "usbcheck_benchmark.bin";
const TEST_SIZE_MB = 32;
const CHUNK_SIZE = 1024 * 1024;
const dirHandle = this.rootHandle;
if (!dirHandle) throw new Error("Kein Verzeichnis ausgewählt.");
logLine("Benchmark: Start – schreibe Testdatei...", "info");
const fileHandle = await dirHandle.getFileHandle(TEST_FILENAME, { create: true });
const writable = await fileHandle.createWritable();
const totalBytes = TEST_SIZE_MB * 1024 * 1024;
let writtenBytes = 0;
const writeStart = performance.now();
while (writtenBytes < totalBytes) {
if (abortSignal.aborted) {
await writable.abort();
throw new DOMException("Abgebrochen", "AbortError");
}
const remaining = totalBytes - writtenBytes;
const chunkLen = Math.min(CHUNK_SIZE, remaining);
const chunk = new Uint8Array(chunkLen);
for (let i = 0; i < chunkLen; i++) {
chunk[i] = 0xaa;
}
await writable.write(chunk);
writtenBytes += chunkLen;
progressCb((writtenBytes / totalBytes) * 100 * 0.4);
}
await writable.close();
const writeEnd = performance.now();
logLine("Benchmark: Lesen & Timing...", "info");
const file = await fileHandle.getFile();
const readStart = performance.now();
const reader = file.stream().getReader();
let readBytes = 0;
while (true) {
if (abortSignal.aborted) {
reader.cancel();
throw new DOMException("Abgebrochen", "AbortError");
}
const { done, value } = await reader.read();
if (done) break;
readBytes += value.length;
progressCb(40 + (readBytes / totalBytes) * 100 * 0.6);
}
const readEnd = performance.now();
const writeSeconds = (writeEnd - writeStart) / 1000;
const readSeconds = (readEnd - readStart) / 1000;
report.benchmark = {
mode: "benchmark",
test_file: TEST_FILENAME,
size_bytes: totalBytes,
write_bytes: writtenBytes,
read_bytes: readBytes,
write_duration_s: writeSeconds,
read_duration_s: readSeconds,
write_mbit_s: writeSeconds ? (writtenBytes * 8 / (writeSeconds * 1e6)) : null,
read_mbit_s: readSeconds ? (readBytes * 8 / (readSeconds * 1e6)) : null,
ok: true
};
logLine("Benchmark: Erfolgreich abgeschlossen.", "info");
}
async runWriteVerify(report, progressCb, abortSignal) {
const BASE_FILENAME = "usbcheck_block_";
const BLOCKS = 4;
const BLOCK_SIZE_MB = 32;
const CHUNK_SIZE = 1024 * 1024;
const dirHandle = this.rootHandle;
if (!dirHandle) throw new Error("Kein Verzeichnis ausgewählt.");
logLine("Write/Verify: Start – mehrere Blöcke werden getestet...", "info");
const totalBytes = BLOCKS * BLOCK_SIZE_MB * 1024 * 1024;
let writtenBytes = 0;
let verifiedBytes = 0;
const globalStart = performance.now();
const writeDetails = [];
const readDetails = [];
for (let b = 0; b < BLOCKS; b++) {
const filename = `${BASE_FILENAME}${String(b + 1).padStart(2, "0")}.bin`;
logLine(`Write/Verify: Block ${b + 1}/${BLOCKS} – ${filename}`, "info");
const fileHandle = await dirHandle.getFileHandle(filename, { create: true });
const writable = await fileHandle.createWritable();
const blockBytes = BLOCK_SIZE_MB * 1024 * 1024;
let blockWritten = 0;
const blockWriteStart = performance.now();
while (blockWritten < blockBytes) {
if (abortSignal.aborted) {
await writable.abort();
throw new DOMException("Abgebrochen", "AbortError");
}
const remaining = blockBytes - blockWritten;
const chunkLen = Math.min(CHUNK_SIZE, remaining);
const chunk = new Uint8Array(chunkLen);
for (let i = 0; i < chunkLen; i++) {
chunk[i] = (i + blockWritten + b * 13) % 251;
}
await writable.write(chunk);
blockWritten += chunkLen;
writtenBytes += chunkLen;
const progress = (writtenBytes + verifiedBytes) / (totalBytes * 2) * 100;
progressCb(progress);
}
await writable.close();
const blockWriteEnd = performance.now();
writeDetails.push({
block: b + 1,
bytes: blockBytes,
duration_s: (blockWriteEnd - blockWriteStart) / 1000
});
const file = await fileHandle.getFile();
const reader = file.stream().getReader();
let blockOffset = 0;
const blockReadStart = performance.now();
while (true) {
if (abortSignal.aborted) {
reader.cancel();
throw new DOMException("Abgebrochen", "AbortError");
}
const { done, value } = await reader.read();
if (done) break;
const chunk = value;
for (let i = 0; i < chunk.length; i++) {
const expected = (i + blockOffset + b * 13) % 251;
if (chunk[i] !== expected) {
logLine(`Write/Verify: Datenfehler in Block ${b + 1} bei Byte ${blockOffset + i}`, "error");
throw new Error(`Datenfehler in Block ${b + 1} bei Byte ${blockOffset + i}`);
}
}
blockOffset += chunk.length;
verifiedBytes += chunk.length;
const progress = (writtenBytes + verifiedBytes) / (totalBytes * 2) * 100;
progressCb(progress);
}
const blockReadEnd = performance.now();
readDetails.push({
block: b + 1,
bytes: blockBytes,
duration_s: (blockReadEnd - blockReadStart) / 1000
});
}
const globalEnd = performance.now();
const totalDuration = (globalEnd - globalStart) / 1000;
const sumWrite = writeDetails.reduce((acc, d) => acc + d.bytes, 0);
const sumRead = readDetails.reduce((acc, d) => acc + d.bytes, 0);
const writeSec = writeDetails.reduce((acc, d) => acc + d.duration_s, 0);
const readSec = readDetails.reduce((acc, d) => acc + d.duration_s, 0);
report.writeverify = {
mode: "writeverify",
blocks: BLOCKS,
block_size_mb: BLOCK_SIZE_MB,
total_bytes: totalBytes,
written_bytes: writtenBytes,
verified_bytes: verifiedBytes,
write_duration_s: writeSec,
read_duration_s: readSec,
write_mbit_s: writeSec ? (sumWrite * 8 / (writeSec * 1e6)) : null,
read_mbit_s: readSec ? (sumRead * 8 / (readSec * 1e6)) : null,
ok: true
};
report.writeverify_total_duration_s = totalDuration;
logLine("Write/Verify: Alle Blöcke erfolgreich verifiziert.", "info");
}
async run(mode, updateProgressCb, abortSignal) {
if (!this.rootHandle) {
throw new Error("Kein USB-Verzeichnis ausgewählt.");
}
const report = {
meta: {
base_url: baseUrl,
locale: locale,
user_agent: navigator.userAgent,
started_at: new Date().toISOString()
},
tool: "usbcheck_browser",
tool_version: "0.1.0",
mode_requested: mode,
quick: null,
benchmark: null,
writeverify: null,
total_duration_s: null
};
const t0 = performance.now();
if (mode === "quick") {
await this.runQuickCheck(report, updateProgressCb, abortSignal);
} else if (mode === "benchmark") {
await this.runBenchmark(report, updateProgressCb, abortSignal);
} else if (mode === "writeverify") {
await this.runWriteVerify(report, updateProgressCb, abortSignal);
} else if (mode === "all") {
const modes = ["quick", "benchmark", "writeverify"];
for (let i = 0; i < modes.length; i++) {
const subMode = modes[i];
logLine(`All-Inclusive: Starte Teiltest "${subMode}" (${i + 1}/${modes.length})...`, "info");
await this.run(
subMode,
(p) => {
const base = (i / modes.length) * 100;
const span = (1 / modes.length) * 100;
updateProgressCb(base + (p / 100) * span);
},
abortSignal
);
}
} else {
throw new Error("Unbekannter Modus: " + mode);
}
const t1 = performance.now();
report.total_duration_s = (t1 - t0) / 1000;
report.meta.ended_at = new Date().toISOString();
return report;
}
}
const tester = new UsbBrowserTester();
let currentMode = null;
let isRunning = false;
if (!tester.hasFsApiSupport()) {
if (fsapiWarning) fsapiWarning.style.display = "block";
logLine(
"Dein Browser unterstützt die File System Access API nicht voll. Einige Funktionen sind deaktiviert.",
"warn"
);
}
function updateStartButtonState() {
const hasDir = !!tester.rootHandle;
const hasMode = !!currentMode;
if (btnStart) btnStart.disabled = !(hasDir && hasMode && !isRunning);
if (btnCancel) btnCancel.disabled = !isRunning;
}
// --- Event-Handler ------------------------------------------------------
if (btnPickDir) {
btnPickDir.addEventListener("click", async () => {
try {
const handle = await tester.pickDirectory();
if (selectedPathText) {
selectedPathText.textContent =
'USB-Ordner ausgewählt (Name: "' + (handle.name || "Unbekannt") + '").';
}
if (btnClearSel) btnClearSel.disabled = false;
setStatus("USB-Verzeichnis ausgewählt. Wähle jetzt einen Testmodus.");
logLine("Verzeichnis ausgewählt: " + (handle.name || "[ohne Namen]"));
updateStartButtonState();
} catch (err) {
if (err.name === "AbortError") {
logLine("Verzeichnisauswahl abgebrochen.", "warn");
} else {
logLine("Fehler bei Verzeichnisauswahl: " + err.message, "error");
}
}
});
}
if (btnClearSel) {
btnClearSel.addEventListener("click", async () => {
await tester.clearSelection();
if (selectedPathText) {
selectedPathText.textContent = "Noch kein Verzeichnis gewählt.";
}
btnClearSel.disabled = true;
setStatus("Bereit. Wähle zuerst deinen USB-Stick aus.");
logLine("Verzeichnisauswahl zurückgesetzt.", "info");
updateStartButtonState();
});
}
modeTiles.forEach((tile) => {
tile.addEventListener("click", () => {
if (tile.classList.contains("disabled")) return;
if (isRunning) return;
modeTiles.forEach((t) => t.classList.remove("selected"));
tile.classList.add("selected");
currentMode = tile.getAttribute("data-mode");
const titleEl = tile.querySelector("h4");
const label = titleEl ? titleEl.textContent : currentMode;
setModeLabel(label || "");
setStatus(`Modus "${label}" ausgewählt. Du kannst den Test jetzt starten.`);
logLine("Modus gewählt: " + currentMode, "info");
updateStartButtonState();
});
});
if (btnStart) {
btnStart.addEventListener("click", async () => {
if (!currentMode || !tester.rootHandle || isRunning) return;
isRunning = true;
updateStartButtonState();
if (btnCancel) btnCancel.disabled = false;
if (saveError) saveError.style.display = "none";
setProgress(0);
logLine("Starte Tests im Modus: " + currentMode.toUpperCase(), "info");
setStatus("Test läuft... bitte USB-Stick nicht entfernen.");
setOverallStatus("warn", "Test läuft...");
const abortController = new AbortController();
tester.abortController = abortController;
const updateProgressCb = (percent) => setProgress(percent);
let report = null;
try {
report = await tester.run(currentMode, updateProgressCb, abortController.signal);
setProgress(100);
setStatus("Test abgeschlossen.");
setOverallStatus("ok", "Browser-Test erfolgreich abgeschlossen.");
applyReportToDashboard(report);
// Debug / Support:
console.log("USB Browser Test Report (fakecheck):", report);
// Ergebnis speichern: Backend entscheidet, ob der User eingeloggt ist
await saveReportToBackend(report);
} catch (err) {
if (err.name === "AbortError") {
setStatus("Test wurde abgebrochen.");
setOverallStatus("warn", "Test abgebrochen.");
logLine("Test wurde vom Benutzer abgebrochen.", "warn");
} else {
setStatus("Fehler: " + err.message);
setOverallStatus("bad", "Fehler im Browser-Test.");
logLine("Fehler im Test: " + err.message, "error");
}
} finally {
isRunning = false;
tester.abortController = null;
updateStartButtonState();
if (btnCancel) btnCancel.disabled = true;
}
});
}
if (btnCancel) {
btnCancel.addEventListener("click", () => {
if (!isRunning || !tester.abortController) return;
tester.abortController.abort();
});
}
// --- Dashboard-Füllung --------------------------------------------------
function applyReportToDashboard(report) {
const modeLabelMap = {
quick: "Quick-Check",
benchmark: "Benchmark",
writeverify: "Write & Verify",
all: "All-Inclusive (alle Browser-Tests)"
};
if (resMode) {
resMode.textContent = modeLabelMap[report.mode_requested] || report.mode_requested || "–";
}
if (resDuration) {
resDuration.textContent = formatDuration(report.total_duration_s);
}
let aggWriteBytes = 0;
let aggReadBytes = 0;
let writeSec = 0;
let readSec = 0;
if (report.quick) {
aggWriteBytes += report.quick.write_bytes || 0;
aggReadBytes += report.quick.read_bytes || 0;
writeSec += report.quick.write_duration_s || 0;
readSec += report.quick.read_duration_s || 0;
}
if (report.benchmark) {
aggWriteBytes += report.benchmark.write_bytes || 0;
aggReadBytes += report.benchmark.read_bytes || 0;
writeSec += report.benchmark.write_duration_s || 0;
readSec += report.benchmark.read_duration_s || 0;
}
if (report.writeverify) {
aggWriteBytes += report.writeverify.written_bytes || 0;
aggReadBytes += report.writeverify.verified_bytes || 0;
writeSec += report.writeverify.write_duration_s || 0;
readSec += report.writeverify.read_duration_s || 0;
}
if (resWritten) {
resWritten.textContent = aggWriteBytes ? formatBytes(aggWriteBytes) : "–";
}
if (resVerified) {
resVerified.textContent = aggReadBytes ? formatBytes(aggReadBytes) : "–";
}
const avgWriteMbps = (aggWriteBytes && writeSec) ? formatMbps(aggWriteBytes, writeSec) : "–";
const avgReadMbps = (aggReadBytes && readSec) ? formatMbps(aggReadBytes, readSec) : "–";
if (resWriteSpeed) resWriteSpeed.textContent = avgWriteMbps;
if (resReadSpeed) resReadSpeed.textContent = avgReadMbps;
}
// --- Backend-Speicherung ------------------------------------------------
async function saveReportToBackend(report) {
// Absoluter Pfad – dein Script liegt oberhalb des public-Roots:
const url = "/api/result/browser-quick-test.php";
try {
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(report),
credentials: "include"
});
if (!response.ok) {
// 401 => nicht eingeloggt; 500 => Fehler etc.
const msg = "HTTP " + response.status;
logLine("Backend: Konnte Ergebnis nicht speichern (" + msg + ").", "warn");
if (response.status >= 500 && saveError) {
saveError.style.display = "block";
}
return;
}
const data = await response.json().catch(() => null);
logLine(
"Backend: Testergebnis gespeichert" +
(data && data.id ? ` (ID: ${data.id})` : ""),
"info"
);
} catch (err) {
if (saveError) saveError.style.display = "block";
logLine("Fehler beim Speichern im Backend: " + err.message, "error");
}
}
// --- Initialzustand -----------------------------------------------------
setStatus("Bereit. Wähle zuerst deinen USB-Stick aus.");
setModeLabel("Kein Modus selektiert");
setOverallStatus("ok", "Noch kein Test durchgeführt.");
logLine("USB-Browser-Test (fakecheck) geladen. Warte auf Verzeichnisauswahl und Modus.");
updateStartButtonState();
});

22
public/assets/js/header.js
View File

@@ -1,5 +1,19 @@
// public/assets/js/header.js
document.addEventListener('DOMContentLoaded', function () {
const supportedLangs = ['de', 'en', 'it', 'fr'];
function resolveCurrentLang() {
const url = new URL(window.location.href);
const urlLang = (url.searchParams.get('lang') || '').toLowerCase();
const docLang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
const globalLang = (window.currentLang || '').toLowerCase();
if (supportedLangs.includes(urlLang)) return urlLang;
if (supportedLangs.includes(globalLang)) return globalLang;
if (supportedLangs.includes(docLang)) return docLang;
return 'de';
}
// --------------------------------------------------
// LOGIN-BUTTON → /login mit redirect + lang
// --------------------------------------------------
@@ -13,12 +27,8 @@ document.addEventListener('DOMContentLoaded', function () {
const currentQuery = window.location.search || '';
const redirect = currentPath + currentQuery;
// Sprache aus dem Label oben ziehen, falls vorhanden
const langLabelEl = document.getElementById('langCurrentLabel');
let lang = 'de';
if (langLabelEl && langLabelEl.textContent) {
lang = langLabelEl.textContent.trim().toLowerCase();
}
// Sprache aus URL / globalem State ableiten
const lang = resolveCurrentLang();
// Wenn wir bereits auf /login sind → nur zum #auth scrollen
if (currentPath === '/login' || currentPath === '/login/') {