From cc029caa8e6f7db8a4d924b5b942a3bb69678973 Mon Sep 17 00:00:00 2001 From: Niek Rabelink Date: Mon, 7 Sep 2026 13:04:00 +0200 Subject: [PATCH] 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. --- index.php | 720 +++++++++-------------------------- lab.php | 1015 +++++++++----------------------------------------- services.php | 731 ------------------------------------ style.css | 473 +++++++++++++++++++++++ tools.php | 326 ++++++++++++++++ 5 files changed, 1140 insertions(+), 2125 deletions(-) delete mode 100644 services.php create mode 100644 style.css create mode 100644 tools.php diff --git a/index.php b/index.php index 0b843ed..4bcb6d8 100644 --- a/index.php +++ b/index.php @@ -1,10 +1,15 @@ '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' - Web & PC Studio - Git & PHP Live Test - + Web & PC Studio - Systeem Dashboard +
- + -
- -
-
- - - Git Systeem Actief - - - ⚡ PHP v Live - + +
+

Systeem Dashboard & Git Status

+

+ Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor www.webenpcstudio.nl. +

+
+ + +
+ +
+
+
+ 🖥️ Webserver Omgeving +
+ Operationeel
-

Web & PC Studio

-

- Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime. +

+ Actieve server-parameters gedetecteerd door de PHP runtime engine.

+ + + + + + + + + + + + + + + + + + + + + + +
Host Domein:
Verbindingsprotocol:
PHP Engine:v
Webserver Software:
Client IP:
- -
- Server (PHP): - Browser (JS): --:--:-- -
+ +
+
+
+ 🌿 Git CI/CD Sync +
+ Verbonden +
+

+ Status van de gekoppelde Git repository en automatische webhook updates. +

- -
- - - -
- - -
-
-
- Host Domein: - -
-
- Protocol: - -
-
- PHP Versie: - v -
-
- Webserver: - -
-
- Jouw Bezoekers IP: - -
-
- Status: - Operationeel -
-
- -
- - 🧪 Developer Lab - - - 🛠️ Diensten & Offerte - + + + + + + + + + + + + + + + + + + + + + +
Git Server:git.webenpcstudio.nl
Repository:NiekRabelink/Testdrive
Actieve Branch:main
Deploy Type:Automatische Webhook Push
Testdrive Status:Gereed & Gesynchroniseerd
- -
-

- Klik op de knop hieronder om via een asynchrone JavaScript fetch() aanroep een realtime JSON response op te halen bij de PHP server. -

-
- -
-
+
+
+
Server Tijd (PHP)
+
+
+
+
Browser Tijd (JS)
+
--:--:--
+
+
+
Laatste Latency
+
-- ms
+
+
+
Geheugengebruik
+
-- MB
+
+
+ +
- -
-
-
- Git Systeem: - git.webenpcstudio.nl + +
+ +
🚀
+
+

Webserver Benchmark Suite →

+

Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.

-
- Repository: - NiekRabelink/Testdrive + + +
🛠️
+
+

Developer & Systeem Tools →

+

Inspecteer HTTP headers, cURL verbindingen en cryptografie.

-
- Branch: - main -
-
- Deploy Modus: - PHP + JS Enabled -
-
+
-
- © Web & PC Studio. Alle systemen operationeel. -
-
+
+ © Web & PC Studio • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel. +
- diff --git a/lab.php b/lab.php index c515d97..babdd92 100644 --- a/lab.php +++ b/lab.php @@ -1,7 +1,7 @@ 'skipped', - 'message' => 'PDO SQLite niet beschikbaar', + 'message' => 'PDO SQLite niet actief', 'tps' => 0, 'duration_ms' => 0 ]; @@ -201,13 +201,10 @@ function getOpcacheInfo() { ]; } -// ========================================== -// API Routing voor AJAX Verzoeken -// ========================================== +// Routing voor AJAX verzoeken if (isset($_GET['action'])) { header('Content-Type: application/json; charset=utf-8'); - // 1. Snelle Ping if ($_GET['action'] === 'ping') { echo json_encode([ 'status' => 'pong', @@ -217,29 +214,12 @@ if (isset($_GET['action'])) { exit; } - // 2. Afzonderlijke Benchmark Acties - if ($_GET['action'] === 'bench_cpu') { - echo json_encode(benchmarkCPU()); - exit; - } - if ($_GET['action'] === 'bench_memory') { - echo json_encode(benchmarkMemory()); - exit; - } - if ($_GET['action'] === 'bench_disk') { - echo json_encode(benchmarkDiskIO()); - exit; - } - if ($_GET['action'] === 'bench_string') { - echo json_encode(benchmarkStringJSON()); - exit; - } - if ($_GET['action'] === 'bench_db') { - echo json_encode(benchmarkDatabase()); - exit; - } + if ($_GET['action'] === 'bench_cpu') { echo json_encode(benchmarkCPU()); exit; } + if ($_GET['action'] === 'bench_memory') { echo json_encode(benchmarkMemory()); exit; } + if ($_GET['action'] === 'bench_disk') { echo json_encode(benchmarkDiskIO()); exit; } + if ($_GET['action'] === 'bench_string') { echo json_encode(benchmarkStringJSON()); exit; } + if ($_GET['action'] === 'bench_db') { echo json_encode(benchmarkDatabase()); exit; } - // 3. Volledige Server Benchmark Suite if ($_GET['action'] === 'bench_all') { $cpu = benchmarkCPU(); $mem = benchmarkMemory(); @@ -248,52 +228,28 @@ if (isset($_GET['action'])) { $db = benchmarkDatabase(); $opcache = getOpcacheInfo(); - // Bereken gewogen Server Score (0-100) $score = 0; - - // CPU Score (max 25) - $cpuOps = $cpu['raw_ops'] ?? 0; - $score += min(25, round(($cpuOps / 150000) * 25)); + $score += min(25, round((($cpu['raw_ops'] ?? 0) / 150000) * 25)); + $score += min(20, round((($mem['raw_ops'] ?? 0) / 200000) * 20)); + $score += min(25, round((($disk['write_speed_mb_s'] ?? 0) / 300) * 25)); + $score += min(15, round((($str['raw_ops'] ?? 0) / 35000) * 15)); - // Memory Score (max 20) - $memOps = $mem['raw_ops'] ?? 0; - $score += min(20, round(($memOps / 200000) * 20)); - - // Disk Score (max 25) - $writeSpd = $disk['write_speed_mb_s'] ?? 0; - $score += min(25, round(($writeSpd / 300) * 25)); - - // String/JSON Score (max 15) - $strOps = $str['raw_ops'] ?? 0; - $score += min(15, round(($strOps / 35000) * 15)); - - // DB / OPcache Score (max 15) if ($db['status'] === 'success') { - $dbTps = $db['raw_tps'] ?? 0; - $score += min(15, round(($dbTps / 20000) * 15)); + $score += min(15, round((($db['raw_tps'] ?? 0) / 20000) * 15)); } else { $score += ($opcache['enabled'] ? 12 : 8); } $finalScore = max(35, min(100, $score)); - // Grade toekenning if ($finalScore >= 90) { - $grade = 'A+'; - $rating = 'Superieur (Enterprise Snelheid)'; - $color = '#34d399'; + $grade = 'A+'; $rating = 'Superieur (Enterprise Snelheid)'; $color = '#34d399'; } elseif ($finalScore >= 80) { - $grade = 'A'; - $rating = 'Uitstekend (Zeer Snelle Server)'; - $color = '#38bdf8'; + $grade = 'A'; $rating = 'Uitstekend (Snelle Server)'; $color = '#38bdf8'; } elseif ($finalScore >= 70) { - $grade = 'B'; - $rating = 'Goed (Solide Hosting)'; - $color = '#fbbf24'; + $grade = 'B'; $rating = 'Goed (Solide Webhosting)'; $color = '#fbbf24'; } else { - $grade = 'C'; - $rating = 'Voldoende (Basis Hosting)'; - $color = '#f87171'; + $grade = 'C'; $rating = 'Voldoende (Basis)'; $color = '#f87171'; } echo json_encode([ @@ -313,38 +269,11 @@ if (isset($_GET['action'])) { exit; } - // 4. Server Specificaties & Audit - if ($_GET['action'] === 'server_specs') { - echo json_encode([ - 'php_version' => PHP_VERSION, - 'sapi' => php_sapi_name(), - 'os' => PHP_OS_FAMILY . ' (' . PHP_OS . ')', - 'architecture' => (PHP_INT_SIZE * 8) . '-bit', - 'memory_limit' => ini_get('memory_limit'), - 'max_execution_time' => ini_get('max_execution_time') . 's', - 'upload_max_filesize' => ini_get('upload_max_filesize'), - 'post_max_size' => ini_get('post_max_size'), - 'opcache' => getOpcacheInfo(), - 'server_software' => $_SERVER['SERVER_SOFTWARE'] ?? 'Onbekend', - 'extensions' => [ - 'curl' => extension_loaded('curl'), - 'openssl' => extension_loaded('openssl'), - 'pdo_mysql' => extension_loaded('pdo_mysql'), - 'pdo_sqlite' => extension_loaded('pdo_sqlite'), - 'mbstring' => extension_loaded('mbstring'), - 'gd' => extension_loaded('gd'), - 'zip' => extension_loaded('zip') - ] - ]); - exit; - } - echo json_encode(['status' => 'error', 'message' => 'Onbekend verzoek']); exit; } date_default_timezone_set('Europe/Amsterdam'); -$serverTime = date('H:i:s'); $phpVersion = PHP_VERSION; $serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx'; ?> @@ -353,271 +282,36 @@ $serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx'; - Web & PC Studio - Webserver Benchmark & Dev Lab + Web & PC Studio - Webserver Benchmark + - -
- + - +

Webserver Performance Suite

- Voer diepgaande diagnostische server benchmarks uit om CPU-rekenkracht, Disk I/O schrijf/leessnelheid, geheugenbandbreedte en gelijktijdige request-capaciteit van www.webenpcstudio.nl te meten. + Meet CPU rekenkracht, NVMe Disk I/O schrijf/leessnelheid, RAM geheugendoorvoer en gelijktijdige request-capaciteit van de server.

-
-
- ⚡ Volledige Webserver Benchmark -
-
- Test in één geautomatiseerde cyclus de CPU, NVMe/SSD Disk I/O, RAM doorvoer, JSON parsing en in-memory SQLite database. -
-
- -
@@ -953,198 +406,193 @@ $serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
- -- - / 100 + -- + / 100
-
-
Klaar
-
Klik start voor meting
+
+
Klaar
+
Klik start voor meting
- +
- +
🚀 CPU & Math
80k Math + 40k SHA
-
Rekenkundige algoritmes en cryptografische hashing op de webserver CPU.
-
+

Rekenkundige algoritmes en cryptografische hashing cycli.

+
-
Bewerkingen / s
-
--
+
Bewerkingen / s
+
--
-
Duur
-
-- ms
+
Executietijd
+
-- ms
- +
- +
💾 Disk I/O Snelheid
3 MB Chunk R/W
-
Fysieke schrijf- en leessnelheid naar de tijdelijke serveropslag (SSD/NVMe).
-
+

Fysieke schrijf- en leessnelheid naar server temp opslag (NVMe/SSD).

+
-
Schrijfsnelheid
-
-- MB/s
+
Schrijfsnelheid
+
-- MB/s
-
Leessnelheid
-
-- MB/s
+
Leessnelheid
+
-- MB/s
- +
- +
-
🧠 RAM Doorvoer
- 50k Associative Array +
🧠 RAM Geheugen
+ 50k Array Nodes
-
Allocatie, manipulatie en serialisatie van complexe datastructuren in het werkgeheugen.
-
+

Allocatie, sorteren en serialisatie in PHP werkgeheugen.

+
-
Doorvoer / s
-
--
+
Doorvoer / s
+
--
-
Piekgeheugen
-
-- MB
+
Piekgeheugen
+
-- MB
- +
- +
📦 String & JSON
15k JSON Records
-
JSON encoding, decoding en RegEx parsing op gestructureerde data.
-
+

JSON encoding, decoding en RegEx patroonvergelijking.

+
-
Records / s
-
--
+
Records / s
+
--
-
Payload Omvang
-
-- KB
+
Payload
+
-- KB
- +
- +
🗄️ Database RAM I/O
SQLite :memory:
-
2.500 transacties met inserts, indexeringen en aggregatiequeries.
-
+

2.500 transacties met inserts, indexeringen en aggregaties.

+
-
Transacties / s
-
--
+
Transacties / s
+
--
-
Query Tijd
-
-- ms
+
Query Tijd
+
-- ms
- +
- +
-
⚙️ Server Configuratie
+
⚙️ Server Info
PHP
- +
- - + + - - + + - - + + - - + +
Server Software:Webserver:
PHP Memory Limit:Memory Limit:
Max Execution Time:sExecution Time:s
OPcache Status:Detecteren...OPcache:Actief
-
- -
-
+ +
+
-

🌐 Gelijktijdige HTTP Requests (Stress & RPS Test)

-

- Vuur gelijktijdige asynchrone AJAX aanroepen af om te zien hoe de webserver piekdrukte opvangt. -

+
🌐 HTTP Concurrency & RPS Burst Test
+

Meet de afhandeling van gelijktijdige aanroepen onder piekdruk.

-
- - - - +
+ + + +
- -
- Kies het aantal calls en klik op "Start Burst". +
+ Klik op "Start Burst" om gelijktijdige calls af te vuren.
-
+
-
Requests Per Seconde
-
-- RPS
+
Requests / Seconde
+
-- RPS
-
Totale Batch Duur
-
-- ms
+
Totale Duur
+
-- ms
-
Snelste Call
-
-- ms
+
Snelste Call
+
-- ms
-
Gemiddelde Latency
-
-- ms
+
Gemiddelde Latency
+
-- ms
+
© Web & PC Studio • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
- + - - - diff --git a/style.css b/style.css new file mode 100644 index 0000000..817f069 --- /dev/null +++ b/style.css @@ -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; +} diff --git a/tools.php b/tools.php new file mode 100644 index 0000000..1ceb0b5 --- /dev/null +++ b/tools.php @@ -0,0 +1,326 @@ + $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'); +?> + + + + + + Web & PC Studio - Dev Tools & Inspector + + + +
+ + + + +
+

Systeem & Developer Tools

+

+ Inspecteer binnenkomende HTTP headers, valideer server-connectiviteit en gebruik realtime cryptografische encoding tools. +

+
+ + +
+ +
+
+
+ 🔍 HTTP Request Inspector +
+ +
+

+ Reële headers zoals ontvangen door de Apache/Nginx webserver voor deze verbinding. +

+ + + + + + + + + + + + + + +
Bezoekers IP:
Protocol / SSL:
User-Agent: + +
+ +
+ ALLE REQUEST HEADERS: + +
+
$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"); + } + } + } + ?>
+
+ + +
+
+
+ 🌐 Outbound Server Ping +
+ cURL Test +
+

+ Test of de webserver vanuit PHP naar buiten kan verbinden (bijv. voor Git webhooks of API syncs). +

+ +
+ + +
+ +
+
+
HTTP Status
+
--
+
+
+
Totale Tijd
+
-- ms
+
+
+
DNS Lookup
+
-- ms
+
+
+
TCP Connect
+
-- ms
+
+
+ +
+ Selecteer een doellocatie en klik op Ping om de netwerk-latency te meten. +
+
+
+ + +
+
+
+ 🔐 Realtime Crypto & String Transformer +
+ PHP & JS Dual Engine +
+

+ Converteer strings direct naar verschillende hashing formaten, base64 encoding en timestamp berekeningen. +

+ +
+ + +
+ +
+
+
MD5 Hash
+
...
+
+
+
SHA-256 Hash
+
...
+
+
+
Base64 Encoded
+
...
+
+
+
+ + +
+ © Web & PC Studio • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel. +
+
+ + + + +