git confirmation and validation added

commonStyles.css

@@ -151,6 +151,50 @@ footer {
 }
 }
 
+.flex {
+  display: flex;
+}
+
+.input-field {
+  flex: 1; /* Take remaining space */
+  background-color: transparent;
+  border: 1px solid #34D399; /* Emerald color */
+  padding: 8px;
+  border-radius: 4px 0 0 4px;
+  font-size: 14px;
+  outline: none;
+}
+
+.subscribeBtn {
+  background-color: #34D399; /* Emerald color */
+  color: #fff;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+}
+
+.popup {
+  position: fixed;
+  display: none;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #6EE7B7; /* Light green */
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+}
+
+.popup.show {
+  display: block;
+}
+
+.popuptext {
+  color: #fff;
+  font-size: 14px;
+}
 
 #bttbutton {
   position: fixed;

index.html

@@ -500,13 +500,16 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
 
             <div class="newsLetter flex group ease-in-out duration-300 w-full lg:w-1/2">
               <div class=" flex group ease-in-out duration-300 w-full lg:w-2/3">
-                <input type="email" name="email" id="" placeholder="your email"
-                       class="bg-transparent border border-emerald-600 py-2 rounded-l-md placeholder:text-slate-300 placeholder:text-xs w-full group-hover:border-indigo-600 ease-in-out duration-300 text-sm outline-0" style="margin-right: 10px;">
+                <input type="email" name="email" id="email" placeholder="Your email"
+                       class="input-field" style="margin-right: 10px;">
 
-                       <button class="bg-emerald-600 text-slate-300 rounded-r-md px-4 py-2 text-white uppercase subscribeBtn tracking-wider ease-in-out duration-300 group-hover:bg-indigo-600">Subscribe</button>
-
+                <button onclick="subscribe()" class="subscribeBtn">Subscribe</button>
               </div>
             </div>
+            <!--popup container-->
+            <div class="popup" id="popup">
+              <span class="popuptext" id="popuptext"></span>
+            </div> 
 
           </div>
 

script.js

@@ -9,3 +9,33 @@ indexOpenDropDown.onclick = () => {
 closeDropDown.onclick = () => {
   dropMenuLinks.style.right = '-2000px';
 }
+
+function subscribe() {
+  var email = document.getElementById('email').value;
+
+  // Validate email address
+  if (!validateEmail(email)) {
+    showPopup('Please enter a valid email address.');
+    return;
+  }
+
+  // send the email address to the admin
+  // For demonstration, let's just show a confirmation message
+  showPopup('You have successfully subscribed with email: ' + email);
+}
+
+function validateEmail(email) {
+  // Basic email validation
+  var re = /\S+@\S+\.\S+/;
+  return re.test(email);
+}
+
+function showPopup(message) {
+  var popup = document.getElementById('popup');
+  var popuptext = document.getElementById('popuptext');
+  popuptext.textContent = message;
+  popup.classList.add('show');
+  setTimeout(function() {
+    popup.classList.remove('show');
+  }, 3000); // Hide popup after 3 seconds
+}