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> |