Files
infstarweb/stats.html
zhangyuheng efc592b333 feat: Enhance SEO and accessibility for website
- Updated title and meta tags in index.html for better search engine optimization.
- Added Open Graph and Twitter Card metadata for improved social media sharing.
- Included structured data for the game server in index.html.
- Improved accessibility with a skip link to main content in index.html.
- Enhanced player stats page (stats.html) with additional meta tags and structured data.
- Created robots.txt to manage web crawler access and included sitemap reference.
- Added sitemap.xml with URLs for the homepage and player stats page.
- Removed pigwei.html as it is no longer needed.
2026-02-11 14:35:01 +08:00

462 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>玩家数据统计 - 白鹿原 Minecraft 服务器</title>
<meta name="description" content="查看白鹿原Minecraft服务器的玩家数据统计包括总游戏时长、击杀数、死亡数等排行榜。实时了解服务器玩家活跃度和数据榜单。">
<meta name="keywords" content="Minecraft玩家数据,服务器统计,玩家排行榜,白鹿原数据,MC统计,游戏时长排行">
<meta name="author" content="白鹿原 Minecraft 服务器">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mcpure.lunadeer.cn/stats.html">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mcpure.lunadeer.cn/stats.html">
<meta property="og:title" content="玩家数据统计 - 白鹿原 Minecraft 服务器">
<meta property="og:description" content="查看白鹿原Minecraft服务器的玩家数据统计和排行榜">
<meta property="og:image" content="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png">
<meta property="og:site_name" content="白鹿原 Minecraft 服务器">
<!-- Twitter -->
<meta property="twitter:card" content="summary">
<meta property="twitter:url" content="https://mcpure.lunadeer.cn/stats.html">
<meta property="twitter:title" content="玩家数据统计 - 白鹿原 Minecraft 服务器">
<meta property="twitter:description" content="查看白鹿原Minecraft服务器的玩家数据统计和排行榜">
<meta property="twitter:image" content="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://img.lunadeer.cn">
<link rel="dns-prefetch" href="https://outline.lunadeer.cn">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "玩家数据统计",
"description": "白鹿原Minecraft服务器玩家数据统计和排行榜",
"url": "https://mcpure.lunadeer.cn/stats.html",
"isPartOf": {
"@type": "WebSite",
"name": "白鹿原 Minecraft 服务器",
"url": "https://mcpure.lunadeer.cn/"
}
}
</script>
<style>
/* Specific styles for stats page override/additions */
.stats-hero {
height: 40vh;
min-height: 300px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.player-card {
background: var(--card-bg);
border-radius: var(--radius-medium);
padding: 20px;
text-align: center;
transition: var(--transition);
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
position: relative;
overflow: hidden;
}
.player-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.player-card img {
width: 80px;
height: 80px;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.player-card h3 {
font-size: 16px;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-card .p-uuid {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 10px;
font-family: monospace;
}
/* Leaderboard Cards */
.leaderboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 60px;
}
.lb-card {
background: white;
border-radius: var(--radius-medium);
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.lb-card.gold { border-top: 4px solid #FFD700; }
.lb-card.silver { border-top: 4px solid #C0C0C0; }
.lb-card.bronze { border-top: 4px solid #CD7F32; }
.lb-card.red { border-top: 4px solid #ff3b30; }
.lb-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.lb-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--bg-color);
color: var(--text-primary);
font-size: 20px;
}
.lb-title {
font-weight: 600;
font-size: 18px;
}
.lb-top-player {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
}
.lb-top-player img {
width: 64px;
height: 64px;
border-radius: 8px;
margin-bottom: 10px;
}
.lb-top-data {
font-size: 24px;
font-weight: 700;
color: var(--accent-color);
}
.lb-list {
list-style: none;
}
.lb-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
border-bottom: 1px dashed #eee;
}
.lb-item:last-child { border-bottom: none; }
.lb-rank {
width: 24px;
height: 24px;
background: #eee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
margin-right: 8px;
}
/* Search Box */
.search-container {
max-width: 600px;
margin: 0 auto 40px;
position: relative;
}
.search-input {
width: 100%;
padding: 15px 20px 15px 45px;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 15px;
font-size: 16px;
outline: none;
transition: var(--transition);
background: white;
}
.search-input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}
.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #ccc;
}
/* Stats Modal Override */
.stat-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.stat-label { color: var(--text-secondary); }
.stat-value { font-weight: 600; }
.loading-text {
text-align: center;
padding: 40px;
color: var(--text-secondary);
font-size: 18px;
}
.load-more-container {
text-align: center;
margin-top: 40px;
}
.load-more-btn {
background: white;
border: 1px solid #ddd;
padding: 12px 30px;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: var(--transition);
}
.load-more-btn:hover {
background: #f9f9f9;
transform: translateY(-2px);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="nav-content">
<button class="mobile-toggle" id="mobile-toggle" aria-label="菜单">
<i class="fas fa-bars"></i>
</button>
<div class="logo">
<a href="/">
<img src="https://img.lunadeer.cn/i/2024/04/22/6625ce6c8ddc1.png" alt="白鹿原 Minecraft 服务器 Logo">
</a>
</div>
<div class="nav-links desktop-only">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
<a href="https://mcmap.lunadeer.cn/">地图</a>
<a href="https://mcphoto.lunadeer.cn/">相册</a>
<a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
<a href="/stats.html" style="opacity: 1; font-weight: 600;">数据</a>
</div>
<div class="nav-cta-container">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439/doc/5yqg5ywl5pyn5yqh5zmo-WE4jkTxRmM" class="nav-cta">加入游戏</a>
</div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-links">
<a href="https://outline.lunadeer.cn/s/447e5db6-8af4-468e-b7c5-cdb7b48aa439">文档</a>
<a href="https://mcmap.lunadeer.cn/">地图</a>
<a href="https://mcphoto.lunadeer.cn/">相册</a>
<a href="https://qm.qq.com/q/9izlHDoef6">群聊</a>
<a href="/stats.html" style="font-weight: 600;">数据</a>
</div>
</div>
<!-- Hero Section -->
<header class="hero stats-hero" style="background-image: url('https://img.lunadeer.cn/i/2025/11/26/69267755e14e3.png');">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title">数据中心</h1>
<p class="hero-subtitle">记录每一位冒险者的足迹</p>
</div>
</header>
<!-- Main Content -->
<div class="features-section" style="background: var(--bg-color);">
<div class="container">
<!-- Leaderboards -->
<h2 class="section-header">排行榜</h2>
<div class="leaderboard-grid" id="leaderboard-container">
<!-- 1. Walker -->
<div class="lb-card gold">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-walking"></i></div>
<div class="lb-title">旅行者</div>
</div>
<div class="lb-content" id="lb-walk">
<div class="lb-top-player">加载中...</div>
</div>
</div>
<!-- 2. Placer -->
<div class="lb-card silver">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-cube"></i></div>
<div class="lb-title">搬石大师</div>
</div>
<div class="lb-content" id="lb-placed">
<div class="lb-top-player">加载中...</div>
</div>
</div>
<!-- 3. Miner -->
<div class="lb-card bronze">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-hammer"></i></div>
<div class="lb-title">挖挖机</div>
</div>
<div class="lb-content" id="lb-mined">
<div class="lb-top-player">加载中...</div>
</div>
</div>
<!-- 4. Deaths -->
<div class="lb-card red">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-skull"></i></div>
<div class="lb-title">亡灵</div>
</div>
<div class="lb-content" id="lb-deaths">
<div class="lb-top-player">加载中...</div>
</div>
</div>
<!-- 5. Play Time -->
<div class="lb-card" style="border-top: 4px solid #9b59b6;">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-crown"></i></div>
<div class="lb-title">尊者</div>
</div>
<div class="lb-content" id="lb-playtime">
<div class="lb-top-player">加载中...</div>
</div>
</div>
<!-- 6. Kills -->
<div class="lb-card" style="border-top: 4px solid #e74c3c;">
<div class="lb-header">
<div class="lb-icon"><i class="fas fa-crosshairs"></i></div>
<div class="lb-title">屠夫</div>
</div>
<div class="lb-content" id="lb-kills">
<div class="lb-top-player">加载中...</div>
</div>
</div>
</div>
<!-- Search & Grid -->
<h2 class="section-header">玩家档案</h2>
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<input type="text" id="player-search" class="search-input" placeholder="搜索玩家名称或 UUID...">
</div>
<div class="stats-grid" id="players-grid">
<!-- Players injected here -->
</div>
<div class="load-more-container">
<button id="load-more-btn" class="load-more-btn">加载更多</button>
</div>
<div id="loading-indicator" class="loading-text">正在从服务器获取数据...</div>
</div>
</div>
<!-- Player Details Modal -->
<div id="player-modal" class="modal">
<div class="modal-content" style="max-width: 400px;">
<span class="close-modal">&times;</span>
<div style="text-align: center; margin-bottom: 20px;">
<img id="modal-avatar" src="" alt="Avatar" style="width: 100px; height: 100px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
<h2 id="modal-name" style="margin-top: 10px;">Player Name</h2>
<p id="modal-uuid" style="font-size: 12px; color: #999; font-family: monospace;">UUID</p>
</div>
<div class="stats-list-container">
<div class="stat-row">
<span class="stat-label"><i class="fas fa-walking"></i> 行走距离</span>
<span class="stat-value" id="modal-walk">0 m</span>
</div>
<div class="stat-row">
<span class="stat-label"><i class="fas fa-cube"></i> 放置方块</span>
<span class="stat-value" id="modal-placed">0</span>
</div>
<div class="stat-row">
<span class="stat-label"><i class="fas fa-hammer"></i> 挖掘方块</span>
<span class="stat-value" id="modal-mined">0</span>
</div>
<div class="stat-row">
<span class="stat-label"><i class="fas fa-skull"></i> 死亡次数</span>
<span class="stat-value" id="modal-deaths">0</span>
</div>
<div class="stat-row">
<span class="stat-label"><i class="fas fa-crosshairs"></i> 击杀数量</span>
<span class="stat-value" id="modal-kills">0</span>
</div>
<div class="stat-row">
<span class="stat-label"><i class="fas fa-crown"></i> 游玩时间</span>
<span class="stat-value" id="modal-playtime">0 秒</span>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">白鹿原</div>
<p>&copy; 2025 白鹿原 Minecraft 服务器.</p>
</div>
</div>
</footer>
<script src="stats_script.js"></script>
</body>
</html>