SPKsmp-Web/status.html at main · TNTsky/SPKsmp-Web · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="zh-TW">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Sparkle 花火伺服器 - 在線狀態</title>
	<link rel="icon" href="icon.png" type="image/png" />
	<meta name="description" content="查看 SPKsmp 伺服器的當前狀態，包括生存服和創造服的在線狀態和版本信息。" />
	<link rel="stylesheet" href="styles.css" />
	<!-- Open Graph -->
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://www.spksmp.top/status" />
	<meta property="og:title" content="Sparkle 花火伺服器 - 在線狀態" />
	<meta property="og:description" content="查看 SPKsmp 伺服器的當前狀態，包括生存服和創造服的在線狀態和版本信息。" />
	<meta property="og:image" content="https://sr-api.sfirew.com/server/SPKsmp.top:30100/icon.png" />
	<!-- 背景圖與導覽列 -->
	<script src="js/bg.js"></script>
	<script src="js/nav.js"></script>
	<style>
		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		.server-container {
			display: grid;
			grid-template-columns: 1fr;
			gap: 20px;
		}

		.server-box {
			background-color: rgba(52, 55, 82, 0.6);
			padding: 15px;
			border-radius: 15px;
			backdrop-filter: blur(10px);
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
			animation: fadeIn 1s ease-in-out;
		}

		.server-box h2 {
			color: #82aaff;
			margin-top: 0;
			padding-bottom: 10px;
			text-transform: uppercase;
			font-size: 1.5em;
			border-bottom: 2px solid #3d5afe;
		}

		.version-boxes {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-bottom: 15px;
		}

		.version-box {
			background-color: rgba(62, 65, 96, 0.6);
			padding: 10px;
			border-radius: 15px;
			backdrop-filter: blur(10px);
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
			animation: fadeIn 1s ease-in-out;
		}

		.version-box h3 {
			margin: 0 0 10px 0;
			font-size: 1.2em;
		}

		.status-item {
			margin-bottom: 5px;
			font-size: 1em;
		}

		.status-item span {
			font-weight: bold;
			color: #a2d2ff;
		}
	</style>
</head>

<body>
	<div class="background-overlay"></div>
	<div class="container">
		<div id="nav-placeholder"></div>
		<h1>Server Status</h1>
		<div class="content">
			<div class="server-container">
				<div class="server-box">
					<h2>生存服</h2>
					<div class="version-boxes">
						<div class="version-box">
							<h3>Java 版</h3>
							<div class="status-item">
								狀態: <span id="java-status">載入中...</span>
							</div>
							<div class="status-item">
								版本: <span id="java-version">載入中...</span>
							</div>
						</div>
						<div class="version-box">
							<h3>BE 版</h3>
							<div class="status-item">
								狀態: <span id="be-status">載入中...</span>
							</div>
							<div class="status-item">
								版本: <span id="be-version">載入中...</span>
							</div>
						</div>
					</div>
					<div class="status-item">
						玩家: <span id="players">載入中...</span>
					</div>
				</div>
				<div class="server-box" id="creative-server">
					<h2>創造服</h2>
					<div class="version-boxes">
						<div class="version-box">
							<h3>Java 版</h3>
							<div class="status-item">
								狀態: <span id="creative-java-status">載入中...</span>
							</div>
							<div class="status-item">
								版本: <span id="creative-java-version">載入中...</span>
							</div>
						</div>
						<div class="version-box">
							<h3>BE 版</h3>
							<div class="status-item">
								狀態: <span id="creative-be-status">載入中...</span>
							</div>
							<div class="status-item">
								版本: <span id="creative-be-version">載入中...</span>
							</div>
						</div>
					</div>
					<div class="status-item">
						玩家: <span id="creative-players">載入中...</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/status.js"></script>
<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "befae6a84fff44a9a9b5d707f353ba62"}'></script><!-- End Cloudflare Web Analytics -->
 <!-- 如果狀態不對，那就是API有問題，請檢查以下網站是否正常運作：
  	https://wiki.blackbe.work/OpenAPI/tools.html
											by 薯条 2024/07/12 -->
</html>