Spaces:

Swathi6
/

Biryanihub

Sleeping

App Files Files Community

Swathi6 commited on Apr 2

Commit

5169f7c

verified ·

1 Parent(s): 3a87e27

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +236 -205

templates/menu.html CHANGED Viewed

@@ -1,281 +1,312 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub Menu</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
-        /* General Styles */
         body {
             font-family: Arial, sans-serif;
-            background-color: #fdf4e3;
             margin: 0;
             padding: 0;
-            display: flex;
-            flex-direction: column;
         }
-        .container {
-            max-width: 900px;
-            margin-top: 50px;
         }
-        .menu-card {
-            max-width: 350px;
-            border-radius: 15px;
-            overflow: hidden;
-            background-color: #fff;
-            margin: auto;
-            display: flex;
-            flex-direction: column;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-        .menu-card:hover {
-            transform: scale(1.05);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         }
-        .menu-image {
-            height: 200px;
-            width: 100%;
-            object-fit: cover;
-            border-radius: 15px 15px 0 0;
-            cursor: pointer;
         }
-        .menu-image:hover {
-            transform: scale(1.05);
         }
-        .card-title {
-            font-size: 1.2rem;
-            font-weight: bold;
-            margin: 10px 0;
         }
-        .card-text {
-            font-size: 1rem;
-            color: #6c757d;
         }
-        .btn-primary {
-            font-size: 13px;
-            font-weight: bold;
             border-radius: 5px;
-            width: 100px;
-            background-color: #0FAA39;
-            border-color: #0FAA39;
         }
-        .btn-primary:hover {
-            background-color: #0FAA39;
-            border-color: #0FAA39;
         }
-        .btn-primary:active,
-        .btn-primary:focus {
-            background-color: #0FAA39;
-            border-color: #ffffff;
-            box-shadow: none;
         }
-        /* Modal Video Styles */
-        .modal-content {
-            background-color: #fff;
-            border-radius: 10px;
-            padding: 20px;
         }
-        #modal-video {
             width: 100%;
-            height: auto;
         }
-        .modal-header {
-            border-bottom: none;
         }
-        .modal-title {
-            font-size: 1.5rem;
-            font-weight: bold;
         }
-        /* Fixed View Cart Button */
-        .view-cart-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999;
         }
-        .view-cart-button {
-            background-color: #0FAA39;
-            color: #fff;
             padding: 10px 20px;
-            border-radius: 30px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-decoration: none;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: flex;
-            align-items: center;
-            justify-content: center;
         }
-        .view-cart-button:hover {
-            background-color: #109835;
-            text-decoration: none;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1 class="text-center">Biryani Hub Menu</h1>
-        <!-- Menu Item: Chicken Biryani -->
-        <h3 class="mt-4">Our Special Menu</h3>
-        <div class="row">
-            <!-- Item 1: Chicken Biryani -->
-            <div class="col-md-4 mb-4">
-                <div class="card menu-card">
-                    <!-- Image for Chicken Biryani, clicking triggers video modal -->
-                    <img src="chicken-biryani.jpg" class="card-img-top menu-image" alt="Chicken Biryani"
-                        data-video-url="https://www.w3schools.com/html/movie.mp4" <!-- Replace with actual video URL -->
-                        onclick="showVideo('https://www.w3schools.com/html/movie.mp4')">
-                    <div class="card-body">
-                        <h5 class="card-title">Chicken Biryani</h5>
-                        <p class="card-text">$15.99</p>
-                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                            onclick="showItemDetails('Chicken Biryani', 15.99, 'chicken-biryani.jpg', 'Delicious spicy chicken biryani.', 'Biryani', 'Non-Veg')">
-                            Add to Cart
-                        </button>
                     </div>
                 </div>
-            </div>
         </div>
-    </div>
-    <!-- View Cart Button -->
-    <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
-            View Cart
-        </a>
-    </div>
-    <!-- Video Modal for Chicken Biryani -->
-    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="videoModalLabel">Chicken Biryani Video</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <!-- Video Player -->
-                    <video id="modal-video" class="embed-responsive-item" controls>
-                        <source id="video-source" src="" type="video/mp4">
-                        Your browser does not support the video tag.
-                    </video>
-                </div>
-            </div>
         </div>
     </div>
-    <!-- Modal for Item Details -->
-    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <!-- Item Image -->
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image"
-                        style="max-height: 200px; object-fit: cover;">
-                    <!-- Item Name -->
-                    <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <!-- Item Price -->
-                    <p id="modal-price" class="text-muted text-center"></p>
-                    <!-- Item Description -->
-                    <p id="modal-description" class="text-secondary"></p>
-                    <!-- Add-ons -->
-                    <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
-                        <div id="addons-list" class="addons-container">Loading customization options...</div>
-                    </div>
-                    <div class="mt-4">
-                        <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
-                    </div>
-                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
-                </div>
-                <!-- Quantity Controls and Add to Cart Button -->
-                <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <!-- Quantity Controls -->
-                    <div class="d-flex align-items-center gap-2">
-                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly
-                            style="width: 50px;" />
-                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
-                    </div>
-                    <!-- Add to Cart Button -->
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-                </div>
-            </div>
         </div>
     </div>
-    <!-- JavaScript for Handling Video Display on Image Click -->
     <script>
-        function showVideo(videoUrl) {
-            const videoElement = document.getElementById('modal-video');
-            const videoSource = document.getElementById('video-source');
-            videoSource.src = videoUrl;
-            videoElement.load(); // Reload the video element to apply the new source
-            const videoModal = new bootstrap.Modal(document.getElementById('videoModal'));
-            videoModal.show();
-        }
-        // Show item details in the modal
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
         }
-        // Handle adding item to cart from the modal
-        function addToCartFromModal() {
-            const itemName = document.getElementById('modal-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-            const itemImage = document.getElementById('modal-img').src;
-            const quantity = parseInt(document.getElementById('quantityInput').value);
-            // Add to cart logic here
-            console.log(`Adding ${itemName} to cart with quantity ${quantity} and price $${itemPrice}`);
-            // Close the modal after adding to cart
-            const modal = document.getElementById('itemModal');
-            const modalInstance = bootstrap.Modal.getInstance(modal);
-            modalInstance.hide();
         }
-    </script>
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <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 &copy; 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>