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

Merge pull request #268 from IBCornelsen/main

Browse Source 
Seite Widget extern
This commit is contained in:
Jens Cornelsen
2025-01-03 13:45:54 +01:00
committed by GitHub
parent 97e7da6e46 48099fed20
commit 8202c697e6
22 changed files with 468 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/images/header/logo-IBC-white.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 143.6 163.3">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: #dae6f7;
}
</style>
</defs>
<path class="cls-1" d="M18.1,143.8H3.7V62.5h14.4v81.2h0v.1Z"/>
<path class="cls-1" d="M84.8,127.2c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2h0ZM70.5,91.2v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0v-.1ZM70.5,124.6v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0v-.1Z"/>
<path class="cls-1" d="M18.1,76.9v-14.4h3.7v14.4h-3.7Z"/>
<path class="cls-1" d="M0,76.9v-14.4h3.7v14.4H0Z"/>
<path class="cls-1" d="M18.1,143.8v-14.4h3.7v14.4h-3.7Z"/>
<path class="cls-1" d="M0,143.8v-14.4h3.7v14.4H0Z"/>
<path class="cls-2" d="M125,129.4h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7s-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7v.2h0Z"/>
<polygon class="cls-1" points="90.9 13.6 71.8 0 52.7 13.6 0 51.6 19.2 51.6 71.8 13.6 124.4 51.6 143.5 51.6 90.9 13.6"/>
<path class="cls-1" d="M.2,163.3v-9.3h143.4v9.3H.2Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

35
src/components/Ausweis/ButtonSpaeterHilfe.svelte
View File

@@ -6,23 +6,26 @@
<!-- Später weitermachen / Hilfe anfordern --> <!-- Später weitermachen / Hilfe anfordern -->
<div
class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
grid-cols-1
xs:grid-cols-2
"
>
<div class="md:justify-self-start">
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
</div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<div class="mt-2 px-4">
<button class="button" on:click={automatischAusfüllen} type="button" <div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
>Automatisch Ausfüllen
<div></div>
<button class="invisible button" on:click={automatischAusfüllen} type="button"
>Automatisch Ausfüllen
</button> </button>
<Hilfe />
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
</div> </div>

37
src/components/Ausweis/ButtonWeiterHilfe.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import AusweisWeiter from "#modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte";
export let ausweis;
export let images;
export let user;
export let gebaeude;
export let gebaeude_aufnahme_allgemein;
export let spaeterWeitermachen;
</script>
<div class="grid grid-cols-[1fr_min-content_min-content_min-content] grid-rows-[min_content_1fr] gap-x-2 self-start justify-self-end mt-8">
<div></div>
<Hilfe />
<button class="button" type="button" on:click={spaeterWeitermachen}
>Später Weitermachen
</button>
<div class="">
<AusweisWeiter
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
></AusweisWeiter>
</div>
</div>

2
src/components/Ausweis/HeizungImage.svelte
View File

@@ -10,7 +10,7 @@
<div class="grid grid-cols-2 gap-x-6 mt-6"> <div class="grid grid-cols-2 gap-x-6 mt-6">
<div class="box card mb-0"> <div id="getWidth" class="box card mb-0">
<p class="font-bold mb-2"> <p class="font-bold mb-2">

107
src/components/Ausweis/Hilfe.svelte
View File

@@ -1,15 +1,24 @@
<script lang="ts"> <script lang="ts">
import { PRICES } from "#lib/constants";
let showHelp: boolean = false; let showHelp: boolean = false;
</script> </script>
<div> <div>
<button class="button" type="button" on:click={() => (showHelp = !showHelp)} <button class="button" type="button" on:click={() => (showHelp = !showHelp)}
>Hilfe anfordern</button >Hilfe anfordern</button>
> </div>
{#if showHelp} {#if showHelp}
<div> <div class="col-start-1 row-start-2 col-span-4 mt-4">
<div>
<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 Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
haben. Kurze Fragen zum Formular oder der Ausweisart werden haben. Kurze Fragen zum Formular oder der Ausweisart werden
kostenfrei telefonisch unter <a href="tel:+4940209339850" kostenfrei telefonisch unter <a href="tel:+4940209339850"
@@ -20,41 +29,61 @@
Auswahl und klicken auf weiter: Auswahl und klicken auf weiter:
</div> </div>
<div class="flex flex-row justify-between mx-4 my-2"> <hr class="m-0">
<div class="form-group col-md-7">
Verbrauchsausweis online inkl. ausführlicher telefonischer <div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
Beratung für 60 € inkl. MwSt.
</div> <input
<div class="form-group col-md-5"> type="radio"
<input class=" accent-secondary w-[20px] h-[20px]"
type="radio" id="Produkttb1"
class="IGanlass" value="ptb"
id="Produkttb1" name="Produkt"
value="ptb" />
name="Produkt"
/> <div class="justify-self-stretch">
</div> Verbrauchsausweis online inkl. ausführlicher telefonischer Beratung
</div> </div>
<div class="flex flex-row justify-between mx-4 my-2">
<div class="form-group col-md-7"> <div class="text-right">
Verbrauchsausweis offline für 180 € inkl. MwSt. (Sie <b>{PRICES.VerbrauchsausweisWohnen[1]} €</b> inkl. MwSt.
schicken uns 3 Verbrauchsabrechnungen zu) </div>
</div>
<div class="form-group col-md-5">
<input
type="radio"
class="IGanlass"
id="Produktof1"
value="pof"
name="Produkt"
/>
</div>
</div>
<div style="text-align:right;">
<button>Weiter</button>
</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="pof"
name="Produkt"
/>
<div>
Verbrauchsausweis offline (Sie schicken uns 3 Verbrauchsabrechnungen zu)
</div>
<div class="text-right">
<b>{PRICES.VerbrauchsausweisWohnen[2]} €</b> inkl. MwSt.
</div>
</div>
<hr class="m-0">
<button class="button">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}
</div> </div>
{/if}

7
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -78,9 +78,8 @@
})(); })();
} }
</script> </script>
<div class="self-center relative">
<img id="skalaImage" class="w-full" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
<ThickArrowDown <ThickArrowDown
size={28} size={28}
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out" class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
@@ -103,4 +102,4 @@
100 100
)}%)" )}%)"
/> />
</div>

50
src/components/Ausweis/Progressbar.svelte
View File

@@ -3,33 +3,39 @@
</script> </script>
<div class="progress-section">
<div class="w-full bg-gray-100 absolute h-3 rounded-lg"> <div class="grid grid-cols-3 self-start">
<div class="col-span-3 relative">
<div class="w-[calc(100%-5rem)] ml-[2.5rem] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg">
<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div> <div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
</div> </div>
<span>1</span>
<span>2</span> </div>
<span>3</span>
</div>
<div class="flex flex-row justify-between"> <div class="phase justify-self-start">
<div>Gebäudedaten</div> <div class="point">1</div>
<div>Prüfung</div> <div class="">Gebäudedaten</div>
<div>Kaufabschluss</div> </div>
</div>
<div class="phase">
<div class="point">2</div>
<div class="">Prüfung</div>
</div>
<div class="phase justify-self-end">
<div class="point">3</div>
<div class="">Kaufabschluss</div>
</div>
</div>
<style>
.progress-section {
@apply relative items-center flex flex-row justify-between px-0;
}
.progress-section span { <style lang="postcss">
@apply rounded-full bg-green-600 items-center relative flex h-8 w-8 justify-center text-white font-semibold; .phase{@apply grid grid-cols-1 items-center justify-items-center z-10;
} .point{@apply rounded-full w-8 h-8 text-white font-bold bg-secondary text-center pt-1 ring-white ring-4;}
}
p {
padding: 0 !important;
@apply p-0;
}
</style> </style>

86
src/components/design/header/AusweisHeader.astro Normal file
View File

@@ -0,0 +1,86 @@
---
import HeaderLogin from "#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>

4
src/components/design/header/HeaderLogin.svelte
View File

@@ -22,7 +22,7 @@
<div <div
id="card-login" id="card-login"
class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2" class="rounded-none lg:rounded-lg lg:card lg:box lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
> >
<form on:submit={login}> <form on:submit={login}>
<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2"> <div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
@@ -62,7 +62,7 @@
</div> </div>
{/if} {/if}
<button class="button self-center" type="submit">login</button> <button id="LoginButton" class="button self-center" type="submit">login</button>
</div> </div>
<div <div

68
src/components/design/header/Header_1.astro
View File

@@ -1,68 +0,0 @@
<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>

2
src/components/design/sidebars/cards/cardLogin.svelte
View File

@@ -87,7 +87,7 @@
> >
</div> </div>
<div></div>
</div> </div>
</div> </div>

4
src/components/labels/BereichLabel.svelte
View File

@@ -27,8 +27,9 @@
> >
<div class="formular-abschnitt1">{bereich}</div> <div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div> <div class="formular-abschnitt2"><slot></slot></div>
<div <div
class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none" class="justify-self-center self-center mr-[2px] cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
on:click={toggleBereich} on:click={toggleBereich}
> >
{#if open} {#if open}
@@ -36,6 +37,7 @@
{:else} {:else}
+ +
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>

10
src/components/widgets/WelcherAusweisWidget.svelte
View File

@@ -162,7 +162,7 @@
<WidgetCardTemplate <WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude" name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]} price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/right-sidebar/UMBE_wohngebaeude.svg" src="/images/right-sidebar/wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis" alt="Wohnhaus Verbrauchsausweis"
variant="einfach" variant="einfach"
services={[ services={[
@@ -185,7 +185,7 @@
<WidgetCardTemplate <WidgetCardTemplate
name="Bedarfsausweis Wohngebäude" name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]} price={PRICES.BedarfsausweisWohnen[0]}
src="/images/right-sidebar/UMBE_wohngebaeude.svg" src="/images/right-sidebar/wohngebaeude.svg"
alt="Wohnhaus Bedarfsausweis" alt="Wohnhaus Bedarfsausweis"
variant="fundiert (empfohlen)" variant="fundiert (empfohlen)"
services={[ services={[
@@ -208,7 +208,7 @@
<WidgetCardTemplate <WidgetCardTemplate
name="Verbrauchsausweis Gewerbe" name="Verbrauchsausweis Gewerbe"
price={PRICES.VerbrauchsausweisGewerbe[0]} price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Verbrauchsausweis" alt="Gewerbe Verbrauchsausweis"
variant="einfach" variant="einfach"
services={[ services={[
@@ -232,7 +232,7 @@
<WidgetCardTemplate <WidgetCardTemplate
name="GEG-Nachweis Gewerbe" name="GEG-Nachweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]} price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis" alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage" variant="Bauvorlage"
services={[ services={[
@@ -256,7 +256,7 @@
<WidgetCardTemplate <WidgetCardTemplate
name="Bedarfsausweis Gewerbe" name="Bedarfsausweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]} price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis" alt="Gewerbe Bedarfsausweis"
variant="fundiert (empfohlen)" variant="fundiert (empfohlen)"
services={[ services={[

46
src/layouts/AusweisLayout.astro
View File

@@ -2,7 +2,7 @@
import "../style/global.css"; import "../style/global.css";
import "../style/formular.css"; import "../style/formular.css";
import "../../svelte-dialogs.config" import "../../svelte-dialogs.config"
import Header from "#header/Header.astro"; import Header from "#header/AusweisHeader.astro";
import Footer from "#footer/Footer.astro"; import Footer from "#footer/Footer.astro";
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro"; import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
import { NotificationWrapper } from "@ibcornelsen/ui"; import { NotificationWrapper } from "@ibcornelsen/ui";
@@ -12,9 +12,49 @@ export interface Props {
} }
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<script>
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";
document.getElementById('performance-box').style.maxWidth = "688.5px";
document.getElementById('progress-box').style.maxWidth = "688.5px";
document.getElementById('formInput')?.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')?.classList.remove('2xl:mt-[370px]');
}
});
</script>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">

30
src/layouts/Layout.astro
View File

@@ -15,6 +15,7 @@ const { title } = Astro.props;
--- ---
<script> <script>
/*
window.addEventListener("scroll", (event) => { window.addEventListener("scroll", (event) => {
let scroll = window.scrollY; let scroll = window.scrollY;
@@ -25,19 +26,20 @@ window.addEventListener("scroll", (event) => {
document.getElementById('header').style.width = '100%'; document.getElementById('header').style.width = '100%';
document.getElementById('header').style.top = '0'; document.getElementById('header').style.top = '0';
document.getElementById('header-grid')?.classList.add('2xl:py-0'); document.getElementById('header-grid').classList.add('2xl:py-0');
document.getElementById('header-grid')?.classList.remove('2xl:py-4') document.getElementById('header-grid').classList.remove('2xl:py-4')
document.getElementById('header-grid')?.classList.remove('bg-white'); document.getElementById('header-grid').classList.remove('bg-white');
document.getElementById('header-grid')?.classList.add('bg-secondary'); document.getElementById('header-grid').classList.add('bg-secondary');
document.getElementById('header-text-1')?.classList.add('text-white'); document.getElementById('header-text-1').classList.add('hidden');
document.getElementById('header-text-1')?.classList.add('hidden'); document.getElementById('header-text-2').classList.add('hidden');
document.getElementById('header-text-2')?.classList.add('hidden'); document.getElementById('header-line').classList.add('xl:h-[6px]');
document.getElementById('header-line')?.classList.add('xl:h-[6px]'); document.getElementById('header-logo').src= '/images/header/logo-IBC-white.svg';
document.getElementById('header-logo').style.height = '62px'; document.getElementById('header-logo').style.height = '62px';
document.getElementById('header-logo')?.classList.add('xl:bg-white','xl:px-2'); document.getElementById('header-logo').classList.add('xl:px-2','py-[5px]');
; ;
document.getElementById('card-login')?.classList.remove('lg:ring-2'); document.getElementById('card-login').classList.remove('lg:ring-2','box');
document.getElementById('LoginButton')?.classList.add('ring-[1px]','ring-white');
document.getElementById('passwort-vergessen')?.classList.add('hidden'); document.getElementById('passwort-vergessen')?.classList.add('hidden');
document.getElementById('main').style.marginTop = '211px'; document.getElementById('main').style.marginTop = '211px';
@@ -53,15 +55,17 @@ window.addEventListener("scroll", (event) => {
document.getElementById('header-grid')?.classList.add('bg-white'); document.getElementById('header-grid')?.classList.add('bg-white');
document.getElementById('header-grid')?.classList.remove('bg-secondary'); document.getElementById('header-grid')?.classList.remove('bg-secondary');
document.getElementById('header-text-1').classList.remove('hidden');
document.getElementById('header-text-1')?.classList.remove('text-white'); document.getElementById('header-text-1')?.classList.remove('text-white');
document.getElementById('header-text-1')?.classList.remove('hidden'); document.getElementById('header-text-1').classList.add('xl:leading-[4.5rem]');
document.getElementById('header-text-2')?.classList.remove('hidden'); document.getElementById('header-text-2')?.classList.remove('hidden');
document.getElementById('header-line')?.classList.remove('xl:h-[6px]'); document.getElementById('header-line')?.classList.remove('xl:h-[6px]');
document.getElementById('header-logo').src= '/images/header/logo-IBC-big.svg';
document.getElementById('header-logo').style.height = '107.53px'; document.getElementById('header-logo').style.height = '107.53px';
document.getElementById('header-logo')?.classList.remove('xl:bg-white','xl:px-2'); document.getElementById('header-logo')?.classList.remove('xl:bg-white','xl:px-2');
document.getElementById('card-login')?.classList.add('lg:ring-2'); document.getElementById('card-login')?.classList.add('lg:ring-2');
document.getElementById('LoginButton')?.classList.remove('ring-[1px]','ring-white');
document.getElementById('passwort-vergessen')?.classList.remove('hidden'); document.getElementById('passwort-vergessen')?.classList.remove('hidden');
document.getElementById('main').style.marginTop = '0px'; document.getElementById('main').style.marginTop = '0px';
@@ -70,7 +74,7 @@ window.addEventListener("scroll", (event) => {
}); });
*/
</script> </script>
<!DOCTYPE html> <!DOCTYPE html>

44
src/layouts/WidgetLayout.astro Normal file
View File

@@ -0,0 +1,44 @@
---
import "../style/global.css";
import "../../svelte-dialogs.config"
import { NotificationWrapper } from "@ibcornelsen/ui";
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
<meta
name="description"
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
/>
<title>
{title || "Energieausweis online erstellen - Online Energieausweis"}
</title>
</head>
<body>
<main id="main"
class="w-full p-0">
<article>
<slot />
</article>
</main>
</body>
</html>

78
src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte"; import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
import Progressbar from "#components/Ausweis/Progressbar.svelte"; import Progressbar from "#components/Ausweis/Progressbar.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte"; //import Hilfe from "#components/Ausweis/Hilfe.svelte";
import { PRICES } from "#lib/constants";
import Bereich from "#labels/Bereich.svelte"; import Bereich from "#labels/Bereich.svelte";
//import HelpLabel from "#labels/HelpLabel.svelte"; //import HelpLabel from "#labels/HelpLabel.svelte";
@@ -9,6 +10,7 @@
//import Label from "#components/Label.svelte"; //import Label from "#components/Label.svelte";
import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte"; import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
import ButtonWeiterHilfe from "#components/Ausweis/ButtonWeiterHilfe.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte"; import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte"; import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte"; import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
@@ -55,7 +57,7 @@
UploadedGebaeudeBild, UploadedGebaeudeBild,
} from "#components/Ausweis/types.js"; } from "#components/Ausweis/types.js";
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js"; import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
import AusweisWeiter from "./AusweisWeiter.svelte"; //import AusweisWeiter from "./AusweisWeiter.svelte";
import { Enums } from "@ibcornelsen/database/client"; import { Enums } from "@ibcornelsen/database/client";
import { OpenInNewWindow } from "radix-svelte-icons"; import { OpenInNewWindow } from "radix-svelte-icons";
@@ -181,26 +183,42 @@
</p> </p>
</Overlay> </Overlay>
<h1>Verbrauchsausweis erstellen - 45€</h1>
<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
<Progressbar progress={0} />
</div>
<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
<PerformanceScore
bind:ausweis <div id="skala" class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 p-4
bind:gebaeude_aufnahme_allgemein
bind:gebaeude 2xl:grid-cols-2 2xl:gap-x-8
/> ">
</div>
<div id="performance-box" class="w-full box relative px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
<PerformanceScore
bind:ausweis
bind:gebaeude_aufnahme_allgemein
bind:gebaeude
/>
</div> </div>
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} /> <div id="progress-box" class="w-full box relative px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
<h1 class="text-secondary text-3xl m-0">Energiesausweis erstellen</h1>
<h2 class="text-primary text-xl">Verbrauchsausweis Wohnen {PRICES.VerbrauchsausweisWohnen[0]} €</h2>
<Progressbar progress={50}
/>
</div>
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis"> </div>
<form id="formInput" on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0"> <div id="formular-box" class="formular-boxen ring-0">
<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
<!-- A Prüfung der Ausweisart --> <!-- A Prüfung der Ausweisart -->
<Bereich bereich="A" title="Prüfung der Ausweisart"> <Bereich bereich="A" title="Prüfung der Ausweisart">
@@ -289,23 +307,19 @@
/></Bereich /></Bereich
> >
</div> </div>
<div
class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
grid-cols-1
xs:grid-cols-2"
>
<div class="md:justify-self-start">
<AusweisWeiter
bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
></AusweisWeiter>
</div>
<div class="md:justify-self-end"><Hilfe /></div> <ButtonWeiterHilfe {spaeterWeitermachen}
</div> bind:ausweis
bind:images
bind:user
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
>
</ButtonWeiterHilfe>
</form> </form>
<RawNotificationWrapper> <RawNotificationWrapper>

24
src/pages/geg/index.astro
View File

@@ -702,4 +702,28 @@ Wenn ein zu errichtendes Gebäude Wärme aus einer gemeinsamen Heizungsanlage be
Zusätzliche Wärmeverteil- und Warmwasserleitungen, die zur Verbindung der versorgten Gebäude verlegt werden, sind anteilig in die Berechnung der Wärmeverluste einzubeziehen. Zusätzliche Wärmeverteil- und Warmwasserleitungen, die zur Verbindung der versorgten Gebäude verlegt werden, sind anteilig in die Berechnung der Wärmeverluste einzubeziehen.
</p> </p>
<hr>
<h2>§ 28 Anrechnung mechanisch betriebener Lüftungsanlagen</h2>
<h3>(1) Voraussetzungen für die Anrechnung</h3>
<p>
Die Anrechnung der Wärmerückgewinnung oder einer regelungstechnisch verminderten Luftwechselrate bei mechanischen Lüftungsanlagen im Rahmen der Berechnung nach § 20 Absatz 1 oder 2 ist nur zulässig, wenn:
</p>
<ul>
<li>die Dichtheit des Gebäudes gemäß § 13 in Verbindung mit § 26 nachgewiesen ist,</li>
<li>die Lüftungsanlage über Einrichtungen verfügt, die eine Beeinflussung der Luftvolumenströme jeder Nutzeinheit durch den Nutzer ermöglichen, und</li>
<li>die aus der Abluft gewonnene Wärme vorrangig vor der vom Heizsystem bereitgestellten Wärme genutzt wird.</li>
</ul>
<h3>(2) Bestimmung der Kennwerte</h3>
<p>
Die bei der Anrechnung der Wärmerückgewinnung anzusetzenden Kennwerte der Lüftungsanlage müssen nach anerkannten Regeln der Technik ermittelt oder den allgemeinen bauaufsichtlichen Zulassungen der verwendeten Produkte entnommen werden.
</p>
<h3>(3) Ausnahme für kleine Wohngebäude</h3>
<p>
Für Wohngebäude mit nicht mehr als zwei Wohnungen, von denen eine nicht mehr als 50 Quadratmeter Gebäudenutzfläche hat, ist die Bedingung aus Absatz 1 Nummer 2 nicht anzuwenden.
</p>
</Layout> </Layout>

12
src/pages/widget/index.astro Normal file
View File

@@ -0,0 +1,12 @@
---
import Layout from "#layouts/WidgetLayout.astro";
import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
---
<Layout title="Welcher Energieausweis? - Widget">
<WelcherAusweisWidget client:load/>
</Layout>

4
src/style/formular.css
View File

@@ -1,10 +1,10 @@
#formular-box{@apply bg-white;} #formular-box{@apply bg-white;}
.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg} .formular-boxen{@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;} .formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] ml-[2px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
.formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start .formular-abschnitt2{@apply [font-size:_clamp(16px,1vw,28px)] pl-1 justify-self-start
md:[font-size:_clamp(20px,1.25vw,36px)] md:[font-size:_clamp(20px,1.25vw,36px)]

4
src/style/global.css
View File

@@ -44,7 +44,7 @@ body{
.button { .button {
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap @apply w-min h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
} }
@@ -69,7 +69,7 @@ input:disabled, input:read-only, select:disabled {
/*ARTICLE*/ /*ARTICLE*/
article { article {
@apply w-full relative bg-white px-0 py-0; @apply w-full relative bg-white px-0 py-0 z-0;
hr {@apply mb-4 mt-4 border-primary;} hr {@apply mb-4 mt-4 border-primary;}

3
tailwind.config.cjs
View File

@@ -45,7 +45,8 @@ module.exports = {
}, },
boxShadow: { boxShadow: {
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)', 'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)', 'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',
'skala': '0px 3px 3px rgba(0, 0, 0, 0.1)',
}, },
gridTemplateColumns: { gridTemplateColumns: {