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.
This commit is contained in:
@@ -1,10 +1,15 @@
|
||||
<?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.
|
||||
*/
|
||||
|
||||
// Snelle API responder voor AJAX pings
|
||||
if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
echo json_encode([
|
||||
'status' => 'success',
|
||||
'message' => 'PHP backend reageert succesvol!',
|
||||
'message' => 'PHP backend reageert naar behoren.',
|
||||
'timestamp' => date('d-m-Y H:i:s'),
|
||||
'php_version' => PHP_VERSION,
|
||||
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
||||
@@ -14,7 +19,6 @@ if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Server configuratie & variabelen
|
||||
date_default_timezone_set('Europe/Amsterdam');
|
||||
$serverTime = date('d-m-Y H:i:s');
|
||||
$phpVersion = PHP_VERSION;
|
||||
@@ -28,604 +32,214 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Web & PC Studio - Git & PHP Live Test</title>
|
||||
<style>
|
||||
:root {
|
||||
--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;
|
||||
padding: 24px 16px 60px;
|
||||
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%);
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
max-width: 780px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Top Menu Balk */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 18px;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
background: linear-gradient(135deg, var(--primary), var(--purple));
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px var(--primary-glow);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 4px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
text-decoration: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(59, 130, 246, 0.25);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.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.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.navbar { flex-direction: column; gap: 12px; }
|
||||
.nav-menu { width: 100%; justify-content: center; flex-wrap: wrap; }
|
||||
}
|
||||
|
||||
.container {
|
||||
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>
|
||||
<title>Web & PC Studio - Systeem Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
<!-- Bovenste Menu Balk (Navigatie) -->
|
||||
<!-- Bovenste Menu Balk -->
|
||||
<nav class="navbar">
|
||||
<a href="index.php" class="nav-brand">
|
||||
<div class="nav-logo">⚡</div>
|
||||
<div class="nav-title">Web & PC Studio</div>
|
||||
<div class="nav-title-group">
|
||||
<span class="nav-title">Web & PC Studio</span>
|
||||
<span class="nav-tagline">Testdrive Environment</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="nav-menu">
|
||||
<a href="index.php" class="nav-item active">🏠 Home</a>
|
||||
<a href="lab.php" class="nav-item">🧪 Dev Lab</a>
|
||||
<a href="services.php" class="nav-item">🛠️ Diensten & Offerte</a>
|
||||
<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-badge">
|
||||
<span class="pulse-dot"></span>
|
||||
<span>Git Online</span>
|
||||
<div class="nav-status">
|
||||
<span class="nav-badge">
|
||||
<span class="pulse-dot"></span>
|
||||
Git Live
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="badges-row">
|
||||
<span class="badge badge-success">
|
||||
<span class="pulse-dot"></span>
|
||||
Git Systeem Actief
|
||||
</span>
|
||||
<span class="badge badge-php">
|
||||
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
|
||||
</span>
|
||||
<!-- Hero -->
|
||||
<header class="hero">
|
||||
<h1>Systeem Dashboard & Git Status</h1>
|
||||
<p>
|
||||
Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor www.webenpcstudio.nl.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Systeem Status Grid -->
|
||||
<div class="grid-2">
|
||||
<!-- Kaart 1: Systeeminformatie -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>🖥️</span> Webserver Omgeving
|
||||
</div>
|
||||
<span class="badge-pill success">Operationeel</span>
|
||||
</div>
|
||||
<h1>Web & PC Studio</h1>
|
||||
<p class="subtitle">
|
||||
Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime.
|
||||
<p class="card-desc">
|
||||
Actieve server-parameters gedetecteerd door de PHP runtime engine.
|
||||
</p>
|
||||
|
||||
<table class="data-table">
|
||||
<tr>
|
||||
<td class="label">Host Domein:</td>
|
||||
<td class="val"><?= htmlspecialchars($host); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Verbindingsprotocol:</td>
|
||||
<td class="val"><?= htmlspecialchars($protocol); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">PHP Engine:</td>
|
||||
<td class="val">v<?= htmlspecialchars($phpVersion); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Webserver Software:</td>
|
||||
<td class="val" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($serverSoftware); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Client IP:</td>
|
||||
<td class="val"><?= htmlspecialchars($clientIp); ?></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Live Clock Bar (JavaScript) -->
|
||||
<div class="clock-bar">
|
||||
<span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
|
||||
<span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
|
||||
</div>
|
||||
<!-- Kaart 2: Git Repository & Deployment -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>🌿</span> Git CI/CD Sync
|
||||
</div>
|
||||
<span class="badge-pill">Verbonden</span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Status van de gekoppelde Git repository en automatische webhook updates.
|
||||
</p>
|
||||
|
||||
<!-- Tab Navigatie -->
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
|
||||
<button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
|
||||
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab 1: Overzicht -->
|
||||
<div id="tab-overzicht" class="tab-content active">
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Host Domein:</span>
|
||||
<span class="info-value"><?= htmlspecialchars($host); ?></span>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div style="margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
|
||||
<a href="lab.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #2563eb);">
|
||||
🧪 Developer Lab
|
||||
</a>
|
||||
<a href="services.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); background: linear-gradient(135deg, #10b981, #059669);">
|
||||
🛠️ Diensten & Offerte
|
||||
</a>
|
||||
<table class="data-table">
|
||||
<tr>
|
||||
<td class="label">Git Server:</td>
|
||||
<td class="val">git.webenpcstudio.nl</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Repository:</td>
|
||||
<td class="val">NiekRabelink/Testdrive</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Actieve Branch:</td>
|
||||
<td class="val">main</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Deploy Type:</td>
|
||||
<td class="val">Automatische Webhook Push</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Testdrive Status:</td>
|
||||
<td class="val" style="color: #34d399;">Gereed & Gesynchroniseerd</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Live Diagnose / JS interactie -->
|
||||
<div id="tab-diagnose" class="tab-content">
|
||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px;">
|
||||
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.
|
||||
</p>
|
||||
<div class="actions-group">
|
||||
<button class="btn btn-primary" id="btn-run-test" onclick="runServerTest()">
|
||||
<!-- Kaart 3: Live Tijd en Server Ping Diagnose -->
|
||||
<div class="card" style="margin-bottom: 24px;">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>⏱️</span> Realtime Verbinding & Diagnose
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
|
||||
⚡ Test Server Ping (AJAX)
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="btn-copy" onclick="copySystemInfo()">
|
||||
📋 Kopieer Status
|
||||
</button>
|
||||
</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: #f1f5f9;"><?= htmlspecialchars($serverTime); ?></div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-label">Browser Tijd (JS)</div>
|
||||
<div class="metric-val" id="client-time" style="font-size: 0.95rem;">--:--:--</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-label">Laatste Latency</div>
|
||||
<div class="metric-val" id="ping-latency">-- ms</div>
|
||||
</div>
|
||||
<div class="metric-box">
|
||||
<div class="metric-label">Geheugengebruik</div>
|
||||
<div class="metric-val" id="ping-mem">-- MB</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ping-result-box" class="terminal-box" style="display: none; margin-top: 12px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Git Informatie -->
|
||||
<div id="tab-git" class="tab-content">
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Git Systeem:</span>
|
||||
<span class="info-value">git.webenpcstudio.nl</span>
|
||||
<!-- Quick Jump Links naar de andere onderdelen -->
|
||||
<div class="grid-2">
|
||||
<a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
||||
<div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
|
||||
<div>
|
||||
<h3 style="font-size: 1.05rem; color: #fff; margin-bottom: 4px;">Webserver Benchmark Suite →</h3>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.</p>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Repository:</span>
|
||||
<span class="info-value">NiekRabelink/Testdrive</span>
|
||||
</a>
|
||||
<a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
||||
<div style="font-size: 2rem; background: rgba(139, 92, 246, 0.12); padding: 12px; border-radius: 12px;">🛠️</div>
|
||||
<div>
|
||||
<h3 style="font-size: 1.05rem; color: #fff; margin-bottom: 4px;">Developer & Systeem Tools →</h3>
|
||||
<p style="font-size: 0.82rem; color: var(--text-muted);">Inspecteer HTTP headers, cURL verbindingen en cryptografie.</p>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
© <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Functionaliteit -->
|
||||
<script>
|
||||
// 1. Live Client Klok
|
||||
function updateClientClock() {
|
||||
// 1. Live browser klok
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const formatted = now.toLocaleTimeString('nl-NL', { hour12: false });
|
||||
document.getElementById('client-time').textContent = formatted;
|
||||
document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
|
||||
}
|
||||
setInterval(updateClientClock, 1000);
|
||||
updateClientClock();
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// 2. Tab Switcher
|
||||
function switchTab(tabId) {
|
||||
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
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');
|
||||
|
||||
// 2. Server AJAX Ping
|
||||
async function testServerPing() {
|
||||
const btn = document.getElementById('btn-ping');
|
||||
const resBox = document.getElementById('ping-result-box');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '⏳ Verbinding testen...';
|
||||
resultBox.style.display = 'block';
|
||||
resultBox.textContent = 'Verzoek verzenden naar index.php?api=status...';
|
||||
|
||||
const startTime = performance.now();
|
||||
btn.textContent = 'Meting loopt...';
|
||||
|
||||
const start = performance.now();
|
||||
try {
|
||||
const response = await fetch('index.php?api=status');
|
||||
const data = await response.json();
|
||||
const latency = Math.round(performance.now() - startTime);
|
||||
const res = await fetch('index.php?api=status&t=' + Date.now());
|
||||
const data = await res.json();
|
||||
const latency = Math.round(performance.now() - start);
|
||||
|
||||
resultBox.innerHTML = `✅ <strong>Succesvolle verbinding!</strong> (Latency: ${latency}ms)\n\n` +
|
||||
`Status: ${data.status}\n` +
|
||||
`Bericht: ${data.message}\n` +
|
||||
`Server Tijd: ${data.timestamp}\n` +
|
||||
`PHP Versie: ${data.php_version}\n` +
|
||||
`Geheugengebruik: ${data.memory_usage}\n` +
|
||||
`Server: ${data.server_software}`;
|
||||
document.getElementById('ping-latency').textContent = latency + ' ms';
|
||||
document.getElementById('ping-mem').textContent = data.memory_usage;
|
||||
|
||||
resBox.style.display = 'block';
|
||||
resBox.textContent = `[PONG] Verbinding succesvol!\n` +
|
||||
`Status: ${data.status}\n` +
|
||||
`Server Tijd: ${data.timestamp}\n` +
|
||||
`PHP Versie: v${data.php_version}\n` +
|
||||
`Geheugen: ${data.memory_usage}\n` +
|
||||
`Round-trip: ${latency} ms`;
|
||||
} catch (err) {
|
||||
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 {
|
||||
btn.disabled = false;
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user