<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TrainGo — Customer Portal</title>
<link rel="stylesheet" href="home.css" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<div class="bg-gradient"></div>
<div class="bg-grid"></div>
<!-- ===== TOP BAR ===== -->
<header class="topbar">
<div class="topbar__brand">
<span class="brand__icon">🚆</span>
<span class="brand__name">TrainGo</span>
</div>
<div class="topbar__user">
<span class="user-chip" id="user-chip">👤 <span id="current-user">guest</span></span>
<button class="btn-logout" id="logout-btn">Logout</button>
</div>
</header>
<!-- ===== TAB NAV ===== -->
<nav class="tabs">
<button class="tab active" data-panel="panel-home">📊 Home</button>
<button class="tab" data-panel="panel-book">🎫 Book Ticket</button>
<button class="tab" data-panel="panel-view">📋 View Tickets</button>
<button class="tab" data-panel="panel-update">⚙️ Update Details</button>
</nav>
<main class="content">
<!-- ========== 1. TABLE AGGREGATE ========== -->
<section id="panel-home" class="panel active">
<h1 class="panel__title">Dashboard</h1>
<p class="panel__sub">Overview of your booking activity.</p>
<div class="stat-row">
<div class="stat-card stat-card--yellow">
<div class="stat-card__label">Total Tickets</div>
<div class="stat-card__value" id="stat-total">0</div>
</div>
<div class="stat-card stat-card--green">
<div class="stat-card__label">Active</div>
<div class="stat-card__value" id="stat-active">0</div>
</div>
<div class="stat-card stat-card--pink">
<div class="stat-card__label">Cancelled</div>
<div class="stat-card__value" id="stat-cancelled">0</div>
</div>
</div>
<!-- 1.1 Tickets per class -->
<h2 class="section-head">1.1 — Tickets Booked Per Class</h2>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Ticket Category</th>
<th>Tickets Booked</th>
<th>Share</th>
</tr>
</thead>
<tbody id="class-agg-body">
<tr><td colspan="3" class="empty-row">No bookings yet.</td></tr>
</tbody>
</table>
</div>
<!-- 1.2 Sales per quarter -->
<h2 class="section-head">1.2 — Sales Done Per Quarter</h2>
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
<th>Quarter</th>
<th>Bookings</th>
<th>Tickets</th>
</tr>
</thead>
<tbody id="quarter-agg-body">
<tr><td colspan="3" class="empty-row">No bookings yet.</td></tr>
</tbody>
</table>
</div>
</section>
<!-- ========== 2. BOOK TICKET ========== -->
<section id="panel-book" class="panel">
<h1 class="panel__title">Book Ticket</h1>
<p class="panel__sub">Fill in your journey details.</p>
<form id="book-form" novalidate>
<div class="form-grid">
<!-- 2.1 ID — auto populated -->
<div class="input-group">
<label for="bk-id">🆔 User ID <span class="auto-tag">auto</span></label>
<input type="text" id="bk-id" readonly />
<span class="error-msg" id="bk-id-err"></span>
</div>
<!-- 2.2 Name -->
<div class="input-group">
<label for="bk-name">👤 Passenger Name</label>
<input type="text" id="bk-name" placeholder="Full name" />
<span class="error-msg" id="bk-name-err"></span>
</div>
<!-- 2.3 Mobile -->
<div class="input-group">
<label for="bk-mobile">📱 Mobile</label>
<input type="text" id="bk-mobile" placeholder="10-digit number" maxlength="10" inputmode="numeric" />
<span class="error-msg" id="bk-mobile-err"></span>
</div>
<!-- 2.4 Age -->
<div class="input-group">
<label for="bk-age">🎂 Age</label>
<input type="text" id="bk-age" placeholder="e.g. 28" maxlength="3" inputmode="numeric" />
<span class="error-msg" id="bk-age-err"></span>
</div>
<!-- 2.5 Date -->
<div class="input-group">
<label for="bk-date">📅 Journey Date</label>
<input type="date" id="bk-date" />
<span class="error-msg" id="bk-date-err"></span>
</div>
<!-- Boarding Station -->
<div class="input-group">
<label for="bk-from">🚉 Boarding Station</label>
<select id="bk-from">
<option value="">Select station</option>
</select>
<span class="error-msg" id="bk-from-err"></span>
</div>
<!-- Destination Station -->
<div class="input-group">
<label for="bk-to">🏁 Destination Station</label>
<select id="bk-to">
<option value="">Select station</option>
</select>
<span class="error-msg" id="bk-to-err"></span>
</div>
<!-- 2.6 Ticket Category -->
<div class="input-group">
<label for="bk-class">🎟️ Ticket Category</label>
<select id="bk-class">
<option value="">Select category</option>
<option value="First Class">First Class</option>
<option value="A.C Tier 1">A.C Tier 1</option>
<option value="A.C Tier 2">A.C Tier 2</option>
<option value="Sleeper">Sleeper</option>
<option value="Tatkal">Tatkal</option>
</select>
<span class="error-msg" id="bk-class-err"></span>
</div>
<!-- 2.7 Trains available -->
<div class="input-group input-group--wide">
<label for="bk-train">🚂 Available Trains</label>
<select id="bk-train">
<option value="">Select boarding & destination first</option>
</select>
<span class="error-msg" id="bk-train-err"></span>
</div>
<!-- 2.8 Number of tickets -->
<div class="input-group">
<label for="bk-count">🔢 Number of Tickets</label>
<input type="text" id="bk-count" placeholder="1 - 6" maxlength="1" inputmode="numeric" />
<span class="error-msg" id="bk-count-err"></span>
</div>
</div>
<button type="submit" class="btn btn--green">
<span class="btn__text">Confirm Booking</span>
<span class="btn__arrow">→</span>
</button>
</form>
</section>
<!-- ========== BOOKING CONFIRMATION ========== -->
<section id="panel-confirm" class="panel">
<div class="confirm-card">
<div class="confirm-card__stamp">CONFIRMED</div>
<h1 class="panel__title">Booking Confirmed 🎉</h1>
<p class="panel__sub">Your ticket has been issued. Details below.</p>
<dl class="confirm-list" id="confirm-list"></dl>
<div class="confirm-actions">
<button class="btn btn--yellow" id="confirm-view">View All Tickets</button>
<button class="btn btn--outline" id="confirm-another">Book Another</button>
</div>
</div>
</section>
<!-- ========== 3. VIEW TICKETS ========== -->
<section id="panel-view" class="panel">
<h1 class="panel__title">My Tickets</h1>
<p class="panel__sub">All tickets booked under your account.</p>
<div class="table-wrap table-wrap--scroll">
<table class="data-table">
<thead>
<tr>
<th>Ticket ID</th>
<th>Train ID</th>
<th>User ID</th>
<th>User Name</th>
<th>Boarding</th>
<th>Destination</th>
<th>Boarding Date & Time</th>
<th>Arrival Date & Time</th>
<th>Tickets</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tickets-body">
<tr><td colspan="11" class="empty-row">No tickets booked yet.</td></tr>
</tbody>
</table>
</div>
</section>
<!-- ========== 4. UPDATE DETAILS ========== -->
<section id="panel-update" class="panel">
<h1 class="panel__title">Update Details</h1>
<p class="panel__sub">Change your contact information or password.</p>
<form id="update-form" novalidate>
<div class="form-grid">
<!-- 4.1 Email -->
<div class="input-group">
<label for="up-email">✉️ Email</label>
<input type="email" id="up-email" placeholder="[email protected]" />
<span class="error-msg" id="up-email-err"></span>
</div>
<!-- 4.2 Mobile -->
<div class="input-group">
<label for="up-mobile">📱 Mobile Number</label>
<input type="text" id="up-mobile" placeholder="10-digit number" maxlength="10" inputmode="numeric" />
<span class="error-msg" id="up-mobile-err"></span>
</div>
<!-- 4.3 Address -->
<div class="input-group input-group--wide">
<label for="up-address">🏠 Address</label>
<textarea id="up-address" rows="3" placeholder="House no, street, city, PIN"></textarea>
<span class="error-msg" id="up-address-err"></span>
</div>
</div>
<!-- 4.4 Update Password -->
<label class="checkbox-row">
<input type="checkbox" id="up-toggle-pw" />
<span>🔐 Update Password</span>
</label>
<div class="form-grid pw-section" id="pw-section" hidden>
<!-- 4.4.1.1 Current Password -->
<div class="input-group">
<label for="up-current">Current Password</label>
<input type="password" id="up-current" placeholder="••••••••" />
<span class="error-msg" id="up-current-err"></span>
</div>
<!-- 4.4.1.2 New Password -->
<div class="input-group">
<label for="up-new">New Password</label>
<input type="password" id="up-new" placeholder="••••••••" />
<span class="error-msg" id="up-new-err"></span>
</div>
<!-- 4.4.1.3 Confirm Password -->
<div class="input-group">
<label for="up-confirm">Confirm Password</label>
<input type="password" id="up-confirm" placeholder="••••••••" />
<span class="error-msg" id="up-confirm-err"></span>
</div>
</div>
<button type="submit" class="btn btn--yellow">
<span class="btn__text">Save Changes</span>
<span class="btn__arrow">→</span>
</button>
</form>
</section>
</main>
<!-- ===== CANCEL CONFIRMATION MODAL (3.10.1) ===== -->
<div class="modal-backdrop" id="cancel-modal" hidden>
<div class="modal">
<div class="modal__accent"></div>
<div class="modal__body">
<h2 class="modal__title">Cancel Ticket?</h2>
<p class="modal__text">
You are about to cancel ticket
<strong id="cancel-ticket-id"></strong>.
This action cannot be undone.
</p>
<div class="modal__actions">
<button class="btn btn--red" id="cancel-yes">Yes, Cancel It</button>
<button class="btn btn--outline" id="cancel-no">Keep Ticket</button>
</div>
</div>
</div>
</div>
<div id="toast" class="toast" aria-live="polite"></div>
<script src="home.js"></script>
</body>
</html>9 views