XyXX - Posts - OneCompiler

<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parcel Tracking System</title>

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f6f8;
        margin: 0;
        padding: 0;
    }

    /* Container */
    .container {
        max-width: 600px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Header */
    h2 {
        text-align: center;
        color: #2d3e50;
        font-size: 24px;
        margin-bottom: 20px;
    }

    /* Booking Input */
    .input-section {
        text-align: center;
        margin-bottom: 20px;
    }

    .input-section input {
        padding: 10px;
        font-size: 16px;
        width: 70%;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-right: 10px;
    }

    .input-section button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #0073e6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .input-section button:hover {
        background-color: #005bb5;
    }

    .progress-container {
        position: relative;
        width: auto;
        margin: 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .progress-bar {
        background-color: #e0e0e0;
        height: 5px;
        position: absolute;
        top: 50px; /* Center vertically */
        left: 12.5px; /* Align with circles */
        right: 12.5px;
        z-index: 1;
    }

    .progress-bar-fill {
        background-color: #0073e6;
        position: absolute;
        height: 5px;
        /* width: ; */
        top: 50px; /* Align with progress bar */
        left: 12.5px;
        right: 12.5px;
        z-index: 1;
        transition: width 1s ease-in-out;
    }

    .step-container {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .progress-step {
        width: 25px;
        height: 25px;
        background-color: #e0e0e0;
        border-radius: 50%;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .progress-step.active {
        background-color: #0073e6;
    }

    .step-label {
        text-align: center;
        margin-top: 10px;
        font-size: 12px;
        color: #333;
    }

    .user-details {
        text-align: center;
        margin-top: 20px;
    }
</style>

</head> <body> <div class="container"> <h2>Track Your Parcel</h2> <div class="input-section"> <input type="text" id="bookingId" placeholder="Enter Booking ID" required> <button onclick="trackParcel()">Track</button> </div> <div class="progress-container"> <div class="progress-bar"></div> <div class="progress-bar-fill" id="progressBarFill"></div> </div> <div class="step-container"> <div class="step"> <div class="progress-step" id="step1">1</div> <div class="step-label">Booked</div> </div> <div class="step"> <div class="progress-step" id="step2">2</div> <div class="step-label">Dispatched</div> </div> <div class="step"> <div class="progress-step" id="step3">3</div> <div class="step-label">In Transit</div> </div> <div class="step"> <div class="progress-step" id="step4">4</div> <div class="step-label">Delivered</div> </div> </div> <div class="user-details"> <p><strong>User ID:</strong> <span id="userIdDisplay"></span></p> </div> </div>

<script>
    window.onload = function () {
        const userId = localStorage.getItem('userId') || sessionStorage.getItem('userId');
        document.getElementById('userIdDisplay').innerText = userId || 'Guest';
    }

    function trackParcel() {
        const bookingId = document.getElementById('bookingId').value.trim();
        if (!bookingId) {
            alert('Please enter a valid Booking ID.');
            return;
        }

        const trackingStatus = getTrackingStatusFromDatabase(bookingId); // Simulate fetching status from a database

        updateProgress(trackingStatus);
    }

    function getTrackingStatusFromDatabase(bookingId) {
        
        return Math.floor(Math.random() * 4) + 1;  // Random status for demonstration
    }

    function updateProgress(status) {
        const progressBarFill = document.getElementById('progressBarFill');
        const stepElements = [document.getElementById('step1'), document.getElementById('step2'), document.getElementById('step3'), document.getElementById('step4')];

        // Reset all steps
        stepElements.forEach(step => step.classList.remove('active'));

        // Activate the appropriate number of steps and fill the progress bar accordingly
        for (let i = 0; i < status; i++) {
            stepElements[i].classList.add('active');
        }

        // Calculate the percentage width of the progress bar based on the current status
        const progressPercentage = (status - 1) / (stepElements.length - 1) * 100;
        if(progressBarFill > 100){
            progressBarFill = 100;
        }
        progressBarFill.style.width = `${progressPercentage}%`;
    }
</script>

</body> </html>