<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .progress-bar {
    width: 100%;
    height: 30px;
    background-color: #ccc;
}

.progress {
    height: 100%;
    width: 0;
    background-color: #4CAF50;
    transition: width 1s;
}

#time-remaining {
    text-align: center;
    font-weight: bold;
}

    </style>
</head>
<body>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
    <p id="time-remaining">Kalan süre: 0 saat 0 dakika 0 saniye</p>
</body>
<script>// Sipariş tarihi ve son tarih arasındaki süreyi hesapla
const orderTime = new Date("<?php echo $orders_time; ?>"); // Sipariş zamanını ayarlayın
const lastDate = new Date("<?php echo $orders_lastdate; ?>"); // Son tarihi ayarlayın

function calculateProgress() {
    const currentTime = new Date();
    const elapsedTime = currentTime - orderTime;
    const totalTime = lastDate - orderTime;
    const progressPercentage = (elapsedTime / totalTime) * 100;

    if (progressPercentage >= 100) {
        document.querySelector(".progress").style.width = "100%";
        document.querySelector("#time-remaining").textContent = "Sipariş süresi doldu.";
    } else {
        document.querySelector(".progress").style.width = progressPercentage + "%";

        const remainingTime = new Date(totalTime - elapsedTime);
        const hours = remainingTime.getUTCHours();
        const minutes = remainingTime.getUTCMinutes();
        const seconds = remainingTime.getUTCSeconds();

        document.querySelector("#time-remaining").textContent = `Kalan süre: ${hours} saat ${minutes} dakika ${seconds} saniye`;
    }
}

calculateProgress();
setInterval(calculateProgress, 1000);
</script>
</html>

böyle dene