<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Offerteformulier – Dutch Electro Power</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 2rem;
max-width: 800px;
margin: auto;
}
h1, h2 {
color: #004d99;
}
label {
font-weight: bold;
}
input, select {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}
.section {
background: white;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.summary {
font-size: 1.1rem;
margin-top: 1rem;
}
button {
padding: 0.75rem 1.5rem;
background-color: #004d99;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #003366;
}
</style>
</head>
<body>
<img src=”Logo DEP.png” alt=”Dutch Electro Power” style=”max-width: 200px; margin-bottom: 2rem;”>
<h1>Elektrische Aandrijving Offerteformulier</h1>

<form id=”offerteForm”>
<div class=”section”>
<h2>1. Bootgegevens</h2>
<label>Type boot</label>
<select id=”bootType” name=”bootType”>
<option value=”Sloep”>Sloep</option>
<option value=”Zeilboot”>Zeilboot</option>
<option value=”Kajuitboot”>Kajuitboot</option>
</select>

<label>Lengte boot (m)</label>
<input type=”number” id=”bootLengte” name=”bootLengte” required />

<label>Rompvorm</label>
<select id=”rompvorm” name=”rompvorm”>
<option value=”Waterverplaatsend”>Waterverplaatsend</option>
<option value=”Halfglijder”>Halfglijder</option>
</select>

<label>Schroefdiameter (cm)</label>
<input type=”number” id=”schroef” name=”schroef” required />

<label>Hoe lang wil je kunnen varen? (uren)</label>
<input type=”number” id=”vaartijd” name=”vaartijd” required />
</div>

<div class=”section”>
<h2>2. Vermogensadvies</h2>
<label>Advies aandrijvingstype</label>
<select id=”aandrijving” name=”aandrijving”>
<option value=”IPM AC”>IPM AC</option>
<option value=”PMAC”>PMAC</option>
</select>

<p class=”summary”>Geschat benodigd vermogen: <span id=”vermogen”>0</span> kW</p>
<p class=”summary”>Geschatte accucapaciteit: <span id=”accu”>0</span> kWh</p>
</div>

<div class=”section”>
<h2>3. Extra onderdelen</h2>
<label>Display</label>
<select id=”display” name=”display”>
<option value=”ja”>Ja</option>
<option value=”nee”>Nee</option>
</select>

<label>Lader</label>
<select id=”lader” name=”lader”>
<option value=”ja”>Ja</option>
<option value=”nee”>Nee</option>
</select>

<label>Koeling</label>
<select id=”koeling” name=”koeling”>
<option value=”ja”>Ja</option>
<option value=”nee”>Nee</option>
</select>
</div>

<div class=”section”>
<h2>4. Samenvatting</h2>
<p class=”summary”>Totale prijs: <span id=”prijs”>€0</span></p>
<button type=”button” onclick=”berekenOfferte()”>Bereken offerte</button>
</div>
</form>

<script>
function berekenOfferte() {
const lengte = parseFloat(document.getElementById(“bootLengte”).value);
const vaartijd = parseFloat(document.getElementById(“vaartijd”).value);
if (isNaN(lengte) || isNaN(vaartijd)) return alert(“Vul de lengte en vaartijd in.”);

const vermogen = (2.43 * Math.sqrt(Math.pow(lengte, 3))).toFixed(1);
const accucap = (vermogen * vaartijd).toFixed(1);
document.getElementById(“vermogen”).textContent = vermogen;
document.getElementById(“accu”).textContent = accucap;

let prijs = vermogen * 500 + accucap * 400;
if (document.getElementById(“display”).value === “ja”) prijs += 250;
if (document.getElementById(“lader”).value === “ja”) prijs += 500;
if (document.getElementById(“koeling”).value === “ja”) prijs += 300;

document.getElementById(“prijs”).textContent = “€” + prijs.toFixed(0);
}
</script>
</body>
</html>