<!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 心跳 + 平滑进场 + 完整IP底栏（无IPv6）</title>
<style>
:root {
--theme-primary: #66ffb3;
--theme-secondary: #99ffcc;
--theme-bg: #0a1a15;
--theme-text: #e0fff5;
--theme-accent: #00cc99;
--main-width: 1536px;
}
body, body * {font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;}
body {
background-color: var(--theme-bg) !important;
color: var(--theme-text) !important;
margin: 0; padding: 0; overflow-x: hidden;
position: relative; min-height: 100vh;
padding-bottom: 90px; /* 预留底栏空间 */
transition: padding-bottom 0.3s ease;
}
.max-w-screen-2xl { max-width: var(--main-width); }
/* 心跳动画 */
@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(--theme-primary)!important; display: inline-block;
animation: medical-scale 1.6s ease-in-out infinite, medical-glow 1.6s ease-in-out infinite!important;
}
/* 底栏样式 */
#ip-footer {
position: fixed; bottom: 0; left: 0; width: 100%;
background: var(--theme-bg);
border-top: 1px solid var(--theme-primary);
z-index: 9999; padding: 10px 0;
text-align: center; box-shadow: 0 0 20px rgba(102,255,179,0.3);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: all 0.4s ease;
font-size: 15px;
}
#ip-footer.ready {opacity: 1; visibility: visible; transform: translateY(0);}
#ip-footer span {color: var(--theme-primary); font-weight: 500; margin: 0 12px; letter-spacing: 0.5px; cursor: default;}
#ip-footer .divider {display: inline-block; width: 1px; height: 14px; background: var(--theme-primary); opacity: 0.6; vertical-align: middle; margin: 0 11px;}
#ip-footer .copyable {cursor: pointer;}
#ip-footer .copyable:hover {text-shadow: 0 0 8px rgba(102,255,179,0.8);}
@media (max-width: 768px) {
#ip-footer {padding: 6px 0; font-size: 11px;}
#ip-footer span {margin: 0 6px;}
}
</style>
</head>
<body>
<!-- 1秒黑场平滑进场 -->
<div id="intro-fade-overlay" style="position:fixed;inset:0;background:#000;z-index:99999;transition:opacity 1s ease-out;"></div>
<!-- 底栏（已移除 IPv6） -->
<div id="ip-footer">
<div style="display:inline-block;">
<span id="runtime">已运行：计算中...</span>
<span id="ipv4" class="copyable">IPv4: 获取中...</span>
<span id="location">位置: 获取中...</span>
</div>
</div>
<script>
// 1. 平滑进场
window.addEventListener('load', () => {
const overlay = document.getElementById('intro-fade-overlay');
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 1100);
});
// 2. 动态设置 body padding-bottom
const footer = document.getElementById('ip-footer');
function setPadding() {
requestAnimationFrame(() => {
document.body.style.paddingBottom = (footer.offsetHeight + 8) + 'px';
});
}
// 3. 国家旗帜
const countryCodeToEmoji = code => code ? String.fromCodePoint(...code.toUpperCase().split('').map(c => 0x1F1E6 + c.charCodeAt() - 65)) : '🌐';
// 4. 运行时间
const startTime = new Date("2025-10-01T08:00:00");
const runtimeSpan = document.getElementById('runtime');
function updateRuntime() {
const diff = Date.now() - startTime;
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
runtimeSpan.textContent = `已运行：${d}天 `;
}
updateRuntime();
setInterval(updateRuntime, 1000);
// 5. 获取 IP 信息（只保留 IPv4）
fetch('https://ipwho.is/?lang=zh-CN')
.then(r => r.json())
.then(data => {
// IPv4
const ipv4Span = document.getElementById('ipv4');
const ipv4 = data.ip || '未知';
ipv4Span.textContent = `IPv4: ${ipv4}`;
ipv4Span.title = '点击复制 IPv4';
ipv4Span.onclick = () => {
navigator.clipboard.writeText(ipv4);
ipv4Span.textContent = 'IPv4: 已复制!';
setTimeout(() => ipv4Span.textContent = `IPv4: ${ipv4}`, 1500);
};
// 位置 + 旗帜
const flag = countryCodeToEmoji(data.country_code);
document.getElementById('location').innerHTML = `${flag} ${data.city || '未知城市'} · ${data.connection?.isp || '未知运营商'}`;
// 加载完成 → 显示底栏
footer.classList.add('ready');
setPadding();
})
.catch(() => {
document.getElementById('ipv4').textContent = 'IPv4: 获取失败';
document.getElementById('location').textContent = '位置: 获取失败';
footer.classList.add('ready');
setPadding();
});
// 6. 不蒜子访客统计（可选）
const busuanziScript = document.createElement('script');
busuanziScript.src = '//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js';
busuanziScript.async = true;
document.body.appendChild(busuanziScript);
// 7. 窗口变化重新计算 padding
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(setPadding, 100);
});
</script>
</body>
</html>
