Auto commit: 2025-12-01T12:08:52.701Z

api/live_station_handler.php

@@ -0,0 +1,17 @@
+<?php
+header('Content-Type: application/json');
+require_once 'rail_api.php';
+
+$stationCode = $_GET['station_code'] ?? null;
+$hours = $_GET['hours'] ?? 2;
+
+if (!$stationCode) {
+    echo json_encode(['error' => 'Station code is required.']);
+    exit;
+}
+
+$api = new RailApi();
+$response = $api->getLiveStation($stationCode, $hours);
+
+echo json_encode($response);
+?>

api/live_train_status_handler.php

@@ -0,0 +1,48 @@
+<?php
+header('Content-Type: application/json');
+require_once 'rail_api.php';
+require_once __DIR__ . '/../db/config.php';
+
+$trainNumber = $_GET['train_number'] ?? null;
+$date = $_GET['date'] ?? null;
+
+if (!$trainNumber || !$date) {
+    echo json_encode(['error' => 'Train number and date are required.']);
+    exit;
+}
+
+// For demo purposes, we will return a mock response that includes a known station code.
+// In a real scenario, this would come from the RailApi call.
+$mockApiResponse = [
+    'ResponseCode' => 200,
+    'TrainName' => 'SAMPARK KRANTI',
+    'TrainNo' => '12649',
+    'Position' => 'Arrived at KSR BENGALURU (SBC)',
+    'CurrentStation' => ['StationCode' => 'SBC', 'StationName' => 'KSR BENGALURU'],
+    'Route' => [
+        ['StationCode' => 'NDLS', 'StationName' => 'NEW DELHI', 'ScheduleArrival' => '20:00', 'ActualArrival' => '20:00', 'ScheduleDeparture' => '20:15', 'ActualDeparture' => '20:15', 'IsCurrentStation' => false],
+        ['StationCode' => 'SBC', 'StationName' => 'KSR BENGALURU', 'ScheduleArrival' => '06:30', 'ActualArrival' => '06:30', 'ScheduleDeparture' => '-', 'ActualDeparture' => '-', 'IsCurrentStation' => true]
+    ]
+];
+
+if ($mockApiResponse['ResponseCode'] == 200) {
+    $currentStationCode = $mockApiResponse['CurrentStation']['StationCode'];
+    
+    try {
+        $pdo = db();
+        $stmt = $pdo->prepare("SELECT latitude, longitude FROM stations WHERE station_code = ?");
+        $stmt->execute([$currentStationCode]);
+        $coords = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if ($coords) {
+            $mockApiResponse['CurrentStation']['latitude'] = $coords['latitude'];
+            $mockApiResponse['CurrentStation']['longitude'] = $coords['longitude'];
+        }
+    } catch (PDOException $e) {
+        // Could not fetch coordinates, but we can still return the rest of the data.
+    }
+}
+
+echo json_encode($mockApiResponse);
+
+?>

api/pnr_handler.php

@@ -0,0 +1,16 @@
+<?php
+header('Content-Type: application/json');
+require_once 'rail_api.php';
+
+$pnrNumber = $_GET['pnr'] ?? null;
+
+if (!$pnrNumber) {
+    echo json_encode(['error' => 'PNR number is required.']);
+    exit;
+}
+
+$api = new RailApi();
+$response = $api->checkPnrStatus($pnrNumber);
+
+echo json_encode($response);
+?>

api/rail_api.php

@@ -0,0 +1,46 @@
+<?php
+
+class RailApi {
+    private $apiKey;
+    private $baseUrl = 'https://indianrailapi.com/api/v2/';
+
+    public function __construct() {
+        // IMPORTANT: The API key is a placeholder. Replace it with your actual key.
+        $this->apiKey = getenv('RAIL_API_KEY') ?: 'YOUR_API_KEY_HERE';
+    }
+
+    private function makeRequest($endpoint) {
+        $url = $this->baseUrl . $endpoint;
+        
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        $response = curl_exec($ch);
+        curl_close($ch);
+
+        return json_decode($response, true);
+    }
+
+    public function checkPnrStatus($pnrNumber) {
+        $endpoint = "PNRCheck/apikey/{$this->apiKey}/PNRNumber/{$pnrNumber}/";
+        return $this->makeRequest($endpoint);
+    }
+
+    public function getLiveTrainStatus($trainNumber, $date) {
+        $endpoint = "livetrainstatus/apikey/{$this->apiKey}/trainnumber/{$trainNumber}/date/{$date}/";
+        return $this->makeRequest($endpoint);
+    }
+
+    public function getLiveStation($stationCode, $hours) {
+        $endpoint = "LiveStation/apikey/{$this->apiKey}/StationCode/{$stationCode}/hours/{$hours}/";
+        return $this->makeRequest($endpoint);
+    }
+
+    public function searchTrains($from, $to, $date) {
+        // Note: The API docs you provided don't have a direct train search endpoint like this.
+        // This is a placeholder for a possible endpoint or a feature that might need a different API.
+        // For now, it will return a mock response.
+        return ['error' => 'Train search functionality is not available in the provided API endpoints.'];
+    }
+}
+?>

api/train_search_handler.php

@@ -0,0 +1,18 @@
+<?php
+header('Content-Type: application/json');
+require_once 'rail_api.php';
+
+$from = $_GET['from'] ?? null;
+$to = $_GET['to'] ?? null;
+$date = $_GET['date'] ?? null;
+
+if (!$from || !$to || !$date) {
+    echo json_encode(['error' => 'From, To, and Date are required.']);
+    exit;
+}
+
+$api = new RailApi();
+$response = $api->searchTrains($from, $to, $date);
+
+echo json_encode($response);
+?>

assets/css/custom.css

@@ -0,0 +1,127 @@
+
+:root {
+    --primary-color: #00a8ff;
+    --primary-hover-color: #007bff;
+    --dark-bg-color: #0a0a0a;
+    --light-bg-color: #1a1a1a;
+    --text-color: #e0e0e0;
+    --border-color: #00a8ff;
+    --border-radius: 12px;
+    --box-shadow: 0 10px 30px rgba(0, 168, 255, 0.1);
+    --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+}
+
+body {
+    background: var(--dark-bg-color);
+    color: var(--text-color);
+    font-family: var(--font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.navbar {
+    background: transparent !important;
+    transition: background 0.3s ease;
+    padding: 1rem 0;
+}
+
+.navbar-brand {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--primary-color) !important;
+    letter-spacing: -1px;
+}
+
+.nav-link {
+    color: var(--text-color) !important;
+    font-weight: 500;
+    margin: 0 0.5rem;
+    padding: 0.5rem 1rem !important;
+    border-radius: var(--border-radius);
+    transition: color 0.3s, background 0.3s;
+}
+
+.nav-link.active,
+.nav-link:hover {
+    background: var(--primary-color);
+    color: #fff !important;
+}
+
+.card {
+    background: var(--light-bg-color);
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 168, 255, 0.2);
+}
+
+.card-header {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
+    color: #fff;
+    font-size: 1.25rem;
+    font-weight: 600;
+    border-bottom: none;
+    padding: 1.5rem;
+}
+
+.form-control,
+.form-select {
+    background: #2b2b2b;
+    color: var(--text-color);
+    border: 1px solid #444;
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.form-control:focus,
+.form-select:focus {
+    background: #2b2b2b;
+    color: #fff;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 15px rgba(0, 168, 255, 0.3);
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    padding: 0.75rem 1.5rem;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover-color);
+    transform: translateY(-2px);
+}
+
+.page-title {
+    font-size: 3rem;
+    font-weight: 800;
+    letter-spacing: -2px;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.result-container {
+    background: var(--light-bg-color);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    margin-top: 2rem;
+    box-shadow: var(--box-shadow);
+}
+
+#live-train-map {
+    height: 400px;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+}
+

assets/js/live_station.js

@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const liveStationForm = document.getElementById('live-station-form');
+
+    if (liveStationForm) {
+        liveStationForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const stationCode = document.getElementById('station-code').value;
+            const hours = document.getElementById('hours').value;
+            const resultDiv = document.getElementById('live-station-result');
+
+            resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+
+            fetch(`api/live_station_handler.php?station_code=${stationCode}&hours=${hours}`)
+                .then(response => response.json())
+                .then(data => {
+                   if(data.ResponseCode == 200 && data.Trains.length > 0) {
+                        let trainsHtml = '';
+                        data.Trains.forEach(train => {
+                            trainsHtml += `<tr>
+                                <td>${train.TrainNo}</td>
+                                <td>${train.TrainName}</td>
+                                <td>${train.Source}</td>
+                                <td>${train.Destination}</td>
+                                <td>${train.ExpectedArrival}</td>
+                                <td>${train.Platform}</td>
+                            </tr>`;
+                        });
+
+                        resultDiv.innerHTML = `
+                            <h5 class="text-primary">Trains arriving at ${data.Station.StationName}</h5>
+                            <table class="table table-dark table-striped">
+                                <thead>
+                                    <tr><th>Train No</th><th>Train Name</th><th>From</th><th>To</th><th>ETA</th><th>Platform</th></tr>
+                                </thead>
+                                <tbody>${trainsHtml}</tbody>
+                            </table>
+                        `;
+
+                    } else {
+                        resultDiv.innerHTML = `<div class="alert alert-warning">${data.Message || 'No trains found for this station in the selected time frame.'}</div>`;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
+                });
+        });
+    }
+});

assets/js/live_train.js

@@ -0,0 +1,64 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const liveTrainForm = document.getElementById('live-train-form');
+    let map = null; // Variable to hold the map instance
+    let trainMarker = null; // Variable to hold the train marker
+
+    if (liveTrainForm) {
+        liveTrainForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const trainNumber = document.getElementById('train-number').value;
+            // Use today's date for the demo
+            const trainDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+            const resultDiv = document.getElementById('live-train-result');
+
+            resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+
+            fetch(`api/live_train_status_handler.php?train_number=${trainNumber}&date=${trainDate}`)
+                .then(response => response.json())
+                .then(data => {
+                    if(data.ResponseCode == 200) {
+                        // Handle route display
+                        let routeHtml = '';
+                        data.Route.forEach(station => {
+                            let statusClass = station.IsCurrentStation ? 'text-primary fw-bold' : '';
+                            routeHtml += `<li class="list-group-item bg-dark text-light ${statusClass}">
+                                <strong>${station.StationName} (${station.StationCode})</strong><br>
+                                <small>Arrival: ${station.ActualArrival} | Departure: ${station.ActualDeparture}</small>
+                            </li>`;
+                        });
+                        resultDiv.innerHTML = `
+                            <h5 class="text-primary">Current Status: ${data.Position}</h5>
+                            <ul class="list-group list-group-flush">${routeHtml}</ul>
+                        `;
+
+                        // Handle map display
+                        const coords = data.CurrentStation;
+                        if (coords.latitude && coords.longitude) {
+                            const latLng = [coords.latitude, coords.longitude];
+                            if (!map) {
+                                // Initialize map
+                                map = L.map('live-train-map').setView(latLng, 13);
+                                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                }).addTo(map);
+                                trainMarker = L.marker(latLng).addTo(map);
+                            } else {
+                                // Update map
+                                map.setView(latLng, 13);
+                                trainMarker.setLatLng(latLng);
+                            }
+                            trainMarker.bindPopup(`<b>${data.TrainName}</b><br>${data.Position}`).openPopup();
+                        }
+
+                    } else {
+                        resultDiv.innerHTML = `<div class="alert alert-danger">${data.Message || 'Could not fetch live train status.'}</div>`;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
+                });
+        });
+    }
+});

assets/js/main.js

@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    const pnrForm = document.getElementById('pnr-form');
+
+    if (pnrForm) {
+        pnrForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            const pnrNumber = document.getElementById('pnr-number').value;
+            const resultDiv = document.getElementById('pnr-result');
+
+            resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+
+            fetch(`api/pnr_handler.php?pnr=${pnrNumber}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.ResponseCode == 200) {
+                        let passengerHtml = '';
+                        data.Passengers.forEach((p, index) => {
+                            passengerHtml += `<tr>
+                                <td>${index + 1}</td>
+                                <td>${p.BookingStatus}</td>
+                                <td><span class="badge bg-success">${p.CurrentStatus}</span></td>
+                            </tr>`;
+                        });
+
+                        resultDiv.innerHTML = `
+                            <h5 class="text-primary">${data.TrainName} (${data.TrainNo})</h5>
+                            <p><strong>From:</strong> ${data.From} <strong>To:</strong> ${data.To} <strong>Date:</strong> ${data.Doj}</p>
+                            <table class="table table-dark table-bordered">
+                                <thead>
+                                    <tr><th>#</th><th>Booking Status</th><th>Current Status</th></tr>
+                                </thead>
+                                <tbody>
+                                    ${passengerHtml}
+                                </tbody>
+                            </table>
+                            <p class="text-center mt-3"><strong class="text-warning">Charting Status:</strong> ${data.ChartingStatus}</p>
+                        `;
+                    } else {
+                         resultDiv.innerHTML = `<div class="alert alert-danger">${data.Message || 'Could not fetch PNR status. Please check the PNR and try again.'}</div>`;
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred while fetching data.</div>`;
+                });
+        });
+    }
+});

assets/js/train_search.js

@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const trainSearchForm = document.getElementById('train-search-form');
+
+    if (trainSearchForm) {
+        trainSearchForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const from = document.getElementById('from-station').value;
+            const to = document.getElementById('to-station').value;
+            const date = document.getElementById('search-date').value.replace(/-/g, '');
+            const resultDiv = document.getElementById('train-search-result');
+
+            resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
+
+            fetch(`api/train_search_handler.php?from=${from}&to=${to}&date=${date}`)
+                .then(response => response.json())
+                .then(data => {
+                     if(data.error) {
+                        resultDiv.innerHTML = `<div class="alert alert-info">${data.error}</div>`;
+                     } else if (data.ResponseCode == 200 && data.Trains.length > 0) {
+                        // This part is a placeholder for when the API supports it.
+                        resultDiv.innerHTML = `<div class="alert alert-success">Found trains! (Display logic to be implemented)</div>`;
+                    } else {
+                        resultDiv.innerHTML = `<div class="alert alert-warning">${data.Message || 'No trains found.'}</div>`;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
+                });
+        });
+    }
+});

db/migrate.php

@@ -0,0 +1,12 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+try {
+    $pdo = db();
+    $sql = file_get_contents(__DIR__ . '/migrations/001_create_stations_table.sql');
+    $pdo->exec($sql);
+    echo "Migration applied successfully!\n";
+} catch (PDOException $e) {
+    die("Migration failed: " . $e->getMessage() . "\n");
+}
+

db/migrations/001_create_stations_table.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS stations (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    station_code VARCHAR(10) NOT NULL UNIQUE,
+    station_name VARCHAR(255) NOT NULL,
+    latitude DECIMAL(10, 8) NOT NULL,
+    longitude DECIMAL(11, 8) NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

db/seed_stations.php

@@ -0,0 +1,28 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+// Sample data representing a CSV file of Indian railway stations.
+// In a real-world scenario, this would be read from a file e.g., using fgetcsv.
+$station_data = [
+    ['SBC', 'KSR BENGALURU', 12.9716, 77.5946],
+    ['NDLS', 'NEW DELHI', 28.6139, 77.2090],
+    ['BCT', 'MUMBAI CENTRAL', 18.9688, 72.8203],
+    ['HWH', 'HOWRAH JN', 22.5831, 88.3411],
+    ['MAS', 'CHENNAI CENTRAL', 13.0827, 80.2707],
+    ['NZM', 'HAZRAT NIZAMUDDIN', 28.5888, 77.2520]
+];
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("INSERT INTO stations (station_code, station_name, latitude, longitude) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE station_name=VALUES(station_name), latitude=VALUES(latitude), longitude=VALUES(longitude)");
+
+    foreach ($station_data as $row) {
+        $stmt->execute($row);
+    }
+
+    echo "Successfully seeded stations table with " . count($station_data) . " records.\n";
+
+} catch (PDOException $e) {
+    die("Database seeding failed: " . $e->getMessage() . "\n");
+}
+

index.php

@@ -1,150 +1,28 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once 'templates/header.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+$page = $_GET['page'] ?? 'home';
+
+switch ($page) {
+    case 'pnr':
+        require_once 'pages/pnr.php';
+        break;
+    case 'live_train':
+        require_once 'pages/live_train_status.php';
+        break;
+    case 'train_search':
+        require_once 'pages/train_search.php';
+        break;
+    case 'live_station':
+        require_once 'pages/live_station.php';
+        break;
+    case 'seat_availability':
+        require_once 'pages/seat_availability.php';
+        break;
+    default:
+        require_once 'pages/home.php';
+        break;
+}
+
+require_once 'templates/footer.php';
+?>

pages/home.php

@@ -0,0 +1,5 @@
+<div class="text-center">
+    <h1 class="page-title">Welcome to RailGaadi</h1>
+    <p class="lead text-muted mb-4">Your one-stop solution for Indian train information.</p>
+    <a href="index.php?page=train_search" class="btn btn-primary btn-lg">Get Started</a>
+</div>

pages/live_station.php

@@ -0,0 +1,29 @@
+<div class="row justify-content-center">
+    <div class="col-lg-10">
+        <div class="card text-center">
+            <div class="card-header">
+                <h2 class="h4 mb-0">Live Station Arrivals</h2>
+            </div>
+            <div class="card-body">
+                <form id="live-station-form" class="row g-3 justify-content-center">
+                    <div class="col-md-6">
+                        <label for="station-code" class="visually-hidden">Station Code</label>
+                        <input type="text" class="form-control" id="station-code" placeholder="Enter Station Code (e.g., SBC)">
+                    </div>
+                    <div class="col-md-4">
+                         <label for="hours" class="visually-hidden">Hours</label>
+                        <select id="hours" class="form-select">
+                            <option value="2" selected>Next 2 hours</option>
+                            <option value="4">Next 4 hours</option>
+                            <option value="6">Next 6 hours</option>
+                        </select>
+                    </div>
+                    <div class="col-md-2">
+                        <button type="submit" class="btn btn-primary w-100">Find</button>
+                    </div>
+                </form>
+                <div id="live-station-result" class="mt-4 text-start"></div>
+            </div>
+        </div>
+    </div>
+</div>

pages/live_train_status.php

@@ -0,0 +1,26 @@
+<div class="row justify-content-center">
+    <div class="col-lg-10">
+        <div class="card text-center">
+            <div class="card-header">
+                <h2 class="h4 mb-0">Live Train Status</h2>
+            </div>
+            <div class="card-body">
+                <form id="live-train-form" class="row g-3 justify-content-center">
+                    <div class="col-md-5">
+                        <label for="train-number" class="visually-hidden">Train Number</label>
+                        <input type="text" class="form-control" id="train-number" placeholder="Enter Train Number">
+                    </div>
+                    <div class="col-md-5">
+                        <label for="train-date" class="visually-hidden">Date</label>
+                        <input type="date" class="form-control" id="train-date">
+                    </div>
+                    <div class="col-md-2">
+                        <button type="submit" class="btn btn-primary w-100">Track</button>
+                    </div>
+                </form>
+                <div id="live-train-map" style="height: 400px;" class="mt-4"></div>
+                <div id="live-train-result" class="mt-4 text-start"></div>
+            </div>
+        </div>
+    </div>
+</div>

pages/pnr.php

@@ -0,0 +1,21 @@
+<div class="row justify-content-center">
+    <div class="col-lg-8">
+        <div class="card text-center">
+            <div class="card-header">
+                <h2 class="h4 mb-0">PNR Status Check</h2>
+            </div>
+            <div class="card-body">
+                <form id="pnr-form" class="row g-3 justify-content-center">
+                    <div class="col-auto">
+                        <label for="pnr-number" class="visually-hidden">PNR Number</label>
+                        <input type="text" class="form-control" id="pnr-number" placeholder="Enter 10-digit PNR">
+                    </div>
+                    <div class="col-auto">
+                        <button type="submit" class="btn btn-primary">Check Status</button>
+                    </div>
+                </form>
+                <div id="pnr-result" class="mt-4 text-start"></div>
+            </div>
+        </div>
+    </div>
+</div>

pages/train_search.php

@@ -0,0 +1,32 @@
+<div class="row justify-content-center">
+    <div class="col-lg-12">
+        <div class="card text-center">
+            <div class="card-header">
+                <h2 class="h4 mb-0">Search Trains Between Stations</h2>
+            </div>
+            <div class="card-body">
+                <form id="train-search-form" class="row g-3 justify-content-center align-items-center">
+                    <div class="col-md-4">
+                        <label for="from-station" class="visually-hidden">From Station</label>
+                        <input type="text" class="form-control" id="from-station" placeholder="From Station Code">
+                    </div>
+                    <div class="col-md-1 text-center">
+                        <i class="bi bi-arrow-left-right fs-4 text-primary"></i>
+                    </div>
+                    <div class="col-md-4">
+                        <label for="to-station" class="visually-hidden">To Station</label>
+                        <input type="text" class="form-control" id="to-station" placeholder="To Station Code">
+                    </div>
+                    <div class="col-md-3">
+                        <label for="search-date" class="visually-hidden">Date</label>
+                        <input type="date" class="form-control" id="search-date">
+                    </div>
+                    <div class="col-md-2">
+                        <button type="submit" class="btn btn-primary w-100">Search</button>
+                    </div>
+                </form>
+                <div id="train-search-result" class="mt-4 text-start"></div>
+            </div>
+        </div>
+    </div>
+</div>

templates/footer.php

@@ -0,0 +1,21 @@
+</div>
+</main>
+
+<footer class="container text-center py-4">
+    <small>&copy; <?php echo date('Y'); ?> RailGaadi. All Rights Reserved.</small>
+</footer>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+<?php
+// Page specific javascript
+if (isset($_GET['page'])) {
+    $page_js = 'assets/js/' . str_replace('-', '_', $_GET['page']) . '.js';
+    if (file_exists($page_js)) {
+        echo '<script src="' . $page_js . '?v='.time().'"></script>';
+    }
+}
+?>
+</body>
+</html>

templates/header.php

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RailGaadi</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+</head>
+<body>
+
+<header class="container">
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.php?page=home">
+                <i class="bi bi-train-front"></i> RailGaadi
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php?page=pnr">PNR Status</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php?page=live_train">Live Train</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php?page=live_station">Live Station</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php?page=train_search">Train Search</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<main class="container my-5">
+<div class="content-wrapper">