✨[Feature Request]: Added of popup

#1171
Anishkagupta04 · Aug 10, 2024 · 9849721 · 9849721
1 parent 8fe1130
commit 9849721
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 99 deletions.
diff --git a/Css-Files/helpline.css b/Css-Files/helpline.css
@@ -102,69 +102,10 @@
 }
 
 /* Popup Styles */
-.popup-container {
-  margin-top: 100px;
-  margin-bottom: 100px;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-}
-
-.popup {
-  background-color: #fff;
-  padding: 30px;
-  border-radius: 10px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-}
-
-.popup h3 {
-  color: #3fbcc0;
-  margin-bottom: 20px;
-}
-
-.popup p {
-  font-size: 18px;
-  color: #022a2d;
-  margin-bottom: 20px;
-}
-
-.close-button {
-  background-color: #2F81CF;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s ease-in-out;
-}
-
-.close-button:hover {
-  background-color: #1e6bba;
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes slideInLeft {
-  0% {
-    transform: translateX(-50px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
+.popupmessage {
+  filter: drop-shadow(10px 10px 10px rgba(17, 133, 137, 0.683));
+  -webkit-text-stroke: 2px #000; 
+  text-align: center;
+  font-size: 50px;
+  font-weight: 700;
+}
diff --git a/helpline.html b/helpline.html
@@ -93,7 +93,6 @@
 
 
           <a href="#appointment" class="appointment-btn scrollto">
-            <span class="d-md-inline">EMERGENCY</span></a>
         </div>
       </header>
       <div class="container" style="display:flex ;">
@@ -115,8 +114,11 @@ <h1>
               <h3 style="color: #3fbcc0; margin-bottom: 10px;">Emergency Form</h3>
               <form class="helpline-form" style="display: flex; align-items: center;">
                 <input type="text" id="nameInput" placeholder="Enter your name" style="margin-right: 10px; padding: 5px 10px; border: none; border-radius: 5px; background-color: #3fbcc051; color: #959DA5;" />
-                <button type="submit" class="emergency-button" style="background-color: #2F81CF; color: #fff; padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease-in-out;">Request Emergency</button>
+                <button type="button" id="emergencyButton" class="emergency-button" style="background-color: #2F81CF; color: #fff; padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease-in-out;">Request Emergency</button>
               </form>
+              <div id="popup" class="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #022a2d; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3);">
+                <p class="popupmessage" style="margin-top: 200px;color: #3fbcc0;">Your response is sent!</p>
+              </div>
             </div>
             <div class="contact-details-container" style="animation: fadeIn 0.5s ease-in-out 0.3s forwards; opacity: 0; padding: 20px;">
               <h3 style="color: #3fbcc0; margin-bottom: 10px;">Contact Details</h3>
@@ -138,13 +140,6 @@ <h3 style="color: #3fbcc0; margin-bottom: 10px;">Contact Details</h3>
           </div>
         </div>
       </div>
-      <div class="popup-container">
-        <div class="popup">
-          <h3>Emergency Notice</h3>
-          <p id="nameDisplay"></p>
-          <button class="close-button">Close</button>
-        </div>
-      </div>
       <footer>
         <div class="footer-wrapper">
           <div class="footer-columns">

diff --git a/js/helpline.js b/js/helpline.js
@@ -10,33 +10,18 @@ window.addEventListener('DOMContentLoaded', function() {
   }, 300);
 });
 
-const emergencyButton = document.querySelector('.emergency-button');
-const popupContainer = document.querySelector('.popup-container');
-const closeButton = document.querySelector('.close-button');
-const nameInput = document.querySelector('#nameInput');
-const nameDisplay = document.querySelector('#nameDisplay');
-
-emergencyButton.addEventListener('click', (event) => {
-  event.preventDefault();
-  const name = nameInput.value.trim();
-
-  if (name) {
-    popupContainer.style.visibility = 'visible';
-
-    nameDisplay.textContent = `Emergency request from ${name}`;
-  } else {
-    alert('Please enter your name.');
-  }
-});
-
-closeButton.addEventListener('click', () => {
-  popupContainer.style.visibility = 'hidden';
-});
-
 ScrollReveal({
   //reset: true ,
   distance: '60px',
   duration: 2500,
   delay: 400
 });
-ScrollReveal().reveal('.content', { delay: 400, origin: 'left' ,interval:200});
+ScrollReveal().reveal('.content', { delay: 400, origin: 'left' ,interval:200});
+
+  document.getElementById('emergencyButton').addEventListener('click', function() {
+    var popup = document.getElementById('popup');
+    popup.style.display = 'block';
+    setTimeout(function() {
+      popup.style.display = 'none';
+    }, 3000); // Hide popup after 3 seconds
+  });