274 lines
No EOL
9.7 KiB
JavaScript
274 lines
No EOL
9.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mobile menu toggle
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
// Update button state
|
|
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
|
|
|
|
// Toggle icons
|
|
menuIconOpen.classList.toggle('hidden');
|
|
menuIconClosed.classList.toggle('hidden');
|
|
});
|
|
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
|
|
mobileMenu.classList.add('hidden');
|
|
mobileMenuButton.setAttribute('aria-expanded', 'false');
|
|
menuIconOpen.classList.remove('hidden');
|
|
menuIconClosed.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Theme toggle functionality
|
|
function updateTheme(isDark) {
|
|
const html = document.documentElement;
|
|
if (isDark) {
|
|
html.classList.add('dark');
|
|
} else {
|
|
html.classList.remove('dark');
|
|
}
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
}
|
|
|
|
// Desktop theme toggle
|
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
darkModeToggle.addEventListener('click', () => {
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
updateTheme(!isDark);
|
|
});
|
|
|
|
// Mobile theme toggle
|
|
const darkModeToggleMobile = document.getElementById('darkModeToggleMobile');
|
|
darkModeToggleMobile.addEventListener('click', () => {
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
updateTheme(!isDark);
|
|
});
|
|
|
|
// Initialize theme
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
updateTheme(savedTheme === 'dark');
|
|
} else {
|
|
// Default to dark theme
|
|
updateTheme(true);
|
|
}
|
|
|
|
// Header scroll behavior
|
|
const header = document.querySelector('header');
|
|
let lastScroll = 0;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (currentScroll <= 0) {
|
|
header.classList.remove('shadow-lg', 'bg-white/95', 'dark:bg-gray-900/95');
|
|
header.style.transform = 'translateY(0)';
|
|
return;
|
|
}
|
|
|
|
if (currentScroll > lastScroll && !header.contains(document.activeElement)) {
|
|
// Scrolling down
|
|
header.style.transform = 'translateY(-100%)';
|
|
} else {
|
|
// Scrolling up
|
|
header.style.transform = 'translateY(0)';
|
|
header.classList.add('shadow-lg', 'bg-white/95', 'dark:bg-gray-900/95');
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
|
|
// Menu tab functionality
|
|
const tabButtons = document.querySelectorAll('.tab-button');
|
|
const menuContents = document.querySelectorAll('.menu-content');
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// Remove active state from all buttons
|
|
tabButtons.forEach(btn => {
|
|
btn.classList.remove('bg-pizza-red', 'text-white');
|
|
btn.classList.add('bg-gray-200', 'dark:bg-pizza-darker', 'text-gray-700', 'dark:text-white');
|
|
});
|
|
|
|
// Add active state to clicked button
|
|
button.classList.remove('bg-gray-200', 'dark:bg-pizza-darker', 'text-gray-700', 'dark:text-white');
|
|
button.classList.add('bg-pizza-red', 'text-white');
|
|
|
|
// Hide all content sections
|
|
menuContents.forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// Show selected content
|
|
const targetContent = document.getElementById(`${button.dataset.tab}-content`);
|
|
targetContent.classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
// Price group toggles
|
|
const priceGroups = document.querySelectorAll('.price-group-header');
|
|
|
|
priceGroups.forEach(group => {
|
|
group.addEventListener('click', () => {
|
|
const content = group.nextElementSibling;
|
|
const arrow = group.querySelector('svg');
|
|
|
|
// Toggle content visibility
|
|
content.classList.toggle('hidden');
|
|
|
|
// Rotate arrow
|
|
if (content.classList.contains('hidden')) {
|
|
arrow.style.transform = 'rotate(0deg)';
|
|
} else {
|
|
arrow.style.transform = 'rotate(180deg)';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-expand first price group
|
|
const firstPriceGroup = document.querySelector('.price-group-header');
|
|
if (firstPriceGroup) {
|
|
firstPriceGroup.click();
|
|
}
|
|
|
|
// Legend hover effect
|
|
const legendContainer = document.querySelector('.legend-container');
|
|
const legend = legendContainer.querySelector('.price-legend');
|
|
|
|
legendContainer.addEventListener('mouseenter', () => {
|
|
legend.style.opacity = '0';
|
|
});
|
|
|
|
legendContainer.addEventListener('mouseleave', () => {
|
|
legend.style.opacity = '1';
|
|
});
|
|
|
|
// Smooth scroll for menu links
|
|
const menuLinks = document.querySelectorAll('a[href*="#menu-section"]');
|
|
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
console.log('Menu link clicked'); // Debug log
|
|
|
|
const menuSection = document.getElementById('menu-section');
|
|
if (menuSection) {
|
|
const headerHeight = document.querySelector('header').offsetHeight;
|
|
const menuPosition = menuSection.offsetTop - headerHeight;
|
|
|
|
window.scrollTo({
|
|
top: menuPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
} else {
|
|
console.error('Menu section not found'); // Debug log
|
|
}
|
|
});
|
|
});
|
|
|
|
// Language dropdown functionality
|
|
const languageButton = document.getElementById('languageButton');
|
|
const languageDropdown = document.getElementById('languageDropdown');
|
|
|
|
if (languageButton && languageDropdown) {
|
|
// Toggle dropdown
|
|
languageButton.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
languageDropdown.classList.toggle('hidden');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!languageButton.contains(e.target) && !languageDropdown.contains(e.target)) {
|
|
languageDropdown.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Close dropdown when clicking a language option
|
|
languageDropdown.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
languageDropdown.classList.add('hidden');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Auto-detect browser language
|
|
function detectLanguage() {
|
|
const browserLang = navigator.language.split('-')[0];
|
|
const supportedLangs = ['de', 'en']; // Add your supported languages here
|
|
|
|
if (!localStorage.getItem('userLanguage')) {
|
|
const detectedLang = supportedLangs.includes(browserLang) ? browserLang : 'de';
|
|
localStorage.setItem('userLanguage', detectedLang);
|
|
|
|
// Redirect if needed
|
|
const currentLang = document.documentElement.lang;
|
|
if (currentLang !== detectedLang) {
|
|
const newPath = window.location.pathname.replace(`/${currentLang}/`, `/${detectedLang}/`);
|
|
window.location.href = newPath;
|
|
}
|
|
}
|
|
}
|
|
|
|
detectLanguage();
|
|
|
|
function checkOpenStatus() {
|
|
const now = new Date();
|
|
const currentTime = now.toLocaleTimeString('de-DE', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
const currentDay = now.toLocaleDateString('de-DE', { weekday: 'long' });
|
|
|
|
// Get opening hours from data attributes
|
|
const hoursRows = document.querySelectorAll('.hours-row');
|
|
let isOpen = false;
|
|
|
|
hoursRows.forEach(row => {
|
|
const rowDay = row.dataset.day;
|
|
const openTime = row.dataset.open;
|
|
const closeTime = row.dataset.close;
|
|
|
|
// Convert times to comparable numbers (e.g., "14:30" -> 1430)
|
|
const currentNum = parseInt(currentTime.replace(':', ''));
|
|
const openNum = parseInt(openTime.replace(':', ''));
|
|
const closeNum = parseInt(closeTime.replace(':', ''));
|
|
|
|
if (rowDay === currentDay && currentNum >= openNum && currentNum <= closeNum) {
|
|
isOpen = true;
|
|
row.classList.add('border-2', 'border-status-green');
|
|
} else {
|
|
row.classList.remove('border-2', 'border-status-green');
|
|
}
|
|
});
|
|
|
|
// Update status bar
|
|
const statusBar = document.getElementById('status-bar');
|
|
const statusText = document.getElementById('status-text');
|
|
|
|
if (statusBar && statusText) {
|
|
if (isOpen) {
|
|
statusBar.classList.remove('bg-status-red');
|
|
statusBar.classList.add('bg-status-green');
|
|
statusText.textContent = statusText.dataset.textOpen;
|
|
} else {
|
|
statusBar.classList.remove('bg-status-green');
|
|
statusBar.classList.add('bg-status-red');
|
|
statusText.textContent = statusText.dataset.textClosed;
|
|
}
|
|
}
|
|
|
|
return { isOpen, currentDay, currentTime };
|
|
}
|
|
|
|
// Update status every minute
|
|
setInterval(checkOpenStatus, 60000);
|
|
// Initial check
|
|
checkOpenStatus();
|
|
});
|