Spaces:

ixingchen
/

unm

Running

App Files Files Community

ixingchen commited on Apr 22, 2025

Commit

56cae6a

verified ·

1 Parent(s): 2fd2323

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +229 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Unm
-emoji: 😻
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: unm
+emoji: 🐳
+colorFrom: gray
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,229 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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" />
+  <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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ 页面更美观高级大气上档次，符合项目，对应的交互动画icon，科技感，卡片风格