|
|
<!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-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> |
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('current-year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('apiResponseTime').textContent = '32ms'; |
|
|
}, 1500); |
|
|
|
|
|
|
|
|
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> |
