document.addEventListener('DOMContentLoaded', () => {
    // 绑定所有 tag-btn 的点击事件
    document.querySelectorAll('.tag-btn').forEach(button => {
      button.addEventListener('click', () => {
        if (button.id === 'show-all') {
          // 显示所有工具卡片
          document.querySelectorAll('.tool-card').forEach(card => {
            card.style.display = 'block';
          });
        } else {
          const selectedTag = button.getAttribute('data-tag');
          document.querySelectorAll('.tool-card').forEach(card => {
            // 查找卡片中 .tool-category 元素
            const tagElem = card.querySelector('.tool-category');
            if (tagElem && tagElem.textContent.trim() === selectedTag) {
              card.style.display = 'block';
            } else {
              card.style.display = 'none';
            }
          });
        }
      });
    });
  });

document.getElementById('show-all').addEventListener('click', () => {
    document.querySelectorAll('.tool-card').forEach(card => {
        card.style.display = 'block';
    });
});

const tagColors = {
    全部: '#CFCFCF',
    教育: '#fc8f8f',
    编程: '#66CD00',
    资源: '#1E90FF'
};

// 遍历所有标签
document.querySelectorAll('.tool-category').forEach(span => {
    // 读取 data-tag 属性
    const tag = span.dataset.tag;  // 等同于 span.getAttribute('data-tag')
    // 如果 tagColors 中存在对应的颜色，则设置背景色
    if (tagColors[tag]) {
        span.style.backgroundColor = tagColors[tag];
        span.style.color = '#fff';  // 文字颜色为白色，便于对比
    }
});

document.querySelectorAll('.tag-btn').forEach(span => {
    // 读取 data-tag 属性
    const tag = span.dataset.tag;  // 等同于 span.getAttribute('data-tag')
    // 如果 tagColors 中存在对应的颜色，则设置背景色
    if (tagColors[tag]) {
        span.style.backgroundColor = tagColors[tag];
        span.style.color = '#fff';  // 文字颜色为白色，便于对比
    }
});