Hugging Face's logo

Spaces:
geethareddy
/
BiryaniHubflaskcustomable
Sleeping

App Files Community
geethareddy commited on
Commit
89e45dd
·
verified ·
1 Parent(s): 36d46f9

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +273 -109
templates/menu.html CHANGED
@@ -7,108 +7,177 @@
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: Arial, sans-serif;
13
- background-color: #fdf4e3;
14
- margin: 0;
15
- padding: 0;
16
- display: flex;
17
- flex-direction: column;
18
- }
19
- .container {
20
- max-width: 900px;
21
- }
22
- .menu-card {
23
- max-width: 350px;
24
- border-radius: 15px;
25
- overflow: hidden;
26
- background-color: #fff;
27
- margin: auto;
28
- display: flex;
29
- flex-direction: column;
30
- }
31
- .menu-image {
32
- height: 200px;
33
- width: 100%;
34
- object-fit: fill;
35
- border-radius: 15px 15px 0 0;
36
- }
37
- .card-title {
38
- font-size: 1.2rem;
39
- font-weight: bold;
40
- margin: 10px 0;
41
- }
42
- .card-text {
43
- font-size: 1rem;
44
- color: #6c757d;
45
- }
46
- .btn-primary {
47
- font-size: 13px;
48
- font-weight: bold;
49
- border-radius: 5px;
50
- width: 100px;
51
- background-color: #0FAA39;
52
- border-color: #0FAA39;
53
- }
54
- .btn-primary:hover {
55
- background-color: #0FAA39;
56
- border-color: #0FAA39;
57
- }
58
- .btn-primary:active,
59
- .btn-primary:focus {
60
- background-color: #0FAA39;
61
- border-color: #ffffff;
62
- box-shadow: none;
63
- }
64
- .view-cart-container {
65
- position: fixed;
66
- bottom: 20px;
67
- right: 20px;
68
- z-index: 999;
69
- }
70
- .view-cart-button {
71
- background-color: #0FAA39;
72
- color: #fff;
73
- padding: 10px 20px;
74
- border-radius: 30px;
75
- font-size: 1rem;
76
- font-weight: bold;
77
- text-decoration: none;
78
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
79
- display: flex;
80
- align-items: center;
81
- justify-content: center;
82
- }
83
- .view-cart-button:hover {
84
- background-color: #109835;
85
- text-decoration: none;
86
- }
87
- .fixed-search-container {
88
- position: absolute;
89
- top: 90px;
90
- left: 50%;
91
- transform: translateX(-50%);
92
- width: 80%;
93
- max-width: 600px;
94
- z-index: 999;
95
- background-color: white;
96
- padding: 10px;
97
- border-radius: 25px;
98
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
99
- }
100
- /* Menu card custom styles */
101
- .menu-item-wrapper {
102
- display: flex;
103
- justify-content: space-between;
104
- align-items: center;
105
- }
106
- .customizable-label {
107
- font-size: 0.9rem;
108
- color: #6c757d;
109
- margin-top: 10px;
110
- }
111
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </head>
113
  <body>
114
  <div class="container mt-4">
@@ -124,14 +193,12 @@
124
  <div class="card-body">
125
  <h5 class="card-title">{{ item.Name }}</h5>
126
  <p class="card-text">${{ item.Price__c }}</p>
127
- <div class="menu-item-wrapper">
128
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
129
- onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
130
  Add
131
  </button>
132
- {% if item.Section__c != 'Biryanis' %}
133
- <span class="customizable-label">Customisable</span>
134
- {% endif %}
135
  </div>
136
  </div>
137
  </div>
@@ -141,6 +208,103 @@
141
  {% endfor %}
142
  </div>
143
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  <div class="view-cart-container">
145
  <a href="/cart" class="view-cart-button">
146
  View Cart
@@ -150,7 +314,7 @@
150
  <script>
151
  function showItemDetails(name, price, image, description, section, selectedCategory) {
152
  document.getElementById('modal-name').innerText = name;
153
- document.getElementById('modal-price').innerText = `$${price}`;
154
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
155
  document.getElementById('modal-description').innerText = description || 'No description available.';
156
  }
@@ -158,4 +322,4 @@
158
 
159
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
160
  </body>
161
- </html>
 
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ background-color: #f8f1e9;
14
+ margin: 0;
15
+ padding: 0;
16
+ display: flex;
17
+ flex-direction: column;
18
+ }
19
+ .container {
20
+ max-width: 1000px;
21
+ padding: 20px;
22
+ }
23
+ h1 {
24
+ font-weight: 600;
25
+ color: #2c2c2c;
26
+ margin-bottom: 30px;
27
+ }
28
+ h3 {
29
+ font-weight: 500;
30
+ color: #444;
31
+ margin-top: 20px;
32
+ }
33
+ .menu-card {
34
+ border-radius: 20px;
35
+ overflow: hidden;
36
+ background-color: #fff;
37
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
38
+ transition: transform 0.2s ease-in-out;
39
+ }
40
+ .menu-card:hover {
41
+ transform: translateY(-5px);
42
+ }
43
+ .menu-image {
44
+ height: 180px;
45
+ width: 100%;
46
+ object-fit: cover;
47
+ border-radius: 20px 20px 0 0;
48
+ }
49
+ .card-body {
50
+ padding: 15px;
51
+ }
52
+ .card-title {
53
+ font-size: 1.1rem;
54
+ font-weight: 600;
55
+ color: #333;
56
+ margin-bottom: 5px;
57
+ }
58
+ .card-text {
59
+ font-size: 1rem;
60
+ color: #e67e22;
61
+ font-weight: 500;
62
+ margin-bottom: 10px;
63
+ }
64
+ .btn-primary {
65
+ font-size: 14px;
66
+ font-weight: 600;
67
+ border-radius: 8px;
68
+ padding: 8px 20px;
69
+ background-color: #e67e22;
70
+ border-color: #e67e22;
71
+ transition: background-color 0.3s ease;
72
+ }
73
+ .btn-primary:hover {
74
+ background-color: #d35400;
75
+ border-color: #d35400;
76
+ }
77
+ .btn-primary:active,
78
+ .btn-primary:focus {
79
+ background-color: #d35400;
80
+ border-color: #d35400;
81
+ box-shadow: none;
82
+ }
83
+ .customizable-label {
84
+ font-size: 0.85rem;
85
+ color: #888;
86
+ font-style: italic;
87
+ }
88
+ .view-cart-container {
89
+ position: fixed;
90
+ bottom: 20px;
91
+ right: 20px;
92
+ z-index: 999;
93
+ }
94
+ .view-cart-button {
95
+ background-color: #e67e22;
96
+ color: #fff;
97
+ padding: 12px 25px;
98
+ border-radius: 50px;
99
+ font-size: 1rem;
100
+ font-weight: 600;
101
+ text-decoration: none;
102
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ transition: background-color 0.3s ease;
107
+ }
108
+ .view-cart-button:hover {
109
+ background-color: #d35400;
110
+ text-decoration: none;
111
+ }
112
+ /* Modal Styling */
113
+ .modal-content {
114
+ border-radius: 15px;
115
+ padding: 20px;
116
+ }
117
+ .modal-header {
118
+ border-bottom: none;
119
+ padding-bottom: 0;
120
+ }
121
+ .modal-title {
122
+ font-size: 1.3rem;
123
+ font-weight: 600;
124
+ color: #333;
125
+ }
126
+ .modal-body img {
127
+ width: 100%;
128
+ height: 200px;
129
+ object-fit: cover;
130
+ border-radius: 10px;
131
+ margin-bottom: 15px;
132
+ }
133
+ .modal-body p {
134
+ font-size: 0.95rem;
135
+ color: #666;
136
+ }
137
+ .modal-body h6 {
138
+ font-size: 1rem;
139
+ font-weight: 600;
140
+ color: #333;
141
+ margin-top: 15px;
142
+ margin-bottom: 10px;
143
+ }
144
+ .modal-body .form-check-label {
145
+ font-size: 0.9rem;
146
+ color: #555;
147
+ }
148
+ .modal-body .form-check-input {
149
+ margin-right: 10px;
150
+ }
151
+ .modal-body .price {
152
+ font-size: 0.85rem;
153
+ color: #e67e22;
154
+ font-weight: 500;
155
+ margin-left: 5px;
156
+ }
157
+ .modal-body textarea {
158
+ width: 100%;
159
+ border-radius: 8px;
160
+ border: 1px solid #ddd;
161
+ padding: 10px;
162
+ font-size: 0.9rem;
163
+ resize: none;
164
+ }
165
+ .modal-footer {
166
+ border-top: none;
167
+ padding-top: 0;
168
+ }
169
+ .modal-footer .btn {
170
+ background-color: #e67e22;
171
+ border-color: #e67e22;
172
+ font-weight: 600;
173
+ border-radius: 8px;
174
+ padding: 10px 20px;
175
+ }
176
+ .modal-footer .btn:hover {
177
+ background-color: #d35400;
178
+ border-color: #d35400;
179
+ }
180
+ </style>
181
  </head>
182
  <body>
183
  <div class="container mt-4">
 
193
  <div class="card-body">
194
  <h5 class="card-title">{{ item.Name }}</h5>
195
  <p class="card-text">${{ item.Price__c }}</p>
196
+ <div class="menu-item-wrapper d-flex justify-content-between align-items-center">
197
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
198
+ onclick="showItemDetails('{{ item.Name }}', '{{ item.Price_c }}', '{{ item.Image2c }}', '{{ item.Descriptionc }}', '{{ item.Section_c }}', '{{ selected_category }}')">
199
  Add
200
  </button>
201
+ <span class="customizable-label">Customizable</span>
 
 
202
  </div>
203
  </div>
204
  </div>
 
208
  {% endfor %}
209
  </div>
210
 
211
+ <!-- Modal for Item Details -->
212
+ <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
213
+ <div class="modal-dialog modal-lg">
214
+ <div class="modal-content">
215
+ <div class="modal-header">
216
+ <h5 class="modal-title" id="modal-name"></h5>
217
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
218
+ </div>
219
+ <div class="modal-body">
220
+ <img id="modal-img" src="" alt="Item Image">
221
+ <p id="modal-description"></p>
222
+ <h6 id="modal-price"></h6>
223
+
224
+ <!-- Customization Options -->
225
+ <h6>Choose Oil/Ghee Preference</h6>
226
+ <div class="d-flex flex-wrap">
227
+ <div class="form-check me-3">
228
+ <input class="form-check-input" type="radio" name="oilPreference" id="ghee">
229
+ <label class="form-check-label" for="ghee">Ghee</label>
230
+ </div>
231
+ <div class="form-check me-3">
232
+ <input class="form-check-input" type="radio" name="oilPreference" id="butter">
233
+ <label class="form-check-label" for="butter">Butter</label>
234
+ </div>
235
+ <div class="form-check me-3">
236
+ <input class="form-check-input" type="radio" name="oilPreference" id="mustardOil">
237
+ <label class="form-check-label" for="mustardOil">Mustard Oil</label>
238
+ </div>
239
+ <div class="form-check">
240
+ <input class="form-check-input" type="radio" name="oilPreference" id="oliveOil">
241
+ <label class="form-check-label" for="oliveOil">Olive Oil</label>
242
+ </div>
243
+ </div>
244
+
245
+ <h6>Extra Add-ons</h6>
246
+ <div class="d-flex flex-wrap">
247
+ <div class="form-check me-3">
248
+ <input class="form-check-input" type="checkbox" id="extraPaneer">
249
+ <label class="form-check-label" for="extraPaneer">Extra Paneer <span class="price">($2)</span></label>
250
+ </div>
251
+ <div class="form-check me-3">
252
+ <input class="form-check-input" type="checkbox" id="extraButter">
253
+ <label class="form-check-label" for="extraButter">Extra Butter <span class="price">($2)</span></label>
254
+ </div>
255
+ <div class="form-check">
256
+ <input class="form-check-input" type="checkbox" id="extraCream">
257
+ <label class="form-check-label" for="extraCream">Extra Cream <span class="price">($2)</span></label>
258
+ </div>
259
+ </div>
260
+
261
+ <h6>Accompaniments</h6>
262
+ <div class="d-flex flex-wrap">
263
+ <div class="form-check me-3">
264
+ <input class="form-check-input" type="checkbox" id="butterRoti">
265
+ <label class="form-check-label" for="butterRoti">Butter Roti <span class="price">($1)</span></label>
266
+ </div>
267
+ <div class="form-check me-3">
268
+ <input class="form-check-input" type="checkbox" id="jeeraRice">
269
+ <label class="form-check-label" for="jeeraRice">Jeera Rice <span class="price">($1)</span></label>
270
+ </div>
271
+ <div class="form-check me-3">
272
+ <input class="form-check-input" type="checkbox" id="plainRice">
273
+ <label class="form-check-label" for="plainRice">Plain Rice <span class="price">($1)</span></label>
274
+ </div>
275
+ <div class="form-check">
276
+ <input class="form-check-input" type="checkbox" id="bagaraRice">
277
+ <label class="form-check-label" for="bagaraRice">Bagara Rice <span class="price">($1)</span></label>
278
+ </div>
279
+ </div>
280
+
281
+ <h6>Special Request</h6>
282
+ <textarea rows="3" placeholder="Enter any special instructions here..."></textarea>
283
+
284
+ <!-- Spice Level (Optional) -->
285
+ <h6>Spice Level</h6>
286
+ <div class="d-flex">
287
+ <div class="form-check me-3">
288
+ <input class="form-check-input" type="radio" name="spiceLevel" id="mild">
289
+ <label class="form-check-label" for="mild">Mild</label>
290
+ </div>
291
+ <div class="form-check me-3">
292
+ <input class="form-check-input" type="radio" name="spiceLevel" id="medium">
293
+ <label class="form-check-label" for="medium">Medium</label>
294
+ </div>
295
+ <div class="form-check">
296
+ <input class="form-check-input" type="radio" name="spiceLevel" id="spicy">
297
+ <label class="form-check-label" for="spicy">Spicy</label>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="modal-footer">
302
+ <button type="button" class="btn btn-primary">Add to Cart</button>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
  <div class="view-cart-container">
309
  <a href="/cart" class="view-cart-button">
310
  View Cart
 
314
  <script>
315
  function showItemDetails(name, price, image, description, section, selectedCategory) {
316
  document.getElementById('modal-name').innerText = name;
317
+ document.getElementById('modal-price').innerText = '$' + price;
318
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
319
  document.getElementById('modal-description').innerText = description || 'No description available.';
320
  }
 
322
 
323
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
324
  </body>
325
+ </html>