Hugging Face's logo

Spaces:
CYXiaofeng
/
care
Running

App Files Community
CYXiaofeng commited on
Commit
0f3dcd5
·
verified ·
1 Parent(s): 03be185

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +116 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Care
3
- emoji: 😻
4
- colorFrom: gray
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: care
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,116 @@
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
+ /* 自定义动画 */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ /* 自定义滚动条 */
21
+ ::-webkit-scrollbar {
22
+ width: 8px;
23
+ }
24
+
25
+ ::-webkit-scrollbar-track {
26
+ background: #f1f1f1;
27
+ }
28
+
29
+ ::-webkit-scrollbar-thumb {
30
+ background: #4f46e5;
31
+ border-radius: 4px;
32
+ }
33
+
34
+ /* 悬停效果 */
35
+ .service-card:hover {
36
+ transform: translateY(-10px);
37
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
38
+ }
39
+
40
+ /* 响应式调整 */
41
+ @media (max-width: 768px) {
42
+ .hero-text {
43
+ font-size: 2rem !important;
44
+ }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="font-sans bg-gray-50 text-gray-800">
49
+ <!-- 导航栏 -->
50
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-20">
53
+ <div class="flex items-center">
54
+ <div class="flex-shrink-0 flex items-center">
55
+ <i class="fas fa-heartbeat text-indigo-600 text-3xl mr-2"></i>
56
+ <span class="text-xl font-bold text-indigo-600">安康养老</span>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#home" class="text-indigo-600 hover:text-indigo-800 px-3 py-2 font-medium">首页</a>
61
+ <a href="#services" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">服务项目</a>
62
+ <a href="#about" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">关于我们</a>
63
+ <a href="#team" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">专业团队</a>
64
+ <a href="#contact" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">联系我们</a>
65
+ <a href="#appointment" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-300">预约咨询</a>
66
+ </div>
67
+ <div class="md:hidden flex items-center">
68
+ <button id="menu-btn" class="text-gray-600 hover:text-indigo-600 focus:outline-none">
69
+ <i class="fas fa-bars text-2xl"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- 移动端菜单 -->
76
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
77
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
78
+ <a href="#home" class="block px-3 py-2 text-base font-medium text-indigo-600">首页</a>
79
+ <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">服务项目</a>
80
+ <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">关于我们</a>
81
+ <a href="#team" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">专业团队</a>
82
+ <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">联系我们</a>
83
+ <a href="#appointment" class="block px-3 py-2 text-base font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">预约咨询</a>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- 英雄区域 -->
89
+ <section id="home" class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20 md:py-32">
90
+ <div class="absolute inset-0 opacity-20">
91
+ <div class="absolute inset-0 bg-black"></div>
92
+ </div>
93
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
94
+ <div class="md:flex items-center">
95
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
96
+ <h1 class="hero-text text-4xl md:text-5xl font-bold leading-tight mb-6">专业养老护理服务<br>让晚年生活更美好</h1>
97
+ <p class="text-xl mb-8 opacity-90">我们提供全方位的养老护理解决方案，让您的家人享受专业、贴心的照护服务。</p>
98
+ <div class="flex space-x-4">
99
+ <a href="#services" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">了解服务</a>
100
+ <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-indigo-600 transition duration-300">联系我们</a>
101
+ </div>
102
+ </div>
103
+ <div class="md:w-1/2 fade-in" style="animation-delay: 0.3s;">
104
+ <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="养老护理" class="rounded-lg shadow-2xl">
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- 特色服务 -->
111
+ <section class="py-16 bg-white">
112
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
113
+ <div class="text-center mb-16">
114
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">为什么选择我们</h2>
115
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">我们致力于为老年人提供
116
+ </html>