NiekRabelink
cc029caa8e
- Introduced a new CSS file for a dark theme design, enhancing the UI with a modern look. - Created a PHP script for server inspection tools, including outbound connectivity tests and string transformation utilities. - Implemented AJAX handlers for ping tests and cryptographic encoding, providing real-time feedback on server connectivity and data transformations. - Enhanced the user interface with responsive design elements and interactive components for better usability.
246 lines
10 KiB
PHP
246 lines
10 KiB
PHP
<?php
|
|
/**
|
|
* Web & PC Studio - Systeem Dashboard & Git Hub
|
|
* Hoofdpagina voor status, runtime verificatie en Git webhook deployment tests.
|
|
*/
|
|
|
|
// Snelle API responder voor AJAX pings
|
|
if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
|
header('Content-Type: application/json; charset=utf-8');
|
|
echo json_encode([
|
|
'status' => 'success',
|
|
'message' => 'PHP backend reageert naar behoren.',
|
|
'timestamp' => date('d-m-Y H:i:s'),
|
|
'php_version' => PHP_VERSION,
|
|
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
|
'server_software' => $_SERVER['SERVER_SOFTWARE'] ?? 'Webserver',
|
|
'ip' => $_SERVER['REMOTE_ADDR'] ?? 'Onbekend'
|
|
]);
|
|
exit;
|
|
}
|
|
|
|
date_default_timezone_set('Europe/Amsterdam');
|
|
$serverTime = date('d-m-Y H:i:s');
|
|
$phpVersion = PHP_VERSION;
|
|
$serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
|
|
$host = $_SERVER['HTTP_HOST'] ?? 'www.webenpcstudio.nl';
|
|
$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
|
|
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web & PC Studio - Systeem Dashboard</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="main-wrapper">
|
|
<!-- Bovenste Menu Balk -->
|
|
<nav class="navbar">
|
|
<a href="index.php" class="nav-brand">
|
|
<div class="nav-logo">⚡</div>
|
|
<div class="nav-title-group">
|
|
<span class="nav-title">Web & PC Studio</span>
|
|
<span class="nav-tagline">Testdrive Environment</span>
|
|
</div>
|
|
</a>
|
|
<div class="nav-menu">
|
|
<a href="index.php" class="nav-item active">📊 Dashboard</a>
|
|
<a href="lab.php" class="nav-item">🚀 Benchmark</a>
|
|
<a href="tools.php" class="nav-item">🛠️ Dev Tools</a>
|
|
</div>
|
|
<div class="nav-status">
|
|
<span class="nav-badge">
|
|
<span class="pulse-dot"></span>
|
|
Git Live
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<header class="hero">
|
|
<h1>Systeem Dashboard & Git Status</h1>
|
|
<p>
|
|
Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor www.webenpcstudio.nl.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Systeem Status Grid -->
|
|
<div class="grid-2">
|
|
<!-- Kaart 1: Systeeminformatie -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>🖥️</span> Webserver Omgeving
|
|
</div>
|
|
<span class="badge-pill success">Operationeel</span>
|
|
</div>
|
|
<p class="card-desc">
|
|
Actieve server-parameters gedetecteerd door de PHP runtime engine.
|
|
</p>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="label">Host Domein:</td>
|
|
<td class="val"><?= htmlspecialchars($host); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Verbindingsprotocol:</td>
|
|
<td class="val"><?= htmlspecialchars($protocol); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">PHP Engine:</td>
|
|
<td class="val">v<?= htmlspecialchars($phpVersion); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Webserver Software:</td>
|
|
<td class="val" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($serverSoftware); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Client IP:</td>
|
|
<td class="val"><?= htmlspecialchars($clientIp); ?></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Kaart 2: Git Repository & Deployment -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>🌿</span> Git CI/CD Sync
|
|
</div>
|
|
<span class="badge-pill">Verbonden</span>
|
|
</div>
|
|
<p class="card-desc">
|
|
Status van de gekoppelde Git repository en automatische webhook updates.
|
|
</p>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="label">Git Server:</td>
|
|
<td class="val">git.webenpcstudio.nl</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Repository:</td>
|
|
<td class="val">NiekRabelink/Testdrive</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Actieve Branch:</td>
|
|
<td class="val">main</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Deploy Type:</td>
|
|
<td class="val">Automatische Webhook Push</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Testdrive Status:</td>
|
|
<td class="val" style="color: #34d399;">Gereed & Gesynchroniseerd</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kaart 3: Live Tijd en Server Ping Diagnose -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>⏱️</span> Realtime Verbinding & Diagnose
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
|
|
⚡ Test Server Ping (AJAX)
|
|
</button>
|
|
</div>
|
|
|
|
<div class="metric-grid">
|
|
<div class="metric-box">
|
|
<div class="metric-label">Server Tijd (PHP)</div>
|
|
<div class="metric-val" id="server-time" style="font-size: 0.95rem; color: #f1f5f9;"><?= htmlspecialchars($serverTime); ?></div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Browser Tijd (JS)</div>
|
|
<div class="metric-val" id="client-time" style="font-size: 0.95rem;">--:--:--</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Laatste Latency</div>
|
|
<div class="metric-val" id="ping-latency">-- ms</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Geheugengebruik</div>
|
|
<div class="metric-val" id="ping-mem">-- MB</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ping-result-box" class="terminal-box" style="display: none; margin-top: 12px;"></div>
|
|
</div>
|
|
|
|
<!-- Quick Jump Links naar de andere onderdelen -->
|
|
<div class="grid-2">
|
|
<a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
|
<div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
|
|
<div>
|
|
<h3 style="font-size: 1.05rem; color: #fff; margin-bottom: 4px;">Webserver Benchmark Suite →</h3>
|
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.</p>
|
|
</div>
|
|
</a>
|
|
<a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
|
<div style="font-size: 2rem; background: rgba(139, 92, 246, 0.12); padding: 12px; border-radius: 12px;">🛠️</div>
|
|
<div>
|
|
<h3 style="font-size: 1.05rem; color: #fff; margin-bottom: 4px;">Developer & Systeem Tools →</h3>
|
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Inspecteer HTTP headers, cURL verbindingen en cryptografie.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- JavaScript Functionaliteit -->
|
|
<script>
|
|
// 1. Live browser klok
|
|
function updateClock() {
|
|
const now = new Date();
|
|
document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
|
|
// 2. Server AJAX Ping
|
|
async function testServerPing() {
|
|
const btn = document.getElementById('btn-ping');
|
|
const resBox = document.getElementById('ping-result-box');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Meting loopt...';
|
|
|
|
const start = performance.now();
|
|
try {
|
|
const res = await fetch('index.php?api=status&t=' + Date.now());
|
|
const data = await res.json();
|
|
const latency = Math.round(performance.now() - start);
|
|
|
|
document.getElementById('ping-latency').textContent = latency + ' ms';
|
|
document.getElementById('ping-mem').textContent = data.memory_usage;
|
|
|
|
resBox.style.display = 'block';
|
|
resBox.textContent = `[PONG] Verbinding succesvol!\n` +
|
|
`Status: ${data.status}\n` +
|
|
`Server Tijd: ${data.timestamp}\n` +
|
|
`PHP Versie: v${data.php_version}\n` +
|
|
`Geheugen: ${data.memory_usage}\n` +
|
|
`Round-trip: ${latency} ms`;
|
|
} catch (err) {
|
|
resBox.style.display = 'block';
|
|
resBox.textContent = '[FOUT] Kan geen verbinding maken: ' + err.message;
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = '⚡ Test Server Ping (AJAX)';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|