<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script defer src="https://umami.mmmi.cc/script.js" data-website-id="52ba1994-0280-4659-a168-b63bffa8617f"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghost Green Theme - 医学级心跳 + 双圆眼镜 GN启动</title>
<style>
/* ========== 基础样式（保持不变）========== */
body, body * {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
font-style: normal !important;
}
:root {
--ghost-primary: #66ffb3;
--ghost-secondary: #99ffcc;
--ghost-bg: #0a1a15;
--ghost-text: #e0fff5;
--ghost-accent: #00cc99;
--exia-primary: #66ffb3;
--exia-deep: #00cc88;
--main-width: 1536px;
}
body {
background-color: var(--ghost-bg) !important;
color: var(--ghost-text) !important;
margin: 0; padding: 0;
overflow-x: hidden;
position: relative;
}
@keyframes medical-scale {
0%,100%{transform:scale(1)}
8%{transform:scale(1.02)}
16%{transform:scale(0.99)}
24%{transform:scale(1.015)}
32%,100%{transform:scale(1)}
}
@keyframes medical-glow {
0%,100%{text-shadow:0 0 8px rgba(102,255,179,.6)}
10%{text-shadow:0 0 18px rgba(102,255,179,.95)}
20%{text-shadow:0 0 10px rgba(102,255,179,.7)}
28%{text-shadow:0 0 15px rgba(102,255,179,.85)}
}
header .flex.items-center.gap-2.text-2xl.font-bold span, h3 {
color: var(--ghost-primary)!important;
display: inline-block;
animation: medical-scale 1.6s ease-in-out infinite,
medical-glow 1.6s ease-in-out infinite!important;
}
.grid.w-full.gap-2.text-center.items-center.py-3 label { color: var(--ghost-secondary)!important; }
.flex.items-center.gap-1 span { color: var(--ghost-primary)!important; }
.flex.items-center.justify-between span { color: var(--ghost-secondary)!important; text-shadow:0 0 4px rgba(153,255,204,.3)!important; }
.flex.justify-between.text-xs span { color: var(--ghost-accent)!important; text-shadow:0 0 5px rgba(0,204,153,.5)!important; }
.bg-white,.bg-gray-50,.rounded-lg,.shadow{
background:rgba(10,26,21,.7)!important;
border:1px solid rgba(102,255,179,.3)!important;
box-shadow:0 0 15px rgba(102,255,179,.2)!important;
position: relative;
z-index: 10;
}
progress,.progress-bar{accent-color:var(--ghost-primary)!important;}
.max-w-screen-2xl { max-width: var(--main-width); }
/* ==================== GN太阳炉 – 双圆眼镜版 ==================== */
.exia-loading-overlay{
position:fixed;inset:0;
background:rgba(0,10,20,1);z-index:99999;
display:flex;align-items:center;justify-content:center;
opacity:1;transition:opacity .6s ease-out;
}
.exia-loading-box{text-align:center;position:relative}
.exia-loading-gn-wrapper{
width:180px;height:120px;margin:0 auto 20px;
display:flex;align-items:center;justify-content:center;gap:5px;
position:relative;
}
.exia-eye{
width:70px;height:70px;
border:4px solid var(--exia-primary);
border-radius:50%;
position:relative;
animation:exiaRotate 3s linear infinite;
box-shadow:0 0 30px rgba(0,255,136,.5);
}
.exia-pupil{
position:absolute;inset:0;
width:20px;height:20px;
margin:auto;
background:var(--exia-primary);
border-radius:50%;
animation:exiaPulse 1.5s ease-in-out infinite alternate;
box-shadow:0 0 25px var(--exia-primary);
}
.exia-inner-pupil {
position: absolute;
inset: 0;
width: 10px;
height: 10px;
margin: auto;
background: var(--exia-deep);
border-radius: 50%;
animation: exiaPulse 1.5s ease-in-out infinite alternate;
box-shadow: 0 0 15px var(--exia-deep), 0 0 25px rgba(0, 204, 136, 0.7);
z-index: 2;
}
@keyframes exiaRotate{ from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes exiaPulse{
from{opacity:.6;transform:scale(.8);box-shadow:0 0 25px var(--exia-primary)}
to{opacity:1;transform:scale(1.1);box-shadow:0 0 40px var(--exia-primary),0 0 60px rgba(0,255,136,.6)}
}
/* 5秒进度条 */
.exia-progress-container {
width: 260px;
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
margin: 18px auto 12px;
box-shadow: 0 0 10px rgba(102,255,179,.3);
}
.exia-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #00cc88, var(--exia-primary));
border-radius: 3px;
box-shadow: 0 0 15px rgba(102,255,179,.8);
transition: width 0.1s linear;
}
</style>
</head>
<body>
<!-- 双圆眼镜 GN 启动动画 + 进度条 -->
<div class="exia-loading-overlay" id="exia-loader">
<div class="exia-loading-box">
<div class="exia-loading-gn-wrapper">
<div class="exia-eye exia-eye-left">
<div class="exia-pupil">
<div class="exia-inner-pupil"></div>
</div>
</div>
<div class="exia-eye exia-eye-right">
<div class="exia-pupil">
<div class="exia-inner-pupil"></div>
</div>
</div>
</div>
<!-- 5秒进度条 -->
<div class="exia-progress-container">
<div class="exia-progress-bar" id="exia-progress"></div>
</div>
<p style="color:var(--ghost-primary);margin:0;font-weight:bold;letter-spacing:1px;">
肉壶正在准备中 裤子可以先脱了
</p>
</div>
</div>
<script>
// 强制至少3秒，最多5秒 + 进度条
(function () {
const loader = document.getElementById('exia-loader');
const progressBar = document.getElementById('exia-progress');
const MIN_TIME = 1000; // 至少显示3秒
const MAX_TIME = 4000; // 最多显示5秒
const startTime = Date.now();
// 进度条：5秒内从0走到100%
const updateProgress = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min((elapsed / MAX_TIME) * 100, 100);
progressBar.style.width = progress + '%';
if (elapsed < MAX_TIME) {
requestAnimationFrame(updateProgress);
} else {
progressBar.style.width = '100%';
}
};
updateProgress();
// 统一的隐藏函数
const hideLoader = () => {
progressBar.style.width = '100%';
loader.style.opacity = '0';
setTimeout(() => loader.remove(), 600);
};
// 记录页面是否真正加载完成
let loadFired = false;
window.addEventListener('load', () => {
loadFired = true;
const elapsed = Date.now() - startTime;
if (elapsed >= MIN_TIME) {
// 已经超过3秒，直接隐藏
hideLoader();
} else {
// 还没到3秒，补足剩下的时间
setTimeout(hideLoader, MIN_TIME - elapsed);
}
});
// 保险：5秒后强制关闭（防止load事件永远不触发）
setTimeout(() => {
if (loader.parentElement) {
hideLoader();
}
}, MAX_TIME);
})();
</script>
</body>
</html>
