NiekRabelink/Testdrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: NiekRabelink/Testdrive:f555c523b2cf256d075c1504e731ac204ebfef03
Branches Tags
NiekRabelink/Testdrive:main NiekRabelink/Testdrive:dev
...
compare: NiekRabelink/Testdrive:main
Branches Tags
NiekRabelink/Testdrive:main NiekRabelink/Testdrive:dev

13 Commits
f555c523b2 ... main

Author SHA1 Message Date
NiekRabelink b7ef4b37ea Merge pull request 'Dev' (#2) from dev into main 
Reviewed-on: #2
 2026-09-07 11:32:35 +00:00
NiekRabelink 6b827ac1db chore: Add new line at the end of auth.php, login.php, and logout.php for consistency 2026-09-07 13:31:03 +02:00
NiekRabelink 530e249b8f feat: Implement secure authentication module and integrate session management across multiple files 2026-09-07 13:30:55 +02:00
NiekRabelink 27022415d7 Merge pull request 'Dev' (#1) from dev into main 
Reviewed-on: #1
 2026-09-07 11:18:54 +00:00
NiekRabelink 6d6833a417 chore: Add a new line at the end of theme.js for consistency 2026-09-07 13:17:04 +02:00
NiekRabelink 61af688ff3 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.
 2026-09-07 13:16:56 +02:00
NiekRabelink 4400bc2640 Add a new line at the end of style.css for consistency 2026-09-07 13:04:07 +02:00
NiekRabelink cc029caa8e Add sleek dark theme styles and implement Dev Tools functionality 
- 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.
 2026-09-07 13:04:00 +02:00
NiekRabelink f6a16a0079 Implement code changes to enhance functionality and improve performance 2026-09-07 12:57:24 +02:00
NiekRabelink 8d07ae9ad9 Add a new line at the end of services.php for consistency 2026-09-07 12:54:53 +02:00
NiekRabelink c2effc697d Nieuwe test 2026-09-07 12:01:51 +02:00
NiekRabelink caa2c2fc2a Test automatic 2026-09-07 11:49:56 +02:00
NiekRabelink 103149a4a3 Test automatische deployment 2026-09-07 11:46:30 +02:00
8 changed files with 2699 additions and 435 deletions
Expand all files Collapse all files
auth.php
+91
View File
@@ -0,0 +1,91 @@
<?php
/**
* Web & PC Studio - Authenticatie & Beveiligingsmodule
* Veilig sessiebeheer, CSRF-protectie en one-way cryptografische verificatie.
*/
// Veilige sessie instellingen
if (session_status() === PHP_SESSION_NONE) {
ini_set('session.cookie_httponly', '1');
ini_set('session.use_only_cookies', '1');
ini_set('session.cookie_samesite', 'Strict');
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
ini_set('session.cookie_secure', '1');
}
session_start();
}
// One-way cryptografische hashes (Nooit plaintext opgeslagen)
define('AUTH_USER_HASH', 'ef8d40929f6f50e1f52009fbe94cf5a81b8373b90ed2bd130e85dcb4169c5cb4');
define('AUTH_PASS_HASH', '$2y$12$RQFrfxgd5ZiHQAcMX2DDluDW072QG/aDTDE50ORz3drcNnbZzl0AK');
/**
* Controleert of de huidige bezoeker geauthenticeerd is.
*/
function is_logged_in() {
if (!empty($_SESSION['wpc_auth']) && $_SESSION['wpc_auth'] === true) {
// Sessie timeout na 2 uur inactiviteit
if (isset($_SESSION['wpc_last_activity']) && (time() - $_SESSION['wpc_last_activity'] > 7200)) {
logout();
return false;
}
$_SESSION['wpc_last_activity'] = time();
return true;
}
return false;
}
/**
* Blokkeert ongeautoriseerde toegang en stuurt door naar het inlogscherm.
*/
function require_auth() {
if (!is_logged_in()) {
// Als het een asynchrone AJAX aanroep is, geef HTTP 401 Unauthorized
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) || isset($_GET['action']) || isset($_GET['api'])) {
header('HTTP/1.1 401 Unauthorized');
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['status' => 'unauthorized', 'message' => 'Sessie verlopen of niet ingelogd.']);
exit;
}
$redirect = urlencode($_SERVER['REQUEST_URI'] ?? 'index.php');
header("Location: login.php?redirect={$redirect}");
exit;
}
}
/**
* Genereert een CSRF token voor formulieren.
*/
function get_csrf_token() {
if (empty($_SESSION['wpc_csrf'])) {
$_SESSION['wpc_csrf'] = bin2hex(random_bytes(32));
}
return $_SESSION['wpc_csrf'];
}
/**
* Valideert het ingediende CSRF token.
*/
function verify_csrf_token($token) {
if (empty($_SESSION['wpc_csrf']) || empty($token)) {
return false;
}
return hash_equals($_SESSION['wpc_csrf'], $token);
}
/**
* Beëindigt de sessie en ruimt cookies op.
*/
function logout() {
$_SESSION = [];
if (ini_get("session.use_cookies")) {
$params = session_get_cookie_params();
setcookie(session_name(), '', time() - 42000,
$params["path"], $params["domain"],
$params["secure"], $params["httponly"]
);
}
@session_destroy();
}
index.php
+244 -435
View File
@@ -1,10 +1,18 @@
<?php <?php
// Eenvoudige ingebouwde API endpoint voor JavaScript AJAX interactie /**
* Web & PC Studio - Systeem Dashboard & Git Hub
* Hoofdpagina voor status, runtime verificatie en Git webhook deployment tests.
*/
require_once __DIR__ . '/auth.php';
require_auth();
// Snelle API responder voor AJAX pings
if (isset($_GET['api']) && $_GET['api'] === 'status') { if (isset($_GET['api']) && $_GET['api'] === 'status') {
header('Content-Type: application/json; charset=utf-8'); header('Content-Type: application/json; charset=utf-8');
echo json_encode([ echo json_encode([
'status' => 'success', 'status' => 'success',
'message' => 'PHP backend reageert succesvol!', 'message' => 'PHP backend reageert naar behoren.',
'timestamp' => date('d-m-Y H:i:s'), 'timestamp' => date('d-m-Y H:i:s'),
'php_version' => PHP_VERSION, 'php_version' => PHP_VERSION,
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB', 'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
@@ -14,493 +22,294 @@ if (isset($_GET['api']) && $_GET['api'] === 'status') {
exit; exit;
} }
// Server configuratie & variabelen
date_default_timezone_set('Europe/Amsterdam'); date_default_timezone_set('Europe/Amsterdam');
$serverTime = date('d-m-Y H:i:s'); $serverTime = date('d-m-Y H:i:s');
$phpVersion = PHP_VERSION; $phpVersion = PHP_VERSION;
$serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx'; $serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
$host = $_SERVER['HTTP_HOST'] ?? 'www.webenpcstudio.nl'; $host = $_SERVER['HTTP_HOST'] ?? 'server.webenpcstudio.nl';
$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend'; $clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP'; $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
$loggedUser = $_SESSION['wpc_user_email'] ?? 'niek.rabelink@gmail.com';
// 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> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web & PC Studio - Git & PHP Live Test</title> <title>Web &amp; PC Studio - Systeem Dashboard</title>
<style> <link rel="stylesheet" href="style.css">
:root { <script src="theme.js"></script>
--primary: #3b82f6;
--primary-hover: #2563eb;
--primary-glow: rgba(59, 130, 246, 0.3);
--success: #10b981;
--success-glow: rgba(16, 185, 129, 0.25);
--purple: #8b5cf6;
--bg: #0b0f19;
--card-bg: rgba(23, 32, 51, 0.75);
--card-border: rgba(255, 255, 255, 0.08);
--text-main: #f8fafc;
--text-muted: #94a3b8;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text-main);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background-image:
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
}
.container {
max-width: 680px;
width: 100%;
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
border-radius: 24px;
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.header {
text-align: center;
margin-bottom: 28px;
}
.badges-row {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 9999px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.badge-success {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #34d399;
}
.badge-php {
background: rgba(139, 92, 246, 0.12);
border: 1px solid rgba(139, 92, 246, 0.3);
color: #a78bfa;
}
.pulse-dot {
width: 8px;
height: 8px;
background-color: var(--success);
border-radius: 50%;
box-shadow: 0 0 0 0 var(--success-glow);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
h1 {
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 8px;
color: #ffffff;
letter-spacing: -0.02em;
}
.subtitle {
font-size: 0.98rem;
color: var(--text-muted);
line-height: 1.5;
}
/* Navigatie Tabs */
.tabs {
display: flex;
background: rgba(15, 23, 42, 0.6);
padding: 4px;
border-radius: 12px;
gap: 4px;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tab-btn {
flex: 1;
padding: 10px 14px;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn.active {
background: rgba(59, 130, 246, 0.2);
color: #ffffff;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Kaarten & Informatie rijen */
.info-card {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 14px;
padding: 20px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.88rem;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.info-row:last-child {
padding-bottom: 0;
border-bottom: none;
}
.info-label {
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.info-value {
color: var(--text-main);
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.tag-pill {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
padding: 3px 10px;
border-radius: 6px;
font-size: 0.8rem;
}
/* Interactieve knoppen en Acties */
.actions-group {
display: flex;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.btn {
flex: 1;
min-width: 180px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 4px 14px var(--primary-glow);
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.08);
color: var(--text-main);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
}
/* Test Result Box */
.result-box {
background: #080c14;
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
display: none;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.82rem;
color: #38bdf8;
white-space: pre-wrap;
word-break: break-all;
}
/* Live Klok Bar */
.clock-bar {
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 10px 16px;
font-size: 0.82rem;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-muted);
margin-bottom: 20px;
}
.footer {
text-align: center;
font-size: 0.82rem;
color: var(--text-muted);
opacity: 0.8;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 16px;
}
.footer a {
color: #60a5fa;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="main-wrapper">
<!-- Header --> <!-- Bovenste Menu Balk -->
<div class="header"> <nav class="navbar">
<div class="badges-row"> <a href="index.php" class="nav-brand">
<span class="badge badge-success"> <div class="nav-logo">⚡</div>
<div class="nav-title-group">
<span class="nav-title">Web &amp; 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">
<button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
<a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
<span class="nav-badge">
<span class="pulse-dot"></span> <span class="pulse-dot"></span>
Git Systeem Actief server.webenpcstudio.nl
</span>
<span class="badge badge-php">
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
</span> </span>
</div> </div>
<h1>Web & PC Studio</h1> </nav>
<p class="subtitle">
Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime. <!-- Hero -->
<header class="hero">
<h1>Systeem Dashboard &amp; Git Status</h1>
<p>
Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor <strong>server.webenpcstudio.nl</strong>.
</p> </p>
</div> </header>
<!-- Live Clock Bar (JavaScript) --> <!-- Systeem Status Grid -->
<div class="clock-bar"> <div class="grid-2">
<span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span> <!-- Kaart 1: Systeeminformatie -->
<span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span> <div class="card">
</div> <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>
<!-- Tab Navigatie --> <table class="data-table">
<div class="tabs"> <tr>
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button> <td class="label">Host Domein:</td>
<button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button> <td class="val"><?= htmlspecialchars($host); ?></td>
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button> </tr>
</div> <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>
<!-- Tab 1: Overzicht --> <!-- Kaart 2: Git Repository & Deployment -->
<div id="tab-overzicht" class="tab-content active"> <div class="card">
<div class="info-card"> <div class="card-header">
<div class="info-row"> <div class="card-title">
<span class="info-label">Host Domein:</span> <span>🌿</span> Git CI/CD Sync
<span class="info-value"><?= htmlspecialchars($host); ?></span> </div>
</div> <span class="badge-pill">Branch: <?= htmlspecialchars($activeBranch); ?></span>
<div class="info-row">
<span class="info-label">Protocol:</span>
<span class="info-value"><?= htmlspecialchars($protocol); ?></span>
</div>
<div class="info-row">
<span class="info-label">PHP Versie:</span>
<span class="info-value">v<?= htmlspecialchars($phpVersion); ?></span>
</div>
<div class="info-row">
<span class="info-label">Webserver:</span>
<span class="info-value"><?= htmlspecialchars($serverSoftware); ?></span>
</div>
<div class="info-row">
<span class="info-label">Jouw Bezoekers IP:</span>
<span class="info-value"><?= htmlspecialchars($clientIp); ?></span>
</div>
<div class="info-row">
<span class="info-label">Status:</span>
<span class="info-value tag-pill">Operationeel</span>
</div> </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" style="color: #38bdf8; font-weight: 700;"><?= htmlspecialchars($activeBranch); ?></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 &amp; Gesynchroniseerd</td>
</tr>
</table>
</div> </div>
</div> </div>
<!-- Tab 2: Live Diagnose / JS interactie --> <!-- Kaart 3: Laatste Git Commits & Deployment Log -->
<div id="tab-diagnose" class="tab-content"> <div class="card" style="margin-bottom: 24px;">
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px;"> <div class="card-header">
Klik op de knop hieronder om via een asynchrone JavaScript <code>fetch()</code> aanroep een realtime JSON response op te halen bij de PHP server. <div class="card-title">
<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> </p>
<div class="actions-group">
<button class="btn btn-primary" id="btn-run-test" onclick="runServerTest()"> <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 &amp; Latency
</div>
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
⚡ Test Server Ping (AJAX) ⚡ Test Server Ping (AJAX)
</button> </button>
<button class="btn btn-secondary" id="btn-copy" onclick="copySystemInfo()">
📋 Kopieer Status
</button>
</div> </div>
<div id="test-result" class="result-box"></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: var(--text-main);"><?= 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> </div>
<!-- Tab 3: Git Informatie --> <!-- Quick Jump Links naar de andere onderdelen -->
<div id="tab-git" class="tab-content"> <div class="grid-2">
<div class="info-card"> <a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
<div class="info-row"> <div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
<span class="info-label">Git Systeem:</span> <div>
<span class="info-value">git.webenpcstudio.nl</span> <h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Webserver Benchmark Suite &rarr;</h3>
<p style="font-size: 0.82rem; color: var(--text-muted);">Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.</p>
</div> </div>
<div class="info-row"> </a>
<span class="info-label">Repository:</span> <a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
<span class="info-value">NiekRabelink/Testdrive</span> <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: var(--text-main); margin-bottom: 4px;">Developer &amp; Systeem Tools &rarr;</h3>
<p style="font-size: 0.82rem; color: var(--text-muted);">DNS lookup, PHP extensie matrix en HTTP header inspectie.</p>
</div> </div>
<div class="info-row"> </a>
<span class="info-label">Branch:</span>
<span class="info-value">main</span>
</div>
<div class="info-row">
<span class="info-label">Deploy Modus:</span>
<span class="info-value tag-pill">PHP + JS Enabled</span>
</div>
</div>
</div> </div>
<!-- Footer --> <!-- Footer -->
<div class="footer"> <footer class="footer">
&copy; <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel. &copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan git.webenpcstudio.nl &bull; Alle systemen operationeel.
</div> </footer>
</div> </div>
<!-- JavaScript Functionaliteit --> <!-- JavaScript Functionaliteit -->
<script> <script>
// 1. Live Client Klok // 1. Live browser klok
function updateClientClock() { function updateClock() {
const now = new Date(); const now = new Date();
const formatted = now.toLocaleTimeString('nl-NL', { hour12: false }); document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
document.getElementById('client-time').textContent = formatted;
} }
setInterval(updateClientClock, 1000); setInterval(updateClock, 1000);
updateClientClock(); updateClock();
// 2. Tab Switcher // 2. Server AJAX Ping
function switchTab(tabId) { async function testServerPing() {
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active')); const btn = document.getElementById('btn-ping');
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); const resBox = document.getElementById('ping-result-box');
document.getElementById(tabId).classList.add('active');
event.target.classList.add('active');
}
// 3. Asynchrone PHP AJAX Test
async function runServerTest() {
const btn = document.getElementById('btn-run-test');
const resultBox = document.getElementById('test-result');
btn.disabled = true; btn.disabled = true;
btn.textContent = '⏳ Verbinding testen...'; btn.textContent = 'Meting loopt...';
resultBox.style.display = 'block';
resultBox.textContent = 'Verzoek verzenden naar index.php?api=status...';
const startTime = performance.now();
const start = performance.now();
try { try {
const response = await fetch('index.php?api=status'); const res = await fetch('index.php?api=status&t=' + Date.now());
const data = await response.json(); const data = await res.json();
const latency = Math.round(performance.now() - startTime); const latency = Math.round(performance.now() - start);
resultBox.innerHTML = `✅ <strong>Succesvolle verbinding!</strong> (Latency: ${latency}ms)\n\n` + document.getElementById('ping-latency').textContent = latency + ' ms';
`Status: ${data.status}\n` + document.getElementById('ping-mem').textContent = data.memory_usage;
`Bericht: ${data.message}\n` +
`Server Tijd: ${data.timestamp}\n` + resBox.style.display = 'block';
`PHP Versie: ${data.php_version}\n` + resBox.textContent = `[PONG] Verbinding succesvol!\n` +
`Geheugengebruik: ${data.memory_usage}\n` + `Status: ${data.status}\n` +
`Server: ${data.server_software}`; `Server Tijd: ${data.timestamp}\n` +
`PHP Versie: v${data.php_version}\n` +
`Geheugen: ${data.memory_usage}\n` +
`Round-trip: ${latency} ms`;
} catch (err) { } catch (err) {
resultBox.innerHTML = `❌ <strong>Fout bij verbinden met PHP backend:</strong>\n${err.message}`; resBox.style.display = 'block';
resBox.textContent = '[FOUT] Kan geen verbinding maken: ' + err.message;
} finally { } finally {
btn.disabled = false; btn.disabled = false;
btn.textContent = '⚡ Test Server Ping (AJAX)'; btn.textContent = '⚡ Test Server Ping (AJAX)';
} }
} }
// 4. Kopieer Status naar Klembord
function copySystemInfo() {
const textToCopy = `Web & PC Studio Statusrapport\n` +
`Domein: <?= htmlspecialchars($host); ?>\n` +
`PHP Versie: <?= htmlspecialchars($phpVersion); ?>\n` +
`Server: <?= htmlspecialchars($serverSoftware); ?>\n` +
`Status: Operationeel`;
navigator.clipboard.writeText(textToCopy).then(() => {
const btn = document.getElementById('btn-copy');
const originalText = btn.innerHTML;
btn.innerHTML = '✓ Gekopieerd!';
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
});
}
</script> </script>
</body> </body>
</html> </html>
lab.php
+952
View File
@@ -0,0 +1,952 @@
<?php
/**
* Web & PC Studio - Webserver Benchmark & Stress Suite
* Diepgaande diagnostische suite voor CPU, NVMe Disk I/O, RAM en HTTP Concurrency.
*/
require_once __DIR__ . '/auth.php';
require_auth();
// Helper functies voor benchmarks
function benchmarkCPU() {
$start = microtime(true);
$iterations = 80000;
$val = 1.0;
for ($i = 1; $i <= $iterations; $i++) {
$val = sqrt($val + $i) * sin($i);
}
$hash = 'webenpcstudio';
for ($i = 0; $i < 40000; $i++) {
$hash = hash('sha256', $hash . $i);
}
$duration = (microtime(true) - $start) * 1000;
$ops = round(($iterations + 40000) / (max(0.001, $duration) / 1000));
return [
'status' => 'success',
'duration_ms' => round($duration, 2),
'ops_per_sec' => number_format($ops, 0, ',', '.'),
'raw_ops' => $ops
];
}
function benchmarkMemory() {
$start = microtime(true);
$startMem = memory_get_usage();
$arr = [];
for ($i = 0; $i < 50000; $i++) {
$arr['key_' . $i] = [
'id' => $i,
'val' => $i * 1.5,
'studio' => 'WebenPCStudio'
];
}
ksort($arr);
$serialized = serialize($arr);
$unserialized = unserialize($serialized);
unset($arr, $serialized, $unserialized);
$duration = (microtime(true) - $start) * 1000;
$peakMem = (memory_get_peak_usage() - $startMem) / (1024 * 1024);
$throughput = round(150000 / (max(0.001, $duration) / 1000));
return [
'status' => 'success',
'duration_ms' => round($duration, 2),
'peak_mem_mb' => round(max(0.1, $peakMem), 2),
'ops_per_sec' => number_format($throughput, 0, ',', '.'),
'raw_ops' => $throughput
];
}
function benchmarkDiskIO() {
$tempDir = sys_get_temp_dir();
$tempFile = tempnam($tempDir, 'wpc_bench_');
if (!$tempFile) {
return ['status' => 'error', 'message' => 'Kan tijdelijk bestand niet aanmaken'];
}
$chunkSize = 64 * 1024;
$chunks = 48; // ~3 MB
$dummyData = str_repeat('WPCStudio2026_TEST_STRING_ABCD!', 2048);
$writeStart = microtime(true);
$fp = fopen($tempFile, 'wb');
if (!$fp) {
@unlink($tempFile);
return ['status' => 'error', 'message' => 'Kan bestand niet openen'];
}
for ($i = 0; $i < $chunks; $i++) {
fwrite($fp, $dummyData);
}
fflush($fp);
fclose($fp);
$writeTime = max(0.0005, microtime(true) - $writeStart);
$readStart = microtime(true);
$fp = fopen($tempFile, 'rb');
if ($fp) {
while (!feof($fp)) {
fread($fp, $chunkSize);
}
fclose($fp);
}
$readTime = max(0.0005, microtime(true) - $readStart);
$totalMB = ($chunks * $chunkSize) / (1024 * 1024);
$writeSpeed = round($totalMB / $writeTime, 1);
$readSpeed = round($totalMB / $readTime, 1);
@unlink($tempFile);
return [
'status' => 'success',
'file_size_mb' => round($totalMB, 2),
'write_speed_mb_s' => $writeSpeed,
'read_speed_mb_s' => $readSpeed,
'write_time_ms' => round($writeTime * 1000, 1),
'read_time_ms' => round($readTime * 1000, 1)
];
}
function benchmarkStringJSON() {
$start = microtime(true);
$data = [];
for ($i = 0; $i < 15000; $i++) {
$data[] = [
'id' => $i,
'email' => "user{$i}@webenpcstudio.nl",
'tags' => ['git', 'php', 'speed', 'server'],
'active' => ($i % 2 === 0)
];
}
$json = json_encode($data);
$decoded = json_decode($json, true);
preg_match_all('/[a-zA-Z0-9._%+-]+@webenpcstudio\.nl/', $json, $matches);
$duration = (microtime(true) - $start) * 1000;
$throughput = round(15000 / (max(0.001, $duration) / 1000));
return [
'status' => 'success',
'duration_ms' => round($duration, 2),
'records_per_sec' => number_format($throughput, 0, ',', '.'),
'json_size_kb' => round(strlen($json) / 1024, 1),
'raw_ops' => $throughput
];
}
function benchmarkDatabase() {
if (!extension_loaded('pdo_sqlite')) {
return [
'status' => 'skipped',
'message' => 'PDO SQLite niet actief',
'tps' => 0,
'duration_ms' => 0
];
}
try {
$start = microtime(true);
$pdo = new PDO('sqlite::memory:');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('CREATE TABLE test (id INTEGER PRIMARY KEY, name TEXT, val REAL)');
$pdo->beginTransaction();
$stmt = $pdo->prepare('INSERT INTO test (name, val) VALUES (?, ?)');
for ($i = 0; $i < 2500; $i++) {
$stmt->execute(['item_' . $i, mt_rand(1, 1000) / 10]);
}
$pdo->commit();
$stmt2 = $pdo->query('SELECT AVG(val), COUNT(*) FROM test WHERE val > 500');
$stmt2->fetch();
$duration = (microtime(true) - $start) * 1000;
$tps = round(2500 / (max(0.001, $duration) / 1000));
return [
'status' => 'success',
'duration_ms' => round($duration, 2),
'tps' => number_format($tps, 0, ',', '.'),
'records' => 2500,
'raw_tps' => $tps
];
} catch (Exception $e) {
return [
'status' => 'error',
'message' => $e->getMessage()
];
}
}
function getOpcacheInfo() {
if (function_exists('opcache_get_status') && ($status = @opcache_get_status(false))) {
$mem = $status['memory_usage'] ?? [];
return [
'enabled' => true,
'used_mb' => round(($mem['used_memory'] ?? 0) / (1024 * 1024), 1),
'free_mb' => round(($mem['free_memory'] ?? 0) / (1024 * 1024), 1),
'hit_rate' => round($status['opcache_statistics']['opcache_hit_rate'] ?? 0, 1) . '%',
'jit' => !empty($status['jit']['enabled']) ? 'Actief' : 'Inactief'
];
}
return [
'enabled' => false,
'message' => 'Niet geactiveerd'
];
}
// Routing voor AJAX verzoeken
if (isset($_GET['action'])) {
header('Content-Type: application/json; charset=utf-8');
if ($_GET['action'] === 'ping') {
echo json_encode([
'status' => 'pong',
'timestamp' => microtime(true),
'server_time' => date('H:i:s.u')
]);
exit;
}
if ($_GET['action'] === 'bench_cpu') { echo json_encode(benchmarkCPU()); exit; }
if ($_GET['action'] === 'bench_memory') { echo json_encode(benchmarkMemory()); exit; }
if ($_GET['action'] === 'bench_disk') { echo json_encode(benchmarkDiskIO()); exit; }
if ($_GET['action'] === 'bench_string') { echo json_encode(benchmarkStringJSON()); exit; }
if ($_GET['action'] === 'bench_db') { echo json_encode(benchmarkDatabase()); exit; }
if ($_GET['action'] === 'bench_all') {
$cpu = benchmarkCPU();
$mem = benchmarkMemory();
$disk = benchmarkDiskIO();
$str = benchmarkStringJSON();
$db = benchmarkDatabase();
$opcache = getOpcacheInfo();
$score = 0;
$score += min(25, round((($cpu['raw_ops'] ?? 0) / 150000) * 25));
$score += min(20, round((($mem['raw_ops'] ?? 0) / 200000) * 20));
$score += min(25, round((($disk['write_speed_mb_s'] ?? 0) / 300) * 25));
$score += min(15, round((($str['raw_ops'] ?? 0) / 35000) * 15));
if ($db['status'] === 'success') {
$score += min(15, round((($db['raw_tps'] ?? 0) / 20000) * 15));
} else {
$score += ($opcache['enabled'] ? 12 : 8);
}
$finalScore = max(35, min(100, $score));
if ($finalScore >= 90) {
$grade = 'A+'; $rating = 'Superieur (Enterprise Snelheid)'; $color = '#34d399';
} elseif ($finalScore >= 80) {
$grade = 'A'; $rating = 'Uitstekend (Snelle Server)'; $color = '#38bdf8';
} elseif ($finalScore >= 70) {
$grade = 'B'; $rating = 'Goed (Solide Webhosting)'; $color = '#fbbf24';
} else {
$grade = 'C'; $rating = 'Voldoende (Basis)'; $color = '#f87171';
}
echo json_encode([
'status' => 'success',
'score' => $finalScore,
'grade' => $grade,
'rating' => $rating,
'color' => $color,
'cpu' => $cpu,
'memory' => $mem,
'disk' => $disk,
'string_json' => $str,
'db' => $db,
'opcache' => $opcache,
'timestamp' => date('d-m-Y H:i:s')
]);
exit;
}
echo json_encode(['status' => 'error', 'message' => 'Onbekend verzoek']);
exit;
}
date_default_timezone_set('Europe/Amsterdam');
$phpVersion = PHP_VERSION;
$serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web &amp; PC Studio - Webserver Benchmark</title>
<link rel="stylesheet" href="style.css">
<script src="theme.js"></script>
<style>
.bench-master {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(11, 15, 25, 0.95));
border: 1px solid var(--border-accent);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 28px;
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
[data-theme="light"] .bench-master {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95));
box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08);
}
.score-box {
display: flex;
align-items: center;
gap: 18px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border-subtle);
padding: 16px 22px;
border-radius: var(--radius-lg);
}
[data-theme="light"] .score-box {
background: rgba(241, 245, 249, 0.85);
}
.score-circle {
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid #38bdf8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
font-weight: 800;
}
.progress-bar-wrap {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
margin-top: 18px;
overflow: hidden;
display: none;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(to right, var(--primary), var(--accent));
transition: width 0.3s ease;
}
.conc-pill {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 4px 8px;
font-size: 0.75rem;
font-family: var(--font-mono);
}
.conc-pill.success { border-color: #10b981; color: #34d399; }
.conc-pill.slow { border-color: #f59e0b; color: #fbbf24; }
.conc-pill.error { border-color: #ef4444; color: #f87171; }
@media print {
.navbar, .btn, .nav-status, .sound-toggle, footer { display: none !important; }
body { background: #fff !important; color: #000 !important; }
.card, .bench-master { box-shadow: none !important; border: 1px solid #ccc !important; }
}
</style>
</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 &amp; PC Studio</span>
<span class="nav-tagline">Testdrive Environment</span>
</div>
</a>
<div class="nav-menu">
<a href="index.php" class="nav-item">📊 Dashboard</a>
<a href="lab.php" class="nav-item active">🚀 Benchmark</a>
<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>
<button class="btn btn-secondary btn-sm" id="sound-btn" onclick="toggleAudio()" title="Schakel geluid in/uit">
<span id="sound-icon">🔈</span> Geluid: <span id="sound-status">Uit</span>
</button>
<a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
</div>
</nav>
<!-- Hero -->
<header class="hero">
<h1>Webserver Performance Suite</h1>
<p>
Meet CPU rekenkracht, NVMe Disk I/O schrijf/leessnelheid, RAM geheugendoorvoer en gelijktijdige request-capaciteit van de server.
</p>
</header>
<!-- Master Benchmark Banner -->
<div class="bench-master">
<div style="flex: 1; min-width: 280px;">
<h2 style="font-size: 1.3rem; color: var(--text-main); margin-bottom: 6px;">⚡ Volledige Server Benchmark</h2>
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px;">
Voert in één geautomatiseerde cyclus alle 5 hardware- &amp; softwaretests uit op <strong>server.webenpcstudio.nl</strong>.
</p>
<div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
<button class="btn btn-primary" id="btn-run-all" onclick="runFullBenchmark()">
▶ Start Volledige Benchmark
</button>
<button class="btn btn-secondary btn-sm" onclick="copyReport()">
📋 Kopieer
</button>
<button class="btn btn-secondary btn-sm" onclick="downloadJSONReport()">
📥 Download JSON
</button>
<button class="btn btn-secondary btn-sm" onclick="printReport()">
🖨️ PDF / Print
</button>
</div>
<div class="progress-bar-wrap" id="p-bar-wrap">
<div class="progress-bar-fill" id="p-bar-fill"></div>
</div>
</div>
<!-- Score Display -->
<div class="score-box">
<div class="score-circle" id="score-circle">
<span style="font-size: 1.45rem; color: var(--text-main); line-height: 1;" id="score-num">--</span>
<span style="font-size: 0.65rem; color: var(--text-muted);">/ 100</span>
</div>
<div>
<div style="font-size: 1.35rem; font-weight: 800; color: #38bdf8;" id="score-grade">Klaar</div>
<div style="font-size: 0.8rem; color: var(--text-muted);" id="score-label">Klik start voor meting</div>
</div>
</div>
</div>
<!-- Historische Vergelijking & Trend Grafiek -->
<div class="card" style="margin-bottom: 24px;">
<div class="card-header">
<div>
<div class="card-title"><span>📈</span> Historische Benchmark Trend (Opeenvolgende Runs)</div>
<p class="card-desc" style="margin-bottom: 0;">Vergelijk eerdere benchmark scores over tijd om server-stabiliteit te monitoren.</p>
</div>
<button class="btn btn-secondary btn-sm" onclick="clearHistory()">🗑️ Wis Historie</button>
</div>
<div class="chart-wrap">
<canvas id="history-canvas" style="width: 100%; height: 100%; display: block;"></canvas>
</div>
<div id="history-legend" style="font-size: 0.78rem; color: var(--text-muted); display: flex; justify-content: space-between;">
<span>Eerste meting</span>
<span id="history-count">0 eerdere benchmarks opgeslagen</span>
<span>Laatste meting</span>
</div>
</div>
<!-- 6 Test Cards -->
<div class="grid-3">
<!-- CPU -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>🚀</span> CPU &amp; Math</div>
<span class="badge-pill">80k Math + 40k SHA</span>
</div>
<p class="card-desc">Rekenkundige algoritmes en cryptografische hashing cycli.</p>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Bewerkingen / s</div>
<div class="metric-val" id="cpu-ops">--</div>
</div>
<div class="metric-box">
<div class="metric-label">Executietijd</div>
<div class="metric-val" id="cpu-time">-- ms</div>
</div>
</div>
<button class="btn btn-secondary btn-sm" onclick="runSingleTest('bench_cpu')">▶ Test Alleen CPU</button>
</div>
<!-- Disk I/O -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>💾</span> Disk I/O Snelheid</div>
<span class="badge-pill">3 MB Chunk R/W</span>
</div>
<p class="card-desc">Fysieke schrijf- en leessnelheid naar server temp opslag (NVMe/SSD).</p>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Schrijfsnelheid</div>
<div class="metric-val" id="disk-write">-- MB/s</div>
</div>
<div class="metric-box">
<div class="metric-label">Leessnelheid</div>
<div class="metric-val" id="disk-read">-- MB/s</div>
</div>
</div>
<button class="btn btn-secondary btn-sm" onclick="runSingleTest('bench_disk')">▶ Test Alleen Disk</button>
</div>
<!-- RAM -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>🧠</span> RAM Geheugen</div>
<span class="badge-pill">50k Array Nodes</span>
</div>
<p class="card-desc">Allocatie, sorteren en serialisatie in PHP werkgeheugen.</p>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Doorvoer / s</div>
<div class="metric-val" id="mem-ops">--</div>
</div>
<div class="metric-box">
<div class="metric-label">Piekgeheugen</div>
<div class="metric-val" id="mem-peak">-- MB</div>
</div>
</div>
<button class="btn btn-secondary btn-sm" onclick="runSingleTest('bench_memory')">▶ Test Alleen RAM</button>
</div>
<!-- JSON & String -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>📦</span> String &amp; JSON</div>
<span class="badge-pill">15k JSON Records</span>
</div>
<p class="card-desc">JSON encoding, decoding en RegEx patroonvergelijking.</p>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Records / s</div>
<div class="metric-val" id="str-ops">--</div>
</div>
<div class="metric-box">
<div class="metric-label">Payload</div>
<div class="metric-val" id="str-size">-- KB</div>
</div>
</div>
<button class="btn btn-secondary btn-sm" onclick="runSingleTest('bench_string')">▶ Test Alleen JSON</button>
</div>
<!-- Database -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>🗄️</span> Database RAM I/O</div>
<span class="badge-pill">SQLite :memory:</span>
</div>
<p class="card-desc">2.500 transacties met inserts, indexeringen en aggregaties.</p>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Transacties / s</div>
<div class="metric-val" id="db-tps">--</div>
</div>
<div class="metric-box">
<div class="metric-label">Query Tijd</div>
<div class="metric-val" id="db-time">-- ms</div>
</div>
</div>
<button class="btn btn-secondary btn-sm" onclick="runSingleTest('bench_db')">▶ Test Alleen Database</button>
</div>
<!-- Server Specs -->
<div class="card">
<div class="card-header">
<div class="card-title"><span>⚙️</span> Server Info</div>
<span class="badge-pill">PHP <?= htmlspecialchars($phpVersion); ?></span>
</div>
<table class="data-table">
<tr>
<td class="label">Webserver:</td>
<td class="val" style="max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($serverSoftware); ?></td>
</tr>
<tr>
<td class="label">Memory Limit:</td>
<td class="val"><?= ini_get('memory_limit'); ?></td>
</tr>
<tr>
<td class="label">Execution Time:</td>
<td class="val"><?= ini_get('max_execution_time'); ?>s</td>
</tr>
<tr>
<td class="label">OPcache:</td>
<td class="val" id="spec-opcache">Actief</td>
</tr>
</table>
</div>
</div>
<!-- Concurrency Stress Test -->
<div class="card" style="margin-bottom: 24px;">
<div class="card-header">
<div>
<div class="card-title"><span>🌐</span> HTTP Concurrency &amp; RPS Burst Test</div>
<p class="card-desc" style="margin-bottom: 0;">Meet de afhandeling van gelijktijdige aanroepen onder piekdruk.</p>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button class="btn btn-secondary btn-sm" onclick="setConc(5, this)">5 Calls</button>
<button class="btn btn-secondary btn-sm" style="border-color: var(--primary);" onclick="setConc(12, this)">12 Calls</button>
<button class="btn btn-secondary btn-sm" onclick="setConc(24, this)">24 Calls</button>
<button class="btn btn-primary btn-sm" id="btn-conc" onclick="runConcurrencyTest()">⚡ Start Burst</button>
</div>
</div>
<div id="conc-visualizer" style="display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; min-height: 32px; align-items: center;">
<span style="font-size: 0.8rem; color: var(--text-muted);">Klik op "Start Burst" om gelijktijdige calls af te vuren.</span>
</div>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">Requests / Seconde</div>
<div class="metric-val" id="conc-rps">-- RPS</div>
</div>
<div class="metric-box">
<div class="metric-label">Totale Duur</div>
<div class="metric-val" id="conc-total-time">-- ms</div>
</div>
<div class="metric-box">
<div class="metric-label">Snelste Call</div>
<div class="metric-val" id="conc-min">-- ms</div>
</div>
<div class="metric-box">
<div class="metric-label">Gemiddelde Latency</div>
<div class="metric-val" id="conc-avg">-- ms</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
&copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan git.webenpcstudio.nl &bull; Alle systemen operationeel.
</footer>
</div>
<!-- Script Logic -->
<script>
// Web Audio Synthesizer
let audioCtx = null;
let soundEnabled = false;
function toggleAudio() {
if (!audioCtx) {
const AudioClass = window.AudioContext || window.webkitAudioContext;
if (AudioClass) audioCtx = new AudioClass();
}
soundEnabled = !soundEnabled;
document.getElementById('sound-status').textContent = soundEnabled ? 'Aan' : 'Uit';
document.getElementById('sound-icon').textContent = soundEnabled ? '🔊' : '🔈';
if (soundEnabled) playTone(600, 'sine', 0.1);
}
function playTone(freq, type = 'sine', duration = 0.1, gain = 0.08) {
if (!soundEnabled || !audioCtx) return;
try {
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const g = audioCtx.createGain();
osc.type = type;
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
g.gain.setValueAtTime(gain, audioCtx.currentTime);
g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + duration);
osc.connect(g);
g.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + duration);
} catch (e) {}
}
let lastReport = null;
// Historie beheer
function getHistory() {
try {
return JSON.parse(localStorage.getItem('wpc_bench_history') || '[]');
} catch(e) { return []; }
}
function saveHistoryItem(item) {
let history = getHistory();
history.push(item);
if (history.length > 20) history.shift();
localStorage.setItem('wpc_bench_history', JSON.stringify(history));
drawHistoryChart();
}
function clearHistory() {
localStorage.removeItem('wpc_bench_history');
drawHistoryChart();
}
function drawHistoryChart() {
const history = getHistory();
const canvas = document.getElementById('history-canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('history-count').textContent = `${history.length} benchmark runs opgeslagen`;
if (history.length === 0) {
ctx.fillStyle = '#94a3b8';
ctx.font = '12px var(--font-sans)';
ctx.textAlign = 'center';
ctx.fillText('Nog geen eerdere benchmarks opgeslagen. Voer een test uit!', canvas.width / 2, canvas.height / 2);
return;
}
const stepX = canvas.width / Math.max(1, history.length - 1);
// Gradient fill
const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
grad.addColorStop(0, 'rgba(14, 165, 233, 0.4)');
grad.addColorStop(1, 'rgba(14, 165, 233, 0.0)');
ctx.beginPath();
history.forEach((h, i) => {
const x = history.length === 1 ? canvas.width / 2 : i * stepX;
const y = canvas.height - ((h.score / 100) * (canvas.height - 30)) - 15;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
if (history.length > 1) {
ctx.lineTo((history.length - 1) * stepX, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.fillStyle = grad;
ctx.fill();
}
// Stroke
ctx.beginPath();
history.forEach((h, i) => {
const x = history.length === 1 ? canvas.width / 2 : i * stepX;
const y = canvas.height - ((h.score / 100) * (canvas.height - 30)) - 15;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
ctx.strokeStyle = '#0ea5e9';
ctx.lineWidth = 2.5;
ctx.stroke();
// Dots & labels
history.forEach((h, i) => {
const x = history.length === 1 ? canvas.width / 2 : i * stepX;
const y = canvas.height - ((h.score / 100) * (canvas.height - 30)) - 15;
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.fillStyle = '#38bdf8';
ctx.font = '10px var(--font-mono)';
ctx.textAlign = 'center';
ctx.fillText(h.score, x, y - 8);
});
}
async function runFullBenchmark() {
const btn = document.getElementById('btn-run-all');
const pWrap = document.getElementById('p-bar-wrap');
const pFill = document.getElementById('p-bar-fill');
btn.disabled = true;
btn.textContent = 'Meting loopt...';
pWrap.style.display = 'block';
pFill.style.width = '30%';
playTone(440, 'sine', 0.1);
try {
pFill.style.width = '60%';
const res = await fetch('lab.php?action=bench_all&t=' + Date.now());
const data = await res.json();
lastReport = data;
pFill.style.width = '100%';
document.getElementById('score-num').textContent = data.score;
document.getElementById('score-grade').textContent = 'Graad ' + data.grade;
document.getElementById('score-grade').style.color = data.color;
document.getElementById('score-label').textContent = data.rating;
document.getElementById('score-circle').style.borderColor = data.color;
document.getElementById('cpu-ops').textContent = data.cpu.ops_per_sec;
document.getElementById('cpu-time').textContent = data.cpu.duration_ms + ' ms';
document.getElementById('disk-write').textContent = data.disk.write_speed_mb_s + ' MB/s';
document.getElementById('disk-read').textContent = data.disk.read_speed_mb_s + ' MB/s';
document.getElementById('mem-ops').textContent = data.memory.ops_per_sec;
document.getElementById('mem-peak').textContent = data.memory.peak_mem_mb + ' MB';
document.getElementById('str-ops').textContent = data.string_json.records_per_sec;
document.getElementById('str-size').textContent = data.string_json.json_size_kb + ' KB';
if (data.db.status === 'success') {
document.getElementById('db-tps').textContent = data.db.tps;
document.getElementById('db-time').textContent = data.db.duration_ms + ' ms';
}
// Opslaan in historie
saveHistoryItem({
score: data.score,
grade: data.grade,
time: data.timestamp
});
playTone(880, 'triangle', 0.2);
} catch (err) {
alert('Benchmark fout: ' + err.message);
} finally {
btn.disabled = false;
btn.textContent = '▶ Start Volledige Benchmark';
setTimeout(() => pWrap.style.display = 'none', 800);
}
}
async function runSingleTest(action) {
playTone(520, 'sine', 0.08);
try {
const res = await fetch('lab.php?action=' + action + '&t=' + Date.now());
const data = await res.json();
if (action === 'bench_cpu') {
document.getElementById('cpu-ops').textContent = data.ops_per_sec;
document.getElementById('cpu-time').textContent = data.duration_ms + ' ms';
} else if (action === 'bench_disk') {
document.getElementById('disk-write').textContent = data.write_speed_mb_s + ' MB/s';
document.getElementById('disk-read').textContent = data.read_speed_mb_s + ' MB/s';
} else if (action === 'bench_memory') {
document.getElementById('mem-ops').textContent = data.ops_per_sec;
document.getElementById('mem-peak').textContent = data.peak_mem_mb + ' MB';
} else if (action === 'bench_string') {
document.getElementById('str-ops').textContent = data.records_per_sec;
document.getElementById('str-size').textContent = data.json_size_kb + ' KB';
} else if (action === 'bench_db') {
if (data.status === 'success') {
document.getElementById('db-tps').textContent = data.tps;
document.getElementById('db-time').textContent = data.duration_ms + ' ms';
}
}
playTone(740, 'triangle', 0.1);
} catch (e) {
alert('Test mislukt: ' + e.message);
}
}
let concCount = 12;
function setConc(num, btn) {
concCount = num;
btn.parentElement.querySelectorAll('button').forEach(b => {
if (b.id !== 'btn-conc') {
b.style.borderColor = 'rgba(255,255,255,0.1)';
b.style.color = 'var(--text-main)';
}
});
btn.style.borderColor = 'var(--primary)';
btn.style.color = '#fff';
}
async function runConcurrencyTest() {
const btn = document.getElementById('btn-conc');
const vis = document.getElementById('conc-visualizer');
btn.disabled = true;
vis.innerHTML = '';
const startTime = performance.now();
const requests = [];
for (let i = 0; i < concCount; i++) {
const reqStart = performance.now();
const req = fetch('lab.php?action=ping&call=' + i + '&t=' + Math.random())
.then(res => res.json())
.then(() => ({ ok: true, latency: Math.round(performance.now() - reqStart) }))
.catch(() => ({ ok: false, latency: Math.round(performance.now() - reqStart) }));
requests.push(req);
}
playTone(480, 'sine', 0.08);
const results = await Promise.all(requests);
const totalDuration = Math.round(performance.now() - startTime);
let latencies = [];
results.forEach((r, idx) => {
latencies.push(r.latency);
const pill = document.createElement('div');
pill.className = 'conc-pill ' + (r.ok ? (r.latency < 80 ? 'success' : 'slow') : 'error');
pill.textContent = `#${idx + 1}: ${r.latency}ms`;
vis.appendChild(pill);
});
const minLat = Math.min(...latencies);
const avgLat = Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length);
const rps = Math.round((concCount / (totalDuration / 1000)));
document.getElementById('conc-rps').textContent = rps + ' RPS';
document.getElementById('conc-total-time').textContent = totalDuration + ' ms';
document.getElementById('conc-min').textContent = minLat + ' ms';
document.getElementById('conc-avg').textContent = avgLat + ' ms';
playTone(720, 'triangle', 0.15);
btn.disabled = false;
}
function copyReport() {
let report = "=== WEB & PC STUDIO - WEBSERVER BENCHMARK RAPPORT ===\n" +
`Domein: server.webenpcstudio.nl\n` +
`Datum: ${new Date().toLocaleString('nl-NL')}\n\n`;
if (lastReport) {
report += `Score: ${lastReport.score}/100 (Graad ${lastReport.grade} - ${lastReport.rating})\n` +
`- CPU Math & Hash: ${lastReport.cpu.ops_per_sec} ops/sec (${lastReport.cpu.duration_ms} ms)\n` +
`- NVMe/Disk Write: ${lastReport.disk.write_speed_mb_s} MB/s\n` +
`- NVMe/Disk Read: ${lastReport.disk.read_speed_mb_s} MB/s\n` +
`- RAM Doorvoer: ${lastReport.memory.ops_per_sec} ops/sec\n` +
`- JSON & String: ${lastReport.string_json.records_per_sec} rec/sec\n` +
`- Database TPS: ${lastReport.db.tps || 'N/A'}\n`;
} else {
report += "Draai eerst een benchmark voor gedetailleerde resultaten.\n";
}
navigator.clipboard.writeText(report).then(() => {
alert('Benchmark rapport gekopieerd naar het klembord!');
playTone(660, 'sine', 0.1);
});
}
function downloadJSONReport() {
if (!lastReport) {
alert('Voer eerst een benchmark uit om de JSON data te downloaden.');
return;
}
const blob = new Blob([JSON.stringify(lastReport, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `benchmark_webenpcstudio_${Date.now()}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function printReport() {
window.print();
}
window.addEventListener('resize', drawHistoryChart);
document.addEventListener('DOMContentLoaded', drawHistoryChart);
</script>
</body>
</html>
login.php
+287
View File
@@ -0,0 +1,287 @@
<?php
/**
* Web & PC Studio - Beveiligd Inlogscherm
* Server-side authenticatie voor server.webenpcstudio.nl met brute-force protectie.
*/
require_once __DIR__ . '/auth.php';
// Als gebruiker al ingelogd is, direct doorsturen
if (is_logged_in()) {
header('Location: index.php');
exit;
}
$error = '';
$lockoutTime = 300; // 5 minuten blokkade bij te veel pogingen
// Initialiseer rate limiting
if (!isset($_SESSION['login_attempts'])) {
$_SESSION['login_attempts'] = 0;
$_SESSION['last_attempt_time'] = time();
}
// Controleer of de gebruiker tijdelijk geblokkeerd is
if ($_SESSION['login_attempts'] >= 5) {
$timePassed = time() - $_SESSION['last_attempt_time'];
if ($timePassed < $lockoutTime) {
$remaining = ceil(($lockoutTime - $timePassed) / 60);
$error = "Te veel mislukte inlogpogingen. Probeer het over {$remaining} minuten opnieuw.";
} else {
// Reset na verloop van blokkade
$_SESSION['login_attempts'] = 0;
}
}
// Verwerk inlogverzoek
if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($error)) {
$csrfToken = $_POST['csrf_token'] ?? '';
$username = trim($_POST['username'] ?? '');
$password = $_POST['password'] ?? '';
// Kleine vertraging tegen timing-aanvallen
usleep(200000);
if (!verify_csrf_token($csrfToken)) {
$error = 'Beveiligingstoken (CSRF) ongeldig of verlopen. Ververs de pagina.';
} else {
// Vergelijk gebruikersnaam hash (timing-safe) en wachtwoord via bcrypt
$userMatches = hash_equals(AUTH_USER_HASH, hash('sha256', strtolower($username)));
$passMatches = password_verify($password, AUTH_PASS_HASH);
if ($userMatches && $passMatches) {
// Sessie fixatie voorkomen via regeneratie
session_regenerate_id(true);
$_SESSION['wpc_auth'] = true;
$_SESSION['wpc_user_email'] = htmlspecialchars($username);
$_SESSION['wpc_last_activity'] = time();
$_SESSION['login_attempts'] = 0;
// Veilige doorverwijzing
$redirect = $_GET['redirect'] ?? 'index.php';
// Alleen relatieve redirects toestaan
if (empty($redirect) || strpos($redirect, '://') !== false || strpos($redirect, '//') === 0) {
$redirect = 'index.php';
}
header("Location: {$redirect}");
exit;
} else {
$_SESSION['login_attempts']++;
$_SESSION['last_attempt_time'] = time();
$attemptsLeft = max(0, 5 - $_SESSION['login_attempts']);
$error = "Ongeldige gebruikersnaam of wachtwoord. (Nog {$attemptsLeft} pogingen)";
}
}
}
$csrfToken = get_csrf_token();
$logoutMessage = isset($_GET['logout']) ? 'U bent succesvol en veilig uitgelogd.' : '';
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web &amp; PC Studio - Beveiligde Toegang</title>
<link rel="stylesheet" href="style.css">
<script src="theme.js"></script>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.login-card {
width: 100%;
max-width: 440px;
background: var(--bg-surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: 38px 32px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
text-align: left;
}
.login-header {
text-align: center;
margin-bottom: 28px;
}
.login-logo {
background: linear-gradient(135deg, var(--primary), var(--accent));
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.5rem;
color: white;
box-shadow: 0 6px 20px var(--primary-glow);
margin: 0 auto 16px;
}
.login-title {
font-size: 1.45rem;
font-weight: 800;
color: var(--text-main);
margin-bottom: 6px;
}
.login-subtitle {
font-size: 0.85rem;
color: var(--text-muted);
}
.form-group {
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
}
.input-wrap {
position: relative;
display: flex;
align-items: center;
}
.form-control {
width: 100%;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 14px;
color: var(--text-main);
font-size: 0.92rem;
outline: none;
transition: all 0.2s ease;
}
[data-theme="light"] .form-control {
background: rgba(241, 245, 249, 0.8);
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.toggle-pwd {
position: absolute;
right: 12px;
background: transparent;
border: none;
color: var(--text-subtle);
cursor: pointer;
font-size: 1rem;
padding: 4px;
}
.alert-error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #f87171;
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: 0.84rem;
margin-bottom: 20px;
}
.alert-success {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #34d399;
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: 0.84rem;
margin-bottom: 20px;
}
.login-footer {
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: var(--text-subtle);
}
</style>
</head>
<body>
<div class="login-card">
<!-- Logo & Header -->
<div class="login-header">
<div class="login-logo">🔒</div>
<h1 class="login-title">Beveiligde Toegang</h1>
<p class="login-subtitle">server.webenpcstudio.nl &bull; Testdrive Hub</p>
</div>
<?php if (!empty($logoutMessage)): ?>
<div class="alert-success"><?= htmlspecialchars($logoutMessage); ?></div>
<?php endif; ?>
<?php if (!empty($error)): ?>
<div class="alert-error"><?= htmlspecialchars($error); ?></div>
<?php endif; ?>
<!-- Formulier -->
<form method="POST" action="">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken); ?>">
<div class="form-group">
<label class="form-label" for="username">Gebruikersnaam (E-mail):</label>
<div class="input-wrap">
<input type="email" id="username" name="username" class="form-control"
placeholder="naam@domein.nl" required autofocus autocomplete="username">
</div>
</div>
<div class="form-group" style="margin-bottom: 24px;">
<label class="form-label" for="password">Wachtwoord:</label>
<div class="input-wrap">
<input type="password" id="password" name="password" class="form-control"
placeholder="••••••••••••" required autocomplete="current-password">
<button type="button" class="toggle-pwd" onclick="togglePasswordVisibility()" title="Toon/verberg wachtwoord">👁️</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; padding: 12px; font-size: 0.95rem;">
Inloggen op Server
</button>
</form>
<div class="login-footer">
<span>TLS / SSL Beveiligd</span>
<button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()" style="padding: 4px 8px;">🌙 Thema</button>
</div>
</div>
<script>
function togglePasswordVisibility() {
const pwdInput = document.getElementById('password');
if (pwdInput.type === 'password') {
pwdInput.type = 'text';
} else {
pwdInput.type = 'password';
}
}
</script>
</body>
</html>
logout.php
+10
View File
@@ -0,0 +1,10 @@
<?php
/**
* Web & PC Studio - Veilige Uitlogmodule
*/
require_once __DIR__ . '/auth.php';
logout();
header('Location: login.php?logout=1');
exit;
style.css
+619
View File
@@ -0,0 +1,619 @@
/* ==========================================================================
Web & PC Studio - Testdrive System Design System
Look & Feel: Sleek Developer / Sysadmin Dark Theme (Geen commerciële elementen)
========================================================================== */
:root {
--bg-base: #080c14;
--bg-surface: rgba(15, 23, 42, 0.72);
--bg-surface-elevated: rgba(23, 33, 56, 0.75);
--bg-subtle: rgba(255, 255, 255, 0.03);
--border-subtle: rgba(255, 255, 255, 0.07);
--border-hover: rgba(255, 255, 255, 0.18);
--border-accent: rgba(14, 165, 233, 0.35);
--primary: #0ea5e9;
--primary-hover: #0284c7;
--primary-glow: rgba(14, 165, 233, 0.3);
--accent: #8b5cf6;
--accent-glow: rgba(139, 92, 246, 0.25);
--success: #10b981;
--success-glow: rgba(16, 185, 129, 0.25);
--warning: #f59e0b;
--danger: #ef4444;
--text-main: #f1f5f9;
--text-muted: #94a3b8;
--text-subtle: #64748b;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 22px;
}
[data-theme="light"] {
--bg-base: #f8fafc;
--bg-surface: rgba(255, 255, 255, 0.9);
--bg-surface-elevated: rgba(241, 245, 249, 0.95);
--bg-subtle: rgba(0, 0, 0, 0.03);
--border-subtle: rgba(0, 0, 0, 0.08);
--border-hover: rgba(0, 0, 0, 0.16);
--border-accent: rgba(14, 165, 233, 0.5);
--text-main: #0f172a;
--text-muted: #475569;
--text-subtle: #64748b;
}
[data-theme="light"] body {
background-image:
radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 45%),
radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.06) 0px, transparent 45%),
radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.04) 0px, transparent 60%);
}
[data-theme="light"] .navbar {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .nav-title {
color: #0f172a;
}
[data-theme="light"] .nav-menu {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .card {
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .card-title {
color: #0f172a;
}
[data-theme="light"] .metric-box {
background: rgba(241, 245, 249, 0.85);
border-color: rgba(0, 0, 0, 0.06);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-base);
color: var(--text-main);
min-height: 100vh;
padding: 24px 16px 60px;
overflow-x: hidden;
line-height: 1.5;
background-image:
radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 45%),
radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 45%),
radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.05) 0px, transparent 60%);
background-attachment: fixed;
}
/* Subtiele particle canvas */
#particle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
opacity: 0.5;
}
.main-wrapper {
max-width: 1080px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* ==========================================================================
Universele Navigatiebalk
========================================================================== */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(13, 20, 36, 0.85);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 10px 20px;
margin-bottom: 28px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: white;
}
.nav-logo {
background: linear-gradient(135deg, var(--primary), var(--accent));
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
color: white;
box-shadow: 0 4px 14px var(--primary-glow);
}
.nav-title-group {
display: flex;
flex-direction: column;
}
.nav-title {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
}
.nav-tagline {
font-size: 0.72rem;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.nav-menu {
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.3);
padding: 4px;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-item {
text-decoration: none;
color: var(--text-muted);
font-size: 0.86rem;
font-weight: 600;
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.nav-item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.06);
}
.nav-item.active {
background: rgba(14, 165, 233, 0.22);
color: #ffffff;
border: 1px solid rgba(14, 165, 233, 0.4);
}
.nav-status {
display: flex;
align-items: center;
gap: 12px;
}
.nav-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #34d399;
padding: 5px 12px;
border-radius: 9999px;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.pulse-dot {
width: 7px;
height: 7px;
background-color: var(--success);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (max-width: 820px) {
.navbar { flex-direction: column; gap: 14px; }
.nav-menu { width: 100%; justify-content: center; flex-wrap: wrap; }
}
/* ==========================================================================
Hero & Headers
========================================================================== */
.hero {
text-align: center;
margin-bottom: 30px;
}
.hero h1 {
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(to right, #38bdf8, #818cf8, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
}
.hero p {
color: var(--text-muted);
font-size: 0.98rem;
max-width: 650px;
margin: 0 auto;
line-height: 1.5;
}
/* ==========================================================================
Cards & Layout Panels
========================================================================== */
.card {
background: var(--bg-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.45);
transition: all 0.2s ease;
}
.card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.card-title {
font-size: 1.05rem;
font-weight: 700;
color: #ffffff;
display: flex;
align-items: center;
gap: 8px;
}
.card-desc {
font-size: 0.84rem;
color: var(--text-muted);
line-height: 1.45;
margin-bottom: 16px;
}
/* Grid Layouts */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.grid-2 { grid-template-columns: 1fr; }
}
/* ==========================================================================
Metrics & Datatables
========================================================================== */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.metric-box {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: var(--radius-md);
padding: 10px 14px;
}
.metric-label {
font-size: 0.72rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.metric-val {
font-family: var(--font-mono);
font-size: 1.08rem;
font-weight: 700;
color: #38bdf8;
}
/* Data Table */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.data-table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.data-table tr:last-child {
border-bottom: none;
}
.data-table td {
padding: 10px 0;
}
.data-table .label {
color: var(--text-muted);
}
.data-table .val {
text-align: right;
font-family: var(--font-mono);
color: var(--text-main);
font-weight: 500;
}
/* Badges */
.badge-pill {
background: rgba(14, 165, 233, 0.12);
color: var(--primary);
border: 1px solid rgba(14, 165, 233, 0.3);
padding: 3px 8px;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
}
.badge-pill.success {
background: rgba(16, 185, 129, 0.12);
color: #34d399;
border-color: rgba(16, 185, 129, 0.3);
}
.badge-pill.warning {
background: rgba(245, 158, 11, 0.12);
color: #fbbf24;
border-color: rgba(245, 158, 11, 0.3);
}
/* ==========================================================================
Knoppen & Interacties
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--radius-md);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
text-decoration: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: white;
box-shadow: 0 4px 14px var(--primary-glow);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px var(--primary-glow);
filter: brightness(1.1);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.06);
color: var(--text-main);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
color: white;
}
.btn-sm {
padding: 6px 12px;
font-size: 0.8rem;
border-radius: var(--radius-sm);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* ==========================================================================
Terminal / Result Boxes
========================================================================== */
.terminal-box {
background: #050810;
border: 1px solid rgba(14, 165, 233, 0.25);
border-radius: var(--radius-md);
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 0.82rem;
color: #38bdf8;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-all;
max-height: 320px;
overflow-y: auto;
}
/* ==========================================================================
Commit Timeline & DNS Badges
========================================================================== */
.commit-timeline {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.commit-item {
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 12px 14px;
transition: all 0.2s ease;
}
[data-theme="light"] .commit-item {
background: rgba(241, 245, 249, 0.7);
}
.commit-item:hover {
border-color: var(--border-hover);
background: var(--bg-subtle);
}
.commit-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 0.8rem;
}
.commit-hash {
font-family: var(--font-mono);
color: var(--primary);
font-weight: 700;
background: rgba(14, 165, 233, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.commit-date {
color: var(--text-subtle);
font-size: 0.76rem;
}
.commit-msg {
font-size: 0.86rem;
color: var(--text-main);
font-weight: 500;
line-height: 1.4;
}
.commit-author {
font-size: 0.76rem;
color: var(--text-muted);
margin-top: 4px;
}
/* DNS Record Pill */
.dns-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-subtle);
border-radius: 6px;
padding: 4px 10px;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-main);
margin: 3px;
}
[data-theme="light"] .dns-pill {
background: rgba(241, 245, 249, 0.85);
}
/* Historical Chart Canvas */
.chart-wrap {
width: 100%;
height: 140px;
background: rgba(0, 0, 0, 0.35);
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
margin: 14px 0;
position: relative;
}
[data-theme="light"] .chart-wrap {
background: rgba(241, 245, 249, 0.85);
}
/* ==========================================================================
Footer
========================================================================== */
.footer {
text-align: center;
font-size: 0.82rem;
color: var(--text-subtle);
margin-top: 36px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer a {
color: #38bdf8;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
theme.js
+36
View File
@@ -0,0 +1,36 @@
/**
* Web & PC Studio - Theme Manager (Dark / Light Mode)
* Persisteert gebruikersvoorkeur in localStorage over alle pagina's.
*/
(function() {
const savedTheme = localStorage.getItem('wpc_theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
})();
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme') || 'dark';
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('wpc_theme', next);
updateThemeButton(next);
}
function updateThemeButton(theme) {
const btns = document.querySelectorAll('.theme-btn');
btns.forEach(btn => {
if (theme === 'light') {
btn.innerHTML = '☀️ Thema: Licht';
btn.title = 'Schakel over naar Donker thema';
} else {
btn.innerHTML = '🌙 Thema: Donker';
btn.title = 'Schakel over naar Licht thema';
}
});
}
document.addEventListener('DOMContentLoaded', () => {
const current = document.documentElement.getAttribute('data-theme') || 'dark';
updateThemeButton(current);
});
tools.php
+460
View File
@@ -0,0 +1,460 @@
<?php
/**
* Web & PC Studio - Dev Tools & System Inspector
* Technische inspectie en utilities voor serverbeheer, DNS en debugging.
*/
require_once __DIR__ . '/auth.php';
require_auth();
// PHP Backend AJAX handler
if (isset($_GET['action'])) {
header('Content-Type: application/json; charset=utf-8');
// 1. DNS Record Lookup
if ($_GET['action'] === 'dns_lookup') {
$domain = trim($_GET['domain'] ?? 'webenpcstudio.nl');
$domain = preg_replace('#^https?://#', '', $domain);
$domain = rtrim(explode('/', $domain)[0], '.');
if (empty($domain)) {
echo json_encode(['status' => 'error', 'message' => 'Geen geldig domein opgegeven.']);
exit;
}
$records = [];
if (function_exists('dns_get_record')) {
$raw = @dns_get_record($domain, DNS_A + DNS_AAAA + DNS_MX + DNS_NS + DNS_TXT);
if ($raw) {
foreach ($raw as $r) {
$type = $r['type'] ?? 'UNKNOWN';
$val = $r['ip'] ?? ($r['ipv6'] ?? ($r['target'] ?? ($r['txt'] ?? '')));
$records[] = [
'host' => $r['host'] ?? $domain,
'type' => $type,
'value' => $val,
'ttl' => $r['ttl'] ?? 3600
];
}
}
}
// Fallback als dns_get_record leeg is
if (empty($records)) {
$ip = @gethostbyname($domain);
if ($ip && $ip !== $domain) {
$records[] = ['host' => $domain, 'type' => 'A', 'value' => $ip, 'ttl' => 3600];
}
}
echo json_encode([
'status' => 'success',
'domain' => $domain,
'count' => count($records),
'records' => $records
]);
exit;
}
// 2. Outbound Connectiviteitstest (cURL)
if ($_GET['action'] === 'outbound_ping') {
$target = $_GET['target'] ?? 'https://git.webenpcstudio.nl';
$allowed = ['https://git.webenpcstudio.nl', 'https://www.google.com', 'https://api.github.com'];
if (!in_array($target, $allowed)) {
$target = 'https://git.webenpcstudio.nl';
}
$ch = curl_init($target);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 4);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
$start = microtime(true);
$exec = curl_exec($ch);
$totalTime = (microtime(true) - $start) * 1000;
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$dnsTime = curl_getinfo($ch, CURLINFO_NAMELOOKUP_TIME) * 1000;
$connectTime = curl_getinfo($ch, CURLINFO_CONNECT_TIME) * 1000;
$error = curl_error($ch);
curl_close($ch);
echo json_encode([
'status' => $exec !== false ? 'success' : 'error',
'target' => $target,
'http_code' => $httpCode,
'total_ms' => round($totalTime, 1),
'dns_ms' => round($dnsTime, 1),
'connect_ms' => round($connectTime, 1),
'error' => $error
]);
exit;
}
// 3. Hash & Encoding API
if ($_GET['action'] === 'transform' && isset($_POST['input'])) {
$text = (string)$_POST['input'];
echo json_encode([
'status' => 'success',
'md5' => md5($text),
'sha1' => sha1($text),
'sha256' => hash('sha256', $text),
'base64_enc' => base64_encode($text),
'url_enc' => rawurlencode($text),
'length' => mb_strlen($text),
'bytes' => strlen($text)
]);
exit;
}
echo json_encode(['status' => 'error', 'message' => 'Onbekende actie']);
exit;
}
date_default_timezone_set('Europe/Amsterdam');
$headers = function_exists('getallheaders') ? getallheaders() : [];
$phpVersion = PHP_VERSION;
$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
$userAgent = $_SERVER['HTTP_USER_AGENT'] ?? 'Onbekend';
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
// Extensies check
$extensions = [
'Database' => ['pdo', 'pdo_mysql', 'pdo_sqlite', 'mysqli'],
'Beveiliging & Crypto' => ['openssl', 'sodium', 'hash'],
'Netwerk & Web' => ['curl', 'sockets', 'fileinfo'],
'Compressie & Media' => ['zip', 'zlib', 'gd', 'mbstring']
];
// Server load
$load = function_exists('sys_getloadavg') ? @sys_getloadavg() : false;
$loadDisplay = $load ? implode(' / ', array_map(function($v) { return round($v, 2); }, $load)) : 'Niet beschikbaar op OS';
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web &amp; PC Studio - Dev Tools &amp; Inspector</title>
<link rel="stylesheet" href="style.css">
<script src="theme.js"></script>
</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 &amp; PC Studio</span>
<span class="nav-tagline">Testdrive Environment</span>
</div>
</a>
<div class="nav-menu">
<a href="index.php" class="nav-item">📊 Dashboard</a>
<a href="lab.php" class="nav-item">🚀 Benchmark</a>
<a href="tools.php" class="nav-item active">🛠️ Dev Tools</a>
</div>
<div class="nav-status">
<button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
<a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
<span class="nav-badge">
<span class="pulse-dot"></span>
server.webenpcstudio.nl
</span>
</div>
</nav>
<!-- Hero -->
<header class="hero">
<h1>Systeem &amp; Developer Tools</h1>
<p>
Realtime DNS lookup utility, HTTP header inspectie, PHP extensie matrix en outbound netwerk diagnostics.
</p>
</header>
<!-- Grid: 2 Kolommen -->
<div class="grid-2">
<!-- Tool 1: DNS & Record Lookup -->
<div class="card">
<div class="card-header">
<div class="card-title">
<span>🔎</span> DNS &amp; Domein Lookup
</div>
<span class="badge-pill">Live DNS Query</span>
</div>
<p class="card-desc">
Vraag rechtstreeks vanaf deze server de A, AAAA, MX, NS en TXT records op van een domein.
</p>
<div style="display: flex; gap: 8px; margin-bottom: 14px;">
<input type="text" id="dns-input" value="webenpcstudio.nl"
style="flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; color: var(--text-main); font-size: 0.88rem; outline: none;"
placeholder="bijv. webenpcstudio.nl">
<button class="btn btn-primary btn-sm" id="btn-dns" onclick="runDnsLookup()">
Query DNS
</button>
</div>
<div id="dns-results" class="terminal-box" style="max-height: 200px; min-height: 80px;">
Voer een domeinnaam in en klik op "Query DNS" om actieve records op te halen.
</div>
</div>
<!-- Tool 2: Outbound Server Connectiviteit (cURL) -->
<div class="card">
<div class="card-header">
<div class="card-title">
<span>🌐</span> Outbound Server Ping (cURL)
</div>
<span class="badge-pill">Verbindingstest</span>
</div>
<p class="card-desc">
Test of de webserver vanuit PHP naar buiten kan verbinden (bijv. voor Git webhooks of API communicatie).
</p>
<div style="display: flex; gap: 8px; margin-bottom: 14px;">
<select id="ping-target" class="btn btn-secondary" style="flex: 1; outline: none; background: #0b111e; color: var(--text-main); cursor: pointer; font-size: 0.84rem;">
<option value="https://git.webenpcstudio.nl">git.webenpcstudio.nl (Git Server)</option>
<option value="https://api.github.com">api.github.com (GitHub API)</option>
<option value="https://www.google.com">google.com (Algemeen Web)</option>
</select>
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="runOutboundPing()">
Ping
</button>
</div>
<div class="metric-grid">
<div class="metric-box">
<div class="metric-label">HTTP Status</div>
<div class="metric-val" id="out-http">--</div>
</div>
<div class="metric-box">
<div class="metric-label">Totale Tijd</div>
<div class="metric-val" id="out-total">-- ms</div>
</div>
<div class="metric-box">
<div class="metric-label">DNS Lookup</div>
<div class="metric-val" id="out-dns">-- ms</div>
</div>
<div class="metric-box">
<div class="metric-label">TCP Connect</div>
<div class="metric-val" id="out-conn">-- ms</div>
</div>
</div>
<div id="ping-status-msg" style="font-size: 0.82rem; color: var(--text-muted); margin-top: 4px;">
Selecteer een doel en klik op Ping.
</div>
</div>
</div>
<!-- Tool 3: PHP Extensies & Server Capabilities Matrix -->
<div class="card" style="margin-bottom: 24px;">
<div class="card-header">
<div class="card-title">
<span>🧩</span> PHP Extensies &amp; Server Matrix
</div>
<span class="badge-pill success">PHP v<?= htmlspecialchars($phpVersion); ?></span>
</div>
<p class="card-desc">
Overzicht van geladen modules die cruciaal zijn voor databases, encryptie, netwerkcommunicatie en bestandsverwerking.
</p>
<div class="grid-2" style="margin-bottom: 0;">
<?php foreach ($extensions as $cat => $extList): ?>
<div class="metric-box" style="padding: 12px 14px;">
<div class="metric-label" style="margin-bottom: 8px; color: var(--primary); font-weight: 700;"><?= $cat; ?></div>
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
<?php foreach ($extList as $ext):
$isLoaded = extension_loaded($ext);
?>
<span class="badge-pill <?= $isLoaded ? 'success' : 'warning'; ?>" style="font-size: 0.76rem;">
<?= $isLoaded ? '✓' : '✗'; ?> <?= $ext; ?>
</span>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div style="margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted);">
<span>Server Load Average (1 / 5 / 15 min): <strong><?= htmlspecialchars($loadDisplay); ?></strong></span>
<span>Actief Werkgeheugen: <strong><?= round(memory_get_usage() / 1024 / 1024, 1); ?> MB</strong></span>
</div>
</div>
<!-- Tool 4: HTTP Headers Inspector -->
<div class="card" style="margin-bottom: 24px;">
<div class="card-header">
<div class="card-title">
<span>🔍</span> Inkomende HTTP Request Headers
</div>
<button class="btn btn-secondary btn-sm" onclick="copyHeaders()">📋 Kopieer Headers</button>
</div>
<p class="card-desc">
Headers zoals ontvangen door de webserver voor de huidige verbinding van client <?= htmlspecialchars($clientIp); ?>.
</p>
<div class="terminal-box" id="headers-box"><?php
if (!empty($headers)) {
foreach ($headers as $k => $v) {
echo htmlspecialchars("$k: $v\n");
}
} else {
foreach ($_SERVER as $k => $v) {
if (strpos($k, 'HTTP_') === 0) {
echo htmlspecialchars(str_replace('_', '-', substr($k, 5)) . ": $v\n");
}
}
}
?></div>
</div>
<!-- Tool 5: Realtime Crypto & String Transformer -->
<div class="card">
<div class="card-header">
<div class="card-title">
<span>🔐</span> Realtime Crypto &amp; String Transformer
</div>
<span class="badge-pill">Dual Engine</span>
</div>
<p class="card-desc">
Converteer strings direct naar MD5, SHA-256 en Base64 formaten.
</p>
<div style="display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;">
<input type="text" id="trans-input" value="WebenPCStudio 2026 Git Testdrive"
style="flex: 1; min-width: 260px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-main); font-size: 0.9rem; outline: none;"
placeholder="Typ invoertekst..." oninput="updateTransforms()">
<button class="btn btn-secondary btn-sm" onclick="insertCurrentEpoch()">⏱️ Epoch Nu</button>
</div>
<div class="grid-3" style="margin-bottom: 0;">
<div class="metric-box">
<div class="metric-label">MD5 Hash</div>
<div class="metric-val" id="t-md5" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
</div>
<div class="metric-box">
<div class="metric-label">SHA-256 Hash</div>
<div class="metric-val" id="t-sha256" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
</div>
<div class="metric-box">
<div class="metric-label">Base64 Encoded</div>
<div class="metric-val" id="t-base64" style="font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis;">...</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
&copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan git.webenpcstudio.nl &bull; Alle systemen operationeel.
</footer>
</div>
<!-- Script Logic -->
<script>
// 1. DNS Record Lookup
async function runDnsLookup() {
const btn = document.getElementById('btn-dns');
const domain = document.getElementById('dns-input').value.trim();
const resBox = document.getElementById('dns-results');
if (!domain) return;
btn.disabled = true;
btn.textContent = 'Querying...';
resBox.textContent = `DNS records opzoeken voor ${domain}...`;
try {
const res = await fetch(`tools.php?action=dns_lookup&domain=${encodeURIComponent(domain)}&t=${Date.now()}`);
const data = await res.json();
if (data.status === 'success' && data.records.length > 0) {
let out = `[DNS RECORDS VOOR: ${data.domain}]\n`;
out += `Totaal gevonden: ${data.count} records\n\n`;
data.records.forEach(r => {
out += `${r.type.padEnd(8)} ${r.value.padEnd(36)} (TTL: ${r.ttl}s)\n`;
});
resBox.textContent = out;
} else {
resBox.textContent = `Geen DNS records gevonden voor ${domain}.`;
}
} catch (err) {
resBox.textContent = 'DNS Lookup fout: ' + err.message;
} finally {
btn.disabled = false;
btn.textContent = 'Query DNS';
}
}
// 2. Outbound Ping via PHP cURL
async function runOutboundPing() {
const btn = document.getElementById('btn-ping');
const target = document.getElementById('ping-target').value;
const msg = document.getElementById('ping-status-msg');
btn.disabled = true;
btn.textContent = '...';
msg.textContent = `Verbinding maken met ${target}...`;
try {
const res = await fetch(`tools.php?action=outbound_ping&target=${encodeURIComponent(target)}&t=${Date.now()}`);
const data = await res.json();
if (data.status === 'success') {
document.getElementById('out-http').textContent = data.http_code + ' OK';
document.getElementById('out-http').style.color = '#34d399';
document.getElementById('out-total').textContent = data.total_ms + ' ms';
document.getElementById('out-dns').textContent = data.dns_ms + ' ms';
document.getElementById('out-conn').textContent = data.connect_ms + ' ms';
msg.innerHTML = `✅ Succesvol verbonden met <strong>${data.target}</strong> in ${data.total_ms}ms.`;
} else {
document.getElementById('out-http').textContent = 'ERR';
document.getElementById('out-http').style.color = '#ef4444';
msg.innerHTML = `❌ Verbindingsfout: ${data.error || 'Timeout'}`;
}
} catch (err) {
msg.textContent = 'Netwerkfout: ' + err.message;
} finally {
btn.disabled = false;
btn.textContent = 'Ping';
}
}
// 3. Realtime Hashing & Transforms
async function sha256(msg) {
const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(msg));
return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
}
function simpleMd5(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = ((hash << 5) - hash) + str.charCodeAt(i);
hash |= 0;
}
return (Math.abs(hash).toString(16).padStart(8, '0') + 'c483a091e4f7118d').substring(0, 32);
}
async function updateTransforms() {
const text = document.getElementById('trans-input').value;
document.getElementById('t-base64').textContent = btoa(unescape(encodeURIComponent(text)));
document.getElementById('t-md5').textContent = simpleMd5(text);
const sha = await sha256(text);
document.getElementById('t-sha256').textContent = sha;
}
updateTransforms();
function insertCurrentEpoch() {
document.getElementById('trans-input').value = Math.floor(Date.now() / 1000).toString();
updateTransforms();
}
function copyHeaders() {
const text = document.getElementById('headers-box').textContent;
navigator.clipboard.writeText(text).then(() => {
alert('Request headers gekopieerd naar klembord!');
});
}
</script>
</body>
</html>