Update website to display generic boxes instead of food items

Modify frontend scripts and HTML to replace product images, descriptions, and category buttons with numbered boxes on the main and order pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 375ec6d3-d5af-4f82-ab81-5c60fd4a86a3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b4050a62-9d16-40a7-9418-9ae14f0e5748
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/147e665c-8c0d-48ec-b0ad-fdc89cd4460f/375ec6d3-d5af-4f82-ab81-5c60fd4a86a3/RIQnnSl
Replit-Helium-Checkpoint-Created: true

js/replit-webflow-compat.js

@@ -10,4 +10,53 @@
       event.preventDefault();
     }
   });
+
+  function simplifyMenuBoxes() {
+    const path = window.location.pathname;
+    const isMainPage = path === '/' || path.endsWith('/index.html');
+    const isOrderPage = path.endsWith('/order.html');
+    if (!isMainPage && !isOrderPage) return;
+
+    const limit = isOrderPage ? 8 : 4;
+    const tabs = document.querySelector('.w-tabs');
+    if (!tabs) return;
+
+    const tabMenu = tabs.querySelector('.tab-menu-round');
+    if (tabMenu) tabMenu.remove();
+
+    const items = Array.from(tabs.querySelectorAll('.menu-item'));
+    const selectedItems = items.slice(0, limit);
+    const firstPane = tabs.querySelector('.w-tab-pane');
+    const firstList = firstPane && firstPane.querySelector('.w-dyn-items');
+    if (!firstPane || !firstList) return;
+
+    tabs.querySelectorAll('.w-tab-pane').forEach((pane, index) => {
+      if (index === 0) {
+        pane.classList.add('w--tab-active');
+        pane.style.display = 'block';
+      } else {
+        pane.remove();
+      }
+    });
+
+    firstList.innerHTML = '';
+    selectedItems.forEach((item, index) => {
+      item.querySelectorAll('.food-image-square, .paragraph').forEach(element => element.remove());
+      item.querySelectorAll('.quantity').forEach(element => {
+        element.type = 'hidden';
+      });
+      const title = item.querySelector('h6');
+      if (title) title.textContent = `box${index + 1}`;
+      item.querySelectorAll('a[href]').forEach(link => link.removeAttribute('href'));
+      firstList.appendChild(item);
+    });
+
+    firstPane.querySelectorAll('.pagination').forEach(element => element.remove());
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', simplifyMenuBoxes);
+  } else {
+    simplifyMenuBoxes();
+  }
 })();

order.html

@@ -1358,69 +1358,39 @@
       }
     });
 
-    // Fallback products for when API fails due to security restrictions
     function showFallbackProducts() {
-      console.log('Showing fallback products due to security restrictions');
-      const fallbackProducts = [
-        {
-          _id: '1',
-          name: 'Classic Burger',
-          description: 'Juicy beef patty with lettuce, tomato, onion, and our special sauce',
-          price: 12.99,
-          image: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=300'
-        },
-        {
-          _id: '2', 
-          name: 'Margherita Pizza',
-          description: 'Fresh mozzarella, tomato sauce, and basil on our signature crust',
-          price: 15.99,
-          image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?w=300'
-        },
-        {
-          _id: '3',
-          name: 'Caesar Salad',
-          description: 'Crisp romaine lettuce with parmesan cheese, croutons, and Caesar dressing',
-          price: 8.99,
-          image: 'https://images.unsplash.com/photo-1550304943-4f24f54ddde9?w=300'
-        }
-      ];
-      
-      displayProducts(fallbackProducts);
-      
-      // Show security notice
-      const notice = document.createElement('div');
-      notice.style.cssText = 'background: #f44336; color: white; padding: 15px; margin: 20px; border-radius: 5px; text-align: center;';
-      notice.innerHTML = '🔒 API blocked by browser security. Showing demo products. In production, use HTTPS to enable full functionality.';
-      document.querySelector('.container').prepend(notice);
+      displayProducts([]);
     }
 
-    // Function to display products in the grid
     function displayProducts(products) {
-      // Find the active tab pane (Burgers tab is currently active)
       const productGrid = document.querySelector('.w-tab-pane.w--tab-active .order-collection');
       if (!productGrid) {
         console.error('Active tab product grid not found');
         return;
       }
 
-      // Clear existing products
       productGrid.innerHTML = '';
 
-      products.forEach(product => {
+      const boxes = Array.from({ length: 8 }, (_, index) => {
+        const product = products[index] || {};
+        return {
+          _id: product._id || `box-${index + 1}`,
+          name: `box${index + 1}`,
+          price: Number(product.price || 0)
+        };
+      });
+
+      boxes.forEach(product => {
         const productHTML = `
           <div class="menu-item w-dyn-item w-col w-col-6" role="listitem">
             <div class="food-card">
-              <div class="food-image-square w-inline-block">
-                <img alt="${product.name}" class="food-image" src="${product.image}" />
-              </div>
               <div class="food-card-content">
                 <div class="food-title-wrap w-inline-block">
                   <h6>${product.name}</h6>
                   <div class="price">$${product.price.toFixed(2)} USD</div>
                 </div>
-                <p class="paragraph">${product.description}</p>
                 <div class="add-to-cart">
-                  <input class="quantity" type="number" min="1" value="1" id="quantity-${product._id}" />
+                  <input class="quantity" type="hidden" min="1" value="1" id="quantity-${product._id}" />
                   <button class="order-button w-button add-to-cart-btn" 
                           data-product-id="${product._id}" 
                           data-product-name="${product.name}">

replit.md

@@ -12,4 +12,5 @@
 
 ## Important Notes
 - Run backend commands from the `backend/` directory so static files resolve correctly.
-- The frontend API helper uses relative same-origin `/api` URLs when served over HTTP.
+- The frontend API helper uses relative same-origin `/api` URLs when served over HTTP.
+- User preference: never change the site's colors unless explicitly requested; only change objects/content/layout.