Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>IRCTC NextGen - Indian Railway Catering and Tourism Corporation</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
<style> | |
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
body { | |
font-family: 'Poppins', sans-serif; | |
background-color: #f5f5f5; | |
} | |
.gradient-bg { | |
background: linear-gradient(135deg, #0056b3 0%, #003366 100%); | |
} | |
.train-card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
} | |
.train-card { | |
transition: all 0.3s ease; | |
} | |
.tab-active { | |
border-bottom: 3px solid #0056b3; | |
color: #0056b3; | |
font-weight: 600; | |
} | |
.station-dot { | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
background-color: #0056b3; | |
position: absolute; | |
left: -6px; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
.station-line { | |
width: 2px; | |
height: 100%; | |
background-color: #0056b3; | |
position: absolute; | |
left: -1px; | |
top: 0; | |
} | |
.seat-available { | |
background-color: #e6f7ff; | |
border: 1px solid #0056b3; | |
color: #0056b3; | |
} | |
.seat-booked { | |
background-color: #f5f5f5; | |
border: 1px solid #ccc; | |
color: #999; | |
} | |
.seat-selected { | |
background-color: #0056b3; | |
border: 1px solid #0056b3; | |
color: white; | |
} | |
.loading-spinner { | |
border: 3px solid rgba(0, 86, 179, 0.2); | |
border-radius: 50%; | |
border-top: 3px solid #0056b3; | |
width: 30px; | |
height: 30px; | |
animation: spin 1s linear infinite; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Header --> | |
<header class="gradient-bg text-white shadow-md"> | |
<div class="container mx-auto px-4 py-3"> | |
<div class="flex justify-between items-center"> | |
<div class="flex items-center space-x-4"> | |
<div class="flex items-center"> | |
<i class="fas fa-train text-2xl"></i> | |
<span class="ml-2 text-xl font-bold">IRCTC</span> | |
</div> | |
<nav class="hidden md:flex space-x-6"> | |
<a href="#" class="hover:text-blue-200">Trains</a> | |
<a href="#" class="hover:text-blue-200">Hotels</a> | |
<a href="#" class="hover:text-blue-200">Tour Packages</a> | |
<a href="#" class="hover:text-blue-200">Catering</a> | |
</nav> | |
</div> | |
<div class="flex items-center space-x-4"> | |
<button class="bg-white text-blue-800 px-4 py-1 rounded-md font-medium hover:bg-blue-100 transition"> | |
<i class="fas fa-user mr-1"></i> Login | |
</button> | |
<button class="hidden md:block bg-yellow-400 text-blue-900 px-4 py-1 rounded-md font-medium hover:bg-yellow-300 transition"> | |
<i class="fas fa-wallet mr-1"></i> IRCTC Wallet | |
</button> | |
</div> | |
</div> | |
</div> | |
</header> | |
<!-- Search Section --> | |
<section class="gradient-bg text-white py-8"> | |
<div class="container mx-auto px-4"> | |
<div class="flex justify-between items-center mb-6"> | |
<h1 class="text-2xl md:text-3xl font-bold">Book Train Tickets</h1> | |
<div class="flex items-center space-x-2"> | |
<span class="text-sm">PNR Status</span> | |
<span class="text-sm">|</span> | |
<span class="text-sm">Live Train Status</span> | |
</div> | |
</div> | |
<div class="bg-white rounded-lg shadow-lg p-6"> | |
<div class="flex border-b"> | |
<button id="oneWayTab" class="px-4 py-2 font-medium tab-active">One Way</button> | |
<button id="roundTripTab" class="px-4 py-2 font-medium text-gray-600">Round Trip</button> | |
</div> | |
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">From</label> | |
<div class="relative"> | |
<input type="text" id="fromStation" class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Source Station"> | |
<i class="fas fa-exchange-alt absolute right-3 top-3 text-gray-400 transform rotate-90 cursor-pointer hover:text-blue-500"></i> | |
</div> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">To</label> | |
<input type="text" id="toStation" class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Destination Station"> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Date of Journey</label> | |
<div class="relative"> | |
<input type="date" id="journeyDate" class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<div class="absolute right-3 top-3 flex space-x-1"> | |
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+1</span> | |
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+2</span> | |
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+3</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Class</label> | |
<select class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>All Classes</option> | |
<option>AC First Class (1A)</option> | |
<option>AC 2 Tier (2A)</option> | |
<option>AC 3 Tier (3A)</option> | |
<option>Sleeper (SL)</option> | |
<option>Second Sitting (2S)</option> | |
</select> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Quota</label> | |
<select class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>General</option> | |
<option>Tatkal</option> | |
<option>Premium Tatkal</option> | |
<option>Ladies</option> | |
<option>Lower Berth</option> | |
</select> | |
</div> | |
<div class="flex items-end"> | |
<button id="searchBtn" class="w-full bg-yellow-400 text-blue-900 py-3 rounded-md font-bold hover:bg-yellow-300 transition flex items-center justify-center"> | |
<i class="fas fa-search mr-2"></i> SEARCH TRAINS | |
</button> | |
</div> | |
</div> | |
<div class="mt-4 flex flex-wrap gap-2"> | |
<span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Flexible with Date</span> | |
<span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Train with Available Berth</span> | |
<span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Railway Pass Concession</span> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Quick Links --> | |
<section class="bg-white py-6 shadow-sm"> | |
<div class="container mx-auto px-4"> | |
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center"> | |
<a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition"> | |
<div class="bg-blue-100 p-3 rounded-full mb-2"> | |
<i class="fas fa-ticket-alt text-blue-600"></i> | |
</div> | |
<span class="text-sm font-medium">Book Ticket</span> | |
</a> | |
<a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition"> | |
<div class="bg-blue-100 p-3 rounded-full mb-2"> | |
<i class="fas fa-hotel text-blue-600"></i> | |
</div> | |
<span class="text-sm font-medium">Book Hotel</span> | |
</a> | |
<a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition"> | |
<div class="bg-blue-100 p-3 rounded-full mb-2"> | |
<i class="fas fa-utensils text-blue-600"></i> | |
</div> | |
<span class="text-sm font-medium">E-Catering</span> | |
</a> | |
<a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition"> | |
<div class="bg-blue-100 p-3 rounded-full mb-2"> | |
<i class="fas fa-map-marked-alt text-blue-600"></i> | |
</div> | |
<span class="text-sm font-medium">Tour Packages</span> | |
</a> | |
<a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition"> | |
<div class="bg-blue-100 p-3 rounded-full mb-2"> | |
<i class="fas fa-bus text-blue-600"></i> | |
</div> | |
<span class="text-sm font-medium">Bus Tickets</span> | |
</a> | |
</div> | |
</div> | |
</section> | |
<!-- Train List Section --> | |
<section class="py-8 bg-gray-50"> | |
<div class="container mx-auto px-4"> | |
<div id="loading" class="hidden flex justify-center items-center py-12"> | |
<div class="loading-spinner"></div> | |
<span class="ml-3 text-blue-800 font-medium">Searching for trains...</span> | |
</div> | |
<div id="trainResults" class="hidden"> | |
<div class="flex justify-between items-center mb-6"> | |
<h2 class="text-xl font-bold text-gray-800">Available Trains</h2> | |
<div class="flex items-center space-x-4"> | |
<div class="flex items-center"> | |
<span class="text-sm mr-2">Sort by:</span> | |
<select class="p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>Departure Time</option> | |
<option>Arrival Time</option> | |
<option>Duration</option> | |
<option>Price (Low to High)</option> | |
<option>Price (High to Low)</option> | |
</select> | |
</div> | |
<button class="p-2 border rounded-md hover:bg-gray-100"> | |
<i class="fas fa-filter text-blue-600"></i> | |
</button> | |
</div> | |
</div> | |
<!-- Train Cards --> | |
<div class="space-y-4"> | |
<!-- Train Card 1 --> | |
<div class="train-card bg-white rounded-lg shadow-md overflow-hidden"> | |
<div class="p-4 border-b"> | |
<div class="flex justify-between items-start"> | |
<div> | |
<h3 class="font-bold text-lg">Rajdhani Express (12951)</h3> | |
<p class="text-gray-600 text-sm">Mumbai Central - New Delhi</p> | |
</div> | |
<div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium"> | |
Available | |
</div> | |
</div> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4"> | |
<div> | |
<div class="text-gray-500 text-sm">DEPARTURE</div> | |
<div class="font-bold">16:30</div> | |
<div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div> | |
<div class="text-gray-500 text-sm">Tue, 15 Aug</div> | |
</div> | |
<div class="relative"> | |
<div class="text-center text-gray-500 text-sm">18h 30m</div> | |
<div class="flex justify-center my-2"> | |
<div class="w-16 h-1 bg-gray-300 rounded-full"></div> | |
</div> | |
<div class="text-center text-blue-600 text-sm">Direct</div> | |
</div> | |
<div> | |
<div class="text-gray-500 text-sm">ARRIVAL</div> | |
<div class="font-bold">11:00</div> | |
<div class="text-gray-600 text-sm">New Delhi (NDLS)</div> | |
<div class="text-gray-500 text-sm">Wed, 16 Aug</div> | |
</div> | |
</div> | |
<div class="bg-gray-50 p-4 border-t"> | |
<div class="flex justify-between items-center"> | |
<div class="flex space-x-4"> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">SL</div> | |
<div class="font-bold">₹1,245</div> | |
<div class="text-green-600 text-xs">12 Available</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">3A</div> | |
<div class="font-bold">₹2,150</div> | |
<div class="text-green-600 text-xs">5 Available</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">2A</div> | |
<div class="font-bold">₹3,120</div> | |
<div class="text-green-600 text-xs">3 Available</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">1A</div> | |
<div class="font-bold">₹5,340</div> | |
<div class="text-green-600 text-xs">2 Available</div> | |
</div> | |
</div> | |
<button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition"> | |
Book Now | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Train Card 2 --> | |
<div class="train-card bg-white rounded-lg shadow-md overflow-hidden"> | |
<div class="p-4 border-b"> | |
<div class="flex justify-between items-start"> | |
<div> | |
<h3 class="font-bold text-lg">Shatabdi Express (12009)</h3> | |
<p class="text-gray-600 text-sm">Mumbai Central - Ahmedabad</p> | |
</div> | |
<div class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium"> | |
RAC | |
</div> | |
</div> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4"> | |
<div> | |
<div class="text-gray-500 text-sm">DEPARTURE</div> | |
<div class="font-bold">06:25</div> | |
<div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div> | |
<div class="text-gray-500 text-sm">Tue, 15 Aug</div> | |
</div> | |
<div class="relative"> | |
<div class="text-center text-gray-500 text-sm">6h 35m</div> | |
<div class="flex justify-center my-2"> | |
<div class="w-16 h-1 bg-gray-300 rounded-full"></div> | |
</div> | |
<div class="text-center text-blue-600 text-sm">Direct</div> | |
</div> | |
<div> | |
<div class="text-gray-500 text-sm">ARRIVAL</div> | |
<div class="font-bold">13:00</div> | |
<div class="text-gray-600 text-sm">Ahmedabad (ADI)</div> | |
<div class="text-gray-500 text-sm">Tue, 15 Aug</div> | |
</div> | |
</div> | |
<div class="bg-gray-50 p-4 border-t"> | |
<div class="flex justify-between items-center"> | |
<div class="flex space-x-4"> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">CC</div> | |
<div class="font-bold">₹1,050</div> | |
<div class="text-yellow-600 text-xs">RAC 5</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">EC</div> | |
<div class="font-bold">₹1,850</div> | |
<div class="text-green-600 text-xs">2 Available</div> | |
</div> | |
</div> | |
<button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition"> | |
Book Now | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Train Card 3 --> | |
<div class="train-card bg-white rounded-lg shadow-md overflow-hidden"> | |
<div class="p-4 border-b"> | |
<div class="flex justify-between items-start"> | |
<div> | |
<h3 class="font-bold text-lg">Duronto Express (12267)</h3> | |
<p class="text-gray-600 text-sm">Mumbai Central - Howrah</p> | |
</div> | |
<div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium"> | |
Waitlist 12 | |
</div> | |
</div> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4"> | |
<div> | |
<div class="text-gray-500 text-sm">DEPARTURE</div> | |
<div class="font-bold">22:15</div> | |
<div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div> | |
<div class="text-gray-500 text-sm">Tue, 15 Aug</div> | |
</div> | |
<div class="relative"> | |
<div class="text-center text-gray-500 text-sm">23h 45m</div> | |
<div class="flex justify-center my-2"> | |
<div class="w-16 h-1 bg-gray-300 rounded-full"></div> | |
</div> | |
<div class="text-center text-blue-600 text-sm">Direct</div> | |
</div> | |
<div> | |
<div class="text-gray-500 text-sm">ARRIVAL</div> | |
<div class="font-bold">22:00</div> | |
<div class="text-gray-600 text-sm">Howrah (HWH)</div> | |
<div class="text-gray-500 text-sm">Wed, 16 Aug</div> | |
</div> | |
</div> | |
<div class="bg-gray-50 p-4 border-t"> | |
<div class="flex justify-between items-center"> | |
<div class="flex space-x-4"> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">SL</div> | |
<div class="font-bold">₹1,450</div> | |
<div class="text-red-600 text-xs">WL 12</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">3A</div> | |
<div class="font-bold">₹2,350</div> | |
<div class="text-red-600 text-xs">WL 5</div> | |
</div> | |
<div class="text-center"> | |
<div class="text-gray-500 text-sm">2A</div> | |
<div class="font-bold">₹3,420</div> | |
<div class="text-red-600 text-xs">WL 2</div> | |
</div> | |
</div> | |
<button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition"> | |
Book Now | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Booking Modal --> | |
<div id="bookingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> | |
<div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> | |
<div class="p-6"> | |
<div class="flex justify-between items-center border-b pb-4"> | |
<h3 class="text-xl font-bold">Book Tickets - Rajdhani Express (12951)</h3> | |
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
<i class="fas fa-times"></i> | |
</button> | |
</div> | |
<div class="mt-6"> | |
<div class="flex justify-between items-center mb-4"> | |
<div> | |
<div class="font-bold">Mumbai Central (MMCT) to New Delhi (NDLS)</div> | |
<div class="text-gray-600 text-sm">Tue, 15 Aug 2023 | 16:30 - 11:00 (+1 day)</div> | |
</div> | |
<div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"> | |
Duration: 18h 30m | |
</div> | |
</div> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
<div> | |
<h4 class="font-bold mb-3">Passenger Details</h4> | |
<div class="space-y-4"> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Name</label> | |
<input type="text" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Full Name"> | |
</div> | |
<div class="grid grid-cols-2 gap-4"> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Age</label> | |
<input type="number" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Age"> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Gender</label> | |
<select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>Male</option> | |
<option>Female</option> | |
<option>Other</option> | |
</select> | |
</div> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Berth Preference</label> | |
<select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>No Preference</option> | |
<option>Lower Berth</option> | |
<option>Middle Berth</option> | |
<option>Upper Berth</option> | |
<option>Side Lower</option> | |
<option>Side Upper</option> | |
</select> | |
</div> | |
<div> | |
<label class="block text-gray-700 text-sm font-medium mb-1">Food Preference</label> | |
<select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
<option>No Meal</option> | |
<option>Vegetarian</option> | |
<option>Non-Vegetarian</option> | |
<option>Jain</option> | |
</select> | |
</div> | |
</div> | |
</div> | |
<div> | |
<h4 class="font-bold mb-3">Seat Selection</h4> | |
<div class="border rounded-md p-4 mb-4"> | |
<div class="flex justify-between items-center mb-3"> | |
<div> | |
<span class="font-medium">AC 2 Tier (2A)</span> | |
<span class="text-gray-600 text-sm ml-2">Coach: B1</span> | |
</div> | |
<div class="text-blue-600 font-medium">₹3,120</div> | |
</div> | |
<div class="grid grid-cols-4 gap-2 mb-4"> | |
<div class="seat-available p-2 text-center rounded cursor-pointer">1</div> | |
<div class="seat-available p-2 text-center rounded cursor-pointer">2</div> | |
<div class="seat-booked p-2 text-center rounded">3</div> | |
<div class="seat-available p-2 text-center rounded cursor-pointer">4</div> | |
<div class="seat-selected p-2 text-center rounded cursor-pointer">5</div> | |
<div class="seat-available p-2 text-center rounded cursor-pointer">6</div> | |
<div class="seat-book | |
</html> |