Wieviel passt auf Ihren Gastrobrater?
Stellen Sie Ihre Gästezahl und Ihr Grillgut ein – wir zeigen Ihnen sofort, welcher Gasgrill passt.
🌭 Auf dem Grill
14
Würstchen
👥 Optimal versorgt
8
Personen
Für 8 Gäste empfehlen wir einen 2-flammigen Gastrobrater. Bei Ihrem gewählten Mix passen 8 Steaks und 14 Würstchen gleichzeitig auf den Rost.
Hinweis: Die Warmhaltezone bietet zusätzlich Platz.
document.addEventListener('DOMContentLoaded', () => {
// BITTE HIER DEINE 6 BILD-URLS UND LINKS EINTRAGEN
const productData = {
1: { img: '[PLATZHALTER_BILD_URL_1_FLAMMIG]', link: '[PLATZHALTER_LINK_1_FLAMMIG]' },
2: { img: '[PLATZHALTER_BILD_URL_2_FLAMMIG]', link: '[PLATZHALTER_LINK_2_FLAMMIG]' },
3: { img: '[PLATZHALTER_BILD_URL_3_FLAMMIG]', link: '[PLATZHALTER_LINK_3_FLAMMIG]' },
4: { img: '[PLATZHALTER_BILD_URL_4_FLAMMIG]', link: '[PLATZHALTER_LINK_4_FLAMMIG]' },
5: { img: '[PLATZHALTER_BILD_URL_5_FLAMMIG]', link: '[PLATZHALTER_LINK_5_FLAMMIG]' },
6: { img: '[PLATZHALTER_BILD_URL_6_FLAMMIG]', link: '[PLATZHALTER_LINK_6_FLAMMIG]' }
};
const grillCapacity = {
1: { steaks50: 6, wurst50: 9, steaks100: 12, wurst100: 18 },
2: { steaks50: 8, wurst50: 14, steaks100: 16, wurst100: 28 },
3: { steaks50: 15, wurst50: 20, steaks100: 30, wurst100: 40 },
4: { steaks50: 16, wurst50: 23, steaks100: 32, wurst100: 46 },
5: { steaks50: 21, wurst50: 29, steaks100: 42, wurst100: 58 },
6: { steaks50: 25, wurst50: 34, steaks100: 50, wurst100: 68 },
};
const personToFlame = (p) => {
if (p <= 6) return 1;
if (p <= 8) return 2;
if (p <= 12) return 3;
if (p <= 14) return 4;
if (p <= 18) return 5;
return 6;
};
const calcCapacity = (flames, wurstPercent) => {
const cap = grillCapacity[flames];
const steaks = Math.round(cap.steaks100 * (1 - wurstPercent/100));
const wurst = Math.round(cap.wurst100 * (wurstPercent/100));
return { steaks, wurst };
};
const sliderGuests = document.getElementById('slider-guests');
const sliderRatio = document.getElementById('slider-ratio');
const lblGuests = document.getElementById('lbl-guests');
const lblRatio = document.getElementById('lbl-ratio');
const badgeGuests = document.getElementById('badge-guests');
const hotZone = document.getElementById('hot-zone');
const visualGrill = document.getElementById('visual-grill');
const valFlames = document.getElementById('val-flames');
const valSteaks = document.getElementById('val-steaks');
const valWurst = document.getElementById('val-wurst');
const valPersons = document.getElementById('val-persons');
const resultText = document.getElementById('result-text');
const imgDynamic = document.getElementById('img-dynamic-product');
const titleDynamic = document.getElementById('title-dynamic-product');
const linkDynamic = document.getElementById('link-dynamic-product');
function updateConfigurator() {
if(!sliderGuests) return;
const guests = parseInt(sliderGuests.value);
const wurstPercent = parseInt(sliderRatio.value);
const steakPercent = 100 - wurstPercent;
const flames = personToFlame(guests);
const capacity = calcCapacity(flames, wurstPercent);
lblGuests.innerText = `👥 Gästezahl: ${guests} Personen`;
lblRatio.innerText = `🥩 Steaks ${steakPercent}% · 🌭 Würstchen ${wurstPercent}%`;
if(guests <= 6) badgeGuests.innerText = "Geeignet für kleine Grillrunden";
else if(guests <= 14) badgeGuests.innerText = "Perfekt für Feiern";
else badgeGuests.innerText = "Für Events & Catering";
animateValue(valFlames, parseInt(valFlames.innerText) || 0, flames, 300);
animateValue(valSteaks, parseInt(valSteaks.innerText) || 0, capacity.steaks, 300);
animateValue(valWurst, parseInt(valWurst.innerText) || 0, capacity.wurst, 300);
animateValue(valPersons, parseInt(valPersons.innerText) || 0, guests, 300);
const newWidth = 30 + ((flames - 1) * 14);
visualGrill.style.width = `${newWidth}%`;
renderItems(capacity.steaks, capacity.wurst);
resultText.innerHTML = `Für ${guests} Gäste empfehlen wir einen ${flames}-flammigen Gastrobrater. Bei Ihrem gewählten Mix passen ${capacity.steaks} Steaks und ${capacity.wurst} Würstchen gleichzeitig auf den Rost.
Hinweis: Die Warmhaltezone bietet zusätzlich Platz für bereits gegrilltes Grillgut.`;
titleDynamic.innerText = `Gastrobräter ${flames} flammig Konfigurator`;
imgDynamic.style.opacity = 0;
setTimeout(() => {
if(productData[flames] && productData[flames].img) {
imgDynamic.src = productData[flames].img;
}
imgDynamic.style.opacity = 1;
}, 150);
if(productData[flames] && productData[flames].link) {
linkDynamic.href = productData[flames].link;
}
}
function renderItems(steaks, wurst) {
hotZone.innerHTML = '';
for(let i=0; i'div');
div.className = 'gc-item steak';
div.style.animationDelay = `${i * 20}ms`;
hotZone.appendChild(div);
}
for(let i=0; i'div');
div.className = 'gc-item wurst';
div.style.animationDelay = `${(steaks + i) * 20}ms`;
hotZone.appendChild(div);
}
}
function animateValue(obj, start, end, duration) {
if(start === end || isNaN(start)) return;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);
}
if(sliderGuests && sliderRatio) {
sliderGuests.addEventListener('input', updateConfigurator);
sliderRatio.addEventListener('input', () => {
if(sliderRatio.value > 45 && sliderRatio.value < 55) {
sliderRatio.value = 50;
}
updateConfigurator();
});
updateConfigurator();
}
});
