Hugging Face's logo

Spaces:
thundercode
/
railrush-express
Running

App Files Community
thundercode commited on
Commit
1513f75
·
verified ·
1 Parent(s): 0162d51

Create a complete, modern UI redesign of the IRCTC train booking app called “IRCTC Neo”, designed for Gen Z travelers using Material Design 3 principles.

Browse files

The design should be comfortable, minimalist, and adaptive for mobile, tablet, and desktop layouts. Include both light and dark theme variants.

✳️ Overall Aesthetic

Clean, intuitive, and friendly UI with soft rounded edges and ample spacing.

Color palette for light theme: Indigo (#3949AB) as primary, Amber (#FFCA28) as accent, light gray backgrounds (#F9FAFB).

Color palette for dark theme: Deep charcoal backgrounds (#1E1E1E), Indigo (#5C6BC0) highlights, and Amber (#FFCA28) accents.

Typography: Google Roboto or Inter Sans, with 24sp headers and 16sp body text.

Components follow Material Design 3: elevated cards, chips, bottom navigation bar, and floating action buttons.

Icon set: Material Symbols Outlined.

🧭 Layout & Navigation

Top App Bar: Page title (e.g., “Train Search”, “My Trips”), profile avatar, and search icon.

Bottom Navigation Bar (mobile): Home, Bookings, Live Status, Profile.

Navigation Rail (desktop/tablet): Vertical icons and labels on the left.

Floating Action Button (FAB): “Book Now” or “Search Trains.”

📱 Key Screens to Design

1. Train Search & Booking:

Input fields for “From Station” and “To Station”.

Dropdowns for Class and Quota selection.

Prominent “Search Trains” button.

Below, display recent searches or saved trips as cards showing Train Name, Departure, Arrival, Duration, and a “Book Now” button.

2. Seat Selection:

Interactive coach grid with color-coded seats (Green = Available, Yellow = Selected, Gray = Booked).

Bottom sticky bar with selected seat count, total fare, and “Continue to Payment” button.

3. My Trips / History:

Tabbed interface: “Upcoming”, “Completed”, “Cancelled”.

Each trip shown as a card with train name, date, PNR, and expandable details.

Quick actions: Cancel Ticket, Share Ticket, Track Live.

4. Train Live Status:

Search bar for train number/name.

Real-time train map with stations and delay indicators.

Train card showing next station, ETA, and toggle for “Track Live.”

💡 Additional Design Touches

Include subtle micro-animations (button press, tab switch, seat selection).

Add a loading screen with text: “Your journey is boarding soon...”

Use smooth shadows (2–8dp) and rounded corners (12–16dp) for cards and buttons.

Make spacing comfortable and avoid clutter — minimal, breathable layout.

Ensure all three platforms (mobile, tablet, desktop) have responsive layouts and consistent components.

⚙️ Branding

Include an IRCTC Neo logo (simplified train track icon).

Include Under 25 logo and username placeholder for submission requirements.

Files changed (3) hide show
  1. README.md +7 -4
  2. book.html +334 -0
  3. index.html +330 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Railrush Express
3
- emoji: 👁
4
- colorFrom: indigo
5
  colorTo: pink
 
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: RailRush Express ✨
3
+ colorFrom: yellow
 
4
  colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
book.html ADDED
@@ -0,0 +1,334 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Book Ticket | RailRush Express</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ light: '#3949AB',
18
+ dark: '#5C6BC0'
19
+ },
20
+ accent: '#FFCA28',
21
+ background: {
22
+ light: '#F9FAFB',
23
+ dark: '#1E1E1E'
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ </script>
30
+ <style>
31
+ .material-card {
32
+ border-radius: 12px;
33
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
34
+ }
35
+
36
+ .seat {
37
+ width: 32px;
38
+ height: 32px;
39
+ border-radius: 8px;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ cursor: pointer;
44
+ transition: all 0.2s ease;
45
+ }
46
+
47
+ .seat:hover {
48
+ transform: scale(1.1);
49
+ }
50
+
51
+ .seat-available {
52
+ background-color: #4CAF50;
53
+ }
54
+
55
+ .seat-selected {
56
+ background-color: #FFCA28;
57
+ }
58
+
59
+ .seat-booked {
60
+ background-color: #757575;
61
+ }
62
+
63
+ .sticky-bottom-bar {
64
+ position: fixed;
65
+ bottom: 0;
66
+ left: 0;
67
+ right: 0;
68
+ padding: 16px;
69
+ background: white;
70
+ box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
71
+ z-index: 100;
72
+ }
73
+
74
+ @media (min-width: 768px) {
75
+ .sticky-bottom-bar {
76
+ left: 80px;
77
+ }
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-background-light dark:bg-background-dark min-h-screen pb-24">
82
+ <!-- Top App Bar -->
83
+ <header class="bg-primary-light dark:bg-primary-dark text-white p-4 shadow-md">
84
+ <div class="flex justify-between items-center max-w-6xl mx-auto">
85
+ <div class="flex items-center space-x-2">
86
+ <a href="index.html">
87
+ <i data-feather="arrow-left" class="w-5 h-5"></i>
88
+ </a>
89
+ <h1 class="text-xl font-bold">Seat Selection</h1>
90
+ </div>
91
+ <div class="flex items-center space-x-4">
92
+ <div class="flex items-center space-x-1">
93
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
94
+ <span class="text-xs">Available</span>
95
+ </div>
96
+ <div class="flex items-center space-x-1">
97
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
98
+ <span class="text-xs">Selected</span>
99
+ </div>
100
+ <div class="flex items-center space-x-1">
101
+ <div class="w-3 h-3 rounded-full bg-gray-500"></div>
102
+ <span class="text-xs">Booked</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Main Content -->
109
+ <main class="max-w-6xl mx-auto px-4 py-6">
110
+ <!-- Train Info Card -->
111
+ <div class="material-card bg-white dark:bg-gray-800 p-4 mb-6">
112
+ <div class="flex justify-between items-center mb-3">
113
+ <div>
114
+ <h2 class="font-bold dark:text-white">Rajdhani Express (12952)</h2>
115
+ <p class="text-sm text-gray-500 dark:text-gray-400">Delhi → Mumbai</p>
116
+ </div>
117
+ <div class="text-sm">
118
+ <p class="dark:text-white">Tue, 15 Aug</p>
119
+ <p class="text-gray-500 dark:text-gray-400">16:25 - 09:00</p>
120
+ </div>
121
+ </div>
122
+ <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-700 pt-3">
123
+ <div class="flex items-center space-x-2">
124
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">3A</span>
125
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">General</span>
126
+ </div>
127
+ <p class="text-primary-light dark:text-accent font-medium">₹1,850</p>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Coach Selection -->
132
+ <div class="mb-6">
133
+ <h3 class="text-lg font-semibold mb-3 dark:text-white">Select Coach</h3>
134
+ <div class="flex overflow-x-auto space-x-2 pb-2">
135
+ <button class="px-4 py-2 bg-primary-light dark:bg-primary-dark text-white rounded-material whitespace-nowrap">A1 (3A)</button>
136
+ <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-material whitespace-nowrap">B1 (3A)</button>
137
+ <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-material whitespace-nowrap">A2 (2A)</button>
138
+ <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-material whitespace-nowrap">B2 (2A)</button>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Seat Selection -->
143
+ <div>
144
+ <h3 class="text-lg font-semibold mb-3 dark:text-white">Select Seats (Coach A1)</h3>
145
+
146
+ <!-- Coach Layout -->
147
+ <div class="material-card bg-white dark:bg-gray-800 p-4 mb-4">
148
+ <div class="flex justify-between items-center mb-4">
149
+ <div>
150
+ <p class="text-sm text-gray-500 dark:text-gray-400">Coach</p>
151
+ <p class="font-medium dark:text-white">A1 (3AC - 72 Berths)</p>
152
+ </div>
153
+ <div>
154
+ <p class="text-sm text-gray-500 dark:text-gray-400">Available</p>
155
+ <p class="font-medium dark:text-white text-green-500">24 seats</p>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Seat Grid -->
160
+ <div class="grid grid-cols-10 gap-2 mb-4">
161
+ <!-- Row 1 -->
162
+ <div class="col-span-4 flex justify-center">
163
+ <div class="seat seat-available text-white" data-seat="1">1</div>
164
+ </div>
165
+ <div class="col-span-2"></div>
166
+ <div class="col-span-4 flex justify-center">
167
+ <div class="seat seat-available text-white" data-seat="2">2</div>
168
+ </div>
169
+
170
+ <!-- Row 2 -->
171
+ <div class="col-span-4 flex justify-center">
172
+ <div class="seat seat-booked text-white" data-seat="3">3</div>
173
+ </div>
174
+ <div class="col-span-2"></div>
175
+ <div class="col-span-4 flex justify-center">
176
+ <div class="seat seat-available text-white" data-seat="4">4</div>
177
+ </div>
178
+
179
+ <!-- Row 3 -->
180
+ <div class="col-span-4 flex justify-center">
181
+ <div class="seat seat-available text-white" data-seat="5">5</div>
182
+ </div>
183
+ <div class="col-span-2"></div>
184
+ <div class="col-span-4 flex justify-center">
185
+ <div class="seat seat-available text-white" data-seat="6">6</div>
186
+ </div>
187
+
188
+ <!-- Row 4 -->
189
+ <div class="col-span-4 flex justify-center">
190
+ <div class="seat seat-available text-white" data-seat="7">7</div>
191
+ </div>
192
+ <div class="col-span-2 flex justify-center">
193
+ <div class="w-16 h-px bg-gray-300 dark:bg-gray-600 rotate-90"></div>
194
+ </div>
195
+ <div class="col-span-4 flex justify-center">
196
+ <div class="seat seat-available text-white" data-seat="8">8</div>
197
+ </div>
198
+
199
+ <!-- Row 5 -->
200
+ <div class="col-span-4 flex justify-center">
201
+ <div class="seat seat-booked text-white" data-seat="9">9</div>
202
+ </div>
203
+ <div class="col-span-2"></div>
204
+ <div class="col-span-4 flex justify-center">
205
+ <div class="seat seat-available text-white" data-seat="10">10</div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Berth Legend -->
210
+ <div class="flex justify-center space-x-4 text-xs text-gray-500 dark:text-gray-400">
211
+ <div class="flex items-center space-x-1">
212
+ <div class="w-3 h-3 border border-gray-400"></div>
213
+ <span>Lower</span>
214
+ </div>
215
+ <div class="flex items-center space-x-1">
216
+ <div class="w-3 h-3 border border-gray-400 border-b-0"></div>
217
+ <span>Middle</span>
218
+ </div>
219
+ <div class="flex items-center space-x-1">
220
+ <div class="w-3 h-3 border border-gray-400 border-t-0"></div>
221
+ <span>Upper</span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Passenger Details -->
227
+ <div class="material-card bg-white dark:bg-gray-800 p-4">
228
+ <h3 class="text-lg font-semibold mb-3 dark:text-white">Passenger Details</h3>
229
+ <div class="space-y-3">
230
+ <div>
231
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Name</label>
232
+ <input type="text" class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Full Name">
233
+ </div>
234
+ <div>
235
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Age</label>
236
+ <input type="number" class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Age">
237
+ </div>
238
+ <div>
239
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Gender</label>
240
+ <select class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
241
+ <option>Male</option>
242
+ <option>Female</option>
243
+ <option>Other</option>
244
+ </select>
245
+ </div>
246
+ <div>
247
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Berth Preference</label>
248
+ <select class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
249
+ <option>No Preference</option>
250
+ <option>Lower</option>
251
+ <option>Middle</option>
252
+ <option>Upper</option>
253
+ </select>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </main>
259
+
260
+ <!-- Sticky Bottom Bar -->
261
+ <div class="sticky-bottom-bar dark:bg-gray-800 dark:border-gray-700">
262
+ <div class="flex justify-between items-center max-w-6xl mx-auto">
263
+ <div>
264
+ <p class="text-sm text-gray-500 dark:text-gray-400">Selected: <span class="font-medium dark:text-white" id="selected-count">0</span> seats</p>
265
+ <p class="font-bold text-lg dark:text-white">Total: ₹<span id="total-price">0</span></p>
266
+ </div>
267
+ <button class="bg-primary-light dark:bg-accent text-white py-2 px-6 rounded-material font-medium hover:bg-opacity-90 transition">
268
+ Continue to Payment
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Navigation Rail (Tablet/Desktop) -->
274
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-20 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
275
+ <div class="mb-8">
276
+ <i data-feather="train" class="w-8 h-8 text-primary-light dark:text-accent"></i>
277
+ </div>
278
+ <div class="flex flex-col items-center space-y-8">
279
+ <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
280
+ <i data-feather="home" class="w-6 h-6"></i>
281
+ <span class="text-xs mt-1">Home</span>
282
+ </a>
283
+ <a href="#" class="flex flex-col items-center text-primary-light dark:text-accent">
284
+ <i data-feather="book-open" class="w-6 h-6"></i>
285
+ <span class="text-xs mt-1">Bookings</span>
286
+ </a>
287
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
288
+ <i data-feather="map-pin" class="w-6 h-6"></i>
289
+ <span class="text-xs mt-1">Status</span>
290
+ </a>
291
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
292
+ <i data-feather="user" class="w-6 h-6"></i>
293
+ <span class="text-xs mt-1">Profile</span>
294
+ </a>
295
+ </div>
296
+ </nav>
297
+
298
+ <script>
299
+ // Seat selection logic
300
+ const seats = document.querySelectorAll('.seat');
301
+ let selectedSeats = 0;
302
+ const pricePerSeat = 1850;
303
+
304
+ seats.forEach(seat => {
305
+ seat.addEventListener('click', () => {
306
+ if (seat.classList.contains('seat-available')) {
307
+ seat.classList.remove('seat-available');
308
+ seat.classList.add('seat-selected');
309
+ selectedSeats++;
310
+ } else if (seat.classList.contains('seat-selected')) {
311
+ seat.classList.remove('seat-selected');
312
+ seat.classList.add('seat-available');
313
+ selectedSeats--;
314
+ }
315
+
316
+ document.getElementById('selected-count').textContent = selectedSeats;
317
+ document.getElementById('total-price').textContent = selectedSeats * pricePerSeat;
318
+ });
319
+ });
320
+
321
+ // Theme toggle
322
+ const themeToggle = document.getElementById('theme-toggle');
323
+ const html = document.documentElement;
324
+
325
+ themeToggle.addEventListener('click', () => {
326
+ html.classList.toggle('dark');
327
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
328
+ });
329
+
330
+ // Feather icons
331
+ feather.replace();
332
+ </script>
333
+ </body>
334
+ </html>
index.html CHANGED
@@ -1,19 +1,331 @@
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" class="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RailRush Express | Modern Train Booking</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ light: '#3949AB',
18
+ dark: '#5C6BC0'
19
+ },
20
+ accent: '#FFCA28',
21
+ background: {
22
+ light: '#F9FAFB',
23
+ dark: '#1E1E1E'
24
+ }
25
+ },
26
+ fontFamily: {
27
+ sans: ['Inter', 'Roboto', 'sans-serif']
28
+ },
29
+ borderRadius: {
30
+ 'material': '12px'
31
+ },
32
+ boxShadow: {
33
+ 'material': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
34
+ 'material-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style>
41
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
42
+
43
+ body {
44
+ font-family: 'Inter', sans-serif;
45
+ transition: background-color 0.3s ease;
46
+ }
47
+
48
+ .material-card {
49
+ border-radius: 12px;
50
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
51
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
52
+ }
53
+
54
+ .material-card:hover {
55
+ transform: translateY(-2px);
56
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
57
+ }
58
+
59
+ .chip {
60
+ border-radius: 16px;
61
+ padding: 4px 12px;
62
+ font-size: 14px;
63
+ display: inline-flex;
64
+ align-items: center;
65
+ }
66
+
67
+ .fab {
68
+ width: 56px;
69
+ height: 56px;
70
+ border-radius: 50%;
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ position: fixed;
75
+ bottom: 24px;
76
+ right: 24px;
77
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
78
+ transition: transform 0.2s ease;
79
+ }
80
+
81
+ .fab:hover {
82
+ transform: scale(1.1);
83
+ }
84
+
85
+ .seat {
86
+ width: 32px;
87
+ height: 32px;
88
+ border-radius: 8px;
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ cursor: pointer;
93
+ transition: all 0.2s ease;
94
+ }
95
+
96
+ .seat:hover {
97
+ transform: scale(1.1);
98
+ }
99
+
100
+ .seat-available {
101
+ background-color: #4CAF50;
102
+ }
103
+
104
+ .seat-selected {
105
+ background-color: #FFCA28;
106
+ }
107
+
108
+ .seat-booked {
109
+ background-color: #757575;
110
+ }
111
+ </style>
112
+ </head>
113
+ <body class="bg-background-light dark:bg-background-dark min-h-screen">
114
+ <!-- Top App Bar -->
115
+ <header class="bg-primary-light dark:bg-primary-dark text-white p-4 shadow-md">
116
+ <div class="flex justify-between items-center max-w-6xl mx-auto">
117
+ <div class="flex items-center space-x-2">
118
+ <i data-feather="train" class="w-6 h-6"></i>
119
+ <h1 class="text-xl font-bold">RailRush Express</h1>
120
+ </div>
121
+ <div class="flex items-center space-x-4">
122
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-opacity-20 hover:bg-white">
123
+ <i data-feather="moon" class="w-5 h-5 hidden dark:block"></i>
124
+ <i data-feather="sun" class="w-5 h-5 block dark:hidden"></i>
125
+ </button>
126
+ <div class="relative">
127
+ <div class="w-8 h-8 rounded-full bg-accent flex items-center justify-center cursor-pointer">
128
+ <i data-feather="user" class="w-4 h-4 text-gray-800"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </header>
134
+
135
+ <!-- Main Content -->
136
+ <main class="max-w-6xl mx-auto px-4 py-6">
137
+ <!-- Search Section -->
138
+ <section class="material-card bg-white dark:bg-gray-800 p-6 mb-6">
139
+ <h2 class="text-xl font-semibold mb-4 dark:text-white">Search Trains</h2>
140
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
141
+ <div>
142
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">From Station</label>
143
+ <div class="relative">
144
+ <input type="text" class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Delhi">
145
+ <i data-feather="search" class="absolute right-3 top-3 text-gray-400"></i>
146
+ </div>
147
+ </div>
148
+ <div>
149
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">To Station</label>
150
+ <div class="relative">
151
+ <input type="text" class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Mumbai">
152
+ <i data-feather="search" class="absolute right-3 top-3 text-gray-400"></i>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
157
+ <div>
158
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Date</label>
159
+ <div class="relative">
160
+ <input type="date" class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
161
+ </div>
162
+ </div>
163
+ <div>
164
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Class</label>
165
+ <select class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
166
+ <option>All Classes</option>
167
+ <option>AC First Class (1A)</option>
168
+ <option>AC 2 Tier (2A)</option>
169
+ <option>AC 3 Tier (3A)</option>
170
+ <option>Sleeper (SL)</option>
171
+ <option>Second Sitting (2S)</option>
172
+ </select>
173
+ </div>
174
+ <div>
175
+ <label class="block text-sm font-medium mb-1 dark:text-gray-300">Quota</label>
176
+ <select class="w-full p-3 border rounded-material bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
177
+ <option>General</option>
178
+ <option>Tatkal</option>
179
+ <option>Premium Tatkal</option>
180
+ <option>Ladies</option>
181
+ </select>
182
+ </div>
183
+ </div>
184
+ <button class="w-full md:w-auto bg-primary-light dark:bg-primary-dark text-white py-3 px-6 rounded-material font-medium hover:bg-opacity-90 transition">
185
+ Search Trains
186
+ </button>
187
+ </section>
188
+
189
+ <!-- Recent Searches -->
190
+ <section>
191
+ <h2 class="text-lg font-semibold mb-4 dark:text-white">Recent Searches</h2>
192
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
193
+ <!-- Recent Search Card 1 -->
194
+ <div class="material-card bg-white dark:bg-gray-800 p-4">
195
+ <div class="flex justify-between items-start mb-2">
196
+ <div>
197
+ <h3 class="font-medium dark:text-white">Delhi to Mumbai</h3>
198
+ <p class="text-sm text-gray-500 dark:text-gray-400">Rajdhani Express (12952)</p>
199
+ </div>
200
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Yesterday</span>
201
+ </div>
202
+ <div class="flex justify-between items-center mt-4">
203
+ <div>
204
+ <p class="text-sm text-gray-500 dark:text-gray-400">Departure</p>
205
+ <p class="font-medium dark:text-white">16:25</p>
206
+ </div>
207
+ <div class="flex flex-col items-center">
208
+ <div class="w-16 h-px bg-gray-300 dark:bg-gray-600"></div>
209
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">16h 35m</p>
210
+ </div>
211
+ <div>
212
+ <p class="text-sm text-gray-500 dark:text-gray-400">Arrival</p>
213
+ <p class="font-medium dark:text-white">09:00</p>
214
+ </div>
215
+ </div>
216
+ <div class="flex justify-between items-center mt-4">
217
+ <div class="flex space-x-2">
218
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">3A</span>
219
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">General</span>
220
+ </div>
221
+ <button class="text-primary-light dark:text-accent font-medium">Book Now</button>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Recent Search Card 2 -->
226
+ <div class="material-card bg-white dark:bg-gray-800 p-4">
227
+ <div class="flex justify-between items-start mb-2">
228
+ <div>
229
+ <h3 class="font-medium dark:text-white">Bangalore to Chennai</h3>
230
+ <p class="text-sm text-gray-500 dark:text-gray-400">Shatabdi Express (12028)</p>
231
+ </div>
232
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">2 days ago</span>
233
+ </div>
234
+ <div class="flex justify-between items-center mt-4">
235
+ <div>
236
+ <p class="text-sm text-gray-500 dark:text-gray-400">Departure</p>
237
+ <p class="font-medium dark:text-white">06:00</p>
238
+ </div>
239
+ <div class="flex flex-col items-center">
240
+ <div class="w-16 h-px bg-gray-300 dark:bg-gray-600"></div>
241
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">5h 15m</p>
242
+ </div>
243
+ <div>
244
+ <p class="text-sm text-gray-500 dark:text-gray-400">Arrival</p>
245
+ <p class="font-medium dark:text-white">11:15</p>
246
+ </div>
247
+ </div>
248
+ <div class="flex justify-between items-center mt-4">
249
+ <div class="flex space-x-2">
250
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">CC</span>
251
+ <span class="chip bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">Tatkal</span>
252
+ </div>
253
+ <button class="text-primary-light dark:text-accent font-medium">Book Now</button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+ </main>
259
+
260
+ <!-- Bottom Navigation (Mobile) -->
261
+ <nav class="md:hidden fixed bottom-0 w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex justify-around py-3">
262
+ <a href="#" class="flex flex-col items-center text-primary-light dark:text-accent">
263
+ <i data-feather="home" class="w-5 h-5"></i>
264
+ <span class="text-xs mt-1">Home</span>
265
+ </a>
266
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
267
+ <i data-feather="book-open" class="w-5 h-5"></i>
268
+ <span class="text-xs mt-1">Bookings</span>
269
+ </a>
270
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
271
+ <i data-feather="map-pin" class="w-5 h-5"></i>
272
+ <span class="text-xs mt-1">Live Status</span>
273
+ </a>
274
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
275
+ <i data-feather="user" class="w-5 h-5"></i>
276
+ <span class="text-xs mt-1">Profile</span>
277
+ </a>
278
+ </nav>
279
+
280
+ <!-- Navigation Rail (Tablet/Desktop) -->
281
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-20 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
282
+ <div class="mb-8">
283
+ <i data-feather="train" class="w-8 h-8 text-primary-light dark:text-accent"></i>
284
+ </div>
285
+ <div class="flex flex-col items-center space-y-8">
286
+ <a href="#" class="flex flex-col items-center text-primary-light dark:text-accent">
287
+ <i data-feather="home" class="w-6 h-6"></i>
288
+ <span class="text-xs mt-1">Home</span>
289
+ </a>
290
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
291
+ <i data-feather="book-open" class="w-6 h-6"></i>
292
+ <span class="text-xs mt-1">Bookings</span>
293
+ </a>
294
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
295
+ <i data-feather="map-pin" class="w-6 h-6"></i>
296
+ <span class="text-xs mt-1">Status</span>
297
+ </a>
298
+ <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
299
+ <i data-feather="user" class="w-6 h-6"></i>
300
+ <span class="text-xs mt-1">Profile</span>
301
+ </a>
302
+ </div>
303
+ </nav>
304
+
305
+ <!-- Floating Action Button -->
306
+ <button class="fab bg-primary-light dark:bg-accent text-white">
307
+ <i data-feather="search" class="w-5 h-5"></i>
308
+ </button>
309
+
310
+ <script>
311
+ // Theme toggle
312
+ const themeToggle = document.getElementById('theme-toggle');
313
+ const html = document.documentElement;
314
+
315
+ themeToggle.addEventListener('click', () => {
316
+ html.classList.toggle('dark');
317
+ localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
318
+ });
319
+
320
+ // Check for saved theme preference
321
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
322
+ html.classList.add('dark');
323
+ } else {
324
+ html.classList.remove('dark');
325
+ }
326
+
327
+ // Feather icons
328
+ feather.replace();
329
+ </script>
330
+ </body>
331
  </html>