Ontdek hoeveel jij kunt besparen
Met onze geavanceerde rekenmodule kun je direct zien wat de voordelen van de Woodle zijn. Upload nu je plattegrond en krijg binnen 48 uur een advies over de optimale verdeling van de Woodles. Waar wacht je nog op?
Wat is de lengte van het stuk dat u wilt verlichten?
Hoeveel afstand wenst u tussen de Woodles™?
Welke soort verlichting wenst u?
Welke soort materiaal wenst u?
#benefit-calculator h5, #result h5 { font-weight: 900; font-size: 24px; padding-bottom: 20px; } #benefit-calculator { max-width: 100%; margin: 0 auto; padding: 30px; border-radius: 30px; background-color: #f9f9f9; } #benefit-calculator label { display: block; margin-bottom: 5px; } .slider-container { display: flex; align-items: center; margin-bottom: 10px; margin-top:20px; } .slider-container .min-value, .slider-container .max-value { width: 15%; text-align: center; } .slider-container .slider-wrapper { width: 70%; position: relative; } #benefit-calculator input[type="range"] { -webkit-appearance: none; width: 100%; height: 3px; background: none; outline: none; border: 2px solid #39B54A; padding:0px; } #benefit-calculator input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: white; border: 2px solid #0E082E; border-radius: 50%; cursor: pointer; margin-top: 0px; } #benefit-calculator input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; background: white; border: 2px solid #0E082E; border-radius: 50%; cursor: pointer; } .radio-group { display: flex; flex-direction: column; } .radio-group label { display: flex; align-items: center; margin-bottom: 5px; } .radio-group input[type="radio"] { margin-right: 10px; accent-color: #39B54A; /* Change the radio button color to green */ } #benefit-calculator output { position: absolute; transform: translateX(5px); background-color: #0E082E; color: white; padding: 8px 24px; border-radius: 50px; top:40px; } #benefit-calculator button { width: 100%; padding: 10px; background-color: #007BFF; color: white; border: none; border-radius: 3px; cursor: pointer; } #benefit-calculator button:hover { background-color: #0056b3; } #result { max-width: 400px; padding: 30px; border: 2px solid #F2F2F2; border-radius: 30px; background-color: white; } #result p.disclaimer { font-size: 12px; padding-top: 20px; } #result p.line { border-top: 2px solid #0000000D; padding: 10px !important; }
Gratis advies?
Heeft u een kadastertekening of een andere plattegrond van uw lichtwens? Onze specialisteren adviseren u graag.
function updateOutput(element) {
const output = element.nextElementSibling;
const value = element.value;
output.value = value;
const sliderWidth = element.offsetWidth;
const outputWidth = output.offsetWidth;
const thumbWidth = 20; // Approximate width of the thumb, adjust if necessary
const max = element.max;
const min = element.min;
const left = ((value - min) / (max - min)) * (sliderWidth - thumbWidth) + (thumbWidth / 2) - (outputWidth / 2);
output.style.left = `${left}px`;
}
function calculateBenefits() {
const distancePath = parseInt(document.getElementById('distance-path').value);
const distanceLights = parseInt(document.getElementById('distance-lights').value);
const numLamps = Math.ceil(distancePath / distanceLights);
const electricUsageSaved = numLamps * 4;
const electricCostSaved = numLamps * 1;
const installationCostSaved = distancePath * 15;
const maintenanceCostSaved = numLamps * 50;
document.getElementById('result').innerHTML = `
Uw geschatte besparing:
Besparing installatiekosten: €${installationCostSaved}
Besparing onderhoudskosten: €${maintenanceCostSaved} per jaar
Besparing verbruikt elektriciteit: ${electricUsageSaved} kWh
*Aan deze berekening kunnen geen rechten ontleend worden. De situatie ter plaatse kan verschillen.
`; } // Set the output position based on the default values window.onload = function() { const distancePathSlider = document.getElementById('distance-path'); const distanceLightsSlider = document.getElementById('distance-lights'); updateOutput(distancePathSlider); updateOutput(distanceLightsSlider); calculateBenefits(); };
