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

sitestructure

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-20 02:31:04 +01:00
parent 5ee3b9afab
commit 055f07a620
16 changed files with 617 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/assets/js/fakecheck.js Normal file
View File

@@ -0,0 +1,37 @@
// /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");
if (!startButton || !resultContainer || !resultOutput) return;
startButton.addEventListener("click", () => {
const now = new Date().toISOString();
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."
};
resultOutput.textContent = JSON.stringify(demoReport, null, 2);
resultContainer.classList.remove("hidden");
resultContainer.scrollIntoView({ behavior: "smooth", block: "start" });
});
});

168
public/fakecheck/index.php
View File

@@ -20,159 +20,25 @@ $scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https'
$host = $_SERVER['HTTP_HOST'] ?? 'usbcheck.it';
$baseUrl = $scheme . '://' . $host;
// 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';
require __DIR__ . '/../../src/functions.php';
$lang = $_GET['lang'] ?? 'en';
$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
// Basis-URL für Reports
$baseUrl = "https://usbcheck.it";
?>
<!-- Seiteigener JS-Placeholder für die spätere Web-App-Logik -->
<?php tpl('layout_start', 'structure'); ?>
<?php tpl('hero', 'landing', 'fakecheck'); ?>
<?php tpl('webcheck', 'landing', 'fakecheck'); ?>
<!-- JS-Einbindung -->
<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: "<?= htmlspecialchars($baseUrl . '/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" });
});
});
window.fakecheckBaseUrl = "<?= htmlspecialchars($baseUrl . '/fakecheck') ?>";
window.fakecheckLocale = "<?= htmlspecialchars($lang) ?>";
</script>
<script src="/assets/js/fakecheck.js?v=1"></script>
<?php tpl('layout_end', 'structure'); ?>

15
public/index.php
View File

@@ -1,4 +1,6 @@
<?php
require __DIR__ . '/../src/functions.php';
// Sprachlogik:
$lang = $_GET['lang'] ?? 'en';
$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
@@ -17,6 +19,19 @@ $navAnchors = [
[ 'href' => '#faq', 'key' => 'nav_faq' ],
];
tpl('layout_start'); // structure/header.php
?>
<?php tpl('hero', 'landing', 'main'); ?>
<?php tpl('how', 'landing', 'main'); ?>
<?php tpl('problem', 'landing', 'main'); ?>
<?php tpl('features', 'landing', 'main'); ?>
<?php tpl('security', 'landing', 'main'); ?>
<?php tpl('faq', 'landing', 'main'); ?>
tpl('layout_end'); // structure/footer.php
/*
// Layout-Start (Head, Body, Header, <main>)
require __DIR__ . '/partials/layout_start.php';
?>

234
public/index2.php
View File

@@ -1,234 +0,0 @@
<?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); ?>">
<head>
<meta charset="UTF-8">
<title>USBCheck – Test your USB drives</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts: Montserrat + Inter -->
<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">
<!-- Main stylesheet -->
<link rel="stylesheet" href="/assets/css/main.css?v=1">
</head>
<body data-current-lang="<?php echo htmlspecialchars($currentLang); ?>">
<?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>
</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>
</div>
<div class="metric">
<span class="metric-label" data-i18n="metric_integrity"></span>
<span class="metric-value">99.98%</span>
</div>
<div class="metric">
<span class="metric-label" data-i18n="metric_confidence"></span>
<span class="metric-value">✔</span>
</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">
</div>
</div>
</div>
</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>
<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>
</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>
<script src="/assets/js/lang.js?v=1"></script>
</body>
</html>