📄 Source: about.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once __DIR__ . '/vendor/autoload.php';
use xPaw\MinecraftPing;
use xPaw\MinecraftPingException;
$server_ip = '127.0.0.1';
$server_port = 25565;
function getServerStatus() {
global $server_ip, $server_port;
try {
$Query = new MinecraftPing($server_ip, $server_port, 3);
$info = $Query->Query();
$Query->Close();
return [
'online' => true,
'players' => $info['players']['online'] ?? 0,
'max_players' => $info['players']['max'] ?? 0,
'version' => $info['version']['name'] ?? '1.21.1',
'players_list' => $info['players']['sample'] ?? []
];
} catch (MinecraftPingException $e) {
return [
'online' => false,
'players' => 0,
'max_players' => 0,
'version' => 'Offline',
'players_list' => []
];
}
}
$server = getServerStatus();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CreateCraft - About</title>
<link rel="stylesheet" href="style.css">
<style>
/* Additional styles for about page */
.server-status-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 25px;
padding: 10px;
}
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.status-dot.online {
background-color: #4caf50;
animation: pulse 1.5s ease-in-out infinite;
}
.status-dot.offline {
background-color: #f44336;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.status-title {
font-size: 18px;
font-weight: bold;
color: #5a9e4e;
}
.status-title.offline {
color: #f44336;
}
/* Player count display */
.player-stats {
text-align: center;
padding: 15px;
margin: 10px 0;
}
.player-number {
font-size: 56px;
font-weight: bold;
color: #5a9e4e;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
line-height: 1;
}
.player-max {
font-size: 16px;
opacity: 0.8;
margin-top: 5px;
}
/* Version line */
.version-line {
text-align: center;
padding: 8px;
margin: 10px 0;
font-size: 13px;
opacity: 0.7;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Player list - improved readability */
.players-section {
margin-top: 20px;
}
.players-toggle {
cursor: pointer;
color: #5a9e4e;
text-align: center;
padding: 10px;
background: rgba(90, 158, 78, 0.15);
border-radius: 8px;
transition: background 0.3s;
}
.players-toggle:hover {
background: rgba(90, 158, 78, 0.25);
}
.players-container {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.player-badge {
background: rgba(90, 158, 78, 0.85);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
backdrop-filter: blur(4px);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.no-players-msg {
text-align: center;
padding: 15px;
color: rgba(255,255,255,0.6);
font-style: italic;
}
/* Quick links - matching original */
.quick-links-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 15px;
justify-content: center;
}
.quick-links-nav a {
color: white;
text-decoration: none;
display: inline-block;
padding: 8px 20px;
background: rgba(90, 158, 78, 0.8);
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
}
.quick-links-nav a:hover {
background: rgba(90, 158, 78, 1);
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 768px) {
.player-number {
font-size: 44px;
}
.status-title {
font-size: 16px;
}
.player-badge {
padding: 5px 12px;
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="video-background">
<video autoplay muted loop playsinline id="bgVideo">
<source src="videos/timelapse.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="content">
<header>
<h1>CreateCraft: <strong>About</strong></h1>
<p><a href="demo.php">DEMO</a></p>
</header>
<main>
<!-- Server Status Card -->
<div class="card">
<!-- Status line -->
<div class="server-status-line">
<div class="status-dot <?php echo $server['online'] ? 'online' : 'offline'; ?>"></div>
<div class="status-title <?php echo $server['online'] ? 'online' : 'offline'; ?>">
CreateCraft is <?php echo $server['online'] ? 'Online' : 'Offline'; ?>
</div>
</div>
<?php if ($server['online']): ?>
<!-- Player count -->
<div class="player-stats">
<div class="player-number" id="playerCount"><?php echo $server['players']; ?></div>
<div class="player-max">Players Online / <?php echo $server['max_players']; ?></div>
</div>
<!-- Version -->
<div class="version-line">
Running: <?php echo htmlspecialchars($server['version']); ?>
</div>
<!-- Player list section -->
<div class="players-section">
<div class="players-toggle" onclick="togglePlayers()">
📋 <?php echo !empty($server['players_list']) ? count($server['players_list']) . ' player' . (count($server['players_list']) != 1 ? 's' : '') . ' online' : 'No players online'; ?>
</div>
<div id="playersContainer" class="players-container" style="<?php echo !empty($server['players_list']) ? 'display: flex;' : 'display: none;'; ?>">
<?php foreach ($server['players_list'] as $player): ?>
<span class="player-badge"><?php echo htmlspecialchars($player['name']); ?></span>
<?php endforeach; ?>
<?php if (empty($server['players_list'])): ?>
<div class="no-players-msg">Be the first to join!</div>
<?php endif; ?>
</div>
</div>
<?php else: ?>
<div class="no-players-msg">
Server is offline. Start it to see player information!
</div>
<?php endif; ?>
</div>
<!-- Quick Links Card -->
<div class="card">
<h2>Quick Links</h2>
<div class="quick-links-nav">
<a href="index.php">Home</a>
<a href="factions.php">Factions</a>
<a href="about.php">About</a>
<a href="https://discord.com/invite/959SAvcCpp" target="_blank">Discord</a>
</div>
</div>
</main>
<footer>
<p>© <?php echo date('Y'); ?> CreateCraft SI | Built with PHP | Server status updates every 5 seconds</p>
</footer>
</div>
<script>
let lastPlayerCount = <?php echo $server['players']; ?>;
function togglePlayers() {
const container = document.getElementById('playersContainer');
if (container.style.display === 'none' || container.style.display === '') {
container.style.display = 'flex';
} else {
container.style.display = 'none';
}
}
function updateServerStatus() {
fetch(window.location.href + '?ajax=1')
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Update player count
const newCountElem = doc.querySelector('.player-number');
if (newCountElem) {
const newCount = parseInt(newCountElem.textContent);
const countElem = document.getElementById('playerCount');
if (countElem && !isNaN(newCount) && newCount !== lastPlayerCount) {
countElem.style.transform = 'scale(1.1)';
setTimeout(() => {
countElem.style.transform = 'scale(1)';
}, 200);
countElem.textContent = newCount;
lastPlayerCount = newCount;
}
}
// Update player list section
const newPlayersContainer = doc.querySelector('.players-container');
const newPlayersToggle = doc.querySelector('.players-toggle');
if (newPlayersContainer && newPlayersToggle) {
const currentContainer = document.getElementById('playersContainer');
const currentToggle = document.querySelector('.players-toggle');
if (currentContainer && currentToggle) {
currentContainer.innerHTML = newPlayersContainer.innerHTML;
currentToggle.textContent = newPlayersToggle.textContent;
// Auto-show if players are online
const hasPlayers = newPlayersContainer.innerHTML.includes('player-badge');
if (hasPlayers && currentContainer.style.display === 'none') {
currentContainer.style.display = 'flex';
currentToggle.textContent = currentToggle.textContent.replace('⬅️ ', '').replace(' ➡️', '');
} else if (!hasPlayers && currentContainer.style.display !== 'none') {
currentContainer.style.display = 'none';
}
}
}
})
.catch(err => console.log('Update failed:', err));
}
// Update every 5 seconds
setInterval(updateServerStatus, 5000);
</script>
</body>
</html>
← Back