Hugging Face's logo

Spaces:
ixingchen
/
ghproxy
Running

App Files Community
ixingchen commited on
Commit
eb052f2
·
verified ·
1 Parent(s): 9251379

🐳 15/03 - 13:15 - 仔细看看怎么美化页面,大气,高端

Browse files
Files changed (1) hide show
  1. index.html +792 -292
index.html CHANGED
@@ -3,383 +3,883 @@
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
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
9
  <style>
10
- .gradient-bg {
11
- background: linear-gradient(135deg, #6e8efb, #a777e3);
 
 
 
 
 
 
 
 
12
  }
13
- .link-card:hover {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
16
  }
17
- .pulse {
18
- animation: pulse 2s infinite;
 
 
 
 
19
  }
20
- @keyframes pulse {
21
- 0% {
22
- transform: scale(1);
23
- }
24
- 50% {
25
- transform: scale(1.05);
26
- }
27
- 100% {
28
- transform: scale(1);
29
- }
30
  }
31
- .loading {
32
- display: inline-block;
33
- width: 20px;
34
- height: 20px;
35
- border: 3px solid rgba(255,255,255,.3);
36
- border-radius: 50%;
37
- border-top-color: #fff;
38
- animation: spin 1s ease-in-out infinite;
39
  }
40
- @keyframes spin {
41
- to { transform: rotate(360deg); }
 
 
 
 
42
  }
43
- .toast {
44
- position: fixed;
45
- bottom: 20px;
46
- left: 50%;
47
- transform: translateX(-50%);
48
- background-color: #333;
49
  color: white;
 
50
  padding: 12px 24px;
51
- border-radius: 4px;
52
- z-index: 1000;
53
- opacity: 0;
54
- transition: opacity 0.3s ease;
55
  }
56
- .toast.show {
57
- opacity: 1;
 
 
 
58
  }
59
- .mobile-menu {
60
- display: none;
61
- position: fixed;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  top: 0;
63
  left: 0;
64
- width: 100%;
65
- height: 100%;
66
- background-color: rgba(0,0,0,0.9);
67
- z-index: 100;
68
- flex-direction: column;
69
- justify-content: center;
70
- align-items: center;
71
  }
72
- .mobile-menu.show {
73
- display: flex;
 
 
 
 
 
74
  }
75
- .mobile-menu a {
76
- color: white;
77
- font-size: 1.5rem;
78
- margin: 15px 0;
79
- text-decoration: none;
80
  }
81
- .mobile-menu-close {
82
- position: absolute;
83
- top: 20px;
84
- right: 20px;
85
- color: white;
86
- font-size: 2rem;
87
- cursor: pointer;
88
  }
89
- .info-cards-container {
90
- display: flex;
91
- overflow-x: auto;
92
- scrollbar-width: none; /* Firefox */
93
- -ms-overflow-style: none; /* IE and Edge */
94
- padding-bottom: 8px;
95
  }
96
- .info-cards-container::-webkit-scrollbar {
97
- display: none; /* Chrome, Safari, Opera */
 
 
 
98
  }
99
- .info-card {
100
- flex: 0 0 auto;
101
- width: 300px;
102
- margin-right: 16px;
103
  }
104
- .info-card:last-child {
105
- margin-right: 0;
 
106
  }
107
- @media (min-width: 768px) {
108
- .info-cards-container {
109
- display: grid;
110
- grid-template-columns: repeat(3, 1fr);
111
- gap: 16px;
112
- overflow-x: visible;
113
- }
114
- .info-card {
115
- width: auto;
116
- margin-right: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  }
118
  }
119
  </style>
120
  </head>
121
- <body class="bg-gray-50">
122
- <!-- Toast Notification -->
123
- <div id="toast" class="toast"></div>
124
-
125
- <!-- Mobile Menu -->
126
- <div id="mobileMenu" class="mobile-menu">
127
- <span id="mobileMenuClose" class="mobile-menu-close"><i class="fas fa-times"></i></span>
128
- <a href="#features" onclick="hideMobileMenu()">功能</a>
129
- <a href="#how-to-use" onclick="hideMobileMenu()">使用指南</a>
130
- <a href="#faq" onclick="hideMobileMenu()">常见问题</a>
131
- <a href="#converter" onclick="hideMobileMenu()">立即体验</a>
132
- </div>
133
-
134
- <!-- Header -->
135
- <header class="gradient-bg text-white">
136
- <div class="container mx-auto px-4 py-6">
137
- <div class="flex justify-between items-center">
138
- <div class="flex items-center space-x-2">
139
- <i class="fab fa-github text-3xl"></i>
140
- <h1 class="text-2xl font-bold">GitHub加速下载</h1>
141
  </div>
142
- <nav class="hidden md:flex space-x-6">
143
- <a href="#features" class="hover:text-gray-200 transition">功能</a>
144
- <a href="#how-to-use" class="hover:text-gray-200 transition">使用指南</a>
145
- <a href="#faq" class="hover:text-gray-200 transition">常见问题</a>
146
- </nav>
147
- <button id="mobileMenuButton" class="md:hidden text-xl">
148
- <i class="fas fa-bars"></i>
149
- </button>
150
- </div>
151
- <div class="mt-16 mb-20 text-center">
152
- <h2 class="text-4xl md:text-5xl font-bold mb-4">国��高速下载GitHub资源</h2>
153
- <p class="text-xl max-w-2xl mx-auto">突破网络限制，使用国内镜像加速下载GitHub上的仓库、Release文件、源码等资源</p>
154
- <div class="mt-8 flex justify-center">
155
- <a href="#converter" class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 shadow-lg pulse">立即体验</a>
156
  </div>
 
 
 
 
157
  </div>
158
  </div>
159
- </header>
160
 
161
- <!-- Main Converter -->
162
- <main class="container mx-auto px-4 py-12 -mt-10" id="converter">
163
- <div class="bg-white rounded-xl shadow-xl p-6 max-w-4xl mx-auto">
164
- <h2 class="text-2xl font-bold mb-6 text-gray-800">GitHub链接转换器</h2>
165
- <div class="space-y-4">
166
- <div>
167
- <label for="github-url" class="block text-sm font-medium text-gray-700 mb-1">GitHub原始链接</label>
168
- <div class="flex">
169
- <input type="text" id="github-url" placeholder="https://github.com/owner/repo/releases/download/v1.0/example.zip"
170
- class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
171
- <button id="convert-btn" class="bg-purple-600 text-white px-6 py-3 rounded-r-lg hover:bg-purple-700 transition flex items-center justify-center min-w-24">
172
- <span id="convert-text">转换</span>
173
- <span id="convert-spinner" class="loading hidden ml-2"></span>
174
- </button>
175
  </div>
176
  </div>
177
- <div id="result-container" class="hidden">
178
- <label class="block text-sm font-medium text-gray-700 mb-1">加速下载链接</label>
179
- <div class="flex">
180
- <input type="text" id="accelerated-url" readonly
181
- class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg bg-gray-50">
182
- <button id="copy-btn" class="bg-gray-200 text-gray-700 px-4 py-3 hover:bg-gray-300 transition">
183
- <i class="fas fa-copy"></i>
184
- </button>
185
- <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">
186
- <i class="fas fa-download mr-2"></i> 下载
187
- </a>
188
  </div>
189
- <div class="mt-2 text-sm text-gray-500">
190
- <span id="speed-indicator" class="inline-flex items-center">
191
- <span class="w-3 h-3 bg-green-500 rounded-full mr-1"></span>
192
- <span>高速通道已就绪</span>
193
- </span>
194
- <span class="ml-4">预计下载速度: <span class="font-bold">5-10MB/s</span></span>
195
  </div>
196
  </div>
197
- <div id="error-message" class="hidden text-red-500 text-sm mt-2"></div>
 
 
198
  </div>
199
 
200
- <!-- Info Cards - Horizontal Scroll on Mobile, Grid on Desktop -->
201
- <div class="mt-6">
202
- <div class="info-cards-container">
203
- <div class="info-card bg-blue-50 p-4 rounded-lg">
204
- <h3 class="font-bold text-blue-800 mb-2">常用链接示例</h3>
205
- <ul class="space-y-2 text-sm">
206
- <li><a href="#" class="text-blue-600 hover:underline example-link">https://github.com/owner/repo</a></li>
207
- <li><a href="#" class="text-blue-600 hover:underline example-link">https://github.com/owner/repo/releases</a></li>
208
- <li><a href="#" class="text-blue-600 hover:underline example-link">https://github.com/owner/repo/archive/main.zip</a></li>
209
- </ul>
210
  </div>
211
- <div class="info-card bg-purple-50 p-4 rounded-lg">
212
- <h3 class="font-bold text-purple-800 mb-2">支持的类型</h3>
213
- <ul class="space-y-2 text-sm">
214
- <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 仓库源码下载</li>
215
- <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Releases文件</li>
216
- <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 分支/标签下载</li>
217
- </ul>
218
- </div>
219
- <div class="info-card bg-green-50 p-4 rounded-lg">
220
- <h3 class="font-bold text-green-800 mb-2">加速节点</h3>
221
- <div class="flex items-center space-x-2">
222
- <div class="flex-1">
223
- <select id="mirror-select" class="w-full px-3 py-2 border border-gray-300 rounded-md">
224
- <option value="auto">自动选择最优节点</option>
225
- <option value="beijing">北京节点</option>
226
- <option value="shanghai">上海节点</option>
227
- <option value="guangzhou">广州节点</option>
228
- <option value="hongkong">香港节点</option>
229
- </select>
230
- </div>
231
- <button id="ping-btn" class="bg-green-100 text-green-700 p-2 rounded-md hover:bg-green-200">
232
- <i class="fas fa-sync-alt"></i>
233
- </button>
234
- </div>
235
  </div>
236
  </div>
 
 
 
237
  </div>
238
- </div>
239
- </main>
240
-
241
- <!-- Features -->
242
- <section class="bg-gray-100 py-16" id="features">
243
- <div class="container mx-auto px-4">
244
- <h2 class="text-3xl font-bold text-center mb-12">为什么选择我们的加速服务</h2>
245
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
246
- <div class="bg-white p-6 rounded-xl shadow-md link-card transition duration-300">
247
- <div class="text-purple-500 mb-4">
248
- <i class="fas fa-bolt text-4xl"></i>
249
  </div>
250
- <h3 class="text-xl font-bold mb-2">极速下载</h3>
251
- <p class="text-gray-600">通过国内CDN节点加速，下载速度提升10倍以上，告别GitHub的缓慢下载体验。</p>
252
- </div>
253
- <div class="bg-white p-6 rounded-xl shadow-md link-card transition duration-300">
254
- <div class="text-blue-500 mb-4">
255
- <i class="fas fa-shield-alt text-4xl"></i>
256
  </div>
257
- <h3 class="text-xl font-bold mb-2">稳定可靠</h3>
258
- <p class="text-gray-600">多节点负载均衡，自动故障转移，确保服务24小时稳定可用。</p>
259
  </div>
260
- <div class="bg-white p-6 rounded-xl shadow-md link-card transition duration-300">
261
- <div class="text-green-500 mb-4">
262
- <i class="fas fa-lock text-4xl"></i>
263
- </div>
264
- <h3 class="text-xl font-bold mb-2">安全加密</h3>
265
- <p class="text-gray-600">所有传输数据加密处理，确保您的下载内容安全无篡改。</p>
266
  </div>
267
  </div>
268
  </div>
269
- </section>
270
-
271
- <!-- How to Use -->
272
- <section class="py-16" id="how-to-use">
273
- <div class="container mx-auto px-4">
274
- <h2 class="text-3xl font-bold text-center mb-12">使用指南</h2>
275
- <div class="max-w-4xl mx-auto">
276
- <div class="flex flex-col md:flex-row items-center mb-8">
277
- <div class="md:w-1/3 mb-4 md:mb-0 flex justify-center">
278
- <div class="bg-purple-100 text-purple-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold">1</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
- <div class="md:w-2/3">
281
- <h3 class="text-xl font-bold mb-2">复制GitHub链接</h3>
282
- <p class="text-gray-600">在GitHub上找到您需要下载的仓库、Release文件或源码的原始链接，复制到剪贴板。</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
283
  </div>
284
  </div>
285
- <div class="flex flex-col md:flex-row items-center mb-8">
286
- <div class="md:w-1/3 mb-4 md:mb-0 flex justify-center">
287
- <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold">2</div>
 
 
 
 
 
 
 
 
 
 
288
  </div>
289
- <div class="md:w-2/3">
290
- <h3 class="text-xl font-bold mb-2">粘贴并转换</h3>
291
- <p class="text-gray-600">将链接粘贴到本页面的输入框中，点击"转换"按钮生成加速下载链接。</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
292
  </div>
293
  </div>
294
- <div class="flex flex-col md:flex-row items-center">
295
- <div class="md:w-1/3 mb-4 md:mb-0 flex justify-center">
296
- <div class="bg-green-100 text-green-800 rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold">3</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  </div>
298
- <div class="md:w-2/3">
299
- <h3 class="text-xl font-bold mb-2">高速下载</h3>
300
- <p class="text-gray-600">点击"下载"按钮或使用下载工具获取加速后的文件，享受极速下载体验。</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
  </div>
302
  </div>
303
  </div>
304
  </div>
305
- </section>
306
-
307
- <!-- FAQ -->
308
- <section class="bg-gray-100 py-16" id="faq">
309
- <div class="container mx-auto px-4">
310
- <h2 class="text-3xl font-bold text-center mb-12">常见问题</h2>
311
- <div class="max-w-3xl mx-auto space-y-4">
312
- <div class="bg-white p-6 rounded-lg shadow">
313
- <h3 class="font-bold text-lg mb-2 flex items-center">
314
- <i class="fas fa-question-circle text-purple-500 mr-2"></i>
315
- 这个服务是免费的吗？
316
- </h3>
317
- <p class="text-gray-600">是的，我们的GitHub加速下载服务完全免费，不收取任何费用。我们通过公益CDN节点提供加速服务。</p>
318
- </div>
319
- <div class="bg-white p-6 rounded-lg shadow">
320
- <h3 class="font-bold text-lg mb-2 flex items-center">
321
- <i class="fas fa-question-circle text-purple-500 mr-2"></i>
322
- 支持哪些类型的GitHub链接？
323
- </h3>
324
- <p class="text-gray-600">我们支持几乎所有GitHub资源链接，包括仓库源码下载（zip/tar.gz）、Release文件、分支/标签下载等。</p>
325
  </div>
326
- <div class="bg-white p-6 rounded-lg shadow">
327
- <h3 class="font-bold text-lg mb-2 flex items-center">
328
- <i class="fas fa-question-circle text-purple-500 mr-2"></i>
329
- 下载速度能达到多少？
330
- </h3>
331
- <p class="text-gray-600">根据网络状况不同，通常可以达到5-10MB/s的下载速度，比直接访问GitHub快10倍以上。</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
332
  </div>
333
- <div class="bg-white p-6 rounded-lg shadow">
334
- <h3 class="font-bold text-lg mb-2 flex items-center">
335
- <i class="fas fa-question-circle text-purple-500 mr-2"></i>
336
- 文件安全性如何保证？
337
- </h3>
338
- <p class="text-gray-600">我们会对所有加速文件进行MD5校验，确保与GitHub原始文件完全一致，不会对文件内容做任何修改。</p>
 
 
 
 
 
 
 
 
 
 
 
 
339
  </div>
340
  </div>
341
  </div>
342
- </section>
343
 
344
  <!-- Footer -->
345
- <footer class="bg-gray-800 text-white py-12">
346
  <div class="container mx-auto px-4">
347
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
348
  <div>
349
- <h3 class="text-xl font-bold mb-4">GitHub加速下载</h3>
350
- <p class="text-gray-400">为国内开发者提供高速稳定的GitHub资源下载服务。</p>
 
 
 
 
 
351
  </div>
352
  <div>
353
  <h4 class="font-bold mb-4">快速链接</h4>
354
  <ul class="space-y-2">
355
- <li><a href="#features" class="text-gray-400 hover:text-white transition">功能特点</a></li>
356
- <li><a href="#how-to-use" class="text-gray-400 hover:text-white transition">使用指南</a></li>
357
- <li><a href="#faq" class="text-gray-400 hover:text-white transition">常见问题</a></li>
358
- </ul>
359
- </div>
360
- <div>
361
- <h4 class="font-bold mb-4">相关资源</h4>
362
- <ul class="space-y-2">
363
- <li><a href="https://github.com" class="text-gray-400 hover:text-white transition" target="_blank">GitHub官网</a></li>
364
- <li><a href="https://developer.aliyun.com/mirror/" class="text-gray-400 hover:text-white transition" target="_blank">阿里云镜像站</a></li>
365
- <li><a href="https://mirrors.tuna.tsinghua.edu.cn/" class="text-gray-400 hover:text-white transition" target="_blank">清华大学镜像站</a></li>
366
  </ul>
367
  </div>
368
  <div>
369
  <h4 class="font-bold mb-4">联系我们</h4>
370
- <div class="flex space-x-4">
371
- <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-weixin"></i></a>
372
- <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-qq"></i></a>
373
- <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-github"></i></a>
 
 
 
 
 
374
  </div>
375
  </div>
376
  </div>
377
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
378
- <p>© 2023 GitHub加速下载服务. 保留所有权利.</p>
379
  </div>
380
  </div>
381
  </footer>
382
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  <script>
384
  document.addEventListener('DOMContentLoaded', function() {
385
  // Mobile menu functionality
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GPT Register Pro - 智能批量注册管理系统</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: {
14
+ 50: '#f0f9ff',
15
+ 100: '#e0f2fe',
16
+ 200: '#bae6fd',
17
+ 300: '#7dd3fc',
18
+ 400: '#38bdf8',
19
+ 500: '#0ea5e9',
20
+ 600: '#0284c7',
21
+ 700: '#0369a1',
22
+ 800: '#075985',
23
+ 900: '#0c4a6e',
24
+ },
25
+ secondary: {
26
+ 50: '#f8fafc',
27
+ 100: '#f1f5f9',
28
+ 200: '#e2e8f0',
29
+ 300: '#cbd5e1',
30
+ 400: '#94a3b8',
31
+ 500: '#64748b',
32
+ 600: '#475569',
33
+ 700: '#334155',
34
+ 800: '#1e293b',
35
+ 900: '#0f172a',
36
+ },
37
+ accent: {
38
+ 500: '#8b5cf6',
39
+ 600: '#7c3aed',
40
+ 700: '#6d28d9',
41
+ }
42
+ },
43
+ fontFamily: {
44
+ 'sans': ['Inter', 'system-ui', 'sans-serif'],
45
+ },
46
+ boxShadow: {
47
+ 'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
48
+ 'card': '0 10px 40px -10px rgba(0, 0, 0, 0.1)',
49
+ 'float': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
50
+ },
51
+ backgroundImage: {
52
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
53
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
54
+ },
55
+ animation: {
56
+ 'float': 'float 6s ease-in-out infinite',
57
+ 'pulse-subtle': 'pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
58
+ },
59
+ keyframes: {
60
+ 'float': {
61
+ '0%, 100%': { transform: 'translateY(0)' },
62
+ '50%': { transform: 'translateY(-10px)' },
63
+ },
64
+ 'pulse-subtle': {
65
+ '0%, 100%': { opacity: '1' },
66
+ '50%': { opacity: '0.8' },
67
+ }
68
+ }
69
+ }
70
+ }
71
+ }
72
+ </script>
73
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
74
+ <link rel="preconnect" href="https://fonts.googleapis.com">
75
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
76
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
77
+ <link rel="stylesheet" href="style.css">
78
  <style>
79
+ :root {
80
+ --glass-bg: rgba(255, 255, 255, 0.08);
81
+ --glass-border: rgba(255, 255, 255, 0.18);
82
+ }
83
+
84
+ body {
85
+ font-family: 'Inter', sans-serif;
86
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
87
+ color: #f8fafc;
88
+ min-height: 100vh;
89
  }
90
+
91
+ .glass-panel {
92
+ background: rgba(255, 255, 255, 0.05);
93
+ backdrop-filter: blur(10px);
94
+ border: 1px solid rgba(255, 255, 255, 0.1);
95
+ border-radius: 16px;
96
+ }
97
+
98
+ .dashboard-card {
99
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
100
+ border: 1px solid rgba(255, 255, 255, 0.05);
101
+ border-radius: 16px;
102
+ transition: all 0.3s ease;
103
+ box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
104
+ }
105
+
106
+ .dashboard-card:hover {
107
  transform: translateY(-5px);
108
+ box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.3);
109
+ border-color: rgba(139, 92, 246, 0.3);
110
  }
111
+
112
+ .gradient-text {
113
+ background: linear-gradient(90deg, #8b5cf6, #3b82f6);
114
+ -webkit-background-clip: text;
115
+ -webkit-text-fill-color: transparent;
116
+ background-clip: text;
117
  }
118
+
119
+ .stat-badge {
120
+ background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2));
121
+ border: 1px solid rgba(139, 92, 246, 0.3);
122
+ padding: 4px 12px;
123
+ border-radius: 20px;
124
+ font-size: 0.875rem;
125
+ font-weight: 500;
 
 
126
  }
127
+
128
+ .input-field {
129
+ background: rgba(30, 41, 59, 0.8);
130
+ border: 1px solid rgba(148, 163, 184, 0.2);
131
+ border-radius: 10px;
132
+ padding: 12px 16px;
133
+ color: #f8fafc;
134
+ transition: all 0.2s;
135
  }
136
+
137
+ .input-field:focus {
138
+ outline: none;
139
+ border-color: #8b5cf6;
140
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
141
+ background: rgba(30, 41, 59, 0.9);
142
  }
143
+
144
+ .btn-primary {
145
+ background: linear-gradient(90deg, #8b5cf6, #6366f1);
 
 
 
146
  color: white;
147
+ font-weight: 600;
148
  padding: 12px 24px;
149
+ border-radius: 10px;
150
+ transition: all 0.3s;
151
+ border: none;
 
152
  }
153
+
154
+ .btn-primary:hover {
155
+ transform: translateY(-2px);
156
+ box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.5);
157
+ background: linear-gradient(90deg, #7c3aed, #4f46e5);
158
  }
159
+
160
+ .btn-secondary {
161
+ background: rgba(30, 41, 59, 0.8);
162
+ color: #cbd5e1;
163
+ font-weight: 500;
164
+ padding: 10px 20px;
165
+ border-radius: 10px;
166
+ border: 1px solid rgba(148, 163, 184, 0.2);
167
+ transition: all 0.3s;
168
+ }
169
+
170
+ .btn-secondary:hover {
171
+ background: rgba(30, 41, 59, 1);
172
+ border-color: #8b5cf6;
173
+ color: #f8fafc;
174
+ }
175
+
176
+ .stat-card {
177
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.8));
178
+ border-radius: 16px;
179
+ padding: 24px;
180
+ position: relative;
181
+ overflow: hidden;
182
+ }
183
+
184
+ .stat-card::before {
185
+ content: '';
186
+ position: absolute;
187
  top: 0;
188
  left: 0;
189
+ right: 0;
190
+ height: 4px;
191
+ background: linear-gradient(90deg, #8b5cf6, #3b82f6);
 
 
 
 
192
  }
193
+
194
+ .status-indicator {
195
+ width: 10px;
196
+ height: 10px;
197
+ border-radius: 50%;
198
+ display: inline-block;
199
+ margin-right: 8px;
200
  }
201
+
202
+ .status-online {
203
+ background: linear-gradient(90deg, #10b981, #34d399);
204
+ box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
 
205
  }
206
+
207
+ .status-warning {
208
+ background: linear-gradient(90deg, #f59e0b, #fbbf24);
209
+ box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
 
 
 
210
  }
211
+
212
+ .status-offline {
213
+ background: linear-gradient(90deg, #6b7280, #9ca3af);
214
+ box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);
 
 
215
  }
216
+
217
+ .table-container {
218
+ background: rgba(30, 41, 59, 0.8);
219
+ border-radius: 12px;
220
+ overflow: hidden;
221
  }
222
+
223
+ .table-row {
224
+ border-bottom: 1px solid rgba(148, 163, 184, 0.1);
225
+ transition: background 0.2s;
226
  }
227
+
228
+ .table-row:hover {
229
+ background: rgba(30, 41, 59, 0.5);
230
  }
231
+
232
+ .modal-overlay {
233
+ position: fixed;
234
+ top: 0;
235
+ left: 0;
236
+ right: 0;
237
+ bottom: 0;
238
+ background: rgba(0, 0, 0, 0.8);
239
+ display: none;
240
+ align-items: center;
241
+ justify-content: center;
242
+ z-index: 1000;
243
+ backdrop-filter: blur(5px);
244
+ }
245
+
246
+ .modal-content {
247
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
248
+ border-radius: 20px;
249
+ padding: 32px;
250
+ max-width: 500px;
251
+ width: 90%;
252
+ border: 1px solid rgba(255, 255, 255, 0.1);
253
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
254
+ }
255
+
256
+ .tooltip {
257
+ position: relative;
258
+ }
259
+
260
+ .tooltip-text {
261
+ position: absolute;
262
+ bottom: 125%;
263
+ left: 50%;
264
+ transform: translateX(-50%);
265
+ background: rgba(30, 41, 59, 0.95);
266
+ color: #f8fafc;
267
+ padding: 8px 12px;
268
+ border-radius: 8px;
269
+ font-size: 0.875rem;
270
+ white-space: nowrap;
271
+ opacity: 0;
272
+ visibility: hidden;
273
+ transition: all 0.3s;
274
+ border: 1px solid rgba(148, 163, 184, 0.2);
275
+ z-index: 10;
276
+ }
277
+
278
+ .tooltip:hover .tooltip-text {
279
+ opacity: 1;
280
+ visibility: visible;
281
+ }
282
+
283
+ @media (max-width: 768px) {
284
+ .modal-content {
285
+ padding: 24px 16px;
286
+ width: 95%;
287
  }
288
  }
289
  </style>
290
  </head>
291
+ <body class="antialiased">
292
+ <!-- Navigation -->
293
+ <nav class="glass-panel sticky top-0 z-50">
294
+ <div class="container mx-auto px-4 py-4">
295
+ <div class="flex items-center justify-between">
296
+ <div class="flex items-center space-x-4">
297
+ <div class="w-10 h-10 bg-gradient-to-br from-accent-500 to-primary-500 rounded-xl flex items-center justify-center">
298
+ <i class="fas fa-robot text-white text-xl"></i>
299
+ </div>
300
+ <div>
301
+ <h1 class="text-2xl font-bold">GPT Register <span class="gradient-text">Pro</span></h1>
302
+ <p class="text-sm text-gray-400">智能批量注册管理系统</p>
303
+ </div>
 
 
 
 
 
 
 
304
  </div>
305
+
306
+ <div class="hidden md:flex items-center space-x-6">
307
+ <div class="flex items-center space-x-2 stat-badge">
308
+ <span class="status-indicator status-online"></span>
309
+ <span>系统运行中</span>
310
+ </div>
311
+ <div class="flex items-center space-x-2">
312
+ <i class="fas fa-user-circle text-gray-400"></i>
313
+ <span class="text-gray-300">管理员</span>
314
+ </div>
315
+ <button class="btn-secondary">
316
+ <i class="fas fa-cog mr-2"></i>设置
317
+ </button>
 
318
  </div>
319
+
320
+ <button id="mobileMenuBtn" class="md:hidden text-gray-400 hover:text-white">
321
+ <i class="fas fa-bars text-xl"></i>
322
+ </button>
323
  </div>
324
  </div>
325
+ </nav>
326
 
327
+ <!-- Main Content -->
328
+ <main class="container mx-auto px-4 py-8">
329
+ <!-- Stats Overview -->
330
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
331
+ <div class="stat-card">
332
+ <div class="flex items-center justify-between">
333
+ <div>
334
+ <p class="text-gray-400 text-sm">今日注册</p>
335
+ <h3 class="text-3xl font-bold mt-2">1,248</h3>
336
+ </div>
337
+ <div class="w-12 h-12 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-full flex items-center justify-center">
338
+ <i class="fas fa-user-plus text-green-400 text-xl"></i>
 
 
339
  </div>
340
  </div>
341
+ <div class="mt-4">
342
+ <p class="text-sm text-green-400"><i class="fas fa-arrow-up mr-1"></i> +12% 较昨日</p>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="stat-card">
347
+ <div class="flex items-center justify-between">
348
+ <div>
349
+ <p class="text-gray-400 text-sm">活跃账号</p>
350
+ <h3 class="text-3xl font-bold mt-2">8,432</h3>
 
351
  </div>
352
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-full flex items-center justify-center">
353
+ <i class="fas fa-users text-blue-400 text-xl"></i>
 
 
 
 
354
  </div>
355
  </div>
356
+ <div class="mt-4">
357
+ <p class="text-sm text-blue-400"><i class="fas fa-check-circle mr-1"></i> 98% 活跃率</p>
358
+ </div>
359
  </div>
360
 
361
+ <div class="stat-card">
362
+ <div class="flex items-center justify-between">
363
+ <div>
364
+ <p class="text-gray-400 text-sm">成功率</p>
365
+ <h3 class="text-3xl font-bold mt-2">94.7%</h3>
 
 
 
 
 
366
  </div>
367
+ <div class="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-full flex items-center justify-center">
368
+ <i class="fas fa-chart-line text-purple-400 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
  </div>
371
+ <div class="mt-4">
372
+ <p class="text-sm text-purple-400"><i class="fas fa-trending-up mr-1"></i> +2.3% 提升</p>
373
+ </div>
374
  </div>
375
+
376
+ <div class="stat-card">
377
+ <div class="flex items-center justify-between">
378
+ <div>
379
+ <p class="text-gray-400 text-sm">队列任务</p>
380
+ <h3 class="text-3xl font-bold mt-2">156</h3>
 
 
 
 
 
381
  </div>
382
+ <div class="w-12 h-12 bg-gradient-to-br from-orange-500/20 to-orange-600/20 rounded-full flex items-center justify-center">
383
+ <i class="fas fa-tasks text-orange-400 text-xl"></i>
 
 
 
 
384
  </div>
 
 
385
  </div>
386
+ <div class="mt-4">
387
+ <p class="text-sm text-orange-400"><i class="fas fa-clock mr-1"></i> 运行中</p>
 
 
 
 
388
  </div>
389
  </div>
390
  </div>
391
+
392
+ <!-- Main Dashboard -->
393
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
394
+ <!-- Left Column -->
395
+ <div class="lg:col-span-2 space-y-8">
396
+ <!-- Batch Registration Panel -->
397
+ <div class="dashboard-card p-6">
398
+ <div class="flex items-center justify-between mb-6">
399
+ <h2 class="text-xl font-bold">批量注册控制台</h2>
400
+ <div class="flex items-center space-x-2">
401
+ <span class="status-indicator status-online"></span>
402
+ <span class="text-sm text-green-400">就绪</span>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
407
+ <div>
408
+ <label class="block text-gray-400 text-sm mb-2">注册数量</label>
409
+ <input type="number" min="1" max="1000" value="50" class="input-field w-full">
410
+ </div>
411
+ <div>
412
+ <label class="block text-gray-400 text-sm mb-2">并发线程</label>
413
+ <select class="input-field w-full">
414
+ <option>1 线程</option>
415
+ <option selected>5 线程</option>
416
+ <option>10 线程</option>
417
+ <option>20 线程</option>
418
+ </select>
419
+ </div>
420
+ <div>
421
+ <label class="block text-gray-400 text-sm mb-2">代理模式</label>
422
+ <select class="input-field w-full">
423
+ <option selected>智能轮换</option>
424
+ <option>固定代理</option>
425
+ <option>无代理</option>
426
+ </select>
427
+ </div>
428
  </div>
429
+
430
+ <div class="flex items-center justify-between">
431
+ <div class="flex items-center space-x-4">
432
+ <button class="btn-primary">
433
+ <i class="fas fa-play mr-2"></i>开始注册
434
+ </button>
435
+ <button class="btn-secondary">
436
+ <i class="fas fa-pause mr-2"></i>暂停
437
+ </button>
438
+ </div>
439
+ <div class="flex items-center space-x-4">
440
+ <button class="btn-secondary">
441
+ <i class="fas fa-download mr-2"></i>导出
442
+ </button>
443
+ <button class="btn-secondary">
444
+ <i class="fas fa-cog mr-2"></i>高级设置
445
+ </button>
446
+ </div>
447
  </div>
448
  </div>
449
+
450
+ <!-- Real-time Logs -->
451
+ <div class="dashboard-card p-6">
452
+ <div class="flex items-center justify-between mb-6">
453
+ <h2 class="text-xl font-bold">实时日志监控</h2>
454
+ <div class="flex items-center space-x-3">
455
+ <button class="text-sm text-gray-400 hover:text-white">
456
+ <i class="fas fa-trash mr-1"></i>清空
457
+ </button>
458
+ <button class="text-sm text-gray-400 hover:text-white">
459
+ <i class="fas fa-download mr-1"></i>保存
460
+ </button>
461
+ </div>
462
  </div>
463
+
464
+ <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm">
465
+ <div class="text-green-400 mb-2">[12:34:56] ✓ 账号注册成功: user_5483@domain.com</div>
466
+ <div class="text-blue-400 mb-2">[12:34:55] ⚡ 邮箱验证通过</div>
467
+ <div class="text-green-400 mb-2">[12:34:54] ✓ 账号注册成功: user_5482@domain.com</div>
468
+ <div class="text-yellow-400 mb-2">[12:34:53] ⚠️ 验证码延迟，重试中...</div>
469
+ <div class="text-green-400 mb-2">[12:34:52] ✓ 账号注册成功: user_5481@domain.com</div>
470
+ <div class="text-blue-400 mb-2">[12:34:51] ⚡ 邮箱验证通过</div>
471
+ <div class="text-gray-400 mb-2">[12:34:50] ℹ️ 正在处理第23-25批次账号</div>
472
+ <div class="text-green-400 mb-2">[12:34:49] ✓ 账号注册成功: user_5480@domain.com</div>
473
+ <div class="text-green-400 mb-2">[12:34:48] ✓ 账号注册成功: user_5479@domain.com</div>
474
+ <div class="text-blue-400 mb-2">[12:34:47] ⚡ 邮箱验证通过</div>
475
+ <div class="text-green-400 mb-2">[12:34:46] ✓ 账号注册成功: user_5478@domain.com</div>
476
+ </div>
477
+
478
+ <div class="mt-4 flex items-center space-x-4">
479
+ <div class="flex items-center space-x-2">
480
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
481
+ <span class="text-sm text-gray-400">成功</span>
482
+ </div>
483
+ <div class="flex items-center space-x-2">
484
+ <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
485
+ <span class="text-sm text-gray-400">警告</span>
486
+ </div>
487
+ <div class="flex items-center space-x-2">
488
+ <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
489
+ <span class="text-sm text-gray-400">信息</span>
490
+ </div>
491
+ <div class="flex-1 text-right">
492
+ <span class="text-sm text-gray-400">最后更新: 刚刚</span>
493
+ </div>
494
  </div>
495
  </div>
496
+ </div>
497
+
498
+ <!-- Right Column -->
499
+ <div class="space-y-8">
500
+ <!-- Account Management -->
501
+ <div class="dashboard-card p-6">
502
+ <h2 class="text-xl font-bold mb-6">账号管理</h2>
503
+
504
+ <div class="space-y-4">
505
+ <div class="flex items-center justify-between">
506
+ <div>
507
+ <p class="text-gray-400 text-sm">已验证账号</p>
508
+ <p class="text-lg font-bold">8,432</p>
509
+ </div>
510
+ <div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-full flex items-center justify-center">
511
+ <i class="fas fa-check-circle text-green-400"></i>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="flex items-center justify-between">
516
+ <div>
517
+ <p class="text-gray-400 text-sm">待验证账号</p>
518
+ <p class="text-lg font-bold">156</p>
519
+ </div>
520
+ <div class="w-10 h-10 bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-full flex items-center justify-center">
521
+ <i class="fas fa-clock text-yellow-400"></i>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="flex items-center justify-between">
526
+ <div>
527
+ <p class="text-gray-400 text-sm">失败账号</p>
528
+ <p class="text-lg font-bold">42</p>
529
+ </div>
530
+ <div class="w-10 h-10 bg-gradient-to-br from-red-500/20 to-red-600/20 rounded-full flex items-center justify-center">
531
+ <i class="fas fa-times-circle text-red-400"></i>
532
+ </div>
533
+ </div>
534
  </div>
535
+
536
+ <div class="mt-6">
537
+ <button class="btn-primary w-full">
538
+ <i class="fas fa-sync-alt mr-2"></i>刷新状态
539
+ </button>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Quick Actions -->
544
+ <div class="dashboard-card p-6">
545
+ <h2 class="text-xl font-bold mb-6">快速操作</h2>
546
+
547
+ <div class="space-y-3">
548
+ <button class="btn-secondary w-full text-left">
549
+ <i class="fas fa-mail-bulk mr-2"></i>邮箱配置
550
+ </button>
551
+ <button class="btn-secondary w-full text-left">
552
+ <i class="fas fa-server mr-2"></i>代理管理
553
+ </button>
554
+ <button class="btn-secondary w-full text-left">
555
+ <i class="fas fa-key mr-2"></i>Token管理
556
+ </button>
557
+ <button class="btn-secondary w-full text-left">
558
+ <i class="fas fa-chart-bar mr-2"></i>数据分析
559
+ </button>
560
+ <button class="btn-secondary w-full text-left">
561
+ <i class="fas fa-shield-alt mr-2"></i>安全设置
562
+ </button>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- System Status -->
567
+ <div class="dashboard-card p-6">
568
+ <h2 class="text-xl font-bold mb-6">系统状态</h2>
569
+
570
+ <div class="space-y-4">
571
+ <div>
572
+ <div class="flex justify-between mb-1">
573
+ <span class="text-sm text-gray-400">CPU使用率</span>
574
+ <span class="text-sm font-medium">42%</span>
575
+ </div>
576
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
577
+ <div class="h-full bg-gradient-to-r from-blue-500 to-cyan-400" style="width: 42%"></div>
578
+ </div>
579
+ </div>
580
+
581
+ <div>
582
+ <div class="flex justify-between mb-1">
583
+ <span class="text-sm text-gray-400">内存使用率</span>
584
+ <span class="text-sm font-medium">68%</span>
585
+ </div>
586
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
587
+ <div class="h-full bg-gradient-to-r from-purple-500 to-pink-400" style="width: 68%"></div>
588
+ </div>
589
+ </div>
590
+
591
+ <div>
592
+ <div class="flex justify-between mb-1">
593
+ <span class="text-sm text-gray-400">网络负载</span>
594
+ <span class="text-sm font-medium">24%</span>
595
+ </div>
596
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
597
+ <div class="h-full bg-gradient-to-r from-green-500 to-emerald-400" style="width: 24%"></div>
598
+ </div>
599
+ </div>
600
  </div>
601
  </div>
602
  </div>
603
  </div>
604
+
605
+ <!-- Account Table -->
606
+ <div class="mt-8">
607
+ <div class="dashboard-card p-6">
608
+ <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
609
+ <h2 class="text-xl font-bold mb-4 md:mb-0">账号列表</h2>
610
+ <div class="flex items-center space-x-4">
611
+ <div class="relative">
612
+ <input type="text" placeholder="搜索账号..." class="input-field pl-10 pr-4">
613
+ <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
614
+ </div>
615
+ <button class="btn-primary">
616
+ <i class="fas fa-plus mr-2"></i>添加账号
617
+ </button>
618
+ </div>
 
 
 
 
 
619
  </div>
620
+
621
+ <div class="table-container overflow-x-auto">
622
+ <table class="w-full">
623
+ <thead>
624
+ <tr class="border-b border-gray-700">
625
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">选择</th>
626
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">账号邮箱</th>
627
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">状态</th>
628
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">创建时间</th>
629
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">最后活动</th>
630
+ <th class="py-3 px-4 text-left text-gray-400 font-medium">操作</th>
631
+ </tr>
632
+ </thead>
633
+ <tbody>
634
+ <tr class="table-row">
635
+ <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td>
636
+ <td class="py-3 px-4 font-medium">user_5483@domain.com</td>
637
+ <td class="py-3 px-4">
638
+ <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span>
639
+ </td>
640
+ <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td>
641
+ <td class="py-3 px-4 text-gray-400">刚刚</td>
642
+ <td class="py-3 px-4">
643
+ <div class="flex space-x-2">
644
+ <button class="text-blue-400 hover:text-blue-300 tooltip">
645
+ <i class="fas fa-eye"></i>
646
+ <span class="tooltip-text">查看详情</span>
647
+ </button>
648
+ <button class="text-green-400 hover:text-green-300 tooltip">
649
+ <i class="fas fa-redo"></i>
650
+ <span class="tooltip-text">刷新状态</span>
651
+ </button>
652
+ <button class="text-red-400 hover:text-red-300 tooltip">
653
+ <i class="fas fa-trash"></i>
654
+ <span class="tooltip-text">删除</span>
655
+ </button>
656
+ </div>
657
+ </td>
658
+ </tr>
659
+ <tr class="table-row">
660
+ <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td>
661
+ <td class="py-3 px-4 font-medium">user_5482@domain.com</td>
662
+ <td class="py-3 px-4">
663
+ <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span>
664
+ </td>
665
+ <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td>
666
+ <td class="py-3 px-4 text-gray-400">2分钟前</td>
667
+ <td class="py-3 px-4">
668
+ <div class="flex space-x-2">
669
+ <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button>
670
+ <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button>
671
+ <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
672
+ </div>
673
+ </td>
674
+ </tr>
675
+ <tr class="table-row">
676
+ <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td>
677
+ <td class="py-3 px-4 font-medium">user_5481@domain.com</td>
678
+ <td class="py-3 px-4">
679
+ <span class="px-3 py-1 rounded-full text-xs bg-yellow-500/20 text-yellow-400">待验证</span>
680
+ </td>
681
+ <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td>
682
+ <td class="py-3 px-4 text-gray-400">5分钟前</td>
683
+ <td class="py-3 px-4">
684
+ <div class="flex space-x-2">
685
+ <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button>
686
+ <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button>
687
+ <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
688
+ </div>
689
+ </td>
690
+ </tr>
691
+ <tr class="table-row">
692
+ <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td>
693
+ <td class="py-3 px-4 font-medium">user_5480@domain.com</td>
694
+ <td class="py-3 px-4">
695
+ <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span>
696
+ </td>
697
+ <td class="py-3 px-4 text-gray-400">2024-03-15 12:33</td>
698
+ <td class="py-3 px-4 text-gray-400">8分钟前</td>
699
+ <td class="py-3 px-4">
700
+ <div class="flex space-x-2">
701
+ <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button>
702
+ <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button>
703
+ <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
704
+ </div>
705
+ </td>
706
+ </tr>
707
+ <tr class="table-row">
708
+ <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td>
709
+ <td class="py-3 px-4 font-medium">user_5479@domain.com</td>
710
+ <td class="py-3 px-4">
711
+ <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span>
712
+ </td>
713
+ <td class="py-3 px-4 text-gray-400">2024-03-15 12:33</td>
714
+ <td class="py-3 px-4 text-gray-400">10分钟前</td>
715
+ <td class="py-3 px-4">
716
+ <div class="flex space-x-2">
717
+ <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button>
718
+ <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button>
719
+ <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
720
+ </div>
721
+ </td>
722
+ </tr>
723
+ </tbody>
724
+ </table>
725
  </div>
726
+
727
+ <div class="mt-6 flex items-center justify-between">
728
+ <div class="text-gray-400 text-sm">
729
+ 显示 5 / 8,432 条记录
730
+ </div>
731
+ <div class="flex items-center space-x-2">
732
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">
733
+ <i class="fas fa-chevron-left"></i>
734
+ </button>
735
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-accent-500 text-white">1</button>
736
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">2</button>
737
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">3</button>
738
+ <span class="text-gray-400">...</span>
739
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">168</button>
740
+ <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">
741
+ <i class="fas fa-chevron-right"></i>
742
+ </button>
743
+ </div>
744
  </div>
745
  </div>
746
  </div>
747
+ </main>
748
 
749
  <!-- Footer -->
750
+ <footer class="mt-12 border-t border-gray-800 py-8">
751
  <div class="container mx-auto px-4">
752
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
753
  <div>
754
+ <div class="flex items-center space-x-3 mb-4">
755
+ <div class="w-10 h-10 bg-gradient-to-br from-accent-500 to-primary-500 rounded-xl flex items-center justify-center">
756
+ <i class="fas fa-robot text-white text-xl"></i>
757
+ </div>
758
+ <h3 class="text-xl font-bold">GPT Register <span class="gradient-text">Pro</span></h3>
759
+ </div>
760
+ <p class="text-gray-400">专业级AI账号批量注册管理系统，为企业级用户提供高效、稳定、安全的自动化注册解决方案。</p>
761
  </div>
762
  <div>
763
  <h4 class="font-bold mb-4">快速链接</h4>
764
  <ul class="space-y-2">
765
+ <li><a href="#" class="text-gray-400 hover:text-white transition">文档中心</a></li>
766
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API接口</a></li>
767
+ <li><a href="#" class="text-gray-400 hover:text-white transition">更新日志</a></li>
768
+ <li><a href="#" class="text-gray-400 hover:text-white transition">技术支持</a></li>
 
 
 
 
 
 
 
769
  </ul>
770
  </div>
771
  <div>
772
  <h4 class="font-bold mb-4">联系我们</h4>
773
+ <div class="space-y-2 text-gray-400">
774
+ <p><i class="fas fa-envelope mr-2"></i> support@gptregister.com</p>
775
+ <p><i class="fas fa-phone mr-2"></i> +86 400-123-4567</p>
776
+ <div class="flex space-x-4 mt-4">
777
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
778
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
779
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a>
780
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
781
+ </div>
782
  </div>
783
  </div>
784
  </div>
785
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
786
+ <p>© 2024 GPT Register Pro. 保留所有权利.</p>
787
  </div>
788
  </div>
789
  </footer>
790
 
791
+ <!-- Modals and Scripts -->
792
+ <div id="mobileMenuModal" class="modal-overlay">
793
+ <div class="modal-content">
794
+ <div class="flex justify-between items-center mb-6">
795
+ <h3 class="text-xl font-bold">菜单</h3>
796
+ <button id="closeMobileMenu" class="text-gray-400 hover:text-white">
797
+ <i class="fas fa-times"></i>
798
+ </button>
799
+ </div>
800
+ <div class="space-y-4">
801
+ <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">仪表板</a>
802
+ <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">账号管理</a>
803
+ <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">任务队列</a>
804
+ <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">系统设置</a>
805
+ <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">数据分析</a>
806
+ </div>
807
+ </div>
808
+ </div>
809
+
810
+ <script>
811
+ document.addEventListener('DOMContentLoaded', function() {
812
+ // Mobile menu
813
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
814
+ const mobileMenuModal = document.getElementById('mobileMenuModal');
815
+ const closeMobileMenu = document.getElementById('closeMobileMenu');
816
+
817
+ mobileMenuBtn.addEventListener('click', function() {
818
+ mobileMenuModal.style.display = 'flex';
819
+ });
820
+
821
+ closeMobileMenu.addEventListener('click', function() {
822
+ mobileMenuModal.style.display = 'none';
823
+ });
824
+
825
+ mobileMenuModal.addEventListener('click', function(e) {
826
+ if (e.target === mobileMenuModal) {
827
+ mobileMenuModal.style.display = 'none';
828
+ }
829
+ });
830
+
831
+ // Simulate real-time updates
832
+ function updateStats() {
833
+ // Randomize stats slightly for demo
834
+ const stats = document.querySelectorAll('.stat-card h3');
835
+ stats.forEach(stat => {
836
+ const current = parseInt(stat.textContent.replace(/,/g, ''));
837
+ const change = Math.floor(Math.random() * 11) - 5; // -5 to +5
838
+ const newValue = Math.max(0, current + change);
839
+ stat.textContent = newValue.toLocaleString();
840
+ });
841
+ }
842
+
843
+ // Update stats every 30 seconds
844
+ setInterval(updateStats, 30000);
845
+
846
+ // Add tooltips
847
+ const tooltips = document.querySelectorAll('.tooltip');
848
+ tooltips.forEach(tooltip => {
849
+ tooltip.addEventListener('mouseenter', function() {
850
+ const tooltipText = this.querySelector('.tooltip-text');
851
+ if (tooltipText) {
852
+ tooltipText.style.opacity = '1';
853
+ tooltipText.style.visibility = 'visible';
854
+ }
855
+ });
856
+
857
+ tooltip.addEventListener('mouseleave', function() {
858
+ const tooltipText = this.querySelector('.tooltip-text');
859
+ if (tooltipText) {
860
+ tooltipText.style.opacity = '0';
861
+ tooltipText.style.visibility = 'hidden';
862
+ }
863
+ });
864
+ });
865
+
866
+ // Add row selection functionality
867
+ const tableRows = document.querySelectorAll('.table-row');
868
+ tableRows.forEach(row => {
869
+ row.addEventListener('click', function(e) {
870
+ if (e.target.type !== 'checkbox') {
871
+ const checkbox = this.querySelector('input[type="checkbox"]');
872
+ if (checkbox) {
873
+ checkbox.checked = !checkbox.checked;
874
+ }
875
+ }
876
+ });
877
+ });
878
+ });
879
+ </script>
880
+ </body>
881
+ </html>
882
+
883
  <script>
884
  document.addEventListener('DOMContentLoaded', function() {
885
  // Mobile menu functionality