From 270a1e28f94bfb9b1e4d0611d8d1b89136183c00 Mon Sep 17 00:00:00 2001
From: Kajal Mehta <mehtakajal796@gmail.com>
Date: Wed, 23 Oct 2024 10:33:23 +0000
Subject: [PATCH] popup

---
 frontend/index.html                | 148 +----------------------------
 frontend/src/Pages/Herosection.jsx |   2 +
 frontend/src/components/popup.jsx  |  74 +++++++++++++++
 3 files changed, 77 insertions(+), 147 deletions(-)
 create mode 100644 frontend/src/components/popup.jsx

diff --git a/frontend/index.html b/frontend/index.html
index 574f51a..952225f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -262,115 +262,7 @@
 
     
 }
-#popup {
-  position: fixed;
-  bottom: 20px; /* Position 20px from the bottom */
-  right: 20px;  /* Position 20px from the right */
-  height: auto; /* Adjust height based on content */
-  width: 400px; /* Set width for the popup box */
-  background-color: rgb(252 249 249 / 80%); /* Semi-transparent background */
-  justify-content: center;
-  display: flex;
-  z-index: 1000;
-  align-items: center;
-  border-radius: 10px; /* Rounded corners */
-  box-shadow: 0px 4px 10px #4d90fea3; /* Box shadow */
-}
-
-.popup-content {
-  position: relative;
-  width: 100%; /* Full width of the container */
-  background-color: rgb(240, 238, 238);
-  border-radius: 10px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-}
-
-.popup-left img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  padding: 24px;
-    border-radius: 59px;
-}
-
-
-.popup-right {
-  padding: 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
 
-.popup-right .h1 {
-  font-size: 24px; /* Adjust size for better fit */
-  margin-bottom: 10px;
-  color: #131010;
-  text-align: center;
-  font-weight: bolder;
-}
-
-.popup-right .h2 {
-  font-size: 18px;
-  color: #261d1d;
-  text-align: center;
-  margin-bottom: 15px;
-  font-weight: bold;
-}
-
-#emailForm {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-}
-
-#popup-email {
-  padding: 10px;
-  width: 80%;
-  border: 1px solid #bbbbbb;
-  border-radius: 5px;
-  margin-bottom: 15px;
-  font-size: 16px;
-}
-
-.signup-btn {
-  width: 80%;
-  padding: 10px;
-  background-color: #0b42e9;
-  color: aliceblue;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: bolder;
-}
-
-.terms {
-  color: #0e0a0a;
-  text-align: center;
-  font-size: 12px;
-  margin-top: 10px;
-}
-
-.terms a {
-  color: #1278d8;
-  text-decoration: none;
-}
-
-.close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 24px;
-  font-weight: bolder;
-  cursor: pointer;
-  color: #000000;
-  z-index: 1001;
-}
 
 
 </style>    
@@ -669,45 +561,7 @@ <h3>Saarthi</h3>
         </script>
 
         <!--pop up html part-->
-        
-        <div id="popup" class="popup" >
-            <div class="popupcontent">
-            <div class="close-button">X</div>
-            <div class="popup-left">
-             <img src="src/assets/railways.png">
-            </div>
-            <div class="popup-right">
-            <p class="h1">Welcome to Station Saarthi</p>
-            <p class="h2"> Travel without stress  Sign in now</p>
-            <!-- email part-->
-             <form id="emailForm">
-             <input type="email" id="popup-email" placeholder="Enter Email" required>
-             <button type="submit" class="signup-btn">Sign me up!</button>
-             </form>
-             <p class="terms">By signing in, I agree to station saarthi's <a herf="#">Terms of Service</a> and <a herf="#">Privacy Policy</a>.</p>
-            </div>
-            </div>
-        
-            <script>window.onload = function() {
-                document.getElementById('popup').style.display = 'flex';
-            };
-            //load on website pop up added
-            
-            
-            document.querySelector('.close-button').addEventListener('click', function() {
-                document.getElementById('popup').style.display = 'none';
-            });
-            
-            document.getElementById('emailForm').addEventListener('submit', function(event) {
-                event.preventDefault();
-            
-                const email = document.getElementById('email').value;
-                if (email) {
-                    alert(`Welcome ! To Station Sarthi , May you have a wonderful Journey ${email}`);
-                    document.getElementById('popup').style.display = 'none';
-                }
-                
-            });</script>
+
         
 <script>
     window.addEventListener("load", () => {
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 943f2a8..4108dd5 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -16,6 +16,7 @@ import Chatbot from '../components/chatbot';
 import Navbar from '../components/navbar';
 import Language from '../components/language';
 import { FaUserAlt } from "react-icons/fa";
+import Popup from '../components/popup';
 
 const Herosection = () => {
     const navigate = useNavigate();
@@ -122,6 +123,7 @@ const Herosection = () => {
             <div  
   className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer  right-5 -bottom-8 md:-bottom-7"
 >
+    <Popup />
 <Chatbot/>
   <h1 className="text-xs font-bold text-black">Saarthi</h1>
 </div>
diff --git a/frontend/src/components/popup.jsx b/frontend/src/components/popup.jsx
new file mode 100644
index 0000000..37495e7
--- /dev/null
+++ b/frontend/src/components/popup.jsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import railwaysImage from '../assets/railways.png';
+
+const Popup = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [email, setEmail] = useState('');
+
+  // Auto-close popup after 5 seconds
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 10000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (email) {
+      alert(`Welcome! To Station Saarthi. May you have a wonderful journey, ${email}`);
+      setIsVisible(false);
+    }
+  };
+
+  return (
+    isVisible && (
+      <div className="fixed bottom-5 right-5 flex items-center justify-center bg-[rgba(252,249,249,0.8)] z-[100000] rounded-lg shadow-lg w-[400px] p-5">
+        <div className="relative flex flex-col w-full bg-[#f0eeee] rounded-lg overflow-hidden">
+          <button
+            className="absolute top-3 right-3 text-black font-bold text-2xl z-[1001]"
+            onClick={handleClose}
+          >
+            X
+          </button>
+          <div className="w-full p-6">
+            <img src={railwaysImage} alt="Railways" className="w-full h-full object-cover rounded-1/2" />
+          </div>
+          <div className="w-full p-4 flex flex-col items-center justify-center">
+            <h1 className="text-2xl font-bold text-center text-[#131010] mb-2">Welcome to Station Saarthi</h1>
+            <h2 className="text-lg font-semibold text-center text-[#261d1d] mb-4">Travel without stress. Sign in now!</h2>
+            <form onSubmit={handleSubmit} className="w-full flex flex-col items-center">
+              <input
+                type="email"
+                id="popup-email"
+                className="p-2 w-4/5 border border-gray-400 rounded-md mb-4 text-base"
+                placeholder="Enter Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+              <button
+                type="submit"
+                className="w-4/5 p-2 bg-blue-600 text-white rounded-md text-base font-bold cursor-pointer"
+              >
+                Sign me up!
+              </button>
+            </form>
+            <p className="text-xs text-center text-[#0e0a0a] mt-4">
+              By signing in, I agree to Station Saarthi's{' '}
+              <a href="#" className="text-blue-500">Terms of Service</a> and{' '}
+              <a href="#" className="text-blue-500">Privacy Policy</a>.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default Popup;