<style>
  #countdown {
    display: flex;
    gap: 0px;
    color: #fff;
    font-size: 13px;
  }

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

  .time-box .number {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    font-family: 'Inter';
  }

  .time-box .label {
    font-family: 'Inter';
    font-size: 9px;
  }

  .separator {
    font-size: 16px;
    margin: 0 3px;
    line-height: 1;
  }
</style>

<div id="countdown">
  <div class="time-box">
    <div class="number" id="days">00</div>
    <div class="label">күн</div>
  </div>
  <div class="separator">:</div>
  <div class="time-box">
    <div class="number" id="hours">00</div>
    <div class="label">сағат</div>
  </div>
  <div class="separator">:</div>
  <div class="time-box">
    <div class="number" id="minutes">00</div>
    <div class="label">минут</div>
  </div>
  <div class="separator">:</div>
  <div class="time-box">
    <div class="number" id="seconds">00</div>
    <div class="label">секунд</div>
  </div>
</div>

<script>
  // Указываем точную дату и ВРЕМЯ (5 мая 2025 года, 17:00)
  const targetDate = new Date('2025-05-17T09:15:00').getTime();

  function updateCountdown() {
    const now = new Date().getTime();
    const distance = targetDate - now;

    if (distance <= 0) {
      document.getElementById("countdown").innerHTML = "Уақыт бітті!";
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("days").innerText = String(days).padStart(2, '0');
    document.getElementById("hours").innerText = String(hours).padStart(2, '0');
    document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
    document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>

<style>

  #countdown {
    display: flex;
    gap: 0px;
    color: #000;
    font-size: 13px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-top: 5px;
}

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

.flip-panel {
    background: #f2f2f2;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 14px;
    font-weight: bold;
    width: 20px;
    text-align: center;
    box-shadow: inset 0 -1px 0 #ccc;
    line-height: 1;
    font-family: Arial,sans-serif;
    position: relative;
}

  .label {
    font-size: 10px;
    color: #000000;
    margin-top: 6px;
    font-family: Arial;
}

.separator {
    font-size: 19px;
    color: #000000;
    margin: 0 4px;
    line-height: 1;
    margin-top: -20px;
}
</style>

<div style="font: 12px Arial;">сгорит через:</div>
<div id="countdown">
  <div class="time-box">
    <div class="flip-panel" id="minutes">00</div>
    <div class="label">минут</div>
  </div>
  <div class="separator">:</div>
  <div class="time-box">
    <div class="flip-panel" id="seconds">00</div>
    <div class="label">секунд</div>
  </div>
</div>

<script>
  const cycleDuration = 30 * 60 * 1000; // 30 минут в миллисекундах
  const cycleStart = Date.now();

  function updateCountdown() {
    const now = Date.now();
    const elapsed = (now - cycleStart) % cycleDuration;
    const remaining = cycleDuration - elapsed;

    const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remaining % (1000 * 60)) / 1000);

    document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
    document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>