Spaces:
Sleeping
Sleeping
File size: 4,909 Bytes
fcda489 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Previous Orders</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: #fdf4e3; /* Light cream background */
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; /* White card background */
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #ffe5b4; /* Light orange border */
flex-grow: 1;
}
.cart-item {
display: flex;
align-items: center;
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: #c04e01; /* Warm orange color for the title */
}
.cart-item-addons,
.cart-item-instructions {
font-size: 0.9rem;
color: #6c757d;
}
.order-summary {
text-align: right;
margin-top: 15px;
}
.back-to-menu {
display: block;
margin: 30px auto 10px auto;
padding: 10px 20px;
background-color: #ff5722; /* Bright orange button */
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: #e64a19;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="order-container">
<h4 class="mb-4 text-center">Your Previous Orders</h4>
{% if previous_orders %}
{% for order in previous_orders %}
<h5 class="text-center mb-3">Order #{{ order.Order_Number__c }}</h5>
{% 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 -->
<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">
<strong>{{ item_parts[3].strip().replace('Price:', '') }}</strong>
</div>
</div>
{% endfor %}
{% endfor %}
{% else %}
<p class="text-center">No previous orders found.</p>
{% endif %}
<!-- Back to Menu Button -->
<a href="/menu" class="back-to-menu">Back to Menu</a>
</div>
</div>
</body>
</html>
|