Update templates/search.html

templates/search.html

@@ -26,20 +26,44 @@
             color: white;
             padding: 15px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
             z-index: 1000;
         }
-        .search-bar-container {
+        .orange-label {
+            background-color: #FFA500;
+            padding: 5px 10px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
             position: absolute;
-            left: 60px; /* Adjusted to make space for back button */
+            left: 10px;
             top: 50%;
             transform: translateY(-50%);
+        }
+        .back-button {
+            background-color: black;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+        .search-bar-container {
+            position: fixed;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
             display: flex;
             align-items: center;
             width: 300px;
-            max-width: calc(90% - 60px); /* Adjusted for back button width */
-            position: relative;
+            max-width: 90%;
+            z-index: 1000;
         }
         .search-bar-container input {
             width: 100%;
@@ -66,7 +90,7 @@
         }
         .autocomplete-suggestions {
             position: absolute;
-            top: 100%;
+            bottom: 100%;
             left: 0;
             width: 100%;
             max-height: 200px;
@@ -90,6 +114,7 @@
         .container {
             max-width: 900px;
             margin-top: 20px;
+            margin-bottom: 70px; /* Space for fixed search bar */
         }
         .menu-card {
             max-width: 350px;
@@ -132,92 +157,65 @@
             justify-content: center;
             padding: 0;
         }
-        /* Back button styling */
-        .back-button {
-            position: absolute;
-            left: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: #FFA500;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            cursor: pointer;
-            z-index: 1001;
-        }
-        /* Small modal for mobile view */
-        .modal-dialog-small {
-            max-width: 100%;
-            width: 90vw; /* 90% of viewport width */
-            margin: 0 auto;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-        .modal-content {
-            border-radius: 15px;
-            background-color: #fdf4e3;
-            max-height: 90vh; /* 90% of viewport height */
-            overflow-y: auto;
+        /* Modal styling from menu.html */
+        .modal-fullscreen {
+            width: 100vw;
+            max-width: none;
+            height: 100%;
+            margin: 0;
         }
-        .modal-header, .modal-footer {
+        .modal-fullscreen .modal-content {
+            height: 100%;
             border: none;
-            padding: 10px 15px;
+            border-radius: 0;
+            background-color: #fdf4e3;
         }
         .modal-body {
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .modal-footer {
             padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-top: none;
         }
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
             border-radius: 8px;
-            padding: 10px;
-            margin-bottom: 10px;
+            padding: 12px;
+            margin-bottom: 15px;
         }
         .addon-section h6 {
-            margin-bottom: 8px;
-            font-size: 1rem;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
             font-weight: bold;
             color: #333;
         }
         .form-check {
-            margin-bottom: 6px;
+            margin-bottom: 8px;
         }
         .form-check-input {
-            margin-right: 8px;
+            margin-right: 10px;
         }
         .quantity-controls {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 10px;
         }
         .quantity-controls input {
-            width: 40px;
+            width: 50px;
             text-align: center;
-            font-size: 14px;
-        }
-        .modal-footer .btn-primary {
-            width: auto;
-            padding: 8px 15px;
-            height: 35px;
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
-        <button class="back-button" onclick="window.location.href='/menu'">&lt;</button>
-        <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
-            <i class="bi bi-search search-icon"></i>
-            <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
+        <div class="orange-label">
+            <button class="back-button" onclick="window.location.href='/menu'"><</button>
+            <span>Search</span>
         </div>
     </div>
 
@@ -256,16 +254,23 @@
         </div>
     </div>
 
-    <!-- Item Modal (Small size for mobile view) -->
+    <div class="search-bar-container">
+        <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
+        <i class="bi bi-search search-icon"></i>
+        <i class="bi bi-mic mic-icon" id="micIcon"></i>
+        <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
+    </div>
+
+    <!-- Item Modal (Exact replica from menu.html) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-small">
+        <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
                     <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" style="max-height: 150px; object-fit: cover;">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary text-center"></p>
@@ -274,13 +279,13 @@
                         <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
                         <strong>Allergens:</strong> <span id="modal-allergens"></span>
                     </div>
-                    <div id="modal-addons" class="modal-addons mt-3">
+                    <div id="modal-addons" class="modal-addons mt-4">
                         <h6 class="text-center">Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
-                    <div class="mt-3">
+                    <div class="mt-4">
                         <h6 class="text-center">Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." rows="2"></textarea>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" data-is-menu-item="" style="display: none;"></span>
                 </div>