507 lines
17 KiB
PHP
507 lines
17 KiB
PHP
<?php
|
|
// Eenvoudige ingebouwde API endpoint voor JavaScript AJAX interactie
|
|
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!',
|
|
'timestamp' => date('d-m-Y H:i:s'),
|
|
'php_version' => PHP_VERSION,
|
|
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
|
'server_software' => $_SERVER['SERVER_SOFTWARE'] ?? 'Webserver',
|
|
'ip' => $_SERVER['REMOTE_ADDR'] ?? 'Onbekend'
|
|
]);
|
|
exit;
|
|
}
|
|
|
|
// Server configuratie & variabelen
|
|
date_default_timezone_set('Europe/Amsterdam');
|
|
$serverTime = date('d-m-Y H:i:s');
|
|
$phpVersion = PHP_VERSION;
|
|
$serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
|
|
$host = $_SERVER['HTTP_HOST'] ?? 'www.webenpcstudio.nl';
|
|
$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
|
|
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web & PC Studio - 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;
|
|
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>
|
|
<body>
|
|
<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>
|
|
</div>
|
|
<h1>Web & PC Studio</h1>
|
|
<p class="subtitle">
|
|
Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime.
|
|
</p>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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()">
|
|
⚡ 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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Repository:</span>
|
|
<span class="info-value">NiekRabelink/Testdrive</span>
|
|
</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>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
© <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript Functionaliteit -->
|
|
<script>
|
|
// 1. Live Client Klok
|
|
function updateClientClock() {
|
|
const now = new Date();
|
|
const formatted = now.toLocaleTimeString('nl-NL', { hour12: false });
|
|
document.getElementById('client-time').textContent = formatted;
|
|
}
|
|
setInterval(updateClientClock, 1000);
|
|
updateClientClock();
|
|
|
|
// 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');
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = '⏳ Verbinding testen...';
|
|
resultBox.style.display = 'block';
|
|
resultBox.textContent = 'Verzoek verzenden naar index.php?api=status...';
|
|
|
|
const startTime = performance.now();
|
|
|
|
try {
|
|
const response = await fetch('index.php?api=status');
|
|
const data = await response.json();
|
|
const latency = Math.round(performance.now() - startTime);
|
|
|
|
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}`;
|
|
} catch (err) {
|
|
resultBox.innerHTML = `❌ <strong>Fout bij verbinden met PHP backend:</strong>\n${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>
|