Hugging Face's logo

Spaces:
Rammohan0504
/
BiryaniHubflask37-1
Sleeping

App Files Community
Rammohan0504 commited on
Commit
b7a7bc5
·
verified ·
1 Parent(s): da6247a

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +2 -98
templates/order_history.html CHANGED
@@ -1,98 +1,2 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Order History</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- body {
10
- font-family: 'Arial', sans-serif;
11
- background-color: #fdf4e3;
12
- color: #333333;
13
- margin: 0;
14
- padding: 0;
15
- }
16
- .order-history-container {
17
- max-width: 900px;
18
- margin: 40px auto;
19
- padding: 20px;
20
- background-color: #ffffff;
21
- border-radius: 15px;
22
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
23
- border: 1px solid #ffe5b4;
24
- }
25
- .order-item {
26
- background-color: #fffcf5;
27
- border-radius: 8px;
28
- padding: 10px;
29
- margin-bottom: 10px;
30
- border: 1px solid #ffe5b4;
31
- }
32
- .order-details {
33
- font-size: 0.9rem;
34
- }
35
- footer {
36
- background-color: #333333;
37
- color: #ffffff;
38
- text-align: center;
39
- padding: 15px 10px;
40
- margin-top: 20px;
41
- }
42
- .nav-buttons {
43
- display: flex;
44
- justify-content: space-between;
45
- margin-top: 20px;
46
- }
47
- .nav-button {
48
- padding: 10px 20px;
49
- background-color: #ff5722;
50
- color: #ffffff;
51
- text-decoration: none;
52
- border-radius: 25px;
53
- font-size: 1rem;
54
- }
55
- .nav-button:hover {
56
- background-color: #e64a19;
57
- }
58
- </style>
59
- </head>
60
- <body>
61
-
62
- <div class="container">
63
- <div class="order-history-container">
64
- <h4 class="mb-4 text-center">Your Order History</h4>
65
-
66
- {% if orders %}
67
- <div id="order-list">
68
- {% for order in orders %}
69
- <div class="order-item">
70
- <div><strong>Order Time:</strong> {{ order.CreatedDate }}</div>
71
- <ul class="order-details">
72
- {% for line in order.Order_Details__c.split('\n') %}
73
- {% set item_parts = line.split('|') %}
74
- <li>
75
- <strong>Item:</strong> {{ item_parts[0].strip() }}<br>
76
- <strong>Price:</strong> {{ item_parts[3].strip().replace('Price:', '') }}<br>
77
- <strong>Add-Ons:</strong> {{ item_parts[2].strip() }}<br>
78
- <strong>Instructions:</strong> {{ item_parts[5].strip() }}
79
- </li>
80
- {% endfor %}
81
- </ul>
82
- </div>
83
- {% endfor %}
84
- </div>
85
- {% else %}
86
- <p class="text-center">No order history available.</p>
87
- {% endif %}
88
-
89
- <!-- Navigation Buttons -->
90
- <div class="nav-buttons">
91
- <a href="/menu" class="nav-button">Back to Menu</a>
92
- <a href="/cart" class="nav-button">Go to Cart</a>
93
- </div>
94
- </div>
95
- </div>
96
-
97
- </body>
98
- </html>
 
1
+ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Order History</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; } .order-history-container { max-width: 900px; 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 */ } .order-item { display: flex; justify-content: space-between; background-color: #fffcf5; /* Light beige background for items */ border-radius: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid #ffe5b4; /* Light orange border */ } .order-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; } .order-item-details { flex: 1; margin-left: 15px; } .order-item-title { font-size: 1.2rem; font-weight: bold; color: #c04e01; /* Warm orange color for the title */ } .order-item-price { font-size: 1.1rem; font-weight: bold; color: #2b9348; /* Green for the price */ } .reorder-button { padding: 8px 15px; background-color: #ff5722; color: #ffffff; border: none; border-radius: 25px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .reorder-button:hover { background-color: #e64a19; } footer { background-color: #333333; color: #ffffff; text-align: center; padding: 15px 10px; margin-top: 20px; } .show-more-btn { background-color: #ff5722; color: #ffffff; padding: 8px 16px; border-radius: 25px; cursor: pointer; } .show-more-btn:hover { background-color: #e64a19; } .nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="order-history-container"> <h4 class="mb-4 text-center">Your Order History</h4> {% if orders %} <div id="order-list"> {% for order in orders[:5] %} <h5>Order on: {{ order.CreatedDate }}</h5> {% for line in order.Order_Details__c.split('\n') %} {% set item_parts = line.split('|') %} <!-- Extract image URL from the Order_Details string --> {% set image_url = item_parts[4].strip().split('Image: ')[-1] %} <div class="order-item"> <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}" onerror="this.src='/static/placeholder.jpg';"> <div class="order-item-details"> <div class="order-item-title">{{ item_parts[0].strip() }}</div> <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div> <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div> </div> <button class="reorder-button" onclick="addToCart('{{ item_parts[0].strip() }}')" id="{{ item_parts[0].strip() }}" data-price="{{ item_parts[3].strip().replace('Price:', '') }}" data-image="{{ image_url }}" data-category="Main Course" data-section="Reordered Items"> Reorder </button> </div> {% endfor %} {% endfor %} </div> <!-- Show More / Show Less --> <button id="show-more" class="show-more-btn" onclick="toggleOrders()">Show More</button> {% else %} <p class="text-center">No order history available.</p> {% endif %} <!-- Navigation Buttons --> <div class="nav-buttons"> <a href="/menu" class="reorder-button">Back to Menu</a> <a href="/cart" class="reorder-button">Go to Cart</a> </div> </div> </div> <script> // Function to toggle showing more orders function toggleOrders() { const orderList = document.getElementById("order-list"); const showMoreBtn = document.getElementById("show-more"); // Show all orders if (orderList.children.length === 5) { // Add more orders dynamically (can be done by modifying backend response, or manually here) {% for order in orders[5:] %} {% for line in order.Order_Details__c.split('\n') %} {% set item_parts = line.split('|') %} <!-- Extract image URL from the Order_Details string --> {% set image_url = item_parts[4].strip().split('Image: ')[-1] %} const newOrderItem = document.createElement("div"); newOrderItem.classList.add("order-item"); newOrderItem.innerHTML = ` <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}" onerror="this.src='/static/placeholder.jpg';"> <div class="order-item-details"> <div class="order-item-title">{{ item_parts[0].strip() }}</div> <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div> <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div> </div> <button class="reorder-button" onclick="addToCart('{{ item_parts[0].strip() }}')" id="{{ item_parts[0].strip() }}" data-price="{{ item_parts[3].strip().replace('Price:', '') }}" data-image="{{ image_url }}" data-category="Main Course" data-section="Reordered Items"> Reorder </button> `; orderList.appendChild(newOrderItem); {% endfor %} {% endfor %} showMoreBtn.innerText = "Show Less"; // Change button text to "Show Less" } else { // Show only 5 orders initially const allOrderItems = orderList.children; while (allOrderItems.length > 5) { orderList.removeChild(allOrderItems[5]); // Remove extra orders } showMoreBtn.innerText = "Show More"; // Change button text back to "Show More" } } </script> </body> </html>
2
+ To meet your requirements of removing images, reorder buttons, and navigating to the cart while displaying order details in a structured way, I've modified the structure accordingly. Here's an updated approa