Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Menu Page</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| /* Basic Styles */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f4; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| header { | |
| background-color: #333; | |
| color: white; | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| .menu-container { | |
| margin: 20px; | |
| } | |
| .menu-category { | |
| margin-bottom: 20px; | |
| } | |
| .menu-category h2 { | |
| text-align: center; | |
| font-size: 24px; | |
| } | |
| .menu-item { | |
| background-color: white; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| border-radius: 5px; | |
| box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .menu-item h3 { | |
| margin: 0; | |
| font-size: 20px; | |
| } | |
| .menu-item p { | |
| margin: 0; | |
| font-size: 16px; | |
| color: #888; | |
| } | |
| .menu-item button { | |
| padding: 8px 12px; | |
| background-color: #28a745; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .menu-item button:hover { | |
| background-color: #218838; | |
| } | |
| .cart-button { | |
| padding: 12px 20px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| text-align: center; | |
| font-size: 18px; | |
| cursor: pointer; | |
| width: 100%; | |
| } | |
| .cart-button:hover { | |
| background-color: #0056b3; | |
| } | |
| .cart-icon { | |
| margin-right: 8px; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 10px; | |
| background-color: #333; | |
| color: white; | |
| position: fixed; | |
| width: 100%; | |
| bottom: 0; | |
| } | |
| .order-summary { | |
| margin: 20px; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 5px; | |
| box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .order-summary h3 { | |
| font-size: 24px; | |
| text-align: center; | |
| } | |
| .order-summary ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .order-summary li { | |
| padding: 10px; | |
| border-bottom: 1px solid #ddd; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .order-summary button { | |
| padding: 10px 20px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 18px; | |
| cursor: pointer; | |
| } | |
| .order-summary button:hover { | |
| background-color: #0056b3; | |
| } | |
| .cart-summary { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| } | |
| .cart-summary span { | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| .cart-summary button { | |
| background-color: #28a745; | |
| } | |
| .logout-button { | |
| padding: 12px 20px; | |
| background-color: #dc3545; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 18px; | |
| cursor: pointer; | |
| width: 100%; | |
| margin-top: 20px; | |
| } | |
| .logout-button:hover { | |
| background-color: #c82333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <h1>Welcome to Our Restaurant</h1> | |
| </header> | |
| <!-- Menu Content --> | |
| <div class="menu-container"> | |
| <!-- Main Course Category --> | |
| <div class="menu-category"> | |
| <h2>Main Course</h2> | |
| {% for item in menu_items %} | |
| <div class="menu-item"> | |
| <div> | |
| <h3>{{ item.name }}</h3> | |
| <p>Price: ₹{{ item.price }}</p> | |
| </div> | |
| <button onclick="addToCart('{{ item.name }}', {{ item.price }}, '{{ item.category }}')">Add to Cart</button> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <!-- Cart Button --> | |
| <div class="menu-category"> | |
| <button class="cart-button" onclick="showCart()"> | |
| <i class="fas fa-shopping-cart cart-icon"></i> View Cart | |
| </button> | |
| </div> | |
| <!-- Logout Button --> | |
| <div class="menu-category"> | |
| <button class="logout-button" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt cart-icon"></i> Logout | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Cart Summary (hidden initially) --> | |
| <div id="cart-summary" class="order-summary" style="display:none;"> | |
| <h3>Your Cart</h3> | |
| <ul id="cart-items-list"> | |
| <!-- Cart items will be dynamically listed here --> | |
| </ul> | |
| <div class="cart-summary"> | |
| <span>Total: ₹<span id="total-price">0</span></span> | |
| <button onclick="placeOrder()">Place Order</button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <p>Restaurant © 2025</p> | |
| </footer> | |
| <!-- JavaScript --> | |
| <script> | |
| let cart = []; | |
| // Add item to cart | |
| function addToCart(itemName, itemPrice, itemCategory) { | |
| cart.push({ name: itemName, price: itemPrice, category: itemCategory }); | |
| alert(`${itemName} added to cart!`); | |
| } | |
| // Show cart and order summary | |
| function showCart() { | |
| if (cart.length === 0) { | |
| alert("Your cart is empty!"); | |
| return; | |
| } | |
| // Update cart items list | |
| const cartItemsList = document.getElementById('cart-items-list'); | |
| cartItemsList.innerHTML = ''; | |
| let totalPrice = 0; | |
| cart.forEach(item => { | |
| const li = document.createElement('li'); | |
| li.innerHTML = `${item.name} - ₹${item.price}`; | |
| cartItemsList.appendChild(li); | |
| totalPrice += item.price; | |
| }); | |
| // Update total price | |
| document.getElementById('total-price').textContent = totalPrice; | |
| // Show cart summary | |
| document.getElementById('cart-summary').style.display = 'block'; | |
| } | |
| // Place the order | |
| function placeOrder() { | |
| if (cart.length === 0) { | |
| alert("Your cart is empty, cannot place the order."); | |
| return; | |
| } | |
| // Send the order to the backend (POST request) | |
| fetch('/order', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| customer_id: "user-id-placeholder", // Replace with actual user ID if necessary | |
| items: cart.map(item => ({ | |
| item_id: item.name, | |
| quantity: 1, // Assuming quantity is 1 for now | |
| })) | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| alert(data.message); | |
| cart = []; // Clear cart after placing the order | |
| document.getElementById('cart-summary').style.display = 'none'; // Hide cart summary | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('Error placing order'); | |
| }); | |
| } | |
| // Logout | |
| function logout() { | |
| fetch('/logout') | |
| .then(response => { | |
| window.location.href = "/"; // Redirect to home page after logout | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('Error logging out'); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |