diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 1939c46..4438f96 100644 --- a/frontend/src/App.jsx +++ b/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() { } /> } /> } /> + } /> {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */} }> diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx index 2cea13c..6d510e5 100644 --- a/frontend/src/Pages/Herosection.jsx +++ b/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 = () => { Navigation Booking - Station + + Station 3D Map Schedule Notification diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx index ee075c4..9e579c3 100644 --- a/frontend/src/Pages/LoginPage.jsx +++ b/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,44 +18,44 @@ const Login = () => { return ( {/* Logo and Title */} - - - Station Saarthi - Your Trusted Platform Guide + + + Station Saarthi + Your Trusted Platform Guide {/* Login Form */} - + {/* Login Heading */} - + Login {/* Username Input */} - Username + Username 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 /> {/* Password Input */} - Password + Password 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 /> @@ -59,7 +63,7 @@ const Login = () => { {/* Login Button */} Login @@ -68,10 +72,11 @@ const Login = () => { {/* Don't have an account link */} Don't have an account?{' '} - - Register - + + + Register + ); }; diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx index 5ca37ab..e4e0a8a 100644 --- a/frontend/src/Pages/Register.jsx +++ b/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,73 +20,85 @@ const Register = () => { }; return ( - + {/* Logo and Title */} - - + + Station Saarthi - Your Trusted Platform Guide + Your Trusted Platform Guide {/* Registration Form */} - + {/* Register Heading */} - + Register {/* Name Input */} - Name + Name 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 /> {/* Phone Number Input */} - - Phone Number - 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 - /> - + + + Phone Number + + 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 && ( + + Please enter a valid 10-digit phone number. + + )} + {/* Email Input */} - Email + Email 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 /> {/* Password Input */} - Password + Password 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 /> @@ -87,18 +106,18 @@ const Register = () => { {/* Register Button */} Register {/* Already have an account link */} - + Already have an account?{' '} - - Log in - + Login ); diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx index e69de29..f89e896 100644 --- a/frontend/src/Pages/stations.jsx +++ b/frontend/src/Pages/stations.jsx @@ -0,0 +1,168 @@ +// src/components/RailwayStations.jsx + +import React, { useState } from 'react'; +import { FaTrain } from 'react-icons/fa'; // Using FontAwesome train icon +import { AiFillStar, AiOutlineStar } from 'react-icons/ai'; // Star icons for favorites + +const RailwayStations = () => { + // Comprehensive list of railway stations + const stations = [ + 'Mumbai Central', + 'Chhatrapati Shivaji Maharaj Terminus', + 'Delhi Junction', + 'Kolkata Chitpur', + 'Bangalore City', + 'Hyderabad Deccan', + 'Ahmedabad Junction', + 'Chennai Central', + 'Pune Junction', + 'Lucknow Charbagh', + 'Jaipur Junction', + 'Kanpur Central', + 'Nagpur Junction', + 'Surat Junction', + 'Patna Junction', + 'Indore Junction', + 'Vadodara Junction', + 'Bhopal Junction', + 'Guwahati Junction', + 'Amritsar Junction', + 'Secunderabad Junction', + 'Vijayawada Junction', + 'Cochin Ernakulam Junction', + 'Howrah Junction', + 'Dibrugarh Junction', + 'Thiruvananthapuram Central', + 'Visakhapatnam Junction', + 'Udaipur City', + 'Gwalior Junction', + 'Agra Cantonment', + 'Bareilly Junction', + 'Jammu Tawi', + 'Bhubaneswar', + 'Dehradun', + 'Mysore Junction', + 'Hubli Junction', + 'Kota Junction', + 'Srinagar Junction', + 'Varanasi Junction', + 'Allahabad Junction', + 'Mangalore Junction', + 'Bareilly Junction', + 'Amritsar Cantonment', + 'Jabalpur Junction', + 'Kalyan Junction', + 'Gurgaon Junction', + 'Bilaspur Junction', + 'Ranchi Junction', + 'Ujjain Junction', + 'Coimbatore Junction', + 'Tirupati', + 'Guntur Junction', + 'Kota Junction', + 'Siliguri Junction', + 'Nanded Junction', + 'Bikaner Junction', + 'Madurai Junction', + 'Rourkela Junction', + 'Jodhpur Junction', + // Add more stations as needed + ]; + + const [searchTerm, setSearchTerm] = useState(''); + const [favorites, setFavorites] = useState([]); + + // Function to toggle favorite stations + const toggleFavorite = (station) => { + if (favorites.includes(station)) { + setFavorites(favorites.filter((fav) => fav !== station)); + } else { + setFavorites([...favorites, station]); + } + }; + + // Filter stations based on search term + const filteredStations = stations.filter((station) => + station.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( + + {/* Header Section */} + + Railway Stations + Find and explore railway stations across India + + + {/* Search Bar */} + + setSearchTerm(e.target.value)} + className="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300" + /> + + + {/* Stations Grid */} + + + {filteredStations.length > 0 ? ( + filteredStations.map((station, index) => ( + + + + {station} + + toggleFavorite(station)} + className="text-yellow-500 focus:outline-none" + aria-label={favorites.includes(station) ? "Remove from favorites" : "Add to favorites"} + > + {favorites.includes(station) ? : } + + + )) + ) : ( + No stations found. + )} + + + + {/* Favorites Section (Optional) */} + {favorites.length > 0 && ( + + Your Favorite Stations + + + {favorites.map((station, index) => ( + + + + {station} + + toggleFavorite(station)} + className="text-red-500 focus:outline-none" + aria-label="Remove from favorites" + > + + + + ))} + + + + )} + + ); +}; + +export default RailwayStations; diff --git a/frontend/src/assets/stationsaarthi.svg b/frontend/src/assets/stationsaarthi.svg index aeb93fe..412585f 100644 --- a/frontend/src/assets/stationsaarthi.svg +++ b/frontend/src/assets/stationsaarthi.svg @@ -1,166 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 312904c..115997a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "react-icons": "^5.3.0", "vite": "^5.4.8" } }, @@ -600,6 +601,24 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -649,6 +668,26 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/rollup": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz", diff --git a/package.json b/package.json index 1c1f6e8..cc4eac5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "react-icons": "^5.3.0", "vite": "^5.4.8" } }
Your Trusted Platform Guide
Don't have an account?{' '} - - Register - + + + Register
+ Please enter a valid 10-digit phone number. +
+
Already have an account?{' '} - - Log in - + Login
Find and explore railway stations across India