Update templates/menu_page.html

templates/menu_page.html

@@ -22,7 +22,7 @@
             box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
             text-align: center;
             width: 80%;
-            max-width: 600px;
+            max-width: 900px;
         }
         h1 {
             color: #333;
@@ -49,23 +49,28 @@
             margin-top: 10px;
             color: #666;
         }
+        .menu-items-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
         .menu-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-bottom: 20px;
-            padding: 15px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
             background-color: #f9f9f9;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+            text-align: left;
         }
         .menu-item h3 {
-            font-size: 1.5rem;
+            font-size: 1.8rem;
             color: #333;
+            margin-bottom: 10px;
         }
         .menu-item p {
             font-size: 1rem;
             color: #555;
+            margin: 5px 0;
         }
         .order-btn {
             background-color: #28a745;
@@ -85,7 +90,7 @@
 
     <div class="container">
         <h1>Welcome to the Menu</h1>
-        <div id="menu-items">
+        <div id="menu-items" class="menu-items-container">
             <!-- Menu items will be populated here dynamically -->
         </div>
 
@@ -114,9 +119,9 @@
                     menuItemDiv.classList.add('menu-item');
                     menuItemDiv.innerHTML = `
                         <h3>${item.name}</h3>
-                        <p>Price: $${item.price}</p>
-                        <p>Ingredients: ${item.ingredients}</p>
-                        <p>Category: ${item.category}</p>
+                        <p><strong>Price:</strong> $${item.price}</p>
+                        <p><strong>Ingredients:</strong> ${item.ingredients}</p>
+                        <p><strong>Category:</strong> ${item.category}</p>
                         <button class="order-btn" data-item="${item.name}">Order</button>
                     `;
                     menuItemsContainer.appendChild(menuItemDiv);  // Add item to the container