Spaces:

ixingchen
/

unm

Running

App Files Files Community

ixingchen commited on Apr 23, 2025

Commit

536a2c2

verified ·

1 Parent(s): 56cae6a

upde index.html

Browse files

Files changed (1) hide show

index.html +363 -136

index.html CHANGED Viewed

@@ -2,228 +2,455 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8" />
-  <title>UNM-Server</title>
   <link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
       darkMode: 'class',
     }
   </script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
   <style>
-    @keyframes float {
-      0% { transform: translateY(0px); }
-      50% { transform: translateY(-15px); }
-      100% { transform: translateY(0px); }
     }
-    .floating {
-      animation: float 6s ease-in-out infinite;
     }
-    .btn-hover-effect {
-      transition: all 0.3s ease;
-      transform: translateY(0);
     }
-    .btn-hover-effect:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
-    .social-icon {
-      transition: all 0.3s ease;
     }
-    .social-icon:hover {
-      transform: scale(1.2);
     }
-    .dark .logo-shadow {
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
     }
-    .logo-shadow {
-      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
     }
-    .fade-in {
-      animation: fadeIn 1s ease-in;
     }
-    @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
     }
-    .glow-text {
-      text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
     }
-    .dark .glow-text {
-      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
     }
   </style>
 </head>
-<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-500 min-h-screen flex flex-col">
-  <main class="flex-grow flex flex-col items-center justify-center px-4 py-8 fade-in">
-    <div class="ico mb-12 floating">
-      <img src="./favicon.png" alt="logo" class="w-48 h-48 md:w-64 md:h-64 logo-shadow">
     </div>
-    <h1 class="title text-4xl md:text-5xl font-bold mb-6 text-center glow-text">
       UNM-Server
     </h1>
-    <p class="text text-lg md:text-xl text-center max-w-2xl mx-auto mb-12 text-gray-600 dark:text-gray-300">
-      服务已正常运行, 请在SPlayer的".env"配置文件中添加当前网站的域名使用歌曲解灰服务
     </p>
-    <div class="control flex flex-wrap justify-center gap-4 mb-16">
-      <button id="apiTestBtn" class="btn-hover-effect px-6 py-3 bg-white dark:bg-gray-800 border-2 border-gray-800 dark:border-gray-200 rounded-lg font-medium flex items-center hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-gray-900">
-        <i class="fas fa-flask mr-2"></i>
         <span>API 测试</span>
       </button>
-      <button id="apiDocsBtn" class="btn-hover-effect px-6 py-3 bg-white dark:bg-gray-800 border-2 border-gray-800 dark:border-gray-200 rounded-lg font-medium flex items-center hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-gray-900">
-        <i class="fas fa-book mr-2"></i>
         <span>API 文档</span>
       </button>
-      <button id="toggleDarkMode" class="btn-hover-effect px-6 py-3 bg-white dark:bg-gray-800 border-2 border-gray-800 dark:border-gray-200 rounded-lg font-medium flex items-center hover:bg-gray-800 hover:text-white dark:hover:bg-gray-200 dark:hover:text-gray-900">
-        <i id="darkModeIcon" class="fas fa-moon mr-2"></i>
         <span>暗黑模式</span>
       </button>
     </div>
-    <div class="status-card bg-gray-100 dark:bg-gray-800 p-6 rounded-xl shadow-md max-w-2xl w-full mb-12">
-      <div class="flex items-center mb-4">
-        <div class="w-3 h-3 rounded-full bg-green-500 mr-3 animate-pulse"></div>
-        <h3 class="font-semibold text-lg">服务状态</h3>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
-          <p class="text-sm text-gray-500 dark:text-gray-300 mb-1">API 响应</p>
-          <p class="font-medium" id="apiResponseTime">测试中...</p>
         </div>
-        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
-          <p class="text-sm text-gray-500 dark:text-gray-300 mb-1">服务器负载</p>
-          <p class="font-medium" id="serverLoad">测试中...</p>
         </div>
-        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
-          <p class="text-sm text-gray-500 dark:text-gray-300 mb-1">在线用户</p>
-          <p class="font-medium" id="onlineUsers">测试中...</p>
         </div>
       </div>
     </div>
   </main>
-  <footer class="py-8 border-t border-gray-200 dark:border-gray-700">
     <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-gray-900 dark:hover:text-white">
           <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-gray-900 dark:hover:text-white">
           <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-gray-900 dark:hover:text-white">
           <i class="fas fa-envelope text-2xl"></i>
         </a>
       </div>
-      <div class="text-center text-gray-500 dark:text-gray-400 mb-2">
-        Copyright © 2020-2025 imsyy
       </div>
-      <div class="text-center text-gray-500 dark:text-gray-400">
-        Powered by <span class="font-medium text-gray-700 dark:text-gray-200">UNM-Server</span>
       </div>
     </div>
   </footer>
   <script>
-    // Dark mode toggle
-    const toggleDarkMode = document.getElementById('toggleDarkMode');
-    const darkModeIcon = document.getElementById('darkModeIcon');
-    // Check for saved user preference or use system preference
-    if (localStorage.getItem('darkMode') === 'true' ||
-        (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark');
-      darkModeIcon.classList.replace('fa-moon', 'fa-sun');
-    }
-    toggleDarkMode.addEventListener('click', () => {
-      document.documentElement.classList.toggle('dark');
-      if (document.documentElement.classList.contains('dark')) {
-        darkModeIcon.classList.replace('fa-moon', 'fa-sun');
-        localStorage.setItem('darkMode', 'true');
-      } else {
-        darkModeIcon.classList.replace('fa-sun', 'fa-moon');
-        localStorage.setItem('darkMode', 'false');
-      }
-    });
-    // API Test Button
-    document.getElementById('apiTestBtn').addEventListener('click', () => {
-      // Simulate API test
-      document.getElementById('apiResponseTime').textContent = '23ms';
-      document.getElementById('serverLoad').textContent = '12%';
-      document.getElementById('onlineUsers').textContent = '142';
-      // Show notification
-      showNotification('API 测试成功', '所有接口运行正常', 'success');
-    });
-    // API Docs Button
-    document.getElementById('apiDocsBtn').addEventListener('click', () => {
-      // In a real implementation, this would open your API docs
-      showNotification('文档即将打开', '正在跳转到API文档页面', 'info');
-      // window.open('https://your-api-docs-url');
-    });
-    // Notification function
     function showNotification(title, message, type) {
       const notification = document.createElement('div');
-      notification.className = `fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg flex items-start transform transition-all duration-300 translate-x-0 opacity-100 ${type === 'success' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100' : 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100'}`;
-      const icon = document.createElement('i');
-      icon.className = type === 'success' ? 'fas fa-check-circle mr-3 text-xl' : 'fas fa-info-circle mr-3 text-xl';
       const content = document.createElement('div');
       const titleEl = document.createElement('h4');
-      titleEl.className = 'font-bold';
       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);
       document.body.appendChild(notification);
       // Auto remove after 5 seconds
       setTimeout(() => {
         notification.classList.add('translate-x-full', 'opacity-0');
         setTimeout(() => notification.remove(), 300);
       }, 5000);
     }
-    // Simulate initial status check
-    setTimeout(() => {
-      document.getElementById('apiResponseTime').textContent = '18ms';
-      document.getElementById('serverLoad').textContent = '8%';
-      document.getElementById('onlineUsers').textContent = '87';
-    }, 1500);
   </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/unm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </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>