Hugging Face's logo

Spaces:
shengzi
/
myweb
Running

App Files Community
shengzi commited on
Commit
cc41b37
·
verified ·
1 Parent(s): 236353a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +370 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Myweb
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: indigo
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: myweb
3
+ emoji: 🐳
4
+ colorFrom: red
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,370 @@
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
+ <style>
10
+ /* 自定义CSS */
11
+ .hero-gradient {
12
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
+ }
14
+
15
+ .feature-card:hover {
16
+ transform: translateY(-10px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+
20
+ .mobile-menu {
21
+ max-height: 0;
22
+ overflow: hidden;
23
+ transition: max-height 0.3s ease-out;
24
+ }
25
+
26
+ .mobile-menu.open {
27
+ max-height: 500px;
28
+ }
29
+
30
+ @media (min-width: 1024px) {
31
+ .lg\:w-30 {
32
+ width: 30%;
33
+ }
34
+ }
35
+
36
+ /* 中文排版优化 */
37
+ body {
38
+ font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
39
+ }
40
+
41
+ .chinese-text {
42
+ letter-spacing: 0.5px;
43
+ line-height: 1.7;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="font-sans antialiased text-gray-800 chinese-text">
48
+ <!-- 导航栏 -->
49
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
50
+ <div class="max-w-6xl mx-auto px-4">
51
+ <div class="flex justify-between items-center py-4">
52
+ <div class="flex items-center space-x-4">
53
+ <div>
54
+ <a href="#" class="flex items-center py-2 px-2">
55
+ <i class="fas fa-rocket text-purple-600 text-2xl mr-2"></i>
56
+ <span class="font-semibold text-gray-900 text-lg">科技解决方案</span>
57
+ </a>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- 主导航 -->
62
+ <div class="hidden md:flex items-center space-x-1">
63
+ <a href="#" class="py-4 px-3 text-purple-600 border-b-2 border-purple-600 font-medium">首页</a>
64
+ <a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">服务</a>
65
+ <a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">关于我们</a>
66
+ <a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">联系我们</a>
67
+ <a href="#" class="py-2 px-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-300">免费咨询</a>
68
+ </div>
69
+
70
+ <!-- 移动端菜单按钮 -->
71
+ <div class="md:hidden flex items-center">
72
+ <button id="mobile-menu-button" class="outline-none">
73
+ <i class="fas fa-bars text-gray-500 text-2xl"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- 移动端菜单 -->
80
+ <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
81
+ <div class="px-2 pt-2 pb-4 space-y-1">
82
+ <a href="#" class="block px-3 py-2 text-base font-medium text-purple-600 bg-purple-50 rounded">首页</a>
83
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">服务</a>
84
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">关于我们</a>
85
+ <a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">联系我们</a>
86
+ <a href="#" class="block px-3 py-2 text-base font-medium text-white bg-purple-600 rounded hover:bg-purple-700">免费咨询</a>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- 英雄区域 -->
92
+ <section class="hero-gradient text-white">
93
+ <div class="max-w-6xl mx-auto px-4 py-20 md:py-32">
94
+ <div class="flex flex-col md:flex-row items-center">
95
+ <div class="md:w-1/2 mb-10 md:mb-0">
96
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">创新科技解决方案助力企业发展</h1>
97
+ <p class="text-xl md:text-2xl mb-8 opacity-90">我们通过前沿技术和创新策略，帮助企业实现数字化转型和业务增长。</p>
98
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
99
+ <button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">立即咨询</button>
100
+ <button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">了解更多</button>
101
+ </div>
102
+ </div>
103
+ <div class="md:w-1/2 flex justify-center">
104
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
105
+ alt="商务会议"
106
+ class="rounded-lg shadow-2xl w-full max-w-md">
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- 服务特色 -->
113
+ <section class="py-20 bg-gray-50">
114
+ <div class="max-w-6xl mx-auto px-4">
115
+ <div class="text-center mb-16">
116
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2>
117
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">我们提供全方位的数字化解决方案，助力企业在数字时代蓬勃发展。</p>
118
+ </div>
119
+
120
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
121
+ <!-- 服务1 -->
122
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
123
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
124
+ <i class="fas fa-laptop-code text-purple-600 text-2xl"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold mb-3">网站开发</h3>
127
+ <p class="text-gray-600 mb-4">采用最新技术，为企业量身定制网站和Web应用程序，满足您的业务需求。</p>
128
+ <a href="#" class="text-purple-600 font-semibold flex items-center">
129
+ 了解更多 <i class="fas fa-arrow-right ml-2"></i>
130
+ </a>
131
+ </div>
132
+
133
+ <!-- 服务2 -->
134
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
135
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
136
+ <i class="fas fa-mobile-alt text-purple-600 text-2xl"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-3">移动应用</h3>
139
+ <p class="text-gray-600 mb-4">为iOS和Android平台开发美观实用的移动应用程序，提升客户参与度。</p>
140
+ <a href="#" class="text-purple-600 font-semibold flex items-center">
141
+ 了解更多 <i class="fas fa-arrow-right ml-2"></i>
142
+ </a>
143
+ </div>
144
+
145
+ <!-- 服务3 -->
146
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300">
147
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
148
+ <i class="fas fa-chart-line text-purple-600 text-2xl"></i>
149
+ </div>
150
+ <h3 class="text-xl font-bold mb-3">数字营销</h3>
151
+ <p class="text-gray-600 mb-4">基于数据的营销策略，提升您的在线可见度和客户获取能力。</p>
152
+ <a href="#" class="text-purple-600 font-semibold flex items-center">
153
+ 了解更多 <i class="fas fa-arrow-right ml-2"></i>
154
+ </a>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- 客户评价 -->
161
+ <section class="py-20 bg-white">
162
+ <div class="max-w-6xl mx-auto px-4">
163
+ <div class="text-center mb-16">
164
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">客户评价</h2>
165
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说</p>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
169
+ <!-- 评价1 -->
170
+ <div class="bg-gray-50 p-8 rounded-xl">
171
+ <div class="flex items-center mb-4">
172
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
173
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="张女士" class="w-full h-full object-cover">
174
+ </div>
175
+ <div>
176
+ <h4 class="font-bold">张女士</h4>
177
+ <p class="text-gray-600 text-sm">创新科技 CEO</p>
178
+ </div>
179
+ </div>
180
+ <p class="text-gray-700 italic">"科技解决方案彻底改变了我们的线上形象。自合作以来，我们的网站流量增长了300%。"</p>
181
+ <div class="mt-4 text-purple-500">
182
+ <i class="fas fa-star"></i>
183
+ <i class="fas fa-star"></i>
184
+ <i class="fas fa-star"></i>
185
+ <i class="fas fa-star"></i>
186
+ <i class="fas fa-star"></i>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- 评价2 -->
191
+ <div class="bg-gray-50 p-8 rounded-xl">
192
+ <div class="flex items-center mb-4">
193
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
194
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="王先生" class="w-full h-full object-cover">
195
+ </div>
196
+ <div>
197
+ <h4 class="font-bold">王先生</h4>
198
+ <p class="text-gray-600 text-sm">零售通 创始人</p>
199
+ </div>
200
+ </div>
201
+ <p class="text-gray-700 italic">"他们为我们开发的移动应用彻底改变了客户互动方式。强烈推荐他们的服务！"</p>
202
+ <div class="mt-4 text-purple-500">
203
+ <i class="fas fa-star"></i>
204
+ <i class="fas fa-star"></i>
205
+ <i class="fas fa-star"></i>
206
+ <i class="fas fa-star"></i>
207
+ <i class="fas fa-star"></i>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- 评价3 -->
212
+ <div class="bg-gray-50 p-8 rounded-xl">
213
+ <div class="flex items-center mb-4">
214
+ <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
215
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="李女士" class="w-full h-full object-cover">
216
+ </div>
217
+ <div>
218
+ <h4 class="font-bold">李女士</h4>
219
+ <p class="text-gray-600 text-sm">时尚购 市场总监</p>
220
+ </div>
221
+ </div>
222
+ <p class="text-gray-700 italic">"他们的数字营销团队取得了卓越成果。我们的投资回报率从未如此好过。真正值得信赖的合作伙伴。"</p>
223
+ <div class="mt-4 text-purple-500">
224
+ <i class="fas fa-star"></i>
225
+ <i class="fas fa-star"></i>
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ <i class="fas fa-star-half-alt"></i>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- 行动号召 -->
236
+ <section class="py-20 bg-purple-600 text-white">
237
+ <div class="max-w-6xl mx-auto px-4 text-center">
238
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好改变您的业务了吗？</h2>
239
+ <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">让我们探讨如何通过创新解决方案帮助您实现目标。</p>
240
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
241
+ <button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">免费咨询</button>
242
+ <button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">联系我们</button>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- 页脚 -->
248
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
249
+ <div class="max-w-6xl mx-auto px-4">
250
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
251
+ <!-- 公司信息 -->
252
+ <div>
253
+ <div class="flex items-center mb-4">
254
+ <i class="fas fa-rocket text-purple-500 text-2xl mr-2"></i>
255
+ <span class="font-semibold text-xl">科技解决方案</span>
256
+ </div>
257
+ <p class="text-gray-400 mb-4">创新科技解决方案，助力企业在数字世界中成长和成功。</p>
258
+ <div class="flex space-x-4">
259
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
260
+ <i class="fab fa-weixin"></i>
261
+ </a>
262
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
263
+ <i class="fab fa-weibo"></i>
264
+ </a>
265
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
266
+ <i class="fab fa-linkedin-in"></i>
267
+ </a>
268
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
269
+ <i class="fab fa-tiktok"></i>
270
+ </a>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- 快速链接 -->
275
+ <div>
276
+ <h3 class="text-lg font-semibold mb-4">快速链接</h3>
277
+ <ul class="space-y-2">
278
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">首页</a></li>
279
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">服务</a></li>
280
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">关于我们</a></li>
281
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">成功案例</a></li>
282
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">联系我们</a></li>
283
+ </ul>
284
+ </div>
285
+
286
+ <!-- 服务 -->
287
+ <div>
288
+ <h3 class="text-lg font-semibold mb-4">服务项目</h3>
289
+ <ul class="space-y-2">
290
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">网站开发</a></li>
291
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">移动应用开发</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX设计</a></li>
293
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">数字营销</a></li>
294
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">SEO优化</a></li>
295
+ </ul>
296
+ </div>
297
+
298
+ <!-- 联系我们 -->
299
+ <div>
300
+ <h3 class="text-lg font-semibold mb-4">联系我们</h3>
301
+ <ul class="space-y-3">
302
+ <li class="flex items-start">
303
+ <i class="fas fa-map-marker-alt text-purple-500 mt-1 mr-3"></i>
304
+ <span class="text-gray-400">中国北京市海淀区科技园路88号</span>
305
+ </li>
306
+ <li class="flex items-center">
307
+ <i class="fas fa-phone-alt text-purple-500 mr-3"></i>
308
+ <span class="text-gray-400">400-888-8888</span>
309
+ </li>
310
+ <li class="flex items-center">
311
+ <i class="fas fa-envelope text-purple-500 mr-3"></i>
312
+ <span class="text-gray-400">info@techsolutions.cn</span>
313
+ </li>
314
+ </ul>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
319
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 科技解决方案 版权所有</p>
320
+ <div class="flex space-x-6">
321
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">隐私政策</a>
322
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">服务条款</a>
323
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">网站地图</a>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </footer>
328
+
329
+ <script>
330
+ // 移动端菜单切换
331
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
332
+ const mobileMenu = document.getElementById('mobile-menu');
333
+
334
+ mobileMenuButton.addEventListener('click', () => {
335
+ mobileMenu.classList.toggle('open');
336
+ });
337
+
338
+ // 锚点平滑滚动
339
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
340
+ anchor.addEventListener('click', function (e) {
341
+ e.preventDefault();
342
+
343
+ const targetId = this.getAttribute('href');
344
+ if (targetId === '#') return;
345
+
346
+ const targetElement = document.querySelector(targetId);
347
+ if (targetElement) {
348
+ window.scrollTo({
349
+ top: targetElement.offsetTop - 80,
350
+ behavior: 'smooth'
351
+ });
352
+
353
+ // 如果移动菜单打开则关闭
354
+ mobileMenu.classList.remove('open');
355
+ }
356
+ });
357
+ });
358
+
359
+ // 滚动时给导航栏添加阴影
360
+ window.addEventListener('scroll', function() {
361
+ const nav = document.querySelector('nav');
362
+ if (window.scrollY > 10) {
363
+ nav.classList.add('shadow-lg');
364
+ } else {
365
+ nav.classList.remove('shadow-lg');
366
+ }
367
+ });
368
+ </script>
369
+ <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=shengzi/myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
370
+ </html>