From 7bc5033b17bb3d45d6172ef3096aeb1f104d6b7a Mon Sep 17 00:00:00 2001
From: tornikegerantia <57709793-tornikegerantia@users.noreply.replit.com>
Date: Tue, 14 Apr 2026 21:21:58 +0000
Subject: [PATCH] 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 | 49 +++++++++++++++++++++++++++++++++
 order.html                  | 54 +++++++++----------------------------
 replit.md                   |  3 ++-
 3 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/js/replit-webflow-compat.js b/js/replit-webflow-compat.js
index 7949b97..ddec5f9 100644
--- a/js/replit-webflow-compat.js
+++ b/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();
+  }
 })();
\ No newline at end of file
diff --git a/order.html b/order.html
index 0826178..329e0dc 100644
--- a/order.html
+++ b/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}">
diff --git a/replit.md b/replit.md
index e70168e..a63d163 100644
--- a/replit.md
+++ b/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.
\ No newline at end of file
+- 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.
\ No newline at end of file