Update templates/menu.html

templates/menu.html

@@ -7,12 +7,11 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-    <!-- Preload Placeholder Image -->
+    <!-- Preload Critical Resources -->
     <link rel="preload" href="/static/placeholder.jpg" as="image">
-    <!-- Preload First Few Menu Item Images -->
     {% for section, items in ordered_menu.items() %}
-        {% for item in items[:2] %}
-            <link rel="preload" href="{{ item.Image1__c }}" as="image">
+        {% for item in items[:1] %}
+            <link rel="preload" href="{{ item.Image1__c }}" as="image" fetchpriority="high">
         {% endfor %}
     {% endfor %}
     <style>
@@ -44,7 +43,7 @@
         .menu-image {
             height: 200px;
             width: 100%;
-            object-fit: fill;
+            object-fit: cover;
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
@@ -116,29 +115,47 @@
             box-shadow: none;
             transform: scale(0.98);
         }
-        .view-cart-container {
+        .side-cart-container {
             position: fixed;
             bottom: 20px;
             right: 20px;
             z-index: 999;
         }
-        .view-cart-button {
+        .side-cart-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60px;
+            height: 60px;
             background-color: #0FAA39;
+            border-radius: 50%;
+            text-decoration: none;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+            transition: background-color 0.3s ease, transform 0.2s ease;
+        }
+        .side-cart-button:hover {
+            background-color: #109835;
+            transform: scale(1.1);
+        }
+        .cart-icon {
+            font-size: 24px;
             color: #fff;
-            padding: 10px 20px;
-            border-radius: 30px;
-            font-size: 1rem;
+        }
+        .cart-count {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: #ff4d4d;
+            color: #fff;
+            font-size: 12px;
             font-weight: bold;
-            text-decoration: none;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
         }
-        .view-cart-button:hover {
-            background-color: #109835;
-            text-decoration: none;
-        }
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
@@ -508,8 +525,11 @@
                 padding: 10px;
             }
             .search-bar-container {
-                width: 60%;
+                width: 80%;
                 max-width: 100%;
+                left: 10px;
+                top: 50%;
+                transform: translateY(-50%);
             }
             .search-bar-container input {
                 padding: 6px 12px 6px 35px;
@@ -637,6 +657,22 @@
                 height: 18px;
                 font-size: 9px;
             }
+            .side-cart-container {
+                bottom: 10px;
+                right: 10px;
+            }
+            .side-cart-button {
+                width: 50px;
+                height: 50px;
+            }
+            .cart-icon {
+                font-size: 20px;
+            }
+            .cart-count {
+                width: 18px;
+                height: 18px;
+                font-size: 10px;
+            }
         }
     </style>
 </head>
@@ -671,6 +707,114 @@
         <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
 
+    <div class="container mt-4">
+        {% if selected_category == "Customized Dish" %}
+            <div id="custom-dish-form" class="mt-4">
+                <h3>Create Your Custom Dish</h3>
+                <form method="POST" action="/customdish/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 position-relative">
+                        <label for="custom-dish-description" class="form-label">Dish Description</label>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                        <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </form>
+            </div>
+        {% else %}
+            {% for section, items in ordered_menu.items() %}
+                <h3>{{ section }}</h3>
+                <div class="row">
+                    {% for item in items %}
+                        <div class="col-md-6 mb-4">
+                            <div class="card menu-card">
+                                <picture>
+                                    <source 
+                                        srcset="{{ item.Image1__c_webp if item.Image1__c_webp else item.Image1__c }} 350w, 
+                                                {{ item.Image1__c_small if item.Image1__c_small else item.Image1__c }} 175w" 
+                                        sizes="(max-width: 576px) 175px, 350px" 
+                                        type="image/webp">
+                                    <img 
+                                        src="/static/placeholder.jpg" 
+                                        data-src="{{ item.Image1__c }}" 
+                                        class="card-img-top menu-image" 
+                                        alt="{{ item.Name }}" 
+                                        width="350" 
+                                        height="200" 
+                                        loading="lazy" 
+                                        fetchpriority="low" 
+                                        decoding="async" 
+                                        onerror="this.onerror=null; this.src='/static/placeholder.jpg';">
+                                </picture>
+                                <div class="addbutton">
+                                    <div class="card-body d-flex align-items-center justify-content-between">
+                                        <div>
+                                            <h5 class="card-title">{{ item.Name }}</h5>
+                                            <p class="card-text">${{ item.Price__c }}</p>
+                                        </div>
+                                        <div class="d-flex flex-column align-item-center justify-content-center">
+                                            <div class="button-container" data-item-name="{{ item.Name }}" data-item-price="{{ item.Price__c }}" data-item-image="{{ item.Image1__c }}" data-item-section="{{ item.Section__c }}" data-item-category="{{ selected_category }}">
+                                                {% if item.Section__c == 'Soft Drinks' %}
+                                                    <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
+                                                    <div class="quantity-selector" style="display: none;">
+                                                        <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
+                                                        <select class="quantity-to-remove">
+                                                            {% for i in range(1, 21) %}
+                                                                <option value="{{ i }}">{{ i }}</option>
+                                                            {% endfor %}
+                                                        </select>
+                                                        <span class="quantity-display">0</span>
+                                                        <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
+                                                        <select class="quantity-to-add">
+                                                            {% for i in range(1, 21) %}
+                                                                <option value="{{ i }}">{{ i }}</option>
+                                                            {% endfor %}
+                                                        </select>
+                                                    </div>
+                                                {% else %}
+                                                    <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>
+                                                {% endif %}
+                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                                    <span class="customisable-text">Customisable</span>
+                                                {% endif %}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
+                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}"></div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+
+    <div class="side-cart-container">
+        <a href="{{ url_for('cart.cart') }}" class="side-cart-button" title="View Cart">
+            <i class="bi bi-cart3 cart-icon"></i>
+            <span class="cart-count" id="cart-count">0</span>
+        </a>
+    </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>
+        </div>
+        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
+    </form>
+
     <div class="container mt-4">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">