|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<title>UNM-Server | 高级音乐解灰服务</title> |
|
|
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" /> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/scrollreveal"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
light: "#3b82f6", |
|
|
dark: "#1e40af" |
|
|
}, |
|
|
secondary: { |
|
|
light: "#10b981", |
|
|
dark: "#047857" |
|
|
}, |
|
|
accent: "#8b5cf6" |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'gradient': 'gradient 8s ease infinite', |
|
|
'text-gradient': 'text-gradient 4s linear infinite' |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-20px)' } |
|
|
}, |
|
|
gradient: { |
|
|
'0%, 100%': { 'background-position': '0% 50%' }, |
|
|
'50%': { 'background-position': '100% 50%' } |
|
|
}, |
|
|
'text-gradient': { |
|
|
'to': { 'background-position': '200% center' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.tech-pattern { |
|
|
background-color: #f8fafc; |
|
|
background-image: radial-gradient(#e2e8f0 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.dark .tech-pattern { |
|
|
background-color: #0f172a; |
|
|
background-image: radial-gradient(#1e293b 1px, transparent 1px); |
|
|
} |
|
|
|
|
|
.tech-border { |
|
|
border: 1px solid rgba(59, 130, 246, 0.2); |
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.1), |
|
|
inset 0 0 20px rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6, #3b82f6); |
|
|
background-size: 300% 100%; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
animation: text-gradient 4s linear infinite; |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.dark .glass-card { |
|
|
background: rgba(15, 23, 42, 0.7); |
|
|
} |
|
|
|
|
|
.btn-hover-effect:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: translateY(-3px) scale(1.1); |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px) rotateX(5deg); |
|
|
box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body class="tech-pattern min-h-screen flex flex-col"> |
|
|
<div class="fixed inset-0 overflow-hidden opacity-20"> |
|
|
<div class="absolute top-0 left-0 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-20 animate-float"></div> |
|
|
<div class="absolute bottom-0 right-0 w-64 h-64 bg-emerald-500 rounded-full filter blur-3xl opacity-20 animate-float animation-delay-2000"></div> |
|
|
</div> |
|
|
|
|
|
<main class="flex-grow flex flex-col items-center justify-center px-4 py-8 fade-in relative z-10"> |
|
|
<div class="relative mb-12"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-primary-light to-secondary-light rounded-full filter blur-3xl opacity-20 dark:opacity-30"></div> |
|
|
</div> |
|
|
<div class="ico floating relative"> |
|
|
<div class="relative tech-border rounded-full p-2"> |
|
|
<img src="./favicon.png" alt="UNM-Server logo with futuristic digital design" class="w-48 h-48 md:w-64 md:h-64"> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2"> |
|
|
<div class="bg-primary-light dark:bg-primary-dark text-white px-4 py-1 rounded-full text-sm font-medium flex items-center shadow-lg"> |
|
|
<div class="w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse"></div> |
|
|
<span>RUNNING</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h1 class="title text-5xl md:text-6xl font-bold mb-6 text-center gradient-text"> |
|
|
UNM-Server |
|
|
</h1> |
|
|
|
|
|
<p class="text text-xl md:text-2xl text-center max-w-5xl mx-auto mb-12 text-gray-600 dark:text-gray-300"> |
|
|
高级音乐解灰服务已正常运行，请在".env"配置文件中添加当前网站的域名使用歌曲解灰服务 |
|
|
</p> |
|
|
|
|
|
<div class="control flex flex-wrap justify-center gap-6 mb-16"> |
|
|
<button id="apiTestBtn" |
|
|
class="btn-hover-effect px-8 py-4 bg-gradient-to-r from-primary-light to-secondary-light text-white rounded-xl font-medium flex items-center hover:shadow-lg hover:shadow-primary-light/30 dark:hover:shadow-primary-dark/30 transition-all duration-300 transform hover:scale-105"> |
|
|
<div class="mr-3 relative"> |
|
|
<i class="fas fa-flask text-xl"></i> |
|
|
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div> |
|
|
</div> |
|
|
<span>API 测试</span> |
|
|
</button> |
|
|
|
|
|
<button id="apiDocsBtn" |
|
|
class="btn-hover-effect px-8 py-4 bg-gradient-to-r from-gray-800 to-gray-700 text-white rounded-xl font-medium flex items-center hover:shadow-lg hover:shadow-gray-800/30 transition-all duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-book text-xl mr-3"></i> |
|
|
<span>API 文档</span> |
|
|
</button> |
|
|
|
|
|
<button id="toggleDarkMode" |
|
|
class="btn-hover-effect px-8 py-4 glass-card border border-gray-200 dark:border-gray-700 rounded-xl font-medium flex items-center hover:shadow-lg hover:shadow-gray-500/20 transition-all duration-300 transform hover:scale-105"> |
|
|
<i id="darkModeIcon" class="fas fa-moon text-xl mr-3"></i> |
|
|
<span>暗黑模式</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="status-card glass-card p-8 rounded-2xl shadow-xl max-w-7xl w-full mb-12 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="relative mr-4"> |
|
|
<div class="w-4 h-4 rounded-full bg-green-500 animate-pulse-slow"></div> |
|
|
<div class="absolute inset-0 rounded-full bg-green-500 opacity-0 animate-ping"></div> |
|
|
</div> |
|
|
<h3 class="font-semibold text-2xl gradient-text">服务状态监控</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="feature-card glass-card p-6 rounded-xl relative overflow-hidden group border border-gray-200/50 dark:border-gray-700/50"> |
|
|
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary-light rounded-full opacity-10 group-hover:opacity-20 transition-all duration-500"></div> |
|
|
<div class="relative"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-primary-light mr-2"></div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-300">API 响应</p> |
|
|
</div> |
|
|
<p class="font-bold text-3xl" id="apiResponseTime">测试中...</p> |
|
|
<div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-primary-light to-secondary-light" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card glass-card p-6 rounded-xl relative overflow-hidden group border border-gray-200/50 dark:border-gray-700/50"> |
|
|
<div class="absolute -right-6 -top-6 w-24 h-24 bg-purple-500 rounded-full opacity-10 group-hover:opacity-20 transition-all duration-500"></div> |
|
|
<div class="relative"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-300">请求次数</p> |
|
|
</div> |
|
|
<p class="font-bold text-3xl" id="requestCount">1,024</p> |
|
|
<div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-purple-500 to-pink-500" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card glass-card p-6 rounded-xl relative overflow-hidden group border border-gray-200/50 dark:border-gray-700/50"> |
|
|
<div class="absolute -right-6 -top-6 w-24 h-24 bg-emerald-500 rounded-full opacity-10 group-hover:opacity-20 transition-all duration-500"></div> |
|
|
<div class="relative"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-3 h-3 rounded-full bg-emerald-500 mr-2"></div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-300">缓存命中</p> |
|
|
</div> |
|
|
<p class="font-bold text-3xl" id="cacheHitRate">92%</p> |
|
|
<div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-emerald-500 to-teal-500" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full max-w-7xl glass-card p-8 rounded-2xl mb-12 border border-gray-200/50 dark:border-gray-700/50"> |
|
|
<h3 class="text-2xl font-semibold mb-6 gradient-text">服务功能</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="feature-card flex items-start p-6 rounded-lg glass-card border border-gray-200/50 dark:border-gray-700/50 hover:bg-white/20 dark:hover:bg-gray-800/50 transition-all duration-300"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center text-primary-light dark:text-primary-dark text-2xl"> |
|
|
<i class="fas fa-music"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-xl mb-2">歌曲解灰</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400">解锁灰色不可播放歌曲，享受完整音乐体验</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card flex items-start p-6 rounded-lg glass-card border border-gray-200/50 dark:border-gray-700/50 hover:bg-white/20 dark:hover:bg-gray-800/50 transition-all duration-300"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-2xl"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-xl mb-2">高速缓存</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400">优化缓存机制，提升音乐加载速度</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card flex items-start p-6 rounded-lg glass-card border border-gray-200/50 dark:border-gray-700/50 hover:bg-white/20 dark:hover:bg-gray-800/50 transition-all duration-300"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-secondary-light/10 flex items-center justify-center text-secondary-light text-2xl"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-xl mb-2">安全加密</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400">数据传输加密，保护用户隐私</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card flex items-start p-6 rounded-lg glass-card border border-gray-200/50 dark:border-gray-700/50 hover:bg-white/20 dark:hover:bg-gray-800/50 transition-all duration-300"> |
|
|
<div class="flex-shrink-0 mr-4"> |
|
|
<div class="w-14 h-14 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 text-2xl"> |
|
|
<i class="fas fa-plug"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-xl mb-2">多平台支持</h4> |
|
|
<p class="text-gray-500 dark:text-gray-400">兼容多种音乐平台，一站式解决方案</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="py-8 border-t border-gray-200/50 dark:border-gray-700/50 relative z-10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="social flex justify-center mb-6"> |
|
|
<a href="#" class="mx-4 social-icon text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transform hover:-translate-y-1"> |
|
|
<i class="fab fa-github text-2xl"></i> |
|
|
</a> |
|
|
<a href="#" class="mx-4 social-icon text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transform hover:-translate-y-1"> |
|
|
<i class="fas fa-home text-2xl"></i> |
|
|
</a> |
|
|
<a href="#" class="mx-4 social-icon text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transform hover:-translate-y-1"> |
|
|
<i class="fas fa-envelope text-2xl"></i> |
|
|
</a> |
|
|
<a href="#" class="mx-4 social-icon text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transform hover:-translate-y-1"> |
|
|
<i class="fab fa-telegram text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-gray-500 dark:text-gray-400 mb-2 text-sm"> |
|
|
Copyright © 2020-<span id="current-year">2024</span> <span class="font-medium gradient-text">imsyy</span> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-gray-500 dark:text-gray-400 text-xs"> |
|
|
Powered by <span class="font-medium gradient-text">UNM-Server</span> | Version <span id="footer-version">3.0.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function showNotification(title, message, type) { |
|
|
const notification = document.createElement('div'); |
|
|
notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-xl shadow-2xl flex items-start transform transition-all duration-300 translate-x-0 opacity-100 backdrop-blur-sm border ${ |
|
|
type === 'success' |
|
|
? 'bg-green-100/80 dark:bg-green-900/80 border-green-200 dark:border-green-800 text-green-800 dark:text-green-100' |
|
|
: 'bg-blue-100/80 dark:bg-blue-900/80 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-100' |
|
|
} animate-float`; |
|
|
|
|
|
const icon = document.createElement('div'); |
|
|
icon.className = `mr-4 text-2xl ${ |
|
|
type === 'success' |
|
|
? 'text-green-500 dark:text-green-400' |
|
|
: 'text-blue-500 dark:text-blue-400' |
|
|
}`; |
|
|
icon.innerHTML = type === 'success' |
|
|
? '<i class="fas fa-check-circle"></i>' |
|
|
: '<i class="fas fa-info-circle"></i>'; |
|
|
|
|
|
const content = document.createElement('div'); |
|
|
const titleEl = document.createElement('h4'); |
|
|
titleEl.className = 'font-bold text-lg'; |
|
|
titleEl.textContent = title; |
|
|
|
|
|
const messageEl = document.createElement('p'); |
|
|
messageEl.className = 'text-sm'; |
|
|
messageEl.textContent = message; |
|
|
|
|
|
content.appendChild(titleEl); |
|
|
content.appendChild(messageEl); |
|
|
|
|
|
notification.appendChild(icon); |
|
|
notification.appendChild(content); |
|
|
|
|
|
|
|
|
const closeBtn = document.createElement('button'); |
|
|
closeBtn.className = 'ml-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors'; |
|
|
closeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
|
|
closeBtn.addEventListener('click', () => { |
|
|
notification.classList.add('translate-x-full', 'opacity-0'); |
|
|
setTimeout(() => notification.remove(), 300); |
|
|
}); |
|
|
notification.appendChild(closeBtn); |
|
|
|
|
|
document.body.appendChild(notification); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('translate-x-full', 'opacity-0'); |
|
|
setTimeout(() => notification.remove(), 300); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchApiStatus() { |
|
|
const apiElement = document.getElementById('apiResponseTime'); |
|
|
if (!apiElement) return; |
|
|
|
|
|
apiElement.textContent = '测试中...'; |
|
|
const startTime = performance.now(); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/health'); |
|
|
const endTime = performance.now(); |
|
|
const duration = endTime - startTime; |
|
|
|
|
|
if (response.ok) { |
|
|
apiElement.textContent = `${duration.toFixed(0)}ms`; |
|
|
apiElement.classList.add('text-green-500'); |
|
|
setTimeout(() => apiElement.classList.remove('text-green-500'), 1000); |
|
|
|
|
|
|
|
|
const progressBar = apiElement.nextElementSibling?.querySelector('div'); |
|
|
if (progressBar) { |
|
|
progressBar.style.width = '0%'; |
|
|
setTimeout(() => { |
|
|
progressBar.style.width = `${Math.min(100, 100 - (duration / 20))}%`; |
|
|
}, 50); |
|
|
} |
|
|
} else { |
|
|
apiElement.textContent = 'Error'; |
|
|
apiElement.classList.add('text-red-500'); |
|
|
} |
|
|
} catch (error) { |
|
|
apiElement.textContent = 'Error'; |
|
|
apiElement.classList.add('text-red-500'); |
|
|
console.error('Error fetching API status:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
document.getElementById('current-year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
ScrollReveal().reveal('.feature-card', { |
|
|
delay: 200, |
|
|
distance: '20px', |
|
|
origin: 'bottom', |
|
|
interval: 100, |
|
|
easing: 'cubic-bezier(0.5, 0, 0, 1)' |
|
|
}); |
|
|
|
|
|
|
|
|
fetchApiStatus(); |
|
|
setInterval(fetchApiStatus, 30000); |
|
|
|
|
|
|
|
|
const apiTestBtn = document.getElementById('apiTestBtn'); |
|
|
const apiDocsBtn = document.getElementById('apiDocsBtn'); |
|
|
const toggleDarkMode = document.getElementById('toggleDarkMode'); |
|
|
const darkModeIcon = document.getElementById('darkModeIcon'); |
|
|
|
|
|
if (apiTestBtn) { |
|
|
apiTestBtn.addEventListener('click', () => { |
|
|
showNotification('API 测试', '正在跳转到API测试页面...', 'info'); |
|
|
setTimeout(() => { |
|
|
window.location.href = '/api-test'; |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
if (apiDocsBtn) { |
|
|
apiDocsBtn.addEventListener('click', () => { |
|
|
showNotification('API 文档', '正在跳转到API文档页面...', 'info'); |
|
|
setTimeout(() => { |
|
|
window.location.href = '/api'; |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
if (toggleDarkMode) { |
|
|
toggleDarkMode.addEventListener('click', () => { |
|
|
const isDark = document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', isDark); |
|
|
darkModeIcon.className = isDark |
|
|
? 'fas fa-sun text-xl mr-3' |
|
|
: 'fas fa-moon text-xl mr-3'; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true' || |
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
darkModeIcon.className = 'fas fa-sun text-xl mr-3'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
