Update index.html (#810)

Added confirmation message to newsletter form

index.html

@@ -1497,45 +1497,91 @@ <h4>Legal</h4><br>
             </ul>
           </section>
           <section class="footer-col">
-            <h4>RAPIDOC Newsletter</h4><br>
-            <p>
-              Subscribe to our newsletter for a weekly dose
-              of news, updates, helpful tips, and
-              exclusive offers.
-            </p>
-            <form action="#" class="subscribe-form">
-              <input type="email" placeholder="Your email" required>
-              <button type="submit">SUBSCRIBE</button>
-            </form>
-            <p class="confirmation-message">Thank you for subscribing!</p>
-          </section>
-          <style>
-            .confirmation-message {
-              display: none;
-              color: green;
-              margin-top: 10px;
-            }
-          </style>
-
-          <script>
-            document.querySelector('.subscribe-form').addEventListener('submit', function (event) {
-              event.preventDefault(); // Prevent the form from submitting in the traditional way
-
-              // Here you would normally send the form data to the server using fetch or XMLHttpRequest
-              // For demonstration purposes, we'll just show the confirmation message
-
-              const confirmationMessage = document.querySelector('.confirmation-message');
-              confirmationMessage.style.display = 'block'; // Show the confirmation message
-
-              // Clear the input field
-              this.querySelector('input[type="email"]').value = '';
-
-              // Optionally, you can hide the confirmation message after a few seconds
-              setTimeout(() => {
-                confirmationMessage.style.display = 'none';
-              }, 5000); // Hide after 5 seconds
-            });
-          </script>
+
+              <h4>RAPIDOC Newsletter</h4><br>
+              <p>
+                Subscribe to our newsletter for a weekly dose
+                of news, updates, helpful tips, and
+                exclusive offers.
+              </p>
+              <form action="#" class="subscribe-form">
+                <input type="email" placeholder="Your email" required>
+                <button type="submit">SUBSCRIBE</button>
+              </form>
+              <div id="popupModal" class="modal">
+                <div class="modal-content">
+                  <span class="close">&times;</span>
+                  <p>Thank you for subscribing!</p>
+                </div>
+              </div>
+            </section>
+
+            <style>
+              .modal {
+                display: none;
+                position: fixed;
+                z-index: 1;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+                background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+              }
+
+              .modal-content {
+                background-color: teal;
+                margin: 20% auto;
+                padding: 20px;
+                border: 1px solid #888;
+                width: 50%;
+                max-width: 300px;
+                color: white;
+                text-align: center;
+              }
+
+              .close {
+                color: white;
+                float: right;
+                font-size: 28px;
+                font-weight: bold;
+              }
+
+              .close:hover,
+              .close:focus {
+                color: #000;
+                text-decoration: none;
+                cursor: pointer;
+              }
+            </style>
+
+            <script>
+              document.querySelector('.subscribe-form').addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevent the form from submitting in the traditional way
+
+                // Show the modal popup
+                const modal = document.getElementById('popupModal');
+                modal.style.display = 'block';
+
+                // Clear the input field
+                this.querySelector('input[type="email"]').value = '';
+
+                // Hide the modal when the close button is clicked
+                const closeModal = document.querySelector('.modal .close');
+                closeModal.onclick = function() {
+                  modal.style.display = 'none';
+                }
+              });
+
+              // Hide the modal when clicking outside of it
+              window.onclick = function(event) {
+                const modal = document.getElementById('popupModal');
+                if (event.target == modal) {
+                  modal.style.display = 'none';
+                }
+              }
+            </script>
+
         </div>
       </div>
     </div>