| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Your Booked Tickets</title>
|
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
|
| <style>
|
| body {
|
| margin: 0;
|
| font-family: 'Roboto', sans-serif;
|
| background: #f4f7f9;
|
| }
|
|
|
| header {
|
| background-color: #004080;
|
| padding: 20px;
|
| color: white;
|
| text-align: center;
|
| }
|
|
|
| #ticketList {
|
| max-width: 1000px;
|
| margin: 40px auto;
|
| background: white;
|
| padding: 20px;
|
| border-radius: 8px;
|
| box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| }
|
|
|
| th, td {
|
| padding: 14px 10px;
|
| border-bottom: 1px solid #ccc;
|
| text-align: center;
|
| }
|
|
|
| th {
|
| background-color: #0066cc;
|
| color: white;
|
| }
|
|
|
| tr:hover {
|
| background-color: #f1f1f1;
|
| }
|
|
|
| button {
|
| background-color: #e60000;
|
| color: white;
|
| border: none;
|
| padding: 8px 14px;
|
| border-radius: 4px;
|
| cursor: pointer;
|
| transition: background-color 0.2s ease-in-out;
|
| }
|
|
|
| button:hover {
|
| background-color: #cc0000;
|
| }
|
|
|
| .no-tickets {
|
| text-align: center;
|
| font-style: italic;
|
| color: gray;
|
| padding: 20px;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <header>
|
| <h1>Your Booked Tickets</h1>
|
| </header>
|
|
|
| <div id="ticketList">
|
| <table id="ticketTable">
|
| <thead>
|
| <tr>
|
| <th>Ticket ID</th>
|
| <th>Train ID</th>
|
| <th>User ID</th>
|
| <th>Boarding Station</th>
|
| <th>Destination Station</th>
|
| <th>Date</th>
|
| <th>Tickets</th>
|
| <th>Action</th>
|
| </tr>
|
| </thead>
|
| <tbody id="ticketBody">
|
| <!-- Rows will be inserted here dynamically -->
|
| </tbody>
|
| </table>
|
| </div>
|
|
|
| <script>
|
| function getRandomId(length) {
|
| return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0');
|
| }
|
|
|
| function getRandomFromArray(arr) {
|
| return arr[Math.floor(Math.random() * arr.length)];
|
| }
|
|
|
| function getRandomDate(start, end) {
|
| const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
|
| return date.toISOString().split('T')[0]; // Format as YYYY-MM-DD
|
| }
|
|
|
| function cancelTicket(button) {
|
| const row = button.closest('tr');
|
| row.remove();
|
|
|
| const tbody = document.querySelector('#ticketTable tbody');
|
| if (tbody.rows.length === 0) {
|
| tbody.innerHTML = `<tr><td colspan="8" class="no-tickets">No tickets booked.</td></tr>`;
|
| }
|
| }
|
|
|
| function generateTickets() {
|
| const stations = ["Station A", "Station B", "Station C", "Station D", "Station E", "Station F", "Station G"];
|
| const numberOfTickets = Math.floor(Math.random() * 2) + 5; // Generate 5 or 6 tickets
|
| const tbody = document.getElementById("ticketBody");
|
|
|
| for (let i = 1; i <= numberOfTickets; i++) {
|
| let boarding = getRandomFromArray(stations);
|
| let destination;
|
| do {
|
| destination = getRandomFromArray(stations);
|
| } while (destination === boarding);
|
|
|
| const trainId = getRandomId(3);
|
| const userId = getRandomId(3);
|
| const date = getRandomDate(new Date(2025, 4, 1), new Date(2025, 6, 30)); // May to July 2025
|
| const tickets = Math.floor(Math.random() * 5) + 1;
|
|
|
| const row = document.createElement("tr");
|
| row.innerHTML = `
|
| <td>${i}</td>
|
| <td>${trainId}</td>
|
| <td>${userId}</td>
|
| <td>${boarding}</td>
|
| <td>${destination}</td>
|
| <td>${date}</td>
|
| <td>${tickets}</td>
|
| <td><button onclick="cancelTicket(this)">Cancel</button></td>
|
| `;
|
|
|
| tbody.appendChild(row);
|
| }
|
| }
|
|
|
| window.onload = generateTickets;
|
| </script>
|
|
|
| </body>
|
| </html>
|