Hugging Face's logo

Spaces:
ixingchen
/
gh
Running

App Files Community
gh / index.html
ixingchen's picture
ixingchen
Add 2 files
dd02792 verified
raw
history blame contribute delete
48.5 kB
 <!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">
<!-- Theme Toggle -->
<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>
<!-- Toast Notification -->
<div id="toast" class="toast"></div>
<!-- Mobile Menu -->
<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 -->
<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 Converter -->
<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>
<!-- Info Cards - Horizontal Scroll on Mobile, Grid on Desktop -->
<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>
<!-- Features -->
<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>
<!-- How to Use -->
<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>
<!-- FAQ -->
<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>
<!-- Stats -->
<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>
<!-- CTA -->
<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 -->
<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() {
// Check for dark mode preference
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');
}
// Theme toggle functionality
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');
}
});
// 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';
// Animate menu items
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 = '';
}
// 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);
});
// FAQ toggle
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)';
}
});
});
// 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();
}
});
// Animate elements when they come into view
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)';
}
});
};
// Set initial state for animated elements
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(); // Run once on page load
});
</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>