站长自己写的网站

server.柯基.cn
可以查看服务器的MOTD和服务端类型
听说你想要源码

index.html

<!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>
    <!-- 添加 favicon -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5e642; /* 默认背景颜色 */
            transition: background-color 0.3s;
            position: relative;
        }
        .container {
            background-color: #f5e642;
            background-image: url('https://example.com/moon-surface.png'); /* 替换为月球表面图像的URL */
            background-size: cover;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 600px;
            width: 100%;
            box-sizing: border-box;
            position: relative;
            transition: background-color 0.3s;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 30px;
            margin-bottom: 15px;
            font-size: 16px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 30px;
            width: 100%;
            cursor: pointer;
            font-size: 16px;
            box-sizing: border-box;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .server-info {
            display: flex;
            background-color: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            text-align: left;
            box-sizing: border-box;
        }
        .server-info img {
            width: 64px;
            height: 64px;
            margin-right: 20px;
            border-radius: 50%; /* 设置圆形 */
        }
        .server-details {
            flex-grow: 1;
        }
        .server-details p {
            margin: 5px 0;
        }
        .motd {
            margin-top: 10px;
            color: #555;
        }
        .status {
            font-weight: bold;
        }
        .status.online {
            color: green;
        }
        .status.offline {
            color: red;
        }
        /* 月亮按钮样式 */
        .moon-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #ffeb3b;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: background-color 0.3s;
            z-index: 10;
        }
        /* 柯基博客图标样式 */
        .blog-icon {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: #f5e642;
            border: 1px solid #ddd;
            border-radius: 15px;
            padding: 10px 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: #333;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .blog-icon a {
            text-decoration: none;
            color: #333;
        }
        .blog-icon a:hover {
            text-decoration: underline;
        }
                /* 柯基博客图标样式 */
        /* 夜间模式 */
        .night-mode {
            background-color: #333;
        }
        .night-mode .container {
            background-color: #444;
            background-image: none;
            color: white;
        }
        .night-mode input[type="text"] {
            background-color: #555;
            color: white;
        }
        .night-mode input[type="submit"] {
            background-color: #666;
            color: white;
        }
        .night-mode .server-info {
            background-color: #666;
        }
        .night-mode .moon-toggle {
            background-color: #666;
            color: white;
        }
        .night-mode .blog-icon {
            background-color: #444;
            color: white;
        }
    </style>
</head>
<body class="night-mode"> <!-- 默认启用夜间模式 -->
    <div class="container">
        <h1>Minecraft服务器状态检测</h1>
        <input type="text" id="serverAddress" placeholder="请输入需要检测的服务器地址">
        <input type="submit" id="checkServer" value="检测服务器状态">

        <div id="serverInfo" class="server-info" style="display: none;">
            <img id="serverLogo" src="" alt="服务器Logo">
            <div class="server-details">
                <p class="status" id="onlineStatus"></p>
                <p id="playerCount"></p>
                <p id="versionInfo"></p> <!-- 添加服务端版本信息 -->
                <div class="motd" id="motd"></div>
            </div>
        </div>

        <!-- 月亮按钮 -->
        <button class="moon-toggle" id="toggleMode">🌙</button>
    </div>

    <!-- 柯基博客图标 -->
    <div class="blog-icon">
        <a href="https://柯基.cn" target="_blank">柯基博客</a>
    </div>

    <script>
        document.getElementById('checkServer').addEventListener('click', function() {
            const serverAddress = document.getElementById('serverAddress').value.trim();
            if (serverAddress) {
                fetch(`https://api.mcsrvstat.us/2/${encodeURIComponent(serverAddress)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.online) {
                            document.getElementById('serverLogo').src = data.icon || '';
                            document.getElementById('onlineStatus').textContent = "在线";
                            document.getElementById('onlineStatus').className = "status online";
                            document.getElementById('playerCount').textContent = `在线人数: ${data.players.online}/${data.players.max}`;
                            document.getElementById('versionInfo').textContent = `服务端版本: ${data.version}`;
                            document.getElementById('motd').innerHTML = data.motd.html.join('<br>');
                        } else {
                            document.getElementById('serverLogo').src = "";
                            document.getElementById('onlineStatus').textContent = "离线";
                            document.getElementById('onlineStatus').className = "status offline";
                            document.getElementById('playerCount').textContent = "";
                            document.getElementById('versionInfo').textContent = "";
                            document.getElementById('motd').textContent = "";
                        }
                        document.getElementById('serverInfo').style.display = 'flex';
                    })
                    .catch(() => {
                        document.getElementById('serverInfo').style.display = 'none';
                        alert('无法获取服务器信息');
                    });
            } else {
                alert('请输入服务器地址');
            }
        });

        // 切换日夜模式
        document.getElementById('toggleMode').addEventListener('click', function() {
            document.body.classList.toggle('night-mode');
        });
    </script>

</body>
</html>