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
|
<?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') {
|
if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
||||||
header('Content-Type: application/json; charset=utf-8');
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
echo json_encode([
|
echo json_encode([
|
||||||
'status' => 'success',
|
'status' => 'success',
|
||||||
'message' => 'PHP backend reageert succesvol!',
|
'message' => 'PHP backend reageert naar behoren.',
|
||||||
'timestamp' => date('d-m-Y H:i:s'),
|
'timestamp' => date('d-m-Y H:i:s'),
|
||||||
'php_version' => PHP_VERSION,
|
'php_version' => PHP_VERSION,
|
||||||
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
||||||
@@ -14,7 +19,6 @@ if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
|||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Server configuratie & variabelen
|
|
||||||
date_default_timezone_set('Europe/Amsterdam');
|
date_default_timezone_set('Europe/Amsterdam');
|
||||||
$serverTime = date('d-m-Y H:i:s');
|
$serverTime = date('d-m-Y H:i:s');
|
||||||
$phpVersion = PHP_VERSION;
|
$phpVersion = PHP_VERSION;
|
||||||
@@ -28,604 +32,214 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Web & PC Studio - Git & PHP Live Test</title>
|
<title>Web & PC Studio - Systeem Dashboard</title>
|
||||||
<style>
|
<link rel="stylesheet" href="style.css">
|
||||||
: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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main-wrapper">
|
<div class="main-wrapper">
|
||||||
<!-- Bovenste Menu Balk (Navigatie) -->
|
<!-- Bovenste Menu Balk -->
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<a href="index.php" class="nav-brand">
|
<a href="index.php" class="nav-brand">
|
||||||
<div class="nav-logo">⚡</div>
|
<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>
|
</a>
|
||||||
<div class="nav-menu">
|
<div class="nav-menu">
|
||||||
<a href="index.php" class="nav-item active">🏠 Home</a>
|
<a href="index.php" class="nav-item active">📊 Dashboard</a>
|
||||||
<a href="lab.php" class="nav-item">🧪 Dev Lab</a>
|
<a href="lab.php" class="nav-item">🚀 Benchmark</a>
|
||||||
<a href="services.php" class="nav-item">🛠️ Diensten & Offerte</a>
|
<a href="tools.php" class="nav-item">🛠️ Dev Tools</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-badge">
|
<div class="nav-status">
|
||||||
<span class="pulse-dot"></span>
|
<span class="nav-badge">
|
||||||
<span>Git Online</span>
|
<span class="pulse-dot"></span>
|
||||||
|
Git Live
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container">
|
<!-- Hero -->
|
||||||
<!-- Header -->
|
<header class="hero">
|
||||||
<div class="header">
|
<h1>Systeem Dashboard & Git Status</h1>
|
||||||
<div class="badges-row">
|
<p>
|
||||||
<span class="badge badge-success">
|
Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor www.webenpcstudio.nl.
|
||||||
<span class="pulse-dot"></span>
|
</p>
|
||||||
Git Systeem Actief
|
</header>
|
||||||
</span>
|
|
||||||
<span class="badge badge-php">
|
<!-- Systeem Status Grid -->
|
||||||
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
|
<div class="grid-2">
|
||||||
</span>
|
<!-- 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>
|
</div>
|
||||||
<h1>Web & PC Studio</h1>
|
<p class="card-desc">
|
||||||
<p class="subtitle">
|
Actieve server-parameters gedetecteerd door de PHP runtime engine.
|
||||||
Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime.
|
|
||||||
</p>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Live Clock Bar (JavaScript) -->
|
<!-- Kaart 2: Git Repository & Deployment -->
|
||||||
<div class="clock-bar">
|
<div class="card">
|
||||||
<span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
|
<div class="card-header">
|
||||||
<span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
|
<div class="card-title">
|
||||||
</div>
|
<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 -->
|
<table class="data-table">
|
||||||
<div class="tabs">
|
<tr>
|
||||||
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
|
<td class="label">Git Server:</td>
|
||||||
<button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
|
<td class="val">git.webenpcstudio.nl</td>
|
||||||
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
|
</tr>
|
||||||
</div>
|
<tr>
|
||||||
|
<td class="label">Repository:</td>
|
||||||
<!-- Tab 1: Overzicht -->
|
<td class="val">NiekRabelink/Testdrive</td>
|
||||||
<div id="tab-overzicht" class="tab-content active">
|
</tr>
|
||||||
<div class="info-card">
|
<tr>
|
||||||
<div class="info-row">
|
<td class="label">Actieve Branch:</td>
|
||||||
<span class="info-label">Host Domein:</span>
|
<td class="val">main</td>
|
||||||
<span class="info-value"><?= htmlspecialchars($host); ?></span>
|
</tr>
|
||||||
</div>
|
<tr>
|
||||||
<div class="info-row">
|
<td class="label">Deploy Type:</td>
|
||||||
<span class="info-label">Protocol:</span>
|
<td class="val">Automatische Webhook Push</td>
|
||||||
<span class="info-value"><?= htmlspecialchars($protocol); ?></span>
|
</tr>
|
||||||
</div>
|
<tr>
|
||||||
<div class="info-row">
|
<td class="label">Testdrive Status:</td>
|
||||||
<span class="info-label">PHP Versie:</span>
|
<td class="val" style="color: #34d399;">Gereed & Gesynchroniseerd</td>
|
||||||
<span class="info-value">v<?= htmlspecialchars($phpVersion); ?></span>
|
</tr>
|
||||||
</div>
|
</table>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab 2: Live Diagnose / JS interactie -->
|
<!-- Kaart 3: Live Tijd en Server Ping Diagnose -->
|
||||||
<div id="tab-diagnose" class="tab-content">
|
<div class="card" style="margin-bottom: 24px;">
|
||||||
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px;">
|
<div class="card-header">
|
||||||
Klik op de knop hieronder om via een asynchrone JavaScript <code>fetch()</code> aanroep een realtime JSON response op te halen bij de PHP server.
|
<div class="card-title">
|
||||||
</p>
|
<span>⏱️</span> Realtime Verbinding & Diagnose
|
||||||
<div class="actions-group">
|
</div>
|
||||||
<button class="btn btn-primary" id="btn-run-test" onclick="runServerTest()">
|
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
|
||||||
⚡ Test Server Ping (AJAX)
|
⚡ Test Server Ping (AJAX)
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-secondary" id="btn-copy" onclick="copySystemInfo()">
|
|
||||||
📋 Kopieer Status
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="test-result" class="result-box"></div>
|
<div class="metric-grid">
|
||||||
|
<div class="metric-box">
|
||||||
|
<div class="metric-label">Server Tijd (PHP)</div>
|
||||||
|
<div class="metric-val" id="server-time" style="font-size: 0.95rem; color: #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>
|
</div>
|
||||||
|
|
||||||
<!-- Tab 3: Git Informatie -->
|
<!-- Quick Jump Links naar de andere onderdelen -->
|
||||||
<div id="tab-git" class="tab-content">
|
<div class="grid-2">
|
||||||
<div class="info-card">
|
<a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
||||||
<div class="info-row">
|
<div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
|
||||||
<span class="info-label">Git Systeem:</span>
|
<div>
|
||||||
<span class="info-value">git.webenpcstudio.nl</span>
|
<h3 style="font-size: 1.05rem; color: #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>
|
||||||
<div class="info-row">
|
</a>
|
||||||
<span class="info-label">Repository:</span>
|
<a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
||||||
<span class="info-value">NiekRabelink/Testdrive</span>
|
<div style="font-size: 2rem; background: rgba(139, 92, 246, 0.12); padding: 12px; border-radius: 12px;">🛠️</div>
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.05rem; color: #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>
|
||||||
<div class="info-row">
|
</a>
|
||||||
<span class="info-label">Branch:</span>
|
|
||||||
<span class="info-value">main</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="info-label">Deploy Modus:</span>
|
|
||||||
<span class="info-value tag-pill">PHP + JS Enabled</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<div class="footer">
|
<footer class="footer">
|
||||||
© <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
|
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
|
||||||
</div>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- JavaScript Functionaliteit -->
|
<!-- JavaScript Functionaliteit -->
|
||||||
<script>
|
<script>
|
||||||
// 1. Live Client Klok
|
// 1. Live browser klok
|
||||||
function updateClientClock() {
|
function updateClock() {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const formatted = now.toLocaleTimeString('nl-NL', { hour12: false });
|
document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
|
||||||
document.getElementById('client-time').textContent = formatted;
|
|
||||||
}
|
}
|
||||||
setInterval(updateClientClock, 1000);
|
setInterval(updateClock, 1000);
|
||||||
updateClientClock();
|
updateClock();
|
||||||
|
|
||||||
// 2. Tab Switcher
|
// 2. Server AJAX Ping
|
||||||
function switchTab(tabId) {
|
async function testServerPing() {
|
||||||
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
|
const btn = document.getElementById('btn-ping');
|
||||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
const resBox = document.getElementById('ping-result-box');
|
||||||
|
|
||||||
document.getElementById(tabId).classList.add('active');
|
|
||||||
event.target.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Asynchrone PHP AJAX Test
|
|
||||||
async function runServerTest() {
|
|
||||||
const btn = document.getElementById('btn-run-test');
|
|
||||||
const resultBox = document.getElementById('test-result');
|
|
||||||
|
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
btn.textContent = '⏳ Verbinding testen...';
|
btn.textContent = 'Meting loopt...';
|
||||||
resultBox.style.display = 'block';
|
|
||||||
resultBox.textContent = 'Verzoek verzenden naar index.php?api=status...';
|
|
||||||
|
|
||||||
const startTime = performance.now();
|
|
||||||
|
|
||||||
|
const start = performance.now();
|
||||||
try {
|
try {
|
||||||
const response = await fetch('index.php?api=status');
|
const res = await fetch('index.php?api=status&t=' + Date.now());
|
||||||
const data = await response.json();
|
const data = await res.json();
|
||||||
const latency = Math.round(performance.now() - startTime);
|
const latency = Math.round(performance.now() - start);
|
||||||
|
|
||||||
resultBox.innerHTML = `✅ <strong>Succesvolle verbinding!</strong> (Latency: ${latency}ms)\n\n` +
|
document.getElementById('ping-latency').textContent = latency + ' ms';
|
||||||
`Status: ${data.status}\n` +
|
document.getElementById('ping-mem').textContent = data.memory_usage;
|
||||||
`Bericht: ${data.message}\n` +
|
|
||||||
`Server Tijd: ${data.timestamp}\n` +
|
resBox.style.display = 'block';
|
||||||
`PHP Versie: ${data.php_version}\n` +
|
resBox.textContent = `[PONG] Verbinding succesvol!\n` +
|
||||||
`Geheugengebruik: ${data.memory_usage}\n` +
|
`Status: ${data.status}\n` +
|
||||||
`Server: ${data.server_software}`;
|
`Server Tijd: ${data.timestamp}\n` +
|
||||||
|
`PHP Versie: v${data.php_version}\n` +
|
||||||
|
`Geheugen: ${data.memory_usage}\n` +
|
||||||
|
`Round-trip: ${latency} ms`;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
resultBox.innerHTML = `❌ <strong>Fout bij verbinden met PHP backend:</strong>\n${err.message}`;
|
resBox.style.display = 'block';
|
||||||
|
resBox.textContent = '[FOUT] Kan geen verbinding maken: ' + err.message;
|
||||||
} finally {
|
} finally {
|
||||||
btn.disabled = false;
|
btn.disabled = false;
|
||||||
btn.textContent = '⚡ Test Server Ping (AJAX)';
|
btn.textContent = '⚡ Test Server Ping (AJAX)';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. Kopieer Status naar Klembord
|
|
||||||
function copySystemInfo() {
|
|
||||||
const textToCopy = `Web & PC Studio Statusrapport\n` +
|
|
||||||
`Domein: <?= htmlspecialchars($host); ?>\n` +
|
|
||||||
`PHP Versie: <?= htmlspecialchars($phpVersion); ?>\n` +
|
|
||||||
`Server: <?= htmlspecialchars($serverSoftware); ?>\n` +
|
|
||||||
`Status: Operationeel`;
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
||||||
const btn = document.getElementById('btn-copy');
|
|
||||||
const originalText = btn.innerHTML;
|
|
||||||
btn.innerHTML = '✓ Gekopieerd!';
|
|
||||||
setTimeout(() => {
|
|
||||||
btn.innerHTML = originalText;
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
-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