Jens Cornelsen
@@ -2,56 +2,34 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
|
||||
<defs>
|
||||
<style>
|
||||
.uuid-31b37071-25c8-4180-bba8-979a017d54db {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9 {
|
||||
.cls-1 {
|
||||
fill: #ff7d26;
|
||||
}
|
||||
|
||||
.uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8 {
|
||||
.cls-2 {
|
||||
fill: #445096;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="uuid-9fbd4d12-41cf-439b-ac20-79a8a6d86a8c" data-name="Wellen">
|
||||
<path class="uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9" 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="uuid-17f03b4e-e1d1-4987-9bff-ade6fe52d6f9" 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 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="uuid-7329def7-567e-4920-b714-6e743891010b" data-name="Wohngebaeude">
|
||||
<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>
|
||||
<path class="uuid-31b37071-25c8-4180-bba8-979a017d54db" d="m62.1,66.01L103.83,11.59l52.17,63.63s72.22,24.35,98.81-11.35l-26.6-38.82-27.22-4.45V0h-19.83v39.66h-7.08v-22.76L101.52,4.02l-39.42,61.99Z"/>
|
||||
<polygon class="uuid-31b37071-25c8-4180-bba8-979a017d54db" points="72.53 39.06 91.66 14.16 47.37 14.16 10.07 72.88 49 19.22 72.53 39.06"/>
|
||||
<g>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="90.51" y="35.34" width="11.33" height="12.75"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="103.26" y="35.34" width="11.33" height="12.75"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="90.51" y="49.51" width="11.33" height="12.75"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="103.26" y="49.51" width="11.33" height="12.75"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="40.93" y="35.41" width="5.67" height="8.5"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="48.02" y="35.41" width="5.67" height="8.5"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="40.93" y="45.33" width="5.67" height="8.5"/>
|
||||
<rect class="uuid-31b37071-25c8-4180-bba8-979a017d54db" x="48.02" y="45.33" width="5.67" height="8.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="uuid-a8b79e96-2fac-427e-b8b7-d3d0001eccc1" data-name="Gewerbegebaeude">
|
||||
<path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" d="m102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
|
||||
<path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
|
||||
<polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
|
||||
<polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
|
||||
<polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
|
||||
<polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
|
||||
<path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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"/>
|
||||
<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="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
|
||||
<polygon class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
|
||||
<path class="uuid-1b543e95-de20-49f9-9fdf-25ce4db04fd8" 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"/>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because one or more lines are too long
@@ -8,8 +8,8 @@ export const createCaller = createCallerFactory({
|
||||
"auth/access-token": await import("../src/pages/api/auth/access-token.ts"),
|
||||
"auth/forgot-password": await import("../src/pages/api/auth/forgot-password.ts"),
|
||||
"auth/refresh-token": await import("../src/pages/api/auth/refresh-token.ts"),
|
||||
"bilder/[uid]": await import("../src/pages/api/bilder/[uid].ts"),
|
||||
"bedarfsausweis-wohnen": await import("../src/pages/api/bedarfsausweis-wohnen/index.ts"),
|
||||
"bilder/[uid]": await import("../src/pages/api/bilder/[uid].ts"),
|
||||
"objekt": await import("../src/pages/api/objekt/index.ts"),
|
||||
"rechnung": await import("../src/pages/api/rechnung/index.ts"),
|
||||
"ticket": await import("../src/pages/api/ticket/index.ts"),
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
export let bullets;
|
||||
export let title;
|
||||
|
||||
bullets = [
|
||||
["Prüfung durch Dipl. Ing.<br>Registrierung beim DiBt<br>rechtssicher nach GEG",true, true, true],
|
||||
["Originalausweis als PDF per <span class='text-nowrap'>E-Mail</span><br>Originalausweis per Post (zubuchbar)",true, true, true],
|
||||
["Bearbeitung innerhalb 24 Stunden<br>Selbsteingabe",true, true, false],
|
||||
["Same day service (zubuchbar)",true, true, false],
|
||||
["Fotoupload<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",true, true, true],
|
||||
["automatische Vorprüfung<br>Live Vorschau direkt bei Eingabe<br>Live Vorschauausweis vorab<br>Vorschauausweis per E-Mail<br>dynamische Eingabehilfe",true, true, false],
|
||||
["Prüfanmerkungen per <span class='text-nowrap'>E-Mail</span>",true, true, false],
|
||||
["persönlicher Support",false, true, true],
|
||||
["telefonische Beratung<br>persönlicher Energieberater",false, false, true],
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Produktübersicht: <span class="text-secondary">Bedarfssausweis Gewerbegebäude</span></h1>
|
||||
<h3>Bedarfssausweis Leistungen und Preise in der Übersicht:</h3>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<div id="ProduktUebersichtBedarfssausweisGewerbe">
|
||||
|
||||
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
|
||||
</div>
|
||||
|
||||
{#each bullets as [bullet,online,premium,offline]}
|
||||
<div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2">{@html bullet}</div>
|
||||
<div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
|
||||
<div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
|
||||
<div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="price justify-self-start pl-2">Preis inkl. MwSt.</div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisGewerbe[0]} €</b></div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisGewerbe[1]} €</b></div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisGewerbe[2]} €</b></div>
|
||||
</div>
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2"></div>
|
||||
<button class="bestellbutton" type="button">jetzt<br>anfragen</button>
|
||||
<button class="bestellbutton" type="button">jetzt<br>anfragen</button>
|
||||
<button class="bestellbutton" type="button">jetzt<br>anfragen</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
.bestellbutton{@apply px-[2px] sm:px-4 mx-[2px] sm:mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
|
||||
|
||||
|
||||
|
||||
|
||||
.zeile{@apply text-[0.6rem] sm:text-[1rem] md:text-[1.5rem]}
|
||||
.bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
|
||||
.bullet:nth-child(even){@apply bg-blue-100/40}
|
||||
.bullet:nth-child(2){@apply !border-t-[6px]}
|
||||
.bullet:nth-child(10){@apply !border-b-[6px]}
|
||||
|
||||
.check {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
|
||||
}
|
||||
|
||||
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
export let bullets;
|
||||
export let title;
|
||||
|
||||
bullets = [
|
||||
["Prüfung durch Dipl. Ing.<br>Registrierung beim DiBt<br>rechtssicher nach GEG",true, true, true],
|
||||
["Originalausweis als PDF per <span class='text-nowrap'>E-Mail</span><br>Originalausweis per Post (zubuchbar)",true, true, true],
|
||||
["Bearbeitung innerhalb 24 Stunden<br>Selbsteingabe",true, true, false],
|
||||
["Same day service (zubuchbar)",true, true, false],
|
||||
["Fotoupload<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",true, true, true],
|
||||
["automatische Vorprüfung<br>Live Vorschau direkt bei Eingabe<br>Live Vorschauausweis vorab<br>Vorschauausweis per E-Mail<br>dynamische Eingabehilfe",true, true, false],
|
||||
["Prüfanmerkungen per <span class='text-nowrap'>E-Mail</span>",true, true, false],
|
||||
["persönlicher Support",false, true, true],
|
||||
["telefonische Beratung<br>persönlicher Energieberater",false, false, true],
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Produktübersicht: <span class="text-secondary">Bedarfssausweis Wohngebäude</span></h1>
|
||||
<h3>Bedarfssausweis Leistungen und Preise in der Übersicht:</h3>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<div id="ProduktUebersichtBedarfssausweisWohnen">
|
||||
|
||||
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
|
||||
</div>
|
||||
|
||||
{#each bullets as [bullet,online,premium,offline]}
|
||||
<div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2">{@html bullet}</div>
|
||||
<div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
|
||||
<div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
|
||||
<div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="price justify-self-start pl-2">Preis inkl. MwSt.</div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisWohnen[0]} €</b></div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisWohnen[1]} €</b></div>
|
||||
<div class="price"><b>{PRICES.BedarfsausweisWohnen[2]} €</b></div>
|
||||
</div>
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2"></div>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
.bestellbutton{@apply px-[2px] sm:px-4 mx-[2px] sm:mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
|
||||
|
||||
|
||||
|
||||
|
||||
.zeile{@apply text-[0.6rem] sm:text-[1rem] md:text-[1.5rem]}
|
||||
.bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
|
||||
.bullet:nth-child(even){@apply bg-blue-100/40}
|
||||
.bullet:nth-child(2){@apply !border-t-[6px]}
|
||||
.bullet:nth-child(10){@apply !border-b-[6px]}
|
||||
|
||||
.check {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
|
||||
}
|
||||
|
||||
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
export let bullets;
|
||||
export let title;
|
||||
|
||||
bullets = [
|
||||
["Prüfung durch Dipl. Ing.<br>Registrierung beim DiBt<br>rechtssicher nach GEG",true, true, true],
|
||||
["Originalausweis als PDF per <span class='text-nowrap'>E-Mail</span><br>Originalausweis per Post (zubuchbar)",true, true, true],
|
||||
["Bearbeitung innerhalb 24 Stunden<br>Selbsteingabe",true, true, false],
|
||||
["Same day service (zubuchbar)",true, true, false],
|
||||
["Fotoupload<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",true, true, true],
|
||||
["automatische Vorprüfung<br>Live Vorschau direkt bei Eingabe<br>Live Vorschauausweis vorab<br>Vorschauausweis per E-Mail<br>dynamische Eingabehilfe",true, true, false],
|
||||
["Prüfanmerkungen per <span class='text-nowrap'>E-Mail</span>",true, true, false],
|
||||
["persönlicher Support",false, true, true],
|
||||
["telefonische Beratung<br>persönlicher Energieberater",false, false, true],
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Produktübersicht: <span class="text-secondary">Verbrauchsausweis Gewerbegebäude</span></h1>
|
||||
<h3>Verbrauchsausweis Leistungen und Preise in der Übersicht:</h3>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<div id="ProduktUebersichtVerbrauchsausweisGewerbe">
|
||||
|
||||
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
|
||||
</div>
|
||||
|
||||
{#each bullets as [bullet,online,premium,offline]}
|
||||
<div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2">{@html bullet}</div>
|
||||
<div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
|
||||
<div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
|
||||
<div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="price justify-self-start pl-2">Preis inkl. MwSt.</div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisGewerbe[0]} €</b></div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisGewerbe[1]} €</b></div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisGewerbe[2]} €</b></div>
|
||||
</div>
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2"></div>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
.bestellbutton{@apply px-[2px] sm:px-4 mx-[2px] sm:mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
|
||||
|
||||
|
||||
|
||||
|
||||
.zeile{@apply text-[0.6rem] sm:text-[1rem] md:text-[1.5rem]}
|
||||
.bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
|
||||
.bullet:nth-child(even){@apply bg-blue-100/40}
|
||||
.bullet:nth-child(2){@apply !border-t-[6px]}
|
||||
.bullet:nth-child(10){@apply !border-b-[6px]}
|
||||
|
||||
.check {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
|
||||
}
|
||||
|
||||
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
export let bullets;
|
||||
export let title;
|
||||
|
||||
bullets = [
|
||||
["Prüfung durch Dipl. Ing.<br>Registrierung beim DiBt<br>rechtssicher nach GEG",true, true, true],
|
||||
["Originalausweis als PDF per <span class='text-nowrap'>E-Mail</span><br>Originalausweis per Post (zubuchbar)",true, true, true],
|
||||
["Bearbeitung innerhalb 24 Stunden<br>Selbsteingabe",true, true, false],
|
||||
["Same day service (zubuchbar)",true, true, false],
|
||||
["Fotoupload<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",true, true, true],
|
||||
["automatische Vorprüfung<br>Live Vorschau direkt bei Eingabe<br>Live Vorschauausweis vorab<br>Vorschauausweis per E-Mail<br>dynamische Eingabehilfe",true, true, false],
|
||||
["Prüfanmerkungen per <span class='text-nowrap'>E-Mail</span>",true, true, false],
|
||||
["persönlicher Support",false, true, true],
|
||||
["telefonische Beratung<br>persönlicher Energieberater",false, false, true],
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Produktübersicht: <span class="text-secondary">Verbrauchsausweis Wohngebäude</span></h1>
|
||||
<h3>Verbrauchsausweis Leistungen und Preise in der Übersicht:</h3>
|
||||
|
||||
<hr>
|
||||
<br>
|
||||
|
||||
<div id="ProduktUebersichtVerbrauchsausweisWohnen">
|
||||
|
||||
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
|
||||
</div>
|
||||
|
||||
{#each bullets as [bullet,online,premium,offline]}
|
||||
<div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2">{@html bullet}</div>
|
||||
<div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
|
||||
<div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
|
||||
<div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center sm:text-[1.25rem]">
|
||||
<div class="price justify-self-start pl-2">Preis inkl. MwSt.</div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisWohnen[0]} €</b></div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisWohnen[1]} €</b></div>
|
||||
<div class="price"><b>{PRICES.VerbrauchsausweisWohnen[2]} €</b></div>
|
||||
</div>
|
||||
|
||||
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center">
|
||||
<div class="justify-self-start pl-2"></div>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
<button class="bestellbutton" type="button">sofort<br>bestellen</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
.bestellbutton{@apply px-[2px] sm:px-4 mx-[2px] sm:mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
|
||||
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
|
||||
|
||||
|
||||
|
||||
|
||||
.zeile{@apply text-[0.6rem] sm:text-[1rem] md:text-[1.5rem]}
|
||||
.bullet{@apply text-[0.75rem] sm:text-[1rem] md:text-[1.25rem]}
|
||||
.bullet:nth-child(even){@apply bg-blue-100/40}
|
||||
.bullet:nth-child(2){@apply !border-t-[6px]}
|
||||
.bullet:nth-child(10){@apply !border-b-[6px]}
|
||||
|
||||
.check {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-green-700;
|
||||
}
|
||||
.check-no {
|
||||
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
|
||||
}
|
||||
|
||||
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
|
||||
|
||||
</style>
|
||||
@@ -3,7 +3,8 @@
|
||||
export let name: string;
|
||||
export let variant: string;
|
||||
export let services: [string, boolean][];
|
||||
export let href: string;
|
||||
export let href_buy: string;
|
||||
export let href_overview: string;
|
||||
export let src: string;
|
||||
export let alt: string;
|
||||
export let empfehlung: string;
|
||||
@@ -42,7 +43,7 @@
|
||||
|
||||
<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
|
||||
|
||||
<div class="sumCent sumRows">
|
||||
<div class="sumCent sumRows forServices">
|
||||
|
||||
{#each services as [service, check]}
|
||||
<div class="services">
|
||||
@@ -57,12 +58,12 @@
|
||||
|
||||
<div class="sumCent buttoncols">
|
||||
<a
|
||||
{href}
|
||||
href="{href_buy}"
|
||||
class="buttoncol">jetzt online erstellen</a
|
||||
>
|
||||
|
||||
<a
|
||||
{href}
|
||||
href="{href_overview}"
|
||||
class="buttoncol">Produktübersicht</a
|
||||
>
|
||||
|
||||
@@ -76,23 +77,34 @@
|
||||
<style lang="postcss">
|
||||
|
||||
|
||||
.sumCent{@apply justify-self-center col-span-2 mb-6}
|
||||
.sumRows{@apply grid grid-rows-subgrid row-span-5}
|
||||
.image{@apply w-[75%] pl-12}
|
||||
.buttoncols{@apply grid grid-cols-2 gap-x-10}
|
||||
.buttoncol{@apply w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
|
||||
hover:bg-primary}
|
||||
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
|
||||
|
||||
.sumCent{@apply justify-self-center col-span-2 md:mb-6}
|
||||
.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
|
||||
.forServices{@apply w-full md:w-auto}
|
||||
|
||||
.image{@apply w-[75%] justify-self-center
|
||||
md:w-[75%] md:pl-12}
|
||||
|
||||
.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
|
||||
md:grid-cols-2 md:w-[auto]}
|
||||
|
||||
.buttoncol{@apply mt-[0.5rem] text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
|
||||
hover:bg-primary}
|
||||
|
||||
|
||||
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
|
||||
font-family: "Antique Olive Compact bold";}
|
||||
|
||||
.titel {@apply col-span-2 text-center [font-size:_clamp(14px,2.5vw,28px)]}
|
||||
|
||||
|
||||
.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]}
|
||||
.variante {
|
||||
@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
|
||||
}
|
||||
|
||||
.services {
|
||||
@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)] items-center;
|
||||
@apply hidden w-full text-start py-1 md:grid grid-cols-[1fr_minmax(25px,50px)] items-center;
|
||||
}
|
||||
.services:not(:last-child) {
|
||||
@apply border-b-[1px] border-gray-200;
|
||||
|
||||
@@ -21,37 +21,27 @@ xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
||||
md:gap-y-4
|
||||
lg:px-0 lg:gap-x-4">
|
||||
|
||||
<div class="self-center justify-self-center ml-4 mb-2">
|
||||
<div class="ml-4 mb-2 mt-2 mr-4">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-full
|
||||
xs:max-w-[150px]
|
||||
sm:max-w-[150px]
|
||||
md:max-w-[150px] md:ml-6
|
||||
lg:max-w-[150px] lg:ml-0
|
||||
xl:max-w-[150px] xl:ml-0
|
||||
<img id="header-logo" class="w-109
|
||||
xs:max-w-[109px]
|
||||
sm:max-w-[109px]
|
||||
md:max-w-[109px] md:ml-6
|
||||
lg:max-w-[109px] lg:ml-0
|
||||
xl:max-w-[109px] xl:ml-0
|
||||
"
|
||||
src="/images/header/logo_immowelt.svg" alt="Immowelt-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
|
||||
<div id="header-text-1"class="text-secondary justify-self-center
|
||||
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
</div>
|
||||
|
||||
<div id="header-text-2"class="text-primary justify-self-center
|
||||
<div class="text-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
<div id="header-text-2" class="text-color:#303038ff justify-self-center
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem]">
|
||||
Hier komfortabel und einfach online den <b>Verbrauchsausweis Wohnen</b> bestellen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,8 +63,8 @@ lg:px-0 lg:gap-x-4">
|
||||
</div>
|
||||
|
||||
<div class="col-start-1 col-span-3">
|
||||
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-immowelt-gelb
|
||||
lg:h-[8px] xl:h-[8px]"></div>
|
||||
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-gray-200 h-[30px]
|
||||
lg:h-[30px] xl:h-[30px]"></div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
@@ -20,15 +20,15 @@
|
||||
|
||||
<hr class="trenner">
|
||||
<div>Bedarfsausweis Gewerbe</div>
|
||||
<div>ab <span class="price">300€</span> inkl. MwSt.</div>
|
||||
<div>ab <span class="price">{PRICES.BedarfsausweisGewerbe[0]}€</span> inkl. MwSt.</div>
|
||||
|
||||
<hr class="trenner">
|
||||
<div>GEG-Nachweis Wohngebäude</div>
|
||||
<div>ab <span class="price">400€</span> inkl. MwSt.</div>
|
||||
<div>ab <span class="price">000€</span> inkl. MwSt.</div>
|
||||
|
||||
<hr class="trenner">
|
||||
<div>GEG-Nachweis Gewerbe</div>
|
||||
<div>ab <span class="price">450€</span> inkl. MwSt.</div>
|
||||
<div>ab <span class="price">000€</span> inkl. MwSt.</div>
|
||||
|
||||
<hr class="mt-2">
|
||||
|
||||
|
||||
@@ -3,86 +3,46 @@
|
||||
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;
|
||||
|
||||
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"];
|
||||
|
||||
|
||||
const allowedTypes = [
|
||||
"Einfamilienhaus",
|
||||
"Zweifamilienhaus",
|
||||
"Mehrfamilienhaus",
|
||||
"Mischgebäude",
|
||||
];
|
||||
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
|
||||
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
|
||||
function getBoxes(){
|
||||
if(twoBoxReason.includes(anlass)){
|
||||
|
||||
let showVerbrauchsausweis: boolean = false
|
||||
document.getElementById('firstrow')?.classList.remove('md:grid-cols-2');
|
||||
document.getElementById('firstrow')?.classList.add('md:grid-cols-3');
|
||||
}else{
|
||||
|
||||
$: {
|
||||
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");
|
||||
}
|
||||
}
|
||||
document.getElementById('firstrow')?.classList.remove('md:grid-cols-3');
|
||||
document.getElementById('firstrow')?.classList.add('md:grid-cols-2');
|
||||
}
|
||||
|
||||
|
||||
function row3col(){
|
||||
var x = document.getElementById('anlass').value;
|
||||
|
||||
if(allowedReason.includes(x)){
|
||||
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(3, minmax(0, 1fr))";
|
||||
}else{
|
||||
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let ausnahme: boolean = false
|
||||
|
||||
function getDivs(){
|
||||
let anzahl;
|
||||
if(showVerbrauchsausweis){console.log('1');anzahl=2;}
|
||||
if(allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)){console.log('2');anzahl=2;}
|
||||
if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('3');anzahl=2;}
|
||||
if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('4');anzahl=4;}
|
||||
|
||||
var cols = 'grid-cols-'+anzahl
|
||||
|
||||
if(anzahl==1){
|
||||
|
||||
}else if(anzahl==2) {
|
||||
var x = document.getElementById('thirdrow')?.children;
|
||||
console.log(x);
|
||||
// for (let i = 0; i < x.length; i++) {
|
||||
// x[i].classList.remove('col-span-1');
|
||||
// x[i].classList.add('col-span-2');
|
||||
//}
|
||||
|
||||
}else if(anzahl==4) {
|
||||
var x = document.getElementById('thirdrow')?.children;
|
||||
console.log(x);
|
||||
// for (let i = 0; i < x.length; i++) {
|
||||
// x[i].classList.remove('col-span-2');
|
||||
// x[i].classList.add('col-span-1');
|
||||
//}
|
||||
}
|
||||
$: {
|
||||
|
||||
ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
|
||||
? true
|
||||
: false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div id="OEA_widget">
|
||||
<input id="recode" type="hidden" value="widgetvorlage" />
|
||||
|
||||
@@ -96,7 +56,7 @@ if(anzahl==1){
|
||||
<select
|
||||
id="anlass"
|
||||
class="selectfeld"
|
||||
bind:value={anlass} on:change={getDivs} on:change={row3col}
|
||||
bind:value={anlass} on:change={getBoxes}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Vermietung/Verkauf"
|
||||
@@ -106,7 +66,7 @@ if(anzahl==1){
|
||||
<option value="Neubau">Neubau</option>
|
||||
<option value="Erweiterung">Erweiterung</option>
|
||||
<option value="Aushangpflicht">Aushangpflicht</option>
|
||||
<option value="sonstiges">sonstiges z.B. Bank</option>
|
||||
<option value="Sonstiges">Sonstiges z.B. Bank</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -114,7 +74,7 @@ if(anzahl==1){
|
||||
<div class="titel">Gebäudetyp</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
bind:value={gebaeudetyp} on:change={getDivs}
|
||||
bind:value={gebaeudetyp} on:change={getBoxes}
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
@@ -125,13 +85,13 @@ if(anzahl==1){
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if allowedReason.includes(anlass)}
|
||||
{#if twoBoxReason.includes(anlass)}
|
||||
<div class="auswahl">
|
||||
<div class="titel">Sanierungsstand</div>
|
||||
<select
|
||||
on:change={getDivs}
|
||||
class="selectfeld"
|
||||
bind:value={sanierungsstatus}
|
||||
bind:value={sanierungsstatus} on:change={getBoxes}
|
||||
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="saniert">saniert</option>
|
||||
@@ -142,13 +102,15 @@ if(anzahl==1){
|
||||
|
||||
</div>
|
||||
|
||||
{#if allowedReason.includes(anlass)}
|
||||
{#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}
|
||||
|
||||
>
|
||||
<option selected disabled>bitte auswählen</option>
|
||||
<option value="vor 1978">vor 1978</option>
|
||||
@@ -162,7 +124,7 @@ if(anzahl==1){
|
||||
class="selectfeld"
|
||||
bind:value={heizungsAlter}
|
||||
>
|
||||
<option value=">= 3" selected disabled>bitte auswählen</option>
|
||||
<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>
|
||||
@@ -187,27 +149,23 @@ if(anzahl==1){
|
||||
<div class="OEA_item4">
|
||||
<div class="titel">Leerstand</div>
|
||||
<select
|
||||
class="selectfeld"
|
||||
class="selectfeld ausnahmen"
|
||||
bind:value={leerStand}
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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 showVerbrauchsausweis}
|
||||
<div id="thirdrow" class="thirdrow">
|
||||
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
|
||||
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Wohngebäude"
|
||||
@@ -215,6 +173,7 @@ if(anzahl==1){
|
||||
src="/images/right-sidebar/wohngebaeude.svg"
|
||||
alt="Wohnhaus Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
empfehlung="nein"
|
||||
services={[
|
||||
["3 Jahresverbräuche der Heizung benötigt.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
@@ -222,17 +181,16 @@ if(anzahl==1){
|
||||
["Ungenau durch individuelles Heizverhalten.", false],
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false]
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
|
||||
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Wohngebäude"
|
||||
@@ -248,15 +206,16 @@ if(anzahl==1){
|
||||
["Kann als Grundlage für den ISFP dienen.", true],
|
||||
["Objektivere Berechnungsmethode nach DIN 18599.", true],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
href_buy="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
|
||||
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (ausnahme === false)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Verbrauchsausweis Gewerbegebäude"
|
||||
@@ -264,6 +223,7 @@ if(anzahl==1){
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Verbrauchsausweis"
|
||||
variant="einfach"
|
||||
empfehlung="nein"
|
||||
services={[
|
||||
|
||||
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
|
||||
@@ -272,41 +232,17 @@ if(anzahl==1){
|
||||
["Wird nicht immer bei den Banken akzeptiert.", false],
|
||||
["xxx", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
href_buy="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
|
||||
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Gewerbegebäude"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="Bauvorlage"
|
||||
services={[
|
||||
|
||||
["xxx", true],
|
||||
["xxx", true],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 1000 }}
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="Bedarfsausweis Gewerbegebäude"
|
||||
@@ -319,14 +255,69 @@ if(anzahl==1){
|
||||
|
||||
["Mehrzonenmodell nach DIN 18599.", true],
|
||||
["Zulässig bei Vermietung oder Verkauf.", true],
|
||||
["Grundlage für Sanierung-Varianten.", false],
|
||||
["Objektiveres, besser vergleichbares Ergebnis.", false],
|
||||
["Grundlage für Sanierung-Varianten.", true],
|
||||
["Objektiveres, besser vergleichbares Ergebnis.", true],
|
||||
["xxx", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
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: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Wohngebäude"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="Bauvorlage"
|
||||
empfehlung="nein"
|
||||
services={[
|
||||
|
||||
["xxx", true],
|
||||
["xxx", true],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
|
||||
<div
|
||||
class="produktbox"
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
<WidgetCardTemplate
|
||||
name="GEG-Nachweis Gewerbegebäude"
|
||||
price={PRICES.BedarfsausweisGewerbe[0]}
|
||||
src="/images/right-sidebar/gewerbegebaeude.svg"
|
||||
alt="Gewerbe Bedarfsausweis"
|
||||
variant="Bauvorlage"
|
||||
empfehlung="nein"
|
||||
services={[
|
||||
|
||||
["xxx", true],
|
||||
["xxx", true],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
["xxx", false],
|
||||
]}
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
|
||||
></WidgetCardTemplate>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -353,9 +344,11 @@ if(anzahl==1){
|
||||
*{font-family: "Heron";}
|
||||
|
||||
#OEA_widget {
|
||||
@apply min-w-[640px] max-w-[1920px] p-[10px];
|
||||
@apply min-w-[320px] max-w-[1920px] p-[4px]
|
||||
sm:p-[10px];
|
||||
|
||||
.firstrow{@apply grid grid-cols-2 gap-x-4 gap-y-2;
|
||||
.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-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
|
||||
|
||||
@@ -363,7 +356,8 @@ if(anzahl==1){
|
||||
|
||||
}
|
||||
|
||||
.secondrow{@apply grid grid-cols-4 gap-x-4 gap-y-2 mt-4;
|
||||
.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-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
|
||||
|
||||
@@ -371,9 +365,10 @@ if(anzahl==1){
|
||||
|
||||
}
|
||||
|
||||
.thirdrow{@apply grid grid-cols-4 gap-x-4 gap-y-2;
|
||||
.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2
|
||||
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-12 rounded-sm bg-black/5 rounded-lg
|
||||
.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)
|
||||
|
||||
|
||||
@@ -46,9 +46,6 @@ console.log(scroll);
|
||||
|
||||
document.getElementById('formInput-1')?.classList.remove('2xl:mt-[370px]');
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@ export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
|
||||
BedarfsausweisWohnen: [135, 145, 290],
|
||||
VerbrauchsausweisWohnen: [65, 75, 180],
|
||||
VerbrauchsausweisGewerbe: [95, 115, 360],
|
||||
BedarfsausweisGewerbe: [500, 0, 0],
|
||||
BedarfsausweisGewerbe: [400, 600, 900],
|
||||
};
|
||||
|
||||
export const SERVICES: Record<
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import ProduktUebersichtBedarfsausweisGewerbe from "#components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Bedarfsausweis Produktübersicht">
|
||||
|
||||
<ProduktUebersichtBedarfsausweisGewerbe>
|
||||
|
||||
</ProduktUebersichtBedarfsausweisGewerbe>
|
||||
|
||||
|
||||
</Layout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import ProduktUebersichtBedarfsausweisWohnen from "#components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Bedarfsausweis Produktübersicht">
|
||||
|
||||
<ProduktUebersichtBedarfsausweisWohnen>
|
||||
|
||||
</ProduktUebersichtBedarfsausweisWohnen>
|
||||
|
||||
|
||||
</Layout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import ProduktUebersichtVerbrauchsausweisGewerbe from "#components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Verbrauchsausweis Produktübersicht">
|
||||
|
||||
<ProduktUebersichtVerbrauchsausweisGewerbe>
|
||||
|
||||
</ProduktUebersichtVerbrauchsausweisGewerbe>
|
||||
|
||||
|
||||
</Layout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import ProduktUebersichtVerbrauchsausweisWohnen from "#components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Verbrauchsausweis Produktübersicht">
|
||||
|
||||
<ProduktUebersichtVerbrauchsausweisWohnen>
|
||||
|
||||
</ProduktUebersichtVerbrauchsausweisWohnen>
|
||||
|
||||
|
||||
</Layout>
|
||||
@@ -1,9 +1,21 @@
|
||||
---
|
||||
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
|
||||
|
||||
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_1.svelte";
|
||||
const { vermittler } = Astro.params;
|
||||
|
||||
---
|
||||
|
||||
<WelcherAusweisWidget client:load/>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<WelcherAusweisWidget client:only/>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -75,16 +75,16 @@ article {
|
||||
|
||||
hr {@apply mb-4 mt-4 border-primary;}
|
||||
|
||||
h1 {@apply text-4xl font-normal mb-2;}
|
||||
h2{@apply text-2xl font-normal mb-2;}
|
||||
h3 {@apply text-xl font-normal ml-1;}
|
||||
h1 {@apply pl-2 sm:pl-0 text-4xl font-normal mb-2;}
|
||||
h2{@apply pl-2 sm:pl-0 text-2xl font-normal mb-2;}
|
||||
h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1;}
|
||||
|
||||
a {@apply text-blue-700 font-medium inline;}
|
||||
|
||||
p {@apply text-lg font-normal pl-2 pr-2 mb-4;}
|
||||
li {@apply text-lg font-normal }
|
||||
ul {@apply list-disc list-inside mb-4}
|
||||
span {@apply text-secondary font-bold;}
|
||||
/*span {@apply text-secondary font-bold;}*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ module.exports = {
|
||||
"pdf-yellow-light": "#fff6ca",
|
||||
|
||||
"immowelt-gelb": "#ffcc00ff",
|
||||
|
||||
"immowelt-grau": "#303038ff",
|
||||
},
|
||||
boxShadow: {
|
||||
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
|
||||
Reference in New Issue
Block a user