UMBENOMENA
35
public/images/widget/gewerbegebaeude.svg
Normal file
35
public/images/widget/gewerbegebaeude.svg
Normal file
@@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #ff7d26;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #445096;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Wellen">
|
||||
<path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
|
||||
<path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
|
||||
</g>
|
||||
<g id="Gewerbegebaeude">
|
||||
<path class="cls-2" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
|
||||
<path class="cls-2" d="M254.81,65.15c-.02-6.59,0-45.44,0-45.44l-24.88-6.69v66.43s11.96-.84,24.22-12.71c.42-.41.66-.99.65-1.6Z"/>
|
||||
<g>
|
||||
<polygon class="cls-2" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
|
||||
<polygon class="cls-2" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
|
||||
<polygon class="cls-2" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
|
||||
<polygon class="cls-2" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
|
||||
<polygon class="cls-2" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
|
||||
<path class="cls-2" d="M122.76,70.93c3.1.69,6.21,1.48,9.24,2.28,1.2.32,2.39.63,3.57.94l91.08.55v-5.86l-119.43-.7h-.09c5.22.81,10.49,1.66,15.63,2.79Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="cls-2" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
|
||||
<polygon class="cls-2" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
|
||||
<path class="cls-2" d="M43.86,67.57c7.08-1.11,14.25-1.82,21.44-2.12v-5.15l-55.63,4.35.17,7.82,34.02-4.9Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
65
public/images/widget/wohngebaeude.svg
Normal file
65
public/images/widget/wohngebaeude.svg
Normal file
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 112">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #445096;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2, .cls-3 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #c6c6c6;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #ff7d26;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Ebene_4" data-name="Ebene 4">
|
||||
<path class="cls-3" d="M272,66c-1.3,6-4,11.6-7.4,16.7-3.4,5.1-7.7,9.7-12.6,13.5-4.8,3.9-10.3,6.9-16,9.3-5.7,2.3-11.7,3.9-17.8,5-12.2,2-24.5,1.6-36.6-.2-12-1.8-23.8-5-35.1-9.3,11.8,2.6,23.6,4.9,35.5,6,5.9.5,11.9.9,17.8.8,5.9,0,11.8-.5,17.7-1.5,11.6-1.9,22.9-5.9,32.5-12.8,4.8-3.4,9.2-7.5,12.9-12.1,3.7-4.6,6.9-9.8,9.1-15.5Z"/>
|
||||
<path class="cls-3" d="M1,87.9c5-3.1,10.5-5.6,16-7.8,5.6-2.2,11.3-3.9,17.1-5.4,11.6-2.9,23.6-4.6,35.6-5,12-.4,24.1.3,36.1,2.2,6,.9,11.9,2.2,17.7,3.6,2.9.7,5.9,1.5,8.7,2.4,2.8.8,5.6,1.6,8.4,2.4,5.6,1.6,11.2,3.1,16.8,4.4,5.6,1.4,11.3,2.6,16.9,3.7,11.3,2.1,22.7,3.5,34,3.3,11.3-.2,22.5-2.1,32.5-7.4,2.5-1.3,4.9-2.8,7.2-4.4,2.3-1.7,4.4-3.6,6.6-5.5,4.2-4,7.8-8.6,11.2-13.5-2.2,5.5-5.1,10.7-8.8,15.6-3.6,4.8-8.1,9.1-13.2,12.6-5.1,3.5-10.8,6.1-16.7,8-5.9,1.9-12,3-18.1,3.5-12.2,1.1-24.4.1-36.3-1.6-11.9-1.8-23.6-4.6-35-7.8-2.9-.8-5.8-1.7-8.6-2.5-2.8-.9-5.5-1.6-8.3-2.4-5.5-1.5-11.1-2.8-16.8-3.8-11.3-2.2-22.7-3.5-34.2-3.9-11.5-.4-23.1,0-34.6,1.6-5.8.7-11.5,1.7-17.2,3-2.9.6-5.7,1.3-8.5,2.1-2.8.8-5.6,1.6-8.4,2.6Z"/>
|
||||
</g>
|
||||
<g id="Ebene_1" data-name="Ebene 1">
|
||||
<g>
|
||||
<path class="cls-1" d="M63.1,66L104.8,11.6l52.2,63.6s72.2,24.3,98.8-11.4l-26.6-38.8-27.2-4.4V0h-19.8v39.7h-7.1v-22.8L102.5,4l-39.4,62Z"/>
|
||||
<polygon class="cls-1" points="73.5 39.1 92.7 14.2 48.4 14.2 11.1 72.9 50 19.2 73.5 39.1"/>
|
||||
<g>
|
||||
<rect class="cls-2" x="91.5" y="35.3" width="11.3" height="12.7"/>
|
||||
<rect class="cls-2" x="104.3" y="35.3" width="11.3" height="12.7"/>
|
||||
<rect class="cls-2" x="91.5" y="49.5" width="11.3" height="12.7"/>
|
||||
<rect class="cls-2" x="104.3" y="49.5" width="11.3" height="12.7"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect class="cls-2" x="41.9" y="35.4" width="5.7" height="8.5"/>
|
||||
<rect class="cls-2" x="49" y="35.4" width="5.7" height="8.5"/>
|
||||
<rect class="cls-2" x="41.9" y="45.3" width="5.7" height="8.5"/>
|
||||
<rect class="cls-2" x="49" y="45.3" width="5.7" height="8.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Ebene_3" data-name="Ebene 3" class="cls-4">
|
||||
<path class="cls-1" d="M103.4,67.3V.5l-34.3,10.8v54c11.4-.3,22.9.4,34.3,1.9Z"/>
|
||||
<path class="cls-1" d="M255.8,65.2c0-6.6,0-45.4,0-45.4l-24.9-6.7v66.4s12-.8,24.2-12.7c.4-.4.7-1,.7-1.6Z"/>
|
||||
<g>
|
||||
<polygon class="cls-1" points="107.6 9.3 107.6 1.2 227.7 21.8 227.7 28.5 107.6 9.3"/>
|
||||
<polygon class="cls-1" points="108.2 23.8 108.2 15 227.7 32.2 227.7 38 108.2 23.8"/>
|
||||
<polygon class="cls-1" points="108.2 37.8 108.2 29 227.7 40.9 227.7 46.7 108.2 37.8"/>
|
||||
<polygon class="cls-1" points="108.2 52 108.2 43.2 227.7 50.1 227.7 56 108.2 52"/>
|
||||
<polygon class="cls-1" points="108.2 65.2 108.2 56.4 227.7 59 227.7 64.9 108.2 65.2"/>
|
||||
<path class="cls-1" d="M123.8,70.9c3.1.7,6.2,1.5,9.2,2.3,1.2.3,2.4.6,3.6.9l91.1.5v-5.9l-119.4-.7h0c5.2.8,10.5,1.7,15.6,2.8Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="cls-1" points="10.3 50.2 10.2 44.5 66.3 21.2 66.3 40.6 10.3 50.2"/>
|
||||
<polygon class="cls-1" points="66.3 55.7 10.6 61.5 10.4 53.8 66.3 44.9 66.3 55.7"/>
|
||||
<path class="cls-1" d="M44.9,67.6c7.1-1.1,14.2-1.8,21.4-2.1v-5.2l-55.6,4.3.2,7.8,34-4.9Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -1,99 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let price: number;
|
||||
export let name: string;
|
||||
export let variant: string;
|
||||
export let services: [string, boolean][];
|
||||
export let href: string;
|
||||
export let src: string;
|
||||
export let alt: string;
|
||||
export let empfehlung: string;
|
||||
</script>
|
||||
|
||||
|
||||
<h2 class="titel">{name}</h2>
|
||||
{#if empfehlung=="ja"}
|
||||
<!--<div class="empfehlung">Empfehlung</div>-->
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="titelPic grid grid-cols-2 items-center mb-0 mt-0 w-full">
|
||||
|
||||
<div style="">
|
||||
<img
|
||||
{src}
|
||||
{alt}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="justify-self-start">
|
||||
<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
|
||||
<span class="[font-family:Antique_Olive_Compact_bold]">
|
||||
ab {price} €
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="variante justify-self-end">{variant}</div>
|
||||
|
||||
|
||||
<div class="white grid grid-rows-subgrid row-span-6 relative">
|
||||
{#each services as [service, check]}
|
||||
<div class="services grid grid-cols-[content-fit_1fr] items-center">
|
||||
<span>{@html service}</span>
|
||||
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="w-full grid grid-cols-2 gap-2">
|
||||
<a
|
||||
{href}
|
||||
class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
|
||||
hover:bg-primary
|
||||
">jetzt online erstellen</a
|
||||
>
|
||||
|
||||
<a
|
||||
{href}
|
||||
class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline
|
||||
hover:bg-secondary/15
|
||||
">zur Produktübersicht</a
|
||||
>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.titel {@apply [font-size:_clamp(14px,1.5vw,18px)]
|
||||
pr-12 text-left
|
||||
}
|
||||
.empfehlung{@apply bg-red-700 text-[0.75rem] text-white px-2 py-1 rounded-sm rotate-[5deg]}
|
||||
.variante {
|
||||
@apply -mt-2 text-xl w-fit text-black justify-self-end;
|
||||
}
|
||||
|
||||
.services {
|
||||
@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
|
||||
}
|
||||
.services:not(:last-child) {
|
||||
@apply border-b-[1px] border-gray-200;
|
||||
}
|
||||
.check {
|
||||
@apply justify-self-end font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply justify-self-end font-bold text-red-700;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,347 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
|
||||
let gebaeudetyp: string;
|
||||
let anlass: string;
|
||||
let einheiten: string;
|
||||
let sanierungsstatus: string;
|
||||
let baujahr: string;
|
||||
let heizungsAlter: string;
|
||||
let leerStand: string;
|
||||
|
||||
|
||||
const allowedTypes = [
|
||||
"Einfamilienhaus",
|
||||
"Zweifamilienhaus",
|
||||
"Mehrfamilienhaus",
|
||||
"Mischgebäude",
|
||||
];
|
||||
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
|
||||
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
|
||||
|
||||
let showVerbrauchsausweis: boolean = false
|
||||
|
||||
function postHeight() {
|
||||
window.parent.postMessage(document.querySelector("html")?.offsetHeight, "*")
|
||||
}
|
||||
|
||||
$: {
|
||||
if (baujahr === "vor 1978") {
|
||||
showVerbrauchsausweis =
|
||||
allowedReason.includes(anlass) &&
|
||||
allowedTypes.includes(gebaeudetyp) &&
|
||||
(einheiten === "mehr als 4 Wohneinheiten" ||
|
||||
sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
|
||||
} else {
|
||||
showVerbrauchsausweis =
|
||||
allowedReason.includes(anlass) &&
|
||||
allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div id="OEA_widget">
|
||||
<input id="recode" type="hidden" value="widgetvorlage" />
|
||||
|
||||
<div id="OEA_input">
|
||||
<div class="OEA_zeile1">
|
||||
|
||||
<div class="OEA_item2">
|
||||
<div class="OEA_title1">Anlass</div>
|
||||
<select
|
||||
class="OEA_auswahl1"
|
||||
bind:value={anlass}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Vermietung/Verkauf"
|
||||
>Vermietung/Verkauf</option
|
||||
>
|
||||
<option value="Modernisierung">Modernisierung</option>
|
||||
<option value="Neubau">Neubau</option>
|
||||
<option value="Erweiterung">Erweiterung</option>
|
||||
<option value="Aushangpflicht">Aushangpflicht</option>
|
||||
<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}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<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}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<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>
|
||||
<select
|
||||
class="OEA_auswahl2"
|
||||
bind:value={baujahr}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="vor 1978">vor 1978</option>
|
||||
<option value="nach 1977">nach 1977</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item3">
|
||||
<div class="OEA_title2">Heizungsalter</div>
|
||||
<select
|
||||
class="OEA_auswahl2"
|
||||
bind:value={heizungsAlter}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<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
|
||||
class="OEA_auswahl2"
|
||||
bind:value={einheiten}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="bis 4 Wohneinheiten"
|
||||
>bis 4 Wohneinheiten</option
|
||||
>
|
||||
<option value="mehr als 4 Wohneinheiten"
|
||||
>mehr als 4 Wohneinheiten</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item4">
|
||||
<div class="OEA_title2">Leerstand</div>
|
||||
<select
|
||||
class="OEA_auswahl2"
|
||||
bind:value={leerStand}
|
||||
on:change={postHeight}
|
||||
>
|
||||
<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}
|
||||
<div
|
||||
class="OEA_item6 result"
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Wohngebäude"
|
||||
price={PRICES.VerbrauchsausweisWohnen[0]}
|
||||
src="/images/right-sidebar/wohngebaeude.svg"
|
||||
alt="Wohnhaus Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
services={[
|
||||
["3 Jahresverbräuche der Heizung benötigt.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
|
||||
["Ungenau durch individuelles Heizverhalten.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false]
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="OEA_item6 result"
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Wohngebäude"
|
||||
price={PRICES.BedarfsausweisWohnen[0]}
|
||||
src="/images/right-sidebar/wohngebaeude.svg"
|
||||
alt="Wohnhaus Bedarfsausweis"
|
||||
variant="fundiert (empfohlen)"
|
||||
services={[
|
||||
["Erfassung der Gebäudegeometrie.", true],
|
||||
["Für Vermietung, Verkauf und Finanzierung.", true],
|
||||
["Zulässig auch für unsanierte Objekte.", true],
|
||||
["Kann als Grundlage für den ISFP dienen.", true],
|
||||
["Objektivere Berechnungsmethode nach DIN 18599.", true],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="OEA_item6 result"
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Gewerbe"
|
||||
price={PRICES.VerbrauchsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
services={[
|
||||
|
||||
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="OEA_item6 result"
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Gewerbe"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/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"
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Gewerbe"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="fundiert (empfohlen)"
|
||||
services={[
|
||||
|
||||
["Mehrzonenmodell nach DIN 18599.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Grundlage für Sanierungsvarianten.", false],
|
||||
["Objektiveres, besser vergleichbares Ergebnis.", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
#OEA_widget {
|
||||
@apply bg-gray-200 p-4 shadow-xl rounded-xl mb-6;
|
||||
|
||||
#OEA_input {
|
||||
@apply space-y-2;
|
||||
|
||||
.OEA_zeile1,
|
||||
.OEA_zeile2 {
|
||||
@apply flex flex-row space-x-2;
|
||||
|
||||
.OEA_item1,
|
||||
.OEA_item2,
|
||||
.OEA_item3,
|
||||
.OEA_item4,
|
||||
.OEA_item5 {
|
||||
@apply w-full;
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.OEA_title1 {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
|
||||
.OEA_title2 {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
.OEA_auswahl1,
|
||||
.OEA_auswahl2 {
|
||||
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
|
||||
}
|
||||
|
||||
#OEA_result {
|
||||
@apply rounded-lg text-gray-700;
|
||||
}
|
||||
|
||||
.OEA_zeile3 {
|
||||
@apply flex flex-row space-x-4 items-start justify-center;
|
||||
}
|
||||
|
||||
.OEA_item6 {
|
||||
.result {
|
||||
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
|
||||
}
|
||||
|
||||
.result[style*="opacity: 1"] {
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
425
src/components/widgets/WelcherAusweisWidget_IBC.svelte
Normal file
425
src/components/widgets/WelcherAusweisWidget_IBC.svelte
Normal file
@@ -0,0 +1,425 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
import WidgetCardTemplate from "#components/widgets/WidgetCardTemplate_IBC.svelte";
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
|
||||
let gebaeudetyp: string = "bitte auswählen";
|
||||
let anlass: string = "bitte auswählen";
|
||||
let einheiten: string = "bitte auswählen";
|
||||
let sanierungsstatus: string = "bitte auswählen";
|
||||
let baujahr: string = "bitte auswählen";
|
||||
let heizungsAlter: string = "bitte auswählen";
|
||||
let leerStand: string = "bitte auswählen";
|
||||
|
||||
const twoBoxReason = ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
|
||||
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('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');
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
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>
|
||||
|
||||
<div id="OEA_widget">
|
||||
<input id="recode" type="hidden" value="widgetvorlage" />
|
||||
|
||||
<div id="OEA_input">
|
||||
|
||||
|
||||
<div id="firstrow" class="firstrow">
|
||||
|
||||
<div class="auswahl">
|
||||
<div class="titel">Anlass</div>
|
||||
<select
|
||||
id="anlass"
|
||||
class="selectfeld"
|
||||
bind:value={anlass} on:change={getBoxes} on:change={getCount}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Vermietung/Verkauf"
|
||||
>Vermietung/Verkauf</option
|
||||
>
|
||||
<option value="Modernisierung">Modernisierung</option>
|
||||
<option value="Neubau">Neubau</option>
|
||||
<option value="Erweiterung">Erweiterung</option>
|
||||
<option value="Aushangpflicht">Aushangpflicht</option>
|
||||
<option value="Sonstiges">Sonstiges z.B. Bank</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="auswahl">
|
||||
<div class="titel">Gebäudetyp</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
|
||||
>
|
||||
<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 twoBoxReason.includes(anlass)}
|
||||
<div class="auswahl">
|
||||
<div class="titel">Sanierungsstand</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
|
||||
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="saniert">saniert</option>
|
||||
<option value="unsaniert">unsaniert</option>
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
{#if twoBoxReason.includes(anlass)}
|
||||
<div id="secondrow" class="secondrow">
|
||||
<div class="auswahl">
|
||||
<div class="titel">Baujahr</div>
|
||||
<select
|
||||
id="baujahr"
|
||||
class="selectfeld"
|
||||
bind:value={baujahr} on:change={getCount}
|
||||
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="vor 1978">vor 1978</option>
|
||||
<option value="nach 1977">nach 1977</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="auswahl">
|
||||
<div class="titel">Heizungsalter</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
bind:value={heizungsAlter} on:change={getCount}
|
||||
>
|
||||
<option 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="auswahl">
|
||||
<div class="titel">Wohneinheiten</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
bind:value={einheiten} on:change={getCount}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="bis 4 Wohneinheiten"
|
||||
>bis 4 Wohneinheiten</option
|
||||
>
|
||||
<option value="mehr als 4 Wohneinheiten"
|
||||
>mehr als 4 Wohneinheiten</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item4">
|
||||
<div class="titel">Leerstand</div>
|
||||
<select
|
||||
class="selectfeld ausnahmen"
|
||||
bind:value={leerStand} on:change={getCount}
|
||||
>
|
||||
<option 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 id="thirdrow" class="thirdrow">
|
||||
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
|
||||
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Wohngebäude"
|
||||
price={PRICES.VerbrauchsausweisWohnen[0]}
|
||||
src="/images/widget/wohngebaeude.svg"
|
||||
alt="Wohnhaus Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
empfehlung="nein"
|
||||
cta="jetzt online erstellen"
|
||||
services={[
|
||||
["3 Jahresverbräuche der Heizung benötigt.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
|
||||
["Ungenau durch individuelles Heizverhalten.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false]
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Wohngebäude"
|
||||
price={PRICES.BedarfsausweisWohnen[0]}
|
||||
src="/images/widget/wohngebaeude.svg"
|
||||
alt="Wohnhaus Bedarfsausweis"
|
||||
variant="fundiert"
|
||||
empfehlung="ja"
|
||||
cta="jetzt online erstellen"
|
||||
services={[
|
||||
["Erfassung der Gebäudegeometrie.", true],
|
||||
["Für Vermietung, Verkauf und Finanzierung.", true],
|
||||
["Zulässig auch für unsanierte Objekte.", true],
|
||||
["Kann als Grundlage für den ISFP dienen.", true],
|
||||
["Objektivere Berechnungsmethode nach DIN 18599.", true],
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Gewerbegebäude"
|
||||
price={PRICES.VerbrauchsausweisGewerbe[0]}
|
||||
src="/images/widget/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
empfehlung="nein"
|
||||
cta="jetzt online erstellen"
|
||||
services={[
|
||||
|
||||
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false],
|
||||
["Ungenau durch individuelles Heizverhalten", false],
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Gewerbegebäude"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/widget/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="fundiert"
|
||||
empfehlung="ja"
|
||||
cta="Angebot anfragen"
|
||||
services={[
|
||||
|
||||
["Mehrzonenmodell nach DIN 18599.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Grundlage für Sanierung-Varianten.", true],
|
||||
["Objektiveres, besser vergleichbares Ergebnis.", true],
|
||||
["Zulässig bei Leerstand oder fehlenden Verbräuchen", true],
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Wohngebäude"
|
||||
price=500
|
||||
src="/images/widget/wohngebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="Bauvorlage"
|
||||
empfehlung="ja"
|
||||
cta="Angebot anfragen"
|
||||
services={[
|
||||
|
||||
["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
|
||||
["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
|
||||
["Erstellung des Energieausweises nach Abschluss inklusive.", true],
|
||||
["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
|
||||
["Zonierung und Erstellung eines 3D Gebäudemodells.", true],
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
|
||||
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 0 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Gewerbegebäude"
|
||||
price=800
|
||||
src="/images/widget/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="Bauvorlage"
|
||||
empfehlung="ja"
|
||||
cta="Angebot anfragen"
|
||||
services={[
|
||||
|
||||
["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
|
||||
["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
|
||||
["Erstellung des Energieausweises nach Abschluss inklusive.", true],
|
||||
["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
|
||||
["Mehrzonenmodell inkl. Erstellung eines 3D Gebäudemodells.", true],
|
||||
]}
|
||||
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
*{font-family: "Heron";}
|
||||
|
||||
#OEA_widget {
|
||||
@apply min-w-[320px] max-w-[1920px] p-[0px]
|
||||
sm:p-[0px];
|
||||
|
||||
.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
|
||||
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
|
||||
|
||||
.titel{@apply text-white font-bold bg-secondary px-2 py-1 rounded-[0.25rem];}
|
||||
|
||||
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
|
||||
|
||||
}
|
||||
|
||||
.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
|
||||
sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
|
||||
|
||||
.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
|
||||
|
||||
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
|
||||
|
||||
}
|
||||
|
||||
#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
|
||||
px-2 py-2 mt-5;
|
||||
box-shadow:2px 2px 8px rgba(0,0,0,0.25)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
103
src/components/widgets/WidgetCardTemplate_IBC.svelte
Normal file
103
src/components/widgets/WidgetCardTemplate_IBC.svelte
Normal file
@@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
export let price: number;
|
||||
export let name: string;
|
||||
export let variant: string;
|
||||
export let services: [string, boolean][];
|
||||
export let href_buy: string;
|
||||
export let href_overview: string;
|
||||
export let src: string;
|
||||
export let alt: string;
|
||||
export let empfehlung: string;
|
||||
export let cta: string;
|
||||
</script>
|
||||
|
||||
|
||||
{#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="price">
|
||||
ab {price} €
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sumCent buttoncols">
|
||||
<a
|
||||
href="{href_buy}"
|
||||
class="buttoncol">{cta}</a
|
||||
>
|
||||
|
||||
<a
|
||||
href="{href_overview}"
|
||||
class="buttoncol">Produkt-Übersicht</a
|
||||
>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sumRows forServices">
|
||||
|
||||
{#each services as [service, check]}
|
||||
<div class="services">
|
||||
<span>{@html service}</span>
|
||||
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
|
||||
|
||||
.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-4 w-full mb-4
|
||||
md:grid-cols-2 md:w-[auto]}
|
||||
|
||||
.buttoncol{@apply mt-2 md:mt-0 text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
|
||||
hover:bg-primary hover:text-white}
|
||||
|
||||
|
||||
.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 -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 italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-primary rounded-md pl-[4px] pr-[6px] py-[0px];
|
||||
}
|
||||
|
||||
.services {
|
||||
@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;
|
||||
}
|
||||
.check {
|
||||
@apply justify-self-end self-center font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply justify-self-end self-center font-bold text-red-700;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
|
||||
import WidgetCardTemplate from "#components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte";
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
|
||||
let gebaeudetyp: string = "bitte auswählen";
|
||||
@@ -2,7 +2,7 @@
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import ProduktVergleich from "#components/design/content/ProduktVergleich.svelte";
|
||||
import ProduktVergleichGewerbe from "#components/design/content/ProduktVergleichGewerbe.svelte";
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
|
||||
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
|
||||
|
||||
---
|
||||
@@ -17,9 +17,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
|
||||
|
||||
<h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
|
||||
|
||||
|
||||
<div class="mt-4 mb-6">
|
||||
<WelcherAusweisWidget client:load></WelcherAusweisWidget>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>
|
||||
<p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
|
||||
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
|
||||
|
||||
---
|
||||
@@ -11,7 +11,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
|
||||
<p>Falls Sie nicht wissen sollten welchen Energieausweis Sie benötigen, können Sie hier ganz einfach den Gebäudetyp
|
||||
und Anlass bzw. Grund angeben. Als Ergebnis bekommen Sie den für Sie passenden Energieausweis angezeigt.</p>
|
||||
<h2>Machen Sie hier den Online Check, welcher Energieausweis der richtige ist:</h2>
|
||||
<div class="mt-4 mb-6">
|
||||
<WelcherAusweisWidget client:load/>
|
||||
</Layout>
|
||||
<h2>Verbrauchsausweis für Wohngebäude: Einfacher Energieausweis bei Vermietung und Verkauf</h2>
|
||||
<p>
|
||||
In den meisten Fällen können Sie bei der Vermietung oder dem Verkauf Ihrer Immobilie den
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_1.svelte";
|
||||
import WelcherAusweisWidget from "#components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte";
|
||||
const { vermittler } = Astro.params;
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user