89 lines
4.5 KiB
PHP
89 lines
4.5 KiB
PHP
<?php
|
|
// public/partials/header.php
|
|
?>
|
|
<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 -->
|
|
<div class="flex items-center gap-3">
|
|
<a href="/?lang=<?= htmlspecialchars($lang) ?>" class="flex items-center gap-3">
|
|
<img src="https://staging.usbcheck.it/assets/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">
|
|
usbcheck.it
|
|
</span>
|
|
<span class="text-xs text-brand-muted" data-i18n="header_slogan">
|
|
Test USB drives
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="flex items-center 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"></a>
|
|
<a href="#problem" class="hover:text-brand-primary transition-colors" data-i18n="nav_problem"></a>
|
|
<a href="#features" class="hover:text-brand-primary transition-colors" data-i18n="nav_features"></a>
|
|
<a href="#security" class="hover:text-brand-primary transition-colors" data-i18n="nav_security"></a>
|
|
<a href="#faq" class="hover:text-brand-primary transition-colors" data-i18n="nav_faq"></a>
|
|
</nav>
|
|
|
|
<div class="relative">
|
|
<button id="langCurrent"
|
|
type="button"
|
|
class="flex items-center gap-1 text-xs uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary transition">
|
|
<span id="langCurrentLabel"><?= strtoupper($lang) ?></span>
|
|
<svg class="w-3 h-3 opacity-70" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path d="M5 7l5 6 5-6" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="langMenu"
|
|
class="hidden absolute right-0 mt-2 w-20 rounded-xl bg-brand-surface border border-brand-border shadow-lg py-1 text-xs">
|
|
<button type="button"
|
|
class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
|
|
data-lang="de">
|
|
<span class="text-base">🇩🇪</span>
|
|
<span>DE</span>
|
|
</button>
|
|
<button type="button"
|
|
class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
|
|
data-lang="en">
|
|
<span class="text-base">🇬🇧</span>
|
|
<span>EN</span>
|
|
</button>
|
|
<button type="button"
|
|
class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
|
|
data-lang="it">
|
|
<span class="text-base">🇮🇹</span>
|
|
<span>IT</span>
|
|
</button>
|
|
<button type="button"
|
|
class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
|
|
data-lang="fr">
|
|
<span class="text-base">🇫🇷</span>
|
|
<span>FR</span>
|
|
</button>
|
|
|
|
</div>
|
|
</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-cyan-400 transition-colors"
|
|
data-i18n="header_btn_login">Login
|
|
</button>
|
|
|
|
<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><?= strtoupper(substr($userInitials ?? 'U', 0, 2)) ?></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|