Hugging Face's logo

Spaces:
ixingchen
/
homess
Running

App Files Community
ixingchen commited on
Commit
d56d090
·
verified ·
1 Parent(s): 9a6e8e5

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +617 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Homess
3
- emoji: 😻
4
- colorFrom: red
5
  colorTo: red
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: homess
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,617 @@
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>艾星辰部落格 - 星辰科技，引领未来</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ backdropBlur: {
14
+ xs: '2px',
15
+ }
16
+ }
17
+ }
18
+ }
19
+ </script>
20
+ <style>
21
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
22
+
23
+ body {
24
+ font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
25
+ background: linear-gradient(135deg, #0f172a, #1e293b);
26
+ background-attachment: fixed;
27
+ color: #e2e8f0;
28
+ overflow-x: hidden;
29
+ }
30
+
31
+ .glass {
32
+ background: rgba(255, 255, 255, 0.08);
33
+ backdrop-filter: blur(12px);
34
+ -webkit-backdrop-filter: blur(12px);
35
+ border: 1px solid rgba(255, 255, 255, 0.1);
36
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
37
+ }
38
+
39
+ .glass-light {
40
+ background: rgba(255, 255, 255, 0.05);
41
+ backdrop-filter: blur(8px);
42
+ -webkit-backdrop-filter: blur(8px);
43
+ }
44
+
45
+ .hero-bg {
46
+ background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 40%),
47
+ radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.15), transparent 40%),
48
+ linear-gradient(to bottom, #0f172a, #020617);
49
+ background-size: cover;
50
+ }
51
+
52
+ .service-card:hover {
53
+ transform: translateY(-10px);
54
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
55
+ }
56
+
57
+ .parallax {
58
+ background-attachment: fixed;
59
+ background-size: cover;
60
+ }
61
+
62
+ .text-gradient {
63
+ background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6);
64
+ -webkit-background-clip: text;
65
+ -webkit-text-fill-color: transparent;
66
+ background-clip: text;
67
+ }
68
+
69
+ .animate-float {
70
+ animation: float 6s ease-in-out infinite;
71
+ }
72
+
73
+ @keyframes float {
74
+ 0% { transform: translateY(0px); }
75
+ 50% { transform: translateY(-20px); }
76
+ 100% { transform: translateY(0px); }
77
+ }
78
+
79
+ .stars {
80
+ position: absolute;
81
+ top: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 100%;
85
+ pointer-events: none;
86
+ }
87
+
88
+ .star {
89
+ position: absolute;
90
+ background: white;
91
+ border-radius: 50%;
92
+ animation: twinkle var(--duration, 4s) infinite var(--delay, 0s);
93
+ }
94
+
95
+ @keyframes twinkle {
96
+ 0%, 100% { opacity: 0.2; }
97
+ 50% { opacity: 1; }
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="min-h-screen">
102
+ <!-- 星空背景 -->
103
+ <div class="stars" id="stars"></div>
104
+
105
+ <!-- 导航栏 -->
106
+ <nav class="fixed top-0 left-0 right-0 z-50 glass py-4 px-6">
107
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
108
+ <div class="flex items-center space-x-2">
109
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
110
+ <i class="fas fa-star text-white text-xl"></i>
111
+ </div>
112
+ <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">艾星辰部落格</span>
113
+ </div>
114
+
115
+ <div class="hidden md:flex space-x-8">
116
+ <a href="#home" class="text-white hover:text-purple-300 transition-colors">首页</a>
117
+ <a href="#about" class="text-white hover:text-purple-300 transition-colors">关于我们</a>
118
+ <a href="#services" class="text-white hover:text-purple-300 transition-colors">服务项目</a>
119
+ <a href="#portfolio" class="text-white hover:text-purple-300 transition-colors">作品展示</a>
120
+ <a href="#contact" class="text-white hover:text-purple-300 transition-colors">联系我们</a>
121
+ </div>
122
+
123
+ <button class="md:hidden text-white">
124
+ <i class="fas fa-bars text-2xl"></i>
125
+ </button>
126
+ </div>
127
+ </nav>
128
+
129
+ <!-- 主页区 -->
130
+ <section id="home" class="hero-bg min-h-screen flex items-center pt-16">
131
+ <div class="max-w-7xl mx-auto px-4 py-20 grid md:grid-cols-2 gap-12 items-center">
132
+ <div class="text-center md:text-left">
133
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
134
+ <span class="block text-white">引领未来的</span>
135
+ <span class="block text-gradient">科技创意</span>
136
+ </h1>
137
+ <p class="text-xl text-slate-300 mb-8 max-w-2xl">
138
+ 艾星辰部落格专注于前沿技术与创意设计的融合，为客户提供卓越的数字化解决方案，点亮您的星辰之路。
139
+ </p>
140
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
141
+ <button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all">
142
+ 开始探索
143
+ </button>
144
+ <button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all flex items-center justify-center">
145
+ <i class="fas fa-play-circle mr-2"></i> 观看视频
146
+ </button>
147
+ </div>
148
+ </div>
149
+ <div class="flex justify-center animate-float">
150
+ <div class="relative">
151
+ <div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-30 animate-pulse"></div>
152
+ <div class="absolute -bottom-6 -right-6 w-64 h-64 bg-pink-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-30 animate-pulse"></div>
153
+ <div class="relative w-80 h-80 md:w-96 md:h-96 rounded-2xl glass-light p-6 flex items-center justify-center">
154
+ <div class="text-center">
155
+ <i class="fas fa-rocket text-6xl text-purple-400 mb-4"></i>
156
+ <h3 class="text-2xl font-bold text-white mb-2">创新无界</h3>
157
+ <p class="text-slate-300">科技与创意的完美结合</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- 关于我们 -->
166
+ <section id="about" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');">
167
+ <div class="max-w-7xl mx-auto px-4">
168
+ <div class="glass rounded-3xl p-8 md:p-12">
169
+ <div class="text-center mb-16">
170
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">关于我们</h2>
171
+ <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full"></div>
172
+ </div>
173
+
174
+ <div class="grid md:grid-cols-2 gap-12 items-center">
175
+ <div>
176
+ <h3 class="text-2xl font-bold mb-6">星辰科技，引领未来</h3>
177
+ <p class="text-slate-300 mb-6">
178
+ 艾星辰部落格成立于2015年，是一家专注于前沿科技与创意设计融合的创新公司。我们致力于为客户打造卓越的数字化解决方案，助力企业实现数字化转型。
179
+ </p>
180
+ <p class="text-slate-300 mb-6">
181
+ 我们的团队由行业专家、技术大牛和创意设计师组成，拥有丰富的项目经验和深厚的技术积累。凭借创新的技术能力和独特的设计理念，我们已为众多知名企业提供服务。
182
+ </p>
183
+ <div class="flex flex-wrap gap-4">
184
+ <div class="flex items-center">
185
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
186
+ <span>前沿技术</span>
187
+ </div>
188
+ <div class="flex items-center">
189
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
190
+ <span>创意设计</span>
191
+ </div>
192
+ <div class="flex items-center">
193
+ <i class="fas fa-check-circle text-green-400 mr-2"></i>
194
+ <span>专业团队</span>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="grid grid-cols-2 gap-4">
199
+ <div class="glass rounded-xl p-6 text-center">
200
+ <div class="text-4xl text-purple-400 mb-4">
201
+ <i class="fas fa-users"></i>
202
+ </div>
203
+ <h4 class="text-xl font-bold mb-2">团队规模</h4>
204
+ <p class="text-3xl font-bold text-gradient">50+</p>
205
+ <p class="text-slate-400">专业成员</p>
206
+ </div>
207
+ <div class="glass rounded-xl p-6 text-center">
208
+ <div class="text-4xl text-pink-400 mb-4">
209
+ <i class="fas fa-project-diagram"></i>
210
+ </div>
211
+ <h4 class="text-xl font-bold mb-2">项目完成</h4>
212
+ <p class="text-3xl font-bold text-gradient">200+</p>
213
+ <p class="text-slate-400">成功案例</p>
214
+ </div>
215
+ <div class="glass rounded-xl p-6 text-center">
216
+ <div class="text-4xl text-indigo-400 mb-4">
217
+ <i class="fas fa-globe"></i>
218
+ </div>
219
+ <h4 class="text-xl font-bold mb-2">服务范围</h4>
220
+ <p class="text-3xl font-bold text-gradient">30+</p>
221
+ <p class="text-slate-400">国家地区</p>
222
+ </div>
223
+ <div class="glass rounded-xl p-6 text-center">
224
+ <div class="text-4xl text-blue-400 mb-4">
225
+ <i class="fas fa-award"></i>
226
+ </div>
227
+ <h4 class="text-xl font-bold mb-2">获得奖项</h4>
228
+ <p class="text-3xl font-bold text-gradient">15+</p>
229
+ <p class="text-slate-400">创新荣誉</p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </section>
236
+
237
+ <!-- 服务项目 -->
238
+ <section id="services" class="py-20">
239
+ <div class="max-w-7xl mx-auto px-4">
240
+ <div class="text-center mb-16">
241
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2>
242
+ <p class="text-xl text-slate-400 max-w-2xl mx-auto">提供全方位的数字化解决方案，助力企业转型升级</p>
243
+ <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div>
244
+ </div>
245
+
246
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
247
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
248
+ <div class="w-16 h-16 rounded-xl bg-purple-500/20 flex items-center justify-center mb-6">
249
+ <i class="fas fa-laptop-code text-2xl text-purple-400"></i>
250
+ </div>
251
+ <h3 class="text-2xl font-bold mb-4">网站开发</h3>
252
+ <p class="text-slate-300 mb-6">
253
+ 定制化网站开发服务，采用前沿技术架构，打造高性能、高安全性的企业官网和电商平台。
254
+ </p>
255
+ <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center">
256
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
257
+ </a>
258
+ </div>
259
+
260
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
261
+ <div class="w-16 h-16 rounded-xl bg-pink-500/20 flex items-center justify-center mb-6">
262
+ <i class="fas fa-mobile-alt text-2xl text-pink-400"></i>
263
+ </div>
264
+ <h3 class="text-2xl font-bold mb-4">移动应用</h3>
265
+ <p class="text-slate-300 mb-6">
266
+ 跨平台移动应用开发，覆盖iOS和Android平台，提供流畅的用户体验和强大的功能。
267
+ </p>
268
+ <a href="#" class="text-pink-400 hover:text-pink-300 flex items-center">
269
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
270
+ </a>
271
+ </div>
272
+
273
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
274
+ <div class="w-16 h-16 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-6">
275
+ <i class="fas fa-paint-brush text-2xl text-indigo-400"></i>
276
+ </div>
277
+ <h3 class="text-2xl font-bold mb-4">UI/UX设计</h3>
278
+ <p class="text-slate-300 mb-6">
279
+ 以用户为中心的设计理念，打造美观、易用且富有创意的界面设计，提升用户体验。
280
+ </p>
281
+ <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center">
282
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
283
+ </a>
284
+ </div>
285
+
286
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
287
+ <div class="w-16 h-16 rounded-xl bg-blue-500/20 flex items-center justify-center mb-6">
288
+ <i class="fas fa-robot text-2xl text-blue-400"></i>
289
+ </div>
290
+ <h3 class="text-2xl font-bold mb-4">AI解决方案</h3>
291
+ <p class="text-slate-300 mb-6">
292
+ 人工智能技术应用开发，包括机器学习、自然语言处理等，助力企业智能化升级。
293
+ </p>
294
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
295
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
296
+ </a>
297
+ </div>
298
+
299
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
300
+ <div class="w-16 h-16 rounded-xl bg-teal-500/20 flex items-center justify-center mb-6">
301
+ <i class="fas fa-chart-line text-2xl text-teal-400"></i>
302
+ </div>
303
+ <h3 class="text-2xl font-bold mb-4">数据分析</h3>
304
+ <p class="text-slate-300 mb-6">
305
+ 大数据分析与可视化服务，帮助企业挖掘数据价值，制定科学的业务决策。
306
+ </p>
307
+ <a href="#" class="text-teal-400 hover:text-teal-300 flex items-center">
308
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
309
+ </a>
310
+ </div>
311
+
312
+ <div class="service-card glass rounded-2xl p-8 transition-all duration-500">
313
+ <div class="w-16 h-16 rounded-xl bg-amber-500/20 flex items-center justify-center mb-6">
314
+ <i class="fas fa-cloud text-2xl text-amber-400"></i>
315
+ </div>
316
+ <h3 class="text-2xl font-bold mb-4">云服务</h3>
317
+ <p class="text-slate-300 mb-6">
318
+ 云计算解决方案，包括云迁移、云架构设计等，保障企业业务的高可用性和可扩展性。
319
+ </p>
320
+ <a href="#" class="text-amber-400 hover:text-amber-300 flex items-center">
321
+ 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
322
+ </a>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- 作品展示 -->
329
+ <section id="portfolio" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800">
330
+ <div class="max-w-7xl mx-auto px-4">
331
+ <div class="text-center mb-16">
332
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">作品展示</h2>
333
+ <p class="text-xl text-slate-400 max-w-2xl mx-auto">展示我们为客户打造的精品项目，见证我们的实力与创意</p>
334
+ <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div>
335
+ </div>
336
+
337
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
338
+ <div class="glass rounded-2xl overflow-hidden">
339
+ <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 relative">
340
+ <div class="absolute inset-0 flex items-center justify-center">
341
+ <i class="fas fa-shopping-cart text-5xl text-white/20"></i>
342
+ </div>
343
+ </div>
344
+ <div class="p-6">
345
+ <h3 class="text-xl font-bold mb-2">星辰电商系统</h3>
346
+ <p class="text-slate-300 mb-4">为大型零售企业打造的全渠道电商系统</p>
347
+ <div class="flex flex-wrap gap-2">
348
+ <span class="bg-purple-500/20 text-purple-300 px-3 py-1 rounded-full text-sm">电商</span>
349
+ <span class="bg-pink-500/20 text-pink-300 px-3 py-1 rounded-full text-sm">移动应用</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="glass rounded-2xl overflow-hidden">
355
+ <div class="h-48 bg-gradient-to-r from-teal-500 to-blue-600 relative">
356
+ <div class="absolute inset-0 flex items-center justify-center">
357
+ <i class="fas fa-chart-pie text-5xl text-white/20"></i>
358
+ </div>
359
+ </div>
360
+ <div class="p-6">
361
+ <h3 class="text-xl font-bold mb-2">智能分析平台</h3>
362
+ <p class="text-slate-300 mb-4">企业级数据分析与可视化平台</p>
363
+ <div class="flex flex-wrap gap-2">
364
+ <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">数据分析</span>
365
+ <span class="bg-teal-500/20 text-teal-300 px-3 py-1 rounded-full text-sm">AI应用</span>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="glass rounded-2xl overflow-hidden">
371
+ <div class="h-48 bg-gradient-to-r from-amber-500 to-orange-600 relative">
372
+ <div class="absolute inset-0 flex items-center justify-center">
373
+ <i class="fas fa-mobile-alt text-5xl text-white/20"></i>
374
+ </div>
375
+ </div>
376
+ <div class="p-6">
377
+ <h3 class="text-xl font-bold mb-2">健康生活应用</h3>
378
+ <p class="text-slate-300 mb-4">为健康科技公司开发的移动健康管理应用</p>
379
+ <div class="flex flex-wrap gap-2">
380
+ <span class="bg-orange-500/20 text-orange-300 px-3 py-1 rounded-full text-sm">健康</span>
381
+ <span class="bg-amber-500/20 text-amber-300 px-3 py-1 rounded-full text-sm">移动应用</span>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="text-center mt-12">
388
+ <button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all">
389
+ 查看更多项目
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- 联系我们 -->
396
+ <section id="contact" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');">
397
+ <div class="max-w-7xl mx-auto px-4">
398
+ <div class="glass rounded-3xl p-8 md:p-12">
399
+ <div class="text-center mb-16">
400
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">联系我们</h2>
401
+ <p class="text-xl text-slate-300 max-w-2xl mx-auto">有任何问题或合作意向？欢迎随时与我们联系</p>
402
+ <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div>
403
+ </div>
404
+
405
+ <div class="grid md:grid-cols-2 gap-12">
406
+ <div>
407
+ <h3 class="text-2xl font-bold mb-6">联系信息</h3>
408
+ <div class="space-y-6">
409
+ <div class="flex items-start">
410
+ <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mr-4">
411
+ <i class="fas fa-map-marker-alt text-purple-400 text-xl"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="text-lg font-semibold mb-1">公司地址</h4>
415
+ <p class="text-slate-300">上海市浦东新区陆家嘴金融中心88号</p>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="flex items-start">
420
+ <div class="w-12 h-12 rounded-full bg-pink-500/20 flex items-center justify-center mr-4">
421
+ <i class="fas fa-phone-alt text-pink-400 text-xl"></i>
422
+ </div>
423
+ <div>
424
+ <h4 class="text-lg font-semibold mb-1">联系电话</h4>
425
+ <p class="text-slate-300">+86 021 1234 5678</p>
426
+ <p class="text-slate-300">+86 138 0013 8000</p>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="flex items-start">
431
+ <div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center mr-4">
432
+ <i class="fas fa-envelope text-blue-400 text-xl"></i>
433
+ </div>
434
+ <div>
435
+ <h4 class="text-lg font-semibold mb-1">电子邮箱</h4>
436
+ <p class="text-slate-300">contact@aixingchen.com</p>
437
+ <p class="text-slate-300">support@aixingchen.com</p>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="mt-10">
443
+ <h4 class="text-xl font-bold mb-4">关注我们</h4>
444
+ <div class="flex space-x-4">
445
+ <a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
446
+ <i class="fab fa-weixin text-xl text-green-400"></i>
447
+ </a>
448
+ <a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
449
+ <i class="fab fa-weibo text-xl text-red-400"></i>
450
+ </a>
451
+ <a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
452
+ <i class="fab fa-linkedin-in text-xl text-blue-400"></i>
453
+ </a>
454
+ <a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
455
+ <i class="fab fa-github text-xl text-gray-300"></i>
456
+ </a>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <div>
462
+ <h3 class="text-2xl font-bold mb-6">发送消息</h3>
463
+ <form class="space-y-6">
464
+ <div>
465
+ <label class="block text-slate-300 mb-2">您的姓名</label>
466
+ <input type="text" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的姓名">
467
+ </div>
468
+
469
+ <div>
470
+ <label class="block text-slate-300 mb-2">电子邮箱</label>
471
+ <input type="email" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的邮箱">
472
+ </div>
473
+
474
+ <div>
475
+ <label class="block text-slate-300 mb-2">联系电话</label>
476
+ <input type="tel" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的电话">
477
+ </div>
478
+
479
+ <div>
480
+ <label class="block text-slate-300 mb-2">消息内容</label>
481
+ <textarea rows="5" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入消息内容"></textarea>
482
+ </div>
483
+
484
+ <button type="submit" class="w-full glass px-6 py-3 rounded-lg font-semibold text-white hover:bg-white/10 transition-all">
485
+ 发送消息
486
+ </button>
487
+ </form>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- 页脚 -->
495
+ <footer class="py-12 bg-slate-900 border-t border-white/10">
496
+ <div class="max-w-7xl mx-auto px-4">
497
+ <div class="grid md:grid-cols-4 gap-8 mb-12">
498
+ <div>
499
+ <div class="flex items-center space-x-2 mb-6">
500
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
501
+ <i class="fas fa-star text-white text-xl"></i>
502
+ </div>
503
+ <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">艾星辰部落格</span>
504
+ </div>
505
+ <p class="text-slate-400 mb-6">
506
+ 专注于前沿科技与创意设计融合，为客户提供卓越的数字化解决方案。
507
+ </p>
508
+ <div class="flex space-x-4">
509
+ <a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
510
+ <i class="fab fa-weixin text-green-400"></i>
511
+ </a>
512
+ <a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
513
+ <i class="fab fa-weibo text-red-400"></i>
514
+ </a>
515
+ <a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors">
516
+ <i class="fab fa-linkedin-in text-blue-400"></i>
517
+ </a>
518
+ </div>
519
+ </div>
520
+
521
+ <div>
522
+ <h4 class="text-lg font-bold mb-6">快速链接</h4>
523
+ <ul class="space-y-3">
524
+ <li><a href="#home" class="text-slate-400 hover:text-white transition-colors">首页</a></li>
525
+ <li><a href="#about" class="text-slate-400 hover:text-white transition-colors">关于我们</a></li>
526
+ <li><a href="#services" class="text-slate-400 hover:text-white transition-colors">服务项目</a></li>
527
+ <li><a href="#portfolio" class="text-slate-400 hover:text-white transition-colors">作品展示</a></li>
528
+ <li><a href="#contact" class="text-slate-400 hover:text-white transition-colors">联系我们</a></li>
529
+ </ul>
530
+ </div>
531
+
532
+ <div>
533
+ <h4 class="text-lg font-bold mb-6">服务项目</h4>
534
+ <ul class="space-y-3">
535
+ <li><a href="#" class="text-slate-400 hover:text-white transition-colors">网站开发</a></li>
536
+ <li><a href="#" class="text-slate-400 hover:text-white transition-colors">移动应用</a></li>
537
+ <li><a href="#" class="text-slate-400 hover:text-white transition-colors">UI/UX设计</a></li>
538
+ <li><a href="#" class="text-slate-400 hover:text-white transition-colors">数据分析</a></li>
539
+ <li><a href="#" class="text-slate-400 hover:text-white transition-colors">云服务</a></li>
540
+ </ul>
541
+ </div>
542
+
543
+ <div>
544
+ <h4 class="text-lg font-bold mb-6">订阅我们</h4>
545
+ <p class="text-slate-400 mb-4">订阅获取最新资讯和优惠信息</p>
546
+ <div class="flex">
547
+ <input type="email" class="glass flex-1 rounded-l-lg px-4 py-2 focus:outline-none bg-white/5" placeholder="您的邮箱">
548
+ <button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-r-lg font-medium">
549
+ <i class="fas fa-paper-plane"></i>
550
+ </button>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="pt-8 border-t border-white/10 text-center text-slate-500">
556
+ <p>&copy; 2023 艾星辰部落格. 保留所有权利.</p>
557
+ </div>
558
+ </div>
559
+ </footer>
560
+
561
+ <script>
562
+ // 创建星空背景
563
+ function createStars() {
564
+ const starsContainer = document.getElementById('stars');
565
+ const starCount = 150;
566
+
567
+ for (let i = 0; i < starCount; i++) {
568
+ const star = document.createElement('div');
569
+ star.classList.add('star');
570
+
571
+ // 随机位置
572
+ const posX = Math.random() * 100;
573
+ const posY = Math.random() * 100;
574
+
575
+ // 随机大小
576
+ const size = Math.random() * 3;
577
+
578
+ // 随机动画时间
579
+ const duration = 2 + Math.random() * 8;
580
+ const delay = Math.random() * 5;
581
+
582
+ star.style.left = `${posX}%`;
583
+ star.style.top = `${posY}%`;
584
+ star.style.width = `${size}px`;
585
+ star.style.height = `${size}px`;
586
+ star.style.setProperty('--duration', `${duration}s`);
587
+ star.style.setProperty('--delay', `${delay}s`);
588
+
589
+ starsContainer.appendChild(star);
590
+ }
591
+ }
592
+
593
+ // 平滑滚动
594
+ function smoothScroll() {
595
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
596
+ anchor.addEventListener('click', function (e) {
597
+ e.preventDefault();
598
+
599
+ const target = document.querySelector(this.getAttribute('href'));
600
+ if (target) {
601
+ window.scrollTo({
602
+ top: target.offsetTop - 80,
603
+ behavior: 'smooth'
604
+ });
605
+ }
606
+ });
607
+ });
608
+ }
609
+
610
+ // 初始化
611
+ document.addEventListener('DOMContentLoaded', () => {
612
+ createStars();
613
+ smoothScroll();
614
+ });
615
+ </script>
616
+ <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=ixingchen/homess" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
617
+ </html>