| <!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> |
