Skip to content

Commit a269eea

Browse files
millyleemillylee
committed
feat: add home page
1 parent e441070 commit a269eea

File tree

2 files changed

+301
-0
lines changed

2 files changed

+301
-0
lines changed

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.output
12+
stats.html
13+
stats-*.json
14+
.wxt
15+
web-ext.config.ts
16+
17+
# Editor directories and files
18+
.vscode/*
19+
!.vscode/extensions.json
20+
.idea
21+
.DS_Store
22+
desktop.ini
23+
*.suo
24+
*.ntvs*
25+
*.njsproj
26+
*.sln
27+
*.sw?

‎index.html‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AI Code View「爱码视」- 程序员的代码阅读助手</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
11+
<style>
12+
body { font-family: 'Inter', 'Noto Sans SC', sans-serif; }
13+
.gradient-bg {
14+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15+
}
16+
.card-shadow {
17+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
18+
}
19+
.hover-scale {
20+
transition: transform 0.2s ease-in-out;
21+
}
22+
.hover-scale:hover {
23+
transform: scale(1.05);
24+
}
25+
</style>
26+
</head>
27+
<body class="bg-gray-50">
28+
<!-- Navigation -->
29+
<nav class="bg-white shadow-sm border-b border-gray-200">
30+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31+
<div class="flex justify-between items-center h-16">
32+
<div class="flex items-center">
33+
<div class="flex-shrink-0">
34+
<h1 class="text-xl font-bold text-gray-900">AI Code View「爱码视」</h1>
35+
</div>
36+
</div>
37+
<div class="flex space-x-4">
38+
<a href="#features" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">功能特性</a>
39+
<a href="#how-it-works" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">使用方法</a>
40+
<a href="#install" class="text-gray-700 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">安装扩展</a>
41+
</div>
42+
</div>
43+
</div>
44+
</nav>
45+
46+
<!-- Hero Section -->
47+
<section class="gradient-bg text-white py-20">
48+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
49+
<h2 class="text-4xl md:text-6xl font-bold mb-6">
50+
程序员的代码阅读助手
51+
</h2>
52+
<p class="text-xl md:text-2xl mb-8 text-purple-100">
53+
一键跳转到各种代码分析和阅读网站，让代码理解变得简单高效
54+
</p>
55+
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
56+
<a href="https://chrome.google.com/webstore/detail/diemcoeopjkfebcjlppfabjncmjefelm"
57+
target="_blank"
58+
class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover-scale inline-block">
59+
📥 Chrome 扩展安装
60+
</a>
61+
<a href="https://microsoftedge.microsoft.com/addons/detail/kchlpiplbhflmfclcjgkdkcbnplmlojl"
62+
target="_blank"
63+
class="bg-purple-800 text-white px-8 py-3 rounded-lg font-semibold hover-scale inline-block">
64+
📥 Edge 扩展安装
65+
</a>
66+
</div>
67+
</div>
68+
</section>
69+
70+
<!-- Features Section -->
71+
<section id="features" class="py-20">
72+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
73+
<div class="text-center mb-16">
74+
<h3 class="text-3xl font-bold text-gray-900 mb-4">核心功能</h3>
75+
<p class="text-lg text-gray-600">为开发者提供全方位的代码阅读和分析体验</p>
76+
</div>
77+
78+
<div class="grid md:grid-cols-3 gap-8">
79+
<div class="bg-white p-8 rounded-xl card-shadow">
80+
<div class="text-purple-600 text-3xl mb-4">🤖</div>
81+
<h4 class="text-xl font-semibold mb-3">AI 代码分析</h4>
82+
<p class="text-gray-600">快速跳转到 ZRead、DeepWiki 等 AI 平台，获取智能代码文档和分析</p>
83+
</div>
84+
85+
<div class="bg-white p-8 rounded-xl card-shadow">
86+
<div class="text-purple-600 text-3xl mb-4">📖</div>
87+
<h4 class="text-xl font-semibold mb-3">源码阅读</h4>
88+
<p class="text-gray-600">支持 GitHub.dev、GitHub1s、Sourcegraph 等多种源码阅读平台</p>
89+
</div>
90+
91+
<div class="bg-white p-8 rounded-xl card-shadow">
92+
<div class="text-purple-600 text-3xl mb-4">⌨️</div>
93+
<h4 class="text-xl font-semibold mb-3">快捷键支持</h4>
94+
<p class="text-gray-600">可自定义快捷键，无需鼠标点击即可快速访问常用的代码分析平台</p>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
100+
<!-- How It Works Section -->
101+
<section id="how-it-works" class="py-20 bg-gray-100">
102+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
103+
<div class="text-center mb-16">
104+
<h3 class="text-3xl font-bold text-gray-900 mb-4">使用方法</h3>
105+
<p class="text-lg text-gray-600">简单三步，开启高效的代码阅读体验</p>
106+
</div>
107+
108+
<div class="grid md:grid-cols-3 gap-8">
109+
<div class="text-center">
110+
<div class="bg-purple-600 text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mx-auto mb-4">
111+
1
112+
</div>
113+
<h4 class="text-xl font-semibold mb-3">安装扩展</h4>
114+
<p class="text-gray-600">Chrome Web Store/Microsoft Edge Addons</p>
115+
</div>
116+
117+
<div class="text-center">
118+
<div class="bg-purple-600 text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mx-auto mb-4">
119+
2
120+
</div>
121+
<h4 class="text-xl font-semibold mb-3">访问 GitHub</h4>
122+
<p class="text-gray-600">打开任何 GitHub 仓库页面，扩展会注入"阅读"按钮</p>
123+
</div>
124+
125+
<div class="text-center">
126+
<div class="bg-purple-600 text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mx-auto mb-4">
127+
3
128+
</div>
129+
<h4 class="text-xl font-semibold mb-3">一键分析</h4>
130+
<p class="text-gray-600">点击按钮选择想要的分析平台，即可跳转到对应页面</p>
131+
</div>
132+
</div>
133+
</div>
134+
</section>
135+
136+
<!-- Screenshot Section -->
137+
<section class="py-20 bg-gray-100">
138+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139+
<div class="text-center mb-16">
140+
<h3 class="text-3xl font-bold text-gray-900 mb-4">功能截图</h3>
141+
<p class="text-lg text-gray-600">实际使用界面展示</p>
142+
</div>
143+
144+
<div class="grid md:grid-cols-2 gap-8">
145+
<!-- 使用界面 -->
146+
<div class="bg-white rounded-xl card-shadow overflow-hidden">
147+
<img src="https://lh3.googleusercontent.com/9LFZobZwJ9EMSoovCQ3LPDumDSyRX8F3y_udaPXLWegJqsDlstKBD2DFVJqaP-tUr1jgob_qew8bqbRYZLDgqqj0_1Q=s1600-w1600-h1000"
148+
alt="使用界面"
149+
class="w-full h-64 object-cover">
150+
<div class="p-6">
151+
<h4 class="text-xl font-semibold mb-2">使用界面</h4>
152+
<p class="text-gray-600">在 GitHub 仓库页面自动显示"阅读"按钮，点击即可访问各种代码分析平台</p>
153+
</div>
154+
</div>
155+
156+
<!-- 常规设置 -->
157+
<div class="bg-white rounded-xl card-shadow overflow-hidden">
158+
<img src="https://lh3.googleusercontent.com/h8oRrvs5_ipcc6QPfn6CBfxXcwMh1rLJ8Kd8Ej18v-BFQi4yaILYLNnA6vTCpxJBzwjf0S0L-PzgC3LxCNiX4FU2pw=s1280-w1280-h800"
159+
alt="常规设置"
160+
class="w-full h-64 object-cover">
161+
<div class="p-6">
162+
<h4 class="text-xl font-semibold mb-2">常规设置</h4>
163+
<p class="text-gray-600">自定义默认打开方式、新标签页设置等基础配置选项</p>
164+
</div>
165+
</div>
166+
167+
<!-- 快捷键设置 -->
168+
<div class="bg-white rounded-xl card-shadow overflow-hidden">
169+
<img src="https://lh3.googleusercontent.com/WvkjFUy6mBG5mYIl3ho1RR31Pyzjvcg-rgtWUWxKB97Olt6TJJqKO6aggCAGRY6rtVS7loWptB-LPtHs8a0yPpy06Rg=s1280-w1280-h800"
170+
alt="快捷键设置"
171+
class="w-full h-64 object-cover">
172+
<div class="p-6">
173+
<h4 class="text-xl font-semibold mb-2">快捷键设置</h4>
174+
<p class="text-gray-600">为不同的代码分析平台设置快捷键，无需鼠标点击即可快速访问</p>
175+
</div>
176+
</div>
177+
178+
<!-- 站点管理 -->
179+
<div class="bg-white rounded-xl card-shadow overflow-hidden">
180+
<img src="https://lh3.googleusercontent.com/Zx3nJeqGIDlCizoTfcrQYUXeLy0gJv4TUxfQ9eRsLehW_9ydpHpVY7YzzNAqgm2aLlv-kmURXNOEkjoFV-Om0SBG4w=s1280-w1280-h800"
181+
alt="站点管理"
182+
class="w-full h-64 object-cover">
183+
<div class="p-6">
184+
<h4 class="text-xl font-semibold mb-2">站点管理</h4>
185+
<p class="text-gray-600">管理可用的代码分析和阅读站点，启用或禁用特定平台</p>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</section>
191+
192+
<!-- Installation Section -->
193+
<section id="install" class="py-20 bg-purple-50">
194+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
195+
<div class="text-center mb-16">
196+
<h3 class="text-3xl font-bold text-gray-900 mb-4">立即安装</h3>
197+
<p class="text-lg text-gray-600">选择适合你的浏览器，开始高效的代码阅读之旅</p>
198+
</div>
199+
200+
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
201+
<div class="bg-white p-8 rounded-xl card-shadow text-center">
202+
<div class="text-6xl mb-4">🌐</div>
203+
<h4 class="text-2xl font-semibold mb-4">Chrome 扩展</h4>
204+
<p class="text-gray-600 mb-6">适用于 Chrome 和基于 Chromium 的浏览器</p>
205+
<a href="https://chrome.google.com/webstore/detail/diemcoeopjkfebcjlppfabjncmjefelm"
206+
target="_blank"
207+
class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover-scale inline-block">
208+
安装 Chrome 扩展
209+
</a>
210+
</div>
211+
212+
<div class="bg-white p-8 rounded-xl card-shadow text-center">
213+
<div class="text-6xl mb-4">🔷</div>
214+
<h4 class="text-2xl font-semibold mb-4">Edge 扩展</h4>
215+
<p class="text-gray-600 mb-6">适用于 Microsoft Edge 浏览器</p>
216+
<a href="https://microsoftedge.microsoft.com/addons/detail/kchlpiplbhflmfclcjgkdkcbnplmlojl"
217+
target="_blank"
218+
class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover-scale inline-block">
219+
安装 Edge 扩展
220+
</a>
221+
</div>
222+
</div>
223+
</div>
224+
</section>
225+
226+
<!-- Footer -->
227+
<footer class="bg-gray-900 text-white py-12">
228+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
229+
<div class="grid md:grid-cols-3 gap-8">
230+
<div>
231+
<h5 class="text-lg font-semibold mb-4">AI Code View「爱码视」</h5>
232+
<p class="text-gray-400">让代码阅读变得简单高效，为开发者提供全方位的代码分析体验。</p>
233+
</div>
234+
235+
<div>
236+
<!-- Empty middle column to maintain layout structure -->
237+
</div>
238+
239+
<div>
240+
<h5 class="text-lg font-semibold mb-4">支持</h5>
241+
<p class="text-gray-400">如有问题或建议，欢迎通过 GitHub Issues 联系。</p>
242+
</div>
243+
</div>
244+
245+
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
246+
<p id="copyright-text">&copy; AI Code View. All rights reserved.</p>
247+
</div>
248+
</div>
249+
</footer>
250+
251+
<script>
252+
// Update copyright year dynamically
253+
document.addEventListener('DOMContentLoaded', function() {
254+
const currentYear = new Date().getFullYear();
255+
const copyrightElement = document.getElementById('copyright-text');
256+
copyrightElement.textContent = `© ${currentYear} AI Code View. All rights reserved.`;
257+
});
258+
259+
// Smooth scrolling for navigation links
260+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
261+
anchor.addEventListener('click', function (e) {
262+
e.preventDefault();
263+
const target = document.querySelector(this.getAttribute('href'));
264+
if (target) {
265+
target.scrollIntoView({
266+
behavior: 'smooth',
267+
block: 'start'
268+
});
269+
}
270+
});
271+
});
272+
</script>
273+
</body>
274+
</html>

0 commit comments

Comments
 (0)