.
This commit is contained in:
Robert Jagtiani
@@ -1,426 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import WidgetCardTemplate from "#components/widgets/WidgetCardTemplate_IBC.svelte";
|
|
||||||
import { PRICES } from "#lib/constants.js";
|
|
||||||
import { Enums } from "#lib/client/prisma.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 != "bitte auswählen")) ||
|
|
||||||
((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[Enums.AusweisTyp.Standard]}
|
|
||||||
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[Enums.AusweisTyp.Standard]}
|
|
||||||
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[Enums.AusweisTyp.Standard]}
|
|
||||||
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[Enums.AusweisTyp.Standard]}
|
|
||||||
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={PRICES.GEGNachweisWohnen[Enums.AusweisTyp.Standard]}
|
|
||||||
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={PRICES.GEGNachweisGewerbe[Enums.AusweisTyp.Standard]}
|
|
||||||
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";}
|
|
||||||
select option{font-family: "Heron",sans-serif;}
|
|
||||||
#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>
|
|
||||||
@@ -1,103 +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_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%] mx-auto
|
|
||||||
md:w-[75%] md:pl-0}
|
|
||||||
|
|
||||||
.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 w-fit 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>
|
|
||||||
Reference in New Issue
Block a user