Hugging Face's logo

Spaces:
CYXiaofeng
/
second-care
Running

App Files Community
CYXiaofeng commited on
Commit
762d990
·
verified ·
1 Parent(s): 168d560

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +666 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Second Care
3
- emoji: 💻
4
  colorFrom: pink
5
- colorTo: blue
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: second-care
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: purple
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,666 @@
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
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans SC', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero {
18
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1680&q=80');
19
+ background-size: cover;
20
+ background-position: center;
21
+ }
22
+
23
+ .service-card:hover {
24
+ transform: translateY(-10px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+
28
+ .testimonial-card {
29
+ background: rgba(255, 255, 255, 0.9);
30
+ backdrop-filter: blur(10px);
31
+ }
32
+
33
+ .nav-link {
34
+ position: relative;
35
+ }
36
+
37
+ .nav-link:after {
38
+ content: '';
39
+ position: absolute;
40
+ width: 0;
41
+ height: 2px;
42
+ bottom: 0;
43
+ left: 0;
44
+ background-color: #3b82f6;
45
+ transition: width 0.3s ease;
46
+ }
47
+
48
+ .nav-link:hover:after {
49
+ width: 100%;
50
+ }
51
+
52
+ /* 新增动画效果 */
53
+ @keyframes fadeInUp {
54
+ from {
55
+ opacity: 0;
56
+ transform: translateY(20px);
57
+ }
58
+ to {
59
+ opacity: 1;
60
+ transform: translateY(0);
61
+ }
62
+ }
63
+
64
+ .animate-fadeInUp {
65
+ animation: fadeInUp 0.8s ease forwards;
66
+ }
67
+
68
+ .service-image {
69
+ height: 250px;
70
+ object-fit: cover;
71
+ transition: transform 0.5s ease;
72
+ }
73
+
74
+ .service-card:hover .service-image {
75
+ transform: scale(1.05);
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-50">
80
+ <!-- 导航栏 -->
81
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <div class="flex justify-between h-20">
84
+ <div class="flex items-center">
85
+ <div class="flex-shrink-0 flex items-center">
86
+ <i class="fas fa-heartbeat text-blue-500 text-3xl mr-2"></i>
87
+ <span class="text-xl font-bold text-gray-800">安康养老</span>
88
+ </div>
89
+ </div>
90
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
91
+ <a href="#home" class="nav-link text-gray-800 hover:text-blue-500 px-3 py-2 text-sm font-medium">首页</a>
92
+ <a href="#services" class="nav-link text-gray-800 hover:text-blue-500 px-3 py-2 text-sm font-medium">服务项目</a>
93
+ <a href="#about" class="nav-link text-gray-800 hover:text-blue-500 px-3 py-2 text-sm font-medium">关于我们</a>
94
+ <a href="#testimonials" class="nav-link text-gray-800 hover:text-blue-500 px-3 py-2 text-sm font-medium">客户评价</a>
95
+ <a href="#contact" class="nav-link text-gray-800 hover:text-blue-500 px-3 py-2 text-sm font-medium">联系我们</a>
96
+ <a href="tel:400-123-4567" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
97
+ <i class="fas fa-phone-alt mr-1"></i> 400-123-4567
98
+ </a>
99
+ </div>
100
+ <div class="-mr-2 flex items-center md:hidden">
101
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
102
+ <span class="sr-only">打开主菜单</span>
103
+ <i class="fas fa-bars text-xl"></i>
104
+ </button>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- 移动端菜单 -->
110
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
111
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
112
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-800 hover:text-blue-500 hover:bg-gray-50">首页</a>
113
+ <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-800 hover:text-blue-500 hover:bg-gray-50">服务项目</a>
114
+ <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-800 hover:text-blue-500 hover:bg-gray-50">关于我们</a>
115
+ <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-800 hover:text-blue-500 hover:bg-gray-50">客户评价</a>
116
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-800 hover:text-blue-500 hover:bg-gray-50">联系我们</a>
117
+ <a href="tel:400-123-4567" class="block px-3 py-2 text-base font-medium text-blue-500 hover:bg-gray-50">
118
+ <i class="fas fa-phone-alt mr-1"></i> 400-123-4567
119
+ </a>
120
+ </div>
121
+ </div>
122
+ </nav>
123
+
124
+ <!-- 英雄区域 -->
125
+ <section id="home" class="hero text-white py-20 md:py-32">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
+ <div class="md:w-2/3 lg:w-1/2 animate-fadeInUp">
128
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">专业养老护理服务</h1>
129
+ <p class="text-xl mb-8">我们致力于为长者提供全方位、个性化的养老护理服务，让每一位长者都能享受有尊严、有品质的晚年生活。</p>
130
+ <div class="flex flex-col sm:flex-row gap-4">
131
+ <a href="#contact" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-md text-lg font-medium text-center transition duration-300">
132
+ <i class="fas fa-envelope mr-2"></i> 预约咨询
133
+ </a>
134
+ <a href="tel:400-123-4567" class="bg-white hover:bg-gray-100 text-blue-500 px-8 py-3 rounded-md text-lg font-medium text-center transition duration-300">
135
+ <i class="fas fa-phone-alt mr-2"></i> 立即致电
136
+ </a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- 服务特色 -->
143
+ <section class="bg-white py-16">
144
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
145
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
146
+ <div class="bg-blue-50 p-8 rounded-lg flex items-start animate-fadeInUp" style="animation-delay: 0.2s;">
147
+ <div class="bg-blue-100 p-4 rounded-full mr-4">
148
+ <i class="fas fa-user-md text-blue-500 text-2xl"></i>
149
+ </div>
150
+ <div>
151
+ <h3 class="text-xl font-bold text-gray-800 mb-2">专业护理团队</h3>
152
+ <p class="text-gray-600">由资深医护人员组成的专业团队，提供24小时全天候护理服务。</p>
153
+ </div>
154
+ </div>
155
+ <div class="bg-green-50 p-8 rounded-lg flex items-start animate-fadeInUp" style="animation-delay: 0.4s;">
156
+ <div class="bg-green-100 p-4 rounded-full mr-4">
157
+ <i class="fas fa-home text-green-500 text-2xl"></i>
158
+ </div>
159
+ <div>
160
+ <h3 class="text-xl font-bold text-gray-800 mb-2">舒适居住环境</h3>
161
+ <p class="text-gray-600">现代化适老化设施，营造温馨如家的居住体验。</p>
162
+ </div>
163
+ </div>
164
+ <div class="bg-purple-50 p-8 rounded-lg flex items-start animate-fadeInUp" style="animation-delay: 0.6s;">
165
+ <div class="bg-purple-100 p-4 rounded-full mr-4">
166
+ <i class="fas fa-heart text-purple-500 text-2xl"></i>
167
+ </div>
168
+ <div>
169
+ <h3 class="text-xl font-bold text-gray-800 mb-2">个性化服务方案</h3>
170
+ <p class="text-gray-600">根据每位长者的需求定制专属护理计划。</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- 服务项目 -->
178
+ <section id="services" class="bg-gray-50 py-16">
179
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
180
+ <div class="text-center mb-12">
181
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">我们的服务项目</h2>
182
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
183
+ </div>
184
+
185
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
186
+ <!-- 服务卡片1 -->
187
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.2s;">
188
+ <div class="overflow-hidden">
189
+ <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="居家养老" class="w-full service-image">
190
+ </div>
191
+ <div class="p-6">
192
+ <div class="flex items-center mb-4">
193
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
194
+ <i class="fas fa-home text-blue-500 text-xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold text-gray-800">居家养老护理</h3>
197
+ </div>
198
+ <p class="text-gray-600 mb-4">为选择在家养老的长者提供专业的上门护理服务，包括日常生活照料、医疗护理、康复训练等。</p>
199
+ <ul class="text-gray-600 space-y-2 mb-4">
200
+ <li class="flex items-start">
201
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
202
+ <span>24小时生活照料</span>
203
+ </li>
204
+ <li class="flex items-start">
205
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
206
+ <span>专业医疗护理</span>
207
+ </li>
208
+ <li class="flex items-start">
209
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
210
+ <span>康复训练指导</span>
211
+ </li>
212
+ </ul>
213
+ <a href="#contact" class="text-blue-500 font-medium inline-flex items-center group">
214
+ 了解更多 <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform duration-300"></i>
215
+ </a>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- 服务卡片2 -->
220
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.4s;">
221
+ <div class="overflow-hidden">
222
+ <img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="机构养老" class="w-full service-image">
223
+ </div>
224
+ <div class="p-6">
225
+ <div class="flex items-center mb-4">
226
+ <div class="bg-green-100 p-2 rounded-full mr-3">
227
+ <i class="fas fa-hospital text-green-500 text-xl"></i>
228
+ </div>
229
+ <h3 class="text-xl font-bold text-gray-800">养老机构护理</h3>
230
+ </div>
231
+ <p class="text-gray-600 mb-4">提供高品质的机构养老服务，配备专业护理团队和现代化设施，打造安全舒适的养老环境。</p>
232
+ <ul class="text-gray-600 space-y-2 mb-4">
233
+ <li class="flex items-start">
234
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
235
+ <span>专业医疗团队</span>
236
+ </li>
237
+ <li class="flex items-start">
238
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
239
+ <span>适老化居住环境</span>
240
+ </li>
241
+ <li class="flex items-start">
242
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
243
+ <span>丰富多彩的文娱活动</span>
244
+ </li>
245
+ </ul>
246
+ <a href="#contact" class="text-blue-500 font-medium inline-flex items-center group">
247
+ 了解更多 <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform duration-300"></i>
248
+ </a>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- 服务卡片3 - 修复后的术后康复护理 -->
253
+ <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.6s;">
254
+ <div class="overflow-hidden">
255
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="康复护理" class="w-full service-image">
256
+ </div>
257
+ <div class="p-6">
258
+ <div class="flex items-center mb-4">
259
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
260
+ <i class="fas fa-procedures text-purple-500 text-xl"></i>
261
+ </div>
262
+ <h3 class="text-xl font-bold text-gray-800">术后康复护理</h3>
263
+ </div>
264
+ <p class="text-gray-600 mb-4">为术后或疾病康复期的长者提供专业康复护理，帮助恢复身体机能，提高生活质量。</p>
265
+ <ul class="text-gray-600 space-y-2 mb-4">
266
+ <li class="flex items-start">
267
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
268
+ <span>专业康复计划</span>
269
+ </li>
270
+ <li class="flex items-start">
271
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
272
+ <span>物理治疗与训练</span>
273
+ </li>
274
+ <li class="flex items-start">
275
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
276
+ <span>营养膳食指导</span>
277
+ </li>
278
+ </ul>
279
+ <a href="#contact" class="text-blue-500 font-medium inline-flex items-center group">
280
+ 了解更多 <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform duration-300"></i>
281
+ </a>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <!-- 关于我们 -->
289
+ <section id="about" class="bg-white py-16">
290
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
291
+ <div class="flex flex-col lg:flex-row items-center">
292
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10 animate-fadeInUp">
293
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="关于安康养老" class="rounded-lg shadow-lg w-full">
294
+ </div>
295
+ <div class="lg:w-1/2 animate-fadeInUp" style="animation-delay: 0.3s;">
296
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">关于安康养老</h2>
297
+ <p class="text-gray-600 mb-6">安康养老成立于2010年，是经民政部门批准设立的专业养老护理服务机构。十余年来，我们始终秉承"专业、爱心、责任"的服务理念，致力于为长者提供高品质的养老护理服务。</p>
298
+
299
+ <div class="mb-6">
300
+ <h3 class="text-xl font-bold text-gray-800 mb-3">我们的使命</h3>
301
+ <p class="text-gray-600">让每一位长者都能享受有尊严、有品质的晚年生活，为家庭解决养老后顾之忧。</p>
302
+ </div>
303
+
304
+ <div class="mb-6">
305
+ <h3 class="text-xl font-bold text-gray-800 mb-3">我们的优势</h3>
306
+ <ul class="text-gray-600 space-y-2">
307
+ <li class="flex items-start">
308
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
309
+ <span>专业医护团队：拥有50余名专业医护人员，平均从业经验8年以上</span>
310
+ </li>
311
+ <li class="flex items-start">
312
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
313
+ <span>标准化服务：建立完善的服务质量标准和操作规范</span>
314
+ </li>
315
+ <li class="flex items-start">
316
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
317
+ <span>个性化方案：为每位长者定制专属护理计划</span>
318
+ </li>
319
+ <li class="flex items-start">
320
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
321
+ <span>先进设施：配备现代化适老化设施和医疗设备</span>
322
+ </li>
323
+ </ul>
324
+ </div>
325
+
326
+ <div class="flex flex-wrap gap-4">
327
+ <div class="bg-blue-50 px-6 py-4 rounded-lg text-center transition duration-300 hover:shadow-md">
328
+ <div class="text-3xl font-bold text-blue-500 mb-1">10+</div>
329
+ <div class="text-gray-600">年服务经验</div>
330
+ </div>
331
+ <div class="bg-green-50 px-6 py-4 rounded-lg text-center transition duration-300 hover:shadow-md">
332
+ <div class="text-3xl font-bold text-green-500 mb-1">500+</div>
333
+ <div class="text-gray-600">服务长者</div>
334
+ </div>
335
+ <div class="bg-purple-50 px-6 py-4 rounded-lg text-center transition duration-300 hover:shadow-md">
336
+ <div class="text-3xl font-bold text-purple-500 mb-1">50+</div>
337
+ <div class="text-gray-600">专业团队</div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
344
+
345
+ <!-- 客户评价 -->
346
+ <section id="testimonials" class="bg-gray-100 py-16">
347
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
348
+ <div class="text-center mb-12">
349
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">客户评价</h2>
350
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
351
+ </div>
352
+
353
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
354
+ <!-- 评价1 -->
355
+ <div class="testimonial-card p-8 rounded-lg shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.2s;">
356
+ <div class="flex items-center mb-4">
357
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="张女士" class="w-12 h-12 rounded-full mr-4">
358
+ <div>
359
+ <h4 class="font-bold text-gray-800">张女士</h4>
360
+ <div class="flex text-yellow-400">
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ <p class="text-gray-600 italic">"我母亲在安康养老已经住了两年多，护理人员非常专业细心，环境也很舒适。母亲的身体状况比之前在家时好了很多，我们全家都很放心。"</p>
370
+ </div>
371
+
372
+ <!-- 评价2 -->
373
+ <div class="testimonial-card p-8 rounded-lg shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.4s;">
374
+ <div class="flex items-center mb-4">
375
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="李先生" class="w-12 h-12 rounded-full mr-4">
376
+ <div>
377
+ <h4 class="font-bold text-gray-800">李先生</h4>
378
+ <div class="flex text-yellow-400">
379
+ <i class="fas fa-star"></i>
380
+ <i class="fas fa-star"></i>
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <p class="text-gray-600 italic">"父亲术后需要专业康复护理，我们选择了安康养老的上门服务。护理人员不仅专业，而且很有耐心，父亲的康复进度比医生预期的还要好。"</p>
388
+ </div>
389
+
390
+ <!-- 评价3 -->
391
+ <div class="testimonial-card p-8 rounded-lg shadow-md transition duration-300 animate-fadeInUp" style="animation-delay: 0.6s;">
392
+ <div class="flex items-center mb-4">
393
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="王女士" class="w-12 h-12 rounded-full mr-4">
394
+ <div>
395
+ <h4 class="font-bold text-gray-800">王女士</h4>
396
+ <div class="flex text-yellow-400">
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ <i class="fas fa-star"></i>
401
+ <i class="fas fa-star-half-alt"></i>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <p class="text-gray-600 italic">"作为独居老人，安康养老的日间照料服务给了我很大帮助。不仅有人照顾我的日常生活，还能参加各种活动，认识新朋友，生活变得丰富多彩。"</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </section>
410
+
411
+ <!-- 联系我们 -->
412
+ <section id="contact" class="bg-white py-16">
413
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
414
+ <div class="text-center mb-12">
415
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">联系我��</h2>
416
+ <div class="w-20 h-1 bg-blue-500 mx-auto"></div>
417
+ </div>
418
+
419
+ <div class="flex flex-col lg:flex-row gap-12">
420
+ <div class="lg:w-1/2 animate-fadeInUp">
421
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">预约咨询</h3>
422
+
423
+ <form class="space-y-6">
424
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
425
+ <div>
426
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
427
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
428
+ </div>
429
+ <div>
430
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
431
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
432
+ </div>
433
+ </div>
434
+
435
+ <div>
436
+ <label for="service" class="block text-sm font-medium text-gray-700 mb-1">咨询项目</label>
437
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
438
+ <option value="">请选择服务项目</option>
439
+ <option value="home-care">居家养老护理</option>
440
+ <option value="institution-care">养老机构护理</option>
441
+ <option value="rehabilitation">术后康复护理</option>
442
+ <option value="other">其他服务</option>
443
+ </select>
444
+ </div>
445
+
446
+ <div>
447
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言</label>
448
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
449
+ </div>
450
+
451
+ <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-md text-lg font-medium transition duration-300">
452
+ <i class="fas fa-paper-plane mr-2"></i> 提交预约
453
+ </button>
454
+ </form>
455
+ </div>
456
+
457
+ <div class="lg:w-1/2 animate-fadeInUp" style="animation-delay: 0.3s;">
458
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">联系方式</h3>
459
+
460
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
461
+ <div class="flex items-start mb-6">
462
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
463
+ <i class="fas fa-map-marker-alt text-blue-500 text-xl"></i>
464
+ </div>
465
+ <div>
466
+ <h4 class="text-lg font-bold text-gray-800 mb-1">机构地址</h4>
467
+ <p class="text-gray-600">北京市朝阳区建国路88号安康养老中心</p>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="flex items-start mb-6">
472
+ <div class="bg-green-100 p-3 rounded-full mr-4">
473
+ <i class="fas fa-phone-alt text-green-500 text-xl"></i>
474
+ </div>
475
+ <div>
476
+ <h4 class="text-lg font-bold text-gray-800 mb-1">联系电话</h4>
477
+ <p class="text-gray-600">400-123-4567</p>
478
+ <p class="text-gray-600">010-87654321</p>
479
+ </div>
480
+ </div>
481
+
482
+ <div class="flex items-start mb-6">
483
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
484
+ <i class="fas fa-envelope text-purple-500 text-xl"></i>
485
+ </div>
486
+ <div>
487
+ <h4 class="text-lg font-bold text-gray-800 mb-1">电子邮箱</h4>
488
+ <p class="text-gray-600">info@ankangyiliao.com</p>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="flex items-start">
493
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
494
+ <i class="fas fa-clock text-yellow-500 text-xl"></i>
495
+ </div>
496
+ <div>
497
+ <h4 class="text-lg font-bold text-gray-800 mb-1">营业时间</h4>
498
+ <p class="text-gray-600">周一至周日: 8:00 - 20:00</p>
499
+ <p class="text-gray-600">24小时紧急联系电话: 138-1234-5678</p>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="mt-8">
505
+ <h4 class="text-lg font-bold text-gray-800 mb-4">关注我们</h4>
506
+ <div class="flex space-x-4">
507
+ <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300">
508
+ <i class="fab fa-weixin text-xl"></i>
509
+ </a>
510
+ <a href="#" class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition duration-300">
511
+ <i class="fab fa-weibo text-xl"></i>
512
+ </a>
513
+ <a href="#" class="bg-red-500 text-white p-3 rounded-full hover:bg-red-600 transition duration-300">
514
+ <i class="fab fa-youtube text-xl"></i>
515
+ </a>
516
+ <a href="#" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition duration-300">
517
+ <i class="fab fa-tiktok text-xl"></i>
518
+ </a>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </section>
525
+
526
+ <!-- 地图 -->
527
+ <div class="bg-gray-100">
528
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
529
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.365373383018!2d116.4823153157155!3d39.91348207942468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f1ac9e6a555555%3A0x9a9a9a9a9a9a9a9a!2z5YyX5rW35aSn5a2m!5e0!3m2!1szh-CN!2scn!4v1620000000000!5m2!1szh-CN!2scn" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-md"></iframe>
530
+ </div>
531
+ </div>
532
+
533
+ <!-- 页脚 -->
534
+ <footer class="bg-gray-800 text-white py-12">
535
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
536
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
537
+ <div>
538
+ <div class="flex items-center mb-4">
539
+ <i class="fas fa-heartbeat text-blue-400 text-3xl mr-2"></i>
540
+ <span class="text-xl font-bold">安康养老</span>
541
+ </div>
542
+ <p class="text-gray-400">专业养老护理服务机构，十余年服务经验，为长者提供高品质的养老护理服务。</p>
543
+ </div>
544
+
545
+ <div>
546
+ <h4 class="text-lg font-bold mb-4">快速链接</h4>
547
+ <ul class="space-y-2">
548
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">首页</a></li>
549
+ <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">服务项目</a></li>
550
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">关于我们</a></li>
551
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">客户评价</a></li>
552
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">联系我们</a></li>
553
+ </ul>
554
+ </div>
555
+
556
+ <div>
557
+ <h4 class="text-lg font-bold mb-4">服务项目</h4>
558
+ <ul class="space-y-2">
559
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">居家养老护理</a></li>
560
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">养老机构护理</a></li>
561
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">术后康复护理</a></li>
562
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">日间照料服务</a></li>
563
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">老年痴呆症护理</a></li>
564
+ </ul>
565
+ </div>
566
+
567
+ <div>
568
+ <h4 class="text-lg font-bold mb-4">联系方式</h4>
569
+ <ul class="space-y-2 text-gray-400">
570
+ <li class="flex items-start">
571
+ <i class="fas fa-map-marker-alt mt-1 mr-2 text-blue-400"></i>
572
+ <span>北京市朝阳区建国路88号</span>
573
+ </li>
574
+ <li class="flex items-start">
575
+ <i class="fas fa-phone-alt mt-1 mr-2 text-blue-400"></i>
576
+ <span>400-123-4567</span>
577
+ </li>
578
+ <li class="flex items-start">
579
+ <i class="fas fa-envelope mt-1 mr-2 text-blue-400"></i>
580
+ <span>info@ankangyiliao.com</span>
581
+ </li>
582
+ </ul>
583
+ </div>
584
+ </div>
585
+
586
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
587
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 安康养老护理服务有限公司 版权所有</p>
588
+ <div class="flex space-x-6">
589
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">隐私政策</a>
590
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">服务条款</a>
591
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">资质证书</a>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </footer>
596
+
597
+ <!-- 返回顶部按钮 -->
598
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition duration-300 opacity-0 invisible">
599
+ <i class="fas fa-arrow-up text-xl"></i>
600
+ </button>
601
+
602
+ <script>
603
+ // 移动端菜单切换
604
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
605
+ const mobileMenu = document.getElementById('mobile-menu');
606
+
607
+ mobileMenuButton.addEventListener('click', () => {
608
+ mobileMenu.classList.toggle('hidden');
609
+ });
610
+
611
+ // 平滑滚动
612
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
613
+ anchor.addEventListener('click', function (e) {
614
+ e.preventDefault();
615
+
616
+ mobileMenu.classList.add('hidden');
617
+
618
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
619
+ behavior: 'smooth'
620
+ });
621
+ });
622
+ });
623
+
624
+ // 返回顶部按钮
625
+ const backToTopButton = document.getElementById('back-to-top');
626
+
627
+ window.addEventListener('scroll', () => {
628
+ if (window.pageYOffset > 300) {
629
+ backToTopButton.classList.remove('opacity-0', 'invisible');
630
+ backToTopButton.classList.add('opacity-100', 'visible');
631
+ } else {
632
+ backToTopButton.classList.remove('opacity-100', 'visible');
633
+ backToTopButton.classList.add('opacity-0', 'invisible');
634
+ }
635
+ });
636
+
637
+ backToTopButton.addEventListener('click', () => {
638
+ window.scrollTo({
639
+ top: 0,
640
+ behavior: 'smooth'
641
+ });
642
+ });
643
+
644
+ // 添加滚动动画
645
+ const animateElements = document.querySelectorAll('.animate-fadeInUp');
646
+
647
+ const animateOnScroll = () => {
648
+ animateElements.forEach(element => {
649
+ const elementTop = element.getBoundingClientRect().top;
650
+ const windowHeight = window.innerHeight;
651
+
652
+ if (elementTop < windowHeight - 100) {
653
+ element.style.opacity = '1';
654
+ element.style.transform = 'translateY(0)';
655
+ }
656
+ });
657
+ };
658
+
659
+ // 初始加载时执行一次
660
+ animateOnScroll();
661
+
662
+ // 滚动时执行
663
+ window.addEventListener('scroll', animateOnScroll);
664
+ </script>
665
+ <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=CYXiaofeng/second-care" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
666
+ </html>