Merge pull request #600 from Subhajit-2023-44/7

Add a pop up dialog box for subscribing to newsletter done ! #591 ✨✨
sakeel-103 · Nov 9, 2024 · 33a2052 · 33a2052
2 parents b205389 + b6ed7c6
commit 33a2052
Show file tree

Hide file tree

Showing 3 changed files with 231 additions and 1 deletion.
diff --git a/newsletterpopup.jpg b/newsletterpopup.jpg
diff --git a/src/index.html b/src/index.html
@@ -297,12 +297,177 @@
       margin-top: 10px;
       color: #333;
     }
-  </style>
+
+    .popup-nl {
+
+    display: none; /* Hidden by default */
+    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-nl h1 {
+
+    font-size: 24px;
+    background: linear-gradient(to right, #87a5b5, #4c697b);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    text-align: center;
+    margin-bottom: 12px;
+    margin-top: 35px;
+
+}
+
+.h2-nl {
+
+    font-size: 18px;
+    margin-bottom: 8px;
+    text-align: center;
+    color: #333;
+
+}
+
+.pop_up-nl {
+
+    margin-bottom: 15px;
+    font-weight: bold;
+    background: linear-gradient(135deg, #1e7654, #20a795);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 12.7px;
+    text-align: center;
+
+}
+
+input[type="email"] {
+
+    width: 91%;
+    padding: 10px;
+    margin-bottom: 16px;
+    border: 1px solid #000000;
+    border-radius: 5px;
+    font-size: 14px;
+
+}
+
+.signup-btn1-nl {
+
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    background: radial-gradient(circle, #bbcabf, #263f59);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+
+}
+
+.signup-btn1-nl:hover {
+
+    background-color: #ff4aac;
+
+}
+
+.no-thanks-nl {
+
+    display: block;
+    margin-top: 10px;
+    color: #888;
+    text-decoration: none;
+    margin-bottom: 15px;
+
+}
+
+.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;
+}
+
+
+</style>
+
   <!-- Add Font Awesome CDN in the <head> section -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 
 <body>
+
   <app-root></app-root>
   <button id="scrollToTopBtn" class="scrollToTop">↑</button>
 
@@ -1373,6 +1538,36 @@ <h2>Contact Us</h2>
 
     <!-- Testimonials Section -->
 
+    <!-- Popup structure -->
+    <div id="popup-nl" class="popup-nl">
+      <div class="popup-content-nl">
+
+          <div class="popup-left-nl">
+              <img src="newsletterpopup.jpg" alt="finance">
+          </div>
+
+          <div class="popup-right-nl">
+              <a href="#" class="close1-btn-nl close-nl">X</a>
+              <h1>Subscribe to Newsletter</h1>
+              <h2 class="h2-nl">Stay Updated, Stay Ahead!</h2>
+              <p class="pop_up-nl">Join our community of graph theory enthusiasts, students, and professionals! Stay informed about the latest updates, new features, and educational content related to Graph Traversal Algorithms like DFS and BFS.</p>
+              <form id="emailForm-nl">
+                  <input type="email" id="email-nl" placeholder="Enter your email" required>
+                  <button type="submit" class="signup-btn1-nl">Subscribe</button>
+              </form>
+              <a href="#" class="no-thanks-nl close-nl">No thanks</a>
+              <p class="terms-nl">By subscribing, you agree to our <a href="terms&cond.html">Terms</a> and <a href="privacynotice.html">Privacy Policy</a>.</p>
+          </div>
+
+      </div>
+
+  </div>
+
+  <!-- Include your JavaScript file -->
+  <script src="newsletterpopup.js"></script> <!-- Ensure correct path to JS file -->
+
+    <script src="\src\newsletterpopup.js"></script>
+
 
 
 

diff --git a/src/newsletterpopup.js b/src/newsletterpopup.js
@@ -0,0 +1,35 @@
+// Show the pop-up automatically when the page loads
+window.onload = function() {
+    document.getElementById('popup-nl').style.display = 'flex';
+};
+
+// 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 clicking outside the pop-up content
+window.addEventListener('click', function(event) {
+    const popupContent = document.querySelector('.popup-content-nl'); // Select the popup content
+    // If the click is outside of the popup content, close the popup
+    if (event.target === document.getElementById('popup-nl')) {
+        document.getElementById('popup-nl').style.display = 'none';
+    }
+});
+
+// Handle form submission
+document.getElementById('emailForm-nl').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const email = document.getElementById('email-nl').value;
+    if (email) {
+        alert(`Your email ID ${email} has been registered successfully for the newsletter.`);
+        document.getElementById('popup-nl').style.display = 'none'; // Hide the popup after form submission
+    }
+});
+
+// Handle "No thanks" link
+document.querySelector('.no-thanks-nl').addEventListener('click', function(event) {
+    event.preventDefault();
+    document.getElementById('popup-nl').style.display = 'none'; // Hide the popup when "No thanks" is clicked
+});