Update templates/menu.html

templates/menu.html

@@ -358,21 +358,23 @@
         #softDrinkModal .modal-dialog {
             max-width: 400px;
             margin: 1.75rem auto;
+            animation: fadeInModal 0.3s ease-out;
         }
         #softDrinkModal .modal-content {
-            border-radius: 10px;
+            border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
             background-color: #fff;
+            overflow: hidden;
         }
         #softDrinkModal .modal-header {
             background: linear-gradient(45deg, #FFA07A, #FFB347);
-            border-top-left-radius: 10px;
-            border-top-right-radius: 10px;
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
             padding: 12px 15px;
             border-bottom: none;
         }
         #softDrinkModal .modal-title {
-            font-size: 1.25rem;
+            font-size: 1.3rem;
             font-weight: 600;
             color: #fff;
         }
@@ -381,38 +383,45 @@
             text-align: center;
         }
         #softDrinkModal .modal-body img {
-            max-height: 150px;
+            max-height: 160px;
             width: 100%;
             object-fit: cover;
             border-radius: 8px;
             margin-bottom: 15px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
         }
         #softDrinkModal .modal-body h5 {
-            font-size: 1.3rem;
+            font-size: 1.4rem;
             font-weight: 600;
             color: #333333;
             margin-bottom: 10px;
         }
         #softDrinkModal .modal-body p {
-            font-size: 1.1rem;
+            font-size: 1.2rem;
             font-weight: 500;
             color: #000000;
             margin-bottom: 20px;
         }
+        #softDrinkModal .modal-body p::before {
+            content: '$';
+            color: #FFA07A;
+            font-weight: 600;
+            margin-right: 2px;
+        }
         #softDrinkModal .quantity-controls {
             display: flex;
             justify-content: center;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
             margin-bottom: 20px;
         }
         #softDrinkModal .quantity-controls .btn {
-            width: 30px;
-            height: 30px;
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1rem;
-            line-height: 30px;
+            font-size: 1.1rem;
+            line-height: 32px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
@@ -428,12 +437,12 @@
         }
         #softDrinkModal .quantity-controls input {
             width: 50px;
-            height: 30px;
+            height: 32px;
             text-align: center;
             font-size: 1rem;
             font-weight: 600;
             border: 1px solid #ced4da;
-            border-radius: 5px;
+            border-radius: 6px;
             background-color: #f8f9fa;
         }
         #softDrinkModal .modal-footer {
@@ -446,8 +455,8 @@
         #softDrinkModal .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            padding: 10px 25px;
-            font-size: 1rem;
+            padding: 12px 30px;
+            font-size: 1.1rem;
             font-weight: 600;
             border-radius: 8px;
             transition: background-color 0.2s ease, transform 0.1s ease;
@@ -463,15 +472,15 @@
         }
         #softDrinkModal .modal-footer .quantity-controls-footer {
             display: flex;
-            gap: 10px;
+            gap: 12px;
         }
         #softDrinkModal .modal-footer .quantity-controls-footer .btn {
-            width: 30px;
-            height: 30px;
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1rem;
-            line-height: 30px;
+            font-size: 1.1rem;
+            line-height: 32px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
@@ -485,6 +494,60 @@
         #softDrinkModal .modal-footer .quantity-controls-footer .btn:active {
             transform: scale(0.95);
         }
+        /* Toggle Styling */
+        .toggle-container {
+            display: inline-flex;
+            align-items: center;
+            margin: 0 15px;
+            gap: 8px;
+        }
+        .custom-toggle {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 40px;
+            height: 20px;
+            background: #e9ecef;
+            border-radius: 20px;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+            transition: background-color 0.2s ease;
+        }
+        .custom-toggle:checked {
+            background: #0FAA39;
+        }
+        .custom-toggle::before {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #fff;
+            top: 2px;
+            left: 2px;
+            transition: transform 0.2s ease;
+        }
+        .custom-toggle:checked::before {
+            transform: translateX(20px);
+        }
+        .toggle-container label {
+            font-size: 1rem;
+            font-weight: 500;
+            color: #333;
+            cursor: pointer;
+        }
+        #filter-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #filter-form .form-label {
+            font-size: 1.2rem;
+            color: #333;
+        }
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -497,6 +560,10 @@
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        @keyframes fadeInModal {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
@@ -626,31 +693,6 @@
         .toggle-details:hover {
             text-decoration: underline;
         }
-        .category-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            justify-content: center;
-            margin-top: 10px;
-        }
-        .category-button {
-            background-color: #fff;
-            border: 2px solid #0FAA39;
-            color: #0FAA39;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .category-button.selected {
-            background-color: #0FAA39;
-            color: #fff;
-            border-color: #0FAA39;
-        }
-        .category-button:hover {
-            background-color: #e6f4ea;
-        }
         .quantity-selector {
             display: flex;
             align-items: center;
@@ -816,13 +858,6 @@
                 padding: 12px 16px;
                 font-size: 15px;
             }
-            .category-buttons {
-                gap: 8px;
-            }
-            .category-button {
-                padding: 4px 12px;
-                font-size: 0.85rem;
-            }
             .modal-dialog {
                 max-width: 90%;
                 margin: 10px auto;
@@ -970,23 +1005,23 @@
                 max-width: 90%;
             }
             #softDrinkModal .modal-content {
-                border-radius: 8px;
+                border-radius: 10px;
             }
             #softDrinkModal .modal-header {
                 padding: 10px 12px;
             }
             #softDrinkModal .modal-title {
-                font-size: 1.1rem;
+                font-size: 1.2rem;
             }
             #softDrinkModal .modal-body {
                 padding: 15px;
             }
             #softDrinkModal .modal-body img {
-                max-height: 120px;
-                margin-bottom: 10px;
+                max-height: 130px;
+                margin-bottom: 12px;
             }
             #softDrinkModal .modal-body h5 {
-                font-size: 1.1rem;
+                font-size: 1.2rem;
                 margin-bottom: 8px;
             }
             #softDrinkModal .modal-body p {
@@ -994,28 +1029,52 @@
                 margin-bottom: 15px;
             }
             #softDrinkModal .quantity-controls .btn {
-                width: 25px;
-                height: 25px;
-                font-size: 0.9rem;
-                line-height: 25px;
+                width: 28px;
+                height: 28px;
+                font-size: 1rem;
+                line-height: 28px;
             }
             #softDrinkModal .quantity-controls input {
-                width: 40px;
-                height: 25px;
+                width: 45px;
+                height: 28px;
                 font-size: 0.9rem;
             }
             #softDrinkModal .modal-footer {
                 padding: 10px;
             }
             #softDrinkModal .modal-footer .btn-primary {
-                padding: 8px 20px;
-                font-size: 0.9rem;
+                padding: 10px 25px;
+                font-size: 1rem;
             }
             #softDrinkModal .modal-footer .quantity-controls-footer .btn {
-                width: 25px;
-                height: 25px;
+                width: 28px;
+                height: 28px;
+                font-size: 1rem;
+                line-height: 28px;
+            }
+            /* Mobile-Specific Toggle Styles */
+            .toggle-container {
+                margin: 0 10px;
+                gap: 6px;
+            }
+            .custom-toggle {
+                width: 36px;
+                height: 18px;
+            }
+            .custom-toggle::before {
+                width: 14px;
+                height: 14px;
+                top: 2px;
+                left: 2px;
+            }
+            .custom-toggle:checked::before {
+                transform: translateX(18px);
+            }
+            .toggle-container label {
                 font-size: 0.9rem;
-                line-height: 25px;
+            }
+            #filter-form .form-label {
+                font-size: 1.1rem;
             }
         }
     </style>
@@ -1039,15 +1098,22 @@
         </div>
     </div>
 
-    <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
-        <label class="form-label fw-bold">Select a Category:</label>
-        <div class="category-buttons">
-            {% for category in categories %}
-                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" data-category="{{ category }}">{{ category }}</button>
-            {% endfor %}
-            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
+    <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
+        <label class="form-label fw-bold">Filters:</label>
+        <div class="toggle-container">
+            <!-- Veg Only Toggle -->
+            <input type="checkbox" id="veg-toggle" name="veg"
+                {% if selected_category == "Veg" %}checked{% endif %}
+                class="custom-toggle" onchange="handleToggle('veg')">
+            <label for="veg-toggle">Veg</label>
+        </div>
+        <div class="toggle-container">
+            <!-- Customized Dish Toggle -->
+            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+                {% if selected_category == "Customized Dish" %}checked{% endif %}
+                class="custom-toggle" onchange="handleToggle('custom')">
+            <label for="category-CustomizedDish">Customized Dish</label>
         </div>
-        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
 
     <div class="container mt-4">
@@ -1098,7 +1164,7 @@
                                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                                                 <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
                                             </div>
-                                            <div class="d-flex flex-column align-item-center justify-content-center">
+                                            <div class="d-flex flex-column align-items-center justify-content-center">
                                                 <div class="button-container" 
                                                      data-item-name="{{ item.Name | default('Unnamed Item') }}" 
                                                      data-item-price="{{ item.Price__c | default('0.00') }}" 
@@ -1130,7 +1196,7 @@
                                             <h6>Description</h6>
                                             <p>{{ item.Description__c | default('No description available') }}</p>
                                             <h6>Ingredients</h6>
-                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
+                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
                                             <h6>Nutritional Info</h6>
                                             <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
                                             <h6>Allergens</h6>
@@ -1206,17 +1272,17 @@
                         <p id="soft-drink-price"></p>
                     </div>
                     <div class="quantity-controls">
-                        <button type="button" class="btn" id="soft-drink-decrease">-</button>
-                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly>
-                        <button type="button" class="btn" id="soft-drink-increase">+</button>
+                        <button type="button" class="btn" id="soft-drink-decrease" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-</button>
+                        <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly aria-label="Selected quantity">
+                        <button type="button" class="btn" id="soft-drink-increase" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+</button>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <div class="quantity-controls-footer">
-                        <button type="button" class="btn" id="soft-drink-decrease-footer" onclick="updateSoftDrinkQuantity(-1)">-1</button>
-                        <button type="button" class="btn" id="soft-drink-increase-footer" onclick="updateSoftDrinkQuantity(1)">+1</button>
+                        <button type="button" class="btn" id="soft-drink-decrease-footer" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-1</button>
+                        <button type="button" class="btn" id="soft-drink-increase-footer" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+1</button>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" aria-label="Add soft drink to cart">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -1316,7 +1382,7 @@
             const itemImage = buttonContainer.getAttribute('data-item-image');
             
             document.getElementById('soft-drink-name').textContent = itemName;
-            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-price').textContent = `${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
             document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
             
@@ -1543,6 +1609,34 @@
                 isProcessingRequest = false;
             });
         }
+        function handleToggle(source) {
+            const form = document.getElementById("filter-form");
+            const veg = document.getElementById("veg-toggle");
+            const custom = document.getElementById("category-CustomizedDish");
+
+            if (source === 'veg') {
+                // If Veg is being turned ON, turn OFF Customized Dish
+                if (veg.checked) {
+                    custom.checked = false;
+                }
+            } else if (source === 'custom') {
+                // If Customized Dish is being turned ON, turn OFF Veg
+                if (custom.checked) {
+                    veg.checked = false;
+                }
+            }
+
+            // If Customized Dish is turned OFF manually, check Veg toggle and show all items if Veg is also off
+            if (!custom.checked) {
+                // If both are off, show all items
+                if (!veg.checked) {
+                    document.getElementById('category-CustomizedDish').checked = false;  // Ensure Customized Dish is OFF
+                }
+            }
+
+            // Submit form after toggling
+            form.submit();
+        }
         document.addEventListener('DOMContentLoaded', function () {
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
@@ -1625,8 +1719,15 @@
                         const video = entry.target;
                         const src = video.getAttribute('data-src');
                         if (src && !video.querySelector('source[src="' + src + '"]')) {
-                            const source = video.querySelector('source');
-                            source.src = src;
+                            const nextSibling = video.nextElementSibling;
+                            if (nextSibling && nextSibling.tagName === 'SOURCE') {
+                                nextSibling.src = src;
+                            } else {
+                                const source = video.querySelector('source');
+                                if (source) {
+                                    source.src = src;
+                                }
+                            }
                             video.load();
                         }
                         video.classList.add('loaded');
@@ -1664,21 +1765,6 @@
                     }
                 });
             });
-            const categoryButtons = document.querySelectorAll('.category-button');
-            const categoryForm = document.getElementById('categoryForm');
-            const selectedCategoryInput = document.getElementById('selectedCategoryInput');
-            if (!selectedCategoryInput.value) {
-                selectedCategoryInput.value = "All";
-                document.querySelector('.category-button[data-category="All"]').classList.add('selected');
-            }
-            categoryButtons.forEach(button => {
-                button.addEventListener('click', function () {
-                    categoryButtons.forEach(btn => btn.classList.remove('selected'));
-                    this.classList.add('selected');
-                    selectedCategoryInput.value = this.getAttribute('data-category');
-                    categoryForm.submit();
-                });
-            });
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
             if (descriptionTextarea && descriptionSuggestions) {
@@ -1763,51 +1849,19 @@
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
             decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    quantityInput.value = currentQuantity;
-                }
+                let quantity = parseInt(quantityInput.value) || 1;
+                quantity = Math.max(1, quantity - 1);
+                quantityInput.value = quantity;
             });
             increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity < 500) {
-                    currentQuantity++;
-                    quantityInput.value = currentQuantity;
-                }
-            });
-            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
-            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
-            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
-            softDrinkDecreaseBtn.addEventListener('click', function() {
-                updateSoftDrinkQuantity(-1);
+                let quantity = parseInt(quantityInput.value) || 1;
+                quantity += 1;
+                quantityInput.value = quantity;
             });
-            softDrinkIncreaseBtn.addEventListener('click', function() {
-                updateSoftDrinkQuantity(1);
-            });
-            const micIcon = document.getElementById('micIcon');
-            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
-                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-                const recognition = new SpeechRecognition();
-                recognition.lang = 'en-US';
-                recognition.onstart = () => micIcon.classList.add('active');
-                recognition.onresult = (event) => {
-                    const query = event.results[0][0].transcript.trim();
-                    localStorage.setItem('searchQuery', query);
-                    window.location.href = '/search';
-                };
-                recognition.onend = () => micIcon.classList.remove('active');
-                recognition.onerror = (event) => {
-                    micIcon.classList.remove('active');
-                    console.error('Speech error:', event.error);
-                };
-                micIcon.addEventListener('click', () => {
-                    recognition.start();
-                });
-            } else {
-                micIcon.style.display = 'none';
-            }
         });
     </script>
 </body>
-</html>
+</html>
+
+
+