IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #225 from IBCornelsen/main

Browse Source 
getMain
This commit is contained in:
UMBENOMENA
2024-12-17 01:30:26 +01:00
committed by GitHub
parent 8b02df6b28 1a88576fd8
commit f8e902fb0a
9 changed files with 246 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/design/content/ProduktVergleich.svelte
View File

@@ -2,16 +2,15 @@
import { PRICES } from "#lib/constants";
</script>
<div class="mt-12 m-auto w-[90%] relative">
<div class="mt-6 mb-6 m-auto w-[99%] relative">
<div id="produktvergleich">
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="blue-top flex flex-row ">
<div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/></div>
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
</div>
<div class="white box">
<div class="variante">einfach</div>
<div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
@@ -38,9 +37,9 @@
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="name">Bedarfssausweis<br>Wohngebäude</div>
<div class="blue-top flex flex-row ">
<div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/></div>
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
</div>
<div class="white box">
@@ -54,7 +53,7 @@
<div class="orange">
<div class="price">
ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
<b>ab {PRICES.BedarfsausweisWohnen[0]} €</b> inkl. 19% MwSt.
</div>
</div>
@@ -79,13 +78,13 @@
#produktvergleich{@apply
grid grid-cols-[1fr] gap-y-3 gap-x-6
grid grid-cols-[1fr] gap-y-1 gap-x-3
lg:grid-cols-2
xl:grid-cols-2;
.saeule{@apply grid grid-rows-subgrid row-span-10;
img{@apply justify-self-center mb-1 w-[50%] }
.saeule{@apply grid grid-rows-subgrid row-span-10 mb-8;
img{@apply justify-self-center mb-1 w-[75%] }
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
@@ -97,20 +96,20 @@ img{@apply justify-self-center mb-1 w-[50%] }
.variante{@apply w-fit text-black justify-self-end mr-4}
.variante{font-size: clamp(15px, 4vh, 24px)}
.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
.services{@apply text-base py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-400}
.check{@apply self-center font-bold text-green-700}
.check-no{@apply self-center font-bold text-red-700}
.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
.orange{@apply bg-primary text-white text-center rounded-md p-1 relative shadow-saeule ring-primary ring-1}
.price{font-size: clamp(15px, 3vh, 28px)}
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-1 shadow-saeule ring-secondary ring-1}
}
}

0
src/components/design/content/ProduktVergleichGewerbe.svelte Normal file
View File

47
src/components/design/content/TextboxCardTemplate.svelte Normal file
View File

@@ -0,0 +1,47 @@
<script lang="ts">
export let TitelName: string;
export let BulletPoints: [string, boolean][];
</script>
<div class="border rounded-xl">
<div class="flex flex-row w-full bg-secondary rounded-t-3xl pl-5 pt-1 pb-1">
<h3 class="text-white">{TitelName}</h3>
</div>
<div class="bg-white">
<div class="white">
{#each BulletPoints as [point]}
<div class="services">
<ul class="custom-list pl-6 space-y-2"><li>{point}</li></ul>
</div>
{/each}
</div>
</div>
</div>
<style lang="scss">
.white {
@apply text-center text-black p-6;
}
.services {
@apply text-start py-2;
}
.services:not(:last-child) {
@apply border-b-[0px] border-gray-300;
}
.custom-list {
@apply list-none pl-6; /* Entfernt Standardpunkte */
li {
@apply relative text-gray-700 text-lg list-none; /* Entfernt Standardpunkte */
&::before {
@apply absolute left-[-1.5rem] top-[0.4rem] w-3 h-3 bg-primary content-[""];
/* Quadrat mit `w-2`, `h-2`, orange Hintergrund */
}
}
}
</style>

4
src/components/design/content/WidgetCardTemplate.svelte
View File

@@ -8,7 +8,7 @@
export let alt: string;
</script>
<div class="box card bg-white px-6 py-4 mb-5">
<div class="box card bg-white px-6 py-4 mb-5 mt-5">
<div>
<h2>{name}</h2>
<hr class="mb-2" />
@@ -16,7 +16,7 @@
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img
class="w-[100%] !min-w-[100px]"
class="w-[50%] !min-w-[50px]"
{src}
{alt}
/>

116
src/components/widgets/WelcherAusweisWidget.svelte
View File

@@ -8,6 +8,9 @@
let einheiten: string;
let sanierungsstatus: string;
let baujahr: string;
let heizungsAlter: string;
let leerStand: string;
const allowedTypes = [
"Einfamilienhaus",
@@ -26,11 +29,11 @@
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) &&
(einheiten === "mehr als 4 Wohneinheiten" ||
sanierungsstatus === "saniert");
sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp);
allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
}
}
</script>
@@ -40,20 +43,6 @@
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
@@ -72,8 +61,39 @@
<option value="sonstiges">sonstiges z.B. Bank</option>
</select>
</div>
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
{#if allowedReason.includes(anlass)}
<div class="OEA_item2">
<div class="OEA_title1">Sanierungsstand</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
{/if}
</div>
{#if allowedReason.includes(anlass)}
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
@@ -87,6 +107,18 @@
</select>
</div>
<div class="OEA_item3">
<div class="OEA_title2">Heizungsalter</div>
<select
class="OEA_auswahl2"
bind:value={heizungsAlter}
>
<option value=">= 3" selected disabled>bitte auswählen</option>
<option value="< 3">jünger als 3 Jahre</option>
<option value=">= 3">3 Jahre oder älter</option>
</select>
</div>
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
@@ -103,18 +135,23 @@
</select>
</div>
<div class="OEA_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<div class="OEA_item4">
<div class="OEA_title2">Leerstand</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
bind:value={leerStand}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
<option value="bis 30" selected disabled>bitte auswählen</option>
<option value="bis 30"
>bis 30%</option
>
<option value="mehr als 30"
>mehr als 30%</option
>
</select>
</div>
</div>
{/if}
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
@@ -187,6 +224,30 @@
</div>
{/if}
{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
services={[
["xxx", true],
["xxx", true],
["xxx", false],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
@@ -215,7 +276,7 @@
<style lang="scss">
#OEA_widget {
@apply bg-gray-100 p-4 shadow-xl;
@apply bg-gray-200 p-4 shadow-xl rounded-xl;
#OEA_input {
@apply space-y-2;
@@ -231,8 +292,11 @@
.OEA_item5 {
@apply w-full;
.OEA_title1,
.OEA_title2 {
@apply font-bold text-lg text-gray-700 p-1.5 pl-2 rounded w-full;
}
.OEA_title1 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
@@ -243,7 +307,7 @@
}
.OEA_title2 {
@apply bg-primary;
@apply bg-gray-400;
}
.OEA_auswahl1,
@@ -256,7 +320,7 @@
}
.OEA_zeile3 {
@apply flex flex-row space-x-4 pt-6 items-start justify-center;
@apply flex flex-row space-x-4 items-start justify-center;
}
.OEA_item6 {

59
src/pages/index.astro
View File

@@ -1,14 +1,69 @@
---
import Layout from "#layouts/Layout.astro";
import ProduktVergleich from "#content/ProduktVergleich.svelte";
import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<article>
<h1>Ihr Partner für Energieausweise und GEG Nachweise</h1>
<p>Ob für <span>Vermietung, Verkauf, Modernisierung, Neubau</span> oder zur <span>Vorlage bei Ihrer Bank</span> -
wir erstellen den passenden <span>Energieausweis</span> oder <span>GEG-Nachweis</span> für Ihr Objekt.
Mit <span>18 Jahren Erfahrung</span> sind wir der richtige Ansprechpartner
für Hauseigentümer, Bauherren, Makler und Verwalter.</p>
<br>
<h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
<article>
<WelcherAusweisWidget client:load/>
<article>
<br>
<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>
<p>
Rechtssicherer Bearbeitung <span class="text-green-700;">✔</span>&nbsp;&nbsp;&nbsp;
Langjähriger Erfahrung <span class="text-green-700;">✔</span>&nbsp;&nbsp;&nbsp;
Schneller <span>online Erstellung </span><span class="text-green-700;">✔</span>
</p>
</article>
<br>
<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
<TextboxCardTemplate
TitelName="Folgende Punkte ändern sich:"
BulletPoints={[
["Erhöhte Sorgfaltspflicht bei der Erstellung der Energieausweise. Zur Einschätzung von Modernisierungsempfehlungen sind jetzt Fotos relevanter Gebäudebereiche erforderlich. Dazu zählen Dach, Fenster, Heizung und Außenwand. Diese Maßnahmen sorgen für präzisere Bewertungen und Modernisierungsvorschläge.", true],
["Die Primärenergiefaktoren zur Ermittlung des Gebäudekennwerts werden jetzt direkt im GEG (§22 Primärenergiefaktoren) geregelt. Dadurch wird mehr Transparenz und Nachvollziehbarkeit geschaffen. Auch findet die Verwendung von Biogas aus dem Erdgasnetz jetzt angemessen Berücksichtigung.", true],
["Die lokal erzeugte Energie durch PV-Anlagen wird besser berücksichtigt. Bis zu 45 % des Jahres-Primärenergiebedarfs können durch selbst erzeugten Strom abgezogen werden. Das fördert die Nutzung erneuerbarer Energien und reduziert den Gesamtenergiebedarf.", false],
["Im Energieausweis müssen nun verpflichtend die CO2-Emissionen des Gebäudes angegeben werden. Diese neue Regelung erhöht die Transparenz hinsichtlich der Klimawirkung und unterstützt Eigentümer bei der Planung nachhaltiger Maßnahmen.", false],
]}
></TextboxCardTemplate>
<br>
<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Wohngebäude:</h2>
<ProduktVergleich />
<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>
<br>
<h2>Was ist ein Energieausweis?</h2>
<TextboxCardTemplate
TitelName="Zusammenfassung"
BulletPoints={[
["Der Gesetzgeber hat zwei Arten des Energieausweises bestimmt: Den Verbrauchsausweis und den Bedarfsausweis.", true],
["Je nach Gebäudeart, Baujahr, Nutzungsart gilt es verschiedene Kriterien für den Energieausweis zu beachten.", true],
["Der Energieausweis gibt Modernisierungsempfehlungen aus die auf mögliche Energiesparmaßnahmen hinweisen.", false],
["Der Energieausweises beinflusst den Marktwert einer Immobilie.", false],
["Der Energieausweis offenbart bauliche Mängel, die eine Energieverschwendung mit sich bringen.", true],
["Anhand des Bedarfsausweises lässt sich der energetische Zustand verschiedener Gebäude miteinander vergleichen.", false],
]}
></TextboxCardTemplate>
<h1>Unsere Ausweise im Detail:</h1>
<!-- <ProduktVergleich /> -->
</Layout>

13
src/pages/index_1.astro
View File

@@ -1,13 +0,0 @@
---
import Layout from "#layouts/Layout_1.astro";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>Energieausweis online erstellen</h1>
<!-- <BannerPrice client:load /> -->
</Layout>

51
src/pages/welcher-energieausweis.mdx
View File

@@ -3,8 +3,8 @@ layout: ../layouts/Layout.astro
title: "Welcher Energieausweis?"
---
import { BoxWithHeading } from "@ibcornelsen/ui";
import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
# Welcher Energieausweis ist der richtige?
@@ -53,16 +53,19 @@ eingehalten werden müssen.
---
<BoxWithHeading heading="Folgende Dokumente und Informationen werden für den Bedarfsausweis benötigt:">
- Grundriss- und Ansichtspläne sowie Baubeschreibung. - Die
wärmeübertragenden Umfassngsflächen wie Dach, Außenwand, Fenster,
Kellerdecke bzw. Boden werden aus den Plänen ermittelt. - Auch das
Gebäudevolumen zur Ermittlung der energetischen Gebäudenutzfläche und die
verschiedenen Nutzungszonen werden aus den Plänen erhoben. - Die verwendete
Heizungsanlage mit den Wärmeübergabekomponenten (Heizkörper,
Fußbodenheizung, etc) sowie Energieträger und Kessel werden aus der
Baubeschreibung oder aus den Angaben des Bauherren herangezogen.
</BoxWithHeading>
<TextboxCardTemplate
TitelName="Folgende Dokumente und Informationen werden für den Bedarfsausweis benötigt:"
BulletPoints={[
["Grundriss- und Ansichtspläne sowie Baubeschreibung.", true],
["Die wärmeübertragenden Umfassngsflächen wie Dach, Außenwand, Fenster,Kellerdecke bzw. Boden werden aus den Plänen ermittelt.", true],
["Auch das Gebäudevolumen zur Ermittlung der energetischen Gebäudenutzfläche und die verschiedenen Nutzungszonen werden aus den Plänen erhoben.", false],
["Die verwendete Heizungsanlage mit den Wärmeübergabekomponenten (Heizkörper, Fußbodenheizung, etc) sowie Energieträger und Kessel werden aus der Baubeschreibung oder aus den Angaben des Bauherren herangezogen.", false],
]}
></TextboxCardTemplate>
Sollten Sie den Bedarfsausweis nur für Vermietung und Verkauf benötigen, dann
können Sie den Ausweis bei uns auch online erstellen lassen. Die Eingabedaten
@@ -104,19 +107,19 @@ Anforderungen für Nichtwohngebäude eingehalten werden müssen.
---
<BoxWithHeading heading="Folgende Dokumente und Informationen werden für den Bedarfsausweis benötigt:">
- Grundriss- und Ansichtspläne sowie Baubeschreibung. - Die
wärmeübertragenden Umfassngsflächen wie Dach, Außenwand, Fenster,
Kellerdecke bzw. Boden werden aus den Plänen ermittelt. - Auch das
Gebäudevolumen zur Ermittlung der energetischen Gebäudenutzfläche und die
verschiedenen Nutzungszonen werden aus den Plänen erhoben. - Die verwendete
Heizungsanlage mit den Wärmeübergabekomponenten (Heizkörper,
Fußbodenheizung, etc) sowie Energieträger und Kessel werden aus der
Baubeschreibung oder aus den Angaben des Bauherren herangezogen. -
Anlagentechnik zu Kühlung und Lüftung der entsprechenden Nutzungszonen
müssen definiert sein. - Die verwendete Beleuchtung der verschiedenen
Nutzungszonen wird ebenfalls herangezogen
</BoxWithHeading>
<TextboxCardTemplate
TitelName="Folgende Dokumente und Informationen werden für den Bedarfsausweis Gewerbe benötigt:"
BulletPoints={[
["Grundriss- und Ansichtspläne sowie Baubeschreibung.", true],
["Die wärmeübertragenden Umfassngsflächen wie Dach, Außenwand, Fenster,Kellerdecke bzw. Boden werden aus den Plänen ermittelt.", true],
["Auch das Gebäudevolumen zur Ermittlung der energetischen Gebäudenutzfläche und die verschiedenen Nutzungszonen werden aus den Plänen erhoben.", false],
["Die verwendete Heizungsanlage mit den Wärmeübergabekomponenten (Heizkörper,Fußbodenheizung, etc) sowie Energieträger und Kessel werden aus der Baubeschreibung oder aus den Angaben des Bauherren herangezogen.", false],
["Anlagentechnik zu Kühlung und Lüftung der entsprechenden Nutzungszonen müssen definiert sein.", true],
["Die verwendete Beleuchtung der verschiedenen Nutzungszonen wird ebenfalls herangezogen", true],
]}
></TextboxCardTemplate>
Sollten Sie den Bedarfsausweis nur für Vermietung und Verkauf benötigen, dann
können Sie den Ausweis bei uns auch online erstellen lassen. Die Eingabedaten

9
src/style/global.css
View File

@@ -73,10 +73,15 @@ article {
hr {@apply mb-4 mt-4;}
h1 {@apply text-4xl font-normal mb-2;}
h2 {@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal mb-2;}
h2{@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal ml-1;}
a {@apply text-blue-700 font-medium text-lg;}
p {@apply text-lg font-normal mb-2;}
li {@apply text-lg font-normal list-disc}
ul {@apply list-inside mb-3;}
span {@apply text-secondary font-bold;}
}