Merge pull request #229 from IBCornelsen/Jens

Formelsammlung und Produktvergleich Gewerbe

src/components/design/content/ProduktVergleichGewerbe.svelte

@@ -0,0 +1,117 @@
+<script>
+	import { PRICES } from "#lib/constants";
+</script>
+
+<div class="mt-6 mb-6 m-auto w-[99%] relative">
+
+<div id="produktvergleich">
+
+    <div class="saeule">
+        <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>Gewerbe</div> 
+        </div>   
+        <div class="white box">
+            <div class="variante">einfach</div>
+            <div class="services"><div>Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung und des Gebäudestroms.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung und Verkauf.</div><div class="check">✔</div></div>
+			<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
+			<div class="services"><div>Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.</div><div class="check-no">✘</div></div>
+        </div>
+
+        <div class="orange">
+            <div class="price">
+                ab <b> {PRICES.VerbrauchsausweisGewerbe[0]} </b>€ inkl. 19% MwSt.
+            </div>
+
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">jetzt online erstellen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
+        </div>
+    </div>
+
+    <div class="saeule">
+        <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>Gewerbe</div> 
+        </div>  
+
+        <div class="white box">
+            <div class="variante">fundiert</div>
+            <div class="services"><div>Mehrzonenmodell nach DIN 18599 mit Erfassung der Gebäudegeometrie, UWerte der Außenbauteile sowie dem
+                Wirkungsgrad der eingebauten Anlagentechnik.</div><div class="check">✔</div></div>
+			<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau.</div><div class="check">✔</div></div>
+			<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</div><div class="check">✔</div></div>
+			<div class="services"><div>Fundierte vergleichbare Berechnung die bei den Banken für die Finanzierungsunterlagen immer akzeptiert wird.</div><div class="check">✔</div></div>
+        </div>
+
+        <div class="orange">
+            <div class="price">
+                <b>ab {PRICES.BedarfsausweisGewerbe[0]} €</b> inkl. 19% MwSt.
+            </div>
+
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">jetzt online anfragen</div> 
+        </div>
+
+        <div class="blue-bottom">
+            <div class="cta">zur Produktübersicht</div> 
+        </div>
+
+    </div>
+
+
+</div>
+
+</div>
+
+<style lang="scss">
+
+
+
+#produktvergleich{@apply 
+    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 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}
+.name{@apply w-full}
+.name{font-size: clamp(15px, 3vh, 18px)}
+
+.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
+
+.variante{@apply w-fit text-black justify-self-end mr-4}
+.variante{font-size: clamp(15px, 4vh, 24px)}
+
+.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-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-1 shadow-saeule ring-secondary ring-1}
+}
+
+}
+
+
+</style>

src/pages/GEG-2024/index.astro

@@ -0,0 +1,118 @@
+---
+
+import Layout from "#layouts/Layout.astro";
+
+---
+
+<Layout title="GEG 2024">
+
+<h1>GEG 2024 - Formelsammlung</h1>
+
+<div class="container mx-auto max-w-screen-md py-8">
+    <!-- Header -->
+    <header class="text-center mb-6">
+      <h3 class="mb-2">Der Nutzwärmebedarf einer Gebäudezone bzw. eines Einfamilienhauses</h3>
+    </header>
+
+    <!-- Formel -->
+    <section class="mb-6">
+      <p class="text-center text-lg mb-4">
+        <span class="font-mono text-2xl">Q<sub>h,b</sub> = Q<sub>sink</sub> - η ⋅ Q<sub>source</sub></span>
+      </p>
+    </section>
+
+    <!-- Variablenerklärung -->
+    <section>
+      <h2 class="text-xl font-semibold mb-4">Dabei ist:</h2>
+      <ul class="list-disc list-inside text-gray-700">
+        <li class="mb-2">
+          <span class="font-mono">Q<sub>h,b</sub></span>: der <strong>Nutzwärmebedarf</strong> in der Gebäudezone;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">Q<sub>sink</sub></span>: die <strong>Summe aller Wärmesenken</strong> in der Gebäudezone;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">η</span>: der <strong>Ausnutzungsgrad</strong> der Wärmequellen;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">Q<sub>source</sub></span>: die <strong>Summe aller Wärmequellen</strong> in der Gebäudezone.
+        </li>
+      </ul>
+    </section>
+  </div>
+
+  <div class="container mx-auto max-w-screen-md py-8">
+    <!-- Header -->
+    <header class="text-center mb-6">
+      <h3 class="mb-2">Monatlicher Nutzwärmebedarf</h3>
+      <p class="text-gray-700 text-lg">Formel zur Berechnung des monatlichen Nutzwärmebedarfs einer Gebäudezone</p>
+    </header>
+
+    <!-- Formel -->
+    <section class="mb-6">
+      <p class="text-center text-lg mb-4">
+        <span class="font-mono text-2xl">Q<sub>h,b,m</sub> = (1 - &eta;<sub>m</sub> &middot; &gamma;<sub>m</sub>) &middot; &beta;<sub>h,m</sub> &middot; &dot;Q<sub>h,ges</sub> &middot; t<sub>h,m</sub></span>
+      </p>
+    </section>
+
+    <!-- Variablenerklärung -->
+    <section>
+      <h2 class="text-xl font-semibold mb-4">Dabei ist:</h2>
+      <ul class="list-disc list-inside text-gray-700">
+        <li class="mb-2">
+          <span class="font-mono">Q<sub>h,b,m</sub></span>: der <strong>monatliche Nutzwärmebedarf</strong> in der Gebäudezone;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">&eta;<sub>m</sub></span>: der <strong>monatliche Ausnutzungsgrad</strong> der Wärmequellen;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">&gamma;<sub>m</sub></span>: das <strong>monatliche Wärmequellen-/Wärmesenken-Verhältnis</strong>;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">&beta;<sub>h,m</sub></span>: der <strong>monatliche Belastungsgrad</strong>;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">&dot;Q<sub>h,ges</sub></span>: der <strong>maximale Wärmestrom</strong>;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">t<sub>h,m</sub></span>: die <strong>monatliche Heizzeit</strong>.
+        </li>
+      </ul>
+    </section>
+  </div>
+
+  <div class="container mx-auto max-w-screen-md py-8">
+    <!-- Header -->
+    <header class="text-center mb-6">
+      <h3 class="mb-2">Maximaler Wärmestrom</h3>
+      <p class="text-gray-700 text-lg">Berechnung des maximalen Wärmestroms mit Wärmetransferkoeffizienten</p>
+    </header>
+
+    <!-- Formel -->
+    <section class="mb-6">
+      <p class="text-center text-lg mb-4">
+        <span class="font-mono text-2xl">&dot;Q<sub>h,ges</sub> = (H<sub>T</sub> + H<sub>V</sub>) &middot; &Delta;&theta;<sub>max</sub></span>
+      </p>
+    </section>
+
+    <!-- Variablenerklärung -->
+    <section>
+      <h2 class="text-xl font-semibold mb-4">Dabei ist:</h2>
+      <ul class="list-disc list-inside text-gray-700">
+        <li class="mb-2">
+          <span class="font-mono">&dot;Q<sub>h,ges</sub></span>: der <strong>maximale Wärmestrom</strong>;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">H<sub>T</sub></span>: der <strong>Wärmetransferkoeffizient für Transmission</strong> für die gesamte Gebäudezone;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">H<sub>V</sub></span>: der <strong>Wärmetransferkoeffizient für Lüftung</strong>;
+        </li>
+        <li class="mb-2">
+          <span class="font-mono">&Delta;&theta;<sub>max</sub></span>: die <strong>maximale Temperaturdifferenz</strong> zwischen Soll-Innentemperatur und Auslegungsaußentemperatur.
+        </li>
+      </ul>
+    </section>
+  </div>
+
+</Layout>

src/pages/index.astro

@@ -1,13 +1,14 @@
 ---
 import Layout from "#layouts/Layout.astro";
 import ProduktVergleich from "#content/ProduktVergleich.svelte";
+import ProduktVergleichGewerbe from "#content/ProduktVergleichGewerbe.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.
@@ -15,11 +16,11 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 		 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>
@@ -27,7 +28,7 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 			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
@@ -46,7 +47,10 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 
 	<ProduktVergleich />
 
-<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>		 	
+<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>
+
+<ProduktVergleichGewerbe />
+
 <br>
 
 <h2>Was ist ein Energieausweis?</h2>