235 lines
9.3 KiB
PHP
235 lines
9.3 KiB
PHP
<?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>© <?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>
|