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();
|
||||
|
||||
// 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');
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// 2. Server AJAX Ping
|
||||
async function testServerPing() {
|
||||
const btn = document.getElementById('btn-ping');
|
||||
const resBox = document.getElementById('ping-result-box');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '⏳ 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>
|
||||
|
||||
|
||||
-731
@@ -1,731 +0,0 @@
|
||||
<?php
|
||||
// PHP Backend Handler voor formulierverzending (AJAX)
|
||||
if (isset($_GET['action']) && $_GET['action'] === 'submit') {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
$naam = trim($_POST['naam'] ?? '');
|
||||
$email = trim($_POST['email'] ?? '');
|
||||
$diensten = $_POST['diensten'] ?? [];
|
||||
$opmerking = trim($_POST['opmerking'] ?? '');
|
||||
$totaal = floatval($_POST['totaal'] ?? 0);
|
||||
|
||||
if (empty($naam) || empty($email)) {
|
||||
echo json_encode([
|
||||
'status' => 'error',
|
||||
'message' => 'Vul alstublieft een geldige naam en e-mailadres in.'
|
||||
]);
|
||||
exit;
|
||||
}
|
||||
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
echo json_encode([
|
||||
'status' => 'error',
|
||||
'message' => 'Het opgegeven e-mailadres is ongeldig.'
|
||||
]);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Genereer referentienummer
|
||||
$refNummer = 'WPC-' . date('Y') . '-' . strtoupper(substr(md5(uniqid()), 0, 5));
|
||||
|
||||
echo json_encode([
|
||||
'status' => 'success',
|
||||
'referentie' => $refNummer,
|
||||
'naam' => htmlspecialchars($naam),
|
||||
'email' => htmlspecialchars($email),
|
||||
'totaal' => '€' . number_format($totaal, 2, ',', '.'),
|
||||
'aantal_diensten' => count($diensten),
|
||||
'timestamp' => date('d-m-Y H:i:s'),
|
||||
'message' => 'Uw aanvraag is succesvol geregistreerd door het PHP backend systeem!'
|
||||
]);
|
||||
exit;
|
||||
}
|
||||
|
||||
date_default_timezone_set('Europe/Amsterdam');
|
||||
$phpVersion = PHP_VERSION;
|
||||
?>
|
||||
<!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 - Diensten & Offerte Calculator</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
--primary-glow: rgba(59, 130, 246, 0.35);
|
||||
--accent: #10b981;
|
||||
--accent-glow: rgba(16, 185, 129, 0.3);
|
||||
--bg: #0b0f19;
|
||||
--panel-bg: rgba(23, 32, 51, 0.75);
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
--text: #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);
|
||||
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(16, 185, 129, 0.15) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
max-width: 960px;
|
||||
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(--border);
|
||||
border-radius: 18px;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 32px;
|
||||
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(--accent));
|
||||
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;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: var(--accent);
|
||||
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); }
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(to right, #60a5fa, #34d399);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
color: var(--text-muted);
|
||||
font-size: 1.02rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Layout Grid */
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 24px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.navbar { flex-direction: column; gap: 14px; }
|
||||
.nav-menu { width: 100%; justify-content: center; }
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Interactieve Service Cards */
|
||||
.service-option {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-option:hover {
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
|
||||
.service-option.checked {
|
||||
border-color: var(--primary);
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.service-option input[type="checkbox"] {
|
||||
margin-top: 4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.service-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: white;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.service-price {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: #34d399;
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
/* Totale Prijs Box */
|
||||
.total-box {
|
||||
background: #080c14;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: #60a5fa;
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
/* Formulier Inputs */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, var(--primary), #2563eb);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px var(--primary-glow);
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 22px var(--primary-glow);
|
||||
}
|
||||
|
||||
.btn-submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Feedback Melding */
|
||||
.alert-box {
|
||||
display: none;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-top: 18px;
|
||||
font-size: 0.88rem;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Confetti Canvas */
|
||||
#confetti-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 0.84rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.8;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="confetti-canvas"></canvas>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<!-- Bovenste Menu Balk (Navigatie) -->
|
||||
<nav class="navbar">
|
||||
<a href="index.php" class="nav-brand">
|
||||
<div class="nav-logo">⚡</div>
|
||||
<div class="nav-title">Web & PC Studio</div>
|
||||
</a>
|
||||
<div class="nav-menu">
|
||||
<a href="index.php" class="nav-item">🏠 Home</a>
|
||||
<a href="lab.php" class="nav-item">🧪 Dev Lab</a>
|
||||
<a href="services.php" class="nav-item active">🛠️ Diensten & Offerte</a>
|
||||
</div>
|
||||
<div class="nav-badge">
|
||||
<span class="pulse-dot"></span>
|
||||
<span>Git Online</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Header -->
|
||||
<header class="hero">
|
||||
<h1>Diensten & Offerte Calculator</h1>
|
||||
<p>
|
||||
Selecteer de gewenste modules voor direct financieel inzicht en verstuur een aanvraag via ons PHP backend systeem.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Grid: Calculator links, Contactformulier rechts -->
|
||||
<div class="grid-2">
|
||||
<!-- Linker Paneel: Interactieve Calculator -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>📦</span> Kies Diensten & Modules
|
||||
</div>
|
||||
<span style="font-size: 0.8rem; color: var(--text-muted);">Real-time berekening</span>
|
||||
</div>
|
||||
|
||||
<div class="service-option checked" onclick="toggleOption(this)">
|
||||
<input type="checkbox" value="450" checked name="srv" onchange="calcTotal()">
|
||||
<div class="service-info">
|
||||
<div class="service-name">Maatwerk Website & Landing Page</div>
|
||||
<div class="service-desc">Moderne responsive website, dark/light styling en geoptimaliseerde code.</div>
|
||||
</div>
|
||||
<div class="service-price">€ 450,-</div>
|
||||
</div>
|
||||
|
||||
<div class="service-option checked" onclick="toggleOption(this)">
|
||||
<input type="checkbox" value="175" checked name="srv" onchange="calcTotal()">
|
||||
<div class="service-info">
|
||||
<div class="service-name">Git CI/CD & Webhook Deployment</div>
|
||||
<div class="service-desc">Automatische updates via push naar git.webenpcstudio.nl.</div>
|
||||
</div>
|
||||
<div class="service-price">€ 175,-</div>
|
||||
</div>
|
||||
|
||||
<div class="service-option" onclick="toggleOption(this)">
|
||||
<input type="checkbox" value="120" name="srv" onchange="calcTotal()">
|
||||
<div class="service-info">
|
||||
<div class="service-name">PC Hulp & Hardware Optimalisatie</div>
|
||||
<div class="service-desc">Complete schoonmaak, component-upgrades en dataherstel.</div>
|
||||
</div>
|
||||
<div class="service-price">€ 120,-</div>
|
||||
</div>
|
||||
|
||||
<div class="service-option" onclick="toggleOption(this)">
|
||||
<input type="checkbox" value="95" name="srv" onchange="calcTotal()">
|
||||
<div class="service-info">
|
||||
<div class="service-name">Cloud Back-up & Beveiligingsaudit</div>
|
||||
<div class="service-desc">Dagelijkse geautomatiseerde server snapshot en SSL verificatie.</div>
|
||||
</div>
|
||||
<div class="service-price">€ 95,-</div>
|
||||
</div>
|
||||
|
||||
<!-- Totaal Box -->
|
||||
<div class="total-box">
|
||||
<div>
|
||||
<div class="total-label">Geschatte Investering:</div>
|
||||
<div style="font-size: 0.75rem; color: #34d399;">Inclusief implementatie</div>
|
||||
</div>
|
||||
<div class="total-amount" id="total-display">€ 625,00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechter Paneel: PHP Aanvraagformulier -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>✉️</span> Direct Aanvragen (PHP AJAX)
|
||||
</div>
|
||||
<span style="font-size: 0.78rem; background: rgba(59, 130, 246, 0.15); color: #60a5fa; padding: 2px 8px; border-radius: 6px;">PHP <?= htmlspecialchars($phpVersion); ?></span>
|
||||
</div>
|
||||
|
||||
<form id="aanvraag-form" onsubmit="submitForm(event)">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="naam">Uw Naam / Bedrijf:</label>
|
||||
<input type="text" id="naam" class="form-input" placeholder="bijv. Niek Rabelink" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">E-mailadres:</label>
|
||||
<input type="email" id="email" class="form-input" placeholder="info@webenpcstudio.nl" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="opmerking">Aanvullende Wensen (optioneel):</label>
|
||||
<textarea id="opmerking" class="form-input" placeholder="Vertel kort over uw project of situatie..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-submit" id="submit-btn">
|
||||
<span>🚀</span> Verstuur Aanvraag naar PHP
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Feedback Alert Box -->
|
||||
<div id="alert-box" class="alert-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan Git • Alle systemen operationeel.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript Functionaliteiten -->
|
||||
<script>
|
||||
// 1. Prijs Calculator
|
||||
let currentTotal = 625;
|
||||
|
||||
function toggleOption(cardElement) {
|
||||
const checkbox = cardElement.querySelector('input[type="checkbox"]');
|
||||
if (event.target !== checkbox) {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
}
|
||||
if (checkbox.checked) {
|
||||
cardElement.classList.add('checked');
|
||||
} else {
|
||||
cardElement.classList.remove('checked');
|
||||
}
|
||||
calcTotal();
|
||||
}
|
||||
|
||||
function calcTotal() {
|
||||
const checkboxes = document.querySelectorAll('input[name="srv"]:checked');
|
||||
let sum = 0;
|
||||
checkboxes.forEach(cb => sum += parseFloat(cb.value));
|
||||
|
||||
animateNumber(currentTotal, sum, 300);
|
||||
currentTotal = sum;
|
||||
}
|
||||
|
||||
function animateNumber(from, to, duration) {
|
||||
const display = document.getElementById('total-display');
|
||||
const start = performance.now();
|
||||
|
||||
function step(time) {
|
||||
const elapsed = time - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const current = from + (to - from) * progress;
|
||||
display.textContent = '€ ' + current.toLocaleString('nl-NL', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
// 2. AJAX Formulierverzending naar PHP backend
|
||||
async function submitForm(e) {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('submit-btn');
|
||||
const alertBox = document.getElementById('alert-box');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span>⏳</span> Verwerken in PHP...';
|
||||
alertBox.style.display = 'none';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('naam', document.getElementById('naam').value);
|
||||
formData.append('email', document.getElementById('email').value);
|
||||
formData.append('opmerking', document.getElementById('opmerking').value);
|
||||
formData.append('totaal', currentTotal);
|
||||
|
||||
document.querySelectorAll('input[name="srv"]:checked').forEach(cb => {
|
||||
formData.append('diensten[]', cb.value);
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await fetch('services.php?action=submit', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
alertBox.className = 'alert-box alert-success';
|
||||
alertBox.style.display = 'block';
|
||||
alertBox.innerHTML = `🎉 <strong>${data.message}</strong><br><br>` +
|
||||
`<strong>Referentienummer:</strong> <code>${data.referentie}</code><br>` +
|
||||
`<strong>Klant:</strong> ${data.naam} (${data.email})<br>` +
|
||||
`<strong>Totaalbedrag:</strong> ${data.totaal}<br>` +
|
||||
`<strong>Tijdstip:</strong> ${data.timestamp}`;
|
||||
|
||||
launchConfetti();
|
||||
} else {
|
||||
alertBox.className = 'alert-box alert-error';
|
||||
alertBox.style.display = 'block';
|
||||
alertBox.innerHTML = `⚠️ <strong>Fout:</strong> ${data.message}`;
|
||||
}
|
||||
} catch (err) {
|
||||
alertBox.className = 'alert-box alert-error';
|
||||
alertBox.style.display = 'block';
|
||||
alertBox.innerHTML = `❌ <strong>Verbindingsfout:</strong> ${err.message}`;
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<span>🚀</span> Verstuur Aanvraag naar PHP';
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Canvas Confetti Effect
|
||||
function launchConfetti() {
|
||||
const canvas = document.getElementById('confetti-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const pieces = [];
|
||||
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#38bdf8'];
|
||||
|
||||
for (let i = 0; i < 70; i++) {
|
||||
pieces.push({
|
||||
x: canvas.width / 2,
|
||||
y: canvas.height / 2,
|
||||
vx: (Math.random() - 0.5) * 16,
|
||||
vy: (Math.random() - 0.7) * 16,
|
||||
size: Math.random() * 8 + 4,
|
||||
color: colors[Math.floor(Math.random() * colors.length)],
|
||||
rot: Math.random() * 360,
|
||||
vRot: (Math.random() - 0.5) * 10
|
||||
});
|
||||
}
|
||||
|
||||
let frames = 0;
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
pieces.forEach(p => {
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.vy += 0.35; // zwaartekracht
|
||||
p.rot += p.vRot;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(p.x, p.y);
|
||||
ctx.rotate((p.rot * Math.PI) / 180);
|
||||
ctx.fillStyle = p.color;
|
||||
ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
|
||||
ctx.restore();
|
||||
});
|
||||
|
||||
frames++;
|
||||
if (frames < 100) {
|
||||
requestAnimationFrame(render);
|
||||
} else {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
render();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,473 @@
|
||||
/* ==========================================================================
|
||||
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;
|
||||
}
|
||||
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
<?php
|
||||
/**
|
||||
* Web & PC Studio - Dev Tools & System Inspector
|
||||
* Technische inspectie en utilities voor serverbeheer en debugging.
|
||||
*/
|
||||
|
||||
// PHP Backend AJAX handler
|
||||
if (isset($_GET['action'])) {
|
||||
header('Content-Type: application/json; charset=utf-8');
|
||||
|
||||
// Outbound Connectiviteitstest
|
||||
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;
|
||||
}
|
||||
|
||||
// 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';
|
||||
$sslCipher = $_SERVER['SSL_CIPHER'] ?? ($_SERVER['HTTPS'] ?? 'Niet gedetecteerd');
|
||||
?>
|
||||
<!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 - Dev Tools & Inspector</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
<!-- Bovenste Menu Balk -->
|
||||
<nav class="navbar">
|
||||
<a href="index.php" class="nav-brand">
|
||||
<div class="nav-logo">⚡</div>
|
||||
<div class="nav-title-group">
|
||||
<span class="nav-title">Web & PC Studio</span>
|
||||
<span class="nav-tagline">Testdrive Environment</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="nav-menu">
|
||||
<a href="index.php" class="nav-item">📊 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">
|
||||
<span class="nav-badge">
|
||||
<span class="pulse-dot"></span>
|
||||
Git Live
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<header class="hero">
|
||||
<h1>Systeem & Developer Tools</h1>
|
||||
<p>
|
||||
Inspecteer binnenkomende HTTP headers, valideer server-connectiviteit en gebruik realtime cryptografische encoding tools.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Grid: 2 Kolommen -->
|
||||
<div class="grid-2">
|
||||
<!-- Paneel 1: HTTP Headers & Client Inspectie -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>🔍</span> HTTP Request Inspector
|
||||
</div>
|
||||
<span class="badge-pill"><?= htmlspecialchars($protocol); ?></span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Reële headers zoals ontvangen door de Apache/Nginx webserver voor deze verbinding.
|
||||
</p>
|
||||
|
||||
<table class="data-table" style="margin-bottom: 16px;">
|
||||
<tr>
|
||||
<td class="label">Bezoekers IP:</td>
|
||||
<td class="val"><?= htmlspecialchars($clientIp); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Protocol / SSL:</td>
|
||||
<td class="val"><?= htmlspecialchars($protocol); ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">User-Agent:</td>
|
||||
<td class="val" style="max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<?= htmlspecialchars($userAgent); ?>">
|
||||
<?= htmlspecialchars($userAgent); ?>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="card-header" style="margin-bottom: 8px;">
|
||||
<span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">ALLE REQUEST HEADERS:</span>
|
||||
<button class="btn btn-secondary btn-sm" onclick="copyHeaders()">📋 Kopieer</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Paneel 2: Outbound Server Connectiviteit (cURL) -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>🌐</span> Outbound Server Ping
|
||||
</div>
|
||||
<span class="badge-pill">cURL Test</span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Test of de webserver vanuit PHP naar buiten kan verbinden (bijv. voor Git webhooks of API syncs).
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
|
||||
<select id="ping-target" class="btn btn-secondary" style="flex: 1; outline: none; background: #0b111e; color: #fff; cursor: pointer;">
|
||||
<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 (Algemene DNS/Web)</option>
|
||||
</select>
|
||||
<button class="btn btn-primary" 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: 6px;">
|
||||
Selecteer een doellocatie en klik op Ping om de netwerk-latency te meten.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rij 2: Live String, Hash & Epoch Transformer -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<span>🔐</span> Realtime Crypto & String Transformer
|
||||
</div>
|
||||
<span class="badge-pill">PHP & JS Dual Engine</span>
|
||||
</div>
|
||||
<p class="card-desc">
|
||||
Converteer strings direct naar verschillende hashing formaten, base64 encoding en timestamp berekeningen.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 12px; margin-bottom: 16px; 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.4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; color: #fff; font-size: 0.9rem; outline: none;"
|
||||
placeholder="Typ invoertekst..." oninput="updateTransforms()">
|
||||
<button class="btn btn-secondary" 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">
|
||||
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Script Logic -->
|
||||
<script>
|
||||
// 1. 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';
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 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>
|
||||
Reference in New Issue
Block a user