NiekRabelink/Testdrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nieuwe test

Browse Source
This commit is contained in:
Niek Rabelink
2026-09-07 12:01:51 +02:00
parent caa2c2fc2a
commit c2effc697d
3 changed files with 886 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+153 -36
View File
@@ -55,17 +55,113 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
background-color: var(--bg);
color: var(--text-main);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
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 {
max-width: 680px;
width: 100%;
background: var(--card-bg);
backdrop-filter: blur(20px);
@@ -326,37 +422,54 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="badges-row">
<span class="badge badge-success">
<span class="pulse-dot"></span>
Git Systeem Actief
</span>
<span class="badge badge-php">
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
</span>
<div 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 &amp; PC Studio</div>
</a>
<div class="nav-menu">
<a href="index.php" class="nav-item active">🏠 Home</a>
<a href="lab.php" class="nav-item">🧪 Dev Lab</a>
<a href="services.php" class="nav-item">🛠️ Diensten &amp; Offerte</a>
</div>
<h1>Web & PC Studio</h1>
<p class="subtitle">
Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
</p>
</div>
<div class="nav-badge">
<span class="pulse-dot"></span>
<span>Git Online</span>
</div>
</nav>
<!-- Live Clock Bar (JavaScript) -->
<div class="clock-bar">
<span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
<span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
</div>
<div class="container">
<!-- Header -->
<div class="header">
<div class="badges-row">
<span class="badge badge-success">
<span class="pulse-dot"></span>
Git Systeem Actief
</span>
<span class="badge badge-php">
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
</span>
</div>
<h1>Web &amp; PC Studio</h1>
<p class="subtitle">
Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
</p>
</div>
<!-- Tab Navigatie -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
<button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
<a href="lab.php" class="tab-btn" style="text-decoration: none; text-align: center; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(6, 182, 212, 0.1);">✨ Dev Lab &rarr;</a>
</div>
<!-- Live Clock Bar (JavaScript) -->
<div class="clock-bar">
<span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
<span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
</div>
<!-- Tab Navigatie -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
<button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
</div>
<!-- Tab 1: Overzicht -->
<div id="tab-overzicht" class="tab-content active">
@@ -387,9 +500,12 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
</div>
</div>
<div style="margin-top: 16px;">
<a href="lab.php" class="btn btn-primary" style="text-decoration: none; width: 100%; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #3b82f6);">
🚀 Open Interactief Developer Lab (Subpagina)
<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 &amp; Offerte
</a>
</div>
</div>
@@ -438,6 +554,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
&copy; <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
</div>
</div>
</div>
<!-- JavaScript Functionaliteit -->
<script>
lab.php
+3 -3
View File
@@ -433,9 +433,9 @@ $phpVersion = PHP_VERSION;
</div>
</div>
<nav class="nav-links">
<a href="index.php" class="btn-link">
&larr; Terug naar Home
</a>
<a href="index.php" class="btn-link">🏠 Home</a>
<a href="lab.php" class="btn-link" style="background: rgba(6, 182, 212, 0.2); color: white; border-color: rgba(6, 182, 212, 0.4);">🧪 Dev Lab</a>
<a href="services.php" class="btn-link">🛠️ Diensten &amp; Offerte</a>
<button class="sound-toggle" id="sound-btn" onclick="toggleAudio()" title="Schakel geluidseffecten in/uit">
<span id="sound-icon">🔈</span> Geluid: <span id="sound-status">Uit</span>
</button>
services.php
+730
View File
@@ -0,0 +1,730 @@
<?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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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">
&copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan Git &bull; 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>