732 lines
24 KiB
PHP
732 lines
24 KiB
PHP
<?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>
|
|
|