Donate.js

const btn = document.getElementById('donateBtn');
const container = document.querySelector('.donate-btn');
const heartIcon = document.querySelector('.base-heart');

btn.addEventListener('mouseenter', () => {
  // 產生 6 顆愛心，分次冒出
  for (let i = 0; i < 3; i++) {
    setTimeout(() => {
      createFloatingHeart();
    }, i * 500); // 每隔 0.15 秒冒出一顆，更有層次感
  }
});

function createFloatingHeart() {
  const svgNS = "http://www.w3.org/2000/svg";
  const heart = document.createElementNS(svgNS, "svg");
  const path = document.createElementNS(svgNS, "path");

  // 設定 SVG 屬性
  heart.setAttribute("viewBox", "0 0 24 24");
  heart.classList.add("floating-svg");
  path.setAttribute("d", "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
  heart.appendChild(path);

  // 計算按鈕內愛心的相對位置
  const rect = heartIcon.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();

  const x = rect.left - containerRect.left + rect.width / 2;
  const y = rect.top - containerRect.top + rect.height / 2 - 20;

  heart.style.left = `${x}px`;
  heart.style.top = `${y}px`;
heart.style.transform = `translate(-50%, -50%) scale(0.2)`;


// 隨機左右偏移量 (-40px 到 40px)
  const randomX = (Math.random() - 0.5) * 160;
  heart.style.setProperty('--random-x', `${randomX}px`);

  container.appendChild(heart);



  heart.addEventListener('animationend', () => {
    heart.remove();
  });
}