Update templates/menu.html

templates/menu.html

@@ -6,60 +6,7 @@
     <title>Menu</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- <style>
-        /* avthar */
-      .avatar-dropdown-container {
-    position: relative;
-    display: inline-block;
-}
-
-.avatar-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f0f0f0;
-    cursor: pointer; /* Allow clicking to upload */
-}
-
-.avatar-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-}
-
-.dropdown-menu {
-    display: none;
-    position: absolute;
-    background: white;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.avatar-dropdown-container:hover .dropdown-menu {
-    display: block;
-}
-
-.dropdown-item {
-    display: block;
-    padding: 5px 10px;
-    text-decoration: none;
-    color: black;
-}
-
-.dropdown-item:hover {
-    background-color: #f0f0f0;
-}
-
-
-
-
-      
+    <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f9fa;
@@ -107,7 +54,6 @@
             border-color: #1e7e34;
             box-shadow: none;
         }
-
         .view-cart-container {
             position: fixed;
             bottom: 20px;
@@ -131,11 +77,9 @@
             background-color: #4a5d68;
             text-decoration: none;
         }
-
         .avatar-dropdown-container {
             position: relative;
         }
-
         .avatar-icon {
             width: 40px;
             height: 40px;
@@ -149,7 +93,6 @@
             font-size: 20px;
             font-weight: bold;
         }
-
         .dropdown-menu {
             position: absolute;
             right: 0;
@@ -160,11 +103,9 @@
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
         }
-
         .avatar-dropdown-container:hover .dropdown-menu {
             display: block;
         }
-
         .dropdown-menu .dropdown-item {
             padding: 10px 15px;
             text-decoration: none;
@@ -172,11 +113,9 @@
             border-bottom: 1px solid #ddd;
             display: block; /* Make each item stack vertically */
         }
-
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none; /* Remove the bottom border from the last item */
         }
-
         .dropdown-menu .dropdown-item:hover {
             background-color: #f1f1f1;
         }
@@ -193,17 +132,14 @@
             border-radius: 25px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
         }
-
         /* Ensure the category filter dropdown does not overlap */
         form.text-center.mb-4 {
             margin-top: 120px !important; /* Increase spacing below search bar */
         }
-
         /* Ensure the container has enough margin so nothing is overlapped */
         .container {
             margin-top: 180px; /* Adjust spacing based on navbar and search bar */
         }
-
         .fixed-top-bar {
             position: fixed;
             top: 0;
@@ -225,7 +161,6 @@
             padding: 12px;
             margin-bottom: 15px; /* Spacing between sections */
         }
-
         /* Customization section title */
         .addon-section h6 {
             margin-bottom: 10px;
@@ -233,162 +168,13 @@
             font-weight: bold;
             color: #333;
         }
-
         /* Style for add-on checkboxes */
         .addon-section .form-check {
             margin-left: 10px;
         }
-
-    </style> -->
-  <!-- <style>
-    /* Menu item images and card styling */
-.menu-card {
-    max-width: 100%;
-    border-radius: 10px;
-    overflow: hidden;
-    background-color: #fff;
-    margin: auto;
-}
-
-.menu-image {
-    height: 100px;
-    width: 100%;
-    object-fit: cover;
-    border-radius: 10px 10px 0 0;
-}
-
-.card-body {
-    padding: 10px;
-}
-
-/* Responsive grid for 3 columns */
-@media (min-width: 768px) {
-    .menu-card {
-        max-width: 100%;
-    }
-    .col-md-4 {
-        flex: 0 0 30%; /* Reduced the width of each card */
-        max-width: 30%;
-    }
-}
-
-/* Adjusting the appearance of the category and section headers */
-h3 {
-    margin-top: 20px;
-    font-size: 1.1rem; /* Slightly smaller font size */
-    font-weight: bold;
-}
-
-  </style> -->
-<style>/* Menu item images and card styling */
-.menu-card {
-    max-width: 100%;
-    border-radius: 10px; /* Border radius for rounded corners */
-    overflow: hidden;
-    background-color: #fff;
-    margin: auto;
-    padding: 10px; /* Padding around the card */
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.menu-image {
-    height: 200px; /* Increased the height of the image */
-    width: 100%; /* Ensures the image takes up the full width */
-    object-fit: cover; /* Changed from 'contain' to 'cover' for full coverage */
-    border-radius: 10px 10px 0 0; /* Slightly smaller radius for the top corners */
-}
-
-.card-body {
-    padding: 10px; /* Padding for the content area inside the card */
-}
-
-/* Responsive grid for 3 columns */
-@media (min-width: 768px) {
-    .menu-card {
-        max-width: 100%;
-    }
-    .col-md-4 {
-        flex: 0 0 30%; /* Reduced the width of each card */
-        max-width: 30%;
-    }
-}
-
-/* Adjusting the appearance of the category and section headers */
-h3 {
-    margin-top: 20px;
-    font-size: 1.1rem; /* Slightly smaller font size */
-    font-weight: bold;
-}
-</style>
+    </style>
 </head>
-
-  <div class="container mt-4">
-    <h1 class="text-center">Menu</h1>
-
-    <!-- Category Filter -->
-    <form method="get" action="/menu" class="text-center mb-4">
-        <label for="category" class="form-label fw-bold">Filter by Category:</label>
-        <select id="category" name="category" class="form-select" onchange="this.form.submit()">
-            {% for category in categories %}
-                <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
-                    {{ category }}
-                </option>
-            {% endfor %}
-            <option value="Customized Dish" {% if selected_category == "Customized Dish" %}selected{% endif %}>
-                Customized Dish
-            </option>
-        </select>
-    </form>
-
-    {% if selected_category == "Customized Dish" %}
-        <!-- Customized Dish Form -->
-        <div id="custom-dish-form" class="mt-4">
-            <h3>Create Your Custom Dish</h3>
-            <form method="POST" action="/generate_custom_dish">
-                <div class="mb-3">
-                    <label for="custom-dish-name" class="form-label">Dish Name</label>
-                    <input type="text" class="form-control" id="custom-dish-name" name="name" required>
-                </div>
-                <div class="mb-3">
-                    <label for="custom-dish-description" class="form-label">Dish Description</label>
-                    <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-                </div>
-                <button type="submit" class="btn btn-primary">Submit</button>
-            </form>
-        </div>
-    {% else %}
-        <!-- Menu Items in 3 Columns -->
-        <div class="container mt-4">
-            <!-- <h1 class="text-center">Menu</h1> -->
-            <div class="row">
-                {% for section, items in ordered_menu.items() %}
-                    <h3 class="col-12">{{ section }}</h3>
-                    <div class="row">
-                        {% for item in items %}
-                            <div class="col-md-4 mb-4">
-                                <div class="card menu-card">
-                                    <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                                    <div class="card-body">
-                                        <h5 class="card-title">{{ item.Name }}</h5>
-                                        <p class="card-text">${{ item.Price__c }}</p>
-                                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                            Add +
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-    {% endif %}
-</div>
-
-<!-- <body>
+<body>
     
     <div class="fixed-top-bar">
         <!-- Removed Reward Points and Referral Code -->
@@ -418,19 +204,7 @@ h3 {
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
-        <!-- <div class="avatar-dropdown-container">
-        <div class="avatar-icon" onclick="document.getElementById('imageUpload').click()">
-        <img id="avatarImage" src="path/to/default-avatar.png" alt="User Avatar" class="avatar-img">
-        </div>
-        <input type="file" id="imageUpload" accept="image/*" style="display: none" onchange="previewImage(event)">
-
-        <div class="dropdown-menu">
-        <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
-        <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
-        <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
-        </div>
-       </div> -->
-    </div> 
+    </div>
 
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
@@ -561,12 +335,10 @@ h3 {
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
-
             // Set section and category for reference
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
-
             // Fetch customization options based on the section
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
@@ -578,25 +350,20 @@ h3 {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
                     }
-
                     // Display customization options inside styled divs
                     data.addons.forEach(addon => {
                         const sectionDiv = document.createElement('div');
                         sectionDiv.classList.add('addon-section'); // Add styling class
-
                         // Add section title
                         const title = document.createElement('h6');
                         title.innerText = addon.name;
                         sectionDiv.appendChild(title);
-
                         // Create options list
                         const optionsContainer = document.createElement('div');
-
                         addon.options.forEach((option, index) => {
                             const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
                             const listItem = document.createElement('div');
                             listItem.classList.add('form-check');
-
                             listItem.innerHTML = `
                                 <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
                                        data-name="${option}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
@@ -606,7 +373,6 @@ h3 {
                             `;
                             optionsContainer.appendChild(listItem);
                         });
-
                         sectionDiv.appendChild(optionsContainer);
                         addonsList.appendChild(sectionDiv);
                     });
@@ -620,14 +386,11 @@ h3 {
             let input = document.getElementById('searchBar').value.toLowerCase();
             let sections = document.querySelectorAll('h3'); // Select section headers
             let items = document.querySelectorAll('.menu-card'); // Select all items
-
             let matchedSections = new Set(); // Store matched sections
-
             // Hide all items initially
             items.forEach(item => {
                 let itemName = item.querySelector('.card-title').innerText.toLowerCase();
                 let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
-
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';  // Show item if it matches search
                     matchedSections.add(item.closest('.row')); // Add section to matched list
@@ -635,7 +398,6 @@ h3 {
                     item.style.display = 'none'; // Hide item if not matched
                 }
             });
-
             // Show or hide sections based on matched items
             sections.forEach(section => {
                 let sectionRow = section.nextElementSibling; // The row containing items
@@ -648,8 +410,6 @@ h3 {
                 }
             });
         }
-
-
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -657,7 +417,6 @@ h3 {
             const modalSectionEl = document.getElementById('modal-section');
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
-
             // Collect selected add-ons
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
@@ -665,14 +424,11 @@ h3 {
                 name: addon.getAttribute('data-name'),
                 price: parseFloat(addon.getAttribute('data-price'))
             }));
-
             const instructions = document.getElementById('modal-instructions').value;
-
             if (!itemName || !itemPrice) {
                 alert('Failed to add item to cart. Please try again.');
                 return;
             }
-
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -682,7 +438,6 @@ h3 {
                 addons: selectedAddOns,
                 instructions: instructions
             };
-
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -706,7 +461,6 @@ h3 {
                 alert('An error occurred while adding the item to the cart.');
             });
         }
-
         // Function to round reward points to a single digit
         function roundRewardPoints() {
             let rewardPointsElement = document.getElementById('reward-points');
@@ -716,38 +470,12 @@ h3 {
                 rewardPointsElement.innerText = rewardPoints.toFixed(1); // Rounds to 1 decimal place
             }
         }
-
         // Run the function when the page loads
         window.onload = roundRewardPoints;
-      
-      // avathar script
-      
-        // Default avatar image
-    const defaultAvatar = "path/to/default-avatar.png"; // Replace with actual path
-    const avatarImage = document.getElementById("avatarImage");
-    const storedImage = localStorage.getItem("userAvatar");
-
-    // If user has previously uploaded an image, load it
-    if (storedImage) {
-        avatarImage.src = storedImage;
-    }
-
-    // Function to preview and save uploaded image
-    function previewImage(event) {
-        const file = event.target.files[0];
-        if (file) {
-            const reader = new FileReader();
-            reader.onload = function(e) {
-                avatarImage.src = e.target.result; // Set new image
-                localStorage.setItem("userAvatar", e.target.result); // Store in localStorage
-            };
-            reader.readAsDataURL(file);
-        }
-    }
         
     </script>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-</body> -->
+</body>
 </html>