Popular product

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popular Product Notification</title>
  <style>
    .unique-notification-ABC123 {
      font-family: Arial, sans-serif;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 5px;
    }

    .unique-notification-ABC123 .unique-icon-DEF456 {
      margin-right: 8px;
      font-size: 24px;
      animation: unique-bounce-GHI789 1.5s infinite;
    }

    .unique-notification-ABC123 .unique-highlight-JKL012 {
      color: #5f4b8b; /* Purple color */
      font-weight: bold;
    }

    @keyframes unique-bounce-GHI789 {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }
  </style>
</head>
<body>
  <div class="unique-notification-ABC123">
    <div class="unique-icon-DEF456">
      👀
    </div>
    <div>
      Popular product! In the last 24 hours, <span class="unique-highlight-JKL012" id="view-count">6,269 people</span> viewed it!
    </div>
  </div>

  <script>
    function animateValue(id, start, end, duration) {
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const value = Math.floor(progress * (end - start) + start).toLocaleString();
        document.getElementById(id).innerText = `${value} people`;
        if (progress < 1) {
          window.requestAnimationFrame(step);
        }
      };
      window.requestAnimationFrame(step);
    }

    document.addEventListener("DOMContentLoaded", function() {
      animateValue("view-count", 0, 6269, 5000); // 5000ms = 5 seconds
    });
  </script>
</body>
</html>