Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskSalesTeam7
Sleeping

App Files Community
nagasurendra commited on
Commit
95ee1a9
·
verified ·
1 Parent(s): e8e2040

Update templates/reward_status.html

Browse files
Files changed (1) hide show
  1. templates/reward_status.html +5 -24
templates/reward_status.html CHANGED
@@ -11,13 +11,11 @@
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;
@@ -26,12 +24,10 @@
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;
@@ -44,7 +40,6 @@
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;
@@ -53,43 +48,36 @@
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;
@@ -110,30 +98,28 @@
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>
135
 
136
-
137
  <div class="container">
138
  <div class="order-confirmed">
139
  <h1>Order Confirmed!</h1>
@@ -185,25 +171,20 @@
185
  function showIngredientDetails(name, image, healthBenefits, funFacts) {
186
  const healthBenefitsList = healthBenefits.split(',');
187
  const funFactsList = funFacts.split(',');
188
-
189
  document.getElementById("ingredientName").textContent = name;
190
  document.getElementById("ingredientImage").src = image;
191
-
192
  document.getElementById("healthBenefits").innerHTML = '';
193
  document.getElementById("funFacts").innerHTML = '';
194
-
195
  healthBenefitsList.forEach(function(item) {
196
  const li = document.createElement("li");
197
  li.textContent = item.trim();
198
  document.getElementById("healthBenefits").appendChild(li);
199
  });
200
-
201
  funFactsList.forEach(function(item) {
202
  const li = document.createElement("li");
203
  li.textContent = item.trim();
204
  document.getElementById("funFacts").appendChild(li);
205
  });
206
-
207
  document.getElementById("ingredientModal").style.display = "block";
208
  }
209
 
@@ -213,4 +194,4 @@
213
  </script>
214
 
215
  </body>
216
- </html>
 
11
  margin: 0;
12
  padding: 0;
13
  }
 
14
  .container {
15
  width: 90%;
16
  margin: auto;
17
  padding-top: 20px;
18
  }
 
19
  .order-confirmed {
20
  background-color: #fff;
21
  padding: 20px;
 
24
  text-align: center;
25
  margin-bottom: 20px;
26
  }
 
27
  .order-confirmed h1 {
28
  font-size: 2em;
29
  color: #ff6f00;
30
  }
 
31
  .reward-status {
32
  display: flex;
33
  justify-content: space-between;
 
40
  max-height: 800px;
41
  overflow: hidden;
42
  }
 
43
  .item-section {
44
  width: 100%; /* Default to 100% width on small screens */
45
  height: auto;
 
48
  justify-content: space-between;
49
  padding: 10px;
50
  }
 
51
  @media (min-width: 768px) {
52
  .item-section {
53
  width: 48%; /* When on larger screens, use 48% to create side-by-side layout */
54
  }
55
  }
 
56
  .item-image {
57
  width: 100%;
58
  height: 250px;
59
  object-fit: cover;
60
  border-radius: 8px;
61
  }
 
62
  .item-info {
63
  text-align: center;
64
  }
 
65
  .item-info h3 {
66
  font-size: 1.5em;
67
  margin-top: 10px;
68
  }
 
69
  .ingredient-card {
70
  display: flex;
71
  justify-content: space-between;
72
  padding-top: 10px;
73
  flex-wrap: wrap;
74
  }
 
75
  .ingredient {
76
  width: 48%;
77
  text-align: center;
78
  cursor: pointer;
79
  margin-top: 10px;
80
  }
 
81
  .ingredient img {
82
  width: 100%;
83
  height: 100px;
 
98
  overflow: auto;
99
  padding-top: 60px;
100
  }
 
101
  .modal-content {
102
  background-color: #fff;
103
  margin: 5% auto;
104
  padding: 20px;
105
  border: 1px solid #888;
106
+ width: 80%; /* Changed to 80% of screen width */
107
  border-radius: 8px;
108
+ position: relative;
109
  }
 
110
  .close {
111
  color: #aaa;
112
  font-size: 2em;
113
  font-weight: bold;
114
  position: absolute;
115
+ right: 20px; /* Positioned inside the modal */
116
+ top: 10px; /* Placed above the image */
117
  cursor: pointer;
118
  }
119
  </style>
120
  </head>
121
  <body>
122
 
 
123
  <div class="container">
124
  <div class="order-confirmed">
125
  <h1>Order Confirmed!</h1>
 
171
  function showIngredientDetails(name, image, healthBenefits, funFacts) {
172
  const healthBenefitsList = healthBenefits.split(',');
173
  const funFactsList = funFacts.split(',');
 
174
  document.getElementById("ingredientName").textContent = name;
175
  document.getElementById("ingredientImage").src = image;
 
176
  document.getElementById("healthBenefits").innerHTML = '';
177
  document.getElementById("funFacts").innerHTML = '';
 
178
  healthBenefitsList.forEach(function(item) {
179
  const li = document.createElement("li");
180
  li.textContent = item.trim();
181
  document.getElementById("healthBenefits").appendChild(li);
182
  });
 
183
  funFactsList.forEach(function(item) {
184
  const li = document.createElement("li");
185
  li.textContent = item.trim();
186
  document.getElementById("funFacts").appendChild(li);
187
  });
 
188
  document.getElementById("ingredientModal").style.display = "block";
189
  }
190
 
 
194
  </script>
195
 
196
  </body>
197
+ </html>