Aaaaaaaa - Posts - OneCompiler

/* Progress bar styles */
.progress-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}

.progress-bar {
position: relative;
width: 100%;
height: 5px;
background-color: #e0e0e0;
margin-top: 10px;
}

.progress-fill {
position: absolute;
height: 5px;
background-color: #007BFF;
width: 0%;
transition: width 0.4s ease;
}

.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
margin-top: -15px;
z-index: 1;
}

.circle.active {
background-color: #007BFF;
color: white;
}

.status-indicator {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-weight: bold;
}

.status-label {
width: 100px;
text-align: center;
}

/* Table styles */
.horizontal-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-family: 'Arial', sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.horizontal-table thead {
background-color: #007BFF;
color: white;
}

.horizontal-table th, .horizontal-table td {
padding: 12px 15px;
text-align: center;
}

.horizontal-table tbody tr {
background-color: #f9f9f9;
}

.horizontal-table tbody tr:nth-child(even) {
background-color: #f1f1f1;
}

.horizontal-table tbody tr:hover {
background-color: #e9e9e9;
}

.horizontal-table th {
font-size: 18px;
font-weight: 600;
}

.horizontal-table td {
font-size: 16px;
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parcel Booking System</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="container"> <h1>Parcel Booking System</h1>

    <!-- Hidden input to hold dynamic value from JSP (Booking ID) -->
    <input type="hidden" id="hiddenBookingId" value="<%= bookingIdFromJSP %>"> <!-- JSP will populate this -->

    <!-- Input to track booking -->
    <input type="text" id="bookingID" placeholder="Enter your booking ID">
    <button onclick="trackBooking()">Track Booking</button>

    <!-- Progress Bar with 5 circles -->
    <div class="progress-container">
        <div class="progress-bar"></div>
        <div class="progress-fill" id="progressFill"></div>
        <div class="circle" id="step1">1</div>
        <div class="circle" id="step2">2</div>
        <div class="circle" id="step3">3</div>
        <div class="circle" id="step4">4</div>
        <div class="circle" id="step5">5</div>
    </div>

    <!-- Status text under each circle -->
    <div class="status-indicator">
        <div class="status-label">Ordered</div>
        <div class="status-label">Dispatched</div>
        <div class="status-label">In Transit</div>
        <div class="status-label">Out for Delivery</div>
        <div class="status-label">Delivered</div>
    </div>

    <!-- Div for booking results, will include table if booking is found -->
    <div id="bookingResult" class="booking-result">
        <!-- Conditionally display the table if booking ID is found -->
        <%
            if (request.getAttribute("bookingId") != null) {
        %>
            <table id="bookingDetails" class="horizontal-table">
                <thead>
                    <tr>
                        <th>Booking ID</th>
                        <th>Full Name</th>
                        <th>Address</th>
                        <th>Recipient Name</th>
                        <th>Recipient Address</th>
                        <th>Date of Booking</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>${bookingId}</td>
                        <td>${fullName}</td>
                        <td>${address}</td>
                        <td>${recName}</td>
                        <td>${recAddress}</td>
                        <td>${bookingDate}</td>
                    </tr>
                </tbody>
            </table>
        <%
            } else {
        %>
            <!-- Message if no booking is found -->
            <p>No booking found with the provided ID.</p>
        <%
            }
        %>
    </div>
</div>

<script src="script.js"></script> <!-- Link to external JS -->

</body> </html>