Hugging Face's logo

Spaces:
thundercode
/
railrush-express
Running

App Files Community
thundercode commited on
Commit
608ef78
·
verified ·
1 Parent(s): 95b951f

make everything more user friendly for both desktop and mobile interface

Browse files
Files changed (4) hide show
  1. book.html +24 -25
  2. index.html +35 -39
  3. profile.html +18 -19
  4. status.html +18 -19
book.html CHANGED
@@ -256,41 +256,40 @@
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="book.html" 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="status.html" 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="profile.html" 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>
 
256
  </div>
257
  </div>
258
  </main>
259
+ <!-- Enhanced Sticky Bottom Bar -->
260
+ <div class="sticky-bottom-bar dark:bg-gray-800 dark:border-gray-700 shadow-lg">
261
+ <div class="flex justify-between items-center max-w-6xl mx-auto px-4">
 
262
  <div>
263
  <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>
264
+ <p class="font-bold text-xl dark:text-white">₹<span id="total-price">0</span></p>
265
  </div>
266
+ <button class="bg-primary-light dark:bg-accent text-white py-3 px-8 rounded-material font-medium hover:bg-opacity-90 transition shadow-md hover:shadow-lg flex items-center space-x-2">
267
+ <i data-feather="credit-card" class="w-5 h-5"></i>
268
+ <span>Continue to Payment</span>
269
  </button>
270
  </div>
271
  </div>
272
+ <!-- Enhanced Navigation Rail (Tablet/Desktop) -->
273
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-24 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 z-40">
274
+ <div class="mb-10 mt-4">
275
+ <i data-feather="train" class="w-10 h-10 text-primary-light dark:text-accent"></i>
 
276
  </div>
277
+ <div class="flex flex-col items-center space-y-10 w-full">
278
+ <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
279
+ <i data-feather="home" class="w-7 h-7"></i>
280
+ <span class="text-sm mt-1 font-medium">Home</span>
281
  </a>
282
+ <a href="book.html" class="flex flex-col items-center text-primary-light dark:text-accent w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
283
+ <i data-feather="book-open" class="w-7 h-7"></i>
284
+ <span class="text-sm mt-1 font-medium">Bookings</span>
285
  </a>
286
+ <a href="status.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
287
+ <i data-feather="map-pin" class="w-7 h-7"></i>
288
+ <span class="text-sm mt-1 font-medium">Status</span>
289
  </a>
290
+ <a href="profile.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
291
+ <i data-feather="user" class="w-7 h-7"></i>
292
+ <span class="text-sm mt-1 font-medium">Profile</span>
293
  </a>
294
  </div>
295
  </nav>
index.html CHANGED
@@ -256,58 +256,54 @@
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="book.html" 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="status.html" 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="profile.html" 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="book.html" 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="status.html" 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="profile.html" 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;
 
256
  </div>
257
  </section>
258
  </main>
259
+ <!-- Enhanced Bottom Navigation (Mobile) -->
260
+ <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 z-50">
261
+ <a href="#" class="flex flex-col items-center text-primary-light dark:text-accent px-4 py-1 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
262
+ <i data-feather="home" class="w-6 h-6"></i>
263
+ <span class="text-xs mt-1 font-medium">Home</span>
 
264
  </a>
265
+ <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 px-4 py-1 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
266
+ <i data-feather="book-open" class="w-6 h-6"></i>
267
+ <span class="text-xs mt-1 font-medium">Bookings</span>
268
  </a>
269
+ <a href="status.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 px-4 py-1 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
270
+ <i data-feather="map-pin" class="w-6 h-6"></i>
271
+ <span class="text-xs mt-1 font-medium">Status</span>
272
  </a>
273
+ <a href="profile.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 px-4 py-1 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
274
+ <i data-feather="user" class="w-6 h-6"></i>
275
+ <span class="text-xs mt-1 font-medium">Profile</span>
276
  </a>
277
  </nav>
278
+ <!-- Enhanced Navigation Rail (Tablet/Desktop) -->
279
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-24 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 z-40">
280
+ <div class="mb-10 mt-4">
281
+ <i data-feather="train" class="w-10 h-10 text-primary-light dark:text-accent"></i>
 
282
  </div>
283
+ <div class="flex flex-col items-center space-y-10 w-full">
284
+ <a href="#" class="flex flex-col items-center text-primary-light dark:text-accent w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
285
+ <i data-feather="home" class="w-7 h-7"></i>
286
+ <span class="text-sm mt-1 font-medium">Home</span>
287
  </a>
288
+ <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
289
+ <i data-feather="book-open" class="w-7 h-7"></i>
290
+ <span class="text-sm mt-1 font-medium">Bookings</span>
291
  </a>
292
+ <a href="status.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
293
+ <i data-feather="map-pin" class="w-7 h-7"></i>
294
+ <span class="text-sm mt-1 font-medium">Status</span>
295
  </a>
296
+ <a href="profile.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
297
+ <i data-feather="user" class="w-7 h-7"></i>
298
+ <span class="text-sm mt-1 font-medium">Profile</span>
299
  </a>
300
  </div>
301
  </nav>
302
+ <!-- Enhanced Floating Action Button -->
303
+ <button class="fab bg-primary-light dark:bg-accent text-white shadow-lg hover:shadow-xl transition-all z-40">
304
+ <i data-feather="search" class="w-6 h-6"></i>
 
305
  </button>
306
+ <script>
 
307
  // Theme toggle
308
  const themeToggle = document.getElementById('theme-toggle');
309
  const html = document.documentElement;
profile.html CHANGED
@@ -249,30 +249,29 @@
249
  </div>
250
  </div>
251
  </main>
252
-
253
- <!-- Navigation Rail (Tablet/Desktop) -->
254
- <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">
255
- <div class="mb-8">
256
- <i data-feather="train" class="w-8 h-8 text-primary-light dark:text-accent"></i>
257
  </div>
258
- <div class="flex flex-col items-center space-y-8">
259
- <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
260
- <i data-feather="home" class="w-6 h-6"></i>
261
- <span class="text-xs mt-1">Home</span>
262
  </a>
263
- <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
264
- <i data-feather="book-open" class="w-6 h-6"></i>
265
- <span class="text-xs mt-1">Bookings</span>
266
  </a>
267
- <a href="status.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
268
- <i data-feather="map-pin" class="w-6 h-6"></i>
269
- <span class="text-xs mt-1">Status</span>
270
  </a>
271
- <a href="profile.html" class="flex flex-col items-center text-primary-light dark:text-accent">
272
- <i data-feather="user" class="w-6 h-6"></i>
273
- <span class="text-xs mt-1">Profile</span>
274
  </a>
275
- </div>
276
  </nav>
277
 
278
  <script>
 
249
  </div>
250
  </div>
251
  </main>
252
+ <!-- Enhanced Navigation Rail (Tablet/Desktop) -->
253
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-24 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 z-40">
254
+ <div class="mb-10 mt-4">
255
+ <i data-feather="train" class="w-10 h-10 text-primary-light dark:text-accent"></i>
 
256
  </div>
257
+ <div class="flex flex-col items-center space-y-10 w-full">
258
+ <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
259
+ <i data-feather="home" class="w-7 h-7"></i>
260
+ <span class="text-sm mt-1 font-medium">Home</span>
261
  </a>
262
+ <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
263
+ <i data-feather="book-open" class="w-7 h-7"></i>
264
+ <span class="text-sm mt-1 font-medium">Bookings</span>
265
  </a>
266
+ <a href="status.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
267
+ <i data-feather="map-pin" class="w-7 h-7"></i>
268
+ <span class="text-sm mt-1 font-medium">Status</span>
269
  </a>
270
+ <a href="profile.html" class="flex flex-col items-center text-primary-light dark:text-accent w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
271
+ <i data-feather="user" class="w-7 h-7"></i>
272
+ <span class="text-sm mt-1 font-medium">Profile</span>
273
  </a>
274
+ </div>
275
  </nav>
276
 
277
  <script>
status.html CHANGED
@@ -148,30 +148,29 @@
148
  </div>
149
  </section>
150
  </main>
151
-
152
- <!-- Navigation Rail (Tablet/Desktop) -->
153
- <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">
154
- <div class="mb-8">
155
- <i data-feather="train" class="w-8 h-8 text-primary-light dark:text-accent"></i>
156
  </div>
157
- <div class="flex flex-col items-center space-y-8">
158
- <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
159
- <i data-feather="home" class="w-6 h-6"></i>
160
- <span class="text-xs mt-1">Home</span>
161
  </a>
162
- <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
163
- <i data-feather="book-open" class="w-6 h-6"></i>
164
- <span class="text-xs mt-1">Bookings</span>
165
  </a>
166
- <a href="status.html" class="flex flex-col items-center text-primary-light dark:text-accent">
167
- <i data-feather="map-pin" class="w-6 h-6"></i>
168
- <span class="text-xs mt-1">Status</span>
169
  </a>
170
- <a href="profile.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
171
- <i data-feather="user" class="w-6 h-6"></i>
172
- <span class="text-xs mt-1">Profile</span>
173
  </a>
174
- </div>
175
  </nav>
176
 
177
  <script>
 
148
  </div>
149
  </section>
150
  </main>
151
+ <!-- Enhanced Navigation Rail (Tablet/Desktop) -->
152
+ <nav class="hidden md:flex fixed left-0 top-0 h-full w-24 py-6 flex-col items-center bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 z-40">
153
+ <div class="mb-10 mt-4">
154
+ <i data-feather="train" class="w-10 h-10 text-primary-light dark:text-accent"></i>
 
155
  </div>
156
+ <div class="flex flex-col items-center space-y-10 w-full">
157
+ <a href="index.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
158
+ <i data-feather="home" class="w-7 h-7"></i>
159
+ <span class="text-sm mt-1 font-medium">Home</span>
160
  </a>
161
+ <a href="book.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
162
+ <i data-feather="book-open" class="w-7 h-7"></i>
163
+ <span class="text-sm mt-1 font-medium">Bookings</span>
164
  </a>
165
+ <a href="status.html" class="flex flex-col items-center text-primary-light dark:text-accent w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
166
+ <i data-feather="map-pin" class="w-7 h-7"></i>
167
+ <span class="text-sm mt-1 font-medium">Status</span>
168
  </a>
169
+ <a href="profile.html" class="flex flex-col items-center text-gray-500 dark:text-gray-400 w-full py-3 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-700">
170
+ <i data-feather="user" class="w-7 h-7"></i>
171
+ <span class="text-sm mt-1 font-medium">Profile</span>
172
  </a>
173
+ </div>
174
  </nav>
175
 
176
  <script>