Merge pull request #506 from bristiHalder/main

Non-Responsive 'Book Table' Button Issue Solved

index.html

@@ -34,7 +34,7 @@
 
 
     <!--Navbar Start-->
-    <nav class="navbar navbar-expand-lg fixed-top">
+    <nav class="navbar navbar-expand-lg">
         <div class="container-fluid">
             <a class="navbar-brand fw-bold" href="index.html"><b>Foodie</b></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -143,7 +143,10 @@ <h1>Click & Collect</h1><br>
             </div>
             <div class="box">
                 <h1>Restaurant Dining</h1><br>
+main
+                <a href="#" onclick="openBookingModal()">Book Table</a>
                 <a href="#" class="btn">Book Table</a>
+ main
 
             </div>
         </div>
@@ -260,6 +263,47 @@ <h3>Juices</h3>
 
     </section>
 
+    <!-- Booking Modal  -->
+    <div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="bookingModalLabel">Book a Table</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form id="bookingForm">
+                        <div class="mb-3">
+                            <label for="name" class="form-label">Name</label>
+                            <input type="text" class="form-control" id="name" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="email" class="form-label">Email address</label>
+                            <input type="email" class="form-control" id="email" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="phone" class="form-label">Phone</label>
+                            <input type="tel" class="form-control" id="phone" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="date" class="form-label">Date</label>
+                            <input type="date" class="form-control" id="date" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="time" class="form-label">Time</label>
+                            <input type="time" class="form-control" id="time" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="guests" class="form-label">Number of Guests</label>
+                            <input type="number" class="form-control" id="guests" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="app_download">
         <h4>Free Delivery!</h4>
         <h2>Download the App now!</h2>
@@ -372,10 +416,30 @@ <h4>Follow Us</h4>
         window.addEventListener('beforeunload', function (event) {
             localStorage.clear();
         });
-        const btn = document.querySelector('.btn')
+
+        const btn = document.querySelector('.btn');
         btn.onclick = () => {
-            location.href = "./Html-files/menu.html"
+            location.href = "./Html-files/menu.html";
         }
+ main
+
+        function redirectLogin() {
+            window.location.href = "Html-files/login.html";
+        }
+
+        function redirectSignup() {
+            window.location.href = "Html-files/signup.html";
+        }
+
+        window.addEventListener('scroll', function() {
+  var navbar = document.querySelector('.navbar');
+  if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
+    navbar.classList.add('scrolled');
+  } else {
+    navbar.classList.remove('scrolled');
+  }
+});
+
         window.addEventListener('scroll', function () {
             var navbar = document.querySelector('.navbar');
             if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
@@ -384,8 +448,15 @@ <h4>Follow Us</h4>
                 navbar.classList.remove('scrolled');
             }
         });
+ main
 
+        function openBookingModal() {
+            var bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
+            bookingModal.show();
+        }
     </script>
+ main
+
 <script type="text/javascript">
     (function(d, t) {
         var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
@@ -408,5 +479,6 @@ <h4>Follow Us</h4>
         window.location.href = "Html-files/signup.html";
     }
 </script>
+ main
 
 </html>