Spaces:

ixingchen
/

unm

Running

unm

File size: 20,021 Bytes

<!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>
    // Enhanced notification function with animations
    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);

      // Close button
      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);

      // Auto remove after 5 seconds
      setTimeout(() => {
        notification.classList.add('translate-x-full', 'opacity-0');
        setTimeout(() => notification.remove(), 300);
      }, 5000);
    }

    // Enhanced API status monitoring with animations
    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);
          
          // Animate progress bar
          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);
      }
    }

    // Initialize animations and event listeners
    document.addEventListener('DOMContentLoaded', () => {
      // Set current year
      document.getElementById('current-year').textContent = new Date().getFullYear();
      
      // Initialize ScrollReveal animations
      ScrollReveal().reveal('.feature-card', {
        delay: 200,
        distance: '20px',
        origin: 'bottom',
        interval: 100,
        easing: 'cubic-bezier(0.5, 0, 0, 1)'
      });
      
      // Fetch API status periodically
      fetchApiStatus();
      setInterval(fetchApiStatus, 30000);
      
      // Button event listeners
      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';
        });
      }
      
      // Check for saved dark mode preference
      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>