Kya - 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 with Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="tracking-container"> <h2>Parcel Tracking Status</h2>

    <!-- Progress bar with animation for each step -->
    <div class="progress-container">
        <div class="progress-bar"></div>

        <div class="step" id="step1">
            <span class="step-number">1</span>
            <span class="step-description">Order Placed</span>
        </div>
        <div class="step" id="step2">
            <span class="step-number">2</span>
            <span class="step-description">Dispatched</span>
        </div>
        <div class="step" id="step3">
            <span class="step-number">3</span>
            <span class="step-description">In Transit</span>
        </div>
        <div class="step" id="step4">
            <span class="step-number">4</span>
            <span class="step-description">Out for Delivery</span>
        </div>
        <div class="step" id="step5">
            <span class="step-number">5</span>
            <span class="step-description">Delivered</span>
        </div>
    </div>
</div>

<!-- JavaScript to animate based on tracking status -->
<script>
    // Example status value (1 = "Order Placed", 2 = "Dispatched", etc.)
    var status = 3; // You can dynamically set this value from your backend

    // Function to update the progress animation
    function updateProgress(status) {
        // Select all the steps
        const steps = document.querySelectorAll('.step');

        // Loop through the steps and add the "completed" class to those that are completed
        for (let i = 0; i < status; i++) {
            steps[i].classList.add('completed');
        }

        // Animate the progress bar width based on the status
        const progressBar = document.querySelector('.progress-bar');
        progressBar.style.width = ((status - 1) / (steps.length - 1)) * 100 + '%';
    }

    // Call the function to update the progress
    updateProgress(status);
</script>

</body> </html> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

.tracking-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}

h2 {
text-align: center;
color: #333;
}

.progress-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-top: 20px;
}

.step {
text-align: center;
position: relative;
z-index: 1;
}

.step-number {
display: inline-block;
background-color: #ddd;
color: white;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
margin-bottom: 8px;
transition: background-color 0.5s ease;
}

.step-description {
font-size: 12px;
color: #555;
}

.completed .step-number {
background-color: #4CAF50;
}

.completed .step-description {
color: #4CAF50;
}

.progress-bar {
position: absolute;
top: 18px;
left: 0;
height: 5px;
background-color: #4CAF50;
width: 0;
z-index: 0;
transition: width 1s ease;
}

.step:not(:first-child):before {
content: '';
position: absolute;
top: 18px;
left: 50%;
height: 5px;
width: 100%;
background-color: #ddd;
z-index: -1;
}