Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Order Receipt</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #fdf4e3; | |
| color: #333; | |
| } | |
| .top-bar { | |
| background-color: #FF6F3C; | |
| padding: 10px 15px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .back-link { | |
| display: flex; | |
| align-items: center; | |
| text-decoration: none; | |
| } | |
| .back-arrow { | |
| font-size: 1.8rem; | |
| color: #000; | |
| font-weight: bold; | |
| } | |
| .back-label { | |
| margin-left: 10px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 1rem; | |
| } | |
| .order-heading { | |
| color: #000; | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| text-align: center; | |
| margin-top: 30px; | |
| } | |
| .order-container { | |
| max-width: 768px; | |
| margin: 20px auto; | |
| padding: 15px; | |
| background-color: #FFFFFF; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .order-details { | |
| padding: 20px; | |
| background-color: #fff; | |
| border-radius: 12px; | |
| border: 2px solid #fdf4e3; | |
| } | |
| .order-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid #f0f0f0; | |
| } | |
| .order-item-details { | |
| flex: 1; | |
| } | |
| .order-item-details small { | |
| display: block; | |
| color: #666; | |
| } | |
| .order-item-price { | |
| font-weight: bold; | |
| color: #2e7d32; | |
| } | |
| .bill-details { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .bill-details .label { | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .bill-details .amount { | |
| text-align: right; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: #2e7d32; | |
| } | |
| .dotted-line { | |
| border-bottom: 2px dotted #ccc; | |
| margin: 15px 0; | |
| } | |
| footer { | |
| background-color: #333333; | |
| color: #ffffff; | |
| text-align: center; | |
| padding: 15px 10px; | |
| margin-top: 20px; | |
| } | |
| footer p { | |
| margin: 0; | |
| font-size: 1rem; | |
| } | |
| footer p span { | |
| color: #ffcc00; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top-bar"> | |
| <a href="/menu" class="back-link"> | |
| <span class="back-arrow">⟨</span> | |
| <span class="back-label">Back to Menu</span> | |
| </a> | |
| </div> | |
| <div class="order-heading">Your Order Receipt</div> | |
| <div class="container"> | |
| <div class="order-container"> | |
| <div class="order-details"> | |
| <h5>Order #{{ order_id }}</h5> | |
| {% if order %} | |
| {% for line in order.Order_Details__c.split('\n') %} | |
| {% set item_parts = line.split('|') %} | |
| <div class="order-item"> | |
| <div class="order-item-details"> | |
| <strong>{{ item_parts[0].strip() }}</strong> | |
| <small>Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') or 'None' }}</small> | |
| <small>Instructions: {{ item_parts[2].strip().replace('Instructions:', '') or 'None' }}</small> | |
| </div> | |
| <div class="order-item-price">{{ item_parts[3].strip().replace('Price:', '') }}</div> | |
| </div> | |
| {% endfor %} | |
| {% else %} | |
| <p>No order details available.</p> | |
| {% endif %} | |
| <div class="bill-details"> | |
| <div class="label">Subtotal</div> | |
| <div class="amount">${{ "%.2f"|format(order.Total_Amount__c) }}</div> | |
| <div class="label">Discount</div> | |
| <div class="amount">-${{ "%.2f"|format(order.Discount__c) }}</div> | |
| <div class="label">Total</div> | |
| <div class="amount">${{ "%.2f"|format(order.Total_Bill__c) }}</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Thanks for choosing to dine with us! <span>We look forward to serving you again.</span></p> | |
| </footer> | |
| </body> | |
| </html> |