Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskSalesTeam8
Sleeping

App Files Community
nagasurendra commited on
Commit
d8b180b
·
verified ·
1 Parent(s): 8c3612e

Update templates/reward_status.html

Browse files
Files changed (1) hide show
  1. templates/reward_status.html +143 -21
templates/reward_status.html CHANGED
@@ -5,7 +5,130 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Reward Status</title>
7
  <style>
8
- /* Styles for your layout */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </style>
10
  </head>
11
  <body>
@@ -17,26 +140,26 @@
17
  </div>
18
 
19
  <div class="reward-status">
20
- <!-- Loop through order_items -->
21
- {% for item in order_items %}
22
- <div class="item-section">
23
- <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
24
- <div class="item-info">
25
- <h3>{{ item.name }}</h3>
26
- <p>Price: ${{ "%.2f"|format(item.price) }}</p>
27
- </div>
28
-
29
- <!-- Ingredients -->
30
- <div class="ingredient-card">
31
- {% for ingredient in item.ingredients %}
32
- <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
33
- <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
34
- <p>{{ ingredient.name }}</p>
35
- </div>
36
- {% endfor %}
37
- </div>
38
  </div>
39
- {% endfor %}
 
 
 
 
 
 
 
 
 
 
 
 
40
  </div>
41
  </div>
42
 
@@ -58,7 +181,6 @@
58
  </div>
59
 
60
  <script>
61
- // JavaScript for showing ingredient details in modal
62
  function showIngredientDetails(name, image, healthBenefits, funFacts) {
63
  const healthBenefitsList = healthBenefits.split(',');
64
  const funFactsList = funFacts.split(',');
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Reward Status</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f9f9f9;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ .container {
16
+ width: 90%;
17
+ margin: auto;
18
+ padding-top: 20px;
19
+ }
20
+
21
+ .order-confirmed {
22
+ background-color: #fff;
23
+ padding: 20px;
24
+ border-radius: 10px;
25
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
26
+ text-align: center;
27
+ margin-bottom: 20px;
28
+ }
29
+
30
+ .order-confirmed h1 {
31
+ font-size: 2em;
32
+ color: #ff6f00;
33
+ }
34
+
35
+ .reward-status {
36
+ display: flex;
37
+ justify-content: space-between;
38
+ flex-wrap: wrap;
39
+ background-color: #fff;
40
+ padding: 20px;
41
+ border-radius: 10px;
42
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
43
+ height: auto;
44
+ max-height: 800px;
45
+ overflow: hidden;
46
+ }
47
+
48
+ .item-section {
49
+ width: 100%; /* Default to 100% width on small screens */
50
+ height: auto;
51
+ display: flex;
52
+ flex-direction: column;
53
+ justify-content: space-between;
54
+ padding: 10px;
55
+ }
56
+
57
+ @media (min-width: 768px) {
58
+ .item-section {
59
+ width: 48%; /* When on larger screens, use 48% to create side-by-side layout */
60
+ }
61
+ }
62
+
63
+ .item-image {
64
+ width: 100%;
65
+ height: 250px;
66
+ object-fit: cover;
67
+ border-radius: 8px;
68
+ }
69
+
70
+ .item-info {
71
+ text-align: center;
72
+ }
73
+
74
+ .item-info h3 {
75
+ font-size: 1.5em;
76
+ margin-top: 10px;
77
+ }
78
+
79
+ .ingredient-card {
80
+ display: flex;
81
+ justify-content: space-between;
82
+ padding-top: 10px;
83
+ flex-wrap: wrap;
84
+ }
85
+
86
+ .ingredient {
87
+ width: 48%;
88
+ text-align: center;
89
+ cursor: pointer;
90
+ margin-top: 10px;
91
+ }
92
+
93
+ .ingredient img {
94
+ width: 100%;
95
+ height: 100px;
96
+ object-fit: cover;
97
+ border-radius: 8px;
98
+ }
99
+
100
+ /* Modal Styling */
101
+ .modal {
102
+ display: none;
103
+ position: fixed;
104
+ z-index: 1;
105
+ left: 0;
106
+ top: 0;
107
+ width: 100%;
108
+ height: 100%;
109
+ background-color: rgba(0, 0, 0, 0.5);
110
+ overflow: auto;
111
+ padding-top: 60px;
112
+ }
113
+
114
+ .modal-content {
115
+ background-color: #fff;
116
+ margin: 5% auto;
117
+ padding: 20px;
118
+ border: 1px solid #888;
119
+ width: 50%;
120
+ border-radius: 8px;
121
+ }
122
+
123
+ .close {
124
+ color: #aaa;
125
+ font-size: 2em;
126
+ font-weight: bold;
127
+ position: absolute;
128
+ right: 10px;
129
+ top: 10px;
130
+ cursor: pointer;
131
+ }
132
  </style>
133
  </head>
134
  <body>
 
140
  </div>
141
 
142
  <div class="reward-status">
143
+ <!-- First section: Item info -->
144
+ <div class="item-section">
145
+ <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
146
+ <div class="item-info">
147
+ <h3>{{ item.name }}</h3>
148
+ <p>Price: ${{ "%.2f"|format(item.price) }}</p>
 
 
 
 
 
 
 
 
 
 
 
 
149
  </div>
150
+ </div>
151
+
152
+ <!-- Second section: Ingredients -->
153
+ <div class="item-section">
154
+ <div class="ingredient-card">
155
+ {% for ingredient in item.ingredients %}
156
+ <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
157
+ <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
158
+ <p>{{ ingredient.name }}</p>
159
+ </div>
160
+ {% endfor %}
161
+ </div>
162
+ </div>
163
  </div>
164
  </div>
165
 
 
181
  </div>
182
 
183
  <script>
 
184
  function showIngredientDetails(name, image, healthBenefits, funFacts) {
185
  const healthBenefitsList = healthBenefits.split(',');
186
  const funFactsList = funFacts.split(',');