Hugging Face's logo

Spaces:
123robinthomas
/
irctc
Running

App Files Community
123robinthomas commited on
Commit
4ed7223
·
verified ·
1 Parent(s): f59d6d5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +553 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Irctc
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: irctc
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,553 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IRCTC NextGen - Indian Railway Catering and Tourism Corporation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f5f5f5;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #0056b3 0%, #003366 100%);
19
+ }
20
+
21
+ .train-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ .train-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #0056b3;
32
+ color: #0056b3;
33
+ font-weight: 600;
34
+ }
35
+
36
+ .station-dot {
37
+ width: 12px;
38
+ height: 12px;
39
+ border-radius: 50%;
40
+ background-color: #0056b3;
41
+ position: absolute;
42
+ left: -6px;
43
+ top: 50%;
44
+ transform: translateY(-50%);
45
+ }
46
+
47
+ .station-line {
48
+ width: 2px;
49
+ height: 100%;
50
+ background-color: #0056b3;
51
+ position: absolute;
52
+ left: -1px;
53
+ top: 0;
54
+ }
55
+
56
+ .seat-available {
57
+ background-color: #e6f7ff;
58
+ border: 1px solid #0056b3;
59
+ color: #0056b3;
60
+ }
61
+
62
+ .seat-booked {
63
+ background-color: #f5f5f5;
64
+ border: 1px solid #ccc;
65
+ color: #999;
66
+ }
67
+
68
+ .seat-selected {
69
+ background-color: #0056b3;
70
+ border: 1px solid #0056b3;
71
+ color: white;
72
+ }
73
+
74
+ .loading-spinner {
75
+ border: 3px solid rgba(0, 86, 179, 0.2);
76
+ border-radius: 50%;
77
+ border-top: 3px solid #0056b3;
78
+ width: 30px;
79
+ height: 30px;
80
+ animation: spin 1s linear infinite;
81
+ }
82
+
83
+ @keyframes spin {
84
+ 0% { transform: rotate(0deg); }
85
+ 100% { transform: rotate(360deg); }
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <!-- Header -->
91
+ <header class="gradient-bg text-white shadow-md">
92
+ <div class="container mx-auto px-4 py-3">
93
+ <div class="flex justify-between items-center">
94
+ <div class="flex items-center space-x-4">
95
+ <div class="flex items-center">
96
+ <i class="fas fa-train text-2xl"></i>
97
+ <span class="ml-2 text-xl font-bold">IRCTC</span>
98
+ </div>
99
+ <nav class="hidden md:flex space-x-6">
100
+ <a href="#" class="hover:text-blue-200">Trains</a>
101
+ <a href="#" class="hover:text-blue-200">Hotels</a>
102
+ <a href="#" class="hover:text-blue-200">Tour Packages</a>
103
+ <a href="#" class="hover:text-blue-200">Catering</a>
104
+ </nav>
105
+ </div>
106
+ <div class="flex items-center space-x-4">
107
+ <button class="bg-white text-blue-800 px-4 py-1 rounded-md font-medium hover:bg-blue-100 transition">
108
+ <i class="fas fa-user mr-1"></i> Login
109
+ </button>
110
+ <button class="hidden md:block bg-yellow-400 text-blue-900 px-4 py-1 rounded-md font-medium hover:bg-yellow-300 transition">
111
+ <i class="fas fa-wallet mr-1"></i> IRCTC Wallet
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </header>
117
+
118
+ <!-- Search Section -->
119
+ <section class="gradient-bg text-white py-8">
120
+ <div class="container mx-auto px-4">
121
+ <div class="flex justify-between items-center mb-6">
122
+ <h1 class="text-2xl md:text-3xl font-bold">Book Train Tickets</h1>
123
+ <div class="flex items-center space-x-2">
124
+ <span class="text-sm">PNR Status</span>
125
+ <span class="text-sm">|</span>
126
+ <span class="text-sm">Live Train Status</span>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="bg-white rounded-lg shadow-lg p-6">
131
+ <div class="flex border-b">
132
+ <button id="oneWayTab" class="px-4 py-2 font-medium tab-active">One Way</button>
133
+ <button id="roundTripTab" class="px-4 py-2 font-medium text-gray-600">Round Trip</button>
134
+ </div>
135
+
136
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
137
+ <div>
138
+ <label class="block text-gray-700 text-sm font-medium mb-1">From</label>
139
+ <div class="relative">
140
+ <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">
141
+ <i class="fas fa-exchange-alt absolute right-3 top-3 text-gray-400 transform rotate-90 cursor-pointer hover:text-blue-500"></i>
142
+ </div>
143
+ </div>
144
+
145
+ <div>
146
+ <label class="block text-gray-700 text-sm font-medium mb-1">To</label>
147
+ <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">
148
+ </div>
149
+
150
+ <div>
151
+ <label class="block text-gray-700 text-sm font-medium mb-1">Date of Journey</label>
152
+ <div class="relative">
153
+ <input type="date" id="journeyDate" class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
154
+ <div class="absolute right-3 top-3 flex space-x-1">
155
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+1</span>
156
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+2</span>
157
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">+3</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
164
+ <div>
165
+ <label class="block text-gray-700 text-sm font-medium mb-1">Class</label>
166
+ <select class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
167
+ <option>All Classes</option>
168
+ <option>AC First Class (1A)</option>
169
+ <option>AC 2 Tier (2A)</option>
170
+ <option>AC 3 Tier (3A)</option>
171
+ <option>Sleeper (SL)</option>
172
+ <option>Second Sitting (2S)</option>
173
+ </select>
174
+ </div>
175
+
176
+ <div>
177
+ <label class="block text-gray-700 text-sm font-medium mb-1">Quota</label>
178
+ <select class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
179
+ <option>General</option>
180
+ <option>Tatkal</option>
181
+ <option>Premium Tatkal</option>
182
+ <option>Ladies</option>
183
+ <option>Lower Berth</option>
184
+ </select>
185
+ </div>
186
+
187
+ <div class="flex items-end">
188
+ <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">
189
+ <i class="fas fa-search mr-2"></i> SEARCH TRAINS
190
+ </button>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="mt-4 flex flex-wrap gap-2">
195
+ <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Flexible with Date</span>
196
+ <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Train with Available Berth</span>
197
+ <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Railway Pass Concession</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Quick Links -->
204
+ <section class="bg-white py-6 shadow-sm">
205
+ <div class="container mx-auto px-4">
206
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center">
207
+ <a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition">
208
+ <div class="bg-blue-100 p-3 rounded-full mb-2">
209
+ <i class="fas fa-ticket-alt text-blue-600"></i>
210
+ </div>
211
+ <span class="text-sm font-medium">Book Ticket</span>
212
+ </a>
213
+ <a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition">
214
+ <div class="bg-blue-100 p-3 rounded-full mb-2">
215
+ <i class="fas fa-hotel text-blue-600"></i>
216
+ </div>
217
+ <span class="text-sm font-medium">Book Hotel</span>
218
+ </a>
219
+ <a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition">
220
+ <div class="bg-blue-100 p-3 rounded-full mb-2">
221
+ <i class="fas fa-utensils text-blue-600"></i>
222
+ </div>
223
+ <span class="text-sm font-medium">E-Catering</span>
224
+ </a>
225
+ <a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition">
226
+ <div class="bg-blue-100 p-3 rounded-full mb-2">
227
+ <i class="fas fa-map-marked-alt text-blue-600"></i>
228
+ </div>
229
+ <span class="text-sm font-medium">Tour Packages</span>
230
+ </a>
231
+ <a href="#" class="flex flex-col items-center p-2 rounded-md hover:bg-blue-50 transition">
232
+ <div class="bg-blue-100 p-3 rounded-full mb-2">
233
+ <i class="fas fa-bus text-blue-600"></i>
234
+ </div>
235
+ <span class="text-sm font-medium">Bus Tickets</span>
236
+ </a>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Train List Section -->
242
+ <section class="py-8 bg-gray-50">
243
+ <div class="container mx-auto px-4">
244
+ <div id="loading" class="hidden flex justify-center items-center py-12">
245
+ <div class="loading-spinner"></div>
246
+ <span class="ml-3 text-blue-800 font-medium">Searching for trains...</span>
247
+ </div>
248
+
249
+ <div id="trainResults" class="hidden">
250
+ <div class="flex justify-between items-center mb-6">
251
+ <h2 class="text-xl font-bold text-gray-800">Available Trains</h2>
252
+ <div class="flex items-center space-x-4">
253
+ <div class="flex items-center">
254
+ <span class="text-sm mr-2">Sort by:</span>
255
+ <select class="p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
256
+ <option>Departure Time</option>
257
+ <option>Arrival Time</option>
258
+ <option>Duration</option>
259
+ <option>Price (Low to High)</option>
260
+ <option>Price (High to Low)</option>
261
+ </select>
262
+ </div>
263
+ <button class="p-2 border rounded-md hover:bg-gray-100">
264
+ <i class="fas fa-filter text-blue-600"></i>
265
+ </button>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Train Cards -->
270
+ <div class="space-y-4">
271
+ <!-- Train Card 1 -->
272
+ <div class="train-card bg-white rounded-lg shadow-md overflow-hidden">
273
+ <div class="p-4 border-b">
274
+ <div class="flex justify-between items-start">
275
+ <div>
276
+ <h3 class="font-bold text-lg">Rajdhani Express (12951)</h3>
277
+ <p class="text-gray-600 text-sm">Mumbai Central - New Delhi</p>
278
+ </div>
279
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
280
+ Available
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
286
+ <div>
287
+ <div class="text-gray-500 text-sm">DEPARTURE</div>
288
+ <div class="font-bold">16:30</div>
289
+ <div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div>
290
+ <div class="text-gray-500 text-sm">Tue, 15 Aug</div>
291
+ </div>
292
+
293
+ <div class="relative">
294
+ <div class="text-center text-gray-500 text-sm">18h 30m</div>
295
+ <div class="flex justify-center my-2">
296
+ <div class="w-16 h-1 bg-gray-300 rounded-full"></div>
297
+ </div>
298
+ <div class="text-center text-blue-600 text-sm">Direct</div>
299
+ </div>
300
+
301
+ <div>
302
+ <div class="text-gray-500 text-sm">ARRIVAL</div>
303
+ <div class="font-bold">11:00</div>
304
+ <div class="text-gray-600 text-sm">New Delhi (NDLS)</div>
305
+ <div class="text-gray-500 text-sm">Wed, 16 Aug</div>
306
+ </div>
307
+ </div>
308
+
309
+ <div class="bg-gray-50 p-4 border-t">
310
+ <div class="flex justify-between items-center">
311
+ <div class="flex space-x-4">
312
+ <div class="text-center">
313
+ <div class="text-gray-500 text-sm">SL</div>
314
+ <div class="font-bold">₹1,245</div>
315
+ <div class="text-green-600 text-xs">12 Available</div>
316
+ </div>
317
+ <div class="text-center">
318
+ <div class="text-gray-500 text-sm">3A</div>
319
+ <div class="font-bold">₹2,150</div>
320
+ <div class="text-green-600 text-xs">5 Available</div>
321
+ </div>
322
+ <div class="text-center">
323
+ <div class="text-gray-500 text-sm">2A</div>
324
+ <div class="font-bold">₹3,120</div>
325
+ <div class="text-green-600 text-xs">3 Available</div>
326
+ </div>
327
+ <div class="text-center">
328
+ <div class="text-gray-500 text-sm">1A</div>
329
+ <div class="font-bold">₹5,340</div>
330
+ <div class="text-green-600 text-xs">2 Available</div>
331
+ </div>
332
+ </div>
333
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition">
334
+ Book Now
335
+ </button>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Train Card 2 -->
341
+ <div class="train-card bg-white rounded-lg shadow-md overflow-hidden">
342
+ <div class="p-4 border-b">
343
+ <div class="flex justify-between items-start">
344
+ <div>
345
+ <h3 class="font-bold text-lg">Shatabdi Express (12009)</h3>
346
+ <p class="text-gray-600 text-sm">Mumbai Central - Ahmedabad</p>
347
+ </div>
348
+ <div class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium">
349
+ RAC
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
355
+ <div>
356
+ <div class="text-gray-500 text-sm">DEPARTURE</div>
357
+ <div class="font-bold">06:25</div>
358
+ <div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div>
359
+ <div class="text-gray-500 text-sm">Tue, 15 Aug</div>
360
+ </div>
361
+
362
+ <div class="relative">
363
+ <div class="text-center text-gray-500 text-sm">6h 35m</div>
364
+ <div class="flex justify-center my-2">
365
+ <div class="w-16 h-1 bg-gray-300 rounded-full"></div>
366
+ </div>
367
+ <div class="text-center text-blue-600 text-sm">Direct</div>
368
+ </div>
369
+
370
+ <div>
371
+ <div class="text-gray-500 text-sm">ARRIVAL</div>
372
+ <div class="font-bold">13:00</div>
373
+ <div class="text-gray-600 text-sm">Ahmedabad (ADI)</div>
374
+ <div class="text-gray-500 text-sm">Tue, 15 Aug</div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="bg-gray-50 p-4 border-t">
379
+ <div class="flex justify-between items-center">
380
+ <div class="flex space-x-4">
381
+ <div class="text-center">
382
+ <div class="text-gray-500 text-sm">CC</div>
383
+ <div class="font-bold">₹1,050</div>
384
+ <div class="text-yellow-600 text-xs">RAC 5</div>
385
+ </div>
386
+ <div class="text-center">
387
+ <div class="text-gray-500 text-sm">EC</div>
388
+ <div class="font-bold">₹1,850</div>
389
+ <div class="text-green-600 text-xs">2 Available</div>
390
+ </div>
391
+ </div>
392
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition">
393
+ Book Now
394
+ </button>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Train Card 3 -->
400
+ <div class="train-card bg-white rounded-lg shadow-md overflow-hidden">
401
+ <div class="p-4 border-b">
402
+ <div class="flex justify-between items-start">
403
+ <div>
404
+ <h3 class="font-bold text-lg">Duronto Express (12267)</h3>
405
+ <p class="text-gray-600 text-sm">Mumbai Central - Howrah</p>
406
+ </div>
407
+ <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium">
408
+ Waitlist 12
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
414
+ <div>
415
+ <div class="text-gray-500 text-sm">DEPARTURE</div>
416
+ <div class="font-bold">22:15</div>
417
+ <div class="text-gray-600 text-sm">Mumbai Central (MMCT)</div>
418
+ <div class="text-gray-500 text-sm">Tue, 15 Aug</div>
419
+ </div>
420
+
421
+ <div class="relative">
422
+ <div class="text-center text-gray-500 text-sm">23h 45m</div>
423
+ <div class="flex justify-center my-2">
424
+ <div class="w-16 h-1 bg-gray-300 rounded-full"></div>
425
+ </div>
426
+ <div class="text-center text-blue-600 text-sm">Direct</div>
427
+ </div>
428
+
429
+ <div>
430
+ <div class="text-gray-500 text-sm">ARRIVAL</div>
431
+ <div class="font-bold">22:00</div>
432
+ <div class="text-gray-600 text-sm">Howrah (HWH)</div>
433
+ <div class="text-gray-500 text-sm">Wed, 16 Aug</div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="bg-gray-50 p-4 border-t">
438
+ <div class="flex justify-between items-center">
439
+ <div class="flex space-x-4">
440
+ <div class="text-center">
441
+ <div class="text-gray-500 text-sm">SL</div>
442
+ <div class="font-bold">₹1,450</div>
443
+ <div class="text-red-600 text-xs">WL 12</div>
444
+ </div>
445
+ <div class="text-center">
446
+ <div class="text-gray-500 text-sm">3A</div>
447
+ <div class="font-bold">₹2,350</div>
448
+ <div class="text-red-600 text-xs">WL 5</div>
449
+ </div>
450
+ <div class="text-center">
451
+ <div class="text-gray-500 text-sm">2A</div>
452
+ <div class="font-bold">₹3,420</div>
453
+ <div class="text-red-600 text-xs">WL 2</div>
454
+ </div>
455
+ </div>
456
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition">
457
+ Book Now
458
+ </button>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- Booking Modal -->
468
+ <div id="bookingModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
469
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
470
+ <div class="p-6">
471
+ <div class="flex justify-between items-center border-b pb-4">
472
+ <h3 class="text-xl font-bold">Book Tickets - Rajdhani Express (12951)</h3>
473
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
474
+ <i class="fas fa-times"></i>
475
+ </button>
476
+ </div>
477
+
478
+ <div class="mt-6">
479
+ <div class="flex justify-between items-center mb-4">
480
+ <div>
481
+ <div class="font-bold">Mumbai Central (MMCT) to New Delhi (NDLS)</div>
482
+ <div class="text-gray-600 text-sm">Tue, 15 Aug 2023 | 16:30 - 11:00 (+1 day)</div>
483
+ </div>
484
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
485
+ Duration: 18h 30m
486
+ </div>
487
+ </div>
488
+
489
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
490
+ <div>
491
+ <h4 class="font-bold mb-3">Passenger Details</h4>
492
+ <div class="space-y-4">
493
+ <div>
494
+ <label class="block text-gray-700 text-sm font-medium mb-1">Name</label>
495
+ <input type="text" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Full Name">
496
+ </div>
497
+ <div class="grid grid-cols-2 gap-4">
498
+ <div>
499
+ <label class="block text-gray-700 text-sm font-medium mb-1">Age</label>
500
+ <input type="number" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Age">
501
+ </div>
502
+ <div>
503
+ <label class="block text-gray-700 text-sm font-medium mb-1">Gender</label>
504
+ <select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
505
+ <option>Male</option>
506
+ <option>Female</option>
507
+ <option>Other</option>
508
+ </select>
509
+ </div>
510
+ </div>
511
+ <div>
512
+ <label class="block text-gray-700 text-sm font-medium mb-1">Berth Preference</label>
513
+ <select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
514
+ <option>No Preference</option>
515
+ <option>Lower Berth</option>
516
+ <option>Middle Berth</option>
517
+ <option>Upper Berth</option>
518
+ <option>Side Lower</option>
519
+ <option>Side Upper</option>
520
+ </select>
521
+ </div>
522
+ <div>
523
+ <label class="block text-gray-700 text-sm font-medium mb-1">Food Preference</label>
524
+ <select class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
525
+ <option>No Meal</option>
526
+ <option>Vegetarian</option>
527
+ <option>Non-Vegetarian</option>
528
+ <option>Jain</option>
529
+ </select>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div>
535
+ <h4 class="font-bold mb-3">Seat Selection</h4>
536
+ <div class="border rounded-md p-4 mb-4">
537
+ <div class="flex justify-between items-center mb-3">
538
+ <div>
539
+ <span class="font-medium">AC 2 Tier (2A)</span>
540
+ <span class="text-gray-600 text-sm ml-2">Coach: B1</span>
541
+ </div>
542
+ <div class="text-blue-600 font-medium">₹3,120</div>
543
+ </div>
544
+
545
+ <div class="grid grid-cols-4 gap-2 mb-4">
546
+ <div class="seat-available p-2 text-center rounded cursor-pointer">1</div>
547
+ <div class="seat-available p-2 text-center rounded cursor-pointer">2</div>
548
+ <div class="seat-booked p-2 text-center rounded">3</div>
549
+ <div class="seat-available p-2 text-center rounded cursor-pointer">4</div>
550
+ <div class="seat-selected p-2 text-center rounded cursor-pointer">5</div>
551
+ <div class="seat-available p-2 text-center rounded cursor-pointer">6</div>
552
+ <div class="seat-book
553
+ </html>