Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

App Files Community
Swathi6 commited on
Commit
384799f
·
verified ·
1 Parent(s): a073b14

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +72 -2
templates/menu.html CHANGED
@@ -87,6 +87,15 @@
87
  width: 100%;
88
  height: auto;
89
  }
 
 
 
 
 
 
 
 
 
90
  </style>
91
  </head>
92
  <body>
@@ -100,10 +109,11 @@
100
  <!-- Item 1: Chicken Biryani -->
101
  <div class="col-md-4 mb-4">
102
  <div class="card menu-card">
 
103
  <img src="chicken-biryani.jpg" class="card-img-top menu-image" alt="Chicken Biryani"
104
- data-video-url="https://www.example.com/videos/chicken-biryani.mp4"
105
  onerror="this.src='https://via.placeholder.com/300x200.jpg?text=Image+Not+Available';"
106
- onclick="showVideo('https://www.example.com/videos/chicken-biryani.mp4')">
107
  <div class="card-body">
108
  <h5 class="card-title">Chicken Biryani</h5>
109
  <p class="card-text">$15.99</p>
@@ -143,6 +153,49 @@
143
  </div>
144
  </div>
145
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  <!-- JavaScript for Handling Video Display on Image Click -->
147
  <script>
148
  function showVideo(videoUrl) {
@@ -160,6 +213,23 @@
160
  document.getElementById('modal-price').innerText = `$${price}`;
161
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
162
  document.getElementById('modal-description').innerText = description || 'No description available.';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
163
  }
164
  </script>
165
 
 
87
  width: 100%;
88
  height: auto;
89
  }
90
+
91
+ .modal-header {
92
+ border-bottom: none;
93
+ }
94
+
95
+ .modal-title {
96
+ font-size: 1.5rem;
97
+ font-weight: bold;
98
+ }
99
  </style>
100
  </head>
101
  <body>
 
109
  <!-- Item 1: Chicken Biryani -->
110
  <div class="col-md-4 mb-4">
111
  <div class="card menu-card">
112
+ <!-- Image for Chicken Biryani, clicking it triggers video -->
113
  <img src="chicken-biryani.jpg" class="card-img-top menu-image" alt="Chicken Biryani"
114
+ data-video-url="https://www.w3schools.com/html/movie.mp4" <!-- Replace this with your actual Chicken Biryani video URL -->
115
  onerror="this.src='https://via.placeholder.com/300x200.jpg?text=Image+Not+Available';"
116
+ onclick="showVideo('https://www.w3schools.com/html/movie.mp4')"> <!-- Replace with actual video URL -->
117
  <div class="card-body">
118
  <h5 class="card-title">Chicken Biryani</h5>
119
  <p class="card-text">$15.99</p>
 
153
  </div>
154
  </div>
155
 
156
+ <!-- Modal for Item Details -->
157
+ <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
158
+ <div class="modal-dialog modal-dialog-centered">
159
+ <div class="modal-content">
160
+ <div class="modal-header">
161
+ <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
162
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
163
+ </div>
164
+ <div class="modal-body">
165
+ <!-- Item Image -->
166
+ <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
167
+ <!-- Item Name -->
168
+ <h5 id="modal-name" class="fw-bold text-center"></h5>
169
+ <!-- Item Price -->
170
+ <p id="modal-price" class="text-muted text-center"></p>
171
+ <!-- Item Description -->
172
+ <p id="modal-description" class="text-secondary"></p>
173
+ <!-- Add-ons -->
174
+ <div id="modal-addons" class="modal-addons mt-4">
175
+ <h6>Customization Options</h6>
176
+ <div id="addons-list" class="addons-container">Loading customization options...</div>
177
+ </div>
178
+ <div class="mt-4">
179
+ <h6>Custom Request</h6>
180
+ <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
181
+ </div>
182
+ <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
183
+ </div>
184
+ <!-- Quantity Controls and Add to Cart Button -->
185
+ <div class="modal-footer d-flex align-items-center justify-content-between">
186
+ <!-- Quantity Controls -->
187
+ <div class="d-flex align-items-center gap-2">
188
+ <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
189
+ <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
190
+ <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
191
+ </div>
192
+ <!-- Add to Cart Button -->
193
+ <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
  <!-- JavaScript for Handling Video Display on Image Click -->
200
  <script>
201
  function showVideo(videoUrl) {
 
213
  document.getElementById('modal-price').innerText = `$${price}`;
214
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
215
  document.getElementById('modal-description').innerText = description || 'No description available.';
216
+ document.getElementById('addons-list').innerHTML = 'Loading customization options...';
217
+ }
218
+
219
+ // Handle adding item to cart from the modal
220
+ function addToCartFromModal() {
221
+ const itemName = document.getElementById('modal-name').innerText;
222
+ const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
223
+ const itemImage = document.getElementById('modal-img').src;
224
+ const quantity = parseInt(document.getElementById('quantityInput').value);
225
+
226
+ // Add to cart logic here
227
+ console.log(`Adding ${itemName} to cart with quantity ${quantity} and price $${itemPrice}`);
228
+
229
+ // Close the modal after adding to cart
230
+ const modal = document.getElementById('itemModal');
231
+ const modalInstance = bootstrap.Modal.getInstance(modal);
232
+ modalInstance.hide();
233
  }
234
  </script>
235