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

widget

Browse Source
This commit is contained in:
Jens Cornelsen
2024-12-08 21:17:38 +01:00
parent 65e93383c7
commit 628d1adfe6
3 changed files with 99 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/design/content/card-BA-widget.svelte
View File

@@ -23,9 +23,8 @@
<div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
<div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
<div class="services"><div>Objektivere Berechnungsmethode.</div><div class="check">✔</div></div>
<div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
@@ -41,17 +40,17 @@
<style lang="scss">
#card-BA-promo{
#card-BA-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 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}
.services{@apply text-start py-2 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}
}
</style>
}
</style>

54
src/components/design/content/card-BAG-widget.svelte
View File

@@ -2,21 +2,55 @@
import { PRICES } from "#lib/constants";
</script>
<div id ="card-BA-G-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="grid">
<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="">
<h2>Bedarfssausweis Gewerbe</h2>
<hr class="mb-4">
<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-BA-promo"
<h2>Bedarfsausweis Gewerbe</h2>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
<div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
</div>
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
</style>
#card-BAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 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>

57
src/components/design/content/card-VAG-widget.svelte
View File

@@ -2,22 +2,55 @@
import { PRICES } from "#lib/constants";
</script>
<div id ="card-VA-G-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="grid">
<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5">
<div class="">
<h2>Verbrauchsausweis Gewerbe</h2>
<hr class="mb-4">
<img class="w-[40%] justify-self-left !min-w-[50px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<hr class="mb-2">
<div class="flex flex-row mb-2 mt-2 w-full items-end">
<div>
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
</div>
<div>
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
</div>
</div>
<div class="white">
<div class="variante">einfach</div>
<div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung oder 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 akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >jetzt online erstellen</a>
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
hover:bg-primary
" >zur Produktübersicht</a>
</div>
</div>
<style lang="scss">
</style>
#card-VAG-promo{
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
.variante{@apply w-fit text-black justify-self-end mr-3}
.variante{@apply text-2xl}
.services{@apply text-start py-2 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>