BiryaniHubMenu03subbu

Sleeping

App Files Files Community

Subbu1304 commited on Mar 24

Commit

67733fa

verified ·

1 Parent(s): 8b10ac4

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +107 -4

templates/menu.html CHANGED Viewed

@@ -41,11 +41,80 @@
     margin-top:1px;
 }
    body {
     font-family: Arial, sans-serif;
@@ -419,7 +488,7 @@ form-check-input addon-option{
     align-items: center;
     gap: 10px;
 }
-.modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between; /* Space between quantity and Add to Cart button */
@@ -466,7 +535,7 @@ form-check-input addon-option{
         width: 40px; /* Adjust input size for smaller screens */
         height: 35px;
     }
-}
 </style>
 </head>
 <body>
@@ -615,7 +684,7 @@ form-check-input addon-option{
     </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">
             <div class="modal-header">
@@ -655,7 +724,41 @@ form-check-input addon-option{
             </div>
         </div>
     </div>
-</div>
 <!-- JavaScript -->
 <script>

     margin-top:1px;
 }
+.modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Space between quantity controls and Add to Cart button */
+    padding: 10px;
+}
+.modal-footer .d-flex {
+    display: flex;
+    align-items: center;
+    gap: 10px; /* Space between quantity buttons */
+}
+.modal-footer .btn {
+    height: 40px; /* Set consistent button height */
+    padding: 0 15px; /* Adjust padding to fit inside the buttons */
+}
+.modal-footer .form-control {
+    width: 50px; /* Fixed width for quantity input */
+    height: 40px; /* Match the height of buttons */
+    text-align: center; /* Center the value inside the input */
+}
+.modal-footer .btn-primary {
+    background-color: #0FAA39; /* Green background for Add to Cart button */
+    border-color: #0FAA39; /* Border color to match button background */
+    font-weight: bold; /* Bold text */
+    padding: 10px 20px; /* Adjust padding to make the button look better */
+    height: 40px; /* Match the height with quantity buttons */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto; /* Auto width to adjust to button text */
+    border-radius: 5px; /* Rounded corners for the button */
+}
+.modal-footer .btn-outline-secondary {
+    height: 40px; /* Ensure quantity buttons are the same size */
+    width: 40px; /* Make sure the buttons are square */
+    border-radius: 5px; /* Rounded corners for the buttons */
+}
+@media (max-width: 576px) {
+    /* Responsive adjustments for smaller screens */
+    .modal-dialog {
+        max-width: 98%; /* Adjust modal width for smaller screens */
+    }
+    .modal-footer .btn {
+        height: 35px; /* Smaller buttons for small screens */
+        padding: 0 12px; /* Adjust padding to make the button look proportional */
+    }
+    .modal-footer .form-control {
+        width: 40px; /* Adjust input size for smaller screens */
+        height: 35px;
+    }
+    .modal-footer .d-flex {
+        gap: 8px; /* Reduce space between quantity buttons on smaller screens */
+    }
+}
    body {
     font-family: Arial, sans-serif;
     align-items: center;
     gap: 10px;
 }
+/* .modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between; /* Space between quantity and Add to Cart button */
         width: 40px; /* Adjust input size for smaller screens */
         height: 35px;
     }
+} */
 </style>
 </head>
 <body>
     </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">
             <div class="modal-header">
             </div>
         </div>
     </div>
+</div> -->
+<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">
+            <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">
+                <!-- 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>
+                <!-- Add-ons -->
+                <div id="modal-addons" class="modal-addons mt-4">
+                    <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;
 <!-- JavaScript -->
 <script>