Add a Responsive pop up dialog box for subscribing to newsletter done ! #1923

index.html

@@ -40,7 +40,7 @@
     <link rel="stylesheet" href= "RatingStyle.css">
     <link rel="stylesheet" href="button-ui.css">
     <link rel="stylesheet" href= "style.css" />
-    <link rel="stylesheet" href= "./styles/popup.css">
+
     <link rel="stylesheet" href= "cookie-popup.css">
     <link rel="preconnect" href= "https://fonts.googleapis.com" />
     <link rel="preconnect" href= "https://fonts.gstatic.com" crossorigin />
@@ -571,32 +571,30 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
     </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 id="popup-nl" class="popup-nl">
+  <div class="popup-content-nl">
+      <div class="popup-left-nl">
+          <img src="popup.jpg" alt="finance">
       </div>
-      <div class="popup-right">   
-        <button id="cross-btn" class="cross-btn">&times;</button>
+
+      <div class="popup-right-nl">
+          <a href="# " class="close1-btn-nl close-nl">X</a>
+
           <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>
+          <h2 class="h2-nl">Join BuddyTrail and Plan Your Dream Vacation Today!</h2>
+          <p class="pop_up-nl">Sign up to receive 20% discount on your first booking!</p>
+          <form id="emailForm-nl">
+              <input type="email" id="email-nl" placeholder="Enter your email" required>
+              <button type="submit" class="signup-btn1-nl">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="terms_of_service.html" style="text-decoration: underline;">Terms of Service</a> and <a id="link" href="privacypolicy.html" style="text-decoration: underline;">Privacy Policy</a></p>
+          <a href="#" class="no-thanks-nl close-nl">No thanks</a>
+          <p class="terms-nl" style="white-space: nowrap;">By subscribing to newsletters, you agree to our <br><a href="terms&cond.html">Terms of Service</a> and <a href="privacynotice.html">Privacy Policy</a>.</p>
       </div>
   </div>
 </div>
-<script>
-  document.getElementById("cross-btn").addEventListener("click", function() {
-    document.getElementById("popup").style.display = "none";
-});
+<script src="script/popup.js"></script>
 
-</script>
 <!-- Pop up HTML ends Here -->
 
 <!-- JS to handle hamburger and close button -->
@@ -3287,7 +3285,7 @@ <h3>About Us</h3>
           box-sizing: border-box;
       }
       button[type="submit"] {
-          width: 100px;
+
           padding: 6px;
           font-size: 14px;
       }

script/popup.js

@@ -1,48 +1,33 @@
- // Delay in milliseconds 
- const popupDelay = 15000; 
 
- // Function to show the popup if it hasn't been shown yet in this session
- function showPopupIfNeeded() {
-     if (!sessionStorage.getItem('popupShown')) {
-         // Delay the popup display
-         setTimeout(() => {
-             document.getElementById('popup').style.display = 'flex';
-             sessionStorage.setItem('popupShown', 'true'); // Mark popup as shown
-         }, popupDelay);
-     }
- }
-
-    // Use pageshow to handle page loads and back navigation
-    window.addEventListener('pageshow', function(event) {
-        if (event.persisted || performance.getEntriesByType('navigation')[0].type === 'back_forward') {
-            // Detect browser back/forward navigation
-            showPopupIfNeeded();
-        } else {
-            // Handle normal page load
-            showPopupIfNeeded();
-        }
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if the user has already subscribed
+    if (!localStorage.getItem('subscribed')) {
+      document.getElementById('popup-nl').style.display = 'flex'; // Show the popup immediately
+    }
+
+    // Close the pop-up when the user clicks the close button
+    document.querySelector('.close-nl').addEventListener('click', function() {
+        document.getElementById('popup-nl').style.display = 'none';
     });
-
-    // 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) {
+    document.getElementById('emailForm-nl').addEventListener('submit', function(event) {
         event.preventDefault();
-
-        const email = document.getElementById('email').value;
+  
+        const email = document.getElementById('email-nl').value;
         if (email) {
-            alert(`Thank you! A 20% discount code has been sent to ${email}`);
-            document.getElementById('popup').style.display = 'none';
+            alert(`Your email ID ${email} has been registered successfully for the newsletter.`);
+            document.getElementById('popup-nl').style.display = 'none'; // Hide the popup
+
+            // Set the subscribed flag in localStorage
+            localStorage.setItem('subscribed', 'true');
         }
     });
-
-    // Handle "No thanks" button
-    document.getElementById('no-thanks').addEventListener('click', function(event) {
+  
+    // Handle "No thanks" link
+    document.querySelector('.no-thanks-nl').addEventListener('click', function(event) {
         event.preventDefault();
-        document.getElementById('popup').style.display = 'none';
+        document.getElementById('popup-nl').style.display = 'none';
     });
+  });
+

style.css

@@ -252,7 +252,7 @@ h5 {
 }
 
 a {
-  color: white;
+  color: #1969bb;
   text-decoration: none;
 }
 
@@ -3121,3 +3121,204 @@ body {
   padding-left: 30px; /* get in touch padding for icon*/
 }
 /* fa icon end */
+/* Newsletter pop-up */
+
+.popup-nl {
+
+  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: 1009;
+
+}
+
+.popup-content-nl {
+
+  display: flex;
+  background-color: white;
+  border-radius: 10px;
+  max-width: 800px;
+  height: 450px;
+  width: 700px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+
+}
+
+.close1-btn-nl {
+
+  width: 20px;
+  cursor: pointer;
+  margin: 18px 10px;
+  position: absolute;
+  top: -4px;
+  right: 12px;
+  font-size: 18px;
+  font-weight: 800;
+
+}
+
+.popup-left-nl img {
+
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+}
+
+.popup-right-nl {
+
+  padding: 20px;
+  width: 50%;
+  display: flex;
+  flex-direction: column; 
+  align-items: center;
+  justify-content: center;
+
+}
+
+.popup-left-nl {
+
+  flex: 1;
+
+}
+
+.popup-nl h1 {
+
+  font-size: 24px;
+  background: linear-gradient(to right, #405cac, #04b9c5, #0058ff); 
+  -webkit-text-fill-color: transparent; 
+  -webkit-background-clip: text; 
+  text-align: center;
+  margin-bottom: 12px;
+  margin-top: 35px;
+
+}
+
+
+.h2-nl{
+
+  font-size: 18px;
+  margin-top: -5px;
+  text-align: center;
+  color: #333;
+
+}
+
+.pop_up-nl {
+
+  margin-bottom: 15px;
+  font-weight: bold;
+  background: -webkit-linear-gradient(left, #04819a, #559028, #dbc56e);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 12.7px;
+
+}
+
+.bold{
+
+  font-size: 13.1px;
+
+}
+
+input[type="email"] {
+
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 16px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  font-size: 14px;
+
+}
+
+.signup-btn1-nl {
+
+  width: 100%;
+  height: 30px;
+  text-align: center;
+  background: linear-gradient(to right, #1d8afb, #006bd8, #1d8afb);
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+
+}
+
+.signup-btn1-nl:hover {
+
+  background-color: #4682B4;
+
+}
+
+.no-thanks-nl {
+
+  display: block;
+  margin-top: 10px;
+  color: #888;
+  text-decoration: none;
+  margin-bottom: 15px;
+  font-size: 13px;
+
+}
+
+.no-thanks-nl:hover {
+
+  color: #000000;
+  font-size: 14px;
+
+}
+
+.terms-nl {
+
+  margin-top: 15px;
+  font-size: 10px;
+  color: #888;
+
+}
+
+.terms-nl a {
+
+  display: inline;
+
+}
+
+.terms-nl a:hover {
+
+  text-decoration: underline;
+
+}
+
+.popup-right-nl p {
+
+  margin-top: 0;
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 13px;
+
+}
+
+#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;
+
+}
+