Hugging Face's logo

Spaces:
ixingchen
/
pic
Running

App Files Community
ixingchen commited on
Commit
c88126f
·
verified ·
1 Parent(s): e811173

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +405 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pic
3
- emoji: 🚀
4
- colorFrom: red
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: pic
3
+ emoji: 🐳
4
+ colorFrom: pink
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,405 @@
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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .api-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .api-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .stat-card {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .stat-card:hover {
24
+ transform: scale(1.05);
25
+ }
26
+ .preview-image {
27
+ height: 300px;
28
+ background-size: cover;
29
+ background-position: center;
30
+ transition: all 0.5s ease;
31
+ }
32
+ .preview-image:hover {
33
+ transform: scale(1.02);
34
+ }
35
+ .nav-link {
36
+ position: relative;
37
+ }
38
+ .nav-link::after {
39
+ content: '';
40
+ position: absolute;
41
+ width: 0;
42
+ height: 2px;
43
+ bottom: 0;
44
+ left: 0;
45
+ background-color: #a777e3;
46
+ transition: width 0.3s ease;
47
+ }
48
+ .nav-link:hover::after {
49
+ width: 100%;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
54
+ <!-- Navigation -->
55
+ <nav class="bg-white shadow-sm">
56
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
57
+ <div class="flex justify-between h-16">
58
+ <div class="flex items-center">
59
+ <div class="flex-shrink-0 flex items-center">
60
+ <i class="fas fa-images text-purple-600 text-2xl mr-2"></i>
61
+ <span class="text-xl font-bold text-gray-900">随机图片服务</span>
62
+ </div>
63
+ </div>
64
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
65
+ <a href="#features" class="nav-link border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">服务介绍</a>
66
+ <a href="#api" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">API 文档</a>
67
+ <a href="#stats" class="nav-link border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">服务统计</a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </nav>
72
+
73
+ <!-- Hero Section -->
74
+ <div class="hero-gradient text-white">
75
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
76
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
77
+ 为您的项目提供美丽的随机图片
78
+ </h1>
79
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
80
+ 简单、高效的随机图片 API，轻松集成到您的网站或应用中
81
+ </p>
82
+ <div class="mt-10 flex justify-center space-x-4">
83
+ <a href="#api" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-gray-50">
84
+ 开始使用 <i class="fas fa-arrow-down ml-2"></i>
85
+ </a>
86
+ <a href="#preview" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-800 bg-opacity-60 hover:bg-opacity-70">
87
+ 查看示例 <i class="fas fa-eye ml-2"></i>
88
+ </a>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Features Section -->
94
+ <div id="features" class="py-12 bg-white">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <div class="lg:text-center">
97
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">服务介绍</h2>
98
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
99
+ 为什么选择我们的随机图片服务
100
+ </p>
101
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
102
+ 我们提供高质量的随机图片服务，支持横向和纵向两种图片类型
103
+ </p>
104
+ </div>
105
+
106
+ <div class="mt-10">
107
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
108
+ <div class="relative">
109
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
110
+ <i class="fas fa-bolt"></i>
111
+ </div>
112
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">极速响应</p>
113
+ <p class="mt-2 ml-16 text-base text-gray-500">
114
+ 我们的API经过优化，响应时间极短，确保您的用户获得流畅的体验。
115
+ </p>
116
+ </div>
117
+
118
+ <div class="relative">
119
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
120
+ <i class="fas fa-image"></i>
121
+ </div>
122
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">高质量图片</p>
123
+ <p class="mt-2 ml-16 text-base text-gray-500">
124
+ 所有图片都经过精心挑选，确保高质量和美观，适合各种项目需求。
125
+ </p>
126
+ </div>
127
+
128
+ <div class="relative">
129
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
130
+ <i class="fas fa-laptop-code"></i>
131
+ </div>
132
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">简单集成</p>
133
+ <p class="mt-2 ml-16 text-base text-gray-500">
134
+ 只需一个简单的HTTP请求即可获取随机图片，无需复杂配置。
135
+ </p>
136
+ </div>
137
+
138
+ <div class="relative">
139
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
140
+ <i class="fas fa-server"></i>
141
+ </div>
142
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">稳定可靠</p>
143
+ <p class="mt-2 ml-16 text-base text-gray-500">
144
+ 我们的服务运行在可靠的服务器上，保证高可用性和稳定性。
145
+ </p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Preview Section -->
153
+ <div id="preview" class="bg-gray-50 py-12">
154
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
155
+ <div class="lg:text-center mb-8">
156
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">图片预览</h2>
157
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
158
+ 看看我们的随机图片效果
159
+ </p>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
163
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
164
+ <div id="horizontal-preview" class="preview-image" style="background-image: url('https://api-hrandom-pic.imixc.top/?type=horizontal')"></div>
165
+ <div class="p-6">
166
+ <h3 class="text-lg font-medium text-gray-900">随机横向图片</h3>
167
+ <p class="mt-1 text-sm text-gray-500">适合网页横幅、内容背景等宽屏场景</p>
168
+ <div class="mt-4">
169
+ <button onclick="refreshPreview('horizontal')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700">
170
+ <i class="fas fa-sync-alt mr-2"></i> 刷新预览
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
177
+ <div id="vertical-preview" class="preview-image" style="background-image: url('https://api-hrandom-pic.imixc.top/?type=vertical')"></div>
178
+ <div class="p-6">
179
+ <h3 class="text-lg font-medium text-gray-900">随机纵向图片</h3>
180
+ <p class="mt-1 text-sm text-gray-500">适合移动端、社交媒体等竖屏场景</p>
181
+ <div class="mt-4">
182
+ <button onclick="refreshPreview('vertical')" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700">
183
+ <i class="fas fa-sync-alt mr-2"></i> 刷新预览
184
+ </button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- API Documentation -->
193
+ <div id="api" class="py-12 bg-white">
194
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
195
+ <div class="lg:text-center mb-12">
196
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">API 文档</h2>
197
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
198
+ 简单易用的API接口
199
+ </p>
200
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
201
+ 只需一个HTTP请求即可获取随机图片
202
+ </p>
203
+ </div>
204
+
205
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
206
+ <div class="api-card bg-gray-50 p-6 rounded-lg shadow">
207
+ <div class="flex items-center mb-4">
208
+ <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white">
209
+ <i class="fas fa-arrows-alt-h"></i>
210
+ </div>
211
+ <div class="ml-4">
212
+ <h3 class="text-lg font-medium text-gray-900">横向图片</h3>
213
+ </div>
214
+ </div>
215
+ <div class="bg-gray-800 rounded-md p-4 overflow-x-auto">
216
+ <code class="text-gray-200 text-sm">
217
+ GET https://api-hrandom-pic.imixc.top/?type=horizontal
218
+ </code>
219
+ </div>
220
+ <div class="mt-4">
221
+ <button onclick="copyToClipboard('https://api-hrandom-pic.imixc.top/?type=horizontal')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200">
222
+ <i class="fas fa-copy mr-1"></i> 复制链接
223
+ </button>
224
+ <button onclick="testApi('horizontal')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-purple-600 hover:bg-purple-700">
225
+ <i class="fas fa-play mr-1"></i> 测试API
226
+ </button>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="api-card bg-gray-50 p-6 rounded-lg shadow">
231
+ <div class="flex items-center mb-4">
232
+ <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white">
233
+ <i class="fas fa-arrows-alt-v"></i>
234
+ </div>
235
+ <div class="ml-4">
236
+ <h3 class="text-lg font-medium text-gray-900">纵向图片</h3>
237
+ </div>
238
+ </div>
239
+ <div class="bg-gray-800 rounded-md p-4 overflow-x-auto">
240
+ <code class="text-gray-200 text-sm">
241
+ GET https://api-hrandom-pic.imixc.top/?type=vertical
242
+ </code>
243
+ </div>
244
+ <div class="mt-4">
245
+ <button onclick="copyToClipboard('https://api-hrandom-pic.imixc.top/?type=vertical')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200">
246
+ <i class="fas fa-copy mr-1"></i> 复制链接
247
+ </button>
248
+ <button onclick="testApi('vertical')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-purple-600 hover:bg-purple-700">
249
+ <i class="fas fa-play mr-1"></i> 测试API
250
+ </button>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="api-card bg-gray-50 p-6 rounded-lg shadow">
255
+ <div class="flex items-center mb-4">
256
+ <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white">
257
+ <i class="fas fa-code"></i>
258
+ </div>
259
+ <div class="ml-4">
260
+ <h3 class="text-lg font-medium text-gray-900">使用示例</h3>
261
+ </div>
262
+ </div>
263
+ <div class="bg-gray-800 rounded-md p-4 overflow-x-auto">
264
+ <pre class="text-gray-200 text-xs">
265
+ &lt;!-- HTML中使用 --&gt;
266
+ &lt;img src="https://api-hrandom-pic.imixc.top/?type=horizontal"
267
+ alt="随机横向图片"&gt;
268
+
269
+ /* CSS中使用 */
270
+ .bg-image {
271
+ background-image: url('https://api-hrandom-pic.imixc.top/?type=vertical&raw=1');
272
+ background-size: cover;
273
+ background-position: center;
274
+ }</pre>
275
+ </div>
276
+ <div class="mt-4">
277
+ <button onclick="copyToClipboard('<img src=\'https://api-hrandom-pic.imixc.top/?type=horizontal\' alt=\'随机横向图片\'>')" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200">
278
+ <i class="fas fa-copy mr-1"></i> 复制HTML
279
+ </button>
280
+ <button onclick="copyToClipboard('.bg-image {\n background-image: url(\'https://api-hrandom-pic.imixc.top/?type=vertical&raw=1\');\n background-size: cover;\n background-position: center;\n}')" class="ml-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200">
281
+ <i class="fas fa-copy mr-1"></i> 复制CSS
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Stats Section -->
290
+ <div id="stats" class="py-12 bg-gray-50">
291
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
292
+ <div class="lg:text-center mb-12">
293
+ <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">服务统计</h2>
294
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
295
+ 我们的图片资源库
296
+ </p>
297
+ </div>
298
+
299
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
300
+ <div class="stat-card bg-white p-6 rounded-lg shadow text-center">
301
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
302
+ <i class="fas fa-arrows-alt-h text-xl"></i>
303
+ </div>
304
+ <h3 class="mt-4 text-lg font-medium text-gray-900">横向图片</h3>
305
+ <p class="mt-2 text-4xl font-extrabold text-purple-600">105</p>
306
+ <p class="mt-1 text-sm text-gray-500">张高质量横向图片</p>
307
+ </div>
308
+
309
+ <div class="stat-card bg-white p-6 rounded-lg shadow text-center">
310
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
311
+ <i class="fas fa-arrows-alt-v text-xl"></i>
312
+ </div>
313
+ <h3 class="mt-4 text-lg font-medium text-gray-900">纵向图片</h3>
314
+ <p class="mt-2 text-4xl font-extrabold text-purple-600">1</p>
315
+ <p class="mt-1 text-sm text-gray-500">张高质量纵向图片</p>
316
+ </div>
317
+
318
+ <div class="stat-card bg-white p-6 rounded-lg shadow text-center">
319
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-purple-100 text-purple-600">
320
+ <i class="fas fa-database text-xl"></i>
321
+ </div>
322
+ <h3 class="mt-4 text-lg font-medium text-gray-900">总图片数量</h3>
323
+ <p class="mt-2 text-4xl font-extrabold text-purple-600">106</p>
324
+ <p class="mt-1 text-sm text-gray-500">张高质量随机图片</p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Footer -->
331
+ <footer class="bg-gray-800">
332
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
333
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
334
+ <div>
335
+ <h3 class="text-white text-lg font-medium mb-4">随机图片服务</h3>
336
+ <p class="text-gray-300 text-sm">
337
+ 一个简单、高效的随机图片 API，为您的项目提供美丽的随机图片资源。
338
+ </p>
339
+ <div class="mt-4 flex space-x-4">
340
+ <a href="#" class="text-gray-400 hover:text-white">
341
+ <i class="fab fa-github text-xl"></i>
342
+ </a>
343
+ <a href="#" class="text-gray-400 hover:text-white">
344
+ <i class="fab fa-twitter text-xl"></i>
345
+ </a>
346
+ </div>
347
+ </div>
348
+
349
+ <div>
350
+ <h3 class="text-white text-lg font-medium mb-4">快速链接</h3>
351
+ <ul class="space-y-2">
352
+ <li><a href="#features" class="text-gray-300 hover:text-white text-sm">服务介绍</a></li>
353
+ <li><a href="#api" class="text-gray-300 hover:text-white text-sm">API文档</a></li>
354
+ <li><a href="#stats" class="text-gray-300 hover:text-white text-sm">服务统计</a></li>
355
+ </ul>
356
+ </div>
357
+
358
+ <div>
359
+ <h3 class="text-white text-lg font-medium mb-4">联系信息</h3>
360
+ <ul class="space-y-2">
361
+ <li class="text-gray-300 text-sm">版本: 1.0.0</li>
362
+ <li class="text-gray-300 text-sm">© 2025 随机图片服务</li>
363
+ <li class="text-gray-300 text-sm">所有图片资源均来自网络</li>
364
+ </ul>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </footer>
369
+
370
+ <script>
371
+ function refreshPreview(type) {
372
+ const element = document.getElementById(`${type}-preview`);
373
+ element.style.backgroundImage = `url('https://api-hrandom-pic.imixc.top/?type=${type}&t=${new Date().getTime()}')`;
374
+
375
+ // 添加动画效果
376
+ element.style.opacity = '0.5';
377
+ setTimeout(() => {
378
+ element.style.opacity = '1';
379
+ }, 300);
380
+ }
381
+
382
+ function copyToClipboard(text) {
383
+ navigator.clipboard.writeText(text).then(() => {
384
+ alert('已复制到剪贴板！');
385
+ }).catch(err => {
386
+ console.error('复制失败: ', err);
387
+ });
388
+ }
389
+
390
+ function testApi(type) {
391
+ window.open(`https://api-hrandom-pic.imixc.top/?type=${type}`, '_blank');
392
+ }
393
+
394
+ // 平滑滚动
395
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
396
+ anchor.addEventListener('click', function (e) {
397
+ e.preventDefault();
398
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
399
+ behavior: 'smooth'
400
+ });
401
+ });
402
+ });
403
+ </script>
404
+ <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=ixingchen/pic" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
405
+ </html>