<!-- HTML：用「角括號標籤」包裹內容 -->

<h1>歡迎來到 ShopAI</h1>

<p>最受歡迎的 AI 購物平台</p>

<img src="banner.jpg" alt="春季大促" />

<button>立即購買</button>

<div>
  <h3>藍牙降噪耳機</h3>
  <span>$2,490</span>
  <button>加入購物車</button>
</div>

/* CSS：「選誰 { 改什麼 }」 */

h1 {
  font-size: 36px;
  color: #1a1a2e;
  font-weight: 800;
}

button {
  background: #4F46E5;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

button:hover {
  background: #4338CA;
  transform: scale(1.05);
}

.product-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 16px;
}

// JavaScript：「偵聽事件 → 執行動作」

let cartCount = 0;

function addToCart(productName) {
  cartCount = cartCount + 1;
  alert("已加入購物車！共 " + cartCount + " 件");
}

// 當按鈕被點擊，執行 addToCart
button.addEventListener("click", function() {
  addToCart("藍牙降噪耳機");
});

// 從伺服器載入資料
async function loadProducts() {
  const res = await fetch("/api/products");
  const data = await res.json();
  // 把資料渲染到頁面上...
}