Hugging Face's logo

Spaces:
maomaobj
/
home1
Running

App Files Community
maomaobj commited on
Commit
2d93d0f
·
verified ·
1 Parent(s): 2b68bf0

把右侧滚动条去掉；把“我的”修改为“问管家”，把“订单”修改为“我的” - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +294 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Home1
3
- emoji: 😻
4
- colorFrom: blue
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: home1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,294 @@
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
+ colors: {
14
+ 'elegant-tan': '#d2b48c',
15
+ 'soft-tan': '#e6d5b8',
16
+ 'light-gray': '#f5f5f5'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
24
+
25
+ body {
26
+ font-family: 'Noto Sans SC', sans-serif;
27
+ background-color: #f9f9f9;
28
+ -webkit-tap-highlight-color: transparent;
29
+ overflow-y: hidden;
30
+ }
31
+
32
+ .device-card {
33
+ transition: all 0.3s ease;
34
+ transform: translateY(0);
35
+ }
36
+
37
+ .device-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
40
+ }
41
+
42
+ .message-item {
43
+ animation: fadeIn 0.5s ease forwards;
44
+ }
45
+
46
+ @keyframes fadeIn {
47
+ from { opacity: 0; transform: translateY(10px); }
48
+ to { opacity: 1; transform: translateY(0); }
49
+ }
50
+
51
+ .nav-item.active {
52
+ position: relative;
53
+ }
54
+
55
+ .nav-item.active::after {
56
+ content: '';
57
+ position: absolute;
58
+ bottom: -5px;
59
+ left: 50%;
60
+ transform: translateX(-50%);
61
+ width: 6px;
62
+ height: 6px;
63
+ background-color: #a52a2a;
64
+ border-radius: 50%;
65
+ }
66
+
67
+ .status-indicator {
68
+ width: 10px;
69
+ height: 10px;
70
+ border-radius: 50%;
71
+ display: inline-block;
72
+ margin-right: 5px;
73
+ }
74
+
75
+ .status-online {
76
+ background-color: #4CAF50;
77
+ }
78
+
79
+ .status-offline {
80
+ background-color: #9E9E9E;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-50 pb-20">
85
+ <!-- Top Greeting Section -->
86
+ <div class="bg-gradient-to-r from-soft-tan to-elegant-tan px-6 pt-6 pb-6 rounded-b-2xl shadow-sm text-white">
87
+ <div class="flex justify-between items-center">
88
+ <div>
89
+ <h1 class="text-2xl font-bold">HI, 智能管家用户</h1>
90
+ <p class="text-white text-opacity-80 mt-1">133****8888</p>
91
+ </div>
92
+ </div>
93
+
94
+ <div class="mt-4">
95
+ <div class="flex justify-between items-center">
96
+ <div>
97
+ <p class="text-sm text-white text-opacity-90">今日室内环境</p>
98
+ <p class="text-xl font-bold mt-1">舒适</p>
99
+ </div>
100
+ <div class="text-right">
101
+ <p class="text-sm text-white text-opacity-90">温度: 24°C</p>
102
+ <p class="text-sm text-white text-opacity-90">湿度: 45%</p>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- My Devices Section -->
109
+ <div class="px-6 mt-6">
110
+ <div class="flex justify-between items-center mb-4">
111
+ <h2 class="text-xl font-bold text-gray-800">我的设备</h2>
112
+ <span class="text-elegant-tan text-sm">管理</span>
113
+ </div>
114
+
115
+ <!-- Device Grid (3x3) -->
116
+ <div class="grid grid-cols-3 gap-4">
117
+ <!-- Air Conditioner -->
118
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
119
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
120
+ <i class="fas fa-wind text-elegant-red text-xl"></i>
121
+ </div>
122
+ <p class="mt-2 text-gray-700 font-medium">空调</p>
123
+ </div>
124
+
125
+ <!-- Refrigerator -->
126
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
127
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
128
+ <i class="fas fa-temperature-low text-elegant-red text-xl"></i>
129
+ </div>
130
+ <p class="mt-2 text-gray-700 font-medium">冰箱</p>
131
+ </div>
132
+
133
+ <!-- Dishwasher -->
134
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
135
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
136
+ <i class="fas fa-soap text-elegant-red text-xl"></i>
137
+ </div>
138
+ <p class="mt-2 text-gray-700 font-medium">洗碗机</p>
139
+ </div>
140
+
141
+ <!-- Dryer -->
142
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
143
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
144
+ <i class="fas fa-tint text-elegant-red text-xl"></i>
145
+ </div>
146
+ <p class="mt-2 text-gray-700 font-medium">烘干机</p>
147
+ </div>
148
+
149
+ <!-- Smart Lock -->
150
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
151
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
152
+ <i class="fas fa-lock text-elegant-red text-xl"></i>
153
+ </div>
154
+ <p class="mt-2 text-gray-700 font-medium">智能门锁</p>
155
+ </div>
156
+
157
+ <!-- Water Heater -->
158
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
159
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
160
+ <i class="fas fa-fire text-elegant-red text-xl"></i>
161
+ </div>
162
+ <p class="mt-2 text-gray-700 font-medium">热水器</p>
163
+ </div>
164
+
165
+ <!-- Air Purifier -->
166
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
167
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
168
+ <i class="fas fa-fan text-elegant-red text-xl"></i>
169
+ </div>
170
+ <p class="mt-2 text-gray-700 font-medium">空气净化器</p>
171
+ </div>
172
+
173
+ <!-- Washing Machine -->
174
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
175
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
176
+ <i class="fas fa-tshirt text-elegant-red text-xl"></i>
177
+ </div>
178
+ <p class="mt-2 text-gray-700 font-medium">洗衣机</p>
179
+ </div>
180
+
181
+ <!-- Robot Vacuum -->
182
+ <div class="device-card bg-white rounded-xl shadow-sm p-4 text-center">
183
+ <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mx-auto">
184
+ <i class="fas fa-robot text-elegant-red text-xl"></i>
185
+ </div>
186
+ <p class="mt-2 text-gray-700 font-medium">扫地机器人</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Home Assistant Messages -->
192
+ <div class="px-6 mt-8">
193
+ <div class="flex justify-between items-center mb-4">
194
+ <h2 class="text-xl font-bold text-gray-800">爱家消息</h2>
195
+ <span class="text-elegant-tan text-sm">更多</span>
196
+ </div>
197
+
198
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
199
+ <!-- Message 1 -->
200
+ <div class="message-item border-b border-gray-100 p-4">
201
+ <div class="flex items-start">
202
+ <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3">
203
+ <i class="fas fa-exclamation-circle text-elegant-red"></i>
204
+ </div>
205
+ <div>
206
+ <p class="font-medium text-gray-800">滤芯更换提醒</p>
207
+ <p class="text-gray-500 text-sm mt-1">滤芯剩余寿命7天，请及时更换</p>
208
+ <p class="text-gray-400 text-xs mt-2">今天 09:30</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Message 2 -->
214
+ <div class="message-item border-b border-gray-100 p-4">
215
+ <div class="flex items-start">
216
+ <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3">
217
+ <i class="fas fa-check-circle text-green-500"></i>
218
+ </div>
219
+ <div>
220
+ <p class="font-medium text-gray-800">清洁完成</p>
221
+ <p class="text-gray-500 text-sm mt-1">扫地机器人已完成全屋清洁</p>
222
+ <p class="text-gray-400 text-xs mt-2">昨天 18:45</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Message 3 -->
228
+ <div class="message-item p-4">
229
+ <div class="flex items-start">
230
+ <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center mr-3">
231
+ <i class="fas fa-bolt text-yellow-500"></i>
232
+ </div>
233
+ <div>
234
+ <p class="font-medium text-gray-800">节能模式</p>
235
+ <p class="text-gray-500 text-sm mt-1">空调已自动切换至节能模式</p>
236
+ <p class="text-gray-400 text-xs mt-2">昨天 14:20</p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Bottom Navigation -->
244
+ <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-3">
245
+ <div class="nav-item active flex flex-col items-center text-elegant-tan">
246
+ <i class="fas fa-home text-lg"></i>
247
+ <span class="text-xs mt-1">首页</span>
248
+ </div>
249
+ <div class="nav-item flex flex-col items-center text-gray-500">
250
+ <i class="fas fa-user text-lg"></i>
251
+ <span class="text-xs mt-1">问管家</span>
252
+ </div>
253
+ <div class="nav-item flex flex-col items-center text-gray-500">
254
+ <i class="fas fa-concierge-bell text-lg"></i>
255
+ <span class="text-xs mt-1">服务</span>
256
+ </div>
257
+ <div class="nav-item flex flex-col items-center text-gray-500">
258
+ <i class="fas fa-clipboard-list text-lg"></i>
259
+ <span class="text-xs mt-1">我的</span>
260
+ </div>
261
+ </div>
262
+
263
+ <script>
264
+ // Add interactivity to navigation items
265
+ document.querySelectorAll('.nav-item').forEach(item => {
266
+ item.addEventListener('click', function() {
267
+ document.querySelectorAll('.nav-item').forEach(el => {
268
+ el.classList.remove('active');
269
+ el.classList.add('text-gray-500');
270
+ el.classList.remove('text-elegant-tan');
271
+ });
272
+ this.classList.add('active');
273
+ this.classList.remove('text-gray-500');
274
+ this.classList.add('text-elegant-tan');
275
+ });
276
+ });
277
+
278
+ // Add hover effect to device cards
279
+ document.querySelectorAll('.device-card').forEach(card => {
280
+ card.addEventListener('mouseenter', function() {
281
+ this.classList.add('shadow-md');
282
+ });
283
+
284
+ card.addEventListener('mouseleave', function() {
285
+ this.classList.remove('shadow-md');
286
+ });
287
+
288
+ card.addEventListener('click', function() {
289
+ alert('设备详情页面即将打开');
290
+ });
291
+ });
292
+ </script>
293
+ <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=maomaobj/home1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
294
+ </html>