<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>东风口 | 私有服务门户</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 太极旋转动画 匀速循环 */
@keyframes rotateTaiji {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
body {
background-color: #0f172a;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 太极外层容器，绑定旋转 */
.taiji-wrap {
width: 280px;
height: 280px;
animation: rotateTaiji 12s linear infinite;
}
/* 高精度SVG太极，圆弧平滑分割，无锯齿 */
.taiji-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 12px rgba(255,255,255,0.15));
}
/* 导航按钮过渡 */
.nav-btn {
transition: all 0.25s ease;
}
.nav-btn:hover {
transform: translateY(-2px);
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="w-full py-5 px-6 bg-slate-800 shadow-lg">
<nav class="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
<h1 class="text-white text-xl font-bold">☁️ 东风口 私有服务中心</h1>
<div class="flex gap-3 flex-wrap">
<a href=" " target="_blank" class="nav-btn px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg">东风口</a >
<a href="https://你的域名/admin" target="_blank" class="nav-btn px-5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg">后台管理面板</a >
<a href="https://你的域名/file" target="_blank" class="nav-btn px-5 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-lg">私人文件云盘</a >
</div>
</nav>
</header>
<!-- 居中旋转精致太极图 -->
<main class="flex-1 flex items-center justify-center">
<div class="taiji-wrap">
<!-- SVG原生标准太极，完美圆弧阴阳分割线，细腻无毛刺 -->
<svg class="taiji-svg" viewBox="0 0 1000 1000">
<!-- 外圈大圆 -->
<circle cx="500" cy="500" r="490" fill="#fff" stroke="#eee" stroke-width="6"/>
<!-- 黑色阴鱼（圆弧分割边界） -->
<path d="M500,10 A490,490 0 0,1 500,990 A245,245 0 0,0 500,500 A245,245 0 0,1 500,10 Z" fill="#000"/>
<!-- 阴鱼白点 -->
<circle cx="500" cy="255" r="70" fill="#fff"/>
<!-- 阳鱼黑点 -->
<circle cx="500" cy="745" r="70" fill="#000"/>
</svg>
</div>
</main>
<!-- 底部页脚 -->
<footer class="py-6 text-center text-slate-400 text-sm">
<p>Cloudflare域名静态门户 | 东风口 私有存储服务</p >
</footer>
</body>
</html>f