BiryaniHubcart

Sleeping

App Files Files Community

nagasurendra commited on 24 days ago

Commit

8b05216

verified ·

1 Parent(s): b10f111

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +0 -343

templates/cart.html CHANGED Viewed

@@ -1,6 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -28,329 +25,6 @@
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
         }
-        .cart-item {
-            display: flex;                  /* Flexbox layout for the cart item */
-            align-items: flex-start;         /* Ensure the image and content align at the top */
-            justify-content: space-between;  /* Spread image and content across the container */
-            border-bottom: 1px solid #e0e0e0;
-            padding: 15px 0;
-        }
-        .image-wrapper {
-            width: 80px;                    /* Width of the image container */
-            height: 140px !important;                   /* Height of the image container */
-            display: flex;                  /* Flex container for image */
-            align-items: flex-start;        /* Align the image at the top */
-            justify-content: center;        /* Center image horizontally if it has space */
-        }
-        .cart-item img {
-            width: 100%;                    /* Fill the image container */
-            height: auto !important;                   /* Maintain aspect ratio */
-            object-fit: contain;            /* Ensure the full image is visible */
-            border-radius: 8px;             /* Optional: rounded corners */
-            transition: transform 0.3s;
-        }
-        .cart-item img:hover {
-            transform: scale(1.05);
-        }
-        .cart-item-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-        .checkout-button {
-           background-color: #0FAA39; /* Green background */
-           color: #fff; /* White text */
-           padding: 12px;
-           border-radius: 8px;
-           border: none;
-           width: 100%;
-           font-size: 1.2rem;
-           cursor: pointer;
-           transition: background-color 0.3s, color 0.3s;
-       }
-       .checkout-button:hover {
-           background-color: #0FAA39; /* Keep the background green on hover */
-           color: #fff; /* Keep the text white on hover */
-       }
-        .add-back-button {
-            padding: 6px 20px;
-            font-size: 0.9rem;
-            border-radius: 20px;
-            border: 1px solid #fff;
-            background-color: #fff;
-            color: #0FAA39;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .add-back-button:hover {
-            background-color: #fff;
-            color: #0FAA39;
-        }
-        .cart-item-details {
-            flex: 1;
-            margin-left: 15px;
-        }
-        .cart-item-quantity {
-            display: flex;
-            align-items: center;
-            margin-top: 5px;
-        }
-        .cart-item-quantity button {
-            width: 30px;
-            height: 30px;
-            border: none;
-            background-color: #f0f0f0;
-            font-size: 1rem;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        .cart-item-quantity input {
-            width: 40px;
-            text-align: center;
-            border: none;
-            background-color: #f8f9fa;
-            font-size: 1rem;
-            margin: 0 5px;
-        }
-        .cart-summary {
-    text-align: left;
-    margin-top: 15px;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 12px;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-}
-.bill-details {
-    display: grid;
-    grid-template-columns: 1fr 1fr; /* Two-column layout */
-    grid-gap: 10px;
-    margin-bottom: 10px;
-}
-.bill-details .label {
-    font-weight: 600;
-    font-size: 1rem;
-}
-.bill-details .amount {
-    text-align: right;
-    font-weight: 600;
-    font-size: 1rem;
-}
-.dotted-line {
-    border-bottom: 2px dotted #ccc;
-    margin: 15px 0;
-}
-.total-bill {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    font-weight: 600;
-    font-size: 1.2rem;
-    margin-top: 10px;
-}
-.total-bill .label {
-    font-size: 1.1rem;
-}
-.total-bill .amount {
-    text-align: right;
-    font-size: 1.1rem;
-    color: #0FAA39; /* Green color for total */
-}
-.checkout-button {
-    background-color: #0FAA39;
-    color: #fff;
-    padding: 12px;
-    border-radius: 8px;
-    border: none;
-    width: 100%;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-        .suggestion-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-        }
-       .suggestion-item {
-    display: flex;
-    align-items: center; /* Vertically align image and text */
-    justify-content: space-between; /* Space between the image/text and the button */
-    padding: 10px 0;
-}
-.suggestion-item img {
-    width: 50px;
-    height: 50px;
-    object-fit: cover;
-    border-radius: 5px;
-    margin-right: 10px; /* Spacing between the image and the text */
-}
-.suggestion-item div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex-grow: 1; /* Allow the text to take up the available space */
-}
-.suggestion-item button {
-    padding: 5px 15px;
-    font-size: 0.9rem;
-    border-radius: 5px;
-    border: 2px solid #0FAA39;
-    color: #0FAA39;
-    background-color: #fff;
-    font-weight: 600;
-    height: 44px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-    margin-left: auto; /* Push button to the right */
-}
-       .suggestion-item button:hover {
-           background-color: #0FAA39; /* Change background to green on hover */
-           color: #fff; /* Change text color to white on hover */
-           border-color: #0FAA39; /* Keep the border green */
-       }
-        .remove-icon {
-            border: none;
-            background: none;
-            color: red;
-            font-size: 1.2rem;
-            cursor: pointer;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="cart-container">
-            <div style="text-align: right;">
-                <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
-            </div>
-             <h4 class="mb-4 fw-bold">Your Cart</h4>
-            <!-- Cart Items -->
-            {% for item in cart_items %}
-            <div class="cart-item">
-                <div class="image-wrapper">
-                    <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-               </div>
-                <div class="cart-item-details">
-                    <div class="cart-item-title">
-                        {{ item.Name }}
-                    </div>
-                    <div class="cart-item-addons">
-                        <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                    </div>
-                    <div class="cart-item-instructions">
-                        <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                    </div>
-                    <div class="cart-item-quantity mt-2">
-                        <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                        <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
-                        <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                    </div>
-                </div>
-               <div class="cart-item-actions">
-                    <div>
-                      <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
-                    </div>
-                    <div class="text-primary">
-                        $<span class="base-price">{{ item.Price__c }}</span>
-                    </div>
-                </div>
-            </div>
-            {% else %}
-            <p class="text-center">Your cart is empty.</p>
-            {% endfor %}
-            <!-- Suggestions Section -->
-            {% if suggestions %}
-            <div class="suggestion-section">
-                <h5>Complete Your Meal</h5>
-                {% for suggestion in suggestions %}
-                <div class="suggestion-item">
-                    <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                    <div>
-                        <div>{{ suggestion.Name }}</div>
-                        <div class="text-muted">${{ suggestion.Price__c }}</div>
-                    </div>
-                    <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">Add</button>
-                </div>
-                {% endfor %}
-            </div>
-            {% endif %}
-            <!-- Subtotal -->
-            <div class="cart-summary">
-                {% if coupons %}
-                    <div class="coupon-selection">
-                        <label>
-                            <input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
-                            Apply Coupon Code
-                        </label>
-                        <select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
-                            <option value="">Select a coupon</option>
-                            {% for coupon in coupons %}
-                                <option value="{{ coupon }}">{{ coupon }}</option>
-                           {% endfor %}
-                        </select>
-                    </div>
-                {% endif %}
-                <div class="bill-details">
-                    <div class="label">Cart Total</div>
-                    <div class="amount">${{ subtotal }}</div>
-                    <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cart</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-      body {
-            font-family: Arial, sans-serif;
-            background-color: #f3f4f6;
-            color: #333;
-        }
-        .cart-container {
-            max-width: 768px;
-            margin: 30px auto;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 12px;
-            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-            transition: box-shadow 0.3s ease-in-out;
-        }
-        .cart-container:hover {
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-        }
         .cart-item {
             display: flex;                  /* Flexbox layout for the cart item */
             align-items: flex-start;         /* Ensure the image and content align at the top */
@@ -643,23 +317,6 @@
         </div>
     </div>
-                    <div class="amount" id="discountText">-${{ discount }}</div>
-                </div>
-                <div class="dotted-line"></div>
-                <div class="total-bill">
-                     <div class="label">To Pay</div>
-                     <div class="amount" id="totalBillText">${{ subtotal }}</div>
-                </div>
-                <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
-            </div>
-        </div>
-    </div>
     <script>
         // Example function to handle the increase/decrease button clicks

 <!DOCTYPE html>
 <html lang="en">
 <head>
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
         }
         .cart-item {
             display: flex;                  /* Flexbox layout for the cart item */
             align-items: flex-start;         /* Ensure the image and content align at the top */
         </div>
     </div>
     <script>
         // Example function to handle the increase/decrease button clicks