Merge remote-tracking branch 'origin/main' into dev-moritz

2025-02-11 17:33:31 +07:00
parent e3844c8684 e0efad1cc5
commit c52a700c88
15 changed files with 434 additions and 152 deletions
--- a/src/components/AnsichtsausweisButton.svelte
+++ b/src/components/AnsichtsausweisButton.svelte
@@ -29,7 +29,7 @@
 }
 </script>

-<button class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" on:click={() => {
+<button class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" on:click={() => {
 	openWindowWithPost("/pdf/ansichtsausweis", {
 		ausweis: JSON.stringify(ausweis),
 		aufnahme: JSON.stringify(aufnahme),
--- a/src/components/Ausweis/AusweisPreviewContainer.svelte
+++ b/src/components/Ausweis/AusweisPreviewContainer.svelte
@@ -60,7 +60,7 @@

 		</div>

-		<div class="flex flex-row gap-4 mt-4">
+		<div class="grid grid-cols-2 gap-4 mt-4">
 			<AnsichtsausweisButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 			<DatenblattButton {ausweis} {aufnahme} {objekt} bilder={images} {ausweisart} />
 		</div>
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -113,24 +113,37 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 "
 >
 	<!-- primäre Heizquellen -->
+	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
+		<div class="input-standard">
+			<Inputlabel title="Heizquellen"></Inputlabel>

-	<div class="input-standard order-1 md:order-1 xl:order-1">
-		<Inputlabel title="Heizquellen"></Inputlabel>
-
-		<div class="input-checkboxen">
-			<div
-				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
-			>
-				<input
-					id="primaere_heizquelle"
-					type="checkbox"
-					class="checkbox"
-					name="primaere_heizquelle"
-					checked={true}
-				/>
-				<label for="primaere_heizquelle">primäre Heizquelle</label>
+			<div class="input-checkboxen">
+				<div
+					class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+				>
+					<input
+						id="primaere_heizquelle"
+						type="checkbox"
+						class="checkbox"
+						name="primaere_heizquelle"
+						checked={true}
+					/>
+					<label for="primaere_heizquelle">primäre Heizquelle</label>
+				</div>
+	
 			</div>
+	
+			<div class="help-label">
+				<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b> 
+					(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben. 
+					Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der 
+				Verbräuche öffnet sich dann.</HelpLabel>
+			</div>
+		</div>

+		<div class="input-standard">
+			<Inputlabel title="Heizquellen"></Inputlabel>
+			<div class="input-checkboxen">
 			<div
 				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
 			>
@@ -149,19 +162,14 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 					>
 				{/if}
 			</div>
-		</div>
-
-		<div class="help-label">
-			<HelpLabel
-				>Sie haben die Möglichkeit neben der Hauptheizung die <b
-					>Verbräuche weiterer Heizquellen</b
-				>
-				(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel
-				etc.) einzugeben. Dazu setzen Sie den Haken bei zusätzlicher Heizquelle.
-				Eine weiterer Bereich zur Eingabe der Verbräuche öffnet sich dann.</HelpLabel
-			>
+			</div>
+			<div class="help-label">
+				<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
+					gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
+			</div>
 		</div>
 	</div>
+	

 	<!-- Zeitraum 1 -->

--- a/src/components/DatenblattButton.svelte
+++ b/src/components/DatenblattButton.svelte
@@ -13,7 +13,7 @@
 	$: base64Bilder = Buffer.from(JSON.stringify(bilder), "utf-8").toString("base64")
 </script>

-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6 cursor-pointer" target="_blank" href="/pdf/datenblatt?ausweis={base64Ausweis}&objekt=${base64Objekt}&aufnahme={base64Aufnahme}&bilder={base64Bilder}">
+<a class="border-2 rounded-lg bg-white text-center hover:shadow-md no-underline p-3 cursor-pointer" target="_blank" href="/pdf/datenblatt?ausweis={base64Ausweis}&objekt=${base64Objekt}&aufnahme={base64Aufnahme}&bilder={base64Bilder}">
 	<img src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
 </a>
--- a/src/components/design/content/WidgetCardTemplate.svelte
+++ b/src/components/design/content/WidgetCardTemplate.svelte
@@ -11,37 +11,41 @@
 </script>


-		
-
-
-
-		<h2 class="titel">{name}</h2>
-
-		{#if empfehlung=="ja"}
-		<!--<div class="empfehlung">Empfehlung</div>-->
-		{/if}
-		
+{#if empfehlung=="ja"}
+<div class="empfehlung">Empfehlung</div>
+{/if}
+		<h2 class="titel sm:mb-2">{name}</h2>


 			<div class="sumCent">
+				<div class="variante">{variant}</div>
 				<img
 					class="image"
 					{src}
 					{alt}
 				/>
 				<div class="justify-self-start">
-					<p class="promo">
+					<p class="price">
 							ab {price} €					
 					</p>
 				</div>

 			</div>

+			<div class="sumCent buttoncols">	
+				<a
+					href="{href_buy}"
+					class="buttoncol">jetzt&nbsp;online erstellen</a
+				>
 	
+				<a
+					href="{href_overview}"
+					class="buttoncol">Produkt-Übersicht</a
+				>
+	
+				</div>

-			<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
-
-			<div class="sumCent sumRows forServices">
+			<div class="sumRows forServices">
 			
 				{#each services as [service, check]}
 				<div class="services">
@@ -53,56 +57,37 @@
 			</div>


-
-			<div class="sumCent buttoncols">	
-			<a
-				href="{href_buy}"
-				class="buttoncol">jetzt&nbsp;online erstellen</a
-			>
-
-			<a
-				href="{href_overview}"
-				class="buttoncol">Produktübersicht</a
-			>
-
-			</div>
-
-
-
-
-
-
 <style lang="postcss">



-.sumCent{@apply justify-self-center col-span-2 md:mb-6}
-.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
-.forServices{@apply  block}
+.sumCent{@apply justify-self-center col-span-2}
+.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
+.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}

 .image{@apply w-[75%] justify-self-center
 	md:w-[75%] md:pl-12}

-.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
+.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
 md:grid-cols-2 md:w-[auto]}

-.buttoncol{@apply mt-[0.5rem] text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
+.buttoncol{@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
 hover:bg-[#222222] hover:text-white}


-	.promo{@apply tracking-tighter text-[2rem] text-gray-700 pl-12 m-0 -mt-4;
+	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
 				font-family: "Antique Olive Compact bold";}



 	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
-	.empfehlung{@apply bg-red-700 text-[0.75rem] text-white  px-2 py-1 rounded-sm rotate-[5deg]}
+	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
 	.variante {
-		@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
+		@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] rounded-md pl-[4px] pr-[6px] py-[0px];
 	}

 	.services {
-		@apply hidden w-full text-start py-1 md:grid md:grid-cols-[1fr_50px]
+		@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px]
 	}
 	.services:not(:last-child) {
 		@apply border-b-[1px] border-gray-200;
--- a/src/components/design/header/AusweisHeader_immowelt.astro
+++ b/src/components/design/header/AusweisHeader_immowelt.astro
@@ -0,0 +1,60 @@
+---
+import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
+---
+
+<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
+
+	<div class="grid grid-cols-[min-content_1fr] items-center">
+		
+
+	<div class="w-[150px] h-[80px]">
+	<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
+	<img class="w-[109px]" src="/images/immowelt/immowelt.svg" alt="immowelt"/>
+	</div>	
+	</div>
+
+<div>
+
+<ul class="navlist">
+<li><button>Verbrauchsausweis</button></li>
+<li><button>Bedarfssausweis</button></li>
+<li><button>Verbrauchsausweis Gewerbe</button></li>
+</ul>
+
+</div>
+
+</div>
+
+
+
+</header>
+
+<div class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover" style="background-image: url('/images/immowelt/hero-desktop.webp'); 
+background-repeat:no-repeat; background-position:right;">
+</div>
+
+<style lang="postcss">
+
+@font-face {
+    font-family: "immo Sans";
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
+    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
+         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+}
+
+
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+
+	.navlist{@apply block sm:flex pl-[1.75rem];}
+	.navlist li{@apply flex md:pr-[6px]}
+	.navlist li button{@apply text-[0.75rem] md:text-[1rem]  text-[#646464] sm:p-2 text-left
+		hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
+		font-family: "immo Sans";
+		font-weight:400;}
+
+</style>
--- a/src/components/widgets/WelcherAusweisWidget_1.svelte
+++ b/src/components/widgets/WelcherAusweisWidget_1.svelte
@@ -2,7 +2,6 @@
 	import { fade } from "svelte/transition";
 	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
 	import { PRICES } from "#lib/constants.js";
-
 	
 	let gebaeudetyp: string 				= "bitte auswählen";
 	let anlass: string 						= "bitte auswählen";
@@ -16,29 +15,66 @@
 	const gewerbeHouse 						= ["Gewerbegebäude", "Mischgebäude"];


+	let ausnahme: boolean = false;
+	let oneBOX: boolean = false;
+	let threeBOX: boolean = false;	
+
 function getBoxes(){
 if(twoBoxReason.includes(anlass)){

-document.getElementById('firstrow')?.classList.remove('md:grid-cols-2');
-document.getElementById('firstrow')?.classList.add('md:grid-cols-3');
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
 }else{
+document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
+document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
+}
+}

-document.getElementById('firstrow')?.classList.remove('md:grid-cols-3');
-document.getElementById('firstrow')?.classList.add('md:grid-cols-2');
+function getCount(){
+if(oneBOX===true){
+	console.log('ONE');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
+}else if(threeBOX===true){
+	console.log('THREE');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
+
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
+
+}
+
+else{
+	console.log('FOUR');
+	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
+	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
+	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
 }

 }


-	let ausnahme: boolean = false
-
 $: {
-		
-		ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert")) 
+ausnahme 	= 	((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
            ? true 
            : false;
+
+oneBOX 		=  	((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") || 
+				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) || 
+				((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
+            ? true 
+            : false;
+
+threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
+            ? true 
+            : false;
+			
 }

+
+
+
 </script>


@@ -56,7 +92,7 @@ $: {
 				<select
                    id="anlass"
 					class="selectfeld"
-					bind:value={anlass} on:change={getBoxes}
+					bind:value={anlass} on:change={getBoxes} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Vermietung/Verkauf"
@@ -74,7 +110,7 @@ $: {
 				<div class="titel">Gebäudetyp</div>
 				<select 
 					class="selectfeld"
-					bind:value={gebaeudetyp} on:change={getBoxes}
+					bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -90,7 +126,7 @@ $: {
 				<div class="titel">Sanierungsstand</div>
 				<select 
 					class="selectfeld"	
-					bind:value={sanierungsstatus} on:change={getBoxes}
+					bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -109,7 +145,7 @@ $: {
 				<select
 					id="baujahr"
 					class="selectfeld"
-					bind:value={baujahr}
+					bind:value={baujahr} on:change={getCount}
 					
 				>
 					<option selected disabled>bitte auswählen</option>
@@ -122,7 +158,7 @@ $: {
 					<div class="titel">Heizungsalter</div>
 					<select
 						class="selectfeld"
-						bind:value={heizungsAlter}
+						bind:value={heizungsAlter} on:change={getCount}
 					>
 						<option selected disabled>bitte auswählen</option>
 						<option value="< 3">jünger als 3 Jahre</option>
@@ -134,7 +170,7 @@ $: {
 				<div class="titel">Wohneinheiten</div>
 				<select
 					class="selectfeld"
-					bind:value={einheiten}
+					bind:value={einheiten} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 4 Wohneinheiten"
@@ -150,7 +186,7 @@ $: {
 				<div class="titel">Leerstand</div>
 				<select
 					class="selectfeld ausnahmen"
-					bind:value={leerStand}
+					bind:value={leerStand} on:change={getCount}
 				>
 					<option selected disabled>bitte auswählen</option>
 					<option value="bis 30">bis 30%</option>
@@ -165,7 +201,7 @@ $: {

 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Wohngebäude"
@@ -190,7 +226,7 @@ $: {
 			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Wohngebäude"
@@ -212,10 +248,10 @@ $: {
 				</div>
 			{/if}

-			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
+			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Verbrauchsausweis Gewerbegebäude"
@@ -242,7 +278,7 @@ $: {
 			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
 				<div
 					class="produktbox"
-					transition:fade={{ duration: 200 }}
+					transition:fade={{ duration: 0 }}
 				>
 				<WidgetCardTemplate
 					name="Bedarfsausweis Gewerbegebäude"
@@ -268,7 +304,7 @@ $: {
 			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
 			<div
 				class="produktbox"
-				transition:fade={{ duration: 200 }}
+				transition:fade={{ duration: 0 }}
 			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Wohngebäude"
@@ -285,7 +321,8 @@ $: {
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 

 			></WidgetCardTemplate>
 			
@@ -295,7 +332,7 @@ $: {
 			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
 			<div
 				class="produktbox"
-				transition:fade={{ duration: 200 }}
+				transition:fade={{ duration: 0 }}
 			>
 			<WidgetCardTemplate
 				name="GEG-Nachweis Gewerbegebäude"
@@ -312,7 +349,8 @@ $: {
 					["xxx", false],
 					["xxx", false],
 				]}
-				href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
+				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
 			></WidgetCardTemplate>
 			
 			</div>
@@ -324,14 +362,6 @@ $: {

 <style lang="postcss">

-@font-face {
-	font-family: 'Heron';
-	font-weight: 700;
-	font-style: normal;
-	font-display:swap;
-	src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
-  }
-
  @font-face {
 	font-family: 'Antique Olive Compact bold';
 	font-weight: 700;
@@ -383,7 +413,9 @@ $: {

 }

-.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2
+#OEA_input{@apply grid}
+
+.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
 	md:grid-cols-4 md:gap-x-4 md:gap-y-2;

 .produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg