Download index.html from ixingchen/ghproxy: direct link, hf CLI and curl.
- Browser
- Download file 61.4 kB
-
https://huggingface.co/spaces/ixingchen/ghproxy/resolve/main/index.html
- Command line
-
hf download hf://spaces/ixingchen/ghproxy/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ixingchen/ghproxy/resolve/main/index.html
61.4 kB
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GPT Register Pro - 智能批量注册管理系统</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| accent: { | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| } | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| boxShadow: { | |
| 'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)', | |
| 'card': '0 10px 40px -10px rgba(0, 0, 0, 0.1)', | |
| 'float': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', | |
| }, | |
| backgroundImage: { | |
| 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', | |
| 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-subtle': 'pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| 'float': { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| 'pulse-subtle': { | |
| '0%, 100%': { opacity: '1' }, | |
| '50%': { opacity: '0.8' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| :root { | |
| --glass-bg: rgba(255, 255, 255, 0.08); | |
| --glass-border: rgba(255, 255, 255, 0.18); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #f8fafc; | |
| min-height: 100vh; | |
| } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| } | |
| .dashboard-card { | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(139, 92, 246, 0.3); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-badge { | |
| background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2)); | |
| border: 1px solid rgba(139, 92, 246, 0.3); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .input-field { | |
| background: rgba(30, 41, 59, 0.8); | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| border-radius: 10px; | |
| padding: 12px 16px; | |
| color: #f8fafc; | |
| transition: all 0.2s; | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: #8b5cf6; | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); | |
| background: rgba(30, 41, 59, 0.9); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #8b5cf6, #6366f1); | |
| color: white; | |
| font-weight: 600; | |
| padding: 12px 24px; | |
| border-radius: 10px; | |
| transition: all 0.3s; | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.5); | |
| background: linear-gradient(90deg, #7c3aed, #4f46e5); | |
| } | |
| .btn-secondary { | |
| background: rgba(30, 41, 59, 0.8); | |
| color: #cbd5e1; | |
| font-weight: 500; | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| transition: all 0.3s; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(30, 41, 59, 1); | |
| border-color: #8b5cf6; | |
| color: #f8fafc; | |
| } | |
| .stat-card { | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.8)); | |
| border-radius: 16px; | |
| padding: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #8b5cf6, #3b82f6); | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| .status-online { | |
| background: linear-gradient(90deg, #10b981, #34d399); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); | |
| } | |
| .status-warning { | |
| background: linear-gradient(90deg, #f59e0b, #fbbf24); | |
| box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); | |
| } | |
| .status-offline { | |
| background: linear-gradient(90deg, #6b7280, #9ca3af); | |
| box-shadow: 0 0 10px rgba(107, 114, 128, 0.5); | |
| } | |
| .table-container { | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .table-row { | |
| border-bottom: 1px solid rgba(148, 163, 184, 0.1); | |
| transition: background 0.2s; | |
| } | |
| .table-row:hover { | |
| background: rgba(30, 41, 59, 0.5); | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)); | |
| border-radius: 20px; | |
| padding: 32px; | |
| max-width: 500px; | |
| width: 90%; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip-text { | |
| position: absolute; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(30, 41, 59, 0.95); | |
| color: #f8fafc; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 0.875rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| z-index: 10; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| @media (max-width: 768px) { | |
| .modal-content { | |
| padding: 24px 16px; | |
| width: 95%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation --> | |
| <!-- 豪华导航栏 --> | |
| <nav class="header"> | |
| <div class="header-brand"> | |
| <div style="display: flex; align-items: center; gap: 12px;"> | |
| <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"> | |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> | |
| <circle cx="12" cy="7" r="4"></circle> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 style="font-size: 1.5rem; margin-bottom: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">GPT Register Pro</h1> | |
| <p style="font-size: 0.875rem; color: var(--text-muted);">智能批量注册管理系统</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-pill" id="statusPill"> | |
| <div class="dot"></div> | |
| <span id="statusTxt">系统就绪</span> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- 豪华统计卡片 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="card"> | |
| <div style="display: flex; align-items: flex-start; justify-content: space-between;"> | |
| <div> | |
| <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">今日注册</p> | |
| <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">1,248</h3> | |
| <div style="display: flex; align-items: center; gap: 4px;"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#43e97b" stroke-width="2"> | |
| <polyline points="18 15 12 9 6 15"></polyline> | |
| </svg> | |
| <span style="color: var(--text-success); font-size: 0.875rem; font-weight: 500;">+12% 较昨日</span> | |
| </div> | |
| </div> | |
| <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#43e97b" stroke-width="2"> | |
| <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> | |
| <circle cx="8.5" cy="7" r="4"></circle> | |
| <line x1="20" y1="8" x2="20" y2="14"></line> | |
| <line x1="23" y1="11" x2="17" y2="11"></line> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div style="display: flex; align-items: flex-start; justify-content: space-between;"> | |
| <div> | |
| <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">活跃账号</p> | |
| <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">8,432</h3> | |
| <div style="display: flex; align-items: center; gap: 4px;"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#38f9d7" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <polyline points="12 6 12 12 16 14"></polyline> | |
| </svg> | |
| <span style="color: var(--text-success); font-size: 0.875rem; font-weight: 500;">98% 活跃率</span> | |
| </div> | |
| </div> | |
| <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(67, 233, 123, 0.2) 0%, rgba(56, 249, 215, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#38f9d7" stroke-width="2"> | |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> | |
| <circle cx="9" cy="7" r="4"></circle> | |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> | |
| <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div style="display: flex; align-items: flex-start; justify-content: space-between;"> | |
| <div> | |
| <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">成功率</p> | |
| <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">94.7%</h3> | |
| <div style="display: flex; align-items: center; gap: 4px;"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2"> | |
| <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline> | |
| <polyline points="17 6 23 6 23 12"></polyline> | |
| </svg> | |
| <span style="color: #667eea; font-size: 0.875rem; font-weight: 500;">+2.3% 提升</span> | |
| </div> | |
| </div> | |
| <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2"> | |
| <line x1="18" y1="20" x2="18" y2="10"></line> | |
| <line x1="12" y1="20" x2="12" y2="4"></line> | |
| <line x1="6" y1="20" x2="6" y2="14"></line> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div style="display: flex; align-items: flex-start; justify-content: space-between;"> | |
| <div> | |
| <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">队列任务</p> | |
| <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">156</h3> | |
| <div style="display: flex; align-items: center; gap: 4px;"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#f093fb" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"></circle> | |
| <line x1="12" y1="6" x2="12" y2="12"></line> | |
| <line x1="12" y1="12" x2="16" y2="12"></line> | |
| </svg> | |
| <span style="color: #f093fb; font-size: 0.875rem; font-weight: 500;">运行中</span> | |
| </div> | |
| </div> | |
| <div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(245, 87, 108, 0.2) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f093fb" stroke-width="2"> | |
| <path d="M22 5.08V12a10 10 0 1 1-5.93-9.14"></path> | |
| <polyline points="22 6 12 13 2 6"></polyline> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- 批量注册控制台 - 豪华版 --> | |
| <div class="card"> | |
| <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);"> | |
| <h2 style="font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2"> | |
| <polygon points="5 3 19 12 5 21 5 3"></polygon> | |
| </svg> | |
| 批量注册控制台 | |
| </h2> | |
| <div style="display: flex; align-items: center; gap: 0.5rem;"> | |
| <div style="width: 8px; height: 8px; background: var(--text-success); border-radius: 50%; animation: pulse 2s infinite;"></div> | |
| <span style="font-size: 0.875rem; color: var(--text-success); font-weight: 500;">就绪</span> | |
| </div> | |
| </div> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;"> | |
| <div> | |
| <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">注册数量</label> | |
| <input type="number" min="1" max="1000" value="50" style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary);"> | |
| </div> | |
| <div> | |
| <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">并发线程</label> | |
| <select style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); appearance: none; background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"%238a8ab3\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;"> | |
| <option>1 线程</option> | |
| <option selected>5 线程</option> | |
| <option>10 线程</option> | |
| <option>20 线程</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label style="display: block; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">代理模式</label> | |
| <select style="width: 100%; padding: 0.75rem 1rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); appearance: none; background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"%238a8ab3\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg>'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;"> | |
| <option selected>智能轮换</option> | |
| <option>固定代理</option> | |
| <option>无代理</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;"> | |
| <div style="display: flex; gap: 0.75rem;"> | |
| <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polygon points="5 3 19 12 5 21 5 3"></polygon> | |
| </svg> | |
| 开始注册 | |
| </button> | |
| <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="6" y1="9" x2="6" y2="15"></line> | |
| <line x1="18" y1="9" x2="18" y2="15"></line> | |
| </svg> | |
| 暂停 | |
| </button> | |
| </div> | |
| <div style="display: flex; gap: 0.75rem;"> | |
| <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="7 10 12 15 17 10"></polyline> | |
| <line x1="12" y1="15" x2="12" y2="3"></line> | |
| </svg> | |
| 导出 | |
| </button> | |
| <button style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); font-weight: 600; cursor: pointer; transition: var(--transition-normal);"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="3"></circle> | |
| <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> | |
| </svg> | |
| 高级设置 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Logs --> | |
| <div class="dashboard-card p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold">实时日志监控</h2> | |
| <div class="flex items-center space-x-3"> | |
| <button class="text-sm text-gray-400 hover:text-white"> | |
| <i class="fas fa-trash mr-1"></i>清空 | |
| </button> | |
| <button class="text-sm text-gray-400 hover:text-white"> | |
| <i class="fas fa-download mr-1"></i>保存 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm"> | |
| <div class="text-green-400 mb-2">[12:34:56] ✓ 账号注册成功: user_5483@domain.com</div> | |
| <div class="text-blue-400 mb-2">[12:34:55] ⚡ 邮箱验证通过</div> | |
| <div class="text-green-400 mb-2">[12:34:54] ✓ 账号注册成功: user_5482@domain.com</div> | |
| <div class="text-yellow-400 mb-2">[12:34:53] ⚠️ 验证码延迟,重试中...</div> | |
| <div class="text-green-400 mb-2">[12:34:52] ✓ 账号注册成功: user_5481@domain.com</div> | |
| <div class="text-blue-400 mb-2">[12:34:51] ⚡ 邮箱验证通过</div> | |
| <div class="text-gray-400 mb-2">[12:34:50] ℹ️ 正在处理第23-25批次账号</div> | |
| <div class="text-green-400 mb-2">[12:34:49] ✓ 账号注册成功: user_5480@domain.com</div> | |
| <div class="text-green-400 mb-2">[12:34:48] ✓ 账号注册成功: user_5479@domain.com</div> | |
| <div class="text-blue-400 mb-2">[12:34:47] ⚡ 邮箱验证通过</div> | |
| <div class="text-green-400 mb-2">[12:34:46] ✓ 账号注册成功: user_5478@domain.com</div> | |
| </div> | |
| <div class="mt-4 flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| <span class="text-sm text-gray-400">成功</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| <span class="text-sm text-gray-400">警告</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| <span class="text-sm text-gray-400">信息</span> | |
| </div> | |
| <div class="flex-1 text-right"> | |
| <span class="text-sm text-gray-400">最后更新: 刚刚</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-8"> | |
| <!-- Account Management --> | |
| <div class="dashboard-card p-6"> | |
| <h2 class="text-xl font-bold mb-6">账号管理</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">已验证账号</p> | |
| <p class="text-lg font-bold">8,432</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-check-circle text-green-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">待验证账号</p> | |
| <p class="text-lg font-bold">156</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-clock text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">失败账号</p> | |
| <p class="text-lg font-bold">42</p> | |
| </div> | |
| <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"> | |
| <i class="fas fa-times-circle text-red-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="btn-primary w-full"> | |
| <i class="fas fa-sync-alt mr-2"></i>刷新状态 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="dashboard-card p-6"> | |
| <h2 class="text-xl font-bold mb-6">快速操作</h2> | |
| <div class="space-y-3"> | |
| <button class="btn-secondary w-full text-left"> | |
| <i class="fas fa-mail-bulk mr-2"></i>邮箱配置 | |
| </button> | |
| <button class="btn-secondary w-full text-left"> | |
| <i class="fas fa-server mr-2"></i>代理管理 | |
| </button> | |
| <button class="btn-secondary w-full text-left"> | |
| <i class="fas fa-key mr-2"></i>Token管理 | |
| </button> | |
| <button class="btn-secondary w-full text-left"> | |
| <i class="fas fa-chart-bar mr-2"></i>数据分析 | |
| </button> | |
| <button class="btn-secondary w-full text-left"> | |
| <i class="fas fa-shield-alt mr-2"></i>安全设置 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- System Status --> | |
| <div class="dashboard-card p-6"> | |
| <h2 class="text-xl font-bold mb-6">系统状态</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-400">CPU使用率</span> | |
| <span class="text-sm font-medium">42%</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-blue-500 to-cyan-400" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-400">内存使用率</span> | |
| <span class="text-sm font-medium">68%</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-purple-500 to-pink-400" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm text-gray-400">网络负载</span> | |
| <span class="text-sm font-medium">24%</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-green-500 to-emerald-400" style="width: 24%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Account Table --> | |
| <div class="mt-8"> | |
| <div class="dashboard-card p-6"> | |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold mb-4 md:mb-0">账号列表</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="搜索账号..." class="input-field pl-10 pr-4"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| <button class="btn-primary"> | |
| <i class="fas fa-plus mr-2"></i>添加账号 | |
| </button> | |
| </div> | |
| </div> | |
| <div class="table-container overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">选择</th> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">账号邮箱</th> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">状态</th> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">创建时间</th> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">最后活动</th> | |
| <th class="py-3 px-4 text-left text-gray-400 font-medium">操作</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td> | |
| <td class="py-3 px-4 font-medium">user_5483@domain.com</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td> | |
| <td class="py-3 px-4 text-gray-400">刚刚</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300 tooltip"> | |
| <i class="fas fa-eye"></i> | |
| <span class="tooltip-text">查看详情</span> | |
| </button> | |
| <button class="text-green-400 hover:text-green-300 tooltip"> | |
| <i class="fas fa-redo"></i> | |
| <span class="tooltip-text">刷新状态</span> | |
| </button> | |
| <button class="text-red-400 hover:text-red-300 tooltip"> | |
| <i class="fas fa-trash"></i> | |
| <span class="tooltip-text">删除</span> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td> | |
| <td class="py-3 px-4 font-medium">user_5482@domain.com</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td> | |
| <td class="py-3 px-4 text-gray-400">2分钟前</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button> | |
| <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button> | |
| <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td> | |
| <td class="py-3 px-4 font-medium">user_5481@domain.com</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-yellow-500/20 text-yellow-400">待验证</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400">2024-03-15 12:34</td> | |
| <td class="py-3 px-4 text-gray-400">5分钟前</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button> | |
| <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button> | |
| <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td> | |
| <td class="py-3 px-4 font-medium">user_5480@domain.com</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400">2024-03-15 12:33</td> | |
| <td class="py-3 px-4 text-gray-400">8分钟前</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button> | |
| <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button> | |
| <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="table-row"> | |
| <td class="py-3 px-4"><input type="checkbox" class="rounded text-accent-500"></td> | |
| <td class="py-3 px-4 font-medium">user_5479@domain.com</td> | |
| <td class="py-3 px-4"> | |
| <span class="px-3 py-1 rounded-full text-xs bg-green-500/20 text-green-400">活跃</span> | |
| </td> | |
| <td class="py-3 px-4 text-gray-400">2024-03-15 12:33</td> | |
| <td class="py-3 px-4 text-gray-400">10分钟前</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-400 hover:text-blue-300"><i class="fas fa-eye"></i></button> | |
| <button class="text-green-400 hover:text-green-300"><i class="fas fa-redo"></i></button> | |
| <button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <div class="text-gray-400 text-sm"> | |
| 显示 5 / 8,432 条记录 | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-accent-500 text-white">1</button> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">2</button> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">3</button> | |
| <span class="text-gray-400">...</span> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white">168</button> | |
| <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800 text-gray-400 hover:text-white"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 border-t border-gray-800 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-accent-500 to-primary-500 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">GPT Register <span class="gradient-text">Pro</span></h3> | |
| </div> | |
| <p class="text-gray-400">专业级AI账号批量注册管理系统,为企业级用户提供高效、稳定、安全的自动化注册解决方案。</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">快速链接</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">文档中心</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API接口</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">更新日志</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">技术支持</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">联系我们</h4> | |
| <div class="space-y-2 text-gray-400"> | |
| <p><i class="fas fa-envelope mr-2"></i> support@gptregister.com</p> | |
| <p><i class="fas fa-phone mr-2"></i> +86 400-123-4567</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2024 GPT Register Pro. 保留所有权利.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Modals and Scripts --> | |
| <div id="mobileMenuModal" class="modal-overlay"> | |
| <div class="modal-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">菜单</h3> | |
| <button id="closeMobileMenu" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">仪表板</a> | |
| <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">账号管理</a> | |
| <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">任务队列</a> | |
| <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">系统设置</a> | |
| <a href="#" class="block py-3 px-4 rounded-lg hover:bg-gray-800 transition">数据分析</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const mobileMenuModal = document.getElementById('mobileMenuModal'); | |
| const closeMobileMenu = document.getElementById('closeMobileMenu'); | |
| mobileMenuBtn.addEventListener('click', function() { | |
| mobileMenuModal.style.display = 'flex'; | |
| }); | |
| closeMobileMenu.addEventListener('click', function() { | |
| mobileMenuModal.style.display = 'none'; | |
| }); | |
| mobileMenuModal.addEventListener('click', function(e) { | |
| if (e.target === mobileMenuModal) { | |
| mobileMenuModal.style.display = 'none'; | |
| } | |
| }); | |
| // Simulate real-time updates | |
| function updateStats() { | |
| // Randomize stats slightly for demo | |
| const stats = document.querySelectorAll('.stat-card h3'); | |
| stats.forEach(stat => { | |
| const current = parseInt(stat.textContent.replace(/,/g, '')); | |
| const change = Math.floor(Math.random() * 11) - 5; // -5 to +5 | |
| const newValue = Math.max(0, current + change); | |
| stat.textContent = newValue.toLocaleString(); | |
| }); | |
| } | |
| // Update stats every 30 seconds | |
| setInterval(updateStats, 30000); | |
| // Add tooltips | |
| const tooltips = document.querySelectorAll('.tooltip'); | |
| tooltips.forEach(tooltip => { | |
| tooltip.addEventListener('mouseenter', function() { | |
| const tooltipText = this.querySelector('.tooltip-text'); | |
| if (tooltipText) { | |
| tooltipText.style.opacity = '1'; | |
| tooltipText.style.visibility = 'visible'; | |
| } | |
| }); | |
| tooltip.addEventListener('mouseleave', function() { | |
| const tooltipText = this.querySelector('.tooltip-text'); | |
| if (tooltipText) { | |
| tooltipText.style.opacity = '0'; | |
| tooltipText.style.visibility = 'hidden'; | |
| } | |
| }); | |
| }); | |
| // Add row selection functionality | |
| const tableRows = document.querySelectorAll('.table-row'); | |
| tableRows.forEach(row => { | |
| row.addEventListener('click', function(e) { | |
| if (e.target.type !== 'checkbox') { | |
| const checkbox = this.querySelector('input[type="checkbox"]'); | |
| if (checkbox) { | |
| checkbox.checked = !checkbox.checked; | |
| } | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu functionality | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| const mobileMenuClose = document.getElementById('mobileMenuClose'); | |
| mobileMenuButton.addEventListener('click', showMobileMenu); | |
| mobileMenuClose.addEventListener('click', hideMobileMenu); | |
| function showMobileMenu() { | |
| mobileMenu.classList.add('show'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function hideMobileMenu() { | |
| mobileMenu.classList.remove('show'); | |
| document.body.style.overflow = ''; | |
| } | |
| // Example links | |
| document.querySelectorAll('.example-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.getElementById('github-url').value = this.textContent; | |
| document.getElementById('github-url').focus(); | |
| }); | |
| }); | |
| // Convert button | |
| document.getElementById('convert-btn').addEventListener('click', function() { | |
| const githubUrl = document.getElementById('github-url').value.trim(); | |
| const mirror = document.getElementById('mirror-select').value; | |
| if (!githubUrl) { | |
| showError('请输入GitHub链接'); | |
| return; | |
| } | |
| if (!githubUrl.includes('github.com')) { | |
| showError('请输入有效的GitHub链接'); | |
| return; | |
| } | |
| // Show loading spinner | |
| document.getElementById('convert-text').classList.add('hidden'); | |
| document.getElementById('convert-spinner').classList.remove('hidden'); | |
| document.getElementById('error-message').classList.add('hidden'); | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| try { | |
| // This is a simulation - in a real app you would call your backend API | |
| const acceleratedUrl = generateAcceleratedUrl(githubUrl, mirror); | |
| document.getElementById('accelerated-url').value = acceleratedUrl; | |
| document.getElementById('download-btn').href = acceleratedUrl; | |
| document.getElementById('result-container').classList.remove('hidden'); | |
| // Scroll to result | |
| document.getElementById('result-container').scrollIntoView({ behavior: 'smooth' }); | |
| showToast('转换成功!', 'success'); | |
| } catch (error) { | |
| showError('转换失败: ' + error.message); | |
| showToast('转换失败: ' + error.message, 'error'); | |
| } finally { | |
| // Hide loading spinner | |
| document.getElementById('convert-text').classList.remove('hidden'); | |
| document.getElementById('convert-spinner').classList.add('hidden'); | |
| } | |
| }, 1000); | |
| }); | |
| // Function to generate accelerated URL (simulation) | |
| function generateAcceleratedUrl(githubUrl, mirror) { | |
| // Basic validation | |
| if (!githubUrl.startsWith('https://github.com/')) { | |
| throw new Error('无效的GitHub链接'); | |
| } | |
| // Remove any query parameters or fragments | |
| const cleanUrl = githubUrl.split('?')[0].split('#')[0]; | |
| // Determine mirror domain based on selection | |
| let mirrorDomain; | |
| switch(mirror) { | |
| case 'beijing': | |
| mirrorDomain = 'github.axingchen.com'; | |
| break; | |
| case 'shanghai': | |
| mirrorDomain = 'github.axingchen.com'; | |
| break; | |
| case 'guangzhou': | |
| mirrorDomain = 'github.axingchen.com'; | |
| break; | |
| case 'hongkong': | |
| mirrorDomain = 'github.axingchen.com'; | |
| break; | |
| default: // auto | |
| mirrorDomain = 'github.axingchen.com'; | |
| } | |
| // Construct accelerated URL in the correct format | |
| return `https://${mirrorDomain}/${cleanUrl}`; | |
| } | |
| // Copy button | |
| document.getElementById('copy-btn').addEventListener('click', function() { | |
| const urlInput = document.getElementById('accelerated-url'); | |
| urlInput.select(); | |
| document.execCommand('copy'); | |
| // Show copied feedback | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i class="fas fa-check"></i> 已复制'; | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| }, 2000); | |
| showToast('链接已复制到剪贴板', 'success'); | |
| }); | |
| // Ping button | |
| document.getElementById('ping-btn').addEventListener('click', function() { | |
| const button = this; | |
| const originalIcon = button.innerHTML; | |
| // Show loading | |
| button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>'; | |
| button.disabled = true; | |
| // Simulate ping test | |
| setTimeout(() => { | |
| const mirrors = [ | |
| { name: '北京节点', ping: 45 }, | |
| { name: '上海节点', ping: 38 }, | |
| { name: '广州节点', ping: 52 }, | |
| { name: '香港节点', ping: 28 } | |
| ]; | |
| const fastest = mirrors.reduce((prev, current) => | |
| (prev.ping < current.ping) ? prev : current | |
| ); | |
| showToast(`最快节点: ${fastest.name} (${fastest.ping}ms)`, 'info'); | |
| // Restore button | |
| button.innerHTML = originalIcon; | |
| button.disabled = false; | |
| }, 1500); | |
| }); | |
| // Show error message | |
| function showError(message) { | |
| const errorElement = document.getElementById('error-message'); | |
| errorElement.textContent = message; | |
| errorElement.classList.remove('hidden'); | |
| } | |
| // Toast notification | |
| function showToast(message, type = 'info') { | |
| const toast = document.getElementById('toast'); | |
| toast.textContent = message; | |
| // Set color based on type | |
| switch(type) { | |
| case 'success': | |
| toast.style.backgroundColor = '#48BB78'; | |
| break; | |
| case 'error': | |
| toast.style.backgroundColor = '#F56565'; | |
| break; | |
| case 'info': | |
| toast.style.backgroundColor = '#4299E1'; | |
| break; | |
| default: | |
| toast.style.backgroundColor = '#333'; | |
| } | |
| toast.classList.add('show'); | |
| // Hide after 3 seconds | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Auto-convert when pressing Enter in input field | |
| document.getElementById('github-url').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('convert-btn').click(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> |