so wie Jens es will
This commit is contained in:
Robert Jagtiani
133
src/components/design/content/banner-saeule.svelte
Normal file
133
src/components/design/content/banner-saeule.svelte
Normal file
@@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id="saeulen">
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
#saeulen{@apply grid grid-cols-[1fr,1fr,1fr,1fr] gap-4;
|
||||
.saeule{@apply grid;
|
||||
img{@apply w-full justify-self-center mb-1}
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
|
||||
.name{@apply w-full}
|
||||
.name{font-size: clamp(15px, 2vh, 18px)}
|
||||
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
|
||||
.ab{@apply leading-[1]}
|
||||
.mwst{@apply leading-[auto]}
|
||||
.price{font-size: clamp(15px, 5vh, 50px)}
|
||||
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
|
||||
.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
|
||||
.services{@apply py-2}
|
||||
.services:first-child{@apply font-bold}
|
||||
.services:nth-child(even){@apply bg-secondary/10}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
21
src/components/design/footer/Footer.astro
Normal file
21
src/components/design/footer/Footer.astro
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="
|
||||
|
||||
grid grid-cols-1 bg-primary lg:px-9 lg:py-1
|
||||
lg:grid-cols-4 lg:px-9 lg:py-1">
|
||||
|
||||
<div class="
|
||||
justify-self-center
|
||||
md:col-end-2 md:justify-self-start md:px-4">
|
||||
<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
|
||||
</div>
|
||||
<div class="
|
||||
justify-self-center
|
||||
md:col-end-5 md:justify-self-end md:px-6">
|
||||
<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} IB Cornelsen Hamburg</a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
8
src/components/design/footer/ORG_Footer.astro
Normal file
8
src/components/design/footer/ORG_Footer.astro
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<div class="flex flex-row justify-between px-4 items-center bg-primary py-2 mt-auto">
|
||||
<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
|
||||
<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
|
||||
</div>
|
||||
67
src/components/design/header/Header.astro
Normal file
67
src/components/design/header/Header.astro
Normal file
@@ -0,0 +1,67 @@
|
||||
<header class="max-w-[1920px] w-full relative bg-white
|
||||
md:bg-[url('/images/header/header-bg.jpg')] md:bg-cover md:grid md:grid-cols-2
|
||||
lg:grid lg:grid-cols-3">
|
||||
|
||||
|
||||
|
||||
<div class="
|
||||
justify-self-center px-2 py-2
|
||||
xs:px-6 xs:py-4
|
||||
md:px-4 md:py-4
|
||||
md:col-end-4 md:justify-self-end
|
||||
xl:my-4 xl:mr-9 xl:p-0">
|
||||
|
||||
|
||||
<a href="/">
|
||||
<img class="
|
||||
w-full
|
||||
md:w-[350px]
|
||||
lg:w-[420px]"
|
||||
src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
|
||||
|
||||
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
|
||||
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
|
||||
Energieausweis online erstellen
|
||||
</h2>
|
||||
|
||||
<h2 class="text-primary font-normal absolute
|
||||
top-[1.6rem] right-2 text-[0.85rem]
|
||||
xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
|
||||
|
||||
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
|
||||
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
|
||||
Energieausweise nach aktuellem GEG
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-start-1 col-span-3">
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!-- <a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>
|
||||
-->
|
||||
|
||||
</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>
|
||||
67
src/components/design/header/ORG_Header.astro
Normal file
67
src/components/design/header/ORG_Header.astro
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
|
||||
import ThemeController from "./ThemeController.svelte";
|
||||
|
||||
const valid = await validateAccessTokenServer(Astro)
|
||||
|
||||
const lightTheme = Astro.cookies.get("theme")?.value === "light";
|
||||
---
|
||||
|
||||
<header>
|
||||
<a class="hidden md:block w-full h-48 bg-base-200" href="/">
|
||||
<img
|
||||
src="/images/header/header-bg.jpg"
|
||||
class="w-full h-full object-cover"
|
||||
alt="Hintergrund - Rollen Architektenpapier"
|
||||
/>
|
||||
<img
|
||||
src="/images/header/logo-big.svg"
|
||||
class="absolute top-4 right-0 w-[464px]"
|
||||
alt="IBCornelsen - Logo"
|
||||
/>
|
||||
<h2
|
||||
class="text-secondary font-semibold text-2xl absolute top-8 right-4"
|
||||
>
|
||||
Energieausweis online erstellen
|
||||
</h2>
|
||||
<h2
|
||||
class="text-primary font-semibold text-xl absolute top-16 right-4"
|
||||
>
|
||||
Energieausweise nach aktueller GEG
|
||||
</h2>
|
||||
</a>
|
||||
|
||||
<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
|
||||
<a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>
|
||||
{
|
||||
valid ? (
|
||||
<a class="header-button" href="/dashboard">
|
||||
Profil
|
||||
</a>
|
||||
) : (
|
||||
<a class="header-button" href="/auth/login">
|
||||
Login
|
||||
</a>
|
||||
)
|
||||
}
|
||||
<ThemeController lightTheme={lightTheme} client:load />
|
||||
<a class="hamburger_menu"
|
||||
><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
|
||||
>
|
||||
</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>
|
||||
28
src/components/design/sidebars/cards/card-BA-G-promo.svelte
Normal file
28
src/components/design/sidebars/cards/card-BA-G-promo.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="#" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
28
src/components/design/sidebars/cards/card-BA-promo.svelte
Normal file
28
src/components/design/sidebars/cards/card-BA-promo.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="index" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
29
src/components/design/sidebars/cards/card-VA-G-promo.svelte
Normal file
29
src/components/design/sidebars/cards/card-VA-G-promo.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
|
||||
<a href="index" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
29
src/components/design/sidebars/cards/card-VA-promo.svelte
Normal file
29
src/components/design/sidebars/cards/card-VA-promo.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
20
src/components/design/sidebars/cards/card-contact.svelte
Normal file
20
src/components/design/sidebars/cards/card-contact.svelte
Normal file
@@ -0,0 +1,20 @@
|
||||
<div id ="card-contact" class="box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid grid-cols-[max-content,1fr]">
|
||||
<div class="">
|
||||
<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
|
||||
<hr class="w-11/12"/>
|
||||
<p>Telefonische Beratung unter</p>
|
||||
<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
|
||||
</div>
|
||||
|
||||
<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
231
src/components/design/sidebars/cards/card-navigation.svelte
Normal file
231
src/components/design/sidebars/cards/card-navigation.svelte
Normal file
@@ -0,0 +1,231 @@
|
||||
<script>
|
||||
let innerWidth
|
||||
|
||||
function dropdown(){
|
||||
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth<1024){
|
||||
|
||||
const check_element = this.lastChild;
|
||||
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||
const rotate_element = this.childNodes[0].children[0];
|
||||
|
||||
console.log(rotate_element);
|
||||
|
||||
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(){
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth>1024){
|
||||
const check_element = this.firstChild.lastChild;
|
||||
console.log(check_element);
|
||||
check_element.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hoverout(){
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth>1024){
|
||||
const check_element = this.firstChild.lastChild;
|
||||
console.log(check_element);
|
||||
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("card-navigation");
|
||||
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-6
|
||||
lg:hidden">
|
||||
|
||||
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<nav id="card-navigation" class="card-navigation hidden box lg:block">
|
||||
|
||||
<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="" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
{:else}
|
||||
<a href="#" class="nav-element-child xl:rounded-t-[.75rem]">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</a></li>
|
||||
{/if}
|
||||
<li><a href="">Verbrauchsausweis erstellen</a></li>
|
||||
<li><a href="">Bedarfsausweis erstellen</a></li>
|
||||
<li><a href="">Verbrauchsausweis Gewerbe erstellen</a></li>
|
||||
<li><a href="">Bedarfsausweis Gewerbe erstellen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child">Welcher Energieausweis?</div>
|
||||
</div>
|
||||
|
||||
<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">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
<ul class="dropdown-content verbrauchsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="">Verbrauchsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="">Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li><a href="">Verbrauchsausweis online erstellen</a></li>
|
||||
<li><a href="">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||||
<li><a href="">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li><a href="">Verbrauchsausweis Gewerbe</a></li>
|
||||
<li><a href="">Verbrauchsausweis Gewerbe online erstellen</a></li>
|
||||
<li><a href="">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
|
||||
<li><a href="">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
|
||||
</div>
|
||||
|
||||
<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">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</a></li>
|
||||
{/if}
|
||||
<li><a href="">Bedarfsausweis Wohngebäude</a></li>
|
||||
<li><a href="">Bedarfsausweis online erstellen</a></li>
|
||||
<li><a href="">Häufige Fragen zum Bedarfsausweis</a></li>
|
||||
<li><a href="">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
|
||||
<li><a href="">Bedarfsausweis Gewerbe</a></li>
|
||||
<li><a href="">Bedarfsausweis Gewerbe online erstellen</a></li>
|
||||
<li><a href="">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
|
||||
<li><a href="">Statistiken zum Bedarfsausweis Gewerbe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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</a></li>
|
||||
{/if}
|
||||
<li class=""><a href="">Energieausweis Pflicht</a></li>
|
||||
<li class=""><a href="">Energieausweis Kosten</a></li>
|
||||
<li class=""><a href="">Energieausweis Haus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child">EnEV Zusammenfassung - Archiv</div>
|
||||
</div>
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child">Energieausweis Aussteller</div>
|
||||
</div>
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child">Kundenbewertungen</div>
|
||||
</div>
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child">FAQ</div>
|
||||
</div>
|
||||
<div class="nav-element dropdown">
|
||||
<div class="nav-element-child xl:!rounded-b-xl">Für Entwickler</div>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
.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>
|
||||
41
src/components/design/sidebars/cards/card-price-info.svelte
Normal file
41
src/components/design/sidebars/cards/card-price-info.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-price-info"
|
||||
class=" box card hidden bg-white px-6 py-4 mt-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid grid-cols-[max-content]">
|
||||
|
||||
<h2>Was wird der Energieausweis kosten?</h2>
|
||||
<hr class="mb-4 bg-primary h-[2px]">
|
||||
<p>Verbrauchsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Verbrauchsausweis Gewerbe</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Gewerbe</p>
|
||||
<p>ab 300€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Wohngebäude</p>
|
||||
<p>ab 400€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Gewerbe</p>
|
||||
<p>ab 450€ inkl. MwSt.</p>
|
||||
<hr class="mt-2">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
96
src/components/design/sidebars/cards/navcard.astro
Normal file
96
src/components/design/sidebars/cards/navcard.astro
Normal file
@@ -0,0 +1,96 @@
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="">
|
||||
|
||||
<details class="dropdown block xl:dropdown-right">
|
||||
<summary class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]">❯</span></summary>
|
||||
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
|
||||
<li class=""><a>Verbrauchsausweis erstellen</a></li>
|
||||
<li class=""><a>Bedarfsausweis erstellen</a></li>
|
||||
<li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
|
||||
<li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details class="dropdown block">
|
||||
<summary class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
|
||||
</details>
|
||||
|
||||
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
|
||||
<summary class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]">❯</span></summary>
|
||||
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
|
||||
<li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li class=""><a>Verbrauchsausweis online erstellen</a></li>
|
||||
<li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
|
||||
<li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li class=""><a>Verbrauchsausweis Gewerbe</a></li>
|
||||
<li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
|
||||
<li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
|
||||
<li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
|
||||
<summary class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]">❯</span></summary>
|
||||
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
|
||||
<li class=""><a>Bedarfsausweis Wohngebäude</a></li>
|
||||
<li class=""><a>Bedarfsausweis online erstellen</a></li>
|
||||
<li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
|
||||
<li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
|
||||
<li class=""><a>Bedarfsausweis Gewerbe</a></li>
|
||||
<li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
|
||||
<li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
|
||||
<li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
|
||||
<summary class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]">❯</span></summary>
|
||||
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
|
||||
<li class=""><a>Energieausweis Pflicht</a></li>
|
||||
<li class=""><a>Energieausweis Kosten</a></li>
|
||||
<li class=""><a>Energieausweis Haus</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details class="dropdown block">
|
||||
<summary class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
|
||||
</details>
|
||||
<details class="dropdown block">
|
||||
<summary class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
|
||||
</details>
|
||||
<details class="dropdown block">
|
||||
<summary class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
|
||||
</details>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.dd-cont{
|
||||
@apply !relative lg:!absolute;
|
||||
li{
|
||||
@apply w-max
|
||||
}
|
||||
}
|
||||
|
||||
summary{
|
||||
@apply text-black !text-[1.1rem] !font-normal
|
||||
|
||||
}
|
||||
details:hover > summary {
|
||||
@apply !bg-primary !text-white
|
||||
}
|
||||
details:hover > details.dd-cont {
|
||||
@apply !visible
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
253
src/components/design/sidebars/left/ORG_SidebarLeft.astro
Normal file
253
src/components/design/sidebars/left/ORG_SidebarLeft.astro
Normal file
@@ -0,0 +1,253 @@
|
||||
<div class="flex flex-col gap-6">
|
||||
<nav>
|
||||
<div class="nav-card">
|
||||
<div class="card-menu-option dropdown dropdown-right dropdown-hover">
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<div class="dropdown-content">
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis erstellen</a>
|
||||
<a href="/bedarfsausweis">Bedarfsausweis erstellen</a>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe"
|
||||
>Verbrauchsausweis Gewerbe erstellen</a
|
||||
>
|
||||
<a href="/bedarfsausweis-gewerbe"
|
||||
>Bedarfsausweis Gewerbe anfragen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<a class="card-menu-option" href="/welcher-energieausweis"
|
||||
>Welcher Energieausweis ?</a
|
||||
>
|
||||
<div class="card-menu-option dropdown dropdown-right dropdown-hover">
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis</a>
|
||||
<div class="dropdown-content">
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-wohngebaeude"
|
||||
>Verbrauchsausweis Wohngebäude</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Verbrauchsausweis online erstellen</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis"
|
||||
>Häufige Fragen zum Verbrauchsausweis</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis"
|
||||
>Statistiken zum Verbrauchsausweis Wohngebäude</a
|
||||
>
|
||||
<hr class="nav-hr" />
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-gewerbe"
|
||||
>Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
|
||||
>Verbrauchsausweis Gewerbe online erstellen</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis-gewerbe"
|
||||
>Häufige Fragen zum Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis-gewerbe"
|
||||
>Statistiken zum Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-menu-option dropdown dropdown-right dropdown-hover">
|
||||
<a href="/bedarfsausweis/">Bedarfsausweis</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/bedarfsausweis/bedarfsausweis-wohngebaeude"
|
||||
>Bedarfsausweis Wohngebäude</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/bedarfsausweis-erstellen"
|
||||
>Bedarfsausweis online erstellen</a
|
||||
>
|
||||
<a
|
||||
href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis"
|
||||
>Häufige Fragen zum Bedarfsausweis</a
|
||||
>
|
||||
<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis"
|
||||
>Statistiken zum Bedarfsausweis Wohngebäude</a
|
||||
>
|
||||
<hr class="nav-hr" />
|
||||
<a href="/bedarfsausweis/bedarfsausweis-gewerbe"
|
||||
>Bedarfsausweis Gewerbe</a
|
||||
>
|
||||
<a
|
||||
href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen"
|
||||
>Bedarfsausweis Gewerbe anfragen</a
|
||||
>
|
||||
<a
|
||||
href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe"
|
||||
>Häufige Fragen zum Bedarfsausweis Gewerbe</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-menu-option dropdown dropdown-right dropdown-hover">
|
||||
<a href="/">Energieausweis</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="/energieausweis-pflicht"
|
||||
>Energieausweis Pflicht</a
|
||||
>
|
||||
<a href="/energieausweis-kosten"
|
||||
>Energieausweis Kosten</a
|
||||
>
|
||||
<a href="/energieausweis-haus">Energieausweis Haus</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="card-menu-option" href="/enev-zusammenfassung"
|
||||
>EnEV Zusammenfassung - Archiv</a
|
||||
>
|
||||
<a class="card-menu-option" href="/energieausweis-aussteller"
|
||||
>Energieausweis Aussteller</a
|
||||
>
|
||||
<a class="card-menu-option" href="/kundenbewertungen"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
<a class="card-menu-option" href="/faq">FAQ</a>
|
||||
<a class="card-menu-option" href="/developers">Für Entwickler</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="infoCard">
|
||||
<div class="flex-column align-center">
|
||||
<img
|
||||
src="/images/right-sidebar/ing-niedersachsen.png"
|
||||
alt="Mitglied Ingenieurkammer Niedersachen"
|
||||
style="height: 150px;margin-bottom: 25px; width: auto;"
|
||||
/>
|
||||
<img
|
||||
src="/images/right-sidebar/mitglied-haendlerbund.png"
|
||||
alt="Mitglied im Händlerbund"
|
||||
style="width:auto;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoCard">
|
||||
<div class="heading1">Was wird der Energieausweis kosten?</div>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<ul>
|
||||
<li>Verbrauchsausweis Wohngebäude<br />45€ inkl. MwSt.<hr /></li>
|
||||
<li>Bedarfsausweis Wohngebäude<br />75€ inkl. MwSt.<hr /></li>
|
||||
<li>Verbrauchsausweis Gewerbe<br />65€ inkl. MwSt.<hr /></li>
|
||||
<li>Bedarfsausweis Gewerbe<br />ab 300€ inkl. MwSt.<hr /></li>
|
||||
<li>EnEV-Nachweis Wohngebäude<br />ab 400€ inkl. MwSt.<hr /></li>
|
||||
<li>EnEV-Nachweis Gewerbe<br />ab 450€ inkl. MwSt.</li>
|
||||
</ul>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="infoCard">
|
||||
<div class="heading1">Zahlungsoptionen</div>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<p style="text-align:center; font-size: 1.1em;">
|
||||
Ihre online Zahlungen werden sicher über eine SSL Verschlüsselung
|
||||
abgewickelt.
|
||||
</p>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div class="align-center">
|
||||
<img
|
||||
src="/images/left-sidebar/payment.png"
|
||||
alt="Bezahloptionen - Paypal, Visa, Kreditkarte..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nav-card {
|
||||
@apply rounded-lg w-full flex flex-col shadow-md border border-base-300;
|
||||
}
|
||||
|
||||
.infoCard {
|
||||
@apply bg-base-200 border-base-300 rounded-lg border p-4 shadow-md;
|
||||
}
|
||||
|
||||
.dropdown-content > .card-menu-option,
|
||||
.dropdown-content > a {
|
||||
@apply block w-[350px] bg-base-200 border text-lg px-4 py-2 border-base-300;
|
||||
}
|
||||
|
||||
.dropdown-content > a:first-child {
|
||||
@apply rounded-tr-lg rounded-tl-lg;
|
||||
}
|
||||
|
||||
.dropdown-content > a:last-child {
|
||||
@apply rounded-br-lg rounded-bl-lg;
|
||||
}
|
||||
|
||||
.dropdown-content > .card-menu-option:hover,
|
||||
.dropdown-content > a:hover {
|
||||
background-color: #444f94 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
@apply absolute bg-base-200 left-full top-[-1px] shadow-md z-10 hidden rounded-lg;
|
||||
}
|
||||
|
||||
.dropdown:hover > .dropdown-content {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.dropdown::after {
|
||||
content: "\276F";
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
transform: translate(0, -50%) rotate(0deg);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-content:hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown::after {
|
||||
content: "\276F";
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
transform: translate(0, -50%) rotate(0deg);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.card-menu-option {
|
||||
@apply bg-base-200 border-b border-base-300 text-base-content text-lg py-2.5 px-5 select-none no-underline w-auto cursor-pointer;
|
||||
}
|
||||
|
||||
.nav-card .card-menu-option:first-child {
|
||||
@apply rounded-tr-lg rounded-tl-lg;
|
||||
}
|
||||
|
||||
.nav-card .card-menu-option:last-child {
|
||||
@apply rounded-br-lg rounded-bl-lg;
|
||||
}
|
||||
|
||||
.nav-card .card-menu-option a {
|
||||
@apply text-base-content;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-card .card-menu-option:hover > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-card .card-menu-option:hover {
|
||||
background-color: #ff7d26;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
14
src/components/design/sidebars/left/SidebarLeft.astro
Normal file
14
src/components/design/sidebars/left/SidebarLeft.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
import Navigation from "#sidebarCards/card-navigation.svelte";
|
||||
import Preistabelle from "#sidebarCards/card-price-info.svelte";
|
||||
|
||||
---
|
||||
|
||||
<div class="flex flex-col grow">
|
||||
|
||||
<Navigation client:load />
|
||||
|
||||
<Preistabelle client:load />
|
||||
|
||||
|
||||
</div>
|
||||
144
src/components/design/sidebars/right/ORG_SidebarRight.astro
Normal file
144
src/components/design/sidebars/right/ORG_SidebarRight.astro
Normal file
@@ -0,0 +1,144 @@
|
||||
---
|
||||
import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
|
||||
import SidebarWidgetLogin from "./SidebarWidgetLogin.svelte";
|
||||
import SidebarWidgetProfile from "./SidebarWidgetProfile.svelte"
|
||||
|
||||
const loggedin = await validateAccessTokenServer(Astro)
|
||||
---
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
{ !loggedin ?
|
||||
<SidebarWidgetLogin client:load></SidebarWidgetLogin> : <SidebarWidgetProfile></SidebarWidgetProfile>}
|
||||
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Rufen Sie uns an<br /> Wir sind gerne für Sie da
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div class="flex-row justify-between">
|
||||
<div class="flex-column align-left">
|
||||
<p>Telefonische Beratung unter</p>
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
<a href="tel:+4940209339850">040 / 209 339 850</a>
|
||||
</h2>
|
||||
</div>
|
||||
<img
|
||||
src="/images/right-sidebar/telefon-1.png"
|
||||
style="width:70px; height: 73px;"
|
||||
alt="Telefon - Rufen sie uns an."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Bitte bewerten Sie uns!
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div
|
||||
class="review-widget_net"
|
||||
data-uuid="d908c994-f1f2-4ab6-bad1-b2d3538086e7"
|
||||
data-template="7"
|
||||
data-filter=""
|
||||
data-lang="de"
|
||||
data-theme="light"
|
||||
>
|
||||
<a href="https://www.review-widget.net/" target="_blank" rel="noopener"
|
||||
><img
|
||||
src="https://grwapi.net/assets/spinner/spin.svg"
|
||||
title="Google Review Widget"
|
||||
alt="Review Widget"
|
||||
/></a>
|
||||
</div><script async src="https://grwapi.net/widget.min.js"></script>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Verbrauchsausweis für Wohngebäude
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div class="flex-column align-center">
|
||||
<img
|
||||
src="/images/right-sidebar/wohnhaus-1.png"
|
||||
alt="Verbrauchsausweis ab 45€ für Wohngebäude."
|
||||
/>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
class="large-button">Jetzt Verbrauchsausweis erstellen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Welche Häuser benötigen einen Energieausweis?
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<ul>
|
||||
<li>Wohngebäude > 50m² mit dauerhaftem Aufenthalt<hr /></li>
|
||||
<li>Nichtwohngebäude > 50m² mit dauerhaftem Aufenthalt<hr /></li>
|
||||
<li>Beheizte Gebäude > 50m²<hr /></li>
|
||||
<li>Neubauten<hr /></li>
|
||||
<li>Anbauten > 50 m²<hr /></li>
|
||||
<li>Sanierung mit Austausch der Heizungsanlage</li>
|
||||
</ul>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Bedarfsausweis für Wohngebäude
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div class="flex-column align-center">
|
||||
<img
|
||||
src="/images/right-sidebar/wohnhaus-ba-1.png"
|
||||
alt="Bedarfsausweis ab 75€ für Wohngebäude"
|
||||
/>
|
||||
<a
|
||||
href="/energieausweis-erstellen/bedarfsausweis-erstellen"
|
||||
class="large-button">Jetzt Bedarfsausweis erstellen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Welcher Energieausweis ist der richtige?
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<ul>
|
||||
<li>
|
||||
Verbrauchsausweis bei Vermietung, Verkauf und Aushang (Baujahr nach 1977
|
||||
bzw. saniert).<hr />
|
||||
</li>
|
||||
<li>
|
||||
Bedarfsausweis bei Neubau, Sanierung, Erweiterung und
|
||||
Fördermittelantrag.
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="infoCard">
|
||||
<h2 style="font-weight: bold; font-size: 1.2em; color: #3A4AB5;">
|
||||
Verbrauchsausweis für Gewerbe
|
||||
</h2>
|
||||
<hr style="margin-bottom:15px;" />
|
||||
<div class="flex-column align-center">
|
||||
<img
|
||||
src="/images/right-sidebar/gewerbe-1.png"
|
||||
alt="Verbrauchsausweis Gewerbe für 65€"
|
||||
/>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
|
||||
class="large-button">Jetzt Verbrauchsausweis erstellen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.infoCard {
|
||||
@apply bg-base-200 rounded-lg border border-base-300 p-4 shadow-md;
|
||||
}
|
||||
</style>
|
||||
25
src/components/design/sidebars/right/SidebarRight.astro
Normal file
25
src/components/design/sidebars/right/SidebarRight.astro
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import Login from "#sidebarCards/SidebarWidgetLogin.svelte";
|
||||
import Contact from "#sidebarCards/Ucard-contact.svelte";
|
||||
import Review from "#sidebarCards/card-review.svelte";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
|
||||
import BApromo from "#sidebarCards/card-BA-promo.svelte";
|
||||
import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
|
||||
---
|
||||
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
|
||||
<Login client:load />
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VApromo client:load />
|
||||
<VAGpromo client:load />
|
||||
<BApromo client:load />
|
||||
<BAGpromo client:load />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user