-
- What We Offer
-
-
- With
-
- StationSaarthi
- ,
- you get access to:
-
- Real-time train updates and notifications
- Interactive station maps for easy navigation
- Personalized travel recommendations
- Multi-language support to cater to diverse passengers
- Accessible services for differently-abled travelers
-
-
+
+
What We Offer
+
+
+
+
+
+
Real-Time Train Updates
+
+ Stay informed with live train schedules and notifications for timely travel assistance.
+
+
+
+
+
+
+
Interactive Station Maps
+
+ Navigate the station effortlessly with detailed maps, making it easier to find your way.
+
+
+
+
+
+
+
Accessible Services
+
+ Our platform ensures accessible services, providing support for differently-abled travelers.
+
+
+
{/* Why Choose Us Section */}
-
-
- Why Choose Us?
-
-
-
- StationSaarthi
-
- is more than a service; it's a commitment to revolutionizing your railway station experience.
- We believe in technology's power to enhance every aspect of your journey, ensuring safety,
- comfort, and convenience at every step.
-
-
+
+
Why Choose StationSaarthi?
+
+ With StationSaarthi , youβre not just navigating a station β you're embracing a revolutionary approach to travel. Our platform is designed to streamline your experience, providing you with essential resources, convenience, and tailored support.
+
+
+
+
Smart Journey Planning
+
Plan your trips efficiently with our smart journey planning tools and suggestions.
+
+
+
User-Friendly Interface
+
Enjoy a seamless experience with our intuitive and easy-to-use platform.
+
+
+
Community Support
+
Join a community of travelers to share experiences, tips, and support for a better journey.
+
+
+
- {/* Our Team Section */}
-
-
- Meet the Team
-
-
- Our diverse team of professionals is driven by a passion for innovation.
- With expertise spanning technology, transportation, and user experience design,
- we are dedicated to making railway stations smarter, more efficient, and more
- enjoyable for every passenger.
-
-
- {/* Footer */}
-
+ {/* Meet the Team Section */}
+
+
+ {/* Footer Section */}
+
+
);
-};
+}
-// Exporting the About component for use in other parts of the app
-export default About;
+export default AboutUs;
diff --git a/frontend/src/Pages/ContactUs.jsx b/frontend/src/Pages/ContactUs.jsx
index a7511e8..6477ea1 100644
--- a/frontend/src/Pages/ContactUs.jsx
+++ b/frontend/src/Pages/ContactUs.jsx
@@ -1,353 +1,513 @@
// src/components/ContactUs.jsx
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from "react";
import {
- FaPhone,
- FaEnvelope,
- FaMapMarkerAlt,
- FaTwitter,
- FaFacebook,
-} from 'react-icons/fa';
-import { AiOutlineArrowUp,AiOutlineArrowDown } from 'react-icons/ai';
+ FaPhone,
+ FaEnvelope,
+ FaMapMarkerAlt,
+ FaTwitter,
+ FaFacebook,
+} from "react-icons/fa";
+import { AiOutlineArrowUp, AiOutlineArrowDown } from "react-icons/ai";
const ContactUs = () => {
- // Function to scroll to the top of the page
- const scrollToTop = () => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- });
- };
- const scrollToBottom = () => {
- window.scrollTo({
- top: 10000,
- behavior: 'smooth',
- });
- };
- useEffect(() => {
- document.title = 'Station Saarthi |ContactUs';
- }, []);
+ // Function to scroll to the top of the page
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ };
+ const scrollToBottom = () => {
+ window.scrollTo({
+ top: 10000,
+ behavior: "smooth",
+ });
+ };
+ useEffect(() => {
+ document.title = "Station Saarthi |ContactUs";
+ }, []);
- return (
-
- {/* Header Section */}
-
-
Contact Us
-
Indian Railways
-
+ const [formData, setFormData] = useState({
+ senderEmail: "",
+ subject: "",
+ message: "",
+ });
- {/* General Information */}
-
-
-
-
General Information
-
-
-
-
-
-
- Phone Number: 139 (Railway Enquiry)
-
-
-
-
-
- Email: customercare@indianrailways.gov.in
-
-
-
-
-
+ const [isLoading, setIsLoading] = useState(false);
+ const [alert, setAlert] = useState(false);
+ const API_URL = "http://localhost:3000";
- {/* Emergency Services */}
-
-
-
-
Emergency Services
-
-
-
-
-
-
- Phone Number: 182 (Security & Emergencies)
-
-
-
-
-
- Phone Number: 138 (Passenger Helpline)
-
-
-
-
-
- Email: emergencyservices@indianrailways.gov.in
-
-
-
-
-
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+ };
- {/* Reservation and Ticketing */}
-
-
-
-
Reservation and Ticketing
-
-
-
-
-
-
- Phone Number: 139 (IRCTC Helpline)
-
-
-
-
-
- Email: care@irctc.co.in
-
-
-
- Website: {' '}
-
- IRCTC Website
-
-
-
-
-
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+
+ try {
+ const response = await fetch(`${API_URL}/contact/contactus`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ mail: formData.senderEmail,
+ subject: formData.subject,
+ message: formData.message,
+ }),
+ });
+
+ if (response.ok) {
+ setTimeout(() => {
+ setIsLoading(false);
+ setAlert(true);
+ setFormData({
+ senderEmail: "",
+ subject: "",
+ message: "",
+ });
+ }, 2000);
+
+ setTimeout(() => {
+ setAlert(false);
+ }, 4000);
+ } else {
+ alert("Something went wrong, please try later!!");
+ setIsLoading(false);
+ }
+ } catch (err) {
+ console.error("Mail sending failed: ", err);
+ alert("Something went wrong, please try later!!");
+ setIsLoading(false);
+ }
+ };
- {/* Lost & Found */}
-
-
-
-
Lost & Found
-
-
-
-
-
- Phone Number: 139
-
-
-
-
- Email: lostandfound@indianrailways.gov.in
-
-
-
-
-
+ return (
+
+ {/* Header Section */}
+
+
Contact Us
+
Indian Railways
+
- {/* Grievances and Complaints */}
-
-
-
-
Grievances and Complaints
-
-
-
-
-
-
- Phone Number: 139 (Complaint Registration)
-
-
-
-
-
- Email: complaints@indianrailways.gov.in
-
-
-
- Online Portal: {' '}
-
- RailMadad
-
-
-
-
-
+ {/* E-Mail Section */}
+
- {/* Railway Police Force (RPF) */}
-
-
-
-
Railway Police Force (RPF)
-
-
-
-
-
- Phone Number: 182
-
-
-
-
- Email: rpf@indianrailways.gov.in
-
-
-
-
-
+ {/* General Information */}
+
+
+
+
+ General Information
+
+
+
+
+
+
+
+ Phone Number: 139 (Railway Enquiry)
+
+
+
+
+
+ Email: customercare@indianrailways.gov.in
+
+
+
+
+
- {/* Corporate Office */}
-
-
-
-
Corporate Office
-
-
-
-
-
-
- Address: Indian Railways Corporate Office, New Delhi, India
-
-
-
-
-
- Phone Number: +91-11-23389184
-
-
-
-
-
- Email: corporateaffairs@indianrailways.gov.in
-
-
-
-
-
+ {/* Emergency Services */}
+
+
+
+
+ Emergency Services
+
+
+
+
+
+
+
+ Phone Number: 182 (Security & Emergencies)
+
+
+
+
+
+ Phone Number: 138 (Passenger Helpline)
+
+
+
+
+
+ Email: emergencyservices@indianrailways.gov.in
+
+
+
+
+
- {/* Stay Connected */}
-
-
-
-
Stay Connected
-
-
-
+ {/* Reservation and Ticketing */}
+
+
+
+
+ Reservation and Ticketing
+
+
+
+
+
+
+
+ Phone Number: 139 (IRCTC Helpline)
+
+
+
+
+
+ Email: care@irctc.co.in
+
+
+
+ Website: {" "}
+
+ IRCTC Website
+
+
+
+
+
- {/* Feedback */}
-
+ {/* Lost & Found */}
+
+
+
+
Lost & Found
+
+
+
+
+
+
+ Phone Number: 139
+
+
+
+
+
+ Email: lostandfound@indianrailways.gov.in
+
+
+
+
+
- {/* Back to Top Button */}
-
-
-
-
-
-
+ {/* Grievances and Complaints */}
+
+
+
+
+ Grievances and Complaints
+
+
+
+
+
+
+
+ Phone Number: 139 (Complaint Registration)
+
+
+
+
+
+ Email: complaints@indianrailways.gov.in
+
+
+
+ Online Portal: {" "}
+
+ RailMadad
+
+
+
+
+
+
+ {/* Divisional Railway Manager (DRM) Offices */}
+
+
+
+
+ Divisional Railway Manager (DRM) Offices
+
+
+
+
+
+
+
+ Northern Railway DRM Office:{" "}
+ drm.nr@indianrailways.gov.in
+
+
+
+
+
+ Western Railway DRM Office:{" "}
+ drm.wr@indianrailways.gov.in
+
+
+
+
+
+ Southern Railway DRM Office:{" "}
+ drm.sr@indianrailways.gov.in
+
+
+
+
+
+ Eastern Railway DRM Office:{" "}
+ drm.er@indianrailways.gov.in
+
+
+
+
+
+
+ {/* Railway Police Force (RPF) */}
+
+
+
+
+ Railway Police Force (RPF)
+
+
+
+
+
+
+
+ Phone Number: 182
+
+
+
+
+
+ Email: rpf@indianrailways.gov.in
+
+
+
+
+
+
+ {/* Corporate Office */}
+
+
+
+
+ Corporate Office
+
+
+
+
+
+
+
+ Address: Indian Railways Corporate Office, New Delhi, India
+
+
+
+
+
+ Phone Number: +91-11-23389184
+
+
+
+
+
+ Email: corporateaffairs@indianrailways.gov.in
+
+
+
- );
+
+
+ {/* Stay Connected */}
+
+
+
+
+ Stay Connected
+
+
+
+
+
+ {/* Feedback */}
+
+
+ {/* Back to Top Button */}
+
+
+
+
+
+
+
+ );
};
export default ContactUs;
diff --git a/frontend/src/Pages/Firebase.jsx b/frontend/src/Pages/Firebase.jsx
new file mode 100644
index 0000000..fd25afc
--- /dev/null
+++ b/frontend/src/Pages/Firebase.jsx
@@ -0,0 +1,24 @@
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth"; // Import GoogleAuthProvider and signInWithPopup
+
+// Firebase configuration
+const firebaseConfig = {
+ apiKey: "AIzaSyCZjGQb8lWxKdPf94ipmk-xleQbuSAe-xU",
+ authDomain: "scrollme-40ba6.firebaseapp.com",
+ projectId: "scrollme-40ba6",
+ storageBucket: "scrollme-40ba6.appspot.com",
+ messagingSenderId: "748771881750",
+ appId: "1:748771881750:web:2cb97bb2c7b7468a7c1637"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the auth service
+const auth = getAuth(app);
+
+// Set up Google Auth Provider
+const provider = new GoogleAuthProvider();
+
+// Export app, auth, provider, and signInWithPopup
+export { app, auth, provider, signInWithPopup };
diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx
index 1f6cbe8..0ce92df 100644
--- a/frontend/src/Pages/Herosection.jsx
+++ b/frontend/src/Pages/Herosection.jsx
@@ -8,130 +8,108 @@ import noticationsvg from '../assets/svg/notification.svg';
import mapsvg from '../assets/svg/3dmap.svg';
import schedulesvg from '../assets/svg/schedule.svg';
import contributorsvg from '../assets/svg/contributor.svg';
-import { useNavigate } from 'react-router-dom';
import chatbotsvg from '../assets/svg/chatbot.svg';
+import { useNavigate } from 'react-router-dom';
import Chatbot from '../components/chatbot';
import Navbar from '../components/navbar';
import HamburgerMenu from './HamburgerMenu';
-import Language from '../components/language'; // From main branch
-import { FaUserAlt } from "react-icons/fa"; // From main branch
-import Popup from '../components/popup'; // From main branch
-import Hamburger from './hamburger';
+import Language from '../components/language';
+import { FaUserAlt } from "react-icons/fa";
+import Popup from '../components/popup';
const Herosection = () => {
- const navigate = useNavigate();
+ const navigate = useNavigate();
+
+ const LoginClick = () => navigate('/Login');
+ const RegisterClick = () => navigate('/Register');
+ const StationCLick = () => navigate('/Stations');
+ const UserCLick = () => navigate('/user');
+ const NavigationCLick = () => navigate('/Navigation');
+ const BookingCLick = () => navigate('/Booking');
+ const MapCLick = () => navigate('/3DMap');
+ const ScheduleCLick = () => navigate('/Schedule');
+ const NotificationCLick = () => navigate('/Notification');
+ const ContributorCLick = () => navigate('/contributor');
+
+ return (
+ <>
+
+
+
+
+
Namaste !! Yatree
+
+
+
+
Station Saarthi : Your Platform Guide
+
+
+
+
+
+
+
+
Contributors
+
+
+
+
+
+ Navigation
+
+
- const LoginClick = () => {
- navigate('/Login'); // Navigates to the login page
- };
- const RegisterClick = () => {
- navigate('/Register'); // Navigates to the login page
- };
- const StationCLick = () => {
- navigate('/Stations'); // Navigates to the Stations page
- };
- const UserCLick = () => {
- navigate('/user'); // Navigates to the user page
- };
- const NavigationCLick = () => {
- navigate('/Navigation'); // Navigates to the Navigation page
- };
- const BookingCLick = () => {
- navigate('/Booking'); // Navigates to the Booking page
- };
- const MapCLick = () => {
- navigate('/3DMap'); // Navigates to the 3D Map page
- };
- const ScheduleCLick = () => {
- navigate('/Schedule'); // Navigates to the Schedule page
- };
- const NotificationCLick = () => {
- navigate('/Notification'); // Navigates to the Notification page
- };
- const ContributorCLick = () => {
- navigate('/contributor'); // Navigates to the Contributor page
- };
+
+
+
+ Booking
+
+
- return (
- <>
-
-
{/* From HamburgerMenu branch */}
-
-
-
-
-
-
-
+
+
+
+ Station
+
+
-
{/* From main branch */}
-
-
Namaste !! Yatree
-
-
-
-
Station Saarthi : Your Platform Guide
-
-
-
+
+
+
+ 3D Map
+
+
-
-
-
-
Contributors
-
+
+
+
+ Schedule
+
+
-
-
-
- Navigation
-
-
-
-
-
- Booking
-
-
-
-
-
- Station
-
-
-
-
-
- 3D Map
-
-
-
-
-
- Schedule
-
-
-
-
-
- Notification
-
-
-
+
+
+
+ Notification
+
+
+
-
- >
- );
+
+ >
+ );
};
export default Herosection;
diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx
index 06790ca..51c3662 100644
--- a/frontend/src/Pages/LoginPage.jsx
+++ b/frontend/src/Pages/LoginPage.jsx
@@ -1,32 +1,35 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
import logo from "../assets/stationsaarthi.svg"; // Import your logo
import { useNavigate } from "react-router-dom";
import backicon from "../assets/svg/backicon.svg"; // Assuming you have a back icon
import { loginValidation } from "../validations/validation";
import { MdOutlinePassword } from "react-icons/md";
import { FaUser } from "react-icons/fa";
+import { auth, provider, signInWithPopup } from "./Firebase"; // Import Firebase authentication methods
+import { FaGoogle } from "react-icons/fa"; // Import Google icon
const Login = () => {
useEffect(() => {
document.title = "Station Saarthi | LoginPage";
}, []);
+
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
- const [loginSuccess, setLoginSuccess] = useState(false); // State for login success message
+ const [loginSuccess, setLoginSuccess] = useState(false);
const [errors, setErrors] = useState({});
- const [passwordVisible, setPasswordVisible] = useState(false); // State for password visibility
+ const [passwordVisible, setPasswordVisible] = useState(false);
const navigate = useNavigate();
const togglePasswordVisibility = () => {
- setPasswordVisible(!passwordVisible); // Toggle password visibility
+ setPasswordVisible(!passwordVisible);
};
const RegisterClick = () => {
- navigate("/Register"); // Navigates to the login page
+ navigate("/Register");
};
const HomeClick = () => {
- navigate("/"); // Navigates to the home page
+ navigate("/");
};
const handleLogin = async (e) => {
@@ -42,16 +45,14 @@ const Login = () => {
const newErrors = {};
error.inner.forEach((err) => {
newErrors[err.path] = err.message;
- // newErrors[err.path] = err.errors[0];
});
-
setErrors(newErrors);
return;
}
// Handle login logic here
- setLoginSuccess(true); // Set login success to true upon successful login
- setUsername(""); // Clear input fields after login
+ setLoginSuccess(true);
+ setUsername("");
setPassword("");
};
@@ -59,22 +60,32 @@ const Login = () => {
navigate("/password-recovery");
};
+ const handleGoogleLogin = async () => {
+ try {
+ const result = await signInWithPopup(auth, provider);
+ const user = result.user;
+ console.log("Google User Info:", user);
+ // Optionally navigate or handle user state here
+ } catch (error) {
+ console.error("Google login error:", error);
+ }
+ };
+
return (
-
- {/* Logo and Title */}
-
-
+
+
+
-
+
-
+
Station Saarthi
-
+
Your Trusted Platform Guide
@@ -83,100 +94,108 @@ const Login = () => {
- {/* Login Heading */}
-
+
Login
- {/* Success Message */}
{loginSuccess && (
-
+
Login successful! Welcome back.
)}
{/* Username Input */}
-
+
Username
setUsername(e.target.value)}
- placeholder='Enter your username'
- className='w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500'
+ placeholder="Enter your username"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
{errors.username && (
-
{errors.username}
+
{errors.username}
)}
{/* Password Input */}
-
+
- Password
+ Password
setPassword(e.target.value)}
- placeholder='Enter your password'
- className='w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500'
+ placeholder="Enter your password"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
- />{" "}
+ />
{passwordVisible ? (
- visibility_off // Closed eye icon
+ visibility_off
) : (
- visibility // Open eye icon
+ visibility
)}
{errors.password && (
-
{errors.password}
+
{errors.password}
)}
{/* Login Button */}
Login
+
+ {/* Google Login Button */}
+
+ {/* Google icon */}
+ Sign in with Google
+
{/* Forgot Password Link */}
-
+
Forgot Password?
{/* Don't have an account link */}
-
+
Don't have an account?{" "}
Register
diff --git a/frontend/src/Pages/PasswordRecovery.jsx b/frontend/src/Pages/PasswordRecovery.jsx
index 8a7e1fc..beb1dae 100644
--- a/frontend/src/Pages/PasswordRecovery.jsx
+++ b/frontend/src/Pages/PasswordRecovery.jsx
@@ -3,15 +3,114 @@ import { useNavigate } from "react-router-dom";
const PasswordRecovery = () => {
const [email, setEmail] = useState("");
+ const [otp, setOtp] = useState(""); // For OTP input
+ const [newPassword, setNewPassword] = useState(""); // For new password input
+ const [confirmPassword, setConfirmPassword] = useState(""); // For confirm password input
+ const [step, setStep] = useState(1); // For handling the steps (1: Email, 2: OTP, 3: Password Reset)
+ const [otpDisabled, setOtpDisabled] = useState(false); // For disabling OTP input after submission
const [message, setMessage] = useState("");
+ const [error, setError] = useState("");
+ const [loading, setLoading] = useState(false);
const navigate = useNavigate();
+ // Step 1: Handle sending OTP to email
const handlePasswordRecovery = async (e) => {
e.preventDefault();
- // Implement password recovery logic here
- setMessage(
- "If an account with that email exists, a password recovery link has been sent."
- );
+ setMessage("");
+ setError("");
+ setLoading(true);
+
+ try {
+ const response = await fetch("http://localhost:5000/station/send-otp", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ email }),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ setMessage("OTP has been sent to your email.");
+ setStep(2); // Move to OTP input step
+ } else {
+ setError(data.error || "Failed to send OTP. Please try again.");
+ }
+ } catch (error) {
+ setError("An error occurred. Please try again later.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Step 2: Handle OTP verification
+ const handleVerifyOTP = async (e) => {
+ e.preventDefault();
+ setMessage("");
+ setError("");
+ setLoading(true);
+
+ try {
+ const response = await fetch("http://localhost:5000/station/verify-otp", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ email, otp }),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ setMessage("OTP verified successfully. You can now reset your password.");
+ setStep(3); // Move to password reset step
+ setOtpDisabled(true); // Disable OTP input after successful verification
+ } else {
+ setError(data.error || "Invalid OTP. Please try again.");
+ }
+ } catch (error) {
+ setError("An error occurred. Please try again later.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Step 3: Handle new password submission
+ const handlePasswordReset = async (e) => {
+ e.preventDefault();
+ setMessage("");
+ setError("");
+ setLoading(true);
+
+ if (newPassword !== confirmPassword) {
+ setError("Passwords do not match.");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ const response = await fetch("http://localhost:5000/station/reset-password", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ email, newPassword }),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ setMessage("Password reset successfully. You can now log in.");
+ navigate("/login");
+ } else {
+ setError(data.error || "Failed to reset password. Please try again.");
+ }
+ } catch (error) {
+ setError("An error occurred. Please try again later.");
+ } finally {
+ setLoading(false);
+ }
};
const handleBackToLogin = () => {
@@ -19,44 +118,123 @@ const PasswordRecovery = () => {
};
return (
-
-
-
+
+
+
Password Recovery
+
+ {/* Success Message */}
{message && (
-
+
{message}
)}
-
-
-
+
+ {/* Error Message */}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Form */}
+
+ {/* Email Field (always visible) */}
+
+
Email
setEmail(e.target.value)}
- placeholder='Enter your email'
- className='w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500'
+ placeholder="Enter your email"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
+ disabled={step !== 1} // Disable email field after step 1
/>
+
+ {/* OTP Field (visible after step 1) */}
+ {step >= 2 && (
+
+
+ OTP
+
+ setOtp(e.target.value)}
+ placeholder="Enter the OTP"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ required
+ disabled={otpDisabled} // Disable OTP input after step 2
+ />
+
+ )}
+
+ {/* Password Fields (visible after step 2) */}
+ {step === 3 && (
+ <>
+
+
+ New Password
+
+ setNewPassword(e.target.value)}
+ placeholder="Enter new password"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ required
+ />
+
+
+
+
+ Confirm Password
+
+ setConfirmPassword(e.target.value)}
+ placeholder="Confirm new password"
+ className="w-full px-4 py-2 transition duration-300 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ required
+ />
+
+ >
+ )}
+
- Recover Password
+ {loading
+ ? step === 3
+ ? "Resetting Password..."
+ : step === 2
+ ? "Verifying..."
+ : "Sending..."
+ : step === 3
+ ? "Reset Password"
+ : step === 2
+ ? "Verify OTP"
+ : "Recover Password"}
+
Back to Login
diff --git a/frontend/src/Pages/hamburger.jsx b/frontend/src/Pages/hamburger.jsx
index 82fb0f1..83d24a8 100644
--- a/frontend/src/Pages/hamburger.jsx
+++ b/frontend/src/Pages/hamburger.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { keyframes } from 'styled-components';
-import { FaArrowLeft, FaSearch, FaTimes } from 'react-icons/fa';
-import { useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from "react";
+import styled, { keyframes } from "styled-components";
+import { FaArrowLeft, FaSearch, FaTimes } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
const fadeIn = keyframes`
from {
@@ -39,9 +39,8 @@ const HamburgerContainer = styled.div`
}
`;
-
const Menu = styled.div`
- display: ${({ open }) => (open ? 'block' : 'none')};
+ display: ${({ open }) => (open ? "block" : "none")};
background-color: white;
position: absolute;
top: 0;
@@ -76,7 +75,8 @@ const HamburgerIcon = styled.div`
`;
const Bar1 = styled(MenuIconBar)`
- transform: ${({ open }) => (open ? 'rotate(-45deg) translate(-5px, 5px)' : 'rotate(0)')};
+ transform: ${({ open }) =>
+ open ? "rotate(-45deg) translate(-5px, 5px)" : "rotate(0)"};
`;
const Bar2 = styled(MenuIconBar)`
@@ -84,7 +84,8 @@ const Bar2 = styled(MenuIconBar)`
`;
const Bar3 = styled(MenuIconBar)`
- transform: ${({ open }) => (open ? 'rotate(45deg) translate(-5px, -5px)' : 'rotate(0)')};
+ transform: ${({ open }) =>
+ open ? "rotate(45deg) translate(-5px, -5px)" : "rotate(0)"};
`;
const BackButton = styled(FaArrowLeft)`
@@ -117,24 +118,21 @@ const ClearIcon = styled(FaTimes)`
const SearchContainer = styled.div`
display: flex;
align-items: center;
- justify-content:center !important;
+ justify-content: center !important;
position: fixed;
top: 10px;
- right: 16px;
- padding-block:6px;
- padding-inline:10px;
+ right: 70px;
+ padding-block: 6px;
+ padding-inline: 10px;
background-color: rgb(191 219 254);
border-radius: 30px;
-
`;
const SearchInput = styled.input`
-
-
background-color: transparent;
color: rgb(6 25 47);
outline: none;
- width: ${({ isFocused }) => (isFocused ? "200px" : "0px")};
+ width: ${({ isFocused }) => (isFocused ? "200px" : "0px")};
transition: width 0.4s ease;
opacity: ${({ show }) => (show ? 1 : 0)};
pointer-events: ${({ show }) => (show ? "auto" : "none")};
@@ -143,45 +141,42 @@ const SearchInput = styled.input`
}
`;
-const Hamburger = () => {
-
+const Hamburger = () => {
const navigate = useNavigate();
const HomeClick = () => {
- navigate('/');
+ navigate("/");
};
const SettingsClick = () => {
- navigate('/Settings');
+ navigate("/Settings");
};
const helpClick = () => {
- navigate('/Help');
+ navigate("/Help");
};
const aboutClick = () => {
- navigate('/About');
+ navigate("/About");
};
const Contactclick = () => {
- navigate('/ContactUs');
+ navigate("/ContactUs");
};
const privacyClick = () => {
- navigate('/PrivacyPolicy'); // Navigate to Privacy and Policy page
+ navigate("/PrivacyPolicy"); // Navigate to Privacy and Policy page
};
-
-
- const [open, setOpen] = useState(false);
- const [showSearch, setShowSearch] = useState(false);
- const [searchTerm, setSearchTerm] = useState('');
- const searchInputRef = useRef(null);
+ const [open, setOpen] = useState(false);
+ const [showSearch, setShowSearch] = useState(false);
+ const [searchTerm, setSearchTerm] = useState("");
+ const searchInputRef = useRef(null);
const [isFocused, setIsFocused] = useState(false);
const toggleMenu = () => {
setOpen((prev) => !prev);
- };.3
-
+ };
+ 0.3;
const handleBack = () => {
setOpen(false);
@@ -196,20 +191,19 @@ const Hamburger = () => {
};
const clearSearch = () => {
- setSearchTerm('');
+ setSearchTerm("");
searchInputRef.current.focus();
};
const handleFocus = () => {
setIsFocused(true);
};
-
+
const handleBlur = (e) => {
if (!searchInputRef.current.contains(e.relatedTarget)) {
setIsFocused(false);
}
};
-
// Focus input when search is toggled on
useEffect(() => {
@@ -220,8 +214,6 @@ const Hamburger = () => {
return (
-
-
{
ref={searchInputRef}
value={searchTerm}
onChange={handleSearchChange}
- onFocus={handleFocus}
+ onFocus={handleFocus}
onBlur={handleBlur}
-
/>
{showSearch && searchTerm && }
@@ -242,4 +233,4 @@ const Hamburger = () => {
);
};
-export default Hamburger;
\ No newline at end of file
+export default Hamburger;
diff --git a/frontend/src/Pages/schedule.jsx b/frontend/src/Pages/schedule.jsx
index a9983b2..67ec79d 100644
--- a/frontend/src/Pages/schedule.jsx
+++ b/frontend/src/Pages/schedule.jsx
@@ -1,166 +1,93 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { IoArrowBack, IoSearchOutline } from 'react-icons/io5';
import { useNavigate } from 'react-router-dom';
-//import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
+import axios from 'axios';
const SchedulePage = () => {
- useEffect(() => {
- document.title = 'Station Saarthi | Schedule';
- }, []);
-
- const [trainNumber, setTrainNumber] = useState('22436');
- const [trainName, setTrainName] = useState('Vande Bharat');
- const [nextStation, setNextStation] = useState('Indore Jn.');
- const [services, setServices] = useState('-SELECT-');
- const [platformDetails, setPlatformDetails] = useState('Platform 3');
- const [coachDetails, setCoachDetails] = useState('A4');
- //const [date, setDate] = useState(null);
-
+ const [searchQuery, setSearchQuery] = useState('');
+ const [trainDetails, setTrainDetails] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
const navigate = useNavigate();
+ const searchTrain = async () => {
+ if (!searchQuery) {
+ setError('Please enter a train number to search');
+ return;
+ }
+
+ setLoading(true);
+ setError(null);
+
+ const apiKey = ""; // Enter your Indian Rail API key
+ const options = {
+ method: 'GET',
+ url: `https://indianrailapi.com/api/v2/TrainSchedule/apikey/${apiKey}/TrainNumber/${searchQuery}`,
+ };
+
+ try {
+ const response = await axios.request(options);
+ console.log("API Response Data:", response.data);
+
+ if (response.data.ResponseCode === "200") {
+ setTrainDetails(response.data.Route);
+ } else {
+ setError('No train details found');
+ }
+ } catch (error) {
+ console.error(error);
+ setError(error.message || 'An error occurred while fetching the train details');
+ } finally {
+ setLoading(false);
+ }
+ };
+
return (
-
-
-
-
-
navigate(-1)}
- className="flex items-center text-white hover:text-blue-200 transition-colors"
- >
+
+
+ navigate(-1)} className="text-white">
Back
-
-
- Train Schedule
-
-
-
-
- {/* Search Input */}
-
-
- {/* Train Number Input */}
-
-
Train Number
-
- setTrainNumber(e.target.value)}
- className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- />
-
-
-
-
- {/* Train Name Input */}
-
-
Train Name
-
- setTrainName(e.target.value)}
- className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- />
-
-
-
-
-
+
+
Train Schedule
-
-
Next Station
+
+
+ Search by Train Number
+
+
setNextStation(e.target.value)}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+ placeholder="Enter train number..."
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg"
/>
+
+ {error &&
{error}
}
+
-
- Services
- setServices(e.target.value)}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- >
- -SELECT-
- {/* @Select-- Add more options for SELECT */}
-
-
-
-
-
Platform Details
-
setPlatformDetails(e.target.value)}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- />
+ {loading &&
Loading...
}
+ {trainDetails && (
+
+ {trainDetails.map((stop) => (
+
+
{stop.StationName} ({stop.StationCode})
+
Arrival Time: {stop.ArrivalTime}
+
Departure Time: {stop.DepartureTime}
+
Distance: {stop.Distance} km
+
+ ))}
+ )}
-
- Coach Details
- setCoachDetails(e.target.value)}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- required
- >
- Select a coach
- GN - Unreserved
- SL - Sleeper
- 3A - AC 3-Tier
- 2A - AC 2-Tier
- 1A - First class AC
- CC - AC Chair Car
- EC - Executive Chair Car
- EA - Executive Anubhuti
- 2S - Second Sitting
- FC - First Class
-
-
-
-
- {/*
-
Date
-
- {/* setDate(date)}
- dateFormat="dd/MM/yyyy"
- placeholderText="DD/MM/YY"
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
- popperClassName="z-50"
- /> }
-
-
*/}
-
-
-
- Get Directions
+
+ Search Train
diff --git a/frontend/src/components/TeamSection.jsx b/frontend/src/components/TeamSection.jsx
new file mode 100644
index 0000000..72cfaba
--- /dev/null
+++ b/frontend/src/components/TeamSection.jsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Star } from 'lucide-react';
+import { useMediaQuery } from 'react-responsive';
+
+const teamMembers = [
+ {
+ name: 'Rajesh Kumar',
+ role: 'Technology Lead',
+ image: 'https://media.istockphoto.com/id/613557584/photo/portrait-of-a-beautifull-smiling-man.jpg?s=612x612&w=0&k=20&c=hkCg5CrmTKOApePbPOyo1U9GexEfIJOJqoLXJIvcN8E=', // Add actual image URL
+ quote: 'Passionate about technology and travel.',
+ bio: 'With over 10 years of experience in software development, Rajesh leads our tech initiatives to enhance the travel experience.',
+ },
+ {
+ name: 'Anita Desai',
+ role: 'User Experience Designer',
+ image: 'https://www.stylecraze.com/wp-content/uploads/2013/05/Most-Beautiful-Women-In-India.jpg', // Add actual image URL
+ quote: 'Designing for users is my passion.',
+ bio: 'Anita specializes in creating user-friendly interfaces that simplify interactions and enhance accessibility.',
+ },
+ {
+ name: 'Vikram Singh',
+ role: 'Operations Manager',
+ image: 'https://english.cdn.zeenews.com/sites/default/files/2017/11/17/639329-indian-men.jpg', // Add actual image URL
+ quote: 'Optimizing processes for better efficiency.',
+ bio: 'Vikram ensures that our operations run smoothly, focusing on delivering top-notch services to travelers.',
+ },
+ {
+ name: 'Rekha Sharma',
+ role: 'UX/UI Designer',
+ image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJv1aDBUeruN6ZJwt5VqNHQx1UfUM8wShdEjGRAvW1lQxCAMG4cTgUX_ekZXDKHbAg8wQ&usqp=CAU',
+ quote: 'Creating user-centric designs.',
+ bio: 'Rekha ensures our interfaces are not only beautiful but also intuitive for users.'
+ },
+ {
+ name: 'Suresh Mehta',
+ role: 'Customer Support Lead',
+ image: 'https://cdn.openart.ai/stable_diffusion/18d45fc8e03d0f93cb1b170c810720b55d1822c7_2000x2000.webp',
+ quote: 'Ensuring a smooth journey for every passenger.',
+ bio: 'Suresh leads our customer support team, dedicated to resolving queries efficiently.'
+ },
+ // Add more team member objects as needed
+];
+
+// Duplicate the first and last members for infinite scroll effect
+const infiniteTeamMembers = teamMembers;
+
+const TeamCard = ({ member }) => (
+
+
+
+
+
+
{member.name}
+
{member.role}
+
+
+
"{member.quote}"
+
{member.bio}
+
+
+);
+
+const TeamSection = () => {
+ const [currentIndex, setCurrentIndex] = useState(1); // Start at the first real member
+ const [isTransitioning, setIsTransitioning] = useState(false);
+ const isSmallScreen = useMediaQuery({ query: '(max-width: 640px)' });
+ const isLargeScreen = useMediaQuery({ query: '(min-width: 641px)' });
+
+ const teamWidth = isSmallScreen ? 100 : 100 / 3;
+
+ const nextMember = useCallback(() => {
+ setIsTransitioning(true);
+ setCurrentIndex((prevIndex) => {
+ if (prevIndex === infiniteTeamMembers.length - 2) {
+ setTimeout(() => {
+ setIsTransitioning(false);
+ setCurrentIndex(1);
+ }, 500);
+ return prevIndex;
+ }
+ return prevIndex + 1;
+ });
+ }, []);
+
+ const prevMember = useCallback(() => {
+ setIsTransitioning(true);
+ setCurrentIndex((prevIndex) => {
+ if (prevIndex === 1) {
+ setTimeout(() => {
+ setIsTransitioning(false);
+ setCurrentIndex(infiniteTeamMembers.length - 2);
+ }, 500);
+ return prevIndex;
+ }
+ return prevIndex - 1;
+ });
+ }, []);
+
+ useEffect(() => {
+ const timer = setInterval(nextMember, 4000);
+ return () => clearInterval(timer);
+ }, [nextMember]);
+
+ return (
+
+
+
+ Meet Our Team
+
+
+ Our diverse team of professionals is driven by a passion for innovation. With expertise
+ spanning technology, transportation, and user experience design, we are dedicated to
+ making railway stations smarter, more efficient, and more enjoyable for every passenger.
+
+
+
+
+ {infiniteTeamMembers.map((member, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {infiniteTeamMembers
+ .slice(1, isLargeScreen ? infiniteTeamMembers.length-1 : infiniteTeamMembers.length)
+ .map((_, index) => (
+
setCurrentIndex(index + 1)}
+ className={`w-2 h-2 mx-1 rounded-full cursor-pointer transition-colors duration-200 ${index + 1 === currentIndex ? 'bg-blue-600' : 'bg-gray-300'}`}
+ />
+ ))}
+
+
+
+ );
+};
+
+export default TeamSection;
diff --git a/frontend/src/components/about.jsx b/frontend/src/components/about.jsx
deleted file mode 100644
index e165550..0000000
--- a/frontend/src/components/about.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from 'react'; // Importing React
-import { useNavigate } from 'react-router-dom'; // Importing navigation function
-import backicon from '../assets/svg/backicon.svg'; // Importing back icon asset
-
-// About component
-const About = () => {
- // UseNavigate hook for navigation
- const navigate = useNavigate();
-
- // Function to handle home button click
- const HomeClick = () => {
- // Navigates to the home page when back button is clicked
- navigate('/');
- };
-
- // Return JSX structure
- return (
-
-
- {/* Back button to navigate to home */}
-
-
-
-
- {/* Main Heading */}
-
- ABOUT US
-
-
- {/* Introduction Section */}
-
- Welcome to
-
- StationSaarthi
- ,
- your one-stop platform designed to elevate your Indian Railway Station experience.
- With cutting-edge technology and user-friendly design, we aim to provide smooth and efficient
- travel assistance for all passengers.
-
-
- {/* Our Mission Section */}
-
-
- Our Mission
-
-
- At
-
- StationSaarthi
- ,
- our mission is to simplify the railway station experience by integrating advanced technology
- and providing real-time, actionable information to every traveler.
- We are committed to enhancing travel convenience for all.
-
-
-
- {/* Our Vision Section */}
-
-
- Our Vision
-
-
- Our vision is a future where every journey is hassle-free.
- We strive to create a travel ecosystem that connects passengers, railways, and services
- through seamless digital integration.
-
-
-
- {/* What We Offer Section */}
-
-
- What We Offer
-
-
- With
-
- StationSaarthi
- ,
- you get access to:
-
- Real-time train updates and notifications
- Interactive station maps for easy navigation
- Personalized travel recommendations
- Multi-language support to cater to diverse passengers
- Accessible services for differently-abled travelers
-
-
-
-
- {/* Why Choose Us Section */}
-
-
- Why Choose Us?
-
-
-
- StationSaarthi
-
- is more than a service; it's a commitment to revolutionizing your railway station experience.
- We believe in technology's power to enhance every aspect of your journey, ensuring safety,
- comfort, and convenience at every step.
-
-
-
- {/* Our Team Section */}
-
-
- Meet the Team
-
-
- Our diverse team of professionals is driven by a passion for innovation.
- With expertise spanning technology, transportation, and user experience design,
- we are dedicated to making railway stations smarter, more efficient, and more
- enjoyable for every passenger.
-
-
-
- {/* Footer */}
-
-
Β© 2024 StationSaarthi | All rights reserved
-
-
- );
-};
-
-// Exporting the About component for use in other parts of the app
-export default About;