Hugging Face's logo

Spaces:
maomaobj
/
apple6
Running

App Files Community
maomaobj commited on
Commit
10309c2
·
verified ·
1 Parent(s): c9845ac

请设计一个“苹果需求趋势分析”的中文可视化页面，页面风格为浅色、清晰、科技感，适合农业数据平台、供需预测系统或企业营销决策平台。页面结构如下： 1. 页面顶部为标题：“苹果需求趋势分析”，居中显示，字体醒目。 2. 页面左上方为筛选区域，包含以下控件： - 时间周期选择器（选项：近7天、近30天、近90天） - 地区下拉选择框（全国、省级、市级） - 品种多选框（如：红富士、秦冠、嘎啦、青香蕉） 3. 页面主区域为一张折线图，展示苹果需求变化趋势，图表要求如下： - X轴为时间（日或周） - Y轴为需求量（单位：吨） - 多条线分别代表不同品种或不同区域，颜色区分明显 - 鼠标悬浮可查看某一时间点的具体数据，包括需求量、同比变化百分比、参考价格 4. 折线图右上角添加切换按钮，可切换为： - 按品种查看趋势 - 按区域查看趋势 - 按销售渠道查看趋势（如批发、电商、商超） 5. 折线图下方为趋势解读区域，由AI自动生成如下内容： - 当前需求增长最快的品种/地区 - 近期明显下滑的品类或市场 - 建议备货策略或投放窗口（如：“下周为红富士高需求期，建议重点备货华东区域”） 6. 页面右下角放置导出按钮，支持下载趋势图、导出分析简报（PDF/Excel） 7. 整体配色以蓝色和绿色为主，保持数据图表清晰，适配浅色背景。 请构建此页面的完整布局，适合企业销售人员、电商运营经理、政府主管机构使用。 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +484 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Apple6
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: purple
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: apple6
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,484 @@
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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1E88E5',
16
+ secondary: '#43A047',
17
+ accent: '#1565C0',
18
+ light: '#F5F7FA',
19
+ dark: '#263238'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Noto Sans SC', sans-serif;
30
+ background-color: #F5F7FA;
31
+ color: #263238;
32
+ }
33
+
34
+ .chart-container {
35
+ background: linear-gradient(145deg, #ffffff, #f0f4f8);
36
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
37
+ border-radius: 12px;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .card {
42
+ background: white;
43
+ border-radius: 12px;
44
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
45
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
46
+ }
47
+
48
+ .card:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
51
+ }
52
+
53
+ .filter-card {
54
+ background: rgba(255, 255, 255, 0.9);
55
+ backdrop-filter: blur(10px);
56
+ }
57
+
58
+ .btn-primary {
59
+ background: linear-gradient(135deg, #1E88E5, #1565C0);
60
+ color: white;
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .btn-primary:hover {
65
+ background: linear-gradient(135deg, #1565C0, #0D47A1);
66
+ transform: translateY(-2px);
67
+ box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
68
+ }
69
+
70
+ .btn-secondary {
71
+ background: linear-gradient(135deg, #43A047, #2E7D32);
72
+ color: white;
73
+ }
74
+
75
+ .btn-secondary:hover {
76
+ background: linear-gradient(135deg, #2E7D32, #1B5E20);
77
+ transform: translateY(-2px);
78
+ box-shadow: 0 4px 12px rgba(67, 160, 71, 0.3);
79
+ }
80
+
81
+ .trend-badge {
82
+ padding: 2px 8px;
83
+ border-radius: 12px;
84
+ font-size: 0.75rem;
85
+ font-weight: 500;
86
+ }
87
+
88
+ .up-trend {
89
+ background-color: rgba(67, 160, 71, 0.15);
90
+ color: #2E7D32;
91
+ }
92
+
93
+ .down-trend {
94
+ background-color: rgba(229, 57, 53, 0.15);
95
+ color: #C62828;
96
+ }
97
+
98
+ .chart-tooltip {
99
+ background: rgba(255, 255, 255, 0.95) !important;
100
+ border: 1px solid #E0E0E0 !important;
101
+ border-radius: 8px !important;
102
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
103
+ padding: 12px !important;
104
+ }
105
+ </style>
106
+ </head>
107
+ <body class="bg-light min-h-screen">
108
+ <!-- 页面头部 -->
109
+ <header class="py-6 bg-gradient-to-r from-primary to-accent text-white">
110
+ <div class="container mx-auto px-4">
111
+ <h1 class="text-3xl md:text-4xl font-bold text-center">
112
+ <i class="fas fa-apple-alt mr-3"></i>苹果需求趋势分析
113
+ </h1>
114
+ <p class="text-center mt-2 opacity-90">农业数据智能分析平台 · 供需预测与决策支持系统</p>
115
+ </div>
116
+ </header>
117
+
118
+ <!-- 主内容区 -->
119
+ <main class="container mx-auto px-4 py-8">
120
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
121
+ <!-- 筛选区域 -->
122
+ <div class="lg:col-span-1">
123
+ <div class="card filter-card p-6">
124
+ <h2 class="text-xl font-semibold text-primary mb-4 flex items-center">
125
+ <i class="fas fa-filter mr-2"></i>数据筛选
126
+ </h2>
127
+
128
+ <!-- 时间周期选择 -->
129
+ <div class="mb-5">
130
+ <label class="block text-sm font-medium text-gray-700 mb-2">时间周期</label>
131
+ <div class="grid grid-cols-3 gap-2">
132
+ <button class="btn-primary py-2 px-3 rounded-lg text-sm">近7天</button>
133
+ <button class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded-lg text-sm">近30天</button>
134
+ <button class="bg-gray-100 hover:bg-gray-200 py-2 px-3 rounded-lg text-sm">近90天</button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- 地区选择 -->
139
+ <div class="mb-5">
140
+ <label class="block text-sm font-medium text-gray-700 mb-2">地区范围</label>
141
+ <select class="w-full p-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
142
+ <option>全国</option>
143
+ <option>华东地区</option>
144
+ <option>华北地区</option>
145
+ <option>华南地区</option>
146
+ <option>华中地区</option>
147
+ <option>西南地区</option>
148
+ <option>东北地区</option>
149
+ <option>西北地区</option>
150
+ </select>
151
+ </div>
152
+
153
+ <!-- 品种选择 -->
154
+ <div class="mb-5">
155
+ <label class="block text-sm font-medium text-gray-700 mb-2">苹果品种</label>
156
+ <div class="space-y-2">
157
+ <label class="flex items-center">
158
+ <input type="checkbox" class="rounded text-primary" checked>
159
+ <span class="ml-2">红富士</span>
160
+ </label>
161
+ <label class="flex items-center">
162
+ <input type="checkbox" class="rounded text-primary" checked>
163
+ <span class="ml-2">秦冠</span>
164
+ </label>
165
+ <label class="flex items-center">
166
+ <input type="checkbox" class="rounded text-primary">
167
+ <span class="ml-2">嘎啦</span>
168
+ </label>
169
+ <label class="flex items-center">
170
+ <input type="checkbox" class="rounded text-primary">
171
+ <span class="ml-2">青香蕉</span>
172
+ </label>
173
+ <label class="flex items-center">
174
+ <input type="checkbox" class="rounded text-primary">
175
+ <span class="ml-2">花牛</span>
176
+ </label>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- 数据更新信息 -->
181
+ <div class="mt-6 pt-4 border-t border-gray-200">
182
+ <p class="text-sm text-gray-600">
183
+ <i class="fas fa-sync-alt mr-2"></i>数据最后更新: 2023-10-15 14:30
184
+ </p>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- 数据摘要卡片 -->
189
+ <div class="card mt-6 p-6">
190
+ <h2 class="text-xl font-semibold text-primary mb-4 flex items-center">
191
+ <i class="fas fa-chart-line mr-2"></i>关键指标
192
+ </h2>
193
+ <div class="space-y-4">
194
+ <div>
195
+ <p class="text-gray-600 text-sm">全国总需求量</p>
196
+ <p class="text-2xl font-bold text-primary">8,450 吨</p>
197
+ </div>
198
+ <div>
199
+ <p class="text-gray-600 text-sm">周环比变化</p>
200
+ <p class="text-xl font-bold text-secondary">+12.3% <span class="up-trend trend-badge"><i class="fas fa-arrow-up mr-1"></i>增长</span></p>
201
+ </div>
202
+ <div>
203
+ <p class="text-gray-600 text-sm">平均价格</p>
204
+ <p class="text-xl font-bold text-accent">¥6.8 /公斤</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- 图表主区域 -->
211
+ <div class="lg:col-span-3">
212
+ <div class="chart-container p-4 md:p-6">
213
+ <!-- 图表控制栏 -->
214
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
215
+ <div>
216
+ <h2 class="text-xl font-semibold text-primary">苹果需求趋势分析</h2>
217
+ <p class="text-gray-600 text-sm mt-1">数据单位: 吨 (每日需求量)</p>
218
+ </div>
219
+
220
+ <div class="flex flex-wrap gap-2 mt-3 md:mt-0">
221
+ <button class="btn-primary px-4 py-2 rounded-lg flex items-center">
222
+ <i class="fas fa-seedling mr-2"></i>按品种
223
+ </button>
224
+ <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center">
225
+ <i class="fas fa-map-marker-alt mr-2"></i>按区域
226
+ </button>
227
+ <button class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg flex items-center">
228
+ <i class="fas fa-store mr-2"></i>按销售渠道
229
+ </button>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- 图表容器 -->
234
+ <div class="h-80 md:h-96">
235
+ <canvas id="demandChart"></canvas>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- AI趋势解读区域 -->
240
+ <div class="card mt-6 p-6">
241
+ <div class="flex justify-between items-center mb-4">
242
+ <h2 class="text-xl font-semibold text-primary flex items-center">
243
+ <i class="fas fa-robot mr-2"></i>AI趋势解读
244
+ </h2>
245
+ <span class="bg-blue-50 text-primary text-xs px-3 py-1 rounded-full">实时分析</span>
246
+ </div>
247
+
248
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
249
+ <div class="p-4 bg-blue-50 rounded-lg">
250
+ <div class="flex items-center mb-2">
251
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
252
+ <i class="fas fa-arrow-up text-white"></i>
253
+ </div>
254
+ <h3 class="font-semibold text-primary">需求增长最快</h3>
255
+ </div>
256
+ <p class="text-sm">红富士苹果在华东地区需求增长显著，周环比增长<strong class="text-secondary">+18.7%</strong>，主要受电商促销活动影响。</p>
257
+ </div>
258
+
259
+ <div class="p-4 bg-orange-50 rounded-lg">
260
+ <div class="flex items-center mb-2">
261
+ <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center mr-3">
262
+ <i class="fas fa-arrow-down text-white"></i>
263
+ </div>
264
+ <h3 class="font-semibold text-orange-700">需求明显下滑</h3>
265
+ </div>
266
+ <p class="text-sm">秦冠苹果在华北地区需求下降<strong class="text-orange-700">-8.2%</strong>，主要受新上市品种替代影响。</p>
267
+ </div>
268
+
269
+ <div class="p-4 bg-green-50 rounded-lg">
270
+ <div class="flex items-center mb-2">
271
+ <div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center mr-3">
272
+ <i class="fas fa-lightbulb text-white"></i>
273
+ </div>
274
+ <h3 class="font-semibold text-secondary">策略建议</h3>
275
+ </div>
276
+ <p class="text-sm">下周为红富士苹果高需求期，建议重点备货华东区域，增加电商渠道库存<strong>15-20%</strong>。</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </main>
283
+
284
+ <!-- 底部操作区 -->
285
+ <footer class="container mx-auto px-4 py-6">
286
+ <div class="flex flex-col md:flex-row justify-between items-center">
287
+ <div class="text-sm text-gray-600 mb-4 md:mb-0">
288
+ <p>© 2023 农业数据智能分析平台 | 为农业决策提供数据支持</p>
289
+ </div>
290
+ <div class="flex space-x-3">
291
+ <button class="btn-primary px-5 py-2.5 rounded-lg flex items-center">
292
+ <i class="fas fa-download mr-2"></i>下载图表
293
+ </button>
294
+ <button class="btn-secondary px-5 py-2.5 rounded-lg flex items-center">
295
+ <i class="fas fa-file-export mr-2"></i>导出分析简报
296
+ </button>
297
+ </div>
298
+ </div>
299
+ </footer>
300
+
301
+ <script>
302
+ // 图表初始化
303
+ document.addEventListener('DOMContentLoaded', function() {
304
+ const ctx = document.getElementById('demandChart').getContext('2d');
305
+
306
+ // 模拟数据
307
+ const dates = [];
308
+ for (let i = 6; i >= 0; i--) {
309
+ const date = new Date();
310
+ date.setDate(date.getDate() - i);
311
+ dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
312
+ }
313
+
314
+ // 图表配置
315
+ const chart = new Chart(ctx, {
316
+ type: 'line',
317
+ data: {
318
+ labels: dates,
319
+ datasets: [
320
+ {
321
+ label: '红富士',
322
+ data: [320, 340, 380, 420, 450, 480, 520],
323
+ borderColor: '#1E88E5',
324
+ backgroundColor: 'rgba(30, 136, 229, 0.1)',
325
+ borderWidth: 3,
326
+ pointRadius: 5,
327
+ pointBackgroundColor: '#fff',
328
+ pointBorderWidth: 2,
329
+ tension: 0.2
330
+ },
331
+ {
332
+ label: '秦冠',
333
+ data: [280, 300, 320, 310, 290, 270, 260],
334
+ borderColor: '#43A047',
335
+ backgroundColor: 'rgba(67, 160, 71, 0.1)',
336
+ borderWidth: 3,
337
+ pointRadius: 5,
338
+ pointBackgroundColor: '#fff',
339
+ pointBorderWidth: 2,
340
+ tension: 0.2
341
+ },
342
+ {
343
+ label: '嘎啦',
344
+ data: [180, 200, 220, 240, 230, 250, 270],
345
+ borderColor: '#FF9800',
346
+ backgroundColor: 'rgba(255, 152, 0, 0.1)',
347
+ borderWidth: 3,
348
+ pointRadius: 5,
349
+ pointBackgroundColor: '#fff',
350
+ pointBorderWidth: 2,
351
+ tension: 0.2
352
+ },
353
+ {
354
+ label: '青香蕉',
355
+ data: [150, 160, 170, 165, 180, 190, 200],
356
+ borderColor: '#9C27B0',
357
+ backgroundColor: 'rgba(156, 39, 176, 0.1)',
358
+ borderWidth: 3,
359
+ pointRadius: 5,
360
+ pointBackgroundColor: '#fff',
361
+ pointBorderWidth: 2,
362
+ tension: 0.2
363
+ }
364
+ ]
365
+ },
366
+ options: {
367
+ responsive: true,
368
+ maintainAspectRatio: false,
369
+ plugins: {
370
+ legend: {
371
+ position: 'top',
372
+ labels: {
373
+ padding: 20,
374
+ usePointStyle: true,
375
+ pointStyle: 'circle',
376
+ font: {
377
+ size: 13
378
+ }
379
+ }
380
+ },
381
+ tooltip: {
382
+ backgroundColor: 'rgba(255, 255, 255, 0.95)',
383
+ titleColor: '#1E88E5',
384
+ titleFont: {
385
+ weight: 'bold',
386
+ size: 14
387
+ },
388
+ bodyColor: '#263238',
389
+ bodyFont: {
390
+ size: 13
391
+ },
392
+ borderColor: '#E0E0E0',
393
+ borderWidth: 1,
394
+ padding: 12,
395
+ usePointStyle: true,
396
+ callbacks: {
397
+ label: function(context) {
398
+ const label = context.dataset.label || '';
399
+ const value = context.parsed.y || 0;
400
+ const prices = {
401
+ '红富士': '¥7.2/kg',
402
+ '秦冠': '¥5.8/kg',
403
+ '嘎啦': '¥6.5/kg',
404
+ '青香蕉': '¥6.0/kg'
405
+ };
406
+
407
+ const change = {
408
+ '红富士': '+18.7%',
409
+ '秦冠': '-8.2%',
410
+ '嘎啦': '+12.5%',
411
+ '青香蕉': '+5.3%'
412
+ };
413
+
414
+ return [
415
+ `${label}: ${value} 吨`,
416
+ `同比变化: ${change[label]}`,
417
+ `参考价格: ${prices[label]}`
418
+ ];
419
+ }
420
+ }
421
+ }
422
+ },
423
+ scales: {
424
+ x: {
425
+ grid: {
426
+ display: false
427
+ },
428
+ title: {
429
+ display: true,
430
+ text: '日期',
431
+ font: {
432
+ size: 13,
433
+ weight: 'bold'
434
+ }
435
+ }
436
+ },
437
+ y: {
438
+ beginAtZero: true,
439
+ grid: {
440
+ color: 'rgba(0, 0, 0, 0.05)'
441
+ },
442
+ title: {
443
+ display: true,
444
+ text: '需求量 (吨)',
445
+ font: {
446
+ size: 13,
447
+ weight: 'bold'
448
+ }
449
+ }
450
+ }
451
+ },
452
+ interaction: {
453
+ mode: 'index',
454
+ intersect: false
455
+ },
456
+ animations: {
457
+ tension: {
458
+ duration: 1000,
459
+ easing: 'linear'
460
+ }
461
+ }
462
+ }
463
+ });
464
+
465
+ // 添加响应式调整
466
+ window.addEventListener('resize', function() {
467
+ chart.resize();
468
+ });
469
+
470
+ // 筛选按钮交互
471
+ document.querySelectorAll('.btn-primary, .bg-gray-100').forEach(button => {
472
+ button.addEventListener('click', function() {
473
+ document.querySelectorAll('.btn-primary, .bg-gray-100').forEach(btn => {
474
+ btn.classList.remove('btn-primary');
475
+ btn.classList.add('bg-gray-100', 'hover:bg-gray-200');
476
+ });
477
+ this.classList.remove('bg-gray-100', 'hover:bg-gray-200');
478
+ this.classList.add('btn-primary');
479
+ });
480
+ });
481
+ });
482
+ </script>
483
+ <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/apple6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
484
+ </html>