Spaces:

Swathi6
/

Biryanihub

Sleeping

App Files Files Community

Swathi6 commited on Apr 2

Commit

3a87e27

verified ·

1 Parent(s): 384799f

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +166 -125

templates/menu.html CHANGED Viewed

@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>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>
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -19,6 +23,7 @@
         .container {
             max-width: 900px;
         }
         .menu-card {
@@ -29,6 +34,12 @@
             margin: auto;
             display: flex;
             flex-direction: column;
         }
         .menu-image {
@@ -37,11 +48,10 @@
             object-fit: cover;
             border-radius: 15px 15px 0 0;
             cursor: pointer;
-            transition: transform 0.3s ease;
         }
         .menu-image:hover {
-            transform: scale(1.05); /* Zoom in on hover */
         }
         .card-title {
@@ -76,7 +86,7 @@
             box-shadow: none;
         }
-        /* Video Modal Styling */
         .modal-content {
             background-color: #fff;
             border-radius: 10px;
@@ -96,145 +106,176 @@
             font-size: 1.5rem;
             font-weight: bold;
         }
     </style>
 </head>
 <body>
-<div class="container mt-4">
-    <h1 class="text-center">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 it triggers video -->
-                <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 this with your actual Chicken Biryani video URL -->
-                     onerror="this.src='https://via.placeholder.com/300x200.jpg?text=Image+Not+Available';"
-                     onclick="showVideo('https://www.w3schools.com/html/movie.mp4')"> <!-- Replace with actual video URL -->
-                <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>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;
         .container {
             max-width: 900px;
+            margin-top: 50px;
         }
         .menu-card {
             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 {
             object-fit: cover;
             border-radius: 15px 15px 0 0;
             cursor: pointer;
         }
         .menu-image:hover {
+            transform: scale(1.05);
         }
         .card-title {
             box-shadow: none;
         }
+        /* Modal Video Styles */
         .modal-content {
             background-color: #fff;
             border-radius: 10px;
             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>