Merge branch 'new_branch' of https://github.com/haseebzaki-07/Station…

…Guide into new_branch

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Register from './Pages/Register';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import chatbotsvg from './assets/svg/chatbot.svg';
 import { useNavigate, Outlet } from 'react-router-dom';
+import RailwayStations from './Pages/stations';
 import './App.css'
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
         <Route path="/" element={<Herosection />} />
         <Route path="/Login" element={<LoginPage />} />
         <Route path="/Register" element={<Register />} />
+        <Route path='/Stations' element={<RailwayStations/>} />
 
         {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */}
         <Route element={<ProtectedRoute />}>

frontend/src/Pages/Herosection.jsx

@@ -23,6 +23,9 @@ const Herosection = () => {
     const RegisterClick = () => {
         navigate('/Register'); // Navigates to the login page
     };
+    const StationCLick = () => {
+        navigate('/Stations'); // Navigates to the login page
+    };
     return (
         <>
 
@@ -48,7 +51,8 @@ const Herosection = () => {
         <div className='grid grid-cols-3 gap-4 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center'>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={navigationsvg} alt="" srcset="" className='bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2' /> <h1 className='font-bold text-black'>Navigation</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={bookingsvg} alt="" srcset="" className= "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Booking</h1></div>
-                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={stationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />  <h1 className='font-bold text-black'>Station</h1></div>
+                 <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={stationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" />  <h1 className='font-bold text-black'></h1>
+                 <button type="submit" onClick={StationCLick} className="w-20 py-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" >Station</button></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={mapsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>3D Map</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={schedulesvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Schedule</h1></div>
                  <div className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer'><img src={noticationsvg} alt="" srcset="" className = "bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2" /> <h1 className='font-bold text-black'>Notification</h1></div>

frontend/src/Pages/LoginPage.jsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react'; 
 import logo from '../assets/stationsaarthi.svg'; // Import your logo 
+import { useNavigate } from 'react-router-dom';
 
 const Login = () => {
     const [username, setUsername] = useState(''); 
     const [password, setPassword] = useState(''); 
-
+    const navigate = useNavigate();
+    const RegisterClick = () => {
+        navigate('/Register'); // Navigates to the login page
+    }
     const handleLogin = (e) => { 
         e.preventDefault(); 
         // Handle login logic here 
@@ -14,52 +18,52 @@ const Login = () => {
     return ( 
         <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */} 
-            <div className="text-center mb-10 ">
-                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-22 " />
-                <h1 className="text-4xl font-bold text-gray-800 mt-4 ">Station Saarthi</h1>
-                <p className="text-gray-600 mt-2 text-lg ">Your Trusted Platform Guide</p>
+            <div className="mb-10 text-center ">
+                <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto h-22 " />
+                <h1 className="mt-4 text-4xl font-bold text-gray-800 ">Station Saarthi</h1>
+                <p className="mt-2 text-lg text-gray-600 ">Your Trusted Platform Guide</p>
             </div>
 
 
             {/* Login Form */}
-            <form onSubmit={handleLogin} className="w-full max-w-sm bg-white p-8 rounded-lg shadow-md">
+            <form onSubmit={handleLogin} className="w-full max-w-sm p-8 bg-white rounded-lg shadow-md">
                 {/* Login Heading */}
-                <h2 className="text-xl font-bold text-center mb-4 py-1 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
+                <h2 className="py-1 mb-4 text-xl font-bold text-center bg-blue-100 border border-blue-300 shadow-sm rounded-3xl">
                     Login
                 </h2>
 
                 {/* Username Input */}
                 <div className="mb-5">
-                    <label className=" block text-gray-700 font-semibold mb-2" htmlFor="username">Username</label>
+                    <label className="block mb-2 font-semibold text-gray-700 " htmlFor="username">Username</label>
                     <input
                         type="text" 
                         id="username" 
                         value={username} 
                         onChange={(e) => setUsername(e.target.value)}
                         placeholder="Enter your username"
-                        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"
+                        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
                     /> 
                 </div> 
 
                 {/* Password Input */} 
                 <div className="mb-6"> 
-                    <label className="block  text-gray-700 font-semibold mb-2" htmlFor="password">Password</label>
+                    <label className="block mb-2 font-semibold text-gray-700" htmlFor="password">Password</label>
                     <input 
                         type="password"    
                         id="password"  
                         value={password}  
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Enter your password"
-                        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"
+                        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
                     />
                 </div>
 
                 {/* Login Button */} 
                 <button
                     type="submit"
-                    className="w-full py-3 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
+                    className="w-full py-3 font-semibold text-white transition duration-300 ease-in-out transform bg-blue-500 rounded-lg hover:bg-blue-600 hover:scale-105"
                 >
                     Login
                 </button>
@@ -68,10 +72,11 @@ const Login = () => {
             {/* Don't have an account link */}
             <p className="mt-6 text-gray-600">
                 Don't have an account?{' '}
-                <a href="/Register" className="text-blue-500 font-semibold hover:underline transition duration-300 transform hover:scale-105">
-                    Register
-                </a> 
+
+                <button onClick={RegisterClick} className="text-blue-500 underline focus:outline-none">
+                    Register</button>
             </p> 
+
         </div>  
     ); 
 }; 

frontend/src/Pages/Register.jsx

@@ -1,7 +1,14 @@
 import React, { useState } from 'react';
 import logo from '../assets/stationsaarthi.svg'; // Ensure the path is correct
+import { useNavigate } from 'react-router-dom';
 
 const Register = () => {
+
+    const navigate = useNavigate();
+    const LoginClick = () => {
+        navigate('/Login'); // Navigates to the login page
+    };
+
     const [name, setName] = useState('');
     const [phoneNumber, setPhoneNumber] = useState('');
     const [email, setEmail] = useState('');
@@ -13,92 +20,104 @@ const Register = () => {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-100 to-blue-5000 px-4">
+        <div className="flex flex-col items-center justify-center min-h-screen px-4 bg-gradient-to-b from-blue-100 to-blue-5000">
             {/* Logo and Title */}
-            <div className="text-center mb-6">
-                <img src={logo} alt="Station Saarthi Logo" className="mx-auto w-20 h-22 mb-2" />
+            <div className="mb-6 text-center">
+                <img src={logo} alt="Station Saarthi Logo" className="w-20 mx-auto mb-2 h-22" />
                 <h1 className="text-2xl font-bold text-gray-800">Station Saarthi</h1>
-                <p className="text-gray-700 mt-1 text-sm">Your Trusted Platform Guide</p>
+                <p className="mt-1 text-sm text-gray-700">Your Trusted Platform Guide</p>
             </div>
 
             {/* Registration Form */}
-            <form onSubmit={handleRegister} className="w-full max-w-sm bg-white p-6 rounded-lg shadow-md">
+            <form onSubmit={handleRegister} className="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
                 {/* Register Heading */}
-                <h2 className="text-xl font-bold text-center mb-4 py-1 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
+                <h2 className="py-1 mb-4 text-xl font-bold text-center bg-blue-100 border border-blue-300 shadow-sm rounded-3xl">
                     Register
                 </h2>
 
                 {/* Name Input */}
                 <div className="mb-4">
-                    <label className="block text-gray-700 font-semibold mb-1" htmlFor="name">Name</label>
+                    <label className="block mb-1 font-semibold text-gray-700" htmlFor="name">Name</label>
                     <input
                         type="text"
                         id="name"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         placeholder="Enter your name"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
 
                 {/* Phone Number Input */}
-                <div className="mb-4">
-                    <label className="block text-gray-700 font-medium mb-1" htmlFor="phoneNumber">Phone Number</label>
-                    <input
-                        type="tel"
-                        id="phoneNumber"
-                        value={phoneNumber}
-                        onChange={(e) => setPhoneNumber(e.target.value)}
-                        placeholder="Enter your phone number"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                        required
-                    />
-                </div>
+                 <div className="mb-4">
+          <label
+            className="block mb-1 font-medium text-gray-700"
+            htmlFor="phoneNumber"
+          >
+            Phone Number
+          </label>
+          <input
+            type="tel"
+            id="phoneNumber"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            placeholder="Enter your phone number"
+            pattern="\d{10}"
+            maxLength="10"
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+          {phoneNumber && phoneNumber.length !== 10 && (
+            <p className="text-sm text-red-500">
+              Please enter a valid 10-digit phone number.
+            </p>
+          )}
+        </div>
 
                 {/* Email Input */}
                 <div className="mb-4">
-                    <label className="block text-gray-700 font-medium mb-1" htmlFor="email">Email</label>
+                    <label className="block mb-1 font-medium text-gray-700" htmlFor="email">Email</label>
                     <input
                         type="email"
                         id="email"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                         placeholder="Enter your email"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
 
                 {/* Password Input */}
                 <div className="mb-5">
-                    <label className="block text-gray-700 font-medium mb-1" htmlFor="password">Password</label>
+                    <label className="block mb-1 font-medium text-gray-700" htmlFor="password">Password</label>
                     <input
                         type="password"
                         id="password"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Create a password"
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                         required
                     />
                 </div>
 
                 {/* Register Button */}
                 <button
                     type="submit"
-                    className="w-full py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 text-sm"
+                    className="w-full py-2 text-sm font-semibold text-white transition duration-300 ease-in-out transform bg-blue-500 rounded-md hover:bg-blue-600 hover:scale-105"
                 >
                     Register
                 </button>
             </form>
 
             {/* Already have an account link */}
-            <p className="mt-4 text-gray-700 text-sm">
+            <p className="mt-4 text-sm text-gray-700">
                 Already have an account?{' '}
-                <a href="/Login" className="text-blue-500 font-medium hover:underline transition duration-300 transform hover:scale-105">
-                    Log in
-                </a>
+                <button
+                    onClick={LoginClick}
+                    className="text-blue-500 underline cursor-pointer"> Login</button>
             </p>
         </div>
     );