ixingchen commited on
Commit
dd02792
·
verified ·
1 Parent(s): e878a19

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +920 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gh
3
- emoji: 🏢
4
- colorFrom: red
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: gh
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: purple
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,920 @@
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>GitHub 下载加速器 - 国内高速访问GitHub资源</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: 'class',
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ light: '#7c3aed',
16
+ dark: '#8b5cf6'
17
+ },
18
+ secondary: {
19
+ light: '#4f46e5',
20
+ dark: '#6366f1'
21
+ }
22
+ },
23
+ animation: {
24
+ 'float': 'float 6s ease-in-out infinite',
25
+ 'fade-in': 'fadeIn 0.5s ease-out',
26
+ 'fade-in-up': 'fadeInUp 0.6s ease-out',
27
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
28
+ },
29
+ keyframes: {
30
+ float: {
31
+ '0%, 100%': { transform: 'translateY(0)' },
32
+ '50%': { transform: 'translateY(-10px)' }
33
+ },
34
+ fadeIn: {
35
+ '0%': { opacity: '0' },
36
+ '100%': { opacity: '1' }
37
+ },
38
+ fadeInUp: {
39
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
40
+ '100%': { opacity: '1', transform: 'translateY(0)' }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
48
+ <style>
49
+ .gradient-bg {
50
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
51
+ }
52
+ .dark .gradient-bg {
53
+ background: linear-gradient(135deg, #4b6cb7, #6a3093);
54
+ }
55
+ .link-card {
56
+ transition: all 0.3s ease;
57
+ transform: translateY(0);
58
+ }
59
+ .link-card:hover {
60
+ transform: translateY(-8px);
61
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
62
+ }
63
+ .dark .link-card:hover {
64
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
65
+ }
66
+ .loading {
67
+ display: inline-block;
68
+ width: 20px;
69
+ height: 20px;
70
+ border: 3px solid rgba(255,255,255,.3);
71
+ border-radius: 50%;
72
+ border-top-color: #fff;
73
+ animation: spin 1s ease-in-out infinite;
74
+ }
75
+ @keyframes spin {
76
+ to { transform: rotate(360deg); }
77
+ }
78
+ .toast {
79
+ position: fixed;
80
+ bottom: 20px;
81
+ left: 50%;
82
+ transform: translateX(-50%);
83
+ background-color: #333;
84
+ color: white;
85
+ padding: 12px 24px;
86
+ border-radius: 8px;
87
+ z-index: 1000;
88
+ opacity: 0;
89
+ transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
90
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
91
+ }
92
+ .dark .toast {
93
+ background-color: #1e293b;
94
+ }
95
+ .toast.show {
96
+ opacity: 1;
97
+ transform: translateX(-50%) translateY(0);
98
+ }
99
+ .mobile-menu {
100
+ display: none;
101
+ position: fixed;
102
+ top: 0;
103
+ left: 0;
104
+ width: 100%;
105
+ height: 100%;
106
+ background-color: rgba(0,0,0,0.95);
107
+ z-index: 100;
108
+ flex-direction: column;
109
+ justify-content: center;
110
+ align-items: center;
111
+ backdrop-filter: blur(8px);
112
+ }
113
+ .dark .mobile-menu {
114
+ background-color: rgba(15, 23, 42, 0.98);
115
+ }
116
+ .mobile-menu.show {
117
+ display: flex;
118
+ animation: fadeIn 0.3s ease-out;
119
+ }
120
+ .mobile-menu a {
121
+ color: white;
122
+ font-size: 1.5rem;
123
+ margin: 15px 0;
124
+ text-decoration: none;
125
+ transition: all 0.3s ease;
126
+ opacity: 0;
127
+ transform: translateY(10px);
128
+ }
129
+ .mobile-menu.show a {
130
+ opacity: 1;
131
+ transform: translateY(0);
132
+ }
133
+ .mobile-menu a:nth-child(1) { transition-delay: 0.1s; }
134
+ .mobile-menu a:nth-child(2) { transition-delay: 0.2s; }
135
+ .mobile-menu a:nth-child(3) { transition-delay: 0.3s; }
136
+ .mobile-menu a:nth-child(4) { transition-delay: 0.4s; }
137
+ .mobile-menu a:hover {
138
+ color: #8b5cf6;
139
+ }
140
+ .mobile-menu-close {
141
+ position: absolute;
142
+ top: 20px;
143
+ right: 20px;
144
+ color: white;
145
+ font-size: 2rem;
146
+ cursor: pointer;
147
+ transition: all 0.3s ease;
148
+ }
149
+ .mobile-menu-close:hover {
150
+ transform: rotate(90deg);
151
+ color: #8b5cf6;
152
+ }
153
+ .info-cards-container {
154
+ display: flex;
155
+ overflow-x: auto;
156
+ scrollbar-width: none;
157
+ -ms-overflow-style: none;
158
+ padding-bottom: 8px;
159
+ }
160
+ .info-cards-container::-webkit-scrollbar {
161
+ display: none;
162
+ }
163
+ .info-card {
164
+ flex: 0 0 auto;
165
+ width: 300px;
166
+ margin-right: 16px;
167
+ transition: all 0.3s ease;
168
+ }
169
+ .info-card:hover {
170
+ transform: translateY(-5px);
171
+ }
172
+ .info-card:last-child {
173
+ margin-right: 0;
174
+ }
175
+ @media (min-width: 768px) {
176
+ .info-cards-container {
177
+ display: grid;
178
+ grid-template-columns: repeat(3, 1fr);
179
+ gap: 16px;
180
+ overflow-x: visible;
181
+ }
182
+ .info-card {
183
+ width: auto;
184
+ margin-right: 0;
185
+ }
186
+ }
187
+ .theme-toggle {
188
+ position: relative;
189
+ width: 48px;
190
+ height: 24px;
191
+ border-radius: 12px;
192
+ background-color: #e2e8f0;
193
+ transition: all 0.3s ease;
194
+ cursor: pointer;
195
+ }
196
+ .dark .theme-toggle {
197
+ background-color: #334155;
198
+ }
199
+ .theme-toggle-handle {
200
+ position: absolute;
201
+ top: 2px;
202
+ left: 2px;
203
+ width: 20px;
204
+ height: 20px;
205
+ border-radius: 50%;
206
+ background-color: white;
207
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
208
+ transition: all 0.3s ease;
209
+ }
210
+ .dark .theme-toggle-handle {
211
+ left: 26px;
212
+ background-color: #1e293b;
213
+ }
214
+ .wave-shape {
215
+ position: absolute;
216
+ bottom: 0;
217
+ left: 0;
218
+ width: 100%;
219
+ overflow: hidden;
220
+ line-height: 0;
221
+ }
222
+ .wave-shape svg {
223
+ position: relative;
224
+ display: block;
225
+ width: calc(100% + 1.3px);
226
+ height: 80px;
227
+ }
228
+ .wave-shape .shape-fill {
229
+ fill: #FFFFFF;
230
+ }
231
+ .dark .wave-shape .shape-fill {
232
+ fill: #0f172a;
233
+ }
234
+ .glow {
235
+ filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
236
+ }
237
+ .dark .glow {
238
+ filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8));
239
+ }
240
+ .animate-delay-100 {
241
+ animation-delay: 0.1s;
242
+ }
243
+ .animate-delay-200 {
244
+ animation-delay: 0.2s;
245
+ }
246
+ .animate-delay-300 {
247
+ animation-delay: 0.3s;
248
+ }
249
+ </style>
250
+ </head>
251
+ <body class="bg-gray-50 dark:bg-slate-900 transition-colors duration-300">
252
+ <!-- Theme Toggle -->
253
+ <div class="fixed top-4 right-4 z-50 flex items-center space-x-2">
254
+ <i class="fas fa-sun text-yellow-400 dark:text-gray-300"></i>
255
+ <div class="theme-toggle" id="themeToggle">
256
+ <div class="theme-toggle-handle"></div>
257
+ </div>
258
+ <i class="fas fa-moon text-gray-400 dark:text-indigo-300"></i>
259
+ </div>
260
+
261
+ <!-- Toast Notification -->
262
+ <div id="toast" class="toast"></div>
263
+
264
+ <!-- Mobile Menu -->
265
+ <div id="mobileMenu" class="mobile-menu">
266
+ <span id="mobileMenuClose" class="mobile-menu-close"><i class="fas fa-times"></i></span>
267
+ <a href="#features" onclick="hideMobileMenu()">功能</a>
268
+ <a href="#how-to-use" onclick="hideMobileMenu()">使用指南</a>
269
+ <a href="#faq" onclick="hideMobileMenu()">常见问题</a>
270
+ <a href="#converter" onclick="hideMobileMenu()">立即体验</a>
271
+ </div>
272
+
273
+ <!-- Header -->
274
+ <header class="gradient-bg text-white relative overflow-hidden">
275
+ <div class="wave-shape">
276
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
277
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
278
+ </svg>
279
+ </div>
280
+ <div class="container mx-auto px-4 py-6 relative z-10">
281
+ <div class="flex justify-between items-center">
282
+ <div class="flex items-center space-x-3">
283
+ <i class="fab fa-github text-4xl glow"></i>
284
+ <h1 class="text-2xl font-bold">GitHub加速下载</h1>
285
+ </div>
286
+ <nav class="hidden md:flex space-x-8">
287
+ <a href="#features" class="hover:text-gray-200 transition duration-300">功能</a>
288
+ <a href="#how-to-use" class="hover:text-gray-200 transition duration-300">使用指南</a>
289
+ <a href="#faq" class="hover:text-gray-200 transition duration-300">常见问题</a>
290
+ </nav>
291
+ <button id="mobileMenuButton" class="md:hidden text-xl hover:text-gray-200 transition">
292
+ <i class="fas fa-bars"></i>
293
+ </button>
294
+ </div>
295
+ <div class="mt-16 mb-20 text-center">
296
+ <h2 class="text-4xl md:text-5xl font-bold mb-6 animate-fade-in-up">国内高速下载GitHub资源</h2>
297
+ <p class="text-xl max-w-2xl mx-auto opacity-90 animate-fade-in-up animate-delay-100">突破网络限制,使用国内镜像加速下载GitHub上的仓库、Release文件、源码等资源</p>
298
+ <div class="mt-10 flex justify-center animate-fade-in-up animate-delay-200">
299
+ <a href="#converter" class="bg-white text-primary-light px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center">
300
+ <i class="fas fa-bolt mr-2"></i> 立即体验
301
+ </a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </header>
306
+
307
+ <!-- Main Converter -->
308
+ <main class="container mx-auto px-4 py-12 -mt-10" id="converter">
309
+ <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 max-w-4xl mx-auto transition-all duration-300 animate-fade-in-up animate-delay-300">
310
+ <div class="flex items-center justify-between mb-6">
311
+ <h2 class="text-2xl font-bold text-gray-800 dark:text-white">GitHub链接转换器</h2>
312
+ <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
313
+ <i class="fas fa-server"></i>
314
+ <span>服务器状态: <span class="font-bold text-green-500">正常</span></span>
315
+ </div>
316
+ </div>
317
+ <div class="space-y-4">
318
+ <div>
319
+ <label for="github-url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">GitHub原始链接</label>
320
+ <div class="flex">
321
+ <input type="text" id="github-url" placeholder="https://github.com/owner/repo/releases/download/v1.0/example.zip"
322
+ class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light dark:bg-slate-700 dark:text-white dark:focus:ring-primary-dark transition">
323
+ <button id="convert-btn" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-r-lg hover:bg-opacity-90 transition flex items-center justify-center min-w-24">
324
+ <span id="convert-text">转换</span>
325
+ <span id="convert-spinner" class="loading hidden ml-2"></span>
326
+ </button>
327
+ </div>
328
+ </div>
329
+ <div id="result-container" class="hidden">
330
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">加速下载链接</label>
331
+ <div class="flex">
332
+ <input type="text" id="accelerated-url" readonly
333
+ class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-l-lg bg-gray-50 dark:bg-slate-700 dark:text-white truncate">
334
+ <button id="copy-btn" class="bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-gray-200 px-4 py-3 hover:bg-gray-300 dark:hover:bg-slate-500 transition">
335
+ <i class="fas fa-copy"></i>
336
+ </button>
337
+ <a id="download-btn" class="bg-green-500 text-white px-4 py-3 rounded-r-lg hover:bg-green-600 transition flex items-center">
338
+ <i class="fas fa-download mr-2"></i> 下载
339
+ </a>
340
+ </div>
341
+ <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
342
+ <span id="speed-indicator" class="inline-flex items-center">
343
+ <span class="w-3 h-3 bg-green-500 rounded-full mr-1 animate-pulse-slow"></span>
344
+ <span>高速通道已就绪</span>
345
+ </span>
346
+ <span class="ml-4">预计下载速度: <span class="font-bold text-green-600 dark:text-green-400">5-10MB/s</span></span>
347
+ </div>
348
+ </div>
349
+ <div id="error-message" class="hidden text-red-500 dark:text-red-400 text-sm mt-2"></div>
350
+ </div>
351
+
352
+ <!-- Info Cards - Horizontal Scroll on Mobile, Grid on Desktop -->
353
+ <div class="mt-8">
354
+ <div class="info-cards-container">
355
+ <div class="info-card bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg border border-blue-100 dark:border-blue-800/50">
356
+ <h3 class="font-bold text-blue-800 dark:text-blue-200 mb-2 flex items-center">
357
+ <i class="fas fa-link mr-2"></i> 常用链接示例
358
+ </h3>
359
+ <ul class="space-y-2 text-sm">
360
+ <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo</a></li>
361
+ <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo/releases</a></li>
362
+ <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo/archive/main.zip</a></li>
363
+ </ul>
364
+ </div>
365
+ <div class="info-card bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg border border-purple-100 dark:border-purple-800/50">
366
+ <h3 class="font-bold text-purple-800 dark:text-purple-200 mb-2 flex items-center">
367
+ <i class="fas fa-check-circle mr-2"></i> 支持的类型
368
+ </h3>
369
+ <ul class="space-y-2 text-sm">
370
+ <li class="flex items-center"><i class="fas fa-code-branch text-purple-500 mr-2"></i> 仓库源码下载</li>
371
+ <li class="flex items-center"><i class="fas fa-box-open text-purple-500 mr-2"></i> Releases文件</li>
372
+ <li class="flex items-center"><i class="fas fa-tags text-purple-500 mr-2"></i> 分支/标签下载</li>
373
+ </ul>
374
+ </div>
375
+ <div class="info-card bg-green-50 dark:bg-green-900/30 p-4 rounded-lg border border-green-100 dark:border-green-800/50">
376
+ <h3 class="font-bold text-green-800 dark:text-green-200 mb-2 flex items-center">
377
+ <i class="fas fa-server mr-2"></i> 加速节点
378
+ </h3>
379
+ <div class="flex items-center space-x-2">
380
+ <div class="flex-1">
381
+ <select id="mirror-select" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-slate-700 dark:text-white">
382
+ <option value="auto">自动选择最优节点</option>
383
+ <option value="beijing">北京节点</option>
384
+ <option value="shanghai">上海节点</option>
385
+ <option value="guangzhou">广州节点</option>
386
+ <option value="hongkong">香港节点</option>
387
+ </select>
388
+ </div>
389
+ <button id="ping-btn" class="bg-green-100 dark:bg-green-800/50 text-green-700 dark:text-green-300 p-2 rounded-md hover:bg-green-200 dark:hover:bg-green-700 transition">
390
+ <i class="fas fa-sync-alt"></i>
391
+ </button>
392
+ </div>
393
+ <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
394
+ <i class="fas fa-info-circle mr-1"></i> 当前推荐: <span class="font-medium">香港节点</span>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </main>
401
+
402
+ <!-- Features -->
403
+ <section class="bg-gray-100 dark:bg-slate-800 py-16 transition-colors duration-300" id="features">
404
+ <div class="container mx-auto px-4">
405
+ <div class="text-center mb-12">
406
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">为什么选择我们的加速服务</h2>
407
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">专为国内开发者优化的GitHub资源加速解决方案</p>
408
+ </div>
409
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
410
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up">
411
+ <div class="text-blue-500 mb-4 text-4xl">
412
+ <i class="fas fa-bolt"></i>
413
+ </div>
414
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">极速下载</h3>
415
+ <p class="text-gray-600 dark:text-gray-300">通过国内CDN节点加速,下载速度提升10倍以上,告别GitHub的缓慢下载体验。</p>
416
+ <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
417
+ <span class="text-sm text-gray-500 dark:text-gray-400">实测速度</span>
418
+ <span class="font-bold text-blue-500">8.4MB/s</span>
419
+ </div>
420
+ </div>
421
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up animate-delay-100">
422
+ <div class="text-purple-500 mb-4 text-4xl">
423
+ <i class="fas fa-shield-alt"></i>
424
+ </div>
425
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">稳定可靠</h3>
426
+ <p class="text-gray-600 dark:text-gray-300">多节点负载均衡,自动故障转移,确保服务24小时稳定可用。</p>
427
+ <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
428
+ <span class="text-sm text-gray-500 dark:text-gray-400">运行时间</span>
429
+ <span class="font-bold text-purple-500">99.98%</span>
430
+ </div>
431
+ </div>
432
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up animate-delay-200">
433
+ <div class="text-green-500 mb-4 text-4xl">
434
+ <i class="fas fa-lock"></i>
435
+ </div>
436
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">安全加密</h3>
437
+ <p class="text-gray-600 dark:text-gray-300">所有传输数据加密处理,确保您的下载内容安全无篡改。</p>
438
+ <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center">
439
+ <span class="text-sm text-gray-500 dark:text-gray-400">安全认证</span>
440
+ <span class="font-bold text-green-500">SSL/TLS</span>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </section>
446
+
447
+ <!-- How to Use -->
448
+ <section class="py-16 bg-white dark:bg-slate-900 transition-colors duration-300" id="how-to-use">
449
+ <div class="container mx-auto px-4">
450
+ <div class="text-center mb-12">
451
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">使用指南</h2>
452
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">简单三步,轻松加速GitHub资源下载</p>
453
+ </div>
454
+ <div class="max-w-4xl mx-auto">
455
+ <div class="flex flex-col md:flex-row items-center mb-12">
456
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center animate-float">
457
+ <div class="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg">
458
+ 1
459
+ </div>
460
+ </div>
461
+ <div class="md:w-2/3 md:pl-8 animate-fade-in-up">
462
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">复制GitHub链接</h3>
463
+ <p class="text-gray-600 dark:text-gray-300">在GitHub上找到您需要下载的仓库、Release文件或源码的原始链接,复制到剪贴板。</p>
464
+ <div class="mt-4 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg inline-block">
465
+ <code class="text-sm text-purple-600 dark:text-purple-300">https://github.com/owner/repo</code>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ <div class="flex flex-col md:flex-row items-center mb-12">
470
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center order-1 md:order-2 animate-float animate-delay-100">
471
+ <div class="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg">
472
+ 2
473
+ </div>
474
+ </div>
475
+ <div class="md:w-2/3 md:pr-8 order-2 md:order-1 animate-fade-in-up animate-delay-100">
476
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">粘贴并转换</h3>
477
+ <p class="text-gray-600 dark:text-gray-300">将链接粘贴到本页面的输入框中,点击"转换"按钮生成加速下载链接。</p>
478
+ <div class="mt-4 flex">
479
+ <input type="text" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg dark:bg-slate-700 dark:text-white" value="https://github.com/owner/repo" readonly>
480
+ <button class="bg-blue-500 text-white px-4 py-2 rounded-r-lg">转换</button>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="flex flex-col md:flex-row items-center">
485
+ <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center animate-float animate-delay-200">
486
+ <div class="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg">
487
+ 3
488
+ </div>
489
+ </div>
490
+ <div class="md:w-2/3 md:pl-8 animate-fade-in-up animate-delay-200">
491
+ <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">高速下载</h3>
492
+ <p class="text-gray-600 dark:text-gray-300">点击"下载"按钮或使用下载工具获取加速后的文件,享受极速下载体验。</p>
493
+ <div class="mt-4 flex">
494
+ <input type="text" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg dark:bg-slate-700 dark:text-white" value="https://mirror.example.com/owner/repo" readonly>
495
+ <button class="bg-green-500 text-white px-4 py-2 rounded-r-lg flex items-center">
496
+ <i class="fas fa-download mr-2"></i> 下载
497
+ </button>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- FAQ -->
506
+ <section class="bg-gray-100 dark:bg-slate-800 py-16 transition-colors duration-300" id="faq">
507
+ <div class="container mx-auto px-4">
508
+ <div class="text-center mb-12">
509
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">常见问题</h2>
510
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">您可能关心的问题解答</p>
511
+ </div>
512
+ <div class="max-w-3xl mx-auto space-y-4">
513
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md">
514
+ <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle">
515
+ <i class="fas fa-question-circle text-purple-500 mr-2"></i>
516
+ 这个服务是免费的吗?
517
+ <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i>
518
+ </h3>
519
+ <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden">
520
+ <p>是的,我们的GitHub加速下载服务完全免费,不收取任何费用。我们通过公益CDN节点提供加速服务。</p>
521
+ </div>
522
+ </div>
523
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md">
524
+ <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle">
525
+ <i class="fas fa-question-circle text-purple-500 mr-2"></i>
526
+ 支持哪些类型的GitHub链接?
527
+ <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i>
528
+ </h3>
529
+ <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden">
530
+ <p>我们支持几乎所有GitHub资源链接,包括仓库源码下载(zip/tar.gz)、Release文件、分支/标签下载等。</p>
531
+ <ul class="mt-2 space-y-1">
532
+ <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> 仓库源码下载</li>
533
+ <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> Releases文件</li>
534
+ <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> 分支/标签下载</li>
535
+ </ul>
536
+ </div>
537
+ </div>
538
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md">
539
+ <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle">
540
+ <i class="fas fa-question-circle text-purple-500 mr-2"></i>
541
+ 下载速度能达到多少?
542
+ <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i>
543
+ </h3>
544
+ <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden">
545
+ <p>根据网络状况不同,通常可以达到5-10MB/s的下载速度,比直接访问GitHub快10倍以上。</p>
546
+ <div class="mt-3 bg-gray-100 dark:bg-slate-600 p-3 rounded-lg">
547
+ <div class="flex justify-between text-sm mb-1">
548
+ <span>下载速度</span>
549
+ <span class="font-bold">8.4MB/s</span>
550
+ </div>
551
+ <div class="w-full bg-gray-200 dark:bg-slate-500 rounded-full h-2">
552
+ <div class="bg-green-500 h-2 rounded-full" style="width: 84%"></div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md">
558
+ <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle">
559
+ <i class="fas fa-question-circle text-purple-500 mr-2"></i>
560
+ 文件安全性如何保证?
561
+ <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i>
562
+ </h3>
563
+ <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden">
564
+ <p>我们会对所有加速文件进行MD5校验,确保与GitHub原始文件完全一致,不会对文件内容做任何修改。</p>
565
+ <div class="mt-3 flex items-center text-sm bg-gray-100 dark:bg-slate-600 p-3 rounded-lg">
566
+ <i class="fas fa-shield-alt text-green-500 mr-2"></i>
567
+ <span>所有文件均经过完整性验证</span>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </section>
574
+
575
+ <!-- Stats -->
576
+ <section class="py-12 bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-800 dark:to-blue-800 text-white">
577
+ <div class="container mx-auto px-4">
578
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
579
+ <div class="animate-fade-in-up">
580
+ <div class="text-4xl font-bold mb-2">10,000+</div>
581
+ <div class="text-sm opacity-90">每日用户</div>
582
+ </div>
583
+ <div class="animate-fade-in-up animate-delay-100">
584
+ <div class="text-4xl font-bold mb-2">50TB+</div>
585
+ <div class="text-sm opacity-90">每日流量</div>
586
+ </div>
587
+ <div class="animate-fade-in-up animate-delay-200">
588
+ <div class="text-4xl font-bold mb-2">99.98%</div>
589
+ <div class="text-sm opacity-90">服务可用性</div>
590
+ </div>
591
+ <div class="animate-fade-in-up animate-delay-300">
592
+ <div class="text-4xl font-bold mb-2">8.4MB/s</div>
593
+ <div class="text-sm opacity-90">平均下载速度</div>
594
+ </div>
595
+ </div>
596
+ </div>
597
+ </section>
598
+
599
+ <!-- CTA -->
600
+ <section class="py-16 bg-white dark:bg-slate-900">
601
+ <div class="container mx-auto px-4 text-center">
602
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">立即体验GitHub高速下载</h2>
603
+ <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">告别缓慢的GitHub下载体验,享受国内CDN加速带来的极速下载</p>
604
+ <a href="#converter" class="bg-primary-light dark:bg-primary-dark text-white px-8 py-4 rounded-full font-bold hover:bg-opacity-90 transition duration-300 shadow-lg hover:shadow-xl inline-flex items-center animate-bounce">
605
+ <i class="fas fa-bolt mr-2"></i> 开始转换
606
+ </a>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- Footer -->
611
+ <footer class="bg-gray-800 dark:bg-slate-950 text-white py-12 transition-colors duration-300">
612
+ <div class="container mx-auto px-4">
613
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
614
+ <div>
615
+ <div class="flex items-center space-x-2 mb-4">
616
+ <i class="fab fa-github text-3xl"></i>
617
+ <h3 class="text-xl font-bold">GitHub加速下载</h3>
618
+ </div>
619
+ <p class="text-gray-400">为国内开发者提供高速稳定的GitHub资源下载服务。</p>
620
+ <div class="mt-4 flex space-x-4">
621
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weixin"></i></a>
622
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-qq"></i></a>
623
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
624
+ </div>
625
+ </div>
626
+ <div>
627
+ <h4 class="font-bold mb-4 text-white">快速链接</h4>
628
+ <ul class="space-y-2">
629
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">功能特点</a></li>
630
+ <li><a href="#how-to-use" class="text-gray-400 hover:text-white transition">使用指南</a></li>
631
+ <li><a href="#faq" class="text-gray-400 hover:text-white transition">常见问题</a></li>
632
+ </ul>
633
+ </div>
634
+ <div>
635
+ <h4 class="font-bold mb-4 text-white">相关资源</h4>
636
+ <ul class="space-y-2">
637
+ <li><a href="https://github.com" class="text-gray-400 hover:text-white transition" target="_blank">GitHub官网</a></li>
638
+ <li><a href="https://developer.aliyun.com/mirror/" class="text-gray-400 hover:text-white transition" target="_blank">阿里云镜像站</a></li>
639
+ <li><a href="https://mirrors.tuna.tsinghua.edu.cn/" class="text-gray-400 hover:text-white transition" target="_blank">清华大学镜像站</a></li>
640
+ </ul>
641
+ </div>
642
+ <div>
643
+ <h4 class="font-bold mb-4 text-white">订阅更新</h4>
644
+ <p class="text-gray-400 mb-4">订阅我们的邮件列表,获取最新功能更新和服务状态通知</p>
645
+ <div class="flex">
646
+ <input type="email" placeholder="您的邮箱" class="px-4 py-2 rounded-l-lg w-full dark:bg-gray-700 dark:text-white">
647
+ <button class="bg-primary-light dark:bg-primary-dark px-4 py-2 rounded-r-lg">订阅</button>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
652
+ <p>© 2023 GitHub加速下载服务. 保留所有权利.</p>
653
+ </div>
654
+ </div>
655
+ </footer>
656
+
657
+ <script>
658
+ document.addEventListener('DOMContentLoaded', function() {
659
+ // Check for dark mode preference
660
+ if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
661
+ document.documentElement.classList.add('dark');
662
+ } else {
663
+ document.documentElement.classList.remove('dark');
664
+ }
665
+
666
+ // Theme toggle functionality
667
+ const themeToggle = document.getElementById('themeToggle');
668
+ themeToggle.addEventListener('click', function() {
669
+ if (document.documentElement.classList.contains('dark')) {
670
+ document.documentElement.classList.remove('dark');
671
+ localStorage.setItem('color-theme', 'light');
672
+ } else {
673
+ document.documentElement.classList.add('dark');
674
+ localStorage.setItem('color-theme', 'dark');
675
+ }
676
+ });
677
+
678
+ // Mobile menu functionality
679
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
680
+ const mobileMenu = document.getElementById('mobileMenu');
681
+ const mobileMenuClose = document.getElementById('mobileMenuClose');
682
+
683
+ mobileMenuButton.addEventListener('click', showMobileMenu);
684
+ mobileMenuClose.addEventListener('click', hideMobileMenu);
685
+
686
+ function showMobileMenu() {
687
+ mobileMenu.classList.add('show');
688
+ document.body.style.overflow = 'hidden';
689
+
690
+ // Animate menu items
691
+ const menuItems = document.querySelectorAll('.mobile-menu a');
692
+ menuItems.forEach((item, index) => {
693
+ item.style.transitionDelay = `${index * 0.1}s`;
694
+ });
695
+ }
696
+
697
+ function hideMobileMenu() {
698
+ mobileMenu.classList.remove('show');
699
+ document.body.style.overflow = '';
700
+ }
701
+
702
+ // Example links
703
+ document.querySelectorAll('.example-link').forEach(link => {
704
+ link.addEventListener('click', function(e) {
705
+ e.preventDefault();
706
+ document.getElementById('github-url').value = this.textContent;
707
+ document.getElementById('github-url').focus();
708
+ });
709
+ });
710
+
711
+ // Convert button
712
+ document.getElementById('convert-btn').addEventListener('click', function() {
713
+ const githubUrl = document.getElementById('github-url').value.trim();
714
+ const mirror = document.getElementById('mirror-select').value;
715
+
716
+ if (!githubUrl) {
717
+ showError('请输入GitHub链接');
718
+ return;
719
+ }
720
+
721
+ if (!githubUrl.includes('github.com')) {
722
+ showError('请输入有效的GitHub链接');
723
+ return;
724
+ }
725
+
726
+ // Show loading spinner
727
+ document.getElementById('convert-text').classList.add('hidden');
728
+ document.getElementById('convert-spinner').classList.remove('hidden');
729
+ document.getElementById('error-message').classList.add('hidden');
730
+
731
+ // Simulate API call with timeout
732
+ setTimeout(() => {
733
+ try {
734
+ // This is a simulation - in a real app you would call your backend API
735
+ const acceleratedUrl = generateAcceleratedUrl(githubUrl, mirror);
736
+
737
+ document.getElementById('accelerated-url').value = acceleratedUrl;
738
+ document.getElementById('download-btn').href = acceleratedUrl;
739
+ document.getElementById('result-container').classList.remove('hidden');
740
+
741
+ // Scroll to result
742
+ document.getElementById('result-container').scrollIntoView({ behavior: 'smooth' });
743
+
744
+ showToast('转换成功!', 'success');
745
+ } catch (error) {
746
+ showError('转换失败: ' + error.message);
747
+ showToast('转换失败: ' + error.message, 'error');
748
+ } finally {
749
+ // Hide loading spinner
750
+ document.getElementById('convert-text').classList.remove('hidden');
751
+ document.getElementById('convert-spinner').classList.add('hidden');
752
+ }
753
+ }, 1000);
754
+ });
755
+
756
+ // Function to generate accelerated URL (simulation)
757
+ function generateAcceleratedUrl(githubUrl, mirror) {
758
+ // Basic validation
759
+ if (!githubUrl.startsWith('https://github.com/')) {
760
+ throw new Error('无效的GitHub链接');
761
+ }
762
+
763
+ // Remove any query parameters or fragments
764
+ const cleanUrl = githubUrl.split('?')[0].split('#')[0];
765
+
766
+ // Determine mirror domain based on selection
767
+ let mirrorDomain;
768
+ switch(mirror) {
769
+ case 'beijing':
770
+ mirrorDomain = 'github.axingchen.com';
771
+ break;
772
+ case 'shanghai':
773
+ mirrorDomain = 'github.axingchen.com';
774
+ break;
775
+ case 'guangzhou':
776
+ mirrorDomain = 'github.axingchen.com';
777
+ break;
778
+ case 'hongkong':
779
+ mirrorDomain = 'github.axingchen.com';
780
+ break;
781
+ default: // auto
782
+ mirrorDomain = 'github.axingchen.com';
783
+ }
784
+
785
+ // Construct accelerated URL in the correct format
786
+ return `https://${mirrorDomain}/${cleanUrl}`;
787
+ }
788
+
789
+ // Copy button
790
+ document.getElementById('copy-btn').addEventListener('click', function() {
791
+ const urlInput = document.getElementById('accelerated-url');
792
+ urlInput.select();
793
+ document.execCommand('copy');
794
+
795
+ // Show copied feedback
796
+ const originalText = this.innerHTML;
797
+ this.innerHTML = '<i class="fas fa-check"></i> 已复制';
798
+ setTimeout(() => {
799
+ this.innerHTML = originalText;
800
+ }, 2000);
801
+
802
+ showToast('链接已复制到剪贴板', 'success');
803
+ });
804
+
805
+ // Ping button
806
+ document.getElementById('ping-btn').addEventListener('click', function() {
807
+ const button = this;
808
+ const originalIcon = button.innerHTML;
809
+
810
+ // Show loading
811
+ button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
812
+ button.disabled = true;
813
+
814
+ // Simulate ping test
815
+ setTimeout(() => {
816
+ const mirrors = [
817
+ { name: '北京节点', ping: 45 },
818
+ { name: '上海节点', ping: 38 },
819
+ { name: '广州节点', ping: 52 },
820
+ { name: '香港节点', ping: 28 }
821
+ ];
822
+
823
+ const fastest = mirrors.reduce((prev, current) =>
824
+ (prev.ping < current.ping) ? prev : current
825
+ );
826
+
827
+ showToast(`最快节点: ${fastest.name} (${fastest.ping}ms)`, 'info');
828
+
829
+ // Restore button
830
+ button.innerHTML = originalIcon;
831
+ button.disabled = false;
832
+ }, 1500);
833
+ });
834
+
835
+ // FAQ toggle
836
+ document.querySelectorAll('.faq-toggle').forEach(toggle => {
837
+ toggle.addEventListener('click', function() {
838
+ const content = this.nextElementSibling;
839
+ const icon = this.querySelector('.fa-chevron-down');
840
+
841
+ if (content.classList.contains('hidden')) {
842
+ content.classList.remove('hidden');
843
+ icon.style.transform = 'rotate(180deg)';
844
+ } else {
845
+ content.classList.add('hidden');
846
+ icon.style.transform = 'rotate(0deg)';
847
+ }
848
+ });
849
+ });
850
+
851
+ // Show error message
852
+ function showError(message) {
853
+ const errorElement = document.getElementById('error-message');
854
+ errorElement.textContent = message;
855
+ errorElement.classList.remove('hidden');
856
+ }
857
+
858
+ // Toast notification
859
+ function showToast(message, type = 'info') {
860
+ const toast = document.getElementById('toast');
861
+ toast.textContent = message;
862
+
863
+ // Set color based on type
864
+ switch(type) {
865
+ case 'success':
866
+ toast.style.backgroundColor = '#48BB78';
867
+ break;
868
+ case 'error':
869
+ toast.style.backgroundColor = '#F56565';
870
+ break;
871
+ case 'info':
872
+ toast.style.backgroundColor = '#4299E1';
873
+ break;
874
+ default:
875
+ toast.style.backgroundColor = '#333';
876
+ }
877
+
878
+ toast.classList.add('show');
879
+
880
+ // Hide after 3 seconds
881
+ setTimeout(() => {
882
+ toast.classList.remove('show');
883
+ }, 3000);
884
+ }
885
+
886
+ // Auto-convert when pressing Enter in input field
887
+ document.getElementById('github-url').addEventListener('keypress', function(e) {
888
+ if (e.key === 'Enter') {
889
+ document.getElementById('convert-btn').click();
890
+ }
891
+ });
892
+
893
+ // Animate elements when they come into view
894
+ const animateOnScroll = function() {
895
+ const elements = document.querySelectorAll('.animate-fade-in-up');
896
+
897
+ elements.forEach(element => {
898
+ const elementPosition = element.getBoundingClientRect().top;
899
+ const screenPosition = window.innerHeight / 1.2;
900
+
901
+ if (elementPosition < screenPosition) {
902
+ element.style.opacity = '1';
903
+ element.style.transform = 'translateY(0)';
904
+ }
905
+ });
906
+ };
907
+
908
+ // Set initial state for animated elements
909
+ document.querySelectorAll('.animate-fade-in-up').forEach(el => {
910
+ el.style.opacity = '0';
911
+ el.style.transform = 'translateY(20px)';
912
+ el.style.transition = 'all 0.6s ease-out';
913
+ });
914
+
915
+ window.addEventListener('scroll', animateOnScroll);
916
+ animateOnScroll(); // Run once on page load
917
+ });
918
+ </script>
919
+ <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/gh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
920
+ </html>