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

Formular

Browse Source
This commit is contained in:
Robert Jagtiani
2024-12-10 01:59:35 +01:00
parent a058150bf4
commit bc1b2cef90
19 changed files with 694 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/components/Ausweis/Ausweisart.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import HelpLabel from "#components/HelpLabel.svelte";
import Label from "#components/Label.svelte";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
import TagInput from "../TagInput.svelte";
@@ -16,142 +17,165 @@
</script>
<div class="GRB">
<!-- Anlass für Energieausweis -->
<div class="flex flex-col">
<span>Anlass für Energieausweis * </span>
<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
<div class="w-full grid
grid-cols-bereich-A gap-x-4
xl:grid-cols-bereich-A-xl xl:gap-x-6
2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
">
<!-- Anlass für Energieausweis -->
<div class="">
<Label>* Anlass für den Energieausweis</Label>
<div class="grid gap-x-6 mb-8
grid-cols-[minmax(min-content,_130px)]
xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0
2xl:grid-cols-[1fr_1fr_1fr]
">
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<label class="radio-inline">
<input
name="ausstellgrund"
type="radio"
class="radio radio-secondary"
value={ausstellgrund}
bind:group={ausweis.ausstellgrund}
/>{name}</label
>
{/each}
</div>
</div>
<label class="radio-inline">
<input
name="ausstellgrund"
type="radio"
value={ausstellgrund}
bind:group={ausweis.ausstellgrund}
/>{name}</label
>
{/each}
</div>
</div>
<!-- Baujahr Heizung -->
<div class="form-group col-md-2">
<HelpLabel title="Baujahr Heizung *">
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
<div>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
</div>
</div>
<div class="grid grid-cols-1 gap-x-4
md:grid-cols-2 md:gap-x-6
2xl:grid-cols-4 2xl:gap-x-6
">
<!-- Baujahr -->
<div class="form-group col-md-2">
<HelpLabel title="Baujahr Gebäude *">
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
<div>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
</div>
</div>
<!-- Baujahr Heizung -->
<div class="">
<HelpLabel title="* Baujahr Heizung">
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
<div>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<div class="form-group col-md-2">
<HelpLabel title="Anzahl Wohnungen *">
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
<div>
<input
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
maxlength="3"
/>
</div>
</div>
<!-- Dachgeschoss -->
<div class="form-group col-md-2">
<HelpLabel title="Sanierungsstatus *">
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
<div>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
</div>
<!-- Baujahr -->
<div class="">
<HelpLabel title="* Baujahr Gebäude">
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
<div>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
</div>
</div>
<style>
<!-- Anzahl der Wohnungen -->
<div class="">
<HelpLabel title="* Anzahl Wohnungen">
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
<div>
<input
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
maxlength="3"
/>
</div>
</div>
input[type="radio"] {
@apply w-5 h-5 rounded-full;
<!-- Sanierungsstatus -->
<div class="">
<HelpLabel title="* Sanierungsstatus">
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
<div>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
</div>
</div>
</div>
</div>
<style lang="postcss">
input[type="radio"] {
@apply w-5 h-5 accent-secondary
}
.radio-inline {

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

@@ -3,7 +3,7 @@
</script>
<div>
<button type="button" class="button" on:click={() => (showHelp = !showHelp)}
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
>Hilfe anfordern</button
>

402
src/components/Ausweis/Verbrauch.svelte
View File

@@ -64,25 +64,158 @@
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
</script>
<div class="w-full flex flex-col gap-4">
<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
<div>
<div>
<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
<input
type="checkbox"
class="checkbox w-[20px] h-[20px] self-center -mt-1"
name="zusaetzliche_heizquelle"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<div class="w-[150px]">
<HelpLabel title="zusätzliche Heizquelle">
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
Verbrauchszeiträume wie bei der primären Heizung verwendet
werden.
</HelpLabel>
<input
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
</div>
</div>
<input class="hidden xl:invisible xl:block"/>
<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
<div></div>
<span>Zeitraum:</span>
</div>
<div>
<HelpLabel title="Brennstoff *">
<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
<span class="">von</span>
<select
name="energieverbrauch_zeitraum_monat"
class="rounded-tr-none rounded-br-none w-full m-0"
bind:value={month}
required
>
<option>Monat</option>
{#if year !== null}
{#each availableDates.filter(date => date.year == year) as date}
<option value={date.month}>{monthNames[date.month]}</option>
{/each}
{:else}
{#each Array.from(availableDates.reduce((a,c) => {
a.add(c.month);
return a;
}, new Set())) as month}
<option value={month}>{monthNames[month]}</option>
{/each}
{/if}
</select>
<select
name="energieverbrauch_zeitraum_jahr"
class="rounded-tl-none rounded-bl-none w-full m-0"
bind:value={year}
required
>
<option>Jahr</option>
{#each Array.from(availableDates.reduce((a,c) => {
a.add(c.year);
return a;
}, new Set())) as year}
<option value={year}>{year}</option>
{/each}
</select>
<span class="">bis</span>
<input
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
</div>
<div class="invisible">
<span>leer</span>
</div>
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
<div></div>
<span class="justify-self-center">von</span>
<input
class="klima text-right"
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
<span class="justify-self-center">bis</span>
<input
value={moment(ausweis.startdatum)
.add("2", "years")
.format("MM.Y")}
readonly
/>
</div>
<div class="invisible">
<span>leer</span>
</div>
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
<div></div>
<span class="justify-self-center">von</span>
<input
class="klima text-right"
value={moment(ausweis.startdatum)
.add("2", "years")
.format("MM.Y")}
readonly
/>
<span class="justify-self-center">bis</span>
<input
value={moment(ausweis.startdatum)
.add("3", "years")
.format("MM.Y")}
readonly
/>
</div>
</div>
<div class="grid grid-cols-2 gap-x-6">
<div>
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
<div>
<HelpLabel title="* Brennstoff">
<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
@@ -109,39 +242,92 @@
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
<div>
<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
<select
class="rounded-e-none"
name="brennstoff_1"
required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
>
<option disabled>Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
</div>
</div>
</div>
<div>
<HelpLabel title="Einheit *">
<div>
<HelpLabel title="* Einheit">
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
vor. Pellets oder Brennholz in SRm (Schüttraummetern).
</HelpLabel>
<div>
<select
<select
class="rounded-s-none"
name="einheit_1"
required
bind:value={ausweis.einheit_1}
bind:value={ausweis.einheit_1}
>
<option disabled>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
</div>
</div>
</select>
</div>
<div>
<Label>Brennstoff *</Label>
<div>
</div>
<div>
<span>* Verbrauch</span>
<input
name="verbrauch_1"
type="number"
class:linked={abweichung.indexOf(1) > -1}
bind:value={ausweis.verbrauch_1}
required
/>
<span>* Verbrauch</span>
<input
name="verbrauch_2"
type="number"
class:linked={abweichung.indexOf(2) > -1}
bind:value={ausweis.verbrauch_2}
required
/>
<span>* Verbrauch</span>
<input
name="verbrauch_3"
type="number"
class:linked={abweichung.indexOf(3) > -1}
bind:value={ausweis.verbrauch_3}
required
/>
</div>
</div>
<div>
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
<div>
<Label>* Brennstoff</Label>
<select
class="rounded-e-none"
name="brennstoff_2"
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
disabled={!ausweis.zusaetzliche_heizquelle}
@@ -152,13 +338,14 @@
<option value={fuel}>{fuel}</option>
{/each}
</select>
</div>
</div>
</div>
<div>
<Label>* Einheit</Label>
<div>
<Label>Einheit *</Label>
<div>
<select
class="rounded-s-none"
name="einheit_2"
disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.einheit_2}
@@ -168,138 +355,14 @@
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
</div>
</div>
</select>
</div>
<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
<div class="flex flex-col gap-2">
<div class="column">
<span>von</span>
<select
name="energieverbrauch_zeitraum_monat"
class="rounded-tr-none rounded-br-none w-full m-0"
bind:value={month}
required
>
<option>auswählen</option>
{#if year !== null}
{#each availableDates.filter(date => date.year == year) as date}
<option value={date.month}>{monthNames[date.month]}</option>
{/each}
{:else}
{#each Array.from(availableDates.reduce((a,c) => {
a.add(c.month);
return a;
}, new Set())) as month}
<option value={month}>{monthNames[month]}</option>
{/each}
{/if}
</select>
</div>
<div>
<select
name="energieverbrauch_zeitraum_jahr"
class="rounded-tl-none rounded-bl-none w-full m-0"
bind:value={year}
required
>
<option>auswählen</option>
{#each Array.from(availableDates.reduce((a,c) => {
a.add(c.year);
return a;
}, new Set())) as year}
<option value={year}>{year}</option>
{/each}
</select>
</div>
<div class="column">
<span>von</span>
<input
class="klima"
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
</div>
<div class="column">
<span>von</span>
<input
class="klima"
value={moment(ausweis.startdatum)
.add("2", "years")
.format("MM.Y")}
readonly
/>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="column">
<span>bis</span>
<input
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
</div>
<div class="column">
<span>bis</span>
<input
value={moment(ausweis.startdatum)
.add("2", "years")
.format("MM.Y")}
readonly
/>
</div>
<div class="column">
<span>bis</span>
<input
value={moment(ausweis.startdatum)
.add("3", "years")
.format("MM.Y")}
readonly
/>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="column">
<span>Verbrauch *</span>
<input
name="verbrauch_1"
type="number"
class:linked={abweichung.indexOf(1) > -1}
bind:value={ausweis.verbrauch_1}
required
/>
</div>
<div class="column">
<span>Verbrauch *</span>
<input
name="verbrauch_2"
type="number"
class:linked={abweichung.indexOf(2) > -1}
bind:value={ausweis.verbrauch_2}
required
/>
</div>
<div class="column">
<span>Verbrauch *</span>
<input
name="verbrauch_3"
type="number"
class:linked={abweichung.indexOf(3) > -1}
bind:value={ausweis.verbrauch_3}
required
/>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="column">
<span>Verbrauch</span>
<input
name="verbrauch_4"
@@ -308,8 +371,7 @@
class:linked={abweichung.indexOf(4) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
<div class="column">
<span>Verbrauch</span>
<input
name="verbrauch_5"
@@ -318,8 +380,7 @@
class:linked={abweichung.indexOf(5) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
<div class="column">
<span>Verbrauch</span>
<input
name="verbrauch_6"
@@ -328,13 +389,18 @@
class:linked={abweichung.indexOf(6) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
</div>
</div>
</div>
<style>
.column {
@apply flex flex-row items-center gap-4;
}
</div>
<style lang="postcss">
input[type="checkbox"] {@apply accent-secondary}
</style>

21
src/components/BereichLabel.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
export let title: string;
export let bereich: string = "";
</script>
<div class="bereichs-label">
<label class="text-base-content" for={title}>
<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
<div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div>
</div>
</label>
</div>
<style lang="postcss">
.bereichs-label{ }
label{@apply [font-size:_clamp(15px,1vw,36px)]}
</style>

19
src/components/HelpLabel.svelte
View File

@@ -3,9 +3,10 @@
export let tooltip: string = "";
</script>
<div class="flex flex-row justify-between mb-2">
<label class="text-base-content">{title}</label>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
<div class="grid grid-cols-2 mt-[5px]">
<label>{title}</label>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
<img
src="/images/question-mark.png"
alt="?"
@@ -13,18 +14,22 @@
/>
<div class="tooltip">
<slot></slot>
<div id="arrow" class="invisible absolute h-3 w-3 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
</div>
</div>
</div>
<style>
<style lang="postcss">
label {
@apply text-base font-medium;
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
[font-size:_clamp(15px,1rem,10px)]
}
.tooltip {
@apply absolute -right-1 max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
@apply absolute -right-1 max-w-[480px] w-max break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
}
.tooltip-opener:hover .tooltip {

13
src/components/Label.svelte
View File

@@ -2,6 +2,13 @@
export let name: string = "";
</script>
<div class="flex flex-row justify-between items-center gap-4 mb-2">
<label class="text-base font-medium" for={name}><slot></slot></label>
</div>
<div class="h-[26.5px] mt-[5px]">
<label for={name}><slot></slot></label>
</div>
<style lang="postcss">
label {
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
[font-size:_clamp(15px,1rem,10px)]
}
</style>

2
src/components/PlzSuche.svelte
View File

@@ -50,7 +50,7 @@
<div class="relative" use:clickOutside={() => {
hideZipDropdown = true;
}}>
<Label name={name}>PLZ *</Label>
<input
name={name}
id={name}

83
src/components/design/header/Header.astro
View File

@@ -4,73 +4,64 @@ import Login from "#sidebarCards/card-login.svelte";
<header>
<div class="max-w-[1920px] w-full grid relative bg-white
<div class="grid relative bg-white items-center gap-4 pt-4 px-0
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
grid-cols-1
sm:grid-cols-1
md:grid-cols-1
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-4 lg:py-4
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-6 xl:py-4
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-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">
<!---
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
<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 class="self-start justify-self-start">
<a href="/">
<img 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 class="text-secondary justify-self-center
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[110px_auto] gap-6 pt-[0px]">
<div class="self-start justify-self-start">
<a href="/">
<img class="w-full absolute top-2 left-6 max-w-[94px]"
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
</a>
</div>
<div class="self-center justify-self-start mt-[10px]">
<div class="text-secondary
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 class="text-primary
<div 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] pl-[1px]">
xl:leading-[0.5rem]">
Energieausweise nach aktuellem GEG</div>
</div>
</div>
</div>
<div class="w-full justify-self-center">
<Login client:load />
</div>
</div>
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
<Login client:load />
</div>
</div>

33
src/components/design/sidebars/cards/card-login.svelte
View File

@@ -22,16 +22,12 @@
let errorHidden = true;
</script>
<div
id="card-login">
<div>
<div 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" >
<form on:submit={login}>
<div class="grid grid-cols-[1fr_1fr] gap-2">
<form on:submit={login}>
<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
<input
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
class="my-1 rounded-md px-2 py-1 w-full"
type="text"
placeholder="nutzer@email.com"
name="email"
@@ -40,7 +36,7 @@
required
/>
<input
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
class="my-1 rounded-md px-2 py-1 w-full"
type="password"
minlength="8"
placeholder="********"
@@ -55,9 +51,15 @@
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
</div>
{/if}
<button class="button self-center" type="submit">login</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
</div>
<div class="grid grid-cols-[3fr_2fr] gap-2">
<div class="w-full text-left self-center">
<a
@@ -70,16 +72,11 @@
>
</div>
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
</div>
</form>
</form>
<div></div>
</div>
</div>
<style lang="postcss">

15
src/components/design/sidebars/cards/card-navigation.svelte
View File

@@ -85,7 +85,7 @@ if(innerWidth>1024){
<div class="hamburger_menu py-1 px-2 bg-secondary
xs:px-6
xs:px-4
lg:hidden">
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
@@ -97,7 +97,7 @@ if(innerWidth>1024){
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block">
<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block">
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
@@ -192,18 +192,7 @@ if(innerWidth>1024){
<style lang="scss">
.nav-element-child{@apply before:bg-primary/50 before:rotate-[45deg];}
.nav-element-child:hover{@apply before:bg-white;}
.nav-element-child:before{
position:absolute;
content:' ';
top:22px;
left:10px;
width:5px;
height:5px;
border-radius:0%;
}
.dd-symbol::before{

14
src/components/design/sidebars/cards/card-price-info.svelte
View File

@@ -6,27 +6,27 @@
class=" box card hidden bg-white px-6 py-4 mt-5
lg:block">
<div class="grid grid-cols-[max-content]">
<div class="">
<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>
<p>ab&nbsp;{PRICES.VerbrauchsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Bedarfsausweis Wohngebäude</p>
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
<p>ab&nbsp;{PRICES.BedarfsausweisWohnen[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Verbrauchsausweis Gewerbe</p>
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
<p>ab&nbsp;{PRICES.VerbrauchsausweisGewerbe[0]}€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>Bedarfsausweis Gewerbe</p>
<p>ab 300€ inkl. MwSt.</p>
<p>ab&nbsp;300€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>GEG-Nachweis Wohngebäude</p>
<p>ab 400€ inkl. MwSt.</p>
<p>ab&nbsp;400€&nbsp;inkl.&nbsp;MwSt.</p>
<hr>
<p>GEG-Nachweis Gewerbe</p>
<p>ab 450€ inkl. MwSt.</p>
<p>ab&nbsp;450€ inkl.&nbsp;MwSt.</p>
<hr class="mt-2">

2
src/components/design/sidebars/left/SidebarLeft.astro
View File

@@ -4,7 +4,7 @@ import Preistabelle from "#sidebarCards/card-price-info.svelte";
---
<div class="flex flex-col grow">
<div class="">
<Navigation client:load />