| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GitHub 下载加速器 - 国内高速访问GitHub资源</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| light: '#7c3aed', |
| dark: '#8b5cf6' |
| }, |
| secondary: { |
| light: '#4f46e5', |
| dark: '#6366f1' |
| } |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| 'fade-in': 'fadeIn 0.5s ease-out', |
| 'fade-in-up': 'fadeInUp 0.6s ease-out', |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite' |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-10px)' } |
| }, |
| fadeIn: { |
| '0%': { opacity: '0' }, |
| '100%': { opacity: '1' } |
| }, |
| fadeInUp: { |
| '0%': { opacity: '0', transform: 'translateY(20px)' }, |
| '100%': { opacity: '1', transform: 'translateY(0)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb, #a777e3); |
| } |
| .dark .gradient-bg { |
| background: linear-gradient(135deg, #4b6cb7, #6a3093); |
| } |
| .link-card { |
| transition: all 0.3s ease; |
| transform: translateY(0); |
| } |
| .link-card:hover { |
| transform: translateY(-8px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .dark .link-card:hover { |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); |
| } |
| .loading { |
| display: inline-block; |
| width: 20px; |
| height: 20px; |
| border: 3px solid rgba(255,255,255,.3); |
| border-radius: 50%; |
| border-top-color: #fff; |
| animation: spin 1s ease-in-out infinite; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| .toast { |
| position: fixed; |
| bottom: 20px; |
| left: 50%; |
| transform: translateX(-50%); |
| background-color: #333; |
| color: white; |
| padding: 12px 24px; |
| border-radius: 8px; |
| z-index: 1000; |
| opacity: 0; |
| transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .dark .toast { |
| background-color: #1e293b; |
| } |
| .toast.show { |
| opacity: 1; |
| transform: translateX(-50%) translateY(0); |
| } |
| .mobile-menu { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0,0,0,0.95); |
| z-index: 100; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| backdrop-filter: blur(8px); |
| } |
| .dark .mobile-menu { |
| background-color: rgba(15, 23, 42, 0.98); |
| } |
| .mobile-menu.show { |
| display: flex; |
| animation: fadeIn 0.3s ease-out; |
| } |
| .mobile-menu a { |
| color: white; |
| font-size: 1.5rem; |
| margin: 15px 0; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| .mobile-menu.show a { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| .mobile-menu a:nth-child(1) { transition-delay: 0.1s; } |
| .mobile-menu a:nth-child(2) { transition-delay: 0.2s; } |
| .mobile-menu a:nth-child(3) { transition-delay: 0.3s; } |
| .mobile-menu a:nth-child(4) { transition-delay: 0.4s; } |
| .mobile-menu a:hover { |
| color: #8b5cf6; |
| } |
| .mobile-menu-close { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| color: white; |
| font-size: 2rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| .mobile-menu-close:hover { |
| transform: rotate(90deg); |
| color: #8b5cf6; |
| } |
| .info-cards-container { |
| display: flex; |
| overflow-x: auto; |
| scrollbar-width: none; |
| -ms-overflow-style: none; |
| padding-bottom: 8px; |
| } |
| .info-cards-container::-webkit-scrollbar { |
| display: none; |
| } |
| .info-card { |
| flex: 0 0 auto; |
| width: 300px; |
| margin-right: 16px; |
| transition: all 0.3s ease; |
| } |
| .info-card:hover { |
| transform: translateY(-5px); |
| } |
| .info-card:last-child { |
| margin-right: 0; |
| } |
| @media (min-width: 768px) { |
| .info-cards-container { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 16px; |
| overflow-x: visible; |
| } |
| .info-card { |
| width: auto; |
| margin-right: 0; |
| } |
| } |
| .theme-toggle { |
| position: relative; |
| width: 48px; |
| height: 24px; |
| border-radius: 12px; |
| background-color: #e2e8f0; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| .dark .theme-toggle { |
| background-color: #334155; |
| } |
| .theme-toggle-handle { |
| position: absolute; |
| top: 2px; |
| left: 2px; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background-color: white; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
| transition: all 0.3s ease; |
| } |
| .dark .theme-toggle-handle { |
| left: 26px; |
| background-color: #1e293b; |
| } |
| .wave-shape { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| overflow: hidden; |
| line-height: 0; |
| } |
| .wave-shape svg { |
| position: relative; |
| display: block; |
| width: calc(100% + 1.3px); |
| height: 80px; |
| } |
| .wave-shape .shape-fill { |
| fill: #FFFFFF; |
| } |
| .dark .wave-shape .shape-fill { |
| fill: #0f172a; |
| } |
| .glow { |
| filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)); |
| } |
| .dark .glow { |
| filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8)); |
| } |
| .animate-delay-100 { |
| animation-delay: 0.1s; |
| } |
| .animate-delay-200 { |
| animation-delay: 0.2s; |
| } |
| .animate-delay-300 { |
| animation-delay: 0.3s; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-slate-900 transition-colors duration-300"> |
| |
| <div class="fixed top-4 right-4 z-50 flex items-center space-x-2"> |
| <i class="fas fa-sun text-yellow-400 dark:text-gray-300"></i> |
| <div class="theme-toggle" id="themeToggle"> |
| <div class="theme-toggle-handle"></div> |
| </div> |
| <i class="fas fa-moon text-gray-400 dark:text-indigo-300"></i> |
| </div> |
|
|
| |
| <div id="toast" class="toast"></div> |
|
|
| |
| <div id="mobileMenu" class="mobile-menu"> |
| <span id="mobileMenuClose" class="mobile-menu-close"><i class="fas fa-times"></i></span> |
| <a href="#features" onclick="hideMobileMenu()">功能</a> |
| <a href="#how-to-use" onclick="hideMobileMenu()">使用指南</a> |
| <a href="#faq" onclick="hideMobileMenu()">常见问题</a> |
| <a href="#converter" onclick="hideMobileMenu()">立即体验</a> |
| </div> |
|
|
| |
| <header class="gradient-bg text-white relative overflow-hidden"> |
| <div class="wave-shape"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> |
| </svg> |
| </div> |
| <div class="container mx-auto px-4 py-6 relative z-10"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <i class="fab fa-github text-4xl glow"></i> |
| <h1 class="text-2xl font-bold">GitHub加速下载</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#features" class="hover:text-gray-200 transition duration-300">功能</a> |
| <a href="#how-to-use" class="hover:text-gray-200 transition duration-300">使用指南</a> |
| <a href="#faq" class="hover:text-gray-200 transition duration-300">常见问题</a> |
| </nav> |
| <button id="mobileMenuButton" class="md:hidden text-xl hover:text-gray-200 transition"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| <div class="mt-16 mb-20 text-center"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6 animate-fade-in-up">国内高速下载GitHub资源</h2> |
| <p class="text-xl max-w-2xl mx-auto opacity-90 animate-fade-in-up animate-delay-100">突破网络限制，使用国内镜像加速下载GitHub上的仓库、Release文件、源码等资源</p> |
| <div class="mt-10 flex justify-center animate-fade-in-up animate-delay-200"> |
| <a href="#converter" class="bg-white text-primary-light px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center"> |
| <i class="fas fa-bolt mr-2"></i> 立即体验 |
| </a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-12 -mt-10" id="converter"> |
| <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 max-w-4xl mx-auto transition-all duration-300 animate-fade-in-up animate-delay-300"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white">GitHub链接转换器</h2> |
| <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400"> |
| <i class="fas fa-server"></i> |
| <span>服务器状态: <span class="font-bold text-green-500">正常</span></span> |
| </div> |
| </div> |
| <div class="space-y-4"> |
| <div> |
| <label for="github-url" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">GitHub原始链接</label> |
| <div class="flex"> |
| <input type="text" id="github-url" placeholder="https://github.com/owner/repo/releases/download/v1.0/example.zip" |
| class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:ring-2 focus:ring-primary-light focus:border-primary-light dark:bg-slate-700 dark:text-white dark:focus:ring-primary-dark transition"> |
| <button id="convert-btn" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-r-lg hover:bg-opacity-90 transition flex items-center justify-center min-w-24"> |
| <span id="convert-text">转换</span> |
| <span id="convert-spinner" class="loading hidden ml-2"></span> |
| </button> |
| </div> |
| </div> |
| <div id="result-container" class="hidden"> |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">加速下载链接</label> |
| <div class="flex"> |
| <input type="text" id="accelerated-url" readonly |
| class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-l-lg bg-gray-50 dark:bg-slate-700 dark:text-white truncate"> |
| <button id="copy-btn" class="bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-gray-200 px-4 py-3 hover:bg-gray-300 dark:hover:bg-slate-500 transition"> |
| <i class="fas fa-copy"></i> |
| </button> |
| <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"> |
| <i class="fas fa-download mr-2"></i> 下载 |
| </a> |
| </div> |
| <div class="mt-2 text-sm text-gray-500 dark:text-gray-400"> |
| <span id="speed-indicator" class="inline-flex items-center"> |
| <span class="w-3 h-3 bg-green-500 rounded-full mr-1 animate-pulse-slow"></span> |
| <span>高速通道已就绪</span> |
| </span> |
| <span class="ml-4">预计下载速度: <span class="font-bold text-green-600 dark:text-green-400">5-10MB/s</span></span> |
| </div> |
| </div> |
| <div id="error-message" class="hidden text-red-500 dark:text-red-400 text-sm mt-2"></div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <div class="info-cards-container"> |
| <div class="info-card bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg border border-blue-100 dark:border-blue-800/50"> |
| <h3 class="font-bold text-blue-800 dark:text-blue-200 mb-2 flex items-center"> |
| <i class="fas fa-link mr-2"></i> 常用链接示例 |
| </h3> |
| <ul class="space-y-2 text-sm"> |
| <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo</a></li> |
| <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo/releases</a></li> |
| <li><a href="#" class="text-blue-600 dark:text-blue-300 hover:underline example-link hover:text-blue-800 dark:hover:text-blue-100 transition">https://github.com/owner/repo/archive/main.zip</a></li> |
| </ul> |
| </div> |
| <div class="info-card bg-purple-50 dark:bg-purple-900/30 p-4 rounded-lg border border-purple-100 dark:border-purple-800/50"> |
| <h3 class="font-bold text-purple-800 dark:text-purple-200 mb-2 flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> 支持的类型 |
| </h3> |
| <ul class="space-y-2 text-sm"> |
| <li class="flex items-center"><i class="fas fa-code-branch text-purple-500 mr-2"></i> 仓库源码下载</li> |
| <li class="flex items-center"><i class="fas fa-box-open text-purple-500 mr-2"></i> Releases文件</li> |
| <li class="flex items-center"><i class="fas fa-tags text-purple-500 mr-2"></i> 分支/标签下载</li> |
| </ul> |
| </div> |
| <div class="info-card bg-green-50 dark:bg-green-900/30 p-4 rounded-lg border border-green-100 dark:border-green-800/50"> |
| <h3 class="font-bold text-green-800 dark:text-green-200 mb-2 flex items-center"> |
| <i class="fas fa-server mr-2"></i> 加速节点 |
| </h3> |
| <div class="flex items-center space-x-2"> |
| <div class="flex-1"> |
| <select id="mirror-select" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm dark:bg-slate-700 dark:text-white"> |
| <option value="auto">自动选择最优节点</option> |
| <option value="beijing">北京节点</option> |
| <option value="shanghai">上海节点</option> |
| <option value="guangzhou">广州节点</option> |
| <option value="hongkong">香港节点</option> |
| </select> |
| </div> |
| <button id="ping-btn" class="bg-green-100 dark:bg-green-800/50 text-green-700 dark:text-green-300 p-2 rounded-md hover:bg-green-200 dark:hover:bg-green-700 transition"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| <div class="mt-2 text-xs text-gray-500 dark:text-gray-400"> |
| <i class="fas fa-info-circle mr-1"></i> 当前推荐: <span class="font-medium">香港节点</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <section class="bg-gray-100 dark:bg-slate-800 py-16 transition-colors duration-300" id="features"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">为什么选择我们的加速服务</h2> |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">专为国内开发者优化的GitHub资源加速解决方案</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up"> |
| <div class="text-blue-500 mb-4 text-4xl"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">极速下载</h3> |
| <p class="text-gray-600 dark:text-gray-300">通过国内CDN节点加速，下载速度提升10倍以上，告别GitHub的缓慢下载体验。</p> |
| <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center"> |
| <span class="text-sm text-gray-500 dark:text-gray-400">实测速度</span> |
| <span class="font-bold text-blue-500">8.4MB/s</span> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up animate-delay-100"> |
| <div class="text-purple-500 mb-4 text-4xl"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">稳定可靠</h3> |
| <p class="text-gray-600 dark:text-gray-300">多节点负载均衡，自动故障转移，确保服务24小时稳定可用。</p> |
| <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center"> |
| <span class="text-sm text-gray-500 dark:text-gray-400">运行时间</span> |
| <span class="font-bold text-purple-500">99.98%</span> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-md link-card transition duration-300 animate-fade-in-up animate-delay-200"> |
| <div class="text-green-500 mb-4 text-4xl"> |
| <i class="fas fa-lock"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">安全加密</h3> |
| <p class="text-gray-600 dark:text-gray-300">所有传输数据加密处理，确保您的下载内容安全无篡改。</p> |
| <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-600 flex justify-between items-center"> |
| <span class="text-sm text-gray-500 dark:text-gray-400">安全认证</span> |
| <span class="font-bold text-green-500">SSL/TLS</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white dark:bg-slate-900 transition-colors duration-300" id="how-to-use"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">使用指南</h2> |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">简单三步，轻松加速GitHub资源下载</p> |
| </div> |
| <div class="max-w-4xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center mb-12"> |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center animate-float"> |
| <div class="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg"> |
| 1 |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pl-8 animate-fade-in-up"> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">复制GitHub链接</h3> |
| <p class="text-gray-600 dark:text-gray-300">在GitHub上找到您需要下载的仓库、Release文件或源码的原始链接，复制到剪贴板。</p> |
| <div class="mt-4 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg inline-block"> |
| <code class="text-sm text-purple-600 dark:text-purple-300">https://github.com/owner/repo</code> |
| </div> |
| </div> |
| </div> |
| <div class="flex flex-col md:flex-row items-center mb-12"> |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center order-1 md:order-2 animate-float animate-delay-100"> |
| <div class="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg"> |
| 2 |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pr-8 order-2 md:order-1 animate-fade-in-up animate-delay-100"> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">粘贴并转换</h3> |
| <p class="text-gray-600 dark:text-gray-300">将链接粘贴到本页面的输入框中，点击"转换"按钮生成加速下载链接。</p> |
| <div class="mt-4 flex"> |
| <input type="text" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg dark:bg-slate-700 dark:text-white" value="https://github.com/owner/repo" readonly> |
| <button class="bg-blue-500 text-white px-4 py-2 rounded-r-lg">转换</button> |
| </div> |
| </div> |
| </div> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center animate-float animate-delay-200"> |
| <div class="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-full w-24 h-24 flex items-center justify-center text-3xl font-bold shadow-lg"> |
| 3 |
| </div> |
| </div> |
| <div class="md:w-2/3 md:pl-8 animate-fade-in-up animate-delay-200"> |
| <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">高速下载</h3> |
| <p class="text-gray-600 dark:text-gray-300">点击"下载"按钮或使用下载工具获取加速后的文件，享受极速下载体验。</p> |
| <div class="mt-4 flex"> |
| <input type="text" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg dark:bg-slate-700 dark:text-white" value="https://mirror.example.com/owner/repo" readonly> |
| <button class="bg-green-500 text-white px-4 py-2 rounded-r-lg flex items-center"> |
| <i class="fas fa-download mr-2"></i> 下载 |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gray-100 dark:bg-slate-800 py-16 transition-colors duration-300" id="faq"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">常见问题</h2> |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">您可能关心的问题解答</p> |
| </div> |
| <div class="max-w-3xl mx-auto space-y-4"> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md"> |
| <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle"> |
| <i class="fas fa-question-circle text-purple-500 mr-2"></i> |
| 这个服务是免费的吗？ |
| <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i> |
| </h3> |
| <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden"> |
| <p>是的，我们的GitHub加速下载服务完全免费，不收取任何费用。我们通过公益CDN节点提供加速服务。</p> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md"> |
| <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle"> |
| <i class="fas fa-question-circle text-purple-500 mr-2"></i> |
| 支持哪些类型的GitHub链接？ |
| <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i> |
| </h3> |
| <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden"> |
| <p>我们支持几乎所有GitHub资源链接，包括仓库源码下载（zip/tar.gz）、Release文件、分支/标签下载等。</p> |
| <ul class="mt-2 space-y-1"> |
| <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> 仓库源码下载</li> |
| <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> Releases文件</li> |
| <li class="flex items-center"><i class="fas fa-check text-purple-500 mr-2 text-xs"></i> 分支/标签下载</li> |
| </ul> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md"> |
| <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle"> |
| <i class="fas fa-question-circle text-purple-500 mr-2"></i> |
| 下载速度能达到多少？ |
| <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i> |
| </h3> |
| <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden"> |
| <p>根据网络状况不同，通常可以达到5-10MB/s的下载速度，比直接访问GitHub快10倍以上。</p> |
| <div class="mt-3 bg-gray-100 dark:bg-slate-600 p-3 rounded-lg"> |
| <div class="flex justify-between text-sm mb-1"> |
| <span>下载速度</span> |
| <span class="font-bold">8.4MB/s</span> |
| </div> |
| <div class="w-full bg-gray-200 dark:bg-slate-500 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 84%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-slate-700 p-6 rounded-lg shadow transition hover:shadow-md"> |
| <h3 class="font-bold text-lg mb-2 flex items-center text-gray-800 dark:text-white cursor-pointer faq-toggle"> |
| <i class="fas fa-question-circle text-purple-500 mr-2"></i> |
| 文件安全性如何保证？ |
| <i class="fas fa-chevron-down ml-auto text-gray-400 text-sm transition-transform"></i> |
| </h3> |
| <div class="faq-content mt-2 text-gray-600 dark:text-gray-300 hidden"> |
| <p>我们会对所有加速文件进行MD5校验，确保与GitHub原始文件完全一致，不会对文件内容做任何修改。</p> |
| <div class="mt-3 flex items-center text-sm bg-gray-100 dark:bg-slate-600 p-3 rounded-lg"> |
| <i class="fas fa-shield-alt text-green-500 mr-2"></i> |
| <span>所有文件均经过完整性验证</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-12 bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-800 dark:to-blue-800 text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
| <div class="animate-fade-in-up"> |
| <div class="text-4xl font-bold mb-2">10,000+</div> |
| <div class="text-sm opacity-90">每日用户</div> |
| </div> |
| <div class="animate-fade-in-up animate-delay-100"> |
| <div class="text-4xl font-bold mb-2">50TB+</div> |
| <div class="text-sm opacity-90">每日流量</div> |
| </div> |
| <div class="animate-fade-in-up animate-delay-200"> |
| <div class="text-4xl font-bold mb-2">99.98%</div> |
| <div class="text-sm opacity-90">服务可用性</div> |
| </div> |
| <div class="animate-fade-in-up animate-delay-300"> |
| <div class="text-4xl font-bold mb-2">8.4MB/s</div> |
| <div class="text-sm opacity-90">平均下载速度</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white dark:bg-slate-900"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">立即体验GitHub高速下载</h2> |
| <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-8">告别缓慢的GitHub下载体验，享受国内CDN加速带来的极速下载</p> |
| <a href="#converter" class="bg-primary-light dark:bg-primary-dark text-white px-8 py-4 rounded-full font-bold hover:bg-opacity-90 transition duration-300 shadow-lg hover:shadow-xl inline-flex items-center animate-bounce"> |
| <i class="fas fa-bolt mr-2"></i> 开始转换 |
| </a> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 dark:bg-slate-950 text-white py-12 transition-colors duration-300"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fab fa-github text-3xl"></i> |
| <h3 class="text-xl font-bold">GitHub加速下载</h3> |
| </div> |
| <p class="text-gray-400">为国内开发者提供高速稳定的GitHub资源下载服务。</p> |
| <div class="mt-4 flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-weixin"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-qq"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4 text-white">快速链接</h4> |
| <ul class="space-y-2"> |
| <li><a href="#features" class="text-gray-400 hover:text-white transition">功能特点</a></li> |
| <li><a href="#how-to-use" class="text-gray-400 hover:text-white transition">使用指南</a></li> |
| <li><a href="#faq" class="text-gray-400 hover:text-white transition">常见问题</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4 text-white">相关资源</h4> |
| <ul class="space-y-2"> |
| <li><a href="https://github.com" class="text-gray-400 hover:text-white transition" target="_blank">GitHub官网</a></li> |
| <li><a href="https://developer.aliyun.com/mirror/" class="text-gray-400 hover:text-white transition" target="_blank">阿里云镜像站</a></li> |
| <li><a href="https://mirrors.tuna.tsinghua.edu.cn/" class="text-gray-400 hover:text-white transition" target="_blank">清华大学镜像站</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4 text-white">订阅更新</h4> |
| <p class="text-gray-400 mb-4">订阅我们的邮件列表，获取最新功能更新和服务状态通知</p> |
| <div class="flex"> |
| <input type="email" placeholder="您的邮箱" class="px-4 py-2 rounded-l-lg w-full dark:bg-gray-700 dark:text-white"> |
| <button class="bg-primary-light dark:bg-primary-dark px-4 py-2 rounded-r-lg">订阅</button> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 GitHub加速下载服务. 保留所有权利.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| if (localStorage.getItem('color-theme') === 'dark' || (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| } |
| |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| themeToggle.addEventListener('click', function() { |
| if (document.documentElement.classList.contains('dark')) { |
| document.documentElement.classList.remove('dark'); |
| localStorage.setItem('color-theme', 'light'); |
| } else { |
| document.documentElement.classList.add('dark'); |
| localStorage.setItem('color-theme', 'dark'); |
| } |
| }); |
| |
| |
| 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'; |
| |
| |
| const menuItems = document.querySelectorAll('.mobile-menu a'); |
| menuItems.forEach((item, index) => { |
| item.style.transitionDelay = `${index * 0.1}s`; |
| }); |
| } |
| |
| function hideMobileMenu() { |
| mobileMenu.classList.remove('show'); |
| document.body.style.overflow = ''; |
| } |
| |
| |
| 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(); |
| }); |
| }); |
| |
| |
| 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; |
| } |
| |
| |
| document.getElementById('convert-text').classList.add('hidden'); |
| document.getElementById('convert-spinner').classList.remove('hidden'); |
| document.getElementById('error-message').classList.add('hidden'); |
| |
| |
| setTimeout(() => { |
| try { |
| |
| const acceleratedUrl = generateAcceleratedUrl(githubUrl, mirror); |
| |
| document.getElementById('accelerated-url').value = acceleratedUrl; |
| document.getElementById('download-btn').href = acceleratedUrl; |
| document.getElementById('result-container').classList.remove('hidden'); |
| |
| |
| document.getElementById('result-container').scrollIntoView({ behavior: 'smooth' }); |
| |
| showToast('转换成功！', 'success'); |
| } catch (error) { |
| showError('转换失败: ' + error.message); |
| showToast('转换失败: ' + error.message, 'error'); |
| } finally { |
| |
| document.getElementById('convert-text').classList.remove('hidden'); |
| document.getElementById('convert-spinner').classList.add('hidden'); |
| } |
| }, 1000); |
| }); |
| |
| |
| function generateAcceleratedUrl(githubUrl, mirror) { |
| |
| if (!githubUrl.startsWith('https://github.com/')) { |
| throw new Error('无效的GitHub链接'); |
| } |
| |
| |
| const cleanUrl = githubUrl.split('?')[0].split('#')[0]; |
| |
| |
| 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: |
| mirrorDomain = 'github.axingchen.com'; |
| } |
| |
| |
| return `https://${mirrorDomain}/${cleanUrl}`; |
| } |
| |
| |
| document.getElementById('copy-btn').addEventListener('click', function() { |
| const urlInput = document.getElementById('accelerated-url'); |
| urlInput.select(); |
| document.execCommand('copy'); |
| |
| |
| const originalText = this.innerHTML; |
| this.innerHTML = '<i class="fas fa-check"></i> 已复制'; |
| setTimeout(() => { |
| this.innerHTML = originalText; |
| }, 2000); |
| |
| showToast('链接已复制到剪贴板', 'success'); |
| }); |
| |
| |
| document.getElementById('ping-btn').addEventListener('click', function() { |
| const button = this; |
| const originalIcon = button.innerHTML; |
| |
| |
| button.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>'; |
| button.disabled = true; |
| |
| |
| 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'); |
| |
| |
| button.innerHTML = originalIcon; |
| button.disabled = false; |
| }, 1500); |
| }); |
| |
| |
| document.querySelectorAll('.faq-toggle').forEach(toggle => { |
| toggle.addEventListener('click', function() { |
| const content = this.nextElementSibling; |
| const icon = this.querySelector('.fa-chevron-down'); |
| |
| if (content.classList.contains('hidden')) { |
| content.classList.remove('hidden'); |
| icon.style.transform = 'rotate(180deg)'; |
| } else { |
| content.classList.add('hidden'); |
| icon.style.transform = 'rotate(0deg)'; |
| } |
| }); |
| }); |
| |
| |
| function showError(message) { |
| const errorElement = document.getElementById('error-message'); |
| errorElement.textContent = message; |
| errorElement.classList.remove('hidden'); |
| } |
| |
| |
| function showToast(message, type = 'info') { |
| const toast = document.getElementById('toast'); |
| toast.textContent = message; |
| |
| |
| 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'); |
| |
| |
| setTimeout(() => { |
| toast.classList.remove('show'); |
| }, 3000); |
| } |
| |
| |
| document.getElementById('github-url').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| document.getElementById('convert-btn').click(); |
| } |
| }); |
| |
| |
| const animateOnScroll = function() { |
| const elements = document.querySelectorAll('.animate-fade-in-up'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| }; |
| |
| |
| document.querySelectorAll('.animate-fade-in-up').forEach(el => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| el.style.transition = 'all 0.6s ease-out'; |
| }); |
| |
| window.addEventListener('scroll', animateOnScroll); |
| animateOnScroll(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ixingchen/gh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
