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>
|
||||
Reference in New Issue
Block a user