https://osg-website-tamplate.vercel.app/script.js

1function initializePage() {
2    const burgerMenuButton = document.getElementById('burger-menu');
3    const overlay = document.getElementById('mobile-nav-overlay');
4    const toggleNav = () => {
5        const isExpanded = document.body.classList.toggle('mobile-nav-active');
6        burgerMenuButton.setAttribute('aria-expanded', isExpanded);
7    };
8    if (burgerMenuButton) burgerMenuButton.addEventListener('click', toggleNav);
9    if (overlay) overlay.addEventListener('click', toggleNav);
10
11    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
12    const navLinks = document.querySelectorAll('.nav-links a, .mobile-nav a');
13    navLinks.forEach(link => {
14        if (link.getAttribute('href') === currentPage) {
15            link.classList.add('active');
16        }
17    });
18
19    const currentYearSpan = document.getElementById('current-year');
20    if (currentYearSpan) currentYearSpan.textContent = new Date().getFullYear();
21    
22    const revealElements = document.querySelectorAll('.reveal');
23    const observer = new IntersectionObserver((entries) => {
24        entries.forEach(entry => {
25            if (entry.isIntersecting) {
26                entry.target.classList.add('visible');
27                observer.unobserve(entry.target);
28            }
29        });
30    }, { rootMargin: '0px', threshold: 0.1 });
31    revealElements.forEach(elem => observer.observe(elem));
32
33    if (document.body.classList.contains('menu-page')) {
34        const menuGrid = document.getElementById('menu-grid');
35        const menuFilters = document.getElementById('menu-filters');
36        
37        if (!menuGrid || !menuFilters) return;
38
39        // Hardcoded data replacing Supabase
40        let allMeals = [
41            { id: 1, category: 'Appetizers', name: 'Calamari', price: '$14.00', description: 'Crispy fried squid rings with marinara dipping sauce.', image: 'https://www.seriouseats.com/thmb/RLHQFr_lp9-HTIWBikzVwu4M17s=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/__opt__aboutcom__coeus__resources__

41content_migration__serious_eats__seriouseats.com__2020__11__20201125-fried-calamari-vicky-wasik-10-9cee3a081e96476b89e29b331d30be61.jpg' },
42            { id: 2, category: 'Appetizers', name: 'Bruschetta', price: '$10.00', description: 'Toasted baguette with fresh tomatoes, basil, and garlic.', image: 'https://www.thecookingtwins.com/wp-content/uploads/2025/09/tomato-basil-garlic-bread-featured.webp' },
43            { id: 3, category: 'Mains', name: 'Grilled Salmon', price: '$28.00', description: 'Fresh caught salmon with roasted asparagus and lemon butter.', image: 'https://cld.accentuate.io/560610476200/1688998268095/GP_Premiere_CountertopAirFryOven_AirFryerBasket_Overhead_SalmonRecipe_04-(1).jpg?v=1688998268095&options=w_870,h_700' },
44            { id: 4, category: 'Mains', name: 'Ribeye Steak', price: '$35.00', description: '12oz prime ribeye with garlic mashed potatoes.', image: 'https://preview.redd.it/prime-rib-w-au-jus-and-whipped-garlic-mashed-potato-v0-0k5fm0wzz8qa1.jpg?width=640&crop=smart&auto=webp&s=0fc4a3993a2df3316a366a8ddea28c87457b8cd8' },
45            { id: 5, category: 'Desserts', name: 'Tiramisu', price: '$9.00', description: 'Classic Italian dessert with espresso-soaked ladyfingers.', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVcjuc8qfiG1FTNked587JRoKi3HjCsNETMA&s' },
46            { id: 6, category: 'Beverages', name: 'Artisan Lemonade', price: '$5.00', description: 'House-made lemonade with a sprig of mint.', image: 'https://www.giverecipe.com/wp-content/uploads/2018/07/Mint-Lemonade-2.jpg' }
47        ];
48
49        const fallbackImage = 'https://via.placeholder.com/150x150.png/1a1a1a/888888?text=No+Image';
50
51        const displayMenuItems = (items) => {
52            menuGrid.innerHTML = '';
53            if (items.length === 0) {
54                menuGrid.innerHTML = '<p class="info-message">No items for this category.</p>';
55                return;
56            }
57            items.forEach(item => {
58                const card = document.createElement('div');
59                card.className = 'menu-card';
60                card.innerHTML = `
61                    <img src="${item.image || fallbackImage}" alt="${item.name}" class="card-img" loading="lazy" onerror="this.onerror=null; this.src='${fallbackImage}';">
62                    <div class="card-content">
63                        <div class="menu-card-header">
64                            <h3 class="card-title">${item.name}</h3>
65                            <span class="card-price">${item.price}</span>
66                        </div>
67                        <p class="card-description">${item.description}</p>
68                    </div>
69                `;
70                menuGrid.appendChild(card);
71            });
72        };
73
74        const loadMeals = () => {
75            // Immediately display the hardcoded data instead of fetching
76            displayMenuItems(allMeals);
77            const initialActiveFilter = document.querySelector('.menu-filters button[data-category="All"]');
78            if(initialActiveFilter) initialActiveFilter.classList.add('active-filter');
79        };
80
81        menuFilters.addEventListener('click', (e) => {
82            if (e.target.tagName === 'BUTTON') {
83                const currentActive = document.querySelector('.menu-filters button.active-filter');
84                if (currentActive) currentActive.classList.remove('active-filter');
85                e.target.classList.add('active-filter');
86                const category = e.target.dataset.category;
87                const filteredItems = category === 'All' ? allMeals : allMeals.filter(item => item.category === category);
88                displayMenuItems(filteredItems);
89            }
90        });
91        
92        loadMeals();
93    }
94}
95
96document.addEventListener('DOMContentLoaded', initializePage);