BiryaniHubflaskMenu

Sleeping

App Files Files Community

DSatishchandra commited on 28 days ago

Commit

97c9072

verified ·

1 Parent(s): a79edb2

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +22 -26

templates/menu.html CHANGED Viewed

@@ -19,6 +19,7 @@
 .container {
     max-width: 900px;
 }
 .menu-card {
@@ -47,12 +48,12 @@
 }
 .btn-primary {
-    font-size: 14px;
     font-weight: bold;
     border-radius: 5px;
     width: 100px;
     background-color: #0FAA39; /* Updated button background color */
-    border-color: #28a745;
 }
 .btn-primary:hover {
@@ -312,14 +313,16 @@ form.text-center.mb-4 {
     font-size: 16px;
     margin-left: 8px; /* Space between the radio button and the label */
 }
-     .modal-footer .d-flex {
-    justify-content: flex-start; /* Align content to the left */
-    width: 100%; /* Make sure the container spans the full width */
-    padding-left: 0; /* Remove padding if any */
 }
 .modal-footer .form-control {
     margin-right: 10px; /* Add a little space between the quantity input and the buttons */
 }
 .cart-container {
     display: flex;
@@ -330,10 +333,12 @@ form.text-center.mb-4 {
 .quantity-box {
     display: flex;
     align-items: center;
     border: 1px solid #ccc;
-    border-radius: 5px;
     overflow: hidden;
     height: 40px;
 }
 .quantity-box button {
@@ -342,16 +347,18 @@ form.text-center.mb-4 {
     padding: 5px 10px;
     cursor: pointer;
     height: 100%;
 }
 .quantity-box input {
     width: 40px;
     text-align: center;
     border: none;
-    font-size: 16px;
     height: 100%;
 }
 .add-to-cart-btn {
     background: green;
     color: white;
@@ -365,8 +372,9 @@ form.text-center.mb-4 {
     align-items: center;
     justify-content: center;
     white-space: nowrap;
 }
 </style>
 </head>
 <body>
@@ -501,9 +509,9 @@ form.text-center.mb-4 {
     <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
 </div>
-                    <div>
-     <button class="add-to-cart-btn" onclick="addToCartFromModal()">Add items $<span id="totalAmountDisplay">0.00</span></button>
-</div>
                 </div>
             </div>
@@ -531,18 +539,6 @@ function updateTotalAmount(itemId) {
     // Update the individual total amount display
     document.getElementById("totalAmountDisplay-" + itemId).innerText = `$${totalAmount.toFixed(2)}`;
 }
-function addToCartFromModal(itemId) {
-    let quantity = parseInt(document.getElementById("quantity-" + itemId).value);
-    let itemName = document.getElementById("name-" + itemId).innerText; // Get item name dynamically
-    let price = parseFloat(document.getElementById("price-" + itemId).innerText); // Get price dynamically
-    let totalAmount = price * quantity;
-    // Update the "Add to Cart" button with the correct total amount
-    document.getElementById("addToCartBtn-" + itemId).innerHTML = `Add to Cart $${totalAmount.toFixed(2)}`;
-    alert(`Added ${quantity} x ${itemName} ($${totalAmount.toFixed(2)}) to cart!`);
-}
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;

 .container {
     max-width: 900px;
+    /*margin-top: 10px; /* Adjust spacing to control space between filter and menu */
 }
 .menu-card {
 }
 .btn-primary {
+    font-size: 13px;
     font-weight: bold;
     border-radius: 5px;
     width: 100px;
     background-color: #0FAA39; /* Updated button background color */
+    border-color: #0FAA39;
 }
 .btn-primary:hover {
     font-size: 16px;
     margin-left: 8px; /* Space between the radio button and the label */
 }
+.modal-footer .d-flex {
+    display: flex; /* Use flexbox */
+    align-items: center; /* Vertically align the items */
+    justify-content: flex-start; /* Align at the start */
+    width: 100%;
+    padding-left: 0;
 }
 .modal-footer .form-control {
     margin-right: 10px; /* Add a little space between the quantity input and the buttons */
+    align-items:top;
 }
 .cart-container {
     display: flex;
 .quantity-box {
     display: flex;
     align-items: center;
+    justify-content: space-between; /* Space between buttons and input */
     border: 1px solid #ccc;
+    border-radius: 20px; /* Rounded corners */
     overflow: hidden;
     height: 40px;
+    width: 120px; /* Set width of the entire quantity box */
 }
 .quantity-box button {
     padding: 5px 10px;
     cursor: pointer;
     height: 100%;
+    font-size: 18px;
 }
 .quantity-box input {
     width: 40px;
     text-align: center;
     border: none;
+    font-size: 18px;
     height: 100%;
+    background-color: #fff;
+    color: #333;
 }
 .add-to-cart-btn {
     background: green;
     color: white;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
+    margin-left: 10px; /* Space between quantity box and button */
+    align-self: flex-start; /* Align the button at the top */
 }
 </style>
 </head>
 <body>
     <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
 </div>
+                    <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+                </div>
                 </div>
             </div>
     // Update the individual total amount display
     document.getElementById("totalAmountDisplay-" + itemId).innerText = `$${totalAmount.toFixed(2)}`;
 }
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;