Nieuwe test
This commit is contained in:
@@ -55,17 +55,113 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
background-color: var(--bg);
|
background-color: var(--bg);
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
padding: 24px 16px 60px;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 24px;
|
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
|
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%);
|
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 {
|
.container {
|
||||||
max-width: 680px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
@@ -326,6 +422,24 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<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 active">🏠 Home</a>
|
||||||
|
<a href="lab.php" class="nav-item">🧪 Dev Lab</a>
|
||||||
|
<a href="services.php" class="nav-item">🛠️ Diensten & Offerte</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-badge">
|
||||||
|
<span class="pulse-dot"></span>
|
||||||
|
<span>Git Online</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@@ -338,7 +452,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
|
⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h1>Web & PC Studio</h1>
|
<h1>Web & PC Studio</h1>
|
||||||
<p class="subtitle">
|
<p class="subtitle">
|
||||||
Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime.
|
Interactieve testomgeving ter verificatie van de Git webhook & PHP server-runtime.
|
||||||
</p>
|
</p>
|
||||||
@@ -355,7 +469,6 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
<button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
|
<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-diagnose')">Live JS/PHP Test</button>
|
||||||
<button class="tab-btn" onclick="switchTab('tab-git')">Git Info</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 →</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab 1: Overzicht -->
|
<!-- Tab 1: Overzicht -->
|
||||||
@@ -387,9 +500,12 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 16px;">
|
<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; width: 100%; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #3b82f6);">
|
<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);">
|
||||||
🚀 Open Interactief Developer Lab (Subpagina)
|
🧪 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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -438,6 +554,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
|
|||||||
© <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
|
© <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- JavaScript Functionaliteit -->
|
<!-- JavaScript Functionaliteit -->
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -433,9 +433,9 @@ $phpVersion = PHP_VERSION;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="nav-links">
|
<nav class="nav-links">
|
||||||
<a href="index.php" class="btn-link">
|
<a href="index.php" class="btn-link">🏠 Home</a>
|
||||||
← Terug naar Home
|
<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>
|
<a href="services.php" class="btn-link">🛠️ Diensten & Offerte</a>
|
||||||
<button class="sound-toggle" id="sound-btn" onclick="toggleAudio()" title="Schakel geluidseffecten in/uit">
|
<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>
|
<span id="sound-icon">🔈</span> Geluid: <span id="sound-status">Uit</span>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
+730
@@ -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 & 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>
|
||||||
Reference in New Issue
Block a user