Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflask21
Sleeping

App Files Community
4
nagasurendra commited on
Commit
e32cb2d
·
verified ·
1 Parent(s): 35a5b3c

Update templates/order.html

Browse files
Files changed (1) hide show
  1. templates/order.html +58 -27
templates/order.html CHANGED
@@ -4,55 +4,86 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order Summary</title>
 
7
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body {
10
- font-family: Arial, sans-serif;
11
- background-color: #f8f9fa;
12
  }
13
  .order-container {
14
  max-width: 768px;
15
- margin: 20px auto;
16
- padding: 15px;
17
- background-color: #fff;
18
- border-radius: 10px;
19
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
20
  }
21
- .order-item {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  display: flex;
23
- align-items: center;
24
  justify-content: space-between;
25
- border-bottom: 1px solid #dee2e6;
26
- padding: 10px 0;
27
  }
28
  .order-summary {
 
 
 
29
  text-align: right;
30
- margin-top: 15px;
 
 
 
 
31
  }
32
  </style>
33
  </head>
34
  <body>
35
  <div class="container">
36
  <div class="order-container">
37
- <h4 class="mb-4">Order Summary</h4>
 
 
 
 
 
 
 
 
 
 
38
 
39
- <!-- Order Items -->
40
- {% if order %}
41
- <p><strong>Order Status:</strong> {{ order.Order_Status__c }}</p>
42
- <div>
43
- <h5>Items:</h5>
44
- <p>{{ order.Order_Items__c.replace('\n', '<br>')|safe }}</p>
45
- <h5>Add-Ons:</h5>
46
- <p>{{ order.Add_Ons__c.replace('\n', '<br>')|safe }}</p>
47
  </div>
48
 
49
- <!-- Total -->
50
- <div class="order-summary">
51
- <p class="fw-bold">Total: ${{ order.Total_Amount__c }}</p>
 
52
  </div>
53
- {% else %}
54
- <p>No order summary available.</p>
55
- {% endif %}
56
  </div>
57
  </div>
58
  </body>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order Summary</title>
7
+ <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
  body {
11
+ font-family: 'Arial', sans-serif;
12
+ background-color: #f0f2f5; /* Light background */
13
  }
14
  .order-container {
15
  max-width: 768px;
16
+ margin: 40px auto;
17
+ padding: 20px;
18
+ background-color: #ffffff; /* Card background */
19
+ border-radius: 15px;
20
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
21
  }
22
+ .order-title {
23
+ font-size: 1.8rem;
24
+ font-weight: bold;
25
+ color: #007bff; /* Blue heading color */
26
+ text-align: center;
27
+ margin-bottom: 20px;
28
+ }
29
+ .section-title {
30
+ font-size: 1.2rem;
31
+ font-weight: bold;
32
+ color: #333333; /* Dark text for titles */
33
+ margin-bottom: 10px;
34
+ }
35
+ .order-item, .addon-item {
36
+ background-color: #f8f9fa; /* Light gray background for rows */
37
+ padding: 10px 15px;
38
+ border-radius: 8px;
39
+ margin-bottom: 8px;
40
  display: flex;
 
41
  justify-content: space-between;
42
+ align-items: center;
 
43
  }
44
  .order-summary {
45
+ margin-top: 20px;
46
+ font-size: 1.2rem;
47
+ font-weight: bold;
48
  text-align: right;
49
+ color: #333333; /* Dark text */
50
+ }
51
+ .total-price {
52
+ font-size: 1.5rem;
53
+ color: #28a745; /* Green for total price */
54
  }
55
  </style>
56
  </head>
57
  <body>
58
  <div class="container">
59
  <div class="order-container">
60
+ <h2 class="order-title">Your Order Summary</h2>
61
+
62
+ <!-- Items Section -->
63
+ <div class="section">
64
+ <h3 class="section-title">Items:</h3>
65
+ {% for item in order.Order_Items__c.split('\n') %}
66
+ <div class="order-item">
67
+ <span>{{ item }}</span>
68
+ </div>
69
+ {% endfor %}
70
+ </div>
71
 
72
+ <!-- Add-Ons Section -->
73
+ <div class="section mt-4">
74
+ <h3 class="section-title">Add-Ons:</h3>
75
+ {% for addon in order.Add_Ons__c.split('\n') %}
76
+ <div class="addon-item">
77
+ <span>{{ addon }}</span>
78
+ </div>
79
+ {% endfor %}
80
  </div>
81
 
82
+ <!-- Total Section -->
83
+ <div class="order-summary mt-4">
84
+ <span>Total: </span>
85
+ <span class="total-price">${{ order.Total_Amount__c }}</span>
86
  </div>
 
 
 
87
  </div>
88
  </div>
89
  </body>