feat: Implement light/dark theme toggle and enhance UI components
- Added theme.js for managing light/dark mode with user preference persistence. - Updated lab.php to include theme toggle button and adjust styles for light mode. - Enhanced CSS styles in style.css for light theme support, including background and text colors. - Introduced DNS record lookup functionality in tools.php with user input for domain queries. - Improved UI for DNS lookup and outbound connectivity tests in tools.php. - Added historical benchmark trend chart in lab.php to visualize previous benchmark scores. - Refactored various UI elements for better spacing and alignment across components.
This commit is contained in:
@@ -26,6 +26,43 @@ $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';
|
||||
|
||||
// Git repository inspectie (met veilige fallback)
|
||||
$activeBranch = 'dev';
|
||||
$commits = [];
|
||||
|
||||
if (function_exists('shell_exec')) {
|
||||
$branchOutput = @shell_exec('git rev-parse --abbrev-ref HEAD 2>&1');
|
||||
if ($branchOutput && strpos($branchOutput, 'fatal:') === false) {
|
||||
$activeBranch = trim($branchOutput);
|
||||
}
|
||||
|
||||
$logOutput = @shell_exec('git log -n 5 --pretty=format:"%h|%an|%ad|%s" --date=format:"%d-%m-%Y %H:%M" 2>&1');
|
||||
if ($logOutput && strpos($logOutput, 'fatal:') === false) {
|
||||
$lines = explode("\n", trim($logOutput));
|
||||
foreach ($lines as $line) {
|
||||
$parts = explode('|', $line, 4);
|
||||
if (count($parts) === 4) {
|
||||
$commits[] = [
|
||||
'hash' => htmlspecialchars($parts[0]),
|
||||
'author' => htmlspecialchars($parts[1]),
|
||||
'date' => htmlspecialchars($parts[2]),
|
||||
'msg' => htmlspecialchars($parts[3])
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback commits bij afgeschermde shell_exec
|
||||
if (empty($commits)) {
|
||||
$commits = [
|
||||
['hash' => '4400bc2', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add a new line at the end of style.css for consistency'],
|
||||
['hash' => 'cc029ca', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add sleek dark theme styles and implement Dev Tools functionality'],
|
||||
['hash' => 'caa2c2f', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 11:49', 'msg' => 'Test automatic deployment via webhook'],
|
||||
['hash' => 'cee3e27', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 10:24', 'msg' => 'Eerste test']
|
||||
];
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
@@ -34,6 +71,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Web & PC Studio - Systeem Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="theme.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
@@ -52,6 +90,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<a href="tools.php" class="nav-item">🛠️ Dev Tools</a>
|
||||
</div>
|
||||
<div class="nav-status">
|
||||
<button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
|
||||
<span class="nav-badge">
|
||||
<span class="pulse-dot"></span>
|
||||
Git Live
|
||||
@@ -111,7 +150,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<div class="card-title">
|
||||
<span>🌿</span> Git CI/CD Sync
|
||||
</div>
|
||||
<span class="badge-pill">Verbonden</span>
|
||||
<span class="badge-pill">Branch: <?= htmlspecialchars($activeBranch); ?></span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Status van de gekoppelde Git repository en automatische webhook updates.
|
||||
@@ -128,7 +167,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Actieve Branch:</td>
|
||||
<td class="val">main</td>
|
||||
<td class="val" style="color: #38bdf8; font-weight: 700;"><?= htmlspecialchars($activeBranch); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Deploy Type:</td>
|
||||
@@ -142,11 +181,37 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kaart 3: Live Tijd en Server Ping Diagnose -->
|
||||
<!-- Kaart 3: Laatste Git Commits & Deployment Log -->
|
||||
<div class="card" style="margin-bottom: 24px;">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>⏱️</span> Realtime Verbinding & Diagnose
|
||||
<span>📜</span> Laatste Git Commits (Deployment Log)
|
||||
</div>
|
||||
<span class="badge-pill">Live Repository History</span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Overzicht van de meest recente commits die naar deze webserver zijn gepusht via Git.
|
||||
</p>
|
||||
|
||||
<div class="commit-timeline">
|
||||
<?php foreach ($commits as $commit): ?>
|
||||
<div class="commit-item">
|
||||
<div class="commit-top">
|
||||
<span class="commit-hash"><?= $commit['hash']; ?></span>
|
||||
<span class="commit-date"><?= $commit['date']; ?></span>
|
||||
</div>
|
||||
<div class="commit-msg"><?= $commit['msg']; ?></div>
|
||||
<div class="commit-author">Auteur: <?= $commit['author']; ?></div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kaart 4: 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 & Latency
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
|
||||
⚡ Test Server Ping (AJAX)
|
||||
@@ -156,7 +221,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<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 class="metric-val" id="server-time" style="font-size: 0.95rem; color: var(--text-main);"><?= htmlspecialchars($serverTime); ?></div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-label">Browser Tijd (JS)</div>
|
||||
@@ -180,15 +245,15 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<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>
|
||||
<h3 style="font-size: 1.05rem; color: var(--text-main); 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>
|
||||
<h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Developer & Systeem Tools →</h3>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">DNS lookup, PHP extensie matrix en HTTP header inspectie.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user