Hugging Face's logo

Spaces:
ashahs
/
acg-website
Running

App Files Community
ashahs commited on
Commit
8b42ed0
·
verified ·
1 Parent(s): abcde12

网站设计（正式版） （注）acg的传统与新晋区别[网站多方面差异化包容以及分流需注意事项]（满足不同需求，互不干扰）·传统：男性视角为主，多以女性角色为主角，并且相当一些专为已经创造好的角色（固定），二创通常不改变性格，并且80%为正常性取向·新晋：女性别视角互相融合，多以个人人设、约稿、定制角色、二创为主（性别相当一部分是相反于作者的），并且相当一部分为二创角色（固定角色的改变），二创有一部分会改变性格，并且相当一部分喜欢对多个人物进行“关系化行为（例如磕cp） 1.视频区（这里都为大分类） • （传统acg（传统acg视频专区（传统二游（尽量避免米家）、老二游、术口力、鬼畜等传统acg文化） • 新晋acg视频专区（现充着、磕cp、约稿、定制） • 作画视频专区（过程/作画交流） • ai视频专区（如题，只能为12+内容） 2.作画区 （如题，只能为12+内容）1.传统acg作画（非稿件）、定制（可通过网站交易系统匹配相应画师）2.新晋acg作画（非稿件）、定制（定制稿件、二创、oc）3.艺术作画 三、帖子区 • 动态区[帖子形式]（生活）日常分享 美食探店 生活测评线下活动（赛事、音乐节、大型展会、车展）社交聚会（友好社交帖以及各类漫展甚至个人聚会，对网友的邀请，甚至可以线上办展） • 辩论区[文章、帖子、网站形式]（哲学） 书籍探讨（段落、文学学习、讨论）帖子讨论（时事、热点、观点、知识的相关讨论）知识探索（发布知识性文章，可以讨论）（注：网站形式为引用他人网站、邀请投票等等） 可以和和志探讨。但要分清楚什么属生活分享及聊天 栏目：社交平台及社区 4.交易区（交易平台形式） • 线下- 网络- cos漫具- 作品- 背靠定制等线下或平台交易 • 个人定制手办、定制电子产品、定制手工艺产品等线下或平台交易 • 化妆师、人像摄影、头发梳理、cos教学线下定制预约，自行协商办理[最好做到一条龙] 3d打印 • 电子店：食品定制交易，个人制作那种，相当于个人私房菜，送外卖形式2. 线上 • 电商、oc定制 • 小说定制 交易 • 交易 • 工厂交易 五、放松区[播放软件美学软件形式] • 五、放松区[播放软件美学软件形式]沉浮审美提升（美学素养欣赏帖子、视频，最好带声音） • 沉浮电台（定制音乐，可有用户个人定制电台） • 沉浮电台（定制音乐，可有用户个人定制电台） • 气子艺术欣赏（游戏、 六、资源区硬件测评 硬件教程（装机） 硬件日报（可引用） 各类网站整理 软件整理 • 软件整理各类物品使用教学（可帮工厂定制某个产品说明书）（他人资源整理，视频整理）- 七、互动区 七、互动区 • 小插件小软件 模拟恐怖生成、互动 • 模拟恐怖生成、互动 • 整直互动 • 小游戏 互动视频 • 八、工具区- 机3d欣赏（建模形式，完全模块化，自己配电脑）- 各类艺术3d辅助建模- 画画、建模工具。用中文 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +684 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Acg Website
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: purple
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: acg-website
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,684 @@
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>次元交汇 - 传统与新晋ACG文化平台</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e45e2 0%, #89d4cf 100%);
12
+ }
13
+ .section-divider {
14
+ height: 50px;
15
+ background: linear-gradient(135deg, #6e45e2 0%, #89d4cf 100%);
16
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
17
+ }
18
+ .card-hover:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
21
+ }
22
+ .tab-active {
23
+ border-bottom: 3px solid #6e45e2;
24
+ color: #6e45e2;
25
+ font-weight: 600;
26
+ }
27
+ .custom-scrollbar::-webkit-scrollbar {
28
+ width: 6px;
29
+ height: 6px;
30
+ }
31
+ .custom-scrollbar::-webkit-scrollbar-thumb {
32
+ background-color: rgba(110, 69, 226, 0.5);
33
+ border-radius: 3px;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50 font-sans">
38
+ <!-- 导航栏 -->
39
+ <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50">
40
+ <div class="container mx-auto px-4 py-3">
41
+ <div class="flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i class="fas fa-ghost text-2xl"></i>
44
+ <span class="text-xl font-bold">次元交汇</span>
45
+ </div>
46
+ <div class="hidden md:flex space-x-6">
47
+ <a href="#video" class="hover:text-gray-200 transition">视频区</a>
48
+ <a href="#art" class="hover:text-gray-200 transition">作画区</a>
49
+ <a href="#forum" class="hover:text-gray-200 transition">帖子区</a>
50
+ <a href="#market" class="hover:text-gray-200 transition">交易区</a>
51
+ <a href="#relax" class="hover:text-gray-200 transition">放松区</a>
52
+ </div>
53
+ <div class="flex items-center space-x-4">
54
+ <button class="bg-white text-purple-600 px-4 py-1 rounded-full font-medium hover:bg-purple-50 transition">
55
+ 登录/注册
56
+ </button>
57
+ <button class="md:hidden text-white">
58
+ <i class="fas fa-bars text-xl"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- 英雄区域 -->
66
+ <header class="gradient-bg text-white py-16">
67
+ <div class="container mx-auto px-4 text-center">
68
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">传统与新晋ACG文化的交汇点</h1>
69
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
70
+ 一个尊重传统二次元文化，同时包容新兴创作形式的综合性平台
71
+ </p>
72
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
73
+ <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-50 transition">
74
+ 开始探索 <i class="fas fa-arrow-right ml-2"></i>
75
+ </button>
76
+ <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition">
77
+ 了解更多
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <!-- 视频区 -->
84
+ <section id="video" class="py-16 bg-white">
85
+ <div class="container mx-auto px-4">
86
+ <h2 class="text-3xl font-bold text-center mb-12">视频专区</h2>
87
+
88
+ <div class="flex border-b mb-8 overflow-x-auto custom-scrollbar">
89
+ <button class="px-6 py-3 tab-active">传统ACG</button>
90
+ <button class="px-6 py-3">新晋ACG</button>
91
+ <button class="px-6 py-3">作画交流</button>
92
+ <button class="px-6 py-3">AI创作</button>
93
+ </div>
94
+
95
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
96
+ <!-- 传统ACG视频卡片 -->
97
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
98
+ <div class="relative pt-[56.25%] bg-gray-200">
99
+ <img src="https://via.placeholder.com/400x225" alt="传统ACG视频" class="absolute top-0 left-0 w-full h-full object-cover">
100
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
101
+ 12:34
102
+ </div>
103
+ </div>
104
+ <div class="p-4">
105
+ <h3 class="font-bold mb-2">经典术力口作品回顾</h3>
106
+ <div class="flex items-center text-sm text-gray-600">
107
+ <span>传统ACG</span>
108
+ <span class="mx-2">•</span>
109
+ <span>12.3万播放</span>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- 新晋ACG视频卡片 -->
115
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
116
+ <div class="relative pt-[56.25%] bg-gray-200">
117
+ <img src="https://via.placeholder.com/400x225" alt="新晋ACG视频" class="absolute top-0 left-0 w-full h-full object-cover">
118
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
119
+ 08:45
120
+ </div>
121
+ </div>
122
+ <div class="p-4">
123
+ <h3 class="font-bold mb-2">OC角色创作过程分享</h3>
124
+ <div class="flex items-center text-sm text-gray-600">
125
+ <span>新晋ACG</span>
126
+ <span class="mx-2">•</span>
127
+ <span>8.7万播放</span>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- 作画交流视频卡片 -->
133
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
134
+ <div class="relative pt-[56.25%] bg-gray-200">
135
+ <img src="https://via.placeholder.com/400x225" alt="作画交流视频" class="absolute top-0 left-0 w-full h-full object-cover">
136
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
137
+ 15:22
138
+ </div>
139
+ </div>
140
+ <div class="p-4">
141
+ <h3 class="font-bold mb-2">角色设计技巧分享</h3>
142
+ <div class="flex items-center text-sm text-gray-600">
143
+ <span>作画交流</span>
144
+ <span class="mx-2">•</span>
145
+ <span>5.2万播放</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- AI创作视频卡片 -->
151
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
152
+ <div class="relative pt-[56.25%] bg-gray-200">
153
+ <img src="https://via.placeholder.com/400x225" alt="AI创作视频" class="absolute top-0 left-0 w-full h-full object-cover">
154
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
155
+ 10:18
156
+ </div>
157
+ </div>
158
+ <div class="p-4">
159
+ <h3 class="font-bold mb-2">AI辅助动画创作教程</h3>
160
+ <div class="flex items-center text-sm text-gray-600">
161
+ <span>AI创作</span>
162
+ <span class="mx-2">•</span>
163
+ <span>9.1万播放</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="text-center mt-10">
170
+ <button class="border-2 border-purple-600 text-purple-600 px-6 py-2 rounded-full font-medium hover:bg-purple-50 transition">
171
+ 浏览更多视频 <i class="fas fa-chevron-right ml-2"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <div class="section-divider"></div>
178
+
179
+ <!-- 作画区 -->
180
+ <section id="art" class="py-16 bg-gray-50">
181
+ <div class="container mx-auto px-4">
182
+ <h2 class="text-3xl font-bold text-center mb-12">作画专区</h2>
183
+
184
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
185
+ <!-- 传统ACG作画 -->
186
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
187
+ <div class="relative pt-[100%] bg-gray-200">
188
+ <img src="https://via.placeholder.com/400x400" alt="传统ACG作画" class="absolute top-0 left-0 w-full h-full object-cover">
189
+ </div>
190
+ <div class="p-6">
191
+ <h3 class="font-bold text-xl mb-3">传统ACG作画</h3>
192
+ <p class="text-gray-600 mb-4">
193
+ 专注于经典角色和场景的创作，保持原作风格和设定的完整性。
194
+ </p>
195
+ <div class="flex justify-between items-center">
196
+ <span class="text-sm text-purple-600 font-medium">非稿件创作</span>
197
+ <button class="text-purple-600 hover:text-purple-800">
198
+ <i class="fas fa-arrow-right"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- 新晋ACG作画 -->
205
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
206
+ <div class="relative pt-[100%] bg-gray-200">
207
+ <img src="https://via.placeholder.com/400x400" alt="新晋ACG作画" class="absolute top-0 left-0 w-full h-full object-cover">
208
+ </div>
209
+ <div class="p-6">
210
+ <h3 class="font-bold text-xl mb-3">新晋ACG作画</h3>
211
+ <p class="text-gray-600 mb-4">
212
+ 个人原创角色、二创角色和关系化创作，展现个性与创新。
213
+ </p>
214
+ <div class="flex justify-between items-center">
215
+ <span class="text-sm text-purple-600 font-medium">定制稿件</span>
216
+ <button class="text-purple-600 hover:text-purple-800">
217
+ <i class="fas fa-arrow-right"></i>
218
+ </button>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- 艺术作画 -->
224
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
225
+ <div class="relative pt-[100%] bg-gray-200">
226
+ <img src="https://via.placeholder.com/400x400" alt="艺术作画" class="absolute top-0 left-0 w-full h-full object-cover">
227
+ </div>
228
+ <div class="p-6">
229
+ <h3 class="font-bold text-xl mb-3">艺术作画</h3>
230
+ <p class="text-gray-600 mb-4">
231
+ 超越传统与新晋界限的纯艺术创作，探索视觉表现的可能性。
232
+ </p>
233
+ <div class="flex justify-between items-center">
234
+ <span class="text-sm text-purple-600 font-medium">艺术探索</span>
235
+ <button class="text-purple-600 hover:text-purple-800">
236
+ <i class="fas fa-arrow-right"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="mt-12 bg-white rounded-xl shadow-md p-8">
244
+ <h3 class="font-bold text-xl mb-4">定制匹配系统</h3>
245
+ <p class="text-gray-600 mb-6">
246
+ 无论您需要传统风格的角色设计还是新晋风格的OC创作，我们的智能匹配系统都能为您找到最合适的画师。
247
+ </p>
248
+ <div class="flex flex-col sm:flex-row gap-4">
249
+ <select class="flex-grow border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
250
+ <option>选择创作类型</option>
251
+ <option>传统ACG角色设计</option>
252
+ <option>新晋OC角色设计</option>
253
+ <option>二创角色设计</option>
254
+ <option>艺术概念创作</option>
255
+ </select>
256
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition">
257
+ 寻找画师 <i class="fas fa-search ml-2"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </section>
263
+
264
+ <div class="section-divider transform rotate-180"></div>
265
+
266
+ <!-- 帖子区 -->
267
+ <section id="forum" class="py-16 bg-white">
268
+ <div class="container mx-auto px-4">
269
+ <h2 class="text-3xl font-bold text-center mb-12">社区帖子区</h2>
270
+
271
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
272
+ <!-- 动态区 -->
273
+ <div class="bg-gray-50 rounded-xl p-6">
274
+ <div class="flex items-center mb-6">
275
+ <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
276
+ <i class="fas fa-users text-xl"></i>
277
+ </div>
278
+ <h3 class="font-bold text-xl">动态区</h3>
279
+ </div>
280
+ <ul class="space-y-4">
281
+ <li class="flex items-start">
282
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
283
+ <div>
284
+ <p class="font-medium">漫展聚会召集</p>
285
+ <p class="text-sm text-gray-500">上海7月动漫展组团参加</p>
286
+ </div>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
290
+ <div>
291
+ <p class="font-medium">美食探店分享</p>
292
+ <p class="text-sm text-gray-500">东京秋叶原主题咖啡馆体验</p>
293
+ </div>
294
+ </li>
295
+ <li class="flex items-start">
296
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
297
+ <div>
298
+ <p class="font-medium">线上绘画会</p>
299
+ <p class="text-sm text-gray-500">每周六晚8点线上绘画交流会</p>
300
+ </div>
301
+ </li>
302
+ </ul>
303
+ <button class="mt-6 text-purple-600 font-medium flex items-center">
304
+ 查看全部动态 <i class="fas fa-chevron-right ml-2"></i>
305
+ </button>
306
+ </div>
307
+
308
+ <!-- 辩论区 -->
309
+ <div class="bg-gray-50 rounded-xl p-6">
310
+ <div class="flex items-center mb-6">
311
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4">
312
+ <i class="fas fa-comments text-xl"></i>
313
+ </div>
314
+ <h3 class="font-bold text-xl">辩论区</h3>
315
+ </div>
316
+ <ul class="space-y-4">
317
+ <li class="flex items-start">
318
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
319
+ <div>
320
+ <p class="font-medium">传统vs新晋创作</p>
321
+ <p class="text-sm text-gray-500">角色设定应该忠于原作还是创新突破?</p>
322
+ </div>
323
+ </li>
324
+ <li class="flex items-start">
325
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
326
+ <div>
327
+ <p class="font-medium">AI艺术讨论</p>
328
+ <p class="text-sm text-gray-500">AI创作是否应该被视为艺术?</p>
329
+ </div>
330
+ </li>
331
+ <li class="flex items-start">
332
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
333
+ <div>
334
+ <p class="font-medium">文学探讨</p>
335
+ <p class="text-sm text-gray-500">轻小说与传统文学的界限</p>
336
+ </div>
337
+ </li>
338
+ </ul>
339
+ <button class="mt-6 text-blue-600 font-medium flex items-center">
340
+ 参与更多讨论 <i class="fas fa-chevron-right ml-2"></i>
341
+ </button>
342
+ </div>
343
+
344
+ <!-- 知识区 -->
345
+ <div class="bg-gray-50 rounded-xl p-6">
346
+ <div class="flex items-center mb-6">
347
+ <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4">
348
+ <i class="fas fa-book text-xl"></i>
349
+ </div>
350
+ <h3 class="font-bold text-xl">知识区</h3>
351
+ </div>
352
+ <ul class="space-y-4">
353
+ <li class="flex items-start">
354
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
355
+ <div>
356
+ <p class="font-medium">绘画技巧</p>
357
+ <p class="text-sm text-gray-500">角色动态姿势绘制指南</p>
358
+ </div>
359
+ </li>
360
+ <li class="flex items-start">
361
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
362
+ <div>
363
+ <p class="font-medium">动画史</p>
364
+ <p class="text-sm text-gray-500">日本动画黄金年代回顾</p>
365
+ </div>
366
+ </li>
367
+ <li class="flex items-start">
368
+ <div class="bg-gray-200 rounded-full w-10 h-10 flex-shrink-0 mr-3"></div>
369
+ <div>
370
+ <p class="font-medium">软件教程</p>
371
+ <p class="text-sm text-gray-500">Blender角色建模入门</p>
372
+ </div>
373
+ </li>
374
+ </ul>
375
+ <button class="mt-6 text-green-600 font-medium flex items-center">
376
+ 学习更多知识 <i class="fas fa-chevron-right ml-2"></i>
377
+ </button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <div class="section-divider"></div>
384
+
385
+ <!-- 交易区 -->
386
+ <section id="market" class="py-16 bg-gray-50">
387
+ <div class="container mx-auto px-4">
388
+ <h2 class="text-3xl font-bold text-center mb-12">交易平台</h2>
389
+
390
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
391
+ <!-- 线下交易 -->
392
+ <div class="bg-white rounded-xl shadow-md p-8">
393
+ <div class="flex items-center mb-6">
394
+ <div class="bg-orange-100 text-orange-600 p-3 rounded-full mr-4">
395
+ <i class="fas fa-store text-xl"></i>
396
+ </div>
397
+ <h3 class="font-bold text-xl">线下交易</h3>
398
+ </div>
399
+ <ul class="space-y-3">
400
+ <li class="flex items-center">
401
+ <i class="fas fa-check text-orange-500 mr-3"></i>
402
+ <span>Cosplay道具与服装</span>
403
+ </li>
404
+ <li class="flex items-center">
405
+ <i class="fas fa-check text-orange-500 mr-3"></i>
406
+ <span>定制手办与模型</span>
407
+ </li>
408
+ <li class="flex items-center">
409
+ <i class="fas fa-check text-orange-500 mr-3"></i>
410
+ <span>摄影与化妆服务</span>
411
+ </li>
412
+ <li class="flex items-center">
413
+ <i class="fas fa-check text-orange-500 mr-3"></i>
414
+ <span>3D打印定制</span>
415
+ </li>
416
+ <li class="flex items-center">
417
+ <i class="fas fa-check text-orange-500 mr-3"></i>
418
+ <span>主题餐饮服务</span>
419
+ </li>
420
+ </ul>
421
+ <button class="mt-6 bg-orange-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-orange-600 transition">
422
+ 浏览线下服务 <i class="fas fa-arrow-right ml-2"></i>
423
+ </button>
424
+ </div>
425
+
426
+ <!-- 线上交易 -->
427
+ <div class="bg-white rounded-xl shadow-md p-8">
428
+ <div class="flex items-center mb-6">
429
+ <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">
430
+ <i class="fas fa-globe text-xl"></i>
431
+ </div>
432
+ <h3 class="font-bold text-xl">线上交易</h3>
433
+ </div>
434
+ <ul class="space-y-3">
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-purple-500 mr-3"></i>
437
+ <span>数字艺术作品</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-purple-500 mr-3"></i>
441
+ <span>OC角色定制</span>
442
+ </li>
443
+ <li class="flex items-center">
444
+ <i class="fas fa-check text-purple-500 mr-3"></i>
445
+ <span>小说与剧本创作</span>
446
+ </li>
447
+ <li class="flex items-center">
448
+ <i class="fas fa-check text-purple-500 mr-3"></i>
449
+ <span>虚拟商品交易</span>
450
+ </li>
451
+ <li class="flex items-center">
452
+ <i class="fas fa-check text-purple-500 mr-3"></i>
453
+ <span>数字工具与资源</span>
454
+ </li>
455
+ </ul>
456
+ <button class="mt-6 bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition">
457
+ 浏览线上商品 <i class="fas fa-arrow-right ml-2"></i>
458
+ </button>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="bg-white rounded-xl shadow-md p-8">
463
+ <h3 class="font-bold text-xl mb-4 text-center">一站式定制服务</h3>
464
+ <p class="text-gray-600 mb-6 text-center max-w-3xl mx-auto">
465
+ 从角色设计到实体手办，从数字绘画到3D打印，我们提供完整的创作到实体化流程服务。
466
+ </p>
467
+
468
+ <div class="flex flex-wrap justify-center gap-4">
469
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
470
+ <i class="fas fa-palette text-purple-500 mr-2"></i>
471
+ <span>角色设计</span>
472
+ </div>
473
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
474
+ <i class="fas fa-pen-fancy text-blue-500 mr-2"></i>
475
+ <span>插画创作</span>
476
+ </div>
477
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
478
+ <i class="fas fa-cube text-orange-500 mr-2"></i>
479
+ <span>3D建模</span>
480
+ </div>
481
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
482
+ <i class="fas fa-print text-green-500 mr-2"></i>
483
+ <span>3D打印</span>
484
+ </div>
485
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
486
+ <i class="fas fa-paint-brush text-red-500 mr-2"></i>
487
+ <span>涂装上色</span>
488
+ </div>
489
+ <div class="flex items-center bg-gray-50 px-4 py-2 rounded-full">
490
+ <i class="fas fa-box-open text-yellow-500 mr-2"></i>
491
+ <span>包装配送</span>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
496
+ <button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition">
497
+ 开始我的定制项目 <i class="fas fa-arrow-right ml-2"></i>
498
+ </button>
499
+ <button class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-purple-50 transition">
500
+ 查看案例作品
501
+ </button>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <div class="section-divider transform rotate-180"></div>
508
+
509
+ <!-- 放松区 -->
510
+ <section id="relax" class="py-16 bg-white">
511
+ <div class="container mx-auto px-4">
512
+ <h2 class="text-3xl font-bold text-center mb-12">放松休闲区</h2>
513
+
514
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
515
+ <!-- 审美提升 -->
516
+ <div class="bg-gray-900 text-white rounded-xl overflow-hidden">
517
+ <div class="relative pt-[56.25%]">
518
+ <img src="https://via.placeholder.com/800x450" alt="审美提升" class="absolute top-0 left-0 w-full h-full object-cover opacity-70">
519
+ <div class="absolute inset-0 flex flex-col justify-end p-8">
520
+ <h3 class="font-bold text-2xl mb-3">沉浮审美提升</h3>
521
+ <p class="text-gray-300 mb-4">
522
+ 精选美学作品与赏析，提升您的艺术鉴赏能力。
523
+ </p>
524
+ <button class="self-start bg-white text-gray-900 px-4 py-2 rounded font-medium hover:bg-gray-200 transition">
525
+ 开始体验
526
+ </button>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- 定制电台 -->
532
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl p-8">
533
+ <div class="flex items-center mb-6">
534
+ <i class="fas fa-music text-3xl mr-4"></i>
535
+ <h3 class="font-bold text-2xl">沉浮电台</h3>
536
+ </div>
537
+ <p class="mb-6">
538
+ 根据您的喜好定制的专属音乐频道，陪伴您的创作时光。
539
+ </p>
540
+ <div class="flex flex-wrap gap-3 mb-6">
541
+ <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">动漫OST</span>
542
+ <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Lo-Fi</span>
543
+ <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">古典</span>
544
+ <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">电子</span>
545
+ </div>
546
+ <button class="bg-white text-purple-600 px-6 py-2 rounded-lg font-medium hover:bg-gray-100 transition">
547
+ 创建我的电台 <i class="fas fa-sliders-h ml-2"></i>
548
+ </button>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- 互动体验 -->
553
+ <div class="bg-gray-50 rounded-xl p-8">
554
+ <h3 class="font-bold text-xl mb-6 text-center">互动体验区</h3>
555
+
556
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
557
+ <div class="bg-white rounded-lg p-4 text-center card-hover transition">
558
+ <div class="bg-purple-100 text-purple-600 p-3 rounded-full inline-block mb-3">
559
+ <i class="fas fa-ghost text-xl"></i>
560
+ </div>
561
+ <h4 class="font-medium mb-1">恐怖生成器</h4>
562
+ <p class="text-sm text-gray-500">自定义恐怖体验</p>
563
+ </div>
564
+ <div class="bg-white rounded-lg p-4 text-center card-hover transition">
565
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-full inline-block mb-3">
566
+ <i class="fas fa-gamepad text-xl"></i>
567
+ </div>
568
+ <h4 class="font-medium mb-1">小游戏</h4>
569
+ <p class="text-sm text-gray-500">休闲迷你游戏</p>
570
+ </div>
571
+ <div class="bg-white rounded-lg p-4 text-center card-hover transition">
572
+ <div class="bg-green-100 text-green-600 p-3 rounded-full inline-block mb-3">
573
+ <i class="fas fa-video text-xl"></i>
574
+ </div>
575
+ <h4 class="font-medium mb-1">互动视频</h4>
576
+ <p class="text-sm text-gray-500">分支剧情体验</p>
577
+ </div>
578
+ <div class="bg-white rounded-lg p-4 text-center card-hover transition">
579
+ <div class="bg-orange-100 text-orange-600 p-3 rounded-full inline-block mb-3">
580
+ <i class="fas fa-cube text-xl"></i>
581
+ </div>
582
+ <h4 class="font-medium mb-1">3D欣赏</h4>
583
+ <p class="text-sm text-gray-500">模型展示与互动</p>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </section>
589
+
590
+ <!-- 页脚 -->
591
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
592
+ <div class="container mx-auto px-4">
593
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
594
+ <div>
595
+ <h3 class="text-xl font-bold mb-4 flex items-center">
596
+ <i class="fas fa-ghost mr-2"></i> 次元交汇
597
+ </h3>
598
+ <p class="text-gray-400">
599
+ 连接传统与新晋ACG文化的综合性平台，为创作者和爱好者提供全方位的服务与社区。
600
+ </p>
601
+ </div>
602
+ <div>
603
+ <h4 class="font-bold mb-4">内容分类</h4>
604
+ <ul class="space-y-2">
605
+ <li><a href="#" class="text-gray-400 hover:text-white transition">传统ACG</a></li>
606
+ <li><a href="#" class="text-gray-400 hover:text-white transition">新晋创作</a></li>
607
+ <li><a href="#" class="text-gray-400 hover:text-white transition">艺术探索</a></li>
608
+ <li><a href="#" class="text-gray-400 hover:text-white transition">知识分享</a></li>
609
+ </ul>
610
+ </div>
611
+ <div>
612
+ <h4 class="font-bold mb-4">服务</h4>
613
+ <ul class="space-y-2">
614
+ <li><a href="#" class="text-gray-400 hover:text-white transition">创作定制</a></li>
615
+ <li><a href="#" class="text-gray-400 hover:text-white transition">交易平台</a></li>
616
+ <li><a href="#" class="text-gray-400 hover:text-white transition">社区互动</a></li>
617
+ <li><a href="#" class="text-gray-400 hover:text-white transition">资源工具</a></li>
618
+ </ul>
619
+ </div>
620
+ <div>
621
+ <h4 class="font-bold mb-4">联系我们</h4>
622
+ <ul class="space-y-2">
623
+ <li class="flex items-center">
624
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
625
+ <span class="text-gray-400">contact@yuanjiaohui.com</span>
626
+ </li>
627
+ <li class="flex items-center">
628
+ <i class="fab fa-weixin text-gray-400 mr-2"></i>
629
+ <span class="text-gray-400">次元交汇官方</span>
630
+ </li>
631
+ <li class="flex items-center">
632
+ <i class="fab fa-weibo text-gray-400 mr-2"></i>
633
+ <span class="text-gray-400">@次元交汇</span>
634
+ </li>
635
+ </ul>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="border-t border-gray-800 pt-8">
640
+ <div class="flex flex-col md:flex-row justify-between items-center">
641
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
642
+ © 2023 次元交汇. 保留所有权利。
643
+ </p>
644
+ <div class="flex space-x-6">
645
+ <a href="#" class="text-gray-500 hover:text-white transition">
646
+ <i class="fab fa-facebook-f"></i>
647
+ </a>
648
+ <a href="#" class="text-gray-500 hover:text-white transition">
649
+ <i class="fab fa-twitter"></i>
650
+ </a>
651
+ <a href="#" class="text-gray-500 hover:text-white transition">
652
+ <i class="fab fa-instagram"></i>
653
+ </a>
654
+ <a href="#" class="text-gray-500 hover:text-white transition">
655
+ <i class="fab fa-bilibili"></i>
656
+ </a>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </footer>
662
+
663
+ <script>
664
+ // 简单的标签切换功能
665
+ document.querySelectorAll('.flex.border-b button').forEach(button => {
666
+ button.addEventListener('click', () => {
667
+ // 移除所有按钮的激活状态
668
+ document.querySelectorAll('.flex.border-b button').forEach(btn => {
669
+ btn.classList.remove('tab-active');
670
+ });
671
+ // 为当前按钮添加激活状态
672
+ button.classList.add('tab-active');
673
+ });
674
+ });
675
+
676
+ // 响应式导航菜单
677
+ document.querySelector('.md\\:hidden').addEventListener('click', () => {
678
+ const nav = document.querySelector('.md\\:flex.space-x-6');
679
+ nav.classList.toggle('hidden');
680
+ nav.classList.toggle('flex');
681
+ });
682
+ </script>
683
+ <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=ashahs/acg-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
684
+ </html>