Jens Cornelsen
@@ -79,8 +79,8 @@
|
||||
let loginOverlayHidden = true;
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0
|
||||
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
|
||||
<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
|
||||
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">
|
||||
|
||||
<div></div>
|
||||
|
||||
@@ -90,85 +90,11 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
|
||||
>
|
||||
</div>
|
||||
|
||||
{#if showHelp}
|
||||
<div class="col-start-1 row-start-2 col-span-4 mt-4">
|
||||
<div
|
||||
class="bereich-box grid relative
|
||||
grid-cols-1 gap-x-4 gap-y-4
|
||||
|
||||
"
|
||||
>
|
||||
<div class="pr-12">
|
||||
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
|
||||
haben. Kurze Fragen zum Formular oder der Ausweisart werden
|
||||
kostenfrei telefonisch unter <a href="tel:+4940209339850"
|
||||
>040/209339850</a
|
||||
> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
|
||||
benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
|
||||
lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
|
||||
Auswahl und klicken auf weiter:
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px]"
|
||||
id="Produkttb1"
|
||||
value={Enums.AusweisTyp.Beratung}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="justify-self-stretch">
|
||||
Verbrauchsausweis online inkl. ausführlicher telefonischer
|
||||
Beratung
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px]"
|
||||
id="Produktof1"
|
||||
value={Enums.AusweisTyp.Offline}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div>
|
||||
Verbrauchsausweis offline (Sie schicken uns 3
|
||||
Verbrauchsabrechnungen zu)
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
|
||||
|
||||
<button
|
||||
class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
|
||||
type="button"
|
||||
on:click={() => (showHelp = !showHelp)}>X</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
||||
>Später Weitermachen
|
||||
</button>
|
||||
|
||||
|
||||
{#if showWeiter}
|
||||
<div>
|
||||
<Overlay bind:hidden={loginOverlayHidden}>
|
||||
@@ -181,3 +107,76 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showHelp}
|
||||
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
|
||||
<div
|
||||
class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
|
||||
grid-cols-1 gap-x-2 gap-y-4
|
||||
|
||||
"
|
||||
>
|
||||
<div class="pr-4 xs:pr-12">
|
||||
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
|
||||
haben. Kurze Fragen zum Formular oder der Ausweisart werden
|
||||
kostenfrei telefonisch unter <a href="tel:+4940209339850"
|
||||
>040/209339850</a
|
||||
> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
|
||||
benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
|
||||
lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
|
||||
Auswahl und klicken auf weiter:
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
||||
id="Produkttb1"
|
||||
value={Enums.AusweisTyp.Beratung}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="text-center xs:text-left justify-self-stretch">
|
||||
Verbrauchsausweis online<br>inkl. ausführlicher telefonischer
|
||||
Beratung
|
||||
</div>
|
||||
|
||||
<div class="text-center xs:text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
||||
id="Produktof1"
|
||||
value={Enums.AusweisTyp.Offline}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="text-center xs:text-left justify-self-stretch">
|
||||
Verbrauchsausweis offline Sie schicken uns 3 Verbrauchsabrechnungen zu)
|
||||
</div>
|
||||
|
||||
<div class="text-center xs:text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
|
||||
|
||||
<button
|
||||
class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
|
||||
type="button"
|
||||
on:click={() => (showHelp = !showHelp)}>X</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -83,6 +83,9 @@
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="performance-box" class="order-2 sm:order-1 w-full box relative px-0 sm:px-4 self-stretch grid grid-cols-1">
|
||||
|
||||
<div class="self-center relative">
|
||||
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
|
||||
<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />
|
||||
@@ -91,7 +94,7 @@
|
||||
{/if}
|
||||
<ThickArrowDown
|
||||
size={28}
|
||||
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
|
||||
class="fill-base-content absolute -top-1 sm:top-4 transition-left duration-1000 ease-in-out"
|
||||
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
|
||||
translation_1,
|
||||
50,
|
||||
@@ -102,7 +105,7 @@
|
||||
/>
|
||||
<ThickArrowUp
|
||||
size={28}
|
||||
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
|
||||
class="fill-base-content absolute -bottom-1 sm:bottom-4 transition-left duration-1000 ease-in-out"
|
||||
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
|
||||
translation_2,
|
||||
50,
|
||||
@@ -112,3 +115,6 @@
|
||||
)}%)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -6,8 +6,16 @@
|
||||
];
|
||||
export let active: number;
|
||||
export let progress: number = active / (steps.length - 1) * 100;
|
||||
export let ausweisart;
|
||||
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
import { Enums } from "#lib/client/prisma.js";
|
||||
</script>
|
||||
|
||||
<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
||||
|
||||
<div class="grid grid-cols-3 self-start justify-between">
|
||||
<div class="col-span-3 relative">
|
||||
<div
|
||||
@@ -24,11 +32,12 @@
|
||||
{#each steps as step, i}
|
||||
<div class="phase">
|
||||
<div class="point" class:active={i === active}>{i + 1}</div>
|
||||
<div>{step}</div>
|
||||
<div class="phaseTitel">{step}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
@@ -40,6 +49,7 @@
|
||||
.active {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
|
||||
}
|
||||
|
||||
:nth-child(1 of .phase) {
|
||||
|
||||
@@ -19,12 +19,11 @@
|
||||
|
||||
<div
|
||||
id="rechnungsadresse"
|
||||
class="bereich-box grid
|
||||
class="bereich-box grid
|
||||
grid-cols-1 gap-x-4 gap-y-8
|
||||
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
|
||||
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||
"
|
||||
>
|
||||
">
|
||||
<!-- Empfänger * -->
|
||||
|
||||
<div class="input-standard order-1 md:order-1 xl:order-1">
|
||||
@@ -49,7 +48,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||
|
||||
<!-- Straße, Hausnummer * -->
|
||||
|
||||
<div class="input-standard order21 md:order-2 xl:order-2">
|
||||
<div class="input-standard order-2 md:order-2 xl:order-2">
|
||||
<Inputlabel title="Straße, Hausnummer *"></Inputlabel>
|
||||
|
||||
<input
|
||||
@@ -135,26 +134,8 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Telefon
|
||||
|
||||
<div class="input-standard order-6 md:order-6 xl:order-6">
|
||||
<Inputlabel title="Telefon *"></Inputlabel>
|
||||
|
||||
<input
|
||||
name="rechnung_telefon"
|
||||
bind:value={rechnung.telefon}
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<div class="help-label">
|
||||
<HelpLabel>
|
||||
Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
|
||||
</HelpLabel>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="col-span-3 order-7 md:order-7 xl:order-7">
|
||||
<div class="sm:col-span-3 order-7 md:order-7 xl:order-7">
|
||||
<div
|
||||
class="grid grid-cols-[25px_max-content] items-center justify-items-start"
|
||||
>
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
|
||||
---
|
||||
|
||||
<header id="header">
|
||||
<header id="header" class="hidden sm:block">
|
||||
|
||||
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
|
||||
<div id="header-grid" class="grid relative bg-white items-end gap-x-4 pt-4 px-0
|
||||
|
||||
grid-cols-1
|
||||
sm:grid-cols-1
|
||||
@@ -14,16 +14,16 @@ lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
|
||||
|
||||
<div class="justify-self-center xs:justify-self-start">
|
||||
<div class="justify-self-start">
|
||||
|
||||
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||
<div class="w-full grid grid-cols-[48px_1fr] px-2 gap-2 gap-y-1 self-end
|
||||
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-start justify-self-start">
|
||||
<div class="justify-self-start">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-full
|
||||
<img id="header-logo" class="w-full
|
||||
xs:max-w-[64px]
|
||||
sm:max-w-[64px]
|
||||
md:max-w-[64px] md:ml-6
|
||||
@@ -34,33 +34,39 @@ lg:px-0 lg:gap-x-4">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
<div class="self-end">
|
||||
|
||||
<div id="header-text-1"class="text-secondary justify-self-start
|
||||
[font-size:_clamp(16px,6vw,36px)]
|
||||
xs:[font-size:_clamp(15px,6vw,36px)] xs:justify-self-start xs:leading-[3.5rem]
|
||||
|
||||
<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]">
|
||||
">
|
||||
Energieausweis online erstellen</div>
|
||||
|
||||
<div id="header-text-2"class="text-primary justify-self-center
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||
<div id="header-text-2"class="text-primary justify-self-start
|
||||
[font-size:_clamp(10px,4vw,22px)] leading-[10px]
|
||||
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[1rem]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem]">
|
||||
">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full justify-self-center">
|
||||
<HeaderLogin client:load />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
82
src/components/design/header/Header_ORG.astro
Normal file
82
src/components/design/header/Header_ORG.astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
|
||||
---
|
||||
|
||||
<header id="header">
|
||||
|
||||
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
|
||||
|
||||
grid-cols-1
|
||||
sm:grid-cols-1
|
||||
md:grid-cols-1
|
||||
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
|
||||
|
||||
<div class="justify-self-center xs:justify-self-start">
|
||||
|
||||
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||
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-start justify-self-start">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-full
|
||||
xs:max-w-[64px]
|
||||
sm:max-w-[64px]
|
||||
md:max-w-[64px] md:ml-6
|
||||
lg:max-w-[64px] lg:ml-0
|
||||
xl:max-w-[94px] xl:ml-0
|
||||
"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-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]">
|
||||
Energieausweis online erstellen</div>
|
||||
|
||||
<div id="header-text-2"class="text-primary 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]">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full justify-self-center">
|
||||
<HeaderLogin client:load />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</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-primary
|
||||
lg:h-[12px] xl:h-[12px]"></div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-button {
|
||||
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
|
||||
}
|
||||
</style>
|
||||
@@ -65,6 +65,10 @@
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
rotate_list[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
const rotate_list1 = document.querySelectorAll(".dd-symbol-clone");
|
||||
for (let i = 0; i < rotate_list1.length; i++) {
|
||||
rotate_list1[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.add("hamburger-swing-" + i);
|
||||
@@ -75,21 +79,25 @@
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div
|
||||
class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-4
|
||||
lg:hidden"
|
||||
>
|
||||
<div
|
||||
id="hamburger"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div class="hamburger_menu py-1 px-2 bg-secondary xs:px-4 lg:hidden">
|
||||
|
||||
<div id="hamburger" class="cursor-pointer grid grid-cols-2 items-center">
|
||||
|
||||
<div class="burger justify-self-start"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="justify-self-end">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-8 m-1" src="/images/header/logo-IBC-white.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
@@ -387,7 +395,7 @@
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/kundenbewertungen/"
|
||||
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
</div>
|
||||
|
||||
455
src/components/design/sidebars/cards/NavigationCard_ORG.svelte
Normal file
455
src/components/design/sidebars/cards/NavigationCard_ORG.svelte
Normal file
@@ -0,0 +1,455 @@
|
||||
<script lang="ts">
|
||||
let innerWidth: number;
|
||||
|
||||
function dropdown() {
|
||||
if (innerWidth < 1024) {
|
||||
const check_element = this.lastChild;
|
||||
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||
const rotate_element = this.childNodes[0].children[0];
|
||||
|
||||
var first_check = check_element.classList.contains(
|
||||
"show-dropdown-content"
|
||||
);
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
|
||||
if (first_check == true) {
|
||||
check_element.classList.remove("show-dropdown-content");
|
||||
rotate_element.classList.toggle("rotate-symbol");
|
||||
} else {
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
const element = nodeList[i];
|
||||
element.classList.remove("show-dropdown-content");
|
||||
}
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
const element = rotate_list[i];
|
||||
element.classList.remove("rotate-symbol");
|
||||
}
|
||||
|
||||
check_element.classList.add("show-dropdown-content");
|
||||
rotate_element.classList.add("rotate-symbol");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hover() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hoverout() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
function hamburger() {
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
nodeList[i].classList.remove("show-dropdown-content");
|
||||
}
|
||||
var element = document.getElementById("cardNavigation");
|
||||
element.classList.toggle("hidden");
|
||||
|
||||
const spans = this.children;
|
||||
var first_check = spans[0].classList.contains("hamburger-swing-0");
|
||||
|
||||
if (first_check == true) {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.remove("hamburger-swing-" + i);
|
||||
}
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol");
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
rotate_list[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.add("hamburger-swing-" + i);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div
|
||||
class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-4
|
||||
lg:hidden"
|
||||
>
|
||||
<div
|
||||
id="hamburger"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
id="cardNavigation"
|
||||
class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
|
||||
>
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Jetzt bestellen
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
|
||||
>Welcher Energieausweis?</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content energieasusweis-erstellen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
>Verbrauchsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Bedarfsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Verbrauchsausweis Gewerbe erstellen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content angebot-anfragen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen">Angebot anfragen</a>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
|
||||
>Bedarfsausweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
|
||||
>GEG Nachweis Wohnen anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
|
||||
>GEG Nachweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan (iSFP)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Produkte & Preise
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/verbrauchsausweis/" class="nav-element-child"
|
||||
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content verbrauchsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="index">Verbrauchsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
|
||||
<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/bedarfsausweis/" class="nav-element-child"
|
||||
>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content bedarfsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
|
||||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
|
||||
<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
|
||||
<li>
|
||||
<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a>
|
||||
</li>
|
||||
<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
|
||||
<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
|
||||
<li>
|
||||
<a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/" class="nav-element-child"
|
||||
>Energieausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="/energieausweis/">Energieausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
|
||||
<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
|
||||
<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- <div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child"
|
||||
href="/energieausweis-aussteller">Energieberater finden</a
|
||||
>
|
||||
</div> -->
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
FAQ & Hilfe
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content bestellprozess-energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/bestellprozess-energieausweis"
|
||||
>Bestellprozess Energieausweis</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
|
||||
>Merkblatt Verbrauchsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Merkblatt Bedarfsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Merkblatt Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/geg/"
|
||||
>Gebäudeenergiegesetz (GEG)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung/"
|
||||
>EnEV Zusammenfassung - Archiv</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
|
||||
href="/fuer-entwickler/">Für Entwickler</a
|
||||
>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
.dd-symbol::before {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.dd-symbol {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dd-symbol::after {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-delay: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes flim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
16.66% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
33.32% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
49.98% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
66.64% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
83.33% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
import "../style/global.css";
|
||||
import "../style/formular.css";
|
||||
import "../../svelte-dialogs.config";
|
||||
import Header from "#components/design/header/AusweisHeader.astro";
|
||||
import Header from "#components/design/header/Header.astro";
|
||||
import Footer from "#components/design/footer/Footer.astro";
|
||||
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
|
||||
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||
@@ -128,7 +128,7 @@ const { title } = Astro.props;
|
||||
>
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box rounded-tl-none p-2 lg:p-12">
|
||||
<article class="">
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
||||
import ProgressBar from "#components/Ausweis/Progressbar.svelte";
|
||||
import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
||||
//import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
|
||||
@@ -160,26 +160,23 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div id="skala" class="bg-white grid grid-cols-1 p-4
|
||||
<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4
|
||||
|
||||
lg:grid-cols-2 lg:gap-x-6
|
||||
">
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
|
||||
<h2 class="text-primary text-xl">{ausweisart} {PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]} €</h2>
|
||||
<ProgressBar step1={'step'}/>
|
||||
</div>
|
||||
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -75,13 +75,13 @@
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
|
||||
name: "Same Day Service - Bestellung Werktags vor <b>12:00 Uhr</b><br>Ausstellung bis <b>18:00 Uhr</b> am gleichen Tag",
|
||||
id: Enums.Service.SameDay,
|
||||
price: 29,
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
name: "Telefonische Energieeffizienzberatung",
|
||||
name: "Telefonische Energie-Effizienzberatung",
|
||||
id: Enums.Service.Telefonberatung,
|
||||
price: 75,
|
||||
selected: false,
|
||||
@@ -330,34 +330,22 @@
|
||||
|
||||
<div
|
||||
id="skala"
|
||||
class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
|
||||
class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4
|
||||
|
||||
2xl:grid-cols-2 2xl:gap-x-8
|
||||
"
|
||||
>
|
||||
{#if !gegAnfrage}
|
||||
<div
|
||||
id="performance-box"
|
||||
class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1"
|
||||
>
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme
|
||||
bind:objekt
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
id="progress-box"
|
||||
class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
|
||||
>
|
||||
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
|
||||
<h2 class="text-primary text-xl">
|
||||
{ausweisart}
|
||||
{prices[ausweistyp]} €
|
||||
</h2>
|
||||
|
||||
{#if gegAnfrage}
|
||||
<Progressbar
|
||||
active={1}
|
||||
@@ -367,7 +355,7 @@
|
||||
<Progressbar active={1} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form id="formInput-2" bind:this={form}>
|
||||
<div id="formular-box" class="formular-boxen ring-0">
|
||||
@@ -387,7 +375,7 @@
|
||||
<div
|
||||
id="bezahlung"
|
||||
class="bereich-box grid
|
||||
grid-cols-5 justify-around justify-items-center items-center"
|
||||
grid-cols-3 sm:grid-cols-5 justify-around justify-items-center items-center"
|
||||
>
|
||||
<PaymentOption
|
||||
bezahlmethode={Enums.Bezahlmethoden.paypal}
|
||||
@@ -421,7 +409,7 @@ grid-cols-5 justify-around justify-items-center items-center"
|
||||
></PaymentOption>
|
||||
</div></Bereich
|
||||
>
|
||||
<div class="grid grid-cols-2 gap-x-6 my-6">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 my-6">
|
||||
<div class="zusaetze bereich-box bg-white">
|
||||
<h3>Zusatzleistungen:</h3>
|
||||
|
||||
@@ -432,7 +420,7 @@ grid-cols-5 justify-around justify-items-center items-center"
|
||||
bind:checked={service.selected}
|
||||
/>
|
||||
<div class="text-right pr-6">
|
||||
<b>{@html service.price} €</b> inkl. Mwst
|
||||
<b>{@html service.price} €</b> inkl. Mwst
|
||||
</div>
|
||||
<div>{@html service.name}</div>
|
||||
</div>
|
||||
@@ -493,24 +481,25 @@ grid-cols-5 justify-around justify-items-center items-center"
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="w-full grid grid-cols-[min-content_1fr_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8"
|
||||
class="grid grid-cols-1 gap-x-2 gap-y-1 self-start mt-0
|
||||
sm:grid-cols-[min-content_min-content_min-content] sm:justify-self-end sm:mt-8"
|
||||
>
|
||||
<a class="button justify-self-start" href={zurueck}>Zurück</a>
|
||||
<a class="order-3 sm:order-1 button cursor-pointer text-center sm:text-start" href={zurueck}>Zurück</a>
|
||||
|
||||
<div></div>
|
||||
|
||||
|
||||
<button class="button" type="button">Speichern</button>
|
||||
<button class="order-2 button" type="button">Speichern</button>
|
||||
|
||||
{#if gegAnfrage}
|
||||
<button
|
||||
class="button cursor-pointer"
|
||||
class="order-1 sm:order-2 button cursor-pointer"
|
||||
type="button"
|
||||
data-cy="bestellen"
|
||||
on:click={anfordern}>Angebot anfordern</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
class="button cursor-pointer"
|
||||
class="order-1 sm:order-2 button cursor-pointer"
|
||||
data-cy="bestellen"
|
||||
type="button"
|
||||
on:click={bestellen}>Kostenpflichtig bestellen</button
|
||||
@@ -529,146 +518,17 @@ grid-cols-5 justify-around justify-items-center items-center"
|
||||
|
||||
<NotificationWrapper></NotificationWrapper>
|
||||
|
||||
<!--
|
||||
<div class="bereich-box pr-12 mt-6">
|
||||
<Pruefung
|
||||
bereich="A"
|
||||
title="Prüfung der Ausweisart"
|
||||
bullets={[
|
||||
["Vermietung, Verkauf oder sonstiges.", false],
|
||||
[
|
||||
"Baujahr Heizung nicht kleiner als Baujahr Gebäude.",
|
||||
false,
|
||||
],
|
||||
[
|
||||
"Baujahr nach 1977 oder saniert oder mehr als 4 Wohneinheiten",
|
||||
false,
|
||||
],
|
||||
["Heizung min. 3 Jahre alt.", false],
|
||||
["Verbrauchsausweis zulässig.", false],
|
||||
]}
|
||||
></Pruefung>
|
||||
|
||||
<Pruefung
|
||||
bereich="B"
|
||||
title="Prüfung der Adresse, Wohnfläche, Keller und Dach"
|
||||
bullets={[
|
||||
["PLZ gültig.", false],
|
||||
["Klimafaktorern.", false],
|
||||
["Wohnfläche passt zu Wohneinheiten", false],
|
||||
]}
|
||||
></Pruefung>
|
||||
|
||||
<Pruefung
|
||||
bereich="C"
|
||||
title="Prüfung der Verbrauchsangaben"
|
||||
bullets={[
|
||||
["Verbrauchsmenge schlüssig.", false],
|
||||
["Verbrauchsabweichung im Rahmen.", false],
|
||||
["Endenergieverbrauch schlüssig", false],
|
||||
]}
|
||||
></Pruefung>
|
||||
|
||||
<Pruefung
|
||||
bereich="D"
|
||||
title="Prüfung Warmwasser und alternative Energieversorgung"
|
||||
bullets={[
|
||||
["Warmwasseranteil schlüssig.", false],
|
||||
["Verbrauchsabweichung im Rahmen.", false],
|
||||
["Endenergieverbrauch schlüssig", false],
|
||||
]}
|
||||
></Pruefung>
|
||||
|
||||
<Pruefung
|
||||
bereich="E"
|
||||
title="Prüfung von Gebäudetyp, Lüftung, Kühlung und Leerstand"
|
||||
bullets={[["Leerstand nicht größer als 30%.", false]]}
|
||||
></Pruefung>
|
||||
|
||||
<Pruefung
|
||||
bereich="F"
|
||||
title="Prüfung des Sanierungsstandes und der Gebäudebilder"
|
||||
bullets={[
|
||||
["Mindestens ein Bild pro Abschnitt vorhanden.", false],
|
||||
["Angaben zum Sanierungsstand vorhanden.", false],
|
||||
[
|
||||
"Bei Baujahr vor 1978 Dach oder Geschossdecke min. 12 cm gedämmt.",
|
||||
false,
|
||||
],
|
||||
]}
|
||||
></Pruefung>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="varianten bereich-box bg-white">
|
||||
<h3>Hiermit bestelle ich folgende Version des Energieausweises:</h3>
|
||||
|
||||
<div class="variante">
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={basePrice}
|
||||
value={prices[0]}
|
||||
name="Preis"
|
||||
checked
|
||||
/>
|
||||
<div class="text-right pr-4"><b>{prices[0]} €</b> inkl. MwSt.</div>
|
||||
<div>Verbrauchsausweis online als PDF per E-Mail</div>
|
||||
</div>
|
||||
|
||||
<div class="variante">
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={basePrice}
|
||||
value={prices[1]}
|
||||
name="Preis"
|
||||
/>
|
||||
<div class="text-right pr-4"><b>{prices[1]} €</b> inkl. MwSt.</div>
|
||||
<div>
|
||||
Verbrauchsausweis online inkl. Beratung als PDF per E-Mail
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="variante">
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={basePrice}
|
||||
value={prices[2]}
|
||||
name="Preis"
|
||||
/>
|
||||
<div class="text-right pr-4"><b>{prices[2]} €</b> inkl. MwSt.</div>
|
||||
<div>
|
||||
Verbrauchsausweis offline als PDF per E-Mail (Sie schicken uns 3
|
||||
Verbrauchsabrechnungen)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zusaetze bereich-box bg-white">
|
||||
<h3>Zusatzleistungen</h3>
|
||||
|
||||
{#each services as service}
|
||||
<div class="zusatz">
|
||||
<input type="checkbox" bind:checked={service.selected} />
|
||||
<div class="text-right pr-6">
|
||||
<b>{@html service.price} €</b> inkl. Mwst
|
||||
</div>
|
||||
<div>{@html service.name}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
|
||||
|
||||
<!-- <ButtonZurueckSpeichernKaufabschluss bind:ausweis bind:aufnahme bind:objekt bind:bilder bind:user /> -->
|
||||
|
||||
<style lang="postcss">
|
||||
h3 {
|
||||
@apply text-[1.25rem] ml-0 font-bold mb-6;
|
||||
@apply text-[1.25rem] ml-0 pl-0 font-bold mb-6;
|
||||
}
|
||||
|
||||
.ProduktKostenTabelle {
|
||||
@apply block;
|
||||
@apply block mt-6 sm:mt-0;
|
||||
.zeile {
|
||||
@apply grid grid-cols-[19rem_1rem_5rem_1fr];
|
||||
@apply grid grid-cols-[9rem_1rem_5rem_1fr] sm:grid-cols-[19rem_1rem_5rem_1fr];
|
||||
}
|
||||
.betrag {
|
||||
@apply font-bold text-[1.15rem];
|
||||
@@ -688,7 +548,7 @@ grid-cols-5 justify-around justify-items-center items-center"
|
||||
.zusaetze {
|
||||
@apply block;
|
||||
.zusatz {
|
||||
@apply grid grid-cols-[40px_8rem_1fr] items-start pb-3;
|
||||
@apply grid grid-cols-[10px_6rem_1fr] sm:grid-cols-[40px_8rem_1fr] items-start pb-3;
|
||||
input {
|
||||
@apply mt-[4px];
|
||||
}
|
||||
|
||||
@@ -117,28 +117,23 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
|
||||
<div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4
|
||||
|
||||
2xl:grid-cols-2 2xl:gap-x-8
|
||||
">
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
|
||||
<h2 class="text-primary text-xl">Verbrauchsausweis Gewerbe {PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]} €</h2>
|
||||
<Progressbar active={0} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -164,23 +164,22 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
|
||||
|
||||
|
||||
|
||||
<div id="skala" class="bg-white grid grid-cols-1 p-4 lg:grid-cols-2 lg:gap-x-6">
|
||||
<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6">
|
||||
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-4 order-1 self-stretch grid grid-cols-1">
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-4 py-3 text-center order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary text-3xl m-0">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary text-xl">{ausweisart} {PRICES[ausweisart][ausweistyp]} €</h2>
|
||||
<Progressbar active={0}/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
>
|
||||
<div
|
||||
id="progress-box"
|
||||
class="w-full box relative px-4 py-3 text-center order-2 self-stretch"
|
||||
class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch"
|
||||
>
|
||||
<h1 class="text-secondary text-3xl m-0">GEG Nachweis Anfragen</h1>
|
||||
<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen</h2>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
>
|
||||
<div
|
||||
id="progress-box"
|
||||
class="w-full box relative px-4 py-3 text-center order-2 self-stretch"
|
||||
class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch"
|
||||
>
|
||||
<h1 class="text-secondary text-3xl m-0">GEG Nachweis Anfragen</h1>
|
||||
<h2 class="text-primary text-xl">GEG-Nachweis Wohngebäude</h2>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.formular-boxen {
|
||||
@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
|
||||
@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
|
||||
}
|
||||
|
||||
.formular-abschnitt1 {
|
||||
|
||||
@@ -76,12 +76,16 @@ input:disabled, input:read-only {
|
||||
/*ARTICLE*/
|
||||
|
||||
article {
|
||||
@apply w-full relative bg-white px-0 py-0 z-0;
|
||||
@apply w-full relative bg-white p-0 z-0 box rounded-tl-none sm:p-2 lg:p-12;
|
||||
|
||||
hr {@apply mb-4 mt-4 border-primary;}
|
||||
|
||||
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;}
|
||||
h1 {@apply pl-2 font-normal mb-2
|
||||
[font-size:_clamp(24px,1.5vw,36px)] leading-7
|
||||
sm:text-4xl;}
|
||||
h2 {@apply pl-2 font-normal mb-2
|
||||
[font-size:_clamp(24px,1.5vw,36px)] leading-7
|
||||
sm:text-4xl;}
|
||||
h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-1;}
|
||||
|
||||
a {@apply text-blue-700 font-medium inline;}
|
||||
@@ -154,6 +158,7 @@ article {
|
||||
xl:text-lg
|
||||
}
|
||||
|
||||
|
||||
.dropdown-content{
|
||||
@apply !relative z-[1] !p-0 !scale-100 hidden
|
||||
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
|
||||
@@ -174,8 +179,9 @@ li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||
|
||||
#hamburger{
|
||||
@apply my-1;
|
||||
span {@apply block h-[3px] w-6 bg-white !transition-all}
|
||||
span:nth-child(2) {@apply my-1}
|
||||
.burger {@apply w-6}
|
||||
span {@apply block h-[4px] bg-white !transition-all}
|
||||
span:nth-child(2) {@apply my-[3px]}
|
||||
}
|
||||
|
||||
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
|
||||
|
||||
Reference in New Issue
Block a user