Dj - Posts - OneCompiler

<!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> /* Modern UI/UX CSS */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }

    .container {
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 600px;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
    }

    input[type="text"] {
        padding: 12px;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        box-sizing: border-box;
    }

    button {
        padding: 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 100%;
    }

    button:hover {
        background-color: #0056b3;
    }

    .tracking-result {
        margin-top: 20px;
        font-size: 16px;
        color: #333;
    }

    /* Progress Bar Styles */
    .progress-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 40px 0;
    }

    .progress-bar {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 4px;
        background-color: #ddd;
        z-index: 1;
    }

    .progress-fill {
        position: absolute;
        top: 50%;
        left: 0;
        height: 4px;
        background-color: #007bff;
        z-index: 1;
        width: 0; /* Initially 0 */
        transition: width 6.5s ease;
    }

    .circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ddd;
        z-index: 2;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.5s ease;
    }

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

    .circle.completed {
        background-color: #28a745;
    }

    .status-text {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
    }

    /* Status Indicator Container */
    .status-indicator {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .status-label {
        width: 15%;
        text-align: center;
        font-size: 14px;
    }
</style>

</head> <body> <div class="container"> <h1>Parcel Tracking System</h1> <input type="text" id="trackingID" placeholder="Enter your tracking ID"> <button onclick="trackParcel()">Track Parcel</button>

    <div id="trackingResult" class="tracking-result"></div>

    <!-- Progress Bar with 4 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>

    <!-- 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">Delivered</div>
    </div>
</div>

<script>
    // Mock data for parcel tracking with four status stages
    const parcelData = {
        "123456": { status: "In Transit", progress: 3 },
        "789101": { status: "Delivered", progress: 4 },
        "112131": { status: "Dispatched", progress: 2 },
        "141516": { status: "Ordered", progress: 1 }
    };

    function trackParcel() {
        const trackingID = document.getElementById("trackingID").value;
        const resultDiv = document.getElementById("trackingResult");

        if (trackingID in parcelData) {
            const parcel = parcelData[trackingID];
            
            // Update status text
            resultDiv.innerHTML = `<p>Status: <strong>${parcel.status}</strong></p>`;

            // Animate the progress bar and circles
            animateProgress(parcel.progress);
        } else {
            resultDiv.innerHTML = "<p>Tracking ID not found. Please try again.</p>";
            resetProgress();
        }
    }

    function animateProgress(step) {
        // Reset all steps first
        resetProgress();

        const progressFill = document.getElementById("progressFill");
        const stepDuration = 5; // Total duration for the full progress bar to fill
        const stepPercentage = 100 / 3; // Percentage width between each step

        // Set the width of the progress bar based on the step
        progressFill.style.width = ((step - 1) * stepPercentage) + "%";

        // Animate circles activation as progress bar reaches them
        for (let i = 1; i <= step; i++) {
            setTimeout(() => {
                const circle = document.getElementById(`step${i}`);
                circle.classList.add('active');

                if (i < step) {
                    circle.classList.add('completed');
                }
            }, (i - 1) * (stepDuration * 1000 / 3)); // Adjust the timing for each step
        }
    }

    function resetProgress() {
        // Reset all circles and progress bar to inactive state
        for (let i = 1; i <= 4; i++) {
            const circle = document.getElementById(`step${i}`);
            circle.classList.remove('active');
            circle.classList.remove('completed');
        }

        // Reset the progress bar fill
        const progressFill = document.getElementById("progressFill");
        progressFill.style.width = "0%";
    }
</script>

</body> </html>