-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
388 lines (377 loc) · 19.2 KB
/
index.html
File metadata and controls
388 lines (377 loc) · 19.2 KB
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI自制小程序集合 - 实用工具、教学演示与休闲游戏</title>
<meta name="description" content="AI自制小程序集合是一个开源项目，汇集了多种实用的HTML小程序工具、教学演示和休闲游戏，无需安装，打开即用。">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 添加网站图标 -->
<link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">
<a href="#hero">
<span class="logo-text">AI自制小程序集合</span>
</a>
</div>
<div class="nav-toggle" id="navToggle">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-menu" id="navMenu">
<li><a href="#about" class="nav-link">关于项目</a></li>
<li><a href="#tools" class="nav-link">实用工具</a></li>
<li><a href="#education" class="nav-link">教学演示</a></li>
<li><a href="#games" class="nav-link">休闲游戏</a></li>
<li><a href="#contact" class="nav-link">联系我们</a></li>
<li><a href="https://github.com/jsnjfz/AI-MiniProgram" class="nav-link github-link" target="_blank"><i class="fab fa-github"></i> GitHub</a></li>
</ul>
</div>
</nav>
<!-- 英雄区域 -->
<section id="hero" class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">AI自制小程序集合</h1>
<p class="hero-subtitle">实用工具、教学演示与休闲游戏</p>
<p class="hero-description">一个开源的HTML小程序集合，无需安装，打开即用</p>
<div class="hero-buttons">
<a href="#tools" class="btn btn-primary">浏览小程序</a>
<a href="https://github.com/jsnjfz/AI-MiniProgram" class="btn btn-secondary" target="_blank">查看源码</a>
</div>
</div>
<div class="hero-image">
<img src="images/hero-image.png" alt="AI自制小程序集合插图">
</div>
</div>
</section>
<!-- 关于项目 -->
<section id="about" class="about section">
<div class="container">
<h2 class="section-title">关于项目</h2>
<div class="about-content">
<div class="about-text">
<p>在人工智能快速发展的今天，我希望通过这个项目展示如何将AI技术与Web前端开发相结合，创造出实用、有趣且易于访问的小程序。</p>
<p>这个项目的初衷是：</p>
<ul>
<li><i class="fas fa-check-circle"></i> 为用户提供一系列开箱即用的在线工具</li>
<li><i class="fas fa-check-circle"></i> 通过互动演示帮助理解科学和教育概念</li>
<li><i class="fas fa-check-circle"></i> 提供轻量级休闲游戏，放松身心</li>
<li><i class="fas fa-check-circle"></i> 展示纯前端技术的强大潜力</li>
<li><i class="fas fa-check-circle"></i> 为开发者提供学习和参考的代码示例</li>
</ul>
</div>
<div class="about-features">
<div class="feature">
<div class="feature-icon">
<i class="fas fa-code"></i>
</div>
<h3>纯前端实现</h3>
<p>所有功能均使用HTML、CSS和JavaScript实现</p>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-server"></i>
</div>
<h3>无需后端</h3>
<p>无需服务器支持，本地运行或静态托管即可</p>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-feather-alt"></i>
</div>
<h3>轻量级</h3>
<p>每个小程序都是独立的单文件应用</p>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>响应式设计</h3>
<p>适配各种屏幕尺寸</p>
</div>
</div>
</div>
</div>
</section>
<!-- 实用工具 -->
<section id="tools" class="tools section">
<div class="container">
<h2 class="section-title">实用工具</h2>
<p class="section-description">一系列便捷的在线工具，满足您的日常需求</p>
<div class="cards">
<div class="card">
<div class="card-icon">
<i class="fas fa-file-excel"></i>
</div>
<h3 class="card-title">Excel 多合一文件合并工具</h3>
<p class="card-description">轻松合并多个Excel文件内容，提高工作效率</p>
<a href="工具/Excel 多合一文件合并工具/Excel 多合一文件合并工具.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-compress"></i>
</div>
<h3 class="card-title">图片批量压缩工具</h3>
<p class="card-description">批量压缩图片，减小文件体积，提升网站加载速度</p>
<a href="工具/图片批量压缩工具/图片批量压缩工具.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-code"></i>
</div>
<h3 class="card-title">JSON格式转换器</h3>
<p class="card-description">格式化和验证JSON数据，方便开发调试</p>
<a href="工具/json格式转换.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fab fa-markdown"></i>
</div>
<h3 class="card-title">Markdown预览器</h3>
<p class="card-description">实时预览Markdown文档效果，所见即所得</p>
<a href="工具/markdown预览器.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-qrcode"></i>
</div>
<h3 class="card-title">二维码生成器</h3>
<p class="card-description">生成自定义内容的二维码，支持多种格式</p>
<a href="工具/二维码生成器.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-crop"></i>
</div>
<h3 class="card-title">图片分割工具</h3>
<p class="card-description">将图片分割成多个部分，满足特殊需求</p>
<a href="工具/图片分割.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-tint"></i>
</div>
<h3 class="card-title">图片加水印工具</h3>
<p class="card-description">为图片添加自定义水印，保护知识产权</p>
<a href="工具/图片加水印工具.html" class="card-link" target="_blank">立即使用</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-calculator"></i>
</div>
<h3 class="card-title">小学数学自动出题器</h3>
<p class="card-description">自动生成小学数学练习题，辅助教学</p>
<a href="工具/小学数学自动出题器.html" class="card-link" target="_blank">立即使用</a>
</div>
</div>
</div>
</section>
<!-- 教学演示 -->
<section id="education" class="education section">
<div class="container">
<h2 class="section-title">教学演示</h2>
<p class="section-description">交互式科学教学演示，让学习更加生动有趣</p>
<div class="cards">
<div class="card">
<div class="card-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="card-title">光的折射和反射</h3>
<p class="card-description">交互式演示光的折射和反射原理，直观理解物理现象</p>
<a href="教学/光的折射和反射/光的折射与反射.html" class="card-link" target="_blank">开始学习</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-balance-scale"></i>
</div>
<h3 class="card-title">单摆</h3>
<p class="card-description">模拟单摆运动，展示物理规律，探索周期变化</p>
<a href="教学/单摆/单摆.html" class="card-link" target="_blank">开始学习</a>
</div>
</div>
</div>
</section>
<!-- 休闲游戏 -->
<section id="games" class="games section">
<div class="container">
<h2 class="section-title">休闲游戏</h2>
<p class="section-description">轻松有趣的休闲游戏，放松身心的好选择</p>
<div class="cards">
<div class="card">
<div class="card-icon">
<i class="fas fa-th"></i>
</div>
<h3 class="card-title">2048</h3>
<p class="card-description">经典数字益智游戏，挑战你的策略思维</p>
<a href="游戏/2048.html" class="card-link" target="_blank">开始游戏</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-chess-board"></i>
</div>
<h3 class="card-title">五子棋</h3>
<p class="card-description">经典策略棋盘游戏，考验你的布局能力</p>
<a href="游戏/五子棋.html" class="card-link" target="_blank">开始游戏</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-cubes"></i>
</div>
<h3 class="card-title">俄罗斯方块</h3>
<p class="card-description">经典方块消除游戏，挑战你的反应速度</p>
<a href="游戏/俄罗斯方块.html" class="card-link" target="_blank">开始游戏</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-language"></i>
</div>
<h3 class="card-title">成语消消乐</h3>
<p class="card-description">中文成语配对游戏，寓教于乐</p>
<a href="游戏/成语消消乐.html" class="card-link" target="_blank">开始游戏</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-clone"></i>
</div>
<h3 class="card-title">记忆翻牌</h3>
<p class="card-description">记忆力训练游戏，锻炼你的记忆能力</p>
<a href="游戏/记忆翻牌.html" class="card-link" target="_blank">开始游戏</a>
</div>
<div class="card">
<div class="card-icon">
<i class="fas fa-snake"></i>
</div>
<h3 class="card-title">贪吃蛇</h3>
<p class="card-description">经典休闲游戏，简单而有趣</p>
<a href="游戏/贪吃蛇.html" class="card-link" target="_blank">开始游戏</a>
</div>
</div>
</div>
</section>
<!-- 使用方法 -->
<section id="usage" class="usage section">
<div class="container">
<h2 class="section-title">使用方法</h2>
<div class="usage-content">
<div class="usage-steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>克隆或下载仓库</h3>
<div class="code-block">
<code>git clone https://github.com/jsnjfz/AI-MiniProgram.git</code>
<button class="copy-btn" data-clipboard-text="git clone https://github.com/jsnjfz/AI-MiniProgram.git">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>打开对应的HTML文件</h3>
<p>根据需要，打开相应目录下的HTML文件：</p>
<ul>
<li>工具类：打开<code>工具</code>目录下对应的HTML文件</li>
<li>教学演示：打开<code>教学</code>目录下对应的HTML文件</li>
<li>游戏：打开<code>游戏</code>目录下对应的HTML文件</li>
</ul>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>开始使用</h3>
<p>无需安装任何依赖，直接在浏览器中运行，即开即用！</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="contact section">
<div class="container">
<h2 class="section-title">联系我们</h2>
<p class="section-description">如有任何问题或建议，欢迎联系我们</p>
<div class="contact-methods">
<div class="contact-method">
<div class="contact-icon">
<i class="fab fa-github"></i>
</div>
<h3>GitHub Issues</h3>
<p>提交问题或建议</p>
<a href="https://github.com/jsnjfz/AI-MiniProgram/issues" class="btn btn-outline" target="_blank">提交问题</a>
</div>
<div class="contact-method">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<h3>电子邮件</h3>
<p>直接发送邮件联系我们</p>
<a href="mailto:jsnjfz@gmail.com" class="btn btn-outline">发送邮件</a>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<span class="logo-text">AI小程序集合</span>
<p>实用工具、教学演示与休闲游戏</p>
</div>
<div class="footer-links">
<div class="footer-links-column">
<h3>导航</h3>
<ul>
<li><a href="#about">关于项目</a></li>
<li><a href="#tools">实用工具</a></li>
<li><a href="#education">教学演示</a></li>
<li><a href="#games">休闲游戏</a></li>
</ul>
</div>
<div class="footer-links-column">
<h3>资源</h3>
<ul>
<li><a href="https://github.com/jsnjfz/AI-MiniProgram" target="_blank">GitHub仓库</a></li>
<li><a href="https://github.com/jsnjfz/AI-MiniProgram/issues" target="_blank">问题反馈</a></li>
<li><a href="#contribute">贡献指南</a></li>
<li><a href="#" target="_blank">许可证</a></li>
</ul>
</div>
<div class="footer-links-column">
<h3>联系我们</h3>
<ul>
<li><a href="mailto:jsnjfz@gmail.com">电子邮件</a></li>
<li><a href="https://github.com/jsnjfz" target="_blank">GitHub主页</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 AI小程序集合. 采用MIT许可证.</p>
<div class="social-links">
<a href="https://github.com/jsnjfz" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button id="backToTop" class="back-to-top" aria-label="回到顶部">
<i class="fas fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script src="js/main.js"></script>
<!-- 引入剪贴板功能 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</body>
</html>