<section class="org-salary-calculator-block" data-component="salary-calculator" data-base-salary="10.5">
<div class="vebego-container">
<div class="calculator-content">
<svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_732_31)">
<path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
<path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
<path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
<path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
</g>
<defs>
<linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
<stop stop-color="#501D79" />
<stop offset="0.1001" stop-color="#562081" />
<stop offset="0.4029" stop-color="#980D7F" />
<stop offset="0.5587" stop-color="#871280" />
<stop offset="0.8653" stop-color="#5C1E81" />
<stop offset="0.9028" stop-color="#562081" />
<stop offset="1" stop-color="#501D79" />
</linearGradient>
<linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
<stop stop-color="#B92D85" stop-opacity="0.7" />
<stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
<stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
<stop offset="1" stop-color="#F69915" />
</linearGradient>
<linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
<stop stop-color="#D62B87" stop-opacity="0.7" />
<stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
<stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
<stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
<stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
<stop stop-color="#651B82" />
<stop offset="0.9974" stop-color="#901080" />
</linearGradient>
<clipPath id="clip0_732_31">
<rect width="1401" height="561" fill="white" />
</clipPath>
</defs>
</svg>
<div class="calculator-left">
<h1 class="atm-heading ">Bereken direct je salaris</h1>
<div class="sliders">
<div class="atm-range-slider" data-component="range-slider">
<div class="slider-wrapper">
<label for="calc-age-slider">Leeftijd</label>
<div class="slider-track">
<input type="range" id="calc-age-slider" name="age" min="15" max="21" value="17" step="1">
<div class="slider-value"><span>17</span></div>
</div>
</div>
</div>
<div class="atm-range-slider" data-component="range-slider">
<div class="slider-wrapper">
<label for="calc-hours-slider">Aantal uur</label>
<div class="slider-track">
<input type="range" id="calc-hours-slider" name="hours" min="1" max="40" value="40" step="1">
<div class="slider-value"><span>40</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="calculator-right">
<div class="results">
<p class="result-description" data-result-text>Wanneer je 40 uur per week werkt en je bent 17 jaar oud, dan verdien je per uur:</p>
<div class="result-amount" data-result-hourly>€0.00</div>
<p class="result-description">Per week verdien je dan (bruto):</p>
<div class="result-amount" data-result-weekly>€0.00</div>
</div>
<div class="disclaimer">
<div class="atm-paragraph text-md">Deze berekening is een indicatie en kunnen geen rechten aan worden ontleend.</div>
</div>
</div>
</div>
</div>
</section>
<section class="org-salary-calculator-block" data-component="salary-calculator" data-base-salary="{{baseSalary}}">
<div class="vebego-container">
<div class="calculator-content">
{{render "@ambient"}}
<div class="calculator-left">
{{#if title}}
{{render '@heading' title merge=true}}
{{/if}}
<div class="sliders">
{{render '@range-slider' ageSlider merge=true}}
{{render '@range-slider' hoursSlider merge=true}}
</div>
</div>
<div class="calculator-right">
<div class="results">
<p class="result-description" data-result-text>Wanneer je 40 uur per week werkt en je bent 17 jaar oud, dan verdien je per uur:</p>
<div class="result-amount" data-result-hourly>€0.00</div>
<p class="result-description">Per week verdien je dan (bruto):</p>
<div class="result-amount" data-result-weekly>€0.00</div>
</div>
{{#if disclaimer}}
<div class="disclaimer">
{{render '@paragraph' disclaimer merge=true}}
</div>
{{/if}}
</div>
</div>
</div>
</section>
{
"baseSalary": 10.5,
"title": {
"text": "Bereken direct je salaris",
"tag": "h1"
},
"ageSlider": {
"id": "calc-age-slider",
"name": "age",
"label": "Leeftijd",
"min": 15,
"max": 21,
"value": 17,
"step": 1
},
"hoursSlider": {
"id": "calc-hours-slider",
"name": "hours",
"label": "Aantal uur",
"min": 1,
"max": 40,
"value": 40,
"step": 1
},
"disclaimer": {
"text": "Deze berekening is een indicatie en kunnen geen rechten aan worden ontleend."
}
}
.org-salary-calculator-block {
@apply relative overflow-hidden rounded-lg;
.vebego-container {
@apply relative z-10;
}
.ambient {
@apply top-0 left-0;
}
.calculator-content {
@apply flex flex-col md:flex-row gap-8 lg:gap-14 p-8 lg:p-10 rounded-lg overflow-hidden relative;
}
.calculator-left {
@apply w-full;
.atm-heading {
@apply mb-10 text-white;
}
}
.calculator-right {
@apply w-full;
}
.sliders {
@apply space-y-4;
}
.results {
@apply text-white;
.result-description {
@apply mb-2 text-lg;
}
.result-amount {
@apply text-h1 font-semibold my-8 font-display;
}
}
.disclaimer {
@apply mt-8 text-white;
}
}
(function () {
'use strict';
// Salaris per leeftijd op basis van de CAO tabel
const ageSalaries = {
15: 12.00,
16: 12.00,
17: 12.00,
18: 12.87,
19: 13.49,
};
// Dienstjaar 1 salaris (voor 19 jaar en ouder)
const serviceYearSalary = 15.52;
function initSalaryCalculators(context) {
const calculators = (context || document).querySelectorAll('[data-component="salary-calculator"]');
calculators.forEach(calculator => {
const ageInput = calculator.querySelector('#calc-age-slider');
const hoursInput = calculator.querySelector('#calc-hours-slider');
const resultText = calculator.querySelector('[data-result-text]');
const hourlyResult = calculator.querySelector('[data-result-hourly]');
const weeklyResult = calculator.querySelector('[data-result-weekly]');
if (!ageInput || !hoursInput) return;
function calculateAndDisplay() {
const age = parseInt(ageInput.value, 10);
const hours = parseInt(hoursInput.value, 10);
// Bepaal het uurloon op basis van leeftijd
let hourlyWage;
if (age >= 20) {
hourlyWage = serviceYearSalary; // Dienstjaar 1
} else {
hourlyWage = ageSalaries[age] || 12.00;
}
const weeklyWage = hourlyWage * hours;
if (resultText) {
resultText.textContent = `Wanneer je ${hours} uur per week werkt en je bent ${age} jaar oud, dan verdien je per uur:`;
}
if (hourlyResult) {
hourlyResult.textContent = `€${hourlyWage.toFixed(2)}`;
}
if (weeklyResult) {
weeklyResult.textContent = `€${weeklyWage.toFixed(2)}`;
}
}
ageInput.addEventListener('input', calculateAndDisplay);
hoursInput.addEventListener('input', calculateAndDisplay);
// Initial calculation
calculateAndDisplay();
});
}
// Initial load
initSalaryCalculators();
// Expose to global scope for re-initialization if needed
window.initSalaryCalculators = initSalaryCalculators;
})();
No notes defined.