ai-tools-hub/index.html at main · bugcodes/ai-tools-hub · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Tools Hub - 常用 AI 工具汇总</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .tool-card:hover { transform: translateY(-4px); }
    .star { color: #fbbf24; }
  </style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen">
  <!-- Header -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 py-6">
      <div class="text-center">
        <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          🤖 AI Tools Hub
        </h1>
        <p class="text-slate-600 mt-2">汇总常用 AI 工具，帮助开发者快速找到合适的工具</p>
      </div>
      <!-- Search -->
      <div class="mt-6 max-w-2xl mx-auto">
        <input
          type="text"
          id="searchInput"
          placeholder="搜索 AI 工具..."
          class="w-full px-6 py-3 border border-slate-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"
          oninput="filterTools()"
        >
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="max-w-7xl mx-auto px-4 py-8">
    <!-- Categories -->
    <div id="categories" class="space-y-12">
      <!-- Will be populated by JavaScript -->
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-white border-t mt-16">
    <div class="max-w-7xl mx-auto px-4 py-8 text-center text-slate-600">
      <!-- WeChat QR -->
      <div class="mb-6">
        <p class="text-sm font-semibold text-slate-800 mb-2">📱 关注公众号【2026 加油啊】</p>
        <img src="images/qrcode_for_gh_7673aec09d6a_344.jpg" alt="公众号二维码" class="w-20 h-20 mx-auto rounded border border-green-500">
        <p class="text-xs text-slate-600 mt-1">回复"工具"领取 AI 工具包</p>
      </div>

      <p class="text-sm">Created with ❤️ by 赵小帅 | Updated: <span id="updateDate"></span></p>
      <p class="mt-2 text-xs text-slate-500">欢迎提交新工具或反馈建议</p>
      <p class="mt-2 text-xs">
        <a href="https://github.com/bugcodes/ai-tools-hub" class="text-blue-600 hover:underline" target="_blank">GitHub</a> ·
        <a href="./tech-share-detailed.html" class="text-blue-600 hover:underline" target="_blank">技术分享文档</a>
      </p>
    </div>
  </footer>

  <script>
    let toolsData = {};

    // Load data
    fetch('data/tools.json')
      .then(res => res.json())
      .then(data => {
        toolsData = data;
        document.getElementById('updateDate').textContent = data.updatedAt;
        renderCategories(data.categories);
      })
      .catch(err => console.error('Error loading data:', err));

    // Render categories
    function renderCategories(categories) {
      const container = document.getElementById('categories');
      container.innerHTML = categories.map(cat => `
        <section id="category-${cat.id}" class="category-section">
          <div class="flex items-center gap-3 mb-6">
            <span class="text-3xl">${cat.icon}</span>
            <h2 class="text-2xl font-bold text-slate-800">${cat.name}</h2>
            <span class="text-sm text-slate-500 bg-slate-100 px-3 py-1 rounded-full">${cat.tools.length} 个工具</span>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            ${cat.tools.map((tool, index) => renderTool(tool, index)).join('')}
          </div>
        </section>
      `).join('');
    }

    // Render tool card
    function renderTool(tool, index) {
      const stars = '★'.repeat(tool.rating) + '☆'.repeat(5 - tool.rating);
      const affiliateUrl = tool.affiliateUrl || tool.url;
      return `
        <div class="tool-card bg-white rounded-xl shadow-sm border border-slate-200 p-6 transition-all duration-300 hover:shadow-lg" data-name="${tool.name.toLowerCase()}" data-tags="${tool.tags.join(' ')}">
          <div class="flex justify-between items-start mb-4">
            <h3 class="text-xl font-bold text-slate-800">${tool.name}</h3>
            <span class="text-xs font-medium px-2 py-1 rounded ${tool.pricing.includes('免费') ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}">
              ${tool.pricing.split('/')[0]}
            </span>
          </div>
          <p class="text-slate-600 text-sm mb-4 line-clamp-2">${tool.description}</p>
          <div class="flex flex-wrap gap-2 mb-4">
            ${tool.tags.map(tag => `
              <span class="text-xs px-2 py-1 bg-slate-100 text-slate-600 rounded">${tag}</span>
            `).join('')}
          </div>
          <div class="flex items-center justify-between mb-4">
            <div class="star text-sm">${stars}</div>
            ${tool.commission ? `<span class="text-xs font-semibold text-green-600">💰 ${tool.commission}</span>` : ''}
          </div>
          <div class="flex gap-2">
            <a href="${affiliateUrl}" target="_blank" class="flex-1 text-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold hover:opacity-90 transition text-sm">
              🚀 立即使用
            </a>
            <a href="${tool.url}" target="_blank" class="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg font-semibold hover:bg-slate-50 transition text-sm">
              官网
            </a>
          </div>
        </div>
      `;
    }

    // Filter tools
    function filterTools() {
      const query = document.getElementById('searchInput').value.toLowerCase();
      const cards = document.querySelectorAll('.tool-card');
      const sections = document.querySelectorAll('.category-section');

      cards.forEach(card => {
        const name = card.dataset.name;
        const tags = card.dataset.tags;
        const match = name.includes(query) || tags.includes(query);
        card.style.display = match ? 'block' : 'none';
      });

      // Hide empty categories
      sections.forEach(section => {
        const visibleCards = section.querySelectorAll('.tool-card[style="display: block;"]');
        section.style.display = visibleCards.length > 0 || query === '' ? 'block' : 'none';
      });
    }
  </script>
</body>
</html>