Spaces:

ixingchen
/

unms

Running

App Files Files Community

ixingchen commited on May 3, 2025

Commit

8bcf588

verified ·

1 Parent(s): 47a16fe

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: unms
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 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,526 @@
-<!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>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <style>
+        @keyframes float {
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+        @keyframes pulse {
+            0%,
+            100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+        }
+        .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);
+        }
+        .wave-background {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100px;
+            z-index: 0;
+            overflow: hidden;
+        }
+        .wave {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background-repeat: repeat no-repeat;
+            background-position: 0 bottom;
+            transform-origin: center bottom;
+            opacity: 0.2;
+        }
+        .wave-1 {
+            background-size: 50% 80px;
+            animation: wave 15s linear infinite;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%233b82f6' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+        }
+        .wave-2 {
+            background-size: 50% 100px;
+            animation: wave 10s linear infinite reverse;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%236366f1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+            opacity: 0.15;
+        }
+        .wave-3 {
+            background-size: 50% 60px;
+            animation: wave 20s linear infinite;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%238b5cf6' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+            opacity: 0.1;
+        }
+        @keyframes wave {
+            0% {
+                transform: translateX(0) translateZ(0) scaleY(1);
+            }
+            50% {
+                transform: translateX(-25%) translateZ(0) scaleY(0.8);
+            }
+            100% {
+                transform: translateX(-50%) translateZ(0) scaleY(1);
+            }
+        }
+        .fade-in {
+            animation: fadeIn 1s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .dark .glass-card {
+            background: rgba(15, 23, 42, 0.7);
+            border: 1px solid rgba(30, 41, 59, 0.3);
+        }
+        .btn-hover-effect {
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-hover-effect::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+        .btn-hover-effect:hover::after {
+            transform: translateY(0);
+        }
+        .tech-border {
+            border: 2px solid transparent;
+            background: linear-gradient(#0f172a, #0f172a) padding-box,
+                linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
+        }
+        .dark .tech-border {
+            background: linear-gradient(#1e293b, #1e293b) padding-box,
+                linear-gradient(135deg, #3b82f6, #8b5cf6) border-box;
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        .animate-pulse-slow {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        .social-icon {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .social-icon:hover {
+            transform: translateY(-3px);
+        }
+        /* Tech Card Icons */
+        .tech-icon-card {
+            position: relative;
+            border-radius: 16px;
+            overflow: hidden;
+            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .tech-icon-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1),
+                0 10px 10px -5px rgba(59, 130, 246, 0.04);
+        }
+        .tech-icon-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+        }
+        .tech-icon-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .tech-icon-card:hover .tech-icon-bg {
+            opacity: 1;
+        }
+        .tech-icon-content {
+            position: relative;
+            z-index: 2;
+        }
+        .tech-icon {
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 12px;
+            background: linear-gradient(135deg, #3b82f6, #6366f1);
+            color: white;
+            font-size: 1.25rem;
+            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
+            transition: all 0.3s ease;
+        }
+        .tech-icon-card:hover .tech-icon {
+            transform: scale(1.1);
+            box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
+        }
+    </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 tech-pattern">
+    <div class="wave-background">
+        <div class="wave wave-1"></div>
+        <div class="wave wave-2"></div>
+        <div class="wave wave-3"></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-blue-200 to-purple-200 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="logo" 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-blue-500 dark:bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-medium flex items-center">
+                        <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-blue-500 to-indigo-500 text-white rounded-xl font-medium flex items-center hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300">
+                <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">
+                <i class="fas fa-book text-xl mr-3"></i>
+                <span>API 文档</span>
+            </button>
+            <button id="darkModeToggle"
+                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">
+                <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">
+            <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-4 gap-4">
+                <div class="tech-icon-card glass-card p-6 rounded-xl relative overflow-hidden group">
+                    <div class="tech-icon-bg"></div>
+                    <div class="tech-icon-content">
+                        <div class="flex items-center mb-3">
+                            <div class="tech-icon mr-3">
+                                <i class="fas fa-bolt"></i>
+                            </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-blue-500" style="width: 80%"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="tech-icon-card glass-card p-6 rounded-xl relative overflow-hidden group">
+                    <div class="tech-icon-bg"></div>
+                    <div class="tech-icon-content">
+                        <div class="flex items-center mb-3">
+                            <div class="tech-icon mr-3">
+                                <i class="fas fa-server"></i>
+                            </div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-300">服务器负载</p>
+                        </div>
+                        <p class="font-bold text-3xl">12%</p>
+                        <div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-green-500" style="width: 12%"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="tech-icon-card glass-card p-6 rounded-xl relative overflow-hidden group">
+                    <div class="tech-icon-bg"></div>
+                    <div class="tech-icon-content">
+                        <div class="flex items-center mb-3">
+                            <div class="tech-icon mr-3">
+                                <i class="fas fa-database"></i>
+                            </div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-300">缓存命中</p>
+                        </div>
+                        <p class="font-bold text-3xl">87%</p>
+                        <div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-purple-500" style="width: 87%"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="tech-icon-card glass-card p-6 rounded-xl relative overflow-hidden group">
+                    <div class="tech-icon-bg"></div>
+                    <div class="tech-icon-content">
+                        <div class="flex items-center mb-3">
+                            <div class="tech-icon mr-3">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                            <p class="text-sm font-medium text-gray-500 dark:text-gray-300">运行时间</p>
+                        </div>
+                        <p class="font-bold text-3xl" id="running-time">12d 4h</p>
+                        <div class="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                            <div class="h-full bg-indigo-500" style="width: 100%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="w-full max-w-7xl glass-card p-6 rounded-2xl mb-12">
+            <h3 class="text-xl font-semibold mb-4 gradient-text">服务功能</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div
+                    class="tech-icon-card flex items-start p-4 rounded-lg hover:bg-white/10 dark:hover:bg-gray-800/50 transition-all duration-300">
+                    <div class="tech-icon-bg"></div>
+                    <div class="flex-shrink-0 mr-4">
+                        <div class="tech-icon">
+                            <i class="fas fa-music"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-medium mb-1">歌曲解灰</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">解锁灰色不可播放歌曲，享受完整音乐体验</p>
+                    </div>
+                </div>
+                <div
+                    class="tech-icon-card flex items-start p-4 rounded-lg hover:bg-white/10 dark:hover:bg-gray-800/50 transition-all duration-300">
+                    <div class="tech-icon-bg"></div>
+                    <div class="flex-shrink-0 mr-4">
+                        <div class="tech-icon bg-gradient-to-br from-purple-500 to-pink-500">
+                            <i class="fas fa-bolt"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-medium mb-1">高速缓存</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">优化缓存机制，提升音乐加载速度</p>
+                    </div>
+                </div>
+                <div
+                    class="tech-icon-card flex items-start p-4 rounded-lg hover:bg-white/10 dark:hover:bg-gray-800/50 transition-all duration-300">
+                    <div class="tech-icon-bg"></div>
+                    <div class="flex-shrink-0 mr-4">
+                        <div class="tech-icon bg-gradient-to-br from-green-500 to-teal-500">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-medium mb-1">安全加密</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">数据传输加密，保护用户隐私</p>
+                    </div>
+                </div>
+                <div
+                    class="tech-icon-card flex items-start p-4 rounded-lg hover:bg-white/10 dark:hover:bg-gray-800/50 transition-all duration-300">
+                    <div class="tech-icon-bg"></div>
+                    <div class="flex-shrink-0 mr-4">
+                        <div class="tech-icon bg-gradient-to-br from-yellow-500 to-orange-500">
+                            <i class="fas fa-plug"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="font-medium mb-1">多平台支持</h4>
+                        <p class="text-sm 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-blue-500 dark:hover:text-blue-400">
+                    <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-blue-500 dark:hover:text-blue-400">
+                    <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-blue-500 dark:hover:text-blue-400">
+                    <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-blue-500 dark:hover:text-blue-400">
+                    <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 text-blue-500 dark:text-blue-400">imsyy</span>
+            </div>
+            <div class="text-center text-gray-500 dark:text-gray-400 text-xs">
+                Powered by <span class="font-medium text-blue-500 dark:text-blue-400">UNM-Server</span> |
+                Version <span id="footer-version">?.?.?</span>
+            </div>
+            <div class="text-center text-gray-500 dark:text-gray-400 text-xs mt-2">
+                站点已运行：<span id="running-time" class="font-medium text-blue-500 dark:text-blue-400">计算中...</span>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Dark mode toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const darkModeIcon = document.getElementById('darkModeIcon');
+        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');
+        }
+        darkModeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            const isDark = document.documentElement.classList.contains('dark');
+            localStorage.setItem('darkMode', isDark);
+            if (isDark) {
+                darkModeIcon.classList.replace('fa-moon', 'fa-sun');
+            } else {
+                darkModeIcon.classList.replace('fa-sun', 'fa-moon');
+            }
+        });
+        // Set current year
+        document.getElementById('current-year').textContent = new Date().getFullYear();
+        // Simulate API response time
+        setTimeout(() => {
+            document.getElementById('apiResponseTime').textContent = '32ms';
+        }, 1500);
+        // Simulate running time
+        setTimeout(() => {
+            document.getElementById('running-time').textContent = '0d 0h 5m';
+        }, 1000);
+    </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/unms" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ 还能更美观优雅，更有层次感？