119 lines
4.4 KiB
HTML
119 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{% block title %}Schmankerl – Das moderne Brotzeit-Portal{% endblock %}</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<link rel="icon" href="https://new.dev.waiswuaschd.de/favicon.ico">
|
||
<script>
|
||
(function() {
|
||
const savedTheme = localStorage.getItem('schmankerl_theme');
|
||
const theme = savedTheme ? savedTheme : 'light';
|
||
document.documentElement.setAttribute('data-theme', theme);
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="navbar">
|
||
<div class="container nav-content">
|
||
<a href="/" class="brand">
|
||
🥨 <span>Schmankerl</span> <small class="tenant-badge">{{ tenant.name if tenant else 'Portal' }}</small>
|
||
</a>
|
||
|
||
<div class="nav-right-cluster">
|
||
<!-- Theme Switcher -->
|
||
<button type="button" class="theme-toggle-btn" id="themeToggleBtn" onclick="toggleTheme()" title="Design umschalten (Hell / Dunkel)">
|
||
<span id="themeToggleIcon">🌙</span> <span id="themeToggleLabel" class="hide-mobile">Dunkel</span>
|
||
</button>
|
||
|
||
<!-- Mobile Hamburger Toggle -->
|
||
<button class="mobile-toggle" aria-label="Menü öffnen" id="mobileNavToggle" aria-expanded="false">
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="nav-links" id="navLinks">
|
||
{% if current_user %}
|
||
<a href="/" class="nav-item">🥨 Bestellen</a>
|
||
<a href="/einkauf" class="nav-item nav-einkauf-link">🛒 Einkaufsliste & Kasse</a>
|
||
{% if current_user.role == 'admin' %}
|
||
<a href="/admin" class="nav-item nav-admin">⚙️ Orga & Admin</a>
|
||
{% endif %}
|
||
<span class="user-greeting">👤 {{ current_user.first_name }}</span>
|
||
<a href="/logout" class="nav-item nav-logout">Abmelden</a>
|
||
{% else %}
|
||
<a href="/login" class="nav-item nav-login">Anmelden</a>
|
||
{% endif %}
|
||
<a href="https://new.dev.waiswuaschd.de" target="_blank" class="nav-item nav-home">Zur Plattform</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container footer-inner">
|
||
<p>© 2026 Schmankerl by <a href="https://new.dev.waiswuaschd.de">Waiswuaschd.de</a></p>
|
||
<div class="footer-tenant-info">
|
||
Mandant: <strong>{{ tenant.slug if tenant else 'demo' }}</strong> ({{ tenant.subdomain if tenant else '' }})
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Theme Toggle Logic
|
||
function updateThemeUI(theme) {
|
||
const icon = document.getElementById('themeToggleIcon');
|
||
const label = document.getElementById('themeToggleLabel');
|
||
if (theme === 'dark') {
|
||
if (icon) icon.innerText = '☀️';
|
||
if (label) label.innerText = 'Hell';
|
||
} else {
|
||
if (icon) icon.innerText = '🌙';
|
||
if (label) label.innerText = 'Dunkel';
|
||
}
|
||
}
|
||
|
||
function toggleTheme() {
|
||
const current = document.documentElement.getAttribute('data-theme') || 'light';
|
||
const next = current === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', next);
|
||
localStorage.setItem('schmankerl_theme', next);
|
||
updateThemeUI(next);
|
||
}
|
||
|
||
// Initialize Theme UI on load
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const current = document.documentElement.getAttribute('data-theme') || 'light';
|
||
updateThemeUI(current);
|
||
|
||
// Mobile Nav Drawer Toggle
|
||
const navToggle = document.getElementById('mobileNavToggle');
|
||
const navLinks = document.getElementById('navLinks');
|
||
if (navToggle && navLinks) {
|
||
navToggle.addEventListener('click', () => {
|
||
const isOpen = navLinks.classList.toggle('open');
|
||
navToggle.classList.toggle('open', isOpen);
|
||
navToggle.setAttribute('aria-expanded', isOpen);
|
||
document.body.style.overflow = isOpen ? 'hidden' : '';
|
||
});
|
||
navLinks.querySelectorAll('a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
navLinks.classList.remove('open');
|
||
navToggle.classList.remove('open');
|
||
navToggle.setAttribute('aria-expanded', 'false');
|
||
document.body.style.overflow = '';
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|