Hugging Face's logo

Spaces:
chaojie
/
ai
Running

App Files Community
chaojie commited on
Commit
4f262f2
·
verified ·
1 Parent(s): 88cc47a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +766 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai
3
- emoji: 🐢
4
  colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,766 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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小创客 - 儿童AI动画创作课程</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ .course-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .progress-ring__circle {
23
+ transition: stroke-dashoffset 0.5s;
24
+ transform: rotate(-90deg);
25
+ transform-origin: 50% 50%;
26
+ }
27
+ .drawer {
28
+ transition: transform 0.3s ease-out;
29
+ }
30
+ .drawer-hidden {
31
+ transform: translateX(100%);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen font-sans">
36
+ <!-- 导航栏 -->
37
+ <nav class="bg-white shadow-md sticky top-0 z-50">
38
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i class="fas fa-robot text-3xl text-purple-600"></i>
41
+ <h1 class="text-2xl font-bold text-purple-800">AI小创客</h1>
42
+ </div>
43
+ <div class="hidden md:flex space-x-6">
44
+ <a href="#" class="text-purple-700 hover:text-purple-900 font-medium">首页</a>
45
+ <a href="#courses" class="text-gray-600 hover:text-purple-700 font-medium">课程</a>
46
+ <a href="#features" class="text-gray-600 hover:text-purple-700 font-medium">特色</a>
47
+ <a href="#testimonials" class="text-gray-600 hover:text-purple-700 font-medium">学员作品</a>
48
+ </div>
49
+ <button class="md:hidden text-gray-600" id="menu-toggle">
50
+ <i class="fas fa-bars text-2xl"></i>
51
+ </button>
52
+ <div class="hidden md:block">
53
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full font-medium transition duration-300">
54
+ 免费试学
55
+ </button>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- 移动菜单 -->
61
+ <div id="mobile-menu" class="hidden md:hidden fixed inset-0 bg-black bg-opacity-50 z-50">
62
+ <div class="bg-white w-4/5 h-full ml-auto p-6">
63
+ <div class="flex justify-between items-center mb-8">
64
+ <h2 class="text-xl font-bold text-purple-800">AI小创客</h2>
65
+ <button id="menu-close" class="text-gray-600">
66
+ <i class="fas fa-times text-2xl"></i>
67
+ </button>
68
+ </div>
69
+ <div class="flex flex-col space-y-4">
70
+ <a href="#" class="text-purple-700 hover:text-purple-900 font-medium py-2 border-b border-gray-100">首页</a>
71
+ <a href="#courses" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">课程</a>
72
+ <a href="#features" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">特色</a>
73
+ <a href="#testimonials" class="text-gray-600 hover:text-purple-700 font-medium py-2 border-b border-gray-100">学员作品</a>
74
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full font-medium transition duration-300 mt-4">
75
+ 免费试学
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- 英雄区域 -->
82
+ <section class="py-12 md:py-20 px-4">
83
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
84
+ <div class="md:w-1/2 mb-10 md:mb-0">
85
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6">
86
+ 用AI创作你的<br>
87
+ <span class="text-purple-600">第一部动画短片</span>
88
+ </h1>
89
+ <p class="text-lg text-gray-600 mb-8">
90
+ 专为8-14岁儿童设计的AI动画创作课程，从零开始学习AI绘画、动画制作和创意表达，让你的想象力飞起来！
91
+ </p>
92
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
93
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg">
94
+ 立即开始学习 <i class="fas fa-arrow-right ml-2"></i>
95
+ </button>
96
+ <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition duration-300">
97
+ <i class="fas fa-play-circle mr-2"></i> 观看介绍视频
98
+ </button>
99
+ </div>
100
+ </div>
101
+ <div class="md:w-1/2 relative">
102
+ <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
103
+ alt="儿童使用平板电脑创作"
104
+ class="rounded-2xl shadow-xl w-full max-w-lg mx-auto">
105
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg hidden md:block">
106
+ <div class="flex items-center">
107
+ <div class="relative w-12 h-12">
108
+ <svg class="w-full h-full" viewBox="0 0 36 36">
109
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
110
+ <circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="100 100" stroke-dashoffset="25" class="progress-ring__circle"></circle>
111
+ </svg>
112
+ <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-purple-600">75%</span>
113
+ </div>
114
+ <div class="ml-3">
115
+ <p class="text-xs text-gray-500">课程完成度</p>
116
+ <p class="text-sm font-medium">AI动画基础</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ <div class="absolute -top-6 -right-6 bg-yellow-100 p-3 rounded-full shadow-lg hidden md:block floating">
121
+ <i class="fas fa-lightbulb text-3xl text-yellow-500"></i>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- 课程特色 -->
128
+ <section id="features" class="py-16 bg-white">
129
+ <div class="container mx-auto px-4">
130
+ <div class="text-center mb-16">
131
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">为什么选择AI小创客?</h2>
132
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">我们的课程专为儿童设计，让AI技术变得简单有趣</p>
133
+ </div>
134
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
135
+ <div class="bg-blue-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
136
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
137
+ <i class="fas fa-brain text-3xl text-blue-600"></i>
138
+ </div>
139
+ <h3 class="text-xl font-bold text-gray-800 mb-3">AI轻松学</h3>
140
+ <p class="text-gray-600">将复杂的AI技术转化为简单易懂的模块，通过拖拽和可视化界面让孩子轻松掌握AI创作。</p>
141
+ </div>
142
+ <div class="bg-purple-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
143
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
144
+ <i class="fas fa-layer-group text-3xl text-purple-600"></i>
145
+ </div>
146
+ <h3 class="text-xl font-bold text-gray-800 mb-3">渐进式学习</h3>
147
+ <p class="text-gray-600">从单幅AI绘画开始，逐步学习动画原理、角色设计，最终完成完整的动画短片创作。</p>
148
+ </div>
149
+ <div class="bg-pink-50 p-8 rounded-2xl transition duration-300 hover:shadow-lg">
150
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
151
+ <i class="fas fa-child text-3xl text-pink-600"></i>
152
+ </div>
153
+ <h3 class="text-xl font-bold text-gray-800 mb-3">安全环境</h3>
154
+ <p class="text-gray-600">专为儿童设计的AI工具，过滤不适当内容，提供安全、健康的创作环境。</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- 课程体系 -->
161
+ <section id="courses" class="py-16 bg-gradient-to-b from-white to-blue-50">
162
+ <div class="container mx-auto px-4">
163
+ <div class="text-center mb-16">
164
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">动画创作学习路径</h2>
165
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">从零开始，逐步掌握AI动画创作全流程</p>
166
+ </div>
167
+
168
+ <div class="max-w-4xl mx-auto">
169
+ <!-- 课程进度条 -->
170
+ <div class="relative mb-12">
171
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded-full bg-gray-200">
172
+ <div style="width:20%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"></div>
173
+ </div>
174
+ <div class="flex justify-between text-sm text-gray-600">
175
+ <span>第一阶段</span>
176
+ <span>第二阶段</span>
177
+ <span>第三阶段</span>
178
+ <span>第四阶段</span>
179
+ <span>第五阶段</span>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- 课程卡片 -->
184
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
185
+ <div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(1)">
186
+ <div class="flex items-center mb-4">
187
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
188
+ <span class="text-blue-600 font-bold">01</span>
189
+ </div>
190
+ <h3 class="text-lg font-bold text-gray-800">AI绘画初体验</h3>
191
+ </div>
192
+ <p class="text-gray-600 mb-4">学习使用AI工具生成第一幅绘画作品，了解基本操作和关键词描述技巧。</p>
193
+ <div class="flex justify-between items-center">
194
+ <div class="flex items-center">
195
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
196
+ <span class="text-sm text-gray-600">4.8 (120评价)</span>
197
+ </div>
198
+ <span class="text-sm px-3 py-1 bg-green-100 text-green-800 rounded-full">入门</span>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(2)">
203
+ <div class="flex items-center mb-4">
204
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
205
+ <span class="text-purple-600 font-bold">02</span>
206
+ </div>
207
+ <h3 class="text-lg font-bold text-gray-800">角色设计与生成</h3>
208
+ </div>
209
+ <p class="text-gray-600 mb-4">学习如何设计并生成动画角色，包括主角、配角和场景设计。</p>
210
+ <div class="flex justify-between items-center">
211
+ <div class="flex items-center">
212
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
213
+ <span class="text-sm text-gray-600">4.7 (98评价)</span>
214
+ </div>
215
+ <span class="text-sm px-3 py-1 bg-blue-100 text-blue-800 rounded-full">基础</span>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(3)">
220
+ <div class="flex items-center mb-4">
221
+ <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mr-4">
222
+ <span class="text-pink-600 font-bold">03</span>
223
+ </div>
224
+ <h3 class="text-lg font-bold text-gray-800">动画原理与帧设计</h3>
225
+ </div>
226
+ <p class="text-gray-600 mb-4">了解动画基本原理，学习如何设计关键帧和过渡帧。</p>
227
+ <div class="flex justify-between items-center">
228
+ <div class="flex items-center">
229
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
230
+ <span class="text-sm text-gray-600">4.9 (76评价)</span>
231
+ </div>
232
+ <span class="text-sm px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full">中级</span>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="course-card bg-white p-6 rounded-xl shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetail(4)">
237
+ <div class="flex items-center mb-4">
238
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
239
+ <span class="text-green-600 font-bold">04</span>
240
+ </div>
241
+ <h3 class="text-lg font-bold text-gray-800">完整短片创作</h3>
242
+ </div>
243
+ <p class="text-gray-600 mb-4">整合所学知识，创作一个完整的1-2分钟动画短片，包括故事板设计和配音。</p>
244
+ <div class="flex justify-between items-center">
245
+ <div class="flex items-center">
246
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
247
+ <span class="text-sm text-gray-600">5.0 (52评价)</span>
248
+ </div>
249
+ <span class="text-sm px-3 py-1 bg-red-100 text-red-800 rounded-full">高级</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="text-center mt-10">
255
+ <button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-full font-medium transition duration-300">
256
+ 查看全部课程 <i class="fas fa-chevron-down ml-2"></i>
257
+ </button>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- 学员作品展示 -->
264
+ <section id="testimonials" class="py-16 bg-white">
265
+ <div class="container mx-auto px-4">
266
+ <div class="text-center mb-16">
267
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">小学员们的精彩作品</h2>
268
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">看看其他小朋友用AI创作的动画短片</p>
269
+ </div>
270
+
271
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
272
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
273
+ <div class="relative pt-[56.25%] overflow-hidden">
274
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
275
+ alt="学员作品1"
276
+ class="absolute inset-0 w-full h-full object-cover">
277
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
278
+ <button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
279
+ <i class="fas fa-play text-purple-600 text-xl"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ <div class="p-6">
284
+ <h3 class="text-lg font-bold text-gray-800 mb-2">太空冒险记</h3>
285
+ <p class="text-gray-600 text-sm mb-4">10岁的小明用AI创作的科幻动画，讲述了一只太空猫的冒险故事。</p>
286
+ <div class="flex items-center">
287
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
288
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
289
+ alt="学员头像"
290
+ class="w-full h-full object-cover">
291
+ </div>
292
+ <div>
293
+ <p class="text-sm font-medium text-gray-800">小明</p>
294
+ <p class="text-xs text-gray-500">10岁 | 学习3个月</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
301
+ <div class="relative pt-[56.25%] overflow-hidden">
302
+ <img src="https://images.unsplash.com/photo-1638913974023-cef988e81629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
303
+ alt="学员作品2"
304
+ class="absolute inset-0 w-full h-full object-cover">
305
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
306
+ <button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
307
+ <i class="fas fa-play text-purple-600 text-xl"></i>
308
+ </button>
309
+ </div>
310
+ </div>
311
+ <div class="p-6">
312
+ <h3 class="text-lg font-bold text-gray-800 mb-2">森林音乐会</h3>
313
+ <p class="text-gray-600 text-sm mb-4">9岁的莉莉创作的童话动画，展现了森林动物们举办音乐会的欢乐场景。</p>
314
+ <div class="flex items-center">
315
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
316
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
317
+ alt="学员头像"
318
+ class="w-full h-full object-cover">
319
+ </div>
320
+ <div>
321
+ <p class="text-sm font-medium text-gray-800">莉莉</p>
322
+ <p class="text-xs text-gray-500">9岁 | 学习2个月</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg">
329
+ <div class="relative pt-[56.25%] overflow-hidden">
330
+ <img src="https://images.unsplash.com/photo-1635070041053-8d62c9be5ecc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
331
+ alt="学员作品3"
332
+ class="absolute inset-0 w-full h-full object-cover">
333
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
334
+ <button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition duration-300">
335
+ <i class="fas fa-play text-purple-600 text-xl"></i>
336
+ </button>
337
+ </div>
338
+ </div>
339
+ <div class="p-6">
340
+ <h3 class="text-lg font-bold text-gray-800 mb-2">机器人足球赛</h3>
341
+ <p class="text-gray-600 text-sm mb-4">11岁的小强创作的科幻体育动画，描绘了未来机器人足球比赛的精彩场面。</p>
342
+ <div class="flex items-center">
343
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
344
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
345
+ alt="学员头像"
346
+ class="w-full h-full object-cover">
347
+ </div>
348
+ <div>
349
+ <p class="text-sm font-medium text-gray-800">小强</p>
350
+ <p class="text-xs text-gray-500">11岁 | 学习4个月</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="text-center mt-12">
358
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-lg inline-flex items-center">
359
+ <i class="fas fa-photo-film mr-2"></i> 查看更多作品
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- 家长评价 -->
366
+ <section class="py-16 bg-blue-50">
367
+ <div class="container mx-auto px-4">
368
+ <div class="text-center mb-12">
369
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">家长怎么说</h2>
370
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">听听家长们对AI小创客课程的评价</p>
371
+ </div>
372
+
373
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
374
+ <div class="bg-white p-8 rounded-xl shadow-md">
375
+ <div class="flex items-center mb-4">
376
+ <i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
377
+ <div class="flex">
378
+ <i class="fas fa-star text-yellow-400"></i>
379
+ <i class="fas fa-star text-yellow-400"></i>
380
+ <i class="fas fa-star text-yellow-400"></i>
381
+ <i class="fas fa-star text-yellow-400"></i>
382
+ <i class="fas fa-star text-yellow-400"></i>
383
+ </div>
384
+ </div>
385
+ <p class="text-gray-600 mb-6">我儿子以前对绘画没什么兴趣，但通过这个课程，他爱上了用AI创作。现在他每周都会主动完成课程任务，还经常给我们展示他的新作品。</p>
386
+ <div class="flex items-center">
387
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
388
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
389
+ alt="家长头像"
390
+ class="w-full h-full object-cover">
391
+ </div>
392
+ <div>
393
+ <p class="font-medium text-gray-800">李妈妈</p>
394
+ <p class="text-sm text-gray-500">10岁男孩家长</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="bg-white p-8 rounded-xl shadow-md">
400
+ <div class="flex items-center mb-4">
401
+ <i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
402
+ <div class="flex">
403
+ <i class="fas fa-star text-yellow-400"></i>
404
+ <i class="fas fa-star text-yellow-400"></i>
405
+ <i class="fas fa-star text-yellow-400"></i>
406
+ <i class="fas fa-star text-yellow-400"></i>
407
+ <i class="fas fa-star text-yellow-400"></i>
408
+ </div>
409
+ </div>
410
+ <p class="text-gray-600 mb-6">课程设计非常符合孩子的认知水平，老师讲解生动有趣。我女儿不仅学会了AI工具的使用，还培养了讲故事的能力，这对她的综合发展很有帮助。</p>
411
+ <div class="flex items-center">
412
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
413
+ <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
414
+ alt="家长头像"
415
+ class="w-full h-full object-cover">
416
+ </div>
417
+ <div>
418
+ <p class="font-medium text-gray-800">张爸爸</p>
419
+ <p class="text-sm text-gray-500">9岁女孩家长</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="bg-white p-8 rounded-xl shadow-md">
425
+ <div class="flex items-center mb-4">
426
+ <i class="fas fa-quote-left text-2xl text-purple-200 mr-2"></i>
427
+ <div class="flex">
428
+ <i class="fas fa-star text-yellow-400"></i>
429
+ <i class="fas fa-star text-yellow-400"></i>
430
+ <i class="fas fa-star text-yellow-400"></i>
431
+ <i class="fas fa-star text-yellow-400"></i>
432
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
433
+ </div>
434
+ </div>
435
+ <p class="text-gray-600 mb-6">作为家长，我最看重的是课程的安全性。AI小创客提供了过滤后的AI工具，让我不用担心孩子接触到不适当的内容。同时课程内容也很有教育意义。</p>
436
+ <div class="flex items-center">
437
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
438
+ <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
439
+ alt="家长头像"
440
+ class="w-full h-full object-cover">
441
+ </div>
442
+ <div>
443
+ <p class="font-medium text-gray-800">王妈妈</p>
444
+ <p class="text-sm text-gray-500">11岁男孩家长</p>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- CTA区域 -->
453
+ <section class="py-16 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
454
+ <div class="container mx-auto px-4 text-center">
455
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好开启孩子的AI创作之旅了吗?</h2>
456
+ <p class="text-xl mb-8 max-w-2xl mx-auto">现在报名即可获得免费试学课程和AI绘画工具包</p>
457
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
458
+ <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition duration-300 shadow-lg">
459
+ 立即免费试学 <i class="fas fa-arrow-right ml-2"></i>
460
+ </button>
461
+ <button class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-full font-bold transition duration-300">
462
+ <i class="fas fa-phone-alt mr-2"></i> 咨询课程详情
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </section>
467
+
468
+ <!-- 页脚 -->
469
+ <footer class="bg-gray-900 text-white py-12">
470
+ <div class="container mx-auto px-4">
471
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
472
+ <div>
473
+ <div class="flex items-center space-x-2 mb-6">
474
+ <i class="fas fa-robot text-3xl text-purple-400"></i>
475
+ <h3 class="text-2xl font-bold">AI小创客</h3>
476
+ </div>
477
+ <p class="text-gray-400 mb-6">专为8-14岁儿童设计的AI动画创作学习平台，让每个孩子都能成为数字时代的小小创作者。</p>
478
+ <div class="flex space-x-4">
479
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
480
+ <i class="fab fa-weixin text-xl"></i>
481
+ </a>
482
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
483
+ <i class="fab fa-weibo text-xl"></i>
484
+ </a>
485
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
486
+ <i class="fab fa-tiktok text-xl"></i>
487
+ </a>
488
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
489
+ <i class="fab fa-youtube text-xl"></i>
490
+ </a>
491
+ </div>
492
+ </div>
493
+
494
+ <div>
495
+ <h4 class="text-lg font-bold mb-6">课程体系</h4>
496
+ <ul class="space-y-3">
497
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">AI绘画基础</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">角色设计</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">动画原理</a></li>
500
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">短片创作</a></li>
501
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">高级特效</a></li>
502
+ </ul>
503
+ </div>
504
+
505
+ <div>
506
+ <h4 class="text-lg font-bold mb-6">关于我们</h4>
507
+ <ul class="space-y-3">
508
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">团队介绍</a></li>
509
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">教学理念</a></li>
510
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">加入我们</a></li>
511
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">媒体报道</a></li>
512
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">合作伙伴</a></li>
513
+ </ul>
514
+ </div>
515
+
516
+ <div>
517
+ <h4 class="text-lg font-bold mb-6">联系我们</h4>
518
+ <ul class="space-y-3">
519
+ <li class="flex items-start">
520
+ <i class="fas fa-map-marker-alt text-purple-400 mt-1 mr-3"></i>
521
+ <span class="text-gray-400">北京市海淀区中关村科技园</span>
522
+ </li>
523
+ <li class="flex items-center">
524
+ <i class="fas fa-phone-alt text-purple-400 mr-3"></i>
525
+ <span class="text-gray-400">400-123-4567</span>
526
+ </li>
527
+ <li class="flex items-center">
528
+ <i class="fas fa-envelope text-purple-400 mr-3"></i>
529
+ <span class="text-gray-400">hello@aikidmaker.com</span>
530
+ </li>
531
+ <li class="flex items-center">
532
+ <i class="fas fa-clock text-purple-400 mr-3"></i>
533
+ <span class="text-gray-400">周一至周五 9:00-18:00</span>
534
+ </li>
535
+ </ul>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
540
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 AI小创客 版权所有</p>
541
+ <div class="flex space-x-6">
542
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">隐私政策</a>
543
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">服务条款</a>
544
+ <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">儿童保护政策</a>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </footer>
549
+
550
+ <!-- 课程详情抽屉 -->
551
+ <div id="course-drawer" class="drawer fixed inset-y-0 right-0 w-full md:w-1/2 lg:w-1/3 bg-white shadow-xl z-50 overflow-y-auto drawer-hidden">
552
+ <div class="p-6">
553
+ <div class="flex justify-between items-center mb-6">
554
+ <h3 class="text-2xl font-bold text-gray-800" id="course-title">课程标题</h3>
555
+ <button id="drawer-close" class="text-gray-500 hover:text-gray-700">
556
+ <i class="fas fa-times text-xl"></i>
557
+ </button>
558
+ </div>
559
+
560
+ <div class="mb-6">
561
+ <img id="course-image" src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
562
+ alt="课程封面"
563
+ class="w-full h-48 md:h-56 object-cover rounded-lg">
564
+ </div>
565
+
566
+ <div class="flex items-center mb-6">
567
+ <div class="flex items-center mr-6">
568
+ <i class="fas fa-star text-yellow-400 mr-2"></i>
569
+ <span class="text-gray-700" id="course-rating">4.8 (120评价)</span>
570
+ </div>
571
+ <div class="flex items-center">
572
+ <i class="fas fa-user-graduate text-purple-500 mr-2"></i>
573
+ <span class="text-gray-700" id="course-students">500+学员</span>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="mb-6">
578
+ <h4 class="text-lg font-bold text-gray-800 mb-3">课程简介</h4>
579
+ <p class="text-gray-600" id="course-description">这里是课程详细描述内容，介绍课程的主要内容和学习目标。这个课程适合8-12岁儿童学习，通过生动有趣的方式教授AI绘画基础知识。</p>
580
+ </div>
581
+
582
+ <div class="mb-6">
583
+ <h4 class="text-lg font-bold text-gray-800 mb-3">你将学到</h4>
584
+ <ul class="space-y-2" id="course-learn">
585
+ <li class="flex items-start">
586
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
587
+ <span class="text-gray-600">AI绘画工具的基本操作</span>
588
+ </li>
589
+ <li class="flex items-start">
590
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
591
+ <span class="text-gray-600">关键词描述技巧</span>
592
+ </li>
593
+ <li class="flex items-start">
594
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
595
+ <span class="text-gray-600">色彩和构图基础知识</span>
596
+ </li>
597
+ </ul>
598
+ </div>
599
+
600
+ <div class="mb-6">
601
+ <h4 class="text-lg font-bold text-gray-800 mb-3">课程难度</h4>
602
+ <span id="course-level" class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">入门</span>
603
+ </div>
604
+
605
+ <div class="mb-6">
606
+ <h4 class="text-lg font-bold text-gray-800 mb-3">课程时长</h4>
607
+ <div class="flex items-center">
608
+ <i class="fas fa-clock text-purple-500 mr-2"></i>
609
+ <span class="text-gray-600" id="course-duration">4周 | 每周2节课</span>
610
+ </div>
611
+ </div>
612
+
613
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition duration-300">
614
+ 立即报名 <i class="fas fa-arrow-right ml-2"></i>
615
+ </button>
616
+ </div>
617
+ </div>
618
+
619
+ <script>
620
+ // 移动菜单切换
621
+ const menuToggle = document.getElementById('menu-toggle');
622
+ const menuClose = document.getElementById('menu-close');
623
+ const mobileMenu = document.getElementById('mobile-menu');
624
+
625
+ menuToggle.addEventListener('click', () => {
626
+ mobileMenu.classList.remove('hidden');
627
+ });
628
+
629
+ menuClose.addEventListener('click', () => {
630
+ mobileMenu.classList.add('hidden');
631
+ });
632
+
633
+ // 课程详情抽屉
634
+ const drawer = document.getElementById('course-drawer');
635
+ const drawerClose = document.getElementById('drawer-close');
636
+
637
+ function showCourseDetail(courseId) {
638
+ // 根据courseId设置不同的课程内容
639
+ let courseData = {};
640
+
641
+ switch(courseId) {
642
+ case 1:
643
+ courseData = {
644
+ title: "AI绘画初体验",
645
+ image: "https://images.unsplash.com/photo-1638913662415-7a2d4c5f5396?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
646
+ rating: "4.8 (120评价)",
647
+ students: "500+学员",
648
+ description: "在这个入门课程中，孩子们将学习如何使用AI工具生成他们的第一幅绘画作品。课程从最基本的操作开始，逐步引导孩子掌握关键词描述技巧，让他们能够表达自己的创意并看到AI如何将其转化为视觉艺术作品。",
649
+ learn: [
650
+ "AI绘画工具的基本操作",
651
+ "关键词描述技巧",
652
+ "色彩和构图基础知识",
653
+ "如何调整和优化AI生成结果"
654
+ ],
655
+ level: "入门",
656
+ duration: "4周 | 每周2节课"
657
+ };
658
+ break;
659
+ case 2:
660
+ courseData = {
661
+ title: "角色设计与生成",
662
+ image: "https://images.unsplash.com/photo-1638913974023-cef988e81629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
663
+ rating: "4.7 (98评价)",
664
+ students: "420+学员",
665
+ description: "这个课程专注于动画角色的设计与生成。孩子们将学习如何设计独特的角色形象，包括主角、配角和反派角色。课程还会教授如何保持角色在不同场景中的一致性，这是制作动画短片的基础技能。",
666
+ learn: [
667
+ "角色设计的基本原则",
668
+ "如何描述角色特征让AI理解",
669
+ "保持角色一致性的技巧",
670
+ "场景设计与角色搭配"
671
+ ],
672
+ level: "基础",
673
+ duration: "6周 | 每周2节课"
674
+ };
675
+ break;
676
+ case 3:
677
+ courseData = {
678
+ title: "动画原理与帧设计",
679
+ image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
680
+ rating: "4.9 (76评价)",
681
+ students: "350+学员",
682
+ description: "在这个中级课程中，孩子们将学习动画的基本原理，包括运动规律、时间控制和帧设计。课程会教授如何设计关键帧和过渡帧，使用AI工具生成连贯的动画序列，为最终的短片创作打下坚实基础。",
683
+ learn: [
684
+ "动画12项基本原则",
685
+ "关键帧与过渡帧设计",
686
+ "动作流畅性技巧",
687
+ "简单的表情和口型动画"
688
+ ],
689
+ level: "中级",
690
+ duration: "8周 | 每周2节课"
691
+ };
692
+ break;
693
+ case 4:
694
+ courseData = {
695
+ title: "完整短片创作",
696
+ image: "https://images.unsplash.com/photo-1635070041053-8d62c9be5ecc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
697
+ rating: "5.0 (52评价)",
698
+ students: "280+学员",
699
+ description: "这是我们的高级课程，孩子们将整合之前学到的所有技能，创作一个完整的1-2分钟动画短片。课程包括故事板设计、分镜头脚本、AI动画生成、简单特效添加和配音指导，最终每个孩子都能完成属于自己的动画作品。",
700
+ learn: [
701
+ "故事板设计与分镜头脚本",
702
+ "完整动画序列生成",
703
+ "简单的特效添加",
704
+ "音效与配音技巧",
705
+ "最终作品导出与分享"
706
+ ],
707
+ level: "高级",
708
+ duration: "10周 | 每周2节课"
709
+ };
710
+ break;
711
+ }
712
+
713
+ // 更新抽屉内容
714
+ document.getElementById('course-title').textContent = courseData.title;
715
+ document.getElementById('course-image').src = courseData.image;
716
+ document.getElementById('course-rating').textContent = courseData.rating;
717
+ document.getElementById('course-students').textContent = courseData.students;
718
+ document.getElementById('course-description').textContent = courseData.description;
719
+
720
+ const learnList = document.getElementById('course-learn');
721
+ learnList.innerHTML = '';
722
+ courseData.learn.forEach(item => {
723
+ const li = document.createElement('li');
724
+ li.className = 'flex items-start';
725
+ li.innerHTML = `
726
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
727
+ <span class="text-gray-600">${item}</span>
728
+ `;
729
+ learnList.appendChild(li);
730
+ });
731
+
732
+ const levelSpan = document.getElementById('course-level');
733
+ levelSpan.textContent = courseData.level;
734
+ // 根据难度设置不同颜色
735
+ if(courseData.level === '入门') {
736
+ levelSpan.className = 'px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm';
737
+ } else if(courseData.level === '基础') {
738
+ levelSpan.className = 'px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm';
739
+ } else if(courseData.level === '中级') {
740
+ levelSpan.className = 'px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm';
741
+ } else {
742
+ levelSpan.className = 'px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm';
743
+ }
744
+
745
+ document.getElementById('course-duration').textContent = courseData.duration;
746
+
747
+ // 显示抽屉
748
+ drawer.classList.remove('drawer-hidden');
749
+ document.body.style.overflow = 'hidden';
750
+ }
751
+
752
+ drawerClose.addEventListener('click', () => {
753
+ drawer.classList.add('drawer-hidden');
754
+ document.body.style.overflow = 'auto';
755
+ });
756
+
757
+ // 点击抽屉外部关闭抽屉
758
+ window.addEventListener('click', (e) => {
759
+ if (e.target === drawer) {
760
+ drawer.classList.add('drawer-hidden');
761
+ document.body.style.overflow = 'auto';
762
+ }
763
+ });
764
+ </script>
765
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chaojie/ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
+ </html>