136 lines
6.2 KiB
PHP
136 lines
6.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="stylesheet" href="/assets/css/login.css">
|
|
<link rel="stylesheet" href="/assets/css/catbar.css">
|
|
<link rel="stylesheet" href="/assets/css/compcard.css">
|
|
<link rel="stylesheet" href="/assets/css/productpage.css">
|
|
<link rel="stylesheet" href="/assets/css/productAdder.css">
|
|
|
|
<link rel="icon" href="/assets/images/favicon.ico" sizes="any">
|
|
|
|
<!-- Prevent tap-highlight on mobile -->
|
|
<style>
|
|
* { -webkit-tap-highlight-color: transparent; }
|
|
/* Mobile menu overlay */
|
|
.nav__overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
.nav__overlay.show { display: block; opacity: 1; }
|
|
</style>
|
|
|
|
<title>Geizkragen</title>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Mobile overlay for hamburger menu -->
|
|
<div class="nav__overlay" id="nav-overlay"></div>
|
|
|
|
<header class="header" id="header">
|
|
<nav class="nav" aria-label="Hauptnavigation">
|
|
<a class="nav__logoLink" href="index.php">
|
|
<img class="nav__logo" src="/assets/images/logoText.png" alt="Geizkragen" width="150">
|
|
</a>
|
|
|
|
<!-- Desktop search (hidden on mobile via CSS) -->
|
|
<form class="nav__searchForm" action="index.php" method="GET" autocomplete="off">
|
|
<div class="nav__searchField">
|
|
<input class="nav__searchInput" type="text" id="search" name="search" placeholder="Produkte suchen…" inputmode="text">
|
|
</div>
|
|
</form>
|
|
|
|
<div class="nav__inner container">
|
|
<div class="nav__menu" id="nav-menu">
|
|
<!-- Mobile search (inside hamburger) -->
|
|
<form class="nav__searchForm nav__searchForm--mobile" action="index.php" method="GET" autocomplete="off">
|
|
<div class="nav__searchField">
|
|
<input class="nav__searchInput" type="text" name="search" placeholder="Produkte suchen…" inputmode="text">
|
|
</div>
|
|
</form>
|
|
|
|
<ul class="nav__list">
|
|
<li class="nav__item">
|
|
<a href="index.php" class="nav__link">Home</a>
|
|
</li>
|
|
<li class="nav__item nav__item--mobile">
|
|
<a href="wunschliste.php" class="nav__link">Wunschliste</a>
|
|
</li>
|
|
<li class="nav__item nav__item--mobile">
|
|
<a href="account.php" class="nav__link">Account</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="nav__close" id="nav-close" role="button" aria-label="Menü schließen" tabindex="0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav__actions">
|
|
<a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste">
|
|
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
<a class="nav__login" href="account.php" aria-label="Account">
|
|
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"/>
|
|
</svg>
|
|
</a>
|
|
<div class="nav__toggle" id="nav-toggle" role="button" aria-label="Menü öffnen" tabindex="0">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Hamburger Menu JS -->
|
|
<script>
|
|
(function() {
|
|
const toggle = document.getElementById('nav-toggle');
|
|
const close = document.getElementById('nav-close');
|
|
const menu = document.getElementById('nav-menu');
|
|
const overlay = document.getElementById('nav-overlay');
|
|
|
|
function openMenu() {
|
|
menu.classList.add('show-menu');
|
|
overlay.classList.add('show');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
function closeMenu() {
|
|
menu.classList.remove('show-menu');
|
|
overlay.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
if (toggle) toggle.addEventListener('click', openMenu);
|
|
if (close) close.addEventListener('click', closeMenu);
|
|
if (overlay) overlay.addEventListener('click', closeMenu);
|
|
|
|
// Close on Escape
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') closeMenu();
|
|
});
|
|
|
|
// Close menu on link click (mobile)
|
|
menu.querySelectorAll('.nav__link').forEach(function(link) {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
})();
|
|
</script>
|