Startseite entschlackt: weniger Text, ruhiger, besser am Handy
- Cursor-Effekt im Hero entfernt (Messfadenkreuz, Temperatur-Skala, Maus-Wärmespur); Wärmebild läuft nur noch ruhig im Hintergrund - Preloader, Laufbänder, Intro, Ablauf-Block, Kennzahlen, Footer-CTA, kursive Akzentwörter, Verlaufstext und Nummern-Pillen entfernt - Texte in allen Abschnitten deutlich gekürzt, schlichte Überschriften - Leistungen: auf Handy/Tablet wischbare Kärtchen mit Zähler und Pfeilen - Neue, zusammenhängende Illustrationen für die fünf Leistungs-Kärtchen - Heizungs-Finder ohne Prozent-Balken, kürzere Ergebnistexte - Energie-Haus: Tabs als Wischleiste am Handy, kein Autoplay - GSAP, ScrollTrigger, SplitText, Lenis und Instrument Serif entfernt - Barrierefreiheit: Kontrast, Fokusring, Fokus im Kartenstapel, Telefon-Button mit Namen, Menü sperrt Hintergrund - Cache-Busting (?v=20261004) für CSS und JS, README aktualisiert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed
1 parent
717a7de501
commit
ad155124b1
20 files changed
+1182
-2147
No files matched your search
+15
-44
@@ -16,7 +16,6 @@
|
||||
var barEl = app.querySelector('[data-finder-bar]');
|
||||
var backBtn = app.querySelector('[data-finder-back]');
|
||||
var nextBtn = app.querySelector('[data-finder-next]');
|
||||
var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var total = steps.length;
|
||||
var index = 0;
|
||||
var answers = {};
|
||||
@@ -31,19 +30,19 @@
|
||||
};
|
||||
|
||||
var SYSTEMS = {
|
||||
wp: { name: 'Wärmepumpe', title: 'Luft-Wasser-Wärmepumpe', topic: 'Wärmepumpe & Regenerativ' },
|
||||
pellet: { name: 'Pelletheizung', title: 'Pelletheizung', topic: 'Wärmepumpe & Regenerativ' },
|
||||
hybrid: { name: 'Hybridheizung', title: 'Hybridheizung', topic: 'Heizung' }
|
||||
wp: { name: 'Wärmepumpe', title: 'Luft-Wasser-Wärmepumpe', topic: 'Heizung & Wärmepumpe' },
|
||||
pellet: { name: 'Pelletheizung', title: 'Pelletheizung', topic: 'Heizung & Wärmepumpe' },
|
||||
hybrid: { name: 'Hybridheizung', title: 'Hybridheizung', topic: 'Heizung & Wärmepumpe' }
|
||||
};
|
||||
|
||||
var TEXTS = {
|
||||
wp: {
|
||||
neubau: 'Für Ihren Neubau ist die Wärmepumpe die naheliegende Wahl: Sie heizt mit Umweltwärme, arbeitet mit niedrigen Vorlauftemperaturen besonders effizient und harmoniert perfekt mit einer Fußbodenheizung.',
|
||||
gedaemmt: 'Ihr Haus bringt gute Voraussetzungen mit: Dank Dämmung reichen niedrige Vorlauftemperaturen – genau dort arbeitet eine Wärmepumpe besonders effizient. Ob einzelne Heizkörper getauscht werden sollten, prüfen wir vor Ort.',
|
||||
neubau: 'Im Neubau die naheliegende Wahl: Die Wärmepumpe heizt mit Umweltwärme und arbeitet bei niedrigen Vorlauftemperaturen besonders effizient.',
|
||||
gedaemmt: 'Dank guter Dämmung reichen niedrige Vorlauftemperaturen – ideal für eine Wärmepumpe. Ob einzelne Heizkörper getauscht werden sollten, prüfen wir vor Ort.',
|
||||
unsaniert: 'Mit Flächenheizung kann eine Wärmepumpe auch im älteren Haus gut funktionieren. Eine Heizlastberechnung zeigt, ob vorher kleinere Maßnahmen sinnvoll sind.'
|
||||
},
|
||||
pellet: 'Holzpellets heizen nahezu CO<sub>2</sub>-neutral und liefern auch die hohen Vorlauftemperaturen, die klassische Heizkörper in älteren Häusern brauchen. Den nötigen Lagerraum haben Sie bereits.',
|
||||
hybrid: 'Wärmepumpe und Brennwertkessel im Team: Die Wärmepumpe übernimmt den Großteil des Jahres, der Kessel springt nur an sehr kalten Tagen ein. Oft ist auch eine Hochtemperatur-Wärmepumpe möglich – das klären wir mit einer Heizlastberechnung.'
|
||||
pellet: 'Holzpellets heizen nahezu CO<sub>2</sub>-neutral und schaffen die hohen Vorlauftemperaturen, die ältere Heizkörper brauchen. Den Lagerraum haben Sie bereits.',
|
||||
hybrid: 'Die Wärmepumpe übernimmt den Großteil des Jahres, ein Brennwertkessel springt nur an sehr kalten Tagen ein. Oft reicht auch eine Hochtemperatur-Wärmepumpe.'
|
||||
};
|
||||
|
||||
/* Bewertung – bewusst einfach und nachvollziehbar gehalten */
|
||||
@@ -72,8 +71,8 @@
|
||||
function addons(a, top) {
|
||||
var list = [];
|
||||
if (a.dach === 'ja') list.push(['i-sun', 'Solarthermie für Warmwasser']);
|
||||
if (a.gebaeude === 'neubau') list.push(['i-wind', 'Wohnraumlüftung mit Wärmerückgewinnung']);
|
||||
if (top === 'wp' && a.verteilung !== 'fbh') list.push(['i-gauge', 'Heizkörper-Check & hydraulischer Abgleich']);
|
||||
if (a.gebaeude === 'neubau') list.push(['i-wind', 'Wohnraumlüftung']);
|
||||
if (top === 'wp' && a.verteilung !== 'fbh') list.push(['i-gauge', 'Hydraulischer Abgleich']);
|
||||
if (top === 'pellet') list.push(['i-tank', 'Pufferspeicher für mehr Effizienz']);
|
||||
if (top === 'hybrid') list.push(['i-gauge', 'Heizlastberechnung vor Ort']);
|
||||
list.push(['i-check', 'Beratung zu Fördermöglichkeiten']);
|
||||
@@ -104,7 +103,6 @@
|
||||
if (to === index) return;
|
||||
var from = panel(index);
|
||||
var target = panel(to);
|
||||
var dir = to > index ? 1 : -1;
|
||||
index = to;
|
||||
if (to >= total) renderResult();
|
||||
updateChrome();
|
||||
@@ -114,25 +112,13 @@
|
||||
from.classList.remove('is-active');
|
||||
target.hidden = false;
|
||||
target.classList.add('is-active');
|
||||
if (to >= total) animateBars();
|
||||
if (focus) {
|
||||
var f = to >= total ? result : target.querySelector('input:checked') || target.querySelector('input');
|
||||
if (f) f.focus({ preventScroll: true });
|
||||
}
|
||||
};
|
||||
|
||||
if (w.gsap && !reduce) {
|
||||
w.gsap.to(from, {
|
||||
x: -28 * dir, opacity: 0, duration: 0.28, ease: 'power2.in',
|
||||
onComplete: function () {
|
||||
w.gsap.set(from, { clearProps: 'transform,opacity' });
|
||||
reveal();
|
||||
w.gsap.fromTo(target, { x: 36 * dir, opacity: 0 }, { x: 0, opacity: 1, duration: 0.7, ease: 'expo.out', clearProps: 'transform,opacity' });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
reveal();
|
||||
}
|
||||
reveal();
|
||||
}
|
||||
|
||||
function renderResult() {
|
||||
@@ -142,12 +128,10 @@
|
||||
var text = r.top === 'wp' ? TEXTS.wp[answers.gebaeude] || TEXTS.wp.gedaemmt : TEXTS[r.top];
|
||||
result.querySelector('[data-result-text]').innerHTML = text;
|
||||
|
||||
var bars = result.querySelector('[data-result-bars]');
|
||||
bars.innerHTML = r.order.map(function (k, i) {
|
||||
return '<li class="' + (i === 0 ? 'is-top' : '') + '"><span>' + SYSTEMS[k].name + '</span>' +
|
||||
'<span class="bar" role="img" aria-label="' + SYSTEMS[k].name + ': ' + r.pct[k] + ' Prozent Übereinstimmung"><i data-v="' + (r.pct[k] / 100) + '"></i></span>' +
|
||||
'<b>' + r.pct[k] + ' %</b></li>';
|
||||
}).join('');
|
||||
// Keine Prozentwerte – nur sinnvolle Alternativen nennen
|
||||
var alt = r.order.slice(1).filter(function (k) { return r.pct[k] >= 50; })
|
||||
.map(function (k) { return SYSTEMS[k].name; });
|
||||
result.querySelector('[data-result-bars]').innerHTML = alt.length ? '<li>Ebenfalls denkbar: ' + alt.join(' oder ') + '</li>' : '';
|
||||
|
||||
result.querySelector('[data-result-addons]').innerHTML = addons(answers, r.top).map(function (a) {
|
||||
return '<li>' + icon(a[0]) + a[1] + '</li>';
|
||||
@@ -163,19 +147,6 @@
|
||||
apply.setAttribute('data-message', summary);
|
||||
}
|
||||
|
||||
function animateBars() {
|
||||
var bars = result.querySelectorAll('.bar i');
|
||||
// Zwei Frames warten, damit die Transition sicher greift
|
||||
w.requestAnimationFrame(function () {
|
||||
w.requestAnimationFrame(function () {
|
||||
Array.prototype.forEach.call(bars, function (b, i) {
|
||||
b.style.transitionDelay = (0.12 * i) + 's';
|
||||
b.style.transform = 'scaleX(' + b.getAttribute('data-v') + ')';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function restart() {
|
||||
answers = {};
|
||||
Array.prototype.forEach.call(form.querySelectorAll('input[type="radio"]'), function (r) { r.checked = false; });
|
||||
@@ -202,7 +173,7 @@
|
||||
updateChrome();
|
||||
if (pointerSelect) {
|
||||
w.clearTimeout(advanceTimer);
|
||||
advanceTimer = w.setTimeout(function () { go(index + 1, false); }, 320);
|
||||
advanceTimer = w.setTimeout(function () { go(index + 1, true); }, 320);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user