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
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>