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

com

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-19 00:49:53 +01:00
parent 553fefbeaa
commit 0834e1f733
12 changed files with 725 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
public/index.php
View File

@@ -1,124 +1,42 @@
<?php
// public/index.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>USBCheck – Test USB-Sticks auf Fakes</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
// Sprachlogik:
$lang = $_GET['lang'] ?? 'en';
$lang = in_array($lang, ['de','en','it','fr']) ? $lang : 'en';
<meta name="description" content="Prüfe deine USB-Sticks auf Fakes, langsame Geschwindigkeit und Datenverlust. USBCheck bietet einen kostenlosen Browser-Schnelltest und einen Pro-Modus für Profis.">
// User-Dummy (später über Login ersetzen)
$userInitials = null;
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($lang) ?>">
<head>
<meta charset="UTF-8">
<title>usbcheck.it – Test USB-Sticks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Description -->
<meta name="description" content="Prüfe deine USB-Sticks auf Geschwindigkeit, Integrität und mögliche Fakes – direkt im Browser.">
<!-- Fonts -->
<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@300;400;500;600&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
<!-- Tailwind CDN (für Dev; später durch eigenes CSS ersetzbar) -->
<!-- Tailwind (Dev) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
heading: ['Montserrat', 'system-ui', 'sans-serif'],
},
colors: {
brand: {
bg: '#1A1A1A', // deep_gray
surface: '#232323', // dunkles Panel
primary: '#0051FF', // brand_blue
primarySoft: '#0b1535',
text: '#FAFAFA',
muted: '#C8CBD0', // silver
border: '#333333',
}
},
boxShadow: {
'soft': '0 18px 45px rgba(0,0,0,0.55)',
},
borderRadius: {
'xl2': '1.25rem',
}
}
}
}
</script>
<!-- Language JS -->
<script src="/assets/js/lang.js?v=1" defer></script>
</head>
<body class="bg-brand-bg text-brand-text font-sans antialiased scroll-smooth">
<!-- Page Wrapper -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="sticky top-0 z-40 border-b border-brand-border/70 backdrop-blur bg-brand-bg/85">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<!-- Logo & Brand -->
<div class="flex items-center gap-3">
<a href="#hero" class="flex items-center gap-3">
<!-- Logo Pfad: public/img/logo_slogan.png -->
<img src="/img/logo_slogan.png" alt="usbcheck.it Logo" class="h-9 w-auto">
<div class="hidden sm:flex flex-col leading-tight">
<span class="font-heading font-bold text-sm uppercase tracking-[0.18em] text-brand-muted" data-i18n="brand_wordmark">
usbcheck.it
</span>
<span class="text-xs text-brand-muted" data-i18n="brand_subtitle">
Test USB drives for fakes
</span>
</div>
</a>
</div>
<!-- Navigation + Lang + Login -->
<div class="flex items-center gap-4 sm:gap-6">
<nav class="hidden md:flex items-center gap-6 text-xs font-medium text-brand-muted uppercase tracking-[0.18em]">
<a href="#how" class="hover:text-brand-primary transition-colors" data-i18n="nav_how">
How it works
</a>
<a href="#problem" class="hover:text-brand-primary transition-colors" data-i18n="nav_problem">
Why it matters
</a>
<a href="#features" class="hover:text-brand-primary transition-colors" data-i18n="nav_features">
Features
</a>
<a href="#security" class="hover:text-brand-primary transition-colors" data-i18n="nav_security">
Security
</a>
<a href="#faq" class="hover:text-brand-primary transition-colors" data-i18n="nav_faq">
FAQ
</a>
</nav>
<!-- HEADER -->
<?php include __DIR__ . "/partials/header.php"; ?>
<!-- Language Switch -->
<div class="flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-brand-muted">
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="de">DE</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="en">EN</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="it">IT</button>
<button class="lang-pill px-2 py-1 rounded-full border border-transparent hover:border-brand-primary hover:text-brand-primary transition-colors"
data-lang="fr">FR</button>
</div>
<!-- Login Button / Avatar -->
<button id="loginButton"
class="relative inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-brand-bg shadow-soft hover:bg-blue-400 transition-colors">
<span id="loginLabel" data-i18n="btn_login">Login</span>
</button>
<!-- Avatar (wird per JS ein-/ausgeblendet) -->
<button id="userAvatar"
class="hidden h-9 w-9 rounded-full border border-brand-border bg-brand-surface flex items-center justify-center text-xs font-semibold text-brand-text shadow-soft hover:border-brand-primary transition"
aria-label="Mein Konto">
<span id="avatarInitials">UC</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<!-- MAIN CONTENT -->
<main class="flex-1">
<!-- Hero -->
<section id="hero" class="relative overflow-hidden">
@@ -512,20 +430,11 @@
</section>
</main>
<!-- Footer -->
<footer class="border-t border-brand-border/70">
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-brand-muted">
<p data-i18n="footer_copy">© <?php echo date('Y'); ?> usbcheck.it. All rights reserved.</p>
<div class="flex items-center gap-4">
<a href="/impressum.php" class="hover:text-brand-primary transition-colors" data-i18n="footer_imprint">Impressum</a>
<a href="/datenschutz.php" class="hover:text-brand-primary transition-colors" data-i18n="footer_privacy">Datenschutz</a>
</div>
</div>
</footer>
<!-- FOOTER -->
<?php include __DIR__ . "/partials/footer.php"; ?>
</div>
<!-- I18n + Login/Avatar Logic -->
<script src="/assets/js/lang.js?v=1"></script>
<script src="/assets/js/header.js"></script>
</body>
</html>
</html>