Hugging Face's logo

Spaces:
maomaobj
/
home2
Running

App Files Community
maomaobj commited on
Commit
3584f39
·
verified ·
1 Parent(s): 21c3770

去掉右侧的滚动条 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +504 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Home2
3
- emoji: 🐨
4
- colorFrom: yellow
5
- colorTo: yellow
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: home2
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,504 @@
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
+ primary: {
15
+ 50: '#faf7f0',
16
+ 100: '#f5f0e1',
17
+ 200: '#e8dfca',
18
+ 300: '#d4c0a1',
19
+ 400: '#c0a17a',
20
+ 500: '#b08c5a',
21
+ 600: '#9c7a4c',
22
+ 700: '#806140',
23
+ 800: '#6a5136',
24
+ 900: '#58432e',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
33
+
34
+ body {
35
+ font-family: 'Noto Sans SC', sans-serif;
36
+ -webkit-tap-highlight-color: transparent;
37
+ overflow-y: scroll;
38
+ scrollbar-width: none; /* Firefox */
39
+ -ms-overflow-style: none; /* IE and Edge */
40
+ }
41
+ body::-webkit-scrollbar {
42
+ display: none; /* Chrome, Safari and Opera */
43
+ }
44
+
45
+ .ac-card {
46
+ transition: all 0.3s ease;
47
+ transform-origin: center;
48
+ }
49
+
50
+ .ac-card:hover {
51
+ transform: translateY(-2px);
52
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
53
+ }
54
+
55
+ .toggle-switch {
56
+ position: relative;
57
+ display: inline-block;
58
+ width: 60px;
59
+ height: 30px;
60
+ }
61
+
62
+ .toggle-switch input {
63
+ opacity: 0;
64
+ width: 0;
65
+ height: 0;
66
+ }
67
+
68
+ .toggle-slider {
69
+ position: absolute;
70
+ cursor: pointer;
71
+ top: 0;
72
+ left: 0;
73
+ right: 0;
74
+ bottom: 0;
75
+ background-color: #ccc;
76
+ transition: .4s;
77
+ border-radius: 34px;
78
+ }
79
+
80
+ .toggle-slider:before {
81
+ position: absolute;
82
+ content: "";
83
+ height: 22px;
84
+ width: 22px;
85
+ left: 4px;
86
+ bottom: 4px;
87
+ background-color: white;
88
+ transition: .4s;
89
+ border-radius: 50%;
90
+ }
91
+
92
+ input:checked + .toggle-slider {
93
+ background-color: #b08c5a;
94
+ }
95
+
96
+ input:checked + .toggle-slider:before {
97
+ transform: translateX(30px);
98
+ }
99
+
100
+ .control-indicator {
101
+ position: relative;
102
+ padding-left: 24px;
103
+ }
104
+
105
+ .control-indicator::before {
106
+ content: "";
107
+ position: absolute;
108
+ left: 0;
109
+ top: 50%;
110
+ transform: translateY(-50%);
111
+ width: 18px;
112
+ height: 18px;
113
+ border-radius: 50%;
114
+ background-color: #e8dfca;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ font-size: 10px;
119
+ font-weight: bold;
120
+ }
121
+
122
+ .control-wall::before {
123
+ content: "墙";
124
+ background-color: #d4c0a1;
125
+ }
126
+
127
+ .control-remote::before {
128
+ content: "遥";
129
+ background-color: #c0a17a;
130
+ }
131
+
132
+ .control-app::before {
133
+ content: "A";
134
+ background-color: #b08c5a;
135
+ color: white;
136
+ }
137
+
138
+ .control-voice::before {
139
+ content: "语";
140
+ background-color: #9c7a4c;
141
+ color: white;
142
+ }
143
+
144
+ .status-indicator {
145
+ display: inline-block;
146
+ width: 10px;
147
+ height: 10px;
148
+ border-radius: 50%;
149
+ margin-right: 6px;
150
+ }
151
+
152
+ .status-on {
153
+ background-color: #4ade80;
154
+ }
155
+
156
+ .status-off {
157
+ background-color: #ef4444;
158
+ }
159
+
160
+ .detail-btn {
161
+ transition: all 0.2s ease;
162
+ }
163
+
164
+ .detail-btn:hover {
165
+ color: #9c7a4c;
166
+ }
167
+
168
+ .brand-logo {
169
+ width: 36px;
170
+ height: 36px;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: center;
174
+ border-radius: 8px;
175
+ font-size: 18px;
176
+ }
177
+ </style>
178
+ </head>
179
+ <body class="bg-gray-100 min-h-screen">
180
+ <!-- Header -->
181
+ <header class="bg-white shadow-sm py-4 px-4 sticky top-0 z-10">
182
+ <div class="max-w-2xl mx-auto flex items-center justify-between">
183
+ <button class="text-gray-500">
184
+ <i class="fas fa-arrow-left"></i>
185
+ </button>
186
+ <h1 class="text-xl font-bold text-gray-800">我的空调</h1>
187
+ <button class="text-gray-500">
188
+ <i class="fas fa-plus"></i>
189
+ </button>
190
+ </div>
191
+ </header>
192
+
193
+ <!-- Main Content -->
194
+ <main class="max-w-2xl mx-auto px-4 py-6">
195
+ <!-- Stats Summary -->
196
+ <div class="bg-white rounded-xl shadow p-4 mb-6">
197
+ <div class="flex justify-between items-center">
198
+ <div>
199
+ <p class="text-gray-500 text-sm">已连接设备</p>
200
+ <p class="text-2xl font-bold">4 台</p>
201
+ </div>
202
+ <div class="text-right">
203
+ <p class="text-gray-500 text-sm">当前运行</p>
204
+ <p class="text-2xl font-bold">2 台</p>
205
+ </div>
206
+ <div class="bg-primary-100 p-3 rounded-lg">
207
+ <i class="fas fa-snowflake text-primary-700 text-2xl"></i>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Air Conditioner Cards -->
213
+ <div class="space-y-5">
214
+ <!-- Card 1 -->
215
+ <div class="ac-card bg-white rounded-xl shadow overflow-hidden">
216
+ <div class="p-5">
217
+ <!-- Card Header -->
218
+ <div class="flex justify-between items-start mb-4">
219
+ <div class="brand-logo bg-primary-50 text-primary-700">
220
+ <i class="fas fa-wind"></i>
221
+ </div>
222
+ <div>
223
+ <span class="bg-primary-100 text-primary-700 text-xs font-medium px-2.5 py-0.5 rounded-full">客厅</span>
224
+ <h2 class="text-lg font-bold text-gray-800 mt-1">Gree 格力</h2>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Parameters -->
229
+ <div class="grid grid-cols-2 gap-3 mb-4">
230
+ <div>
231
+ <p class="text-gray-500 text-sm">型号</p>
232
+ <p class="font-medium">KFR-35GW</p>
233
+ </div>
234
+ <div>
235
+ <p class="text-gray-500 text-sm">功率</p>
236
+ <p class="font-medium">1.5HP</p>
237
+ </div>
238
+ <div>
239
+ <p class="text-gray-500 text-sm">变频</p>
240
+ <p class="font-medium">是</p>
241
+ </div>
242
+ <div>
243
+ <p class="text-gray-500 text-sm">能效</p>
244
+ <p class="font-medium">一级</p>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Status and Control -->
249
+ <div class="flex justify-between items-center mb-4">
250
+ <div>
251
+ <p class="text-gray-500 text-sm">状态</p>
252
+ <p class="font-medium"><span class="status-indicator status-on"></span>运行中 · 26°C</p>
253
+ </div>
254
+ <div>
255
+ <p class="text-gray-500 text-sm">控制方式</p>
256
+ <p class="control-indicator control-app font-medium">App</p>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Card Footer -->
261
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
262
+ <button class="detail-btn flex items-center text-primary-600 font-medium">
263
+ 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i>
264
+ </button>
265
+ <label class="toggle-switch">
266
+ <input type="checkbox" checked>
267
+ <span class="toggle-slider"></span>
268
+ </label>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Card 2 -->
274
+ <div class="ac-card bg-white rounded-xl shadow overflow-hidden">
275
+ <div class="p-5">
276
+ <!-- Card Header -->
277
+ <div class="flex justify-between items-start mb-4">
278
+ <div class="brand-logo bg-blue-50 text-blue-600">
279
+ <i class="fas fa-snowflake"></i>
280
+ </div>
281
+ <div>
282
+ <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-0.5 rounded-full">主卧</span>
283
+ <h2 class="text-lg font-bold text-gray-800 mt-1">Haier 海尔</h2>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Parameters -->
288
+ <div class="grid grid-cols-2 gap-3 mb-4">
289
+ <div>
290
+ <p class="text-gray-500 text-sm">型号</p>
291
+ <p class="font-medium">KFR-26GW</p>
292
+ </div>
293
+ <div>
294
+ <p class="text-gray-500 text-sm">功率</p>
295
+ <p class="font-medium">1.0HP</p>
296
+ </div>
297
+ <div>
298
+ <p class="text-gray-500 text-sm">变频</p>
299
+ <p class="font-medium">是</p>
300
+ </div>
301
+ <div>
302
+ <p class="text-gray-500 text-sm">能效</p>
303
+ <p class="font-medium">一级</p>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Status and Control -->
308
+ <div class="flex justify-between items-center mb-4">
309
+ <div>
310
+ <p class="text-gray-500 text-sm">状态</p>
311
+ <p class="font-medium"><span class="status-indicator status-off"></span>已关闭</p>
312
+ </div>
313
+ <div>
314
+ <p class="text-gray-500 text-sm">控制方式</p>
315
+ <p class="control-indicator control-remote font-medium">遥控器</p>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Card Footer -->
320
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
321
+ <button class="detail-btn flex items-center text-primary-600 font-medium">
322
+ 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i>
323
+ </button>
324
+ <label class="toggle-switch">
325
+ <input type="checkbox">
326
+ <span class="toggle-slider"></span>
327
+ </label>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Card 3 -->
333
+ <div class="ac-card bg-white rounded-xl shadow overflow-hidden">
334
+ <div class="p-5">
335
+ <!-- Card Header -->
336
+ <div class="flex justify-between items-start mb-4">
337
+ <div class="brand-logo bg-green-50 text-green-600">
338
+ <i class="fas fa-fan"></i>
339
+ </div>
340
+ <div>
341
+ <span class="bg-green-100 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded-full">书房</span>
342
+ <h2 class="text-lg font-bold text-gray-800 mt-1">Midea 美的</h2>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Parameters -->
347
+ <div class="grid grid-cols-2 gap-3 mb-4">
348
+ <div>
349
+ <p class="text-gray-500 text-sm">型号</p>
350
+ <p class="font-medium">KFR-50LW</p>
351
+ </div>
352
+ <div>
353
+ <p class="text-gray-500 text-sm">功率</p>
354
+ <p class="font-medium">2.0HP</p>
355
+ </div>
356
+ <div>
357
+ <p class="text-gray-500 text-sm">变频</p>
358
+ <p class="font-medium">是</p>
359
+ </div>
360
+ <div>
361
+ <p class="text-gray-500 text-sm">能效</p>
362
+ <p class="font-medium">二级</p>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Status and Control -->
367
+ <div class="flex justify-between items-center mb-4">
368
+ <div>
369
+ <p class="text-gray-500 text-sm">状态</p>
370
+ <p class="font-medium"><span class="status-indicator status-on"></span>运行中 · 24°C</p>
371
+ </div>
372
+ <div>
373
+ <p class="text-gray-500 text-sm">控制方式</p>
374
+ <p class="control-indicator control-voice font-medium">语音助手</p>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Card Footer -->
379
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
380
+ <button class="detail-btn flex items-center text-primary-600 font-medium">
381
+ 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i>
382
+ </button>
383
+ <label class="toggle-switch">
384
+ <input type="checkbox" checked>
385
+ <span class="toggle-slider"></span>
386
+ </label>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Card 4 -->
392
+ <div class="ac-card bg-white rounded-xl shadow overflow-hidden">
393
+ <div class="p-5">
394
+ <!-- Card Header -->
395
+ <div class="flex justify-between items-start mb-4">
396
+ <div class="brand-logo bg-purple-50 text-purple-600">
397
+ <i class="fas fa-cloud"></i>
398
+ </div>
399
+ <div>
400
+ <span class="bg-purple-100 text-purple-700 text-xs font-medium px-2.5 py-0.5 rounded-full">次卧</span>
401
+ <h2 class="text-lg font-bold text-gray-800 mt-1">Daikin 大金</h2>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Parameters -->
406
+ <div class="grid grid-cols-2 gap-3 mb-4">
407
+ <div>
408
+ <p class="text-gray-500 text-sm">型号</p>
409
+ <p class="font-medium">FTXS35K</p>
410
+ </div>
411
+ <div>
412
+ <p class="text-gray-500 text-sm">功率</p>
413
+ <p class="font-medium">1.5HP</p>
414
+ </div>
415
+ <div>
416
+ <p class="text-gray-500 text-sm">变频</p>
417
+ <p class="font-medium">是</p>
418
+ </div>
419
+ <div>
420
+ <p class="text-gray-500 text-sm">能效</p>
421
+ <p class="font-medium">一级</p>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Status and Control -->
426
+ <div class="flex justify-between items-center mb-4">
427
+ <div>
428
+ <p class="text-gray-500 text-sm">状态</p>
429
+ <p class="font-medium"><span class="status-indicator status-off"></span>已关闭</p>
430
+ </div>
431
+ <div>
432
+ <p class="text-gray-500 text-sm">控制方式</p>
433
+ <p class="control-indicator control-wall font-medium">墙上面板</p>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Card Footer -->
438
+ <div class="flex justify-between items-center pt-3 border-t border-gray-100">
439
+ <button class="detail-btn flex items-center text-primary-600 font-medium">
440
+ 状态 <i class="fas fa-chevron-right ml-1 text-xs"></i>
441
+ </button>
442
+ <label class="toggle-switch">
443
+ <input type="checkbox">
444
+ <span class="toggle-slider"></span>
445
+ </label>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </main>
451
+
452
+ <!-- Bottom Navigation -->
453
+ <nav class="bg-white border-t border-gray-200 fixed bottom-0 w-full">
454
+ <div class="max-w-2xl mx-auto px-4">
455
+ <div class="flex justify-between">
456
+ <a href="#" class="py-3 px-4 text-center text-primary-600">
457
+ <i class="fas fa-home block mx-auto mb-1"></i>
458
+ <span class="text-xs">首页</span>
459
+ </a>
460
+ <a href="#" class="py-3 px-4 text-center">
461
+ <i class="fas fa-th-large block mx-auto mb-1 text-gray-500"></i>
462
+ <span class="text-xs text-gray-500">设备</span>
463
+ </a>
464
+ <a href="#" class="py-3 px-4 text-center">
465
+ <i class="fas fa-scene block mx-auto mb-1 text-gray-500"></i>
466
+ <span class="text-xs text-gray-500">场景</span>
467
+ </a>
468
+ <a href="#" class="py-3 px-4 text-center">
469
+ <i class="fas fa-user block mx-auto mb-1 text-gray-500"></i>
470
+ <span class="text-xs text-gray-500">我的</span>
471
+ </a>
472
+ </div>
473
+ </div>
474
+ </nav>
475
+
476
+ <script>
477
+ // Toggle switch functionality
478
+ document.querySelectorAll('.toggle-switch input').forEach(switchEl => {
479
+ switchEl.addEventListener('change', function() {
480
+ const statusIndicator = this.closest('.ac-card').querySelector('.status-indicator');
481
+ const statusText = this.closest('.ac-card').querySelector('.font-medium');
482
+
483
+ if (this.checked) {
484
+ statusIndicator.classList.remove('status-off');
485
+ statusIndicator.classList.add('status-on');
486
+ statusText.innerHTML = '<span class="status-indicator status-on"></span>运行中 · 26°C';
487
+ } else {
488
+ statusIndicator.classList.remove('status-on');
489
+ statusIndicator.classList.add('status-off');
490
+ statusText.innerHTML = '<span class="status-indicator status-off"></span>已关闭';
491
+ }
492
+ });
493
+ });
494
+
495
+ // Detail button functionality
496
+ document.querySelectorAll('.detail-btn').forEach(button => {
497
+ button.addEventListener('click', function() {
498
+ const brandName = this.closest('.ac-card').querySelector('h2').textContent;
499
+ alert(`查看 ${brandName} 的详细信息`);
500
+ });
501
+ });
502
+ </script>
503
+ <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/home2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
+ </html>