irctc / index.html
123robinthomas's picture
Add 2 files
4ed7223 verified
<!DOCTYPE html>
<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>