Black Friday Special sale

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Items Left Badge with Countdown</title>
<style>
.body-uniq-u1Xa9Yz {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
  margin: 0;
  padding-left: 20px;
}

.container-uniq-T8hJ3Kb {
  display: flex;
  align-items: center;
  gap: 4px; /* Badge'ler arasındaki boşluk azaltıldı */
}

.badge-uniq-N5cLm2Q {
  display: inline-flex;
  align-items: center;
  background-color: #ffdede;
  color: #b22222;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.icon-uniq-Y3zR8sQ {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

.badge-uniq-N5cLm2Q .icon-uniq-Y3zR8sQ {
  margin-right: 6px;
}

.text-uniq-X9bT2Rj {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.timer-uniq-P3fL6Wm {
  font-weight: bold;
  color: #b22222;
  background: none;
  border: none;
  font-size: 12px; /* Boyut küçültüldü */
}

@keyframes rotate-uniq-A1b2C3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.hand-uniq-Z8gJ7Vq {
  transform-origin: 50% 50%;
  animation: rotate-uniq-A1b2C3 2s linear infinite;
}
</style>
</head>
<body class="body-uniq-u1Xa9Yz">

<div class="container-uniq-T8hJ3Kb">
  <div class="badge-uniq-N5cLm2Q">
    <span class="text-uniq-X9bT2Rj">
      <svg class="icon-uniq-Y3zR8sQ" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="10" stroke="#b22222" stroke-width="2" fill="none"/>
        <line x1="12" y1="12" x2="12" y2="6" stroke="#b22222" stroke-width="2" class="hand-uniq-Z8gJ7Vq"/>
        <line x1="12" y1="12" x2="16" y2="12" stroke="#b22222" stroke-width="2"/>
      </svg>
      Black Friday Special:
    </span>
  </div>
  
  <!-- Geri sayım burada, bağımsız olarak -->
  <div class="timer-uniq-P3fL6Wm" id="countdown">00:00:00</div>
</div>

<script>
let countdownMinutes = 45;

// Geri sayım süresini başlatan fonksiyon
function startCountdown() {
  let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;

  function updateCountdown() {
    let now = new Date().getTime();
    let distance = countdownDate - now;

    // Saat, dakika ve saniyeleri hesaplayın
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Geri sayımın kalan süresini formatlayarak gösterin
    document.getElementById("countdown").innerHTML = 
      (hours < 10 ? "0" + hours : hours) + ":" + 
      (minutes < 10 ? "0" + minutes : minutes) + ":" + 
      (seconds < 10 ? "0" + seconds : seconds);

    // Geri sayım tamamlandığında işlemi sıfırla ve yeniden başlat
    if (distance < 0) {
      clearInterval(countdownInterval);
      startCountdown(); // Geri sayımı yeniden başlat
    }
  }

  // Geri sayımı her saniye güncelleyin
  let countdownInterval = setInterval(updateCountdown, 1000);
}

// İlk geri sayımı başlat
startCountdown();
</script>

</body>
</html>