Hugging Face's logo

Spaces:
maomaobj
/
apple2
Running

App Files Community
maomaobj commited on
Commit
bcbfd24
·
verified ·
1 Parent(s): 8f11a7a

UI/UX design, a sophisticated agricultural data intelligence platform dashboard, focused on "Apple Orchard Area Monitoring". Main view is a large GIS map of Shandong Peninsula, China, displayed in a sleek dark mode theme. On the map, thousands of apple orchards are highlighted with vibrant, glowing green polygons. On the left side, there is a control panel with filters and selectors: - A dropdown menu for region selection, showing "山东省 > 烟台市 > 栖霞市". - A timeline slider at the bottom to select the year, currently set to "2024". On the right side, there are several semi-transparent, floating data visualization cards with charts and KPIs: - A large card at the top with a big number: "苹果种植总面积: 5,820 平方公里". - Below it, a bar chart titled "各市面积排名" showing data for Yantai, Weihai, Linyi. - Another line chart titled "面积年度变化趋势 (2020-2024)" showing a slightly increasing trend. The overall style is clean, futuristic, professional, with data-driven aesthetics. High-tech, infographic style. Perspective is a slight oblique angle, giving a sense of depth. Shot on a professional SaaS website. --ar 16:9 --v 6.0 --style raw；浅色背景；所有的文字用中文。 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +457 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Apple2
3
- emoji: 🔥
4
- colorFrom: gray
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: apple2
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,457 @@
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
+ background-color: #f5f7fa;
15
+ }
16
+
17
+ .map-container {
18
+ background: linear-gradient(145deg, #e0e7ff, #ffffff);
19
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
20
+ }
21
+
22
+ .data-card {
23
+ backdrop-filter: blur(10px);
24
+ background: rgba(255, 255, 255, 0.85);
25
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
26
+ transition: all 0.3s ease;
27
+ }
28
+
29
+ .data-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 12px 36px rgba(31, 38, 135, 0.2);
32
+ }
33
+
34
+ .control-panel {
35
+ background: rgba(255, 255, 255, 0.9);
36
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
37
+ }
38
+
39
+ .timeline-slider {
40
+ -webkit-appearance: none;
41
+ height: 6px;
42
+ background: linear-gradient(to right, #4ade80, #22c55e);
43
+ border-radius: 10px;
44
+ }
45
+
46
+ .timeline-slider::-webkit-slider-thumb {
47
+ -webkit-appearance: none;
48
+ width: 20px;
49
+ height: 20px;
50
+ background: #fff;
51
+ border: 3px solid #22c55e;
52
+ border-radius: 50%;
53
+ cursor: pointer;
54
+ }
55
+
56
+ .orchard-polygon {
57
+ fill: #22c55e;
58
+ opacity: 0.7;
59
+ stroke: #166534;
60
+ stroke-width: 0.5;
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .orchard-polygon:hover {
65
+ opacity: 0.9;
66
+ stroke-width: 1.5;
67
+ filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6));
68
+ }
69
+
70
+ .chart-container {
71
+ min-height: 200px;
72
+ }
73
+
74
+ @media (max-width: 768px) {
75
+ .dashboard-layout {
76
+ flex-direction: column;
77
+ }
78
+
79
+ .map-container {
80
+ height: 400px;
81
+ }
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="bg-gray-50">
86
+ <div class="container mx-auto px-4 py-6">
87
+ <!-- Header -->
88
+ <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
89
+ <div>
90
+ <h1 class="text-2xl md:text-3xl font-bold text-gray-800">苹果园面积监测系统</h1>
91
+ <p class="text-gray-600">山东省苹果种植大数据分析平台</p>
92
+ </div>
93
+ <div class="mt-4 md:mt-0 flex items-center space-x-4">
94
+ <div class="flex items-center">
95
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
96
+ <span class="text-sm text-gray-600">实时数据更新</span>
97
+ </div>
98
+ <div class="text-sm text-gray-500">
99
+ <i class="far fa-clock mr-1"></i>
100
+ <span id="current-time">2024-06-15 14:30:25</span>
101
+ </div>
102
+ </div>
103
+ </header>
104
+
105
+ <!-- Dashboard Content -->
106
+ <div class="dashboard-layout flex flex-col lg:flex-row gap-6">
107
+ <!-- Left Control Panel -->
108
+ <div class="control-panel w-full lg:w-64 p-4 rounded-xl">
109
+ <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
110
+ <i class="fas fa-sliders-h text-green-500 mr-2"></i>
111
+ 控制面板
112
+ </h2>
113
+
114
+ <div class="space-y-6">
115
+ <!-- Region Selector -->
116
+ <div>
117
+ <label class="block text-sm font-medium text-gray-700 mb-1">选择地区</label>
118
+ <div class="relative">
119
+ <select class="block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 rounded-lg">
120
+ <option>山东省 > 烟台市 > 栖霞市</option>
121
+ <option>山东省 > 烟台市 > 蓬莱区</option>
122
+ <option>山东省 > 威海市 > 荣成市</option>
123
+ <option>山东省 > 临沂市 > 沂水县</option>
124
+ <option>山东省 > 青岛市 > 莱西市</option>
125
+ </select>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Data Type Selector -->
130
+ <div>
131
+ <label class="block text-sm font-medium text-gray-700 mb-1">数据类型</label>
132
+ <div class="space-y-2">
133
+ <div class="flex items-center">
134
+ <input id="type-area" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500" checked>
135
+ <label for="type-area" class="ml-2 block text-sm text-gray-700">种植面积</label>
136
+ </div>
137
+ <div class="flex items-center">
138
+ <input id="type-yield" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500">
139
+ <label for="type-yield" class="ml-2 block text-sm text-gray-700">预计产量</label>
140
+ </div>
141
+ <div class="flex items-center">
142
+ <input id="type-health" name="data-type" type="radio" class="h-4 w-4 text-green-600 focus:ring-green-500">
143
+ <label for="type-health" class="ml-2 block text-sm text-gray-700">生长健康度</label>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Time Range Selector -->
149
+ <div>
150
+ <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
151
+ <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
152
+ <span>2020</span>
153
+ <span>2024</span>
154
+ </div>
155
+ <input type="range" min="2020" max="2024" value="2024" class="timeline-slider w-full">
156
+ <div class="text-center mt-1">
157
+ <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">当前: 2024年</span>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Additional Filters -->
162
+ <div>
163
+ <label class="block text-sm font-medium text-gray-700 mb-2">高级筛选</label>
164
+ <div class="space-y-3">
165
+ <div>
166
+ <label class="flex items-center">
167
+ <input type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 rounded">
168
+ <span class="ml-2 text-sm text-gray-700">仅显示有机种植</span>
169
+ </label>
170
+ </div>
171
+ <div>
172
+ <label class="flex items-center">
173
+ <input type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 rounded">
174
+ <span class="ml-2 text-sm text-gray-700">仅显示认证果园</span>
175
+ </label>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Action Buttons -->
181
+ <div class="pt-2 space-y-2">
182
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
183
+ <i class="fas fa-sync-alt mr-2"></i>
184
+ 更新数据
185
+ </button>
186
+ <button class="w-full bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2 px-4 rounded-lg flex items-center justify-center">
187
+ <i class="fas fa-download mr-2"></i>
188
+ 导出报告
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Main Map Area -->
195
+ <div class="flex-1">
196
+ <div class="map-container rounded-xl overflow-hidden shadow-lg h-full">
197
+ <!-- Map Header -->
198
+ <div class="px-6 py-4 bg-white border-b border-gray-200 flex justify-between items-center">
199
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
200
+ <i class="fas fa-map-marked-alt text-green-500 mr-2"></i>
201
+ 山东省苹果种植分布图
202
+ </h3>
203
+ <div class="flex space-x-2">
204
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm flex items-center">
205
+ <i class="fas fa-layer-group mr-1"></i>
206
+ 图层
207
+ </button>
208
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm flex items-center">
209
+ <i class="fas fa-search mr-1"></i>
210
+ 搜索
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Map Visualization -->
216
+ <div class="relative" style="height: 500px;">
217
+ <!-- This would be replaced with an actual map library like Leaflet or Mapbox in production -->
218
+ <svg id="map-svg" class="w-full h-full" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet">
219
+ <!-- Simplified representation of Shandong Peninsula -->
220
+ <path d="M100,100 L150,80 L200,90 L250,70 L300,100 L350,120 L400,150 L450,180 L500,200 L550,220 L600,230 L650,250 L700,270 L750,250 L700,200 L650,180 L600,150 L550,120 L500,100 L450,80 L400,70 L350,60 L300,50 L250,40 L200,30 L150,20 L100,30 Z"
221
+ fill="#e0e7ff" stroke="#3b82f6" stroke-width="2"/>
222
+
223
+ <!-- Sample orchard polygons - in a real app these would be actual GIS data -->
224
+ <g id="orchards">
225
+ <path class="orchard-polygon" d="M200,150 L220,140 L240,160 L230,180 L210,170 Z"/>
226
+ <path class="orchard-polygon" d="M300,200 L320,190 L340,210 L330,230 L310,220 Z"/>
227
+ <path class="orchard-polygon" d="M400,250 L420,240 L440,260 L430,280 L410,270 Z"/>
228
+ <path class="orchard-polygon" d="M500,300 L520,290 L540,310 L530,330 L510,320 Z"/>
229
+ <path class="orchard-polygon" d="M250,250 L270,240 L290,260 L280,280 L260,270 Z"/>
230
+ <path class="orchard-polygon" d="M350,300 L370,290 L390,310 L380,330 L360,320 Z"/>
231
+ <path class="orchard-polygon" d="M450,350 L470,340 L490,360 L480,380 L460,370 Z"/>
232
+ <path class="orchard-polygon" d="M150,200 L170,190 L190,210 L180,230 L160,220 Z"/>
233
+ <path class="orchard-polygon" d="M550,150 L570,140 L590,160 L580,180 L560,170 Z"/>
234
+ <path class="orchard-polygon" d="M650,200 L670,190 L690,210 L680,230 L660,220 Z"/>
235
+ </g>
236
+
237
+ <!-- City markers -->
238
+ <g id="city-markers">
239
+ <g class="cursor-pointer" transform="translate(300, 150)">
240
+ <circle cx="0" cy="0" r="8" fill="#ef4444" stroke="#fff" stroke-width="2"/>
241
+ <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-red-600">烟台</text>
242
+ </g>
243
+ <g class="cursor-pointer" transform="translate(450, 100)">
244
+ <circle cx="0" cy="0" r="8" fill="#3b82f6" stroke="#fff" stroke-width="2"/>
245
+ <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-blue-600">威海</text>
246
+ </g>
247
+ <g class="cursor-pointer" transform="translate(200, 250)">
248
+ <circle cx="0" cy="0" r="8" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
249
+ <text x="0" y="25" text-anchor="middle" class="text-xs font-bold fill-yellow-600">临沂</text>
250
+ </g>
251
+ </g>
252
+ </svg>
253
+
254
+ <!-- Map controls overlay -->
255
+ <div class="absolute bottom-4 right-4 flex space-x-2">
256
+ <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
257
+ <i class="fas fa-plus text-gray-700"></i>
258
+ </button>
259
+ <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
260
+ <i class="fas fa-minus text-gray-700"></i>
261
+ </button>
262
+ <button class="p-2 bg-white rounded-lg shadow-md hover:bg-gray-100">
263
+ <i class="fas fa-crosshairs text-gray-700"></i>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Right Data Cards -->
271
+ <div class="w-full lg:w-80 space-y-4">
272
+ <!-- Total Area Card -->
273
+ <div class="data-card p-5 rounded-xl">
274
+ <div class="flex justify-between items-start mb-3">
275
+ <h3 class="text-lg font-semibold text-gray-800">苹果种植总面积</h3>
276
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
277
+ <i class="fas fa-tree mr-1"></i>
278
+ 2024年
279
+ </span>
280
+ </div>
281
+ <div class="text-3xl font-bold text-gray-900 mb-2">5,820 平方公里</div>
282
+ <div class="flex items-center text-sm text-gray-600">
283
+ <span class="text-green-500 mr-1">+2.3%</span>
284
+ <span>较去年增长</span>
285
+ </div>
286
+ <div class="mt-4 pt-4 border-t border-gray-100">
287
+ <div class="flex justify-between text-sm">
288
+ <span class="text-gray-600">烟台市</span>
289
+ <span class="font-medium">2,450 km²</span>
290
+ </div>
291
+ <div class="flex justify-between text-sm mt-1">
292
+ <span class="text-gray-600">威海市</span>
293
+ <span class="font-medium">1,280 km²</span>
294
+ </div>
295
+ <div class="flex justify-between text-sm mt-1">
296
+ <span class="text-gray-600">临沂市</span>
297
+ <span class="font-medium">980 km²</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- City Ranking Card -->
303
+ <div class="data-card p-5 rounded-xl">
304
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">各市面积排名</h3>
305
+ <div class="chart-container">
306
+ <!-- This would be replaced with a real chart library like Chart.js in production -->
307
+ <div class="space-y-3">
308
+ <div>
309
+ <div class="flex justify-between mb-1">
310
+ <span class="text-sm font-medium text-gray-700">烟台市</span>
311
+ <span class="text-sm text-gray-500">42.1%</span>
312
+ </div>
313
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
314
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
315
+ </div>
316
+ </div>
317
+ <div>
318
+ <div class="flex justify-between mb-1">
319
+ <span class="text-sm font-medium text-gray-700">威海市</span>
320
+ <span class="text-sm text-gray-500">22.0%</span>
321
+ </div>
322
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
323
+ <div class="bg-green-400 h-2.5 rounded-full" style="width: 45%"></div>
324
+ </div>
325
+ </div>
326
+ <div>
327
+ <div class="flex justify-between mb-1">
328
+ <span class="text-sm font-medium text-gray-700">临沂市</span>
329
+ <span class="text-sm text-gray-500">16.8%</span>
330
+ </div>
331
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
332
+ <div class="bg-green-300 h-2.5 rounded-full" style="width: 35%"></div>
333
+ </div>
334
+ </div>
335
+ <div>
336
+ <div class="flex justify-between mb-1">
337
+ <span class="text-sm font-medium text-gray-700">青岛市</span>
338
+ <span class="text-sm text-gray-500">8.2%</span>
339
+ </div>
340
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
341
+ <div class="bg-green-200 h-2.5 rounded-full" style="width: 20%"></div>
342
+ </div>
343
+ </div>
344
+ <div>
345
+ <div class="flex justify-between mb-1">
346
+ <span class="text-sm font-medium text-gray-700">其他</span>
347
+ <span class="text-sm text-gray-500">10.9%</span>
348
+ </div>
349
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
350
+ <div class="bg-green-100 h-2.5 rounded-full" style="width: 15%"></div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Trend Card -->
358
+ <div class="data-card p-5 rounded-xl">
359
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">面积年度变化趋势 (2020-2024)</h3>
360
+ <div class="chart-container">
361
+ <!-- Simplified trend line visualization -->
362
+ <div class="relative h-40">
363
+ <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
364
+ <div class="absolute left-0 top-0 bottom-0 w-px bg-gray-200"></div>
365
+
366
+ <!-- Year markers -->
367
+ <div class="absolute bottom-0 left-0 text-xs text-gray-500">2020</div>
368
+ <div class="absolute bottom-0 left-1/4 text-xs text-gray-500">2021</div>
369
+ <div class="absolute bottom-0 left-2/4 text-xs text-gray-500">2022</div>
370
+ <div class="absolute bottom-0 left-3/4 text-xs text-gray-500">2023</div>
371
+ <div class="absolute bottom-0 right-0 text-xs text-gray-500">2024</div>
372
+
373
+ <!-- Trend line -->
374
+ <svg class="w-full h-full" viewBox="0 0 100 40" preserveAspectRatio="none">
375
+ <path d="M0,30 L25,28 L50,26 L75,24 L100,22"
376
+ fill="none"
377
+ stroke="#22c55e"
378
+ stroke-width="2"
379
+ stroke-linecap="round"
380
+ stroke-linejoin="round"/>
381
+
382
+ <!-- Data points -->
383
+ <circle cx="0" cy="30" r="3" fill="#22c55e"/>
384
+ <circle cx="25" cy="28" r="3" fill="#22c55e"/>
385
+ <circle cx="50" cy="26" r="3" fill="#22c55e"/>
386
+ <circle cx="75" cy="24" r="3" fill="#22c55e"/>
387
+ <circle cx="100" cy="22" r="3" fill="#22c55e"/>
388
+ </svg>
389
+
390
+ <!-- Value markers -->
391
+ <div class="absolute top-0 left-0 text-xs text-gray-600">5,420</div>
392
+ <div class="absolute top-6 left-1/4 text-xs text-gray-600">5,520</div>
393
+ <div class="absolute top-12 left-2/4 text-xs text-gray-600">5,620</div>
394
+ <div class="absolute top-18 left-3/4 text-xs text-gray-600">5,690</div>
395
+ <div class="absolute top-24 right-0 text-xs text-gray-600">5,820</div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Footer -->
403
+ <footer class="mt-8 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
404
+ <p>山东省农业大数据中心 © 2024 苹果产业监测系统 v2.1.5</p>
405
+ <p class="mt-1">数据更新于: 2024-06-15 14:00:00</p>
406
+ </footer>
407
+ </div>
408
+
409
+ <script>
410
+ // Update current time
411
+ function updateCurrentTime() {
412
+ const now = new Date();
413
+ const formattedTime = now.toLocaleString('zh-CN', {
414
+ year: 'numeric',
415
+ month: '2-digit',
416
+ day: '2-digit',
417
+ hour: '2-digit',
418
+ minute: '2-digit',
419
+ second: '2-digit',
420
+ hour12: false
421
+ }).replace(/\//g, '-');
422
+
423
+ document.getElementById('current-time').textContent = formattedTime;
424
+ }
425
+
426
+ // Update time immediately and then every second
427
+ updateCurrentTime();
428
+ setInterval(updateCurrentTime, 1000);
429
+
430
+ // Add hover effects to orchard polygons
431
+ document.querySelectorAll('.orchard-polygon').forEach(polygon => {
432
+ polygon.addEventListener('mouseenter', function() {
433
+ this.style.filter = 'drop-shadow(0 0 8px rgba(74, 222, 128, 0.6))';
434
+ this.style.opacity = '0.9';
435
+ this.style.strokeWidth = '1.5';
436
+ });
437
+
438
+ polygon.addEventListener('mouseleave', function() {
439
+ this.style.filter = 'none';
440
+ this.style.opacity = '0.7';
441
+ this.style.strokeWidth = '0.5';
442
+ });
443
+ });
444
+
445
+ // Simple animation for data cards on load
446
+ document.addEventListener('DOMContentLoaded', function() {
447
+ const cards = document.querySelectorAll('.data-card');
448
+ cards.forEach((card, index) => {
449
+ setTimeout(() => {
450
+ card.style.opacity = '1';
451
+ card.style.transform = 'translateY(0)';
452
+ }, index * 100);
453
+ });
454
+ });
455
+ </script>
456
+ <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/apple2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
457
+ </html>