Copiable Discount Bar 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customer Review</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=check|verified|content_copy" />
  <style>
    body.unique-body-QwErTy123 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #fafafa, #e0e0e0);
      position: relative;
    }

    .unique-review-container-Uio123 {
      display: flex;
      align-items: center;
      background-color: #fafafa;
      border-radius: 12px;
      padding: 16px;
      font-size: 14px;
      color: #333;
      max-width: 600px;
      width: 100%;
      margin: 2px 0;
      border: 2px dashed #e0e0e0;
      position: relative;
    }

    .unique-review-image-Pkl456 {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 16px;
      border: 2px solid #e0e0e0;
    }

    .unique-review-content-Asd789 {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .unique-review-author-Hjk012 {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }

    .unique-review-author-name-Zxc345 {
      font-weight: bold;
      margin-right: 4px;
      display: flex;
      align-items: center;
    }

    .unique-review-icon-Lmn678 {
      font-size: 16px;
      color: #1DA1F2;
      margin-left: 4px;
      vertical-align: middle;
    }

    .unique-review-text-Qwe567 {
      font-size: 14px;
      color: #555;
    }

    .timer-container-Rty234 {
      position: absolute;
      top: 8px;
      right: 16px;
      background: #ffdede;
      color: #b22222;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: bold;
    }

    #countdown {
      font-weight: bold;
      color: #b22222;
    }

    .discount-text-Opa789 {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      color: #004d00; /* Metin ve ikon koyu yeşil */
      background-color: #e6ffe6; /* Çok açık yeşil arka plan */
      padding: 10px 16px;
      border-radius: 8px;
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px; /* İkon ve metin arasındaki boşluk */
    }

    .unique-tick-icon-Vbn012 {
      font-size: 18px;
      color: #004d00; /* Check ikonuyla metin aynı renk */
    }

    @media (max-width: 768px) {
      .timer-container-Rty234 {
        font-size: 8px;
        padding: 3px 6px;
      }

      .discount-text-Opa789 {
        font-size: 12px;
        padding: 8px 12px;
      }

      .unique-review-container-Uio123 {
        padding: 12px;
        font-size: 12px;
      }

      .unique-review-text-Qwe567 {
        font-size: 12px; /* Mobil versiyonda metin boyutu küçültüldü */
      }
    }
  </style>
</head>
<body class="unique-body-QwErTy123">

<div class="unique-review-container-Uio123">
  <div class="timer-container-Rty234">
    Time left: <span id="countdown">00:00:00</span>
  </div>

  <img class="unique-review-image-Pkl456" src="https://cdn.shopify.com/s/files/1/0922/0430/2651/files/05_23.webp?v=1742357721" alt="Profile Picture">
  <div class="unique-review-content-Asd789">
    <div class="unique-review-author-Hjk012">
      <span class="unique-review-author-name-Zxc345">
        Burkisoy
        <span class="unique-review-icon-Lmn678 material-symbols-outlined">verified</span>
      </span>
    </div>
    <div class="unique-review-text-Qwe567">
      We’ve mixed Black Friday and New Year’s deals just for you. Grab a big $245 off!
    </div>
  </div>
</div>

<div class="discount-text-Opa789">
  <span class="material-symbols-outlined unique-tick-icon-Vbn012">check</span>
  <span>Discount code applied automatically.</span>
</div>

<script>
  const code = "BF24";

  // Countdown timer logic
  let countdownMinutes = 40;

  function startCountdown() {
    let countdownDate = new Date().getTime() + countdownMinutes * 60 * 1000;

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

      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);

      document.getElementById("countdown").innerHTML =
        (hours < 10 ? "0" + hours : hours) + ":" +
        (minutes < 10 ? "0" + minutes : minutes) + ":" +
        (seconds < 10 ? "0" + seconds : seconds);

      if (distance < 0) {
        clearInterval(countdownInterval);
        startCountdown();
      }
    }

    let countdownInterval = setInterval(updateCountdown, 1000);
  }

  startCountdown();
</script>

</body>
</html>