Merge pull request #832 from PrAyAg9/bud

Issue #827 Solved :- Added Registration Pop up

index.html

@@ -8,10 +8,13 @@
       content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation"
     /> 
     <meta name="robots" content="index,follow" />
+
     <link rel="stylesheet" href="RatingStyle.css">
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./styles/popup.css">
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
     <link
       href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
       rel="stylesheet"
@@ -308,6 +311,29 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
   </nav>
 </header>
 
+
+<!-- Pop up HTML Starts Here -->
+ <!-- Pop-up for BuddyTrail -->
+<div id="popup" class="popup">
+  <div id="popup-content">
+      <div class="popup-left">
+          <img if="popupimage" src="./img/popup1.jpg" alt="Travel Image">
+      </div>
+      <div class="popup-right">
+          <h1>Ready for Your Next Adventure?</h1>
+          <p class="h2">Join <strong>BuddyTrail</strong> and Plan Your Dream Vacation Today!</p>
+          <p>Sign up to receive <strong> 20% discount </strong> on your first booking!</p>
+          <form id="emailForm">
+            <input type="email" id="email" placeholder="Enter your email" required>
+            <button type="submit" id="signup-btn">Sign Up</button>
+          </form>
+          <a href="#" id="no-thanks">No thanks</a>
+          <p id="terms">By signing up, you agree to our <a id="link" href="#1">Terms of Service</a> and <a id="link" href="#1">Privacy Policy</a></p>
+      </div>
+  </div>
+</div>
+<!-- Pop up HTML ends Here -->
+
 <!-- JS to handle hamburger and close button -->
 <script>
 
@@ -366,6 +392,8 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
   });
 </script>
 
+<script src="./script/popup.js"></script>
+
 
 
     <div id="progress-bar"></div>

script/popup.js

@@ -0,0 +1,28 @@
+// Show the pop-up automatically when the page loads
+window.onload = function() {
+    document.getElementById('popup').style.display = 'flex';
+};
+
+// Close the pop-up when the user clicks outside of it
+window.onclick = function(event) {
+    if (event.target === document.getElementById('popup')) {
+        document.getElementById('popup').style.display = 'none';
+    }
+};
+
+// Handle form submission
+document.getElementById('emailForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const email = document.getElementById('email').value;
+    if (email) {
+        alert(`Thank you! A 20% discount code has been sent to ${email}`);
+        document.getElementById('popup').style.display = 'none';
+    }
+});
+
+// Handlling "No thanks" button
+document.getElementById('no-thanks').addEventListener('click', function(event) {
+    event.preventDefault();
+    document.getElementById('popup').style.display = 'none';
+});

styles/popup.css

@@ -0,0 +1,103 @@
+/* Styling for the pop-up */
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  #popup-content {
+    display: flex;
+    background-color: #fff;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 750px;
+    height: 450px;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .popup-left img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .popup-right {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 50%;
+  }
+
+  .popup h1 {
+    font-size: 22px;
+    color: #000000;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .popup .h2 {
+    font-weight: bold;
+    font-size: 18px;
+    color: #007BFF;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .popup-right p{
+    font-size: 13px;
+    text-align: center;
+    color: #000000;
+  }
+
+  input[type="email"] {
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+
+  #signup-btn {
+    width: 100%;
+    padding: 8px;
+    background-color: #007BFF;
+    color: rgb(0, 0, 0);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 15px;
+    margin-bottom: 8px;
+    font-weight: 460;
+  }
+
+
+  .signup-btn:hover {
+    background-color: #6a00ff;
+  }
+
+  #no-thanks {
+    text-align: center;
+    color: #212121;
+    font-size: 14px;
+    margin-bottom: 8px;
+    font-weight: 470;
+
+  }
+
+  #terms {
+    font-size: 12px;
+    text-align: center;
+  }
+
+  #link{
+    color: black;
+  }
+