Update templates/menu.html

templates/menu.html

@@ -880,6 +880,7 @@
         </a>
     </div>
 
+    <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -888,51 +889,41 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image">
+                    <!-- Item Image -->
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                    <!-- Item Name -->
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
+                    <!-- Item Price -->
                     <p id="modal-price" class="text-muted text-center"></p>
+                    <!-- Item Description -->
                     <p id="modal-description" class="text-secondary"></p>
-                    <p class="nutritional-info" id="modal-nutritional-info"></p>
-
-                    <div id="first-row">
-                        <h6 id="first-row-title" style="display: none;">Customization Options</h6>
-                        <div class="addon-section">
-                            <h6>Choose Preparation Style</h6>
-                            <div id="prep-style-options"></div>
-                        </div>
-                        <div class="addon-section">
-                            <h6>Type</h6>
-                            <div id="type-options"></div>
-                        </div>
-                        <div class="addon-section">
-                            <h6>Spice Level</h6>
-                            <div id="spice-level-options"></div>
-                        </div>
-                    </div>
-
+                    <!-- Add-ons -->
                     <div id="modal-addons" class="modal-addons mt-4">
-                        <h6 id="addons-title">Customization Options</h6>
+                        <h6>Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-
                     <div class="mt-4">
                         <h6>Custom Request</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
+                <!-- Quantity Controls and Add to Cart Button -->
                 <div class="modal-footer d-flex align-items-center justify-content-between">
+                    <!-- Quantity Controls -->
                     <div class="d-flex align-items-center gap-2">
                         <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
                         <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
                         <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
+                    <!-- Add to Cart Button -->
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         // Video Handling Functions