Aufgabe
Baue eine Progressive-Web-App mit dem Namen eVsFuel. Mit der App sollen die Kosten verschiedener Fahrzeugtypen (insb. Elektroautos vs. Verbrenner: Diesel/Benzin) über die Nutzungsdauer verglichen werden. Mobile‑First, aber auch Desktop‑fähig.
Technik
- HTML / JS / CSS – möglichst in einer Datei. Externe Ressourcen/Tools dürfen genutzt werden.
- PWA: Favicons / App‑Icons (Platzhalter)
- Sprache: Deutsch. Deutsche Formate (Dezimaltrennzeichen, EUR etc.).
Layout
- Moderner, aufgeräumter Look.
- Header-Zeile oben mit App-Name und Burger‑Menu (link) für Einstellungen & Zusatzfunktionen.
- Oberes Drittel: interaktives, dynamisches Vergleichsdiagramm / Info‑Display.
- Direkt darunter: Allgemeine Werte (Schieberegler/Stepper):
- Jährliche Laufleistung: 0–150.000 km, step 1.000, default 15.000
- Haltedauer: 1–20 Jahre, step 1, default 8
- Darunter: Fahrzeug‑Tabs (mind. 2, max. 5). +/- zum Hinzufügen/Entfernen. Pro Tab vordefinierte Modelle auswählbar.
- Alle Werte über Slider/Stepper einstellbar; Eingabefelder vermeiden. Bereich dynamisch höhenanpassend und bei Bedarf scrollbar.
- Info‑Buttons (i) neben Beschriftungen für PopOver/ToolTip.
Vordefinierte Fahrzeugdaten
Daten im Code oder JSON. Anfangsliste: ca. 10 Modelle je Kategorie (Elektro, PHEV, Diesel, Benzin).
Fahrzeug-Parameter
- Fahrzeugbezeichnung (max. 32 Zeichen)
- Anschaffungskosten
- Laufende Kosten:
- Versicherung / Jahr
- Steuer / Jahr
- Verbrauch / 100 km (l oder kWh)
- Wartung / Jahr
- Wertverlust (Prognostizierter Restwert am Ende der Laufzeit)
- Zusatz für Elektro & PHEV:
- Batteriekapazität (kWh) — Reichweite dynamisch berechnet und angezeigt
- Zellchemie (NMC, LFP, SIB) — beeinflusst Alltagsreichweite
- Förderung (optional) — reduziert Anschaffungskosten; initial Übernahme aus allgemeinen Einstellungen
- PHEV: zusätzliche Angaben für den Verbrenneranteil
- Sinnvolle Bereiche & Steps für Slider/Stepper wählen.
Wertverlust
Wertverlust ist nicht linear (stärker in den ersten Jahren, flacher bei längerer Haltedauer). Slider für Restwert-Faktor 0–100%; darunter Anzeige des kalkulierten Restwerts am Laufzeitende.
Burger‑Menu: Panel mit Einstellungen & Funktionen
Allgemeine Einstellungen
- Kraftstoffkosten (Schieberegler, dynamische Hinweise):
- Ø Kosten je kWh Strom: 0–1,20 € (default 0,30 €). Hinweise zu PV / Haushalt / öffentlich.
- Ø Kosten je Liter Benzin: 1,00–3,00 € (default 1,79 €). Preisbereichshinweise.
- Ø Kosten je Liter Diesel: 1,00–3,00 € (default 1,83 €). Preisbereichshinweise.
- E‑Auto Förderung (optional, default 0,00 €)
- Modus (Select):
- Laufende Kosten (mit Wertverlust) – default
- Laufende Betriebskosten (ohne Wertverlust)
- Gesamtkosten (mit Wertverlust)
- Gesamtkosten (ohne Wertverlust)
Funktionen
- Speichern: Alle Einstellungen als Sets im localStorage (Standardname: Datum + Fahrzeugnamen). Max. 20 Sets. UI zum Laden/Löschen.
- Exportieren: Aktuellen Vergleich per URL (kompakte Parameter) teilen. Bei zu langer URL Hinweis anzeigen. Beim Laden einer Export‑URL: App lädt Einstellungen; Titel & Description passen sich für Link‑Vorschau an.
- Über diese App (About): Platzhalter‑Text für Projektinfo.
Dynamisches Vergleichsdiagramm / Info‑Display
- Zeigt TCO (Kosten) über die Haltedauer, farbig pro Fahrzeug.
- Zusätzlich: CO₂‑Bilanz als aggregierter Wert (kein Chart).
- Anzeige aktualisiert sich in Echtzeit bei Änderungen.
- Detailansicht‑Button: öffnet animiertes Vollbilddiagramm und darunter scrollbare Detaildaten pro Fahrzeug (Kostenzusammensetzung als Balkendiagramm, weitere Diagramme wo sinnvoll).
- Detailansicht druckbar (kleiner Drucken‑Button).