webplan3/index.html at main · 90257550/webplan3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CADTeam Minecraft 服务器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #1a1a1a;
            color: #ffffff;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        .header {
            margin-bottom: 30px;
        }
        .server-status {
            background-color: #2d2d2d;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .online {
            color: #4CAF50;
        }
        .offline {
            color: #F44336;
        }
        .player-list {
            background-color: #2d2d2d;
            border-radius: 10px;
            padding: 20px;
        }
        .player {
            display: inline-block;
            margin: 10px;
        }
        .player-avatar {
            width: 64px;
            height: 64px;
            background-color: #3d3d3d;
            border-radius: 5px;
        }
        .connect-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 20px 0;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .connect-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>欢迎来到 CADTeam Minecraft 服务器</h1>
        <p>版本: Java版 1.20.1 | IP: <strong>cadteam.com.cn</strong></p>
    </div>

    <div class="server-status">
        <h2>服务器状态: <span id="status" class="offline">检查中...</span></h2>
        <p>在线玩家: <span id="player-count">0</span>/<span id="max-players">20</span></p>
    </div>

    <button class="connect-btn" onclick="copyIP()">点击复制服务器IP (cadteam.net)</button>

    <div class="player-list">
        <h3>在线玩家</h3>
        <div id="players-container"></div>
    </div>

    <script>
        const SERVER_IP = "cadteam.com.cn"; // 使用你的域名

        async function checkServerStatus() {
            try {
                const response = await fetch(`https://api.mcsrvstat.us/2/${SERVER_IP}`);
                const data = await response.json();

                const statusElement = document.getElementById('status');
                const playerCountElement = document.getElementById('player-count');
                const maxPlayersElement = document.getElementById('max-players');
                const playersContainer = document.getElementById('players-container');

                if (data.online) {
                    statusElement.textContent = "在线";
                    statusElement.className = "online";
                    playerCountElement.textContent = data.players.online;
                    maxPlayersElement.textContent = data.players.max;

                    if (data.players.list) {
                        playersContainer.innerHTML = data.players.list.map(player => `
                            <div class="player">
                                <div class="player-avatar">
                                    <img src="https://mc-heads.net/avatar/${player}/64" alt="${player}">
                                </div>
                                <p>${player}</p>
                            </div>
                        `).join('');
                    } else {
                        playersContainer.innerHTML = "<p>没有在线玩家</p>";
                    }
                } else {
                    statusElement.textContent = "离线";
                    statusElement.className = "offline";
                    playerCountElement.textContent = "0";
                    playersContainer.innerHTML = "<p>服务器当前离线</p>";
                }
            } catch (error) {
                console.error("检查服务器状态时出错:", error);
                document.getElementById('status').textContent = "检查状态失败";
            }
        }

        function copyIP() {
            navigator.clipboard.writeText(SERVER_IP)
                .then(() => alert("已复制服务器IP: cadteam.net"))
                .catch(err => alert("复制失败: " + err));
        }

        checkServerStatus();
        setInterval(checkServerStatus, 60000);
    </script>
</body>
</html>