IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Partner

Browse Source
This commit is contained in:
Moritz Utcke
2025-04-29 11:15:57 -03:00
parent a8be6db8aa
commit 1380dcb43a
12 changed files with 276 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/components/design/header/AusweisHeaderPartner.astro Normal file
View File

@@ -0,0 +1,209 @@
---
export interface Props {
tab: number;
}
const { tab } = Astro.props;
const { params } = Astro;
const partner = params.partner;
const pathname = Astro.url.pathname;
const isVA = pathname.includes("verbrauchsausweis-wohngebaeude");
const isVAG = pathname.includes("verbrauchsausweis-gewerbe");
const isBA = pathname.includes("bedarfsausweis-wohngebaeude");
const isBAG = pathname.includes("bedarfsausweis-gewerbe-anfragen");
const isGGW = pathname.includes("geg-nachweis-wohnen-anfragen");
const isGGG = pathname.includes("geg-nachweis-gewerbe-anfragen");
const isWEA = pathname.includes("welcher-ausweis");
const isWelt = pathname.includes("immowelt");
const isNET = pathname.includes("immonet");
---
<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
<div class="grid grid-cols-[min-content_1fr] items-center">
<div class="w-[150px] h-[80px]">
<div
class="w-full h-full grid grid-col-1 justify-items-center items-center"
>
<img
class={isNET
? "w-[149px]"
: isWelt
? "w-[109px]"
: "w-[109px]"}
src={`/images/partner/${partner}/${partner}.svg`}
alt={partner}
/>
</div>
</div>
<div>
<ul class="navlist">
<li>
<a
href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/`}
><button class={tab === 0 ? "glow" : ""}
>Verbrauchsausweis</button
></a>
</li>
<li>
<a
href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/`}
><button class={tab === 1 ? "glow" : ""}
>Verbrauchsausweis Gewerbe</button
></a>
</li>
<li>
<a
href={`/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/`}
><button class={tab === 2 ? "glow" : ""}
>Bedarfsausweis</button
></a>
</li>
<li>
<a
href={`/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/`}
><button class={tab === 3 ? "glow" : ""}
>Bedarfsausweis Gewerbe</button
></a>
</li>
<li>
<a
href={`/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/`}
><button class={tab === 4 ? "glow" : ""}
>GEG Nachweis Wohngebäude</button
></a>
</li>
<li>
<a
href={`/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/`}
><button class={tab === 5 ? "glow" : ""}
>GEG Nachweis Gewerbe</button
></a>
</li>
<li>
<a href={`/${partner}/welcher-ausweis/${partner}`}
><button class={tab === 6 ? "glow" : ""}
>Welcher Ausweis</button
></a>
</li>
</ul>
</div>
</div>
</header>
<div
id="titel"
class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover px-24 py-20"
style={`background-image: url('/images/partner/${partner}/hero-energieausweis.jpg');
background-repeat:no-repeat; background-position:right;`}
>
{
isVA ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>Verbrauchsausweis Wohngebäude</b> bestellen
</div>
) : (
""
)
}
{
isVAG ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>Verbrauchsausweis Gewerbe</b> bestellen
</div>
) : (
""
)
}
{
isBA ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>Bedarfsausweis Wohngebäude</b> bestellen
</div>
) : (
""
)
}
{
isBAG ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>Bedarfsausweis Gewerbe</b> anfragen
</div>
) : (
""
)
}
{
isGGW ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>GEG Nachweis Wohngebäude</b> anfragen
</div>
) : (
""
)
}
{
isGGG ? (
<div>
Hier komfortabel und einfach online den{" "}
<b>GEG Nachweis Gewerbe</b> anfragen
</div>
) : (
""
)
}
{
isWEA ? (
<div>
Hier komfortabel und einfach online den richtigen Ausweis finden
</div>
) : (
""
)
}
</div>
<style lang="postcss">
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
#titel{
font-family: "immo Sans";
font-weight:400;
div{@apply w-fit bg-white/75 py-6 px-16 rounded-lg ring-2 ring-black/15 text-[1.45rem];box-shadow:8px 8px 16px rgba(0,0,0,0.5);}
}
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
.navlist {
@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
.navlist li button{@apply text-[0.75rem] md:text-[1rem] text-[#646464] sm:p-2 text-left
hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
font-family: "immo Sans";
font-weight:400;}
.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}
</style>

114
src/components/design/header/AusweisHeader_partner.astro
View File

@@ -1,114 +0,0 @@
---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
const { tabHover1 } = Astro.props;
const { tabHover2 } = Astro.props;
const { tabHover3 } = Astro.props;
const { tabHover4 } = Astro.props;
const { tabHover5 } = Astro.props;
const { tabHover6 } = Astro.props;
const { tabHover7 } = Astro.props;
const { params, url } = Astro;
const partner = params.partner;
const url1 = new URL(Astro.request.url);
const urlPath = url1.pathname;
const isVA = urlPath.includes("verbrauchsausweis-wohngebaeude");
const isVAG = urlPath.includes("verbrauchsausweis-gewerbe");
const isBA = urlPath.includes("bedarfsausweis-wohngebaeude");
const isBAG = urlPath.includes("bedarfsausweis-gewerbe-anfragen");
const isGGW = urlPath.includes("geg-nachweis-wohnen-anfragen");
const isGGG = urlPath.includes("geg-nachweis-gewerbe-anfragen");
const isWEA = urlPath.includes("welcher-ausweis");
const isWelt = urlPath.includes("immowelt");
const isNET = urlPath.includes("immonet");
---
<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
<div class="grid grid-cols-[min-content_1fr] items-center">
<div class="w-[150px] h-[80px]">
<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
<img class={isNET ? "w-[149px]" : isWelt ? "w-[109px]" : "w-[109px]"} src={`/images/partner/${partner}/${partner}.svg`} alt={partner} />
</div>
</div>
<div>
<ul class="navlist">
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/`}><button class={tabHover1}>Verbrauchsausweis</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/`}><button class={tabHover2}>Verbrauchsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/`}><button class={tabHover3}>Bedarfsausweis</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/`}><button class={tabHover4}>Bedarfsausweis Gewerbe</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/`}><button class={tabHover5}>GEG Nachweis Wohngebäude</button></a></li>
<li><a href={`/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/`}><button class={tabHover6}>GEG Nachweis Gewerbe</button></a></li>
<li><a href={`/${partner}/welcher-ausweis/${partner}`}><button class={tabHover7}>Welcher Ausweis</button></a></li>
</ul>
</div>
</div>
</header>
<div id="titel" class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover px-24 py-20"
style={`background-image: url('/images/partner/${partner}/hero-energieausweis.jpg');
background-repeat:no-repeat; background-position:right;`}>
{isVA ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Wohngebäude</b> bestellen</div> : ""}
{isVAG ? <div>Hier komfortabel und einfach online den <b>Verbrauchsausweis Gewerbe</b> bestellen</div> : ""}
{isBA ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Wohngebäude</b> bestellen</div> : ""}
{isBAG ? <div>Hier komfortabel und einfach online den <b>Bedarfsausweis Gewerbe</b> anfragen</div> : ""}
{isGGW ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Wohngebäude</b> anfragen</div> : ""}
{isGGG ? <div>Hier komfortabel und einfach online den <b>GEG Nachweis Gewerbe</b> anfragen</div> : ""}
{isWEA ? <div>Hier komfortabel und einfach online den richtigen Ausweis finden</div> : ""}
</div>
<style lang="postcss">
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
#titel{
font-family: "immo Sans";
font-weight:400;
div{@apply w-fit bg-white/75 py-6 px-16 rounded-lg ring-2 ring-black/15 text-[1.45rem];box-shadow:8px 8px 16px rgba(0,0,0,0.5);}
}
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
.navlist {
@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
.navlist li button{@apply text-[0.75rem] md:text-[1rem] text-[#646464] sm:p-2 text-left
hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
font-family: "immo Sans";
font-weight:400;}
.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}
</style>

101
src/layouts/AusweisLayoutDatenImmowelt.astro
View File

@@ -1,7 +1,7 @@
---
import "../style/global.css";
import "../style/formular.css";
import "../../svelte-dialogs.config"
import "../../svelte-dialogs.config";
import Header from "#components/design/header/AusweisHeaderImmowelt.astro";
import Footer from "#components/design/footer/Footer.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -12,50 +12,53 @@ export interface Props {
const { title } = Astro.props;
---
<script>
window.addEventListener("scroll", (event) => {
let scroll = window.scrollY;
window.addEventListener("scroll", (event) => {
let scroll = window.scrollY;
console.log(scroll);
if (scroll >= 400) {
document
.getElementById("skala")
?.classList.add(
"2xl:fixed",
"2xl:py-4",
"2xl:top-0",
"2xl:z-20"
);
document.getElementById("skala")?.classList.remove("w-full");
document.getElementById("skala").style.borderBottom =
"3px solid #e6e6e6";
console.log(scroll);
if(scroll>=400){
document.getElementById("performance-box").style.maxWidth =
"688.5px";
document.getElementById("progress-box").style.maxWidth = "688.5px";
document.getElementById('skala')?.classList.add('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
document.getElementById('skala')?.classList.remove('w-full');
document
.getElementById("formInput-1")
?.classList.add("2xl:mt-[370px]");
} else {
document
.getElementById("skala")
?.classList.remove(
"2xl:fixed",
"2xl:py-4",
"2xl:top-0",
"2xl:z-20"
);
document.getElementById("skala")?.classList.add("w-full");
document.getElementById("skala").style.borderBottom = "none";
document.getElementById('skala').style.borderBottom = "3px solid #e6e6e6";
document.getElementById('performance-box').style.maxWidth = "688.5px";
document.getElementById('progress-box').style.maxWidth = "688.5px";
document.getElementById('formInput-1')?.classList.add('2xl:mt-[370px]');
}else{
document.getElementById('skala')?.classList.remove('2xl:fixed','2xl:py-4','2xl:top-0','2xl:z-20');
document.getElementById('skala')?.classList.add('w-full');
document.getElementById('skala').style.borderBottom = "none";
document.getElementById('formInput-1')?.classList.remove('2xl:mt-[370px]');
}
});
document
.getElementById("formInput-1")
?.classList.remove("2xl:mt-[370px]");
}
});
</script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -79,7 +82,10 @@ console.log(scroll);
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
/>
<meta property="og:url" content="https://online-energieausweis.org/" />
<meta property="og:site_name" content="Energieausweis online erstellen" />
<meta
property="og:site_name"
content="Energieausweis online erstellen"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
@@ -95,14 +101,13 @@ console.log(scroll);
content="https://online-energieausweis.org/images/energieausweis-online-erstellen.jpg"
/>
<title>
{title || 'Energieausweis online erstellen - Online Energieausweis'}
{title || "Energieausweis online erstellen - Online Energieausweis"}
</title>
</head>
<body>
<Header />
<main
class="w-full p-0 grid
xs:grid-cols-[minmax(1fr)] xs:gap-1 xs:p-0
@@ -110,19 +115,15 @@ console.log(scroll);
md:grid-cols-[minmax(1fr)] md:gap-2 md:p-0
lg:grid-cols-[minmax(1fr)] lg:gap-3 lg:p-4
xl:grid-cols-[minmax(1fr)] xl:gap-4 xl:p-6
2xl:grid-cols-[minmax(1fr)] 2xl:gap-5 2xl:p-6
">
<article class="box rounded-tl-none p-2 lg:p-12">
<slot />
</article>
2xl:grid-cols-[minmax(1fr)] 2xl:gap-5 2xl:p-6"
>
<article class="box rounded-tl-none p-2 lg:p-12">
<slot />
</article>
</main>
<Footer />
<NotificationWrapper client:load />
</body>
</html>

23
src/layouts/AusweisLayoutDaten_partner.astro → src/layouts/AusweisLayoutDatenPartner.astro
View File

@@ -2,31 +2,16 @@
import "../style/global.css";
import "../style/formular.css";
import "../../svelte-dialogs.config"
import Header from "#components/design/header/AusweisHeader_partner.astro";
import AusweisHeaderPartner from "#components/design/header/AusweisHeaderPartner.astro";
import Footer from "#components/design/footer/Footer.astro";
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui";
export interface Props {
title: string;
tabHover1: string;
tabHover2: string;
tabHover3: string;
tabHover4: string;
tabHover5: string;
tabHover6: string;
tabHover7: string;
tab: number;
}
const { title } = Astro.props;
const { tabHover1 } = Astro.props;
const { tabHover2 } = Astro.props;
const { tabHover3 } = Astro.props;
const { tabHover4 } = Astro.props;
const { tabHover5 } = Astro.props;
const { tabHover6 } = Astro.props;
const { tabHover7 } = Astro.props;
const { title, tab } = Astro.props;
---
<script>
@@ -143,7 +128,7 @@ window.addEventListener("scroll", () => {
<body>
<Header {tabHover1} {tabHover2} {tabHover3} {tabHover4} {tabHover5} {tabHover6} {tabHover7}/>
<AusweisHeaderPartner {tab}/>
<main class="w-full p-0 grid grid-cols-1 rounded-none">

10
src/pages/[partner]/energieausweis-erstellen/[ausweisart]/index.astro
View File

@@ -1,5 +1,5 @@
---
import AusweisLayout from "#layouts/AusweisLayoutDaten.astro";
import AusweisLayoutDatenPartner from "#layouts/AusweisLayoutDatenPartner.astro";
import VerbrauchsausweisWohnenModule from "#modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte";
import {
Aufnahme,
@@ -209,7 +209,11 @@ if (typ === AusstellungsTyp.Neuausstellung) {
}
---
<AusweisLayout title="Verbrauchsausweis erstellen">
<AusweisLayoutDatenPartner title="Verbrauchsausweis erstellen" tab={
ausweisart === "verbrauchsausweis-wohngebaeude" ? 0 :
ausweisart === "verbrauchsausweis-gewerbe" ? 1 :
ausweisart === "bedarfsausweis-wohngebaeude" ? 2 : 0
}>
{
ausweisart === "verbrauchsausweis-wohngebaeude" && (
<VerbrauchsausweisWohnenModule
@@ -258,4 +262,4 @@ if (typ === AusstellungsTyp.Neuausstellung) {
/>
)
}
</AusweisLayout>
</AusweisLayoutDatenPartner>