2025-04-19 22:29:36 +08:00

129 lines
4.0 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[在线时间] 玩家在线时间及服务器状态</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>玩家在线时间统计</h1>
<button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</button>
</div>
<div class="warning">数据统计时间开始于此MOD安装时间不包含安装之前的所有数据</div>
<br>
<!-- 更新后的状态卡片 -->
<div class="status-cards">
<div class="status-card">
<h3>在线玩家</h3>
<div class="player-counts">
<div class="count-item">
<span class="count-label">总数:</span>
<span class="count-value" id="total-count">0</span>
</div>
<div class="count-item">
<span class="count-label">玩家:</span>
<span class="count-value" id="whitelist-count">0</span>
</div>
<div class="count-item">
<span class="count-label">假人:</span>
<span class="count-value" id="non-whitelist-count">0</span>
</div>
</div>
</div>
<div class="status-card">
<h3>在线玩家列表</h3>
<div class="player-lists">
<div class="player-list">
<h4>玩家</h4>
<ul class="online-players" id="whitelist-players"></ul>
</div>
<div class="player-list">
<h4>假人</h4>
<ul class="online-players" id="non-whitelist-players"></ul>
</div>
</div>
</div>
</div>
<!-- 服务器状态可视化 -->
<div class="status-section">
<h2>服务器状态</h2>
<div class="status-grid">
<div class="status-item">
<h3>内存使用</h3>
<canvas id="memory-chart"></canvas>
<div class="memory-stats">
<div>已用: <span id="memory-used">0</span> MB</div>
<div>可用: <span id="memory-free">0</span> MB</div>
<div>使用率: <span id="memory-percent">0</span>%</div>
</div>
</div>
<div class="status-item">
<h3>实时性能</h3>
<div class="chart-container">
<div class="metric-display">
<div class="metric">
<span class="metric-label">TPS:</span>
<span class="metric-value" id="tps-value">0.0</span>
</div>
<div class="metric">
<span class="metric-label">MSPT:</span>
<span class="metric-value" id="mspt-value">0.0</span>
</div>
</div>
<div class="chart-wrapper">
<canvas id="performance-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- 玩家时长统计表格 -->
<h2>玩家在线时长 (白名单)</h2>
<div class="controls">
<button id="refresh-btn" class="refresh-btn">
<i class="fas fa-sync-alt"></i>
<span>刷新数据</span>
</button>
<p class="info-note">仅跟踪和显示列入白名单的玩家</p>
</div>
<div class="stats-container">
<table id="stats-table">
<thead>
<tr>
<th>玩家</th>
<th>总计时间</th>
<th>最近 30 天</th>
<th>最近 7 天</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script src="js/app.js"></script>
<footer class="license-footer">
<div class="license-info">
<p>本项目基于 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT许可证</a> 开源</p>
<p>Copyright © 2025 <a href="https://git.branulf.top/BRanulf" target="_blank">BRanulf</a></p>
</div>
</footer>
</body>
</html>