bitriyanihubflask

Runtime error

App Files Files Community

Subbu1304 commited on Mar 19, 2025

Commit

2e5fcc2

verified ·

1 Parent(s): 71fc5fd

Update templates/order.html

Browse files

Files changed (1) hide show

templates/order.html +201 -2

templates/order.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -216,4 +216,203 @@
         <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
     </footer>
 </body>
-</html>

 <!DOCTYPE html>
+<!-- <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
     </footer>
 </body>
+</html> -->
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Summary</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color:  #fdf4e3; /* Updated background color */
+            color: #333333; /* Dark gray text */
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .order-container {
+            max-width: 768px;
+            margin: 40px auto;
+            padding: 20px;
+            background-color: #ffffff; /* Set the container background to white */
+            border-radius: 15px;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+            border: 1px solid #ffffff;
+            flex-grow: 1;
+        }
+        .cart-item {
+            display: flex;
+            justify-content: space-between;
+            background-color: #fffcf5; /* Slightly lighter beige */
+            border-radius: 8px;
+            border: 1px solid #ffe5b4; /* Light orange border */
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+        .cart-item img {
+            width: 70px;
+            height: 70px;
+            object-fit: cover;
+            border-radius: 5px;
+            border: 1px solid #ffcc80; /* Light orange border around images */
+        }
+        .cart-item-details {
+            flex: 1;
+            margin-left: 15px;
+        }
+        .cart-item-title {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #000000; /* Change the color to black */
+        }
+        .cart-item-addons,
+        .cart-item-instructions {
+            font-size: 0.9rem;
+            color: #000000; /* Change the color to black */
+        }
+        .cart-item-actions {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #2b9348;
+        }
+        .order-summary {
+            text-align: right;
+            margin-top: 15px;
+        }
+        .total-price {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #2b9348; /* Green for the total price */
+        }
+        .back-to-menu {
+            display: block;
+            margin: 30px auto 10px auto;
+            padding: 10px 20px;
+            background-color: #ff5722;
+            color: #ffffff;
+            border: none;
+            border-radius: 25px;
+            font-size: 1rem;
+            font-weight: bold;
+            text-align: center;
+            text-decoration: none;
+            width: 100%;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s ease;
+        }
+        .back-to-menu:hover {
+            background-color: #ff5722;
+            text-decoration: none;
+        }
+        footer {
+            background-color: #333333;
+            color: #ffffff;
+            text-align: center;
+            padding: 15px 10px;
+            margin-top: auto;
+        }
+        footer p {
+            margin: 0;
+            font-size: 1rem;
+        }
+        footer p span {
+            color: #ffcc00;
+            font-weight: bold;
+        }
+        .totsl_bill {
+            max-width: 768px;
+        }
+        .yourorder {
+            font-family: Serif;
+            color: #ff5722; /* Orange color for "Your Order Summary" */
+            font-size: 1.5rem; /* Adjusted for better visibility */
+            font-weight: bold;
+        }
+        /* Remove any gap between Sub-Total and Discount */
+        .d-flex {
+            margin-bottom: 0px !important; /* Remove margin */
+        }
+        .d-flex:first-child {
+            margin-top: 0px !important; /* Ensure no space above Sub-Total */
+        }
+        /* Remove padding and margins from the individual fields */
+        .d-flex .cart-item-actions {
+            margin-bottom: 0px !important; /* Remove margin between fields */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="order-container">
+            <h4 class="mb-4 text-center yourorder">Your Order Summary</h4>
+            {% if order %}
+                {% for line in order.Order_Details__c.split('\n') %}
+                    {% set item_parts = line.split('|') %}
+                    <div class="cart-item">
+                        <!-- Item Image -->
+                        <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
+                             alt="{{ item_parts[0].strip() }}"
+                             onerror="this.src='/static/placeholder.jpg';">
+                        <!-- Item Details -->
+                        <div class="cart-item-details">
+                            <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->
+                            <div class="cart-item-addons">
+                                <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
+                            </div>
+                            <div class="cart-item-instructions">
+                                <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
+                            </div>
+                        </div>
+                        <!-- Price -->
+                        <div class="cart-item-actions m">
+                         <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
+                        </div>
+                    </div>
+                {% endfor %}
+                <!-- Total Section -->
+                <div class="container mt-5 cart-item">
+                    <div class="container">
+                        <div class="d-flex justify-content-between mb-3">
+                            <p><strong>Sub-Total:</strong></p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
+                        </div>
+                        <div class="d-flex justify-content-between mb-3">
+                            <p><strong>Discount:</strong></p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
+                        </div>
+                        <!-- Add dotted line here -->
+                        <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
+                        <div class="d-flex justify-content-between mb-3">
+                            <p><strong>Total Bill:</strong></p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
+                        </div>
+                    </div>
+                </div>
+            {% else %}
+                <p class="text-center">No order details available.</p>
+            {% endif %}
+            <!-- Back to Menu Button -->
+            <a href="/menu" class="back-to-menu">Back to Menu</a>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer>
+        <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
+    </footer>
+</body>
+</html>