responsive
This commit is contained in:
Robert Jagtiani
@@ -1,32 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
|
||||
<!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142) -->
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
display: none;
|
||||
fill: #878787;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
.cls-1 {
|
||||
fill: #445096;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
.cls-2 {
|
||||
fill: #c6c6c6;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5s3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7h.1Z"/>
|
||||
<g>
|
||||
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2h0Z"/>
|
||||
<path class="st1" d="M84.3,128c0,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.2ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0ZM70,125.4v-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.8h0Z"/>
|
||||
<path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
|
||||
<path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
|
||||
<path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
|
||||
<path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
|
||||
<path class="st2" d="M124.5,130.2h-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.2Z"/>
|
||||
<polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
|
||||
<path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
|
||||
</g>
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,5 +1,5 @@
|
||||
<?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">
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50.66mm" height="57.61mm" viewBox="0 0 143.6 163.3">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
@@ -12,7 +12,7 @@
|
||||
</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="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.8h0s0-.1,0-.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"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -79,8 +79,8 @@
|
||||
let loginOverlayHidden = true;
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-1 grid-rows-[min_content_1fr] gap-x-2 gap-y-1 self-start mt-0
|
||||
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt-8">
|
||||
<div class="grid grid-cols-1 gap-x-2 gap-y-1 self-start
|
||||
sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end">
|
||||
|
||||
<div></div>
|
||||
|
||||
@@ -90,85 +90,11 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
|
||||
>
|
||||
</div>
|
||||
|
||||
{#if showHelp}
|
||||
<div class="col-start-1 row-start-2 col-span-4 mt-4">
|
||||
<div
|
||||
class="bereich-box grid relative
|
||||
grid-cols-1 gap-x-4 gap-y-4
|
||||
|
||||
"
|
||||
>
|
||||
<div class="pr-12">
|
||||
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
|
||||
haben. Kurze Fragen zum Formular oder der Ausweisart werden
|
||||
kostenfrei telefonisch unter <a href="tel:+4940209339850"
|
||||
>040/209339850</a
|
||||
> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
|
||||
benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
|
||||
lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
|
||||
Auswahl und klicken auf weiter:
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px]"
|
||||
id="Produkttb1"
|
||||
value={Enums.AusweisTyp.Beratung}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="justify-self-stretch">
|
||||
Verbrauchsausweis online inkl. ausführlicher telefonischer
|
||||
Beratung
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[30px_490px_200px_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px]"
|
||||
id="Produktof1"
|
||||
value={Enums.AusweisTyp.Offline}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div>
|
||||
Verbrauchsausweis offline (Sie schicken uns 3
|
||||
Verbrauchsabrechnungen zu)
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
|
||||
|
||||
<button
|
||||
class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
|
||||
type="button"
|
||||
on:click={() => (showHelp = !showHelp)}>X</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
||||
>Später Weitermachen
|
||||
</button>
|
||||
|
||||
|
||||
{#if showWeiter}
|
||||
<div>
|
||||
<Overlay bind:hidden={loginOverlayHidden}>
|
||||
@@ -181,3 +107,76 @@ sm:grid-cols-[1fr_min-content_min-content_min-content] sm:justify-self-end sm:mt
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showHelp}
|
||||
<div class="w-full col-start-1 row-start-2 sm:row-start-2 col-span-4 mt-4">
|
||||
<div
|
||||
class="bereich-box w-full 2xl:w-[50%] xs:mx-auto grid relative
|
||||
grid-cols-1 gap-x-2 gap-y-4
|
||||
|
||||
"
|
||||
>
|
||||
<div class="pr-4 xs:pr-12">
|
||||
Gerne helfen wir Ihnen wenn Sie nicht weiterkommen oder Fragen
|
||||
haben. Kurze Fragen zum Formular oder der Ausweisart werden
|
||||
kostenfrei telefonisch unter <a href="tel:+4940209339850"
|
||||
>040/209339850</a
|
||||
> beantwortet (bis 5min). Sollten Sie Unterstützung bei der Erstellung
|
||||
benötgen oder lieber die Arbeit von unserem Ingenieurbüro erledigen
|
||||
lassen, bieten wir Ihnen folgende Hilfen an. Bitte treffen Sie Ihre
|
||||
Auswahl und klicken auf weiter:
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
||||
id="Produkttb1"
|
||||
value={Enums.AusweisTyp.Beratung}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="text-center xs:text-left justify-self-stretch">
|
||||
Verbrauchsausweis online<br>inkl. ausführlicher telefonischer
|
||||
Beratung
|
||||
</div>
|
||||
|
||||
<div class="text-center xs:text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Beratung]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 xs:grid-cols-[30px_1fr_1fr] items-center">
|
||||
<input
|
||||
type="radio"
|
||||
class=" accent-secondary w-[20px] h-[20px] mb-2 xs:mb-0 justify-self-center xs:justify-self-start"
|
||||
id="Produktof1"
|
||||
value={Enums.AusweisTyp.Offline}
|
||||
name="Produkt"
|
||||
bind:group={ausweistyp}
|
||||
/>
|
||||
|
||||
<div class="text-center xs:text-left justify-self-stretch">
|
||||
Verbrauchsausweis offline Sie schicken uns 3 Verbrauchsabrechnungen zu)
|
||||
</div>
|
||||
|
||||
<div class="text-center xs:text-right">
|
||||
<b>{PRICES[ausweisart][Enums.AusweisTyp.Offline]} €</b> inkl. MwSt.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="m-0" />
|
||||
|
||||
<button class="button" on:click={hilfeBestellen}>jetzt Hilfe bestellen</button>
|
||||
|
||||
<button
|
||||
class="button absolute top-2 right-2 w-[30px] h-[30px] text-sm p-0"
|
||||
type="button"
|
||||
on:click={() => (showHelp = !showHelp)}>X</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -83,6 +83,9 @@
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="performance-box" class="order-2 sm:order-1 w-full box relative px-0 sm:px-4 self-stretch grid grid-cols-1">
|
||||
|
||||
<div class="self-center relative">
|
||||
{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
|
||||
<img id="skalaImage" class="w-full" src="/images/formular/skala-verbrauchsausweis-wohnen.png" alt="Energieeffizienz Skala" />
|
||||
@@ -91,7 +94,7 @@
|
||||
{/if}
|
||||
<ThickArrowDown
|
||||
size={28}
|
||||
class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
|
||||
class="fill-base-content absolute -top-1 sm:top-4 transition-left duration-1000 ease-in-out"
|
||||
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
|
||||
translation_1,
|
||||
50,
|
||||
@@ -102,7 +105,7 @@
|
||||
/>
|
||||
<ThickArrowUp
|
||||
size={28}
|
||||
class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
|
||||
class="fill-base-content absolute -bottom-1 sm:bottom-4 transition-left duration-1000 ease-in-out"
|
||||
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
|
||||
translation_2,
|
||||
50,
|
||||
@@ -112,3 +115,6 @@
|
||||
)}%)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -6,8 +6,16 @@
|
||||
];
|
||||
export let active: number;
|
||||
export let progress: number = active / (steps.length - 1) * 100;
|
||||
export let ausweisart;
|
||||
|
||||
import { PRICES } from "#lib/constants.js";
|
||||
import { Enums } from "#lib/client/prisma.js";
|
||||
</script>
|
||||
|
||||
<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
||||
|
||||
<div class="grid grid-cols-3 self-start justify-between">
|
||||
<div class="col-span-3 relative">
|
||||
<div
|
||||
@@ -29,6 +37,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
|
||||
---
|
||||
|
||||
<header id="header">
|
||||
<header id="header" class="hidden sm:block">
|
||||
|
||||
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
|
||||
<div id="header-grid" class="grid relative bg-white items-end gap-x-4 pt-4 px-0
|
||||
|
||||
grid-cols-1
|
||||
sm:grid-cols-1
|
||||
@@ -14,16 +14,16 @@ lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
|
||||
|
||||
<div class="justify-self-center xs:justify-self-start">
|
||||
<div class="justify-self-start">
|
||||
|
||||
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||
<div class="w-full grid grid-cols-[48px_1fr] px-2 gap-2 gap-y-1 self-end
|
||||
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
||||
md:gap-y-4
|
||||
lg:px-0 lg:gap-x-4">
|
||||
|
||||
<div class="self-start justify-self-start">
|
||||
<div class="justify-self-start">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-full
|
||||
<img id="header-logo" class="w-full
|
||||
xs:max-w-[64px]
|
||||
sm:max-w-[64px]
|
||||
md:max-w-[64px] md:ml-6
|
||||
@@ -34,33 +34,39 @@ lg:px-0 lg:gap-x-4">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
<div class="self-end">
|
||||
|
||||
<div id="header-text-1"class="text-secondary justify-self-start
|
||||
[font-size:_clamp(16px,6vw,36px)]
|
||||
xs:[font-size:_clamp(15px,6vw,36px)] xs:justify-self-start xs:leading-[3.5rem]
|
||||
|
||||
<div id="header-text-1"class="text-secondary justify-self-center
|
||||
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||
lg:leading-[2rem]
|
||||
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
">
|
||||
Energieausweis online erstellen</div>
|
||||
|
||||
<div id="header-text-2"class="text-primary justify-self-center
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||
<div id="header-text-2"class="text-primary justify-self-start
|
||||
[font-size:_clamp(10px,4vw,22px)] leading-[10px]
|
||||
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[1rem]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem]">
|
||||
">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full justify-self-center">
|
||||
<HeaderLogin client:load />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
82
src/components/design/header/Header_ORG.astro
Normal file
82
src/components/design/header/Header_ORG.astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
|
||||
---
|
||||
|
||||
<header id="header">
|
||||
|
||||
<div id="header-grid" class="grid relative bg-white items-center gap-x-4 pt-4 px-0
|
||||
|
||||
grid-cols-1
|
||||
sm:grid-cols-1
|
||||
md:grid-cols-1
|
||||
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-x-3 lg:px-4 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-x-4 xl:px-6 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-x-5 2xl:px-6 2xl:py-4">
|
||||
|
||||
<div class="justify-self-center xs:justify-self-start">
|
||||
|
||||
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
||||
md:gap-y-4
|
||||
lg:px-0 lg:gap-x-4">
|
||||
|
||||
<div class="self-start justify-self-start">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-full
|
||||
xs:max-w-[64px]
|
||||
sm:max-w-[64px]
|
||||
md:max-w-[64px] md:ml-6
|
||||
lg:max-w-[64px] lg:ml-0
|
||||
xl:max-w-[94px] xl:ml-0
|
||||
"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||
|
||||
<div id="header-text-1"class="text-secondary justify-self-center
|
||||
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
Energieausweis online erstellen</div>
|
||||
|
||||
<div id="header-text-2"class="text-primary justify-self-center
|
||||
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem]">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full justify-self-center">
|
||||
<HeaderLogin client:load />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-start-1 col-span-3">
|
||||
<div id="header-line" class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[12px] xl:h-[12px]"></div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-button {
|
||||
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
|
||||
}
|
||||
</style>
|
||||
@@ -65,6 +65,10 @@
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
rotate_list[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
const rotate_list1 = document.querySelectorAll(".dd-symbol-clone");
|
||||
for (let i = 0; i < rotate_list1.length; i++) {
|
||||
rotate_list1[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.add("hamburger-swing-" + i);
|
||||
@@ -75,21 +79,25 @@
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div
|
||||
class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-4
|
||||
lg:hidden"
|
||||
>
|
||||
<div
|
||||
id="hamburger"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<div class="hamburger_menu py-1 px-2 bg-secondary xs:px-4 lg:hidden">
|
||||
|
||||
<div id="hamburger" class="cursor-pointer grid grid-cols-2 items-center">
|
||||
|
||||
<div class="burger justify-self-start"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="justify-self-end">
|
||||
<a href="/">
|
||||
<img id="header-logo" class="w-8 m-1" src="/images/header/logo-IBC-white.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
@@ -387,7 +395,7 @@
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/kundenbewertungen/"
|
||||
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
</div>
|
||||
|
||||
455
src/components/design/sidebars/cards/NavigationCard_ORG.svelte
Normal file
455
src/components/design/sidebars/cards/NavigationCard_ORG.svelte
Normal file
@@ -0,0 +1,455 @@
|
||||
<script lang="ts">
|
||||
let innerWidth: number;
|
||||
|
||||
function dropdown() {
|
||||
if (innerWidth < 1024) {
|
||||
const check_element = this.lastChild;
|
||||
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||
const rotate_element = this.childNodes[0].children[0];
|
||||
|
||||
var first_check = check_element.classList.contains(
|
||||
"show-dropdown-content"
|
||||
);
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
|
||||
if (first_check == true) {
|
||||
check_element.classList.remove("show-dropdown-content");
|
||||
rotate_element.classList.toggle("rotate-symbol");
|
||||
} else {
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
const element = nodeList[i];
|
||||
element.classList.remove("show-dropdown-content");
|
||||
}
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
const element = rotate_list[i];
|
||||
element.classList.remove("rotate-symbol");
|
||||
}
|
||||
|
||||
check_element.classList.add("show-dropdown-content");
|
||||
rotate_element.classList.add("rotate-symbol");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hover() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hoverout() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
function hamburger() {
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
nodeList[i].classList.remove("show-dropdown-content");
|
||||
}
|
||||
var element = document.getElementById("cardNavigation");
|
||||
element.classList.toggle("hidden");
|
||||
|
||||
const spans = this.children;
|
||||
var first_check = spans[0].classList.contains("hamburger-swing-0");
|
||||
|
||||
if (first_check == true) {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.remove("hamburger-swing-" + i);
|
||||
}
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol");
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
rotate_list[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.add("hamburger-swing-" + i);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div
|
||||
class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-4
|
||||
lg:hidden"
|
||||
>
|
||||
<div
|
||||
id="hamburger"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
id="cardNavigation"
|
||||
class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
|
||||
>
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Jetzt bestellen
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
|
||||
>Welcher Energieausweis?</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content energieasusweis-erstellen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
>Verbrauchsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Bedarfsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Verbrauchsausweis Gewerbe erstellen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content angebot-anfragen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen">Angebot anfragen</a>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
|
||||
>Bedarfsausweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
|
||||
>GEG Nachweis Wohnen anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
|
||||
>GEG Nachweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan (iSFP)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Produkte & Preise
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/verbrauchsausweis/" class="nav-element-child"
|
||||
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content verbrauchsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="index">Verbrauchsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
|
||||
<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/bedarfsausweis/" class="nav-element-child"
|
||||
>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content bedarfsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
|
||||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
|
||||
<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
|
||||
<li>
|
||||
<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a>
|
||||
</li>
|
||||
<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
|
||||
<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
|
||||
<li>
|
||||
<a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href="/" class="nav-element-child"
|
||||
>Energieausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="/energieausweis/">Energieausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
|
||||
<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
|
||||
<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- <div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child"
|
||||
href="/energieausweis-aussteller">Energieberater finden</a
|
||||
>
|
||||
</div> -->
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
FAQ & Hilfe
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content bestellprozess-energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/bestellprozess-energieausweis"
|
||||
>Bestellprozess Energieausweis</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
|
||||
>Merkblatt Verbrauchsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Merkblatt Bedarfsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Merkblatt Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/geg/"
|
||||
>Gebäudeenergiegesetz (GEG)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung/"
|
||||
>EnEV Zusammenfassung - Archiv</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
</div>
|
||||
<!-- <div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
|
||||
href="/fuer-entwickler/">Für Entwickler</a
|
||||
>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
.dd-symbol::before {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.dd-symbol {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dd-symbol::after {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-delay: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes flim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
16.66% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
33.32% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
49.98% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
66.64% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
83.33% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
import "../style/global.css";
|
||||
import "../style/formular.css";
|
||||
import "../../svelte-dialogs.config";
|
||||
import Header from "#components/design/header/AusweisHeader.astro";
|
||||
import Header from "#components/design/header/Header.astro";
|
||||
import Footer from "#components/design/footer/Footer.astro";
|
||||
import SidebarLeft from "#components/design/sidebars/SidebarLeft.astro";
|
||||
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||
@@ -128,7 +128,7 @@ const { title } = Astro.props;
|
||||
>
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box rounded-tl-none p-2 lg:p-12">
|
||||
<article class="">
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
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 { PRICES } from "#lib/constants.js";
|
||||
|
||||
@@ -165,21 +165,18 @@
|
||||
lg:grid-cols-2 lg:gap-x-6
|
||||
">
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
||||
<ProgressBar step1={'step'}/>
|
||||
</div>
|
||||
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -336,25 +336,16 @@
|
||||
"
|
||||
>
|
||||
{#if !gegAnfrage}
|
||||
<div
|
||||
id="performance-box"
|
||||
class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1"
|
||||
>
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme
|
||||
bind:objekt
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
id="progress-box"
|
||||
class="w-full box relative px-0 sm:px-4 py-3 text-center order-1 2xl:order-2 self-stretch"
|
||||
>
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
||||
|
||||
{#if gegAnfrage}
|
||||
<Progressbar
|
||||
active={1}
|
||||
@@ -364,7 +355,7 @@
|
||||
<Progressbar active={1} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<form id="formInput-2" bind:this={form}>
|
||||
<div id="formular-box" class="formular-boxen ring-0">
|
||||
|
||||
@@ -122,23 +122,18 @@
|
||||
2xl:grid-cols-2 2xl:gap-x-8
|
||||
">
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-2 2xl:order-1 self-stretch grid grid-cols-1">
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-1 2xl:order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>>
|
||||
<Progressbar active={0} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -166,21 +166,20 @@ const ausweisart = Enums.Ausweisart.VerbrauchsausweisWohnen
|
||||
|
||||
<div id="skala" class="bg-white grid grid-cols-1 px-0 sm:p-4 lg:grid-cols-2 lg:gap-x-6">
|
||||
|
||||
<div id="performance-box" class="w-full box relative px-0 sm:px-4 order-1 self-stretch grid grid-cols-1">
|
||||
|
||||
<PerformanceScore
|
||||
bind:ausweis
|
||||
bind:aufnahme={aufnahme}
|
||||
bind:objekt={objekt}
|
||||
{ausweisart}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress-box" class="w-full box relative px-0 sm:px-4 py-3 text-center order-2 self-stretch">
|
||||
|
||||
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0">Energieausweis erstellen</h1>
|
||||
<h2 class="text-primary [font-size:_clamp(18px,1vw,18px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
||||
<Progressbar active={0}/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Progressbar active={0} {ausweisart}/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.formular-boxen {
|
||||
@apply w-full ml-[2px] ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
|
||||
@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg;
|
||||
}
|
||||
|
||||
.formular-abschnitt1 {
|
||||
|
||||
@@ -76,12 +76,16 @@ input:disabled, input:read-only {
|
||||
/*ARTICLE*/
|
||||
|
||||
article {
|
||||
@apply w-full relative bg-white px-0 py-0 z-0;
|
||||
@apply w-full relative bg-white p-0 z-0 box rounded-tl-none sm:p-2 lg:p-12;
|
||||
|
||||
hr {@apply mb-4 mt-4 border-primary;}
|
||||
|
||||
h1 {@apply pl-2 sm:pl-0 text-4xl font-normal mb-2;}
|
||||
h2{@apply pl-2 sm:pl-0 text-2xl font-normal mb-2;}
|
||||
h1 {@apply pl-2 font-normal mb-2
|
||||
[font-size:_clamp(24px,1.5vw,36px)] leading-7
|
||||
sm:text-4xl;}
|
||||
h2 {@apply pl-2 font-normal mb-2
|
||||
[font-size:_clamp(24px,1.5vw,36px)] leading-7
|
||||
sm:text-4xl;}
|
||||
h3 {@apply pl-2 sm:pl-0 text-xl font-normal ml-1 mb-1;}
|
||||
|
||||
a {@apply text-blue-700 font-medium inline;}
|
||||
@@ -154,6 +158,7 @@ article {
|
||||
xl:text-lg
|
||||
}
|
||||
|
||||
|
||||
.dropdown-content{
|
||||
@apply !relative z-[1] !p-0 !scale-100 hidden
|
||||
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
|
||||
@@ -174,8 +179,9 @@ li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||
|
||||
#hamburger{
|
||||
@apply my-1;
|
||||
span {@apply block h-[3px] w-6 bg-white !transition-all}
|
||||
span:nth-child(2) {@apply my-1}
|
||||
.burger {@apply w-6}
|
||||
span {@apply block h-[4px] bg-white !transition-all}
|
||||
span:nth-child(2) {@apply my-[3px]}
|
||||
}
|
||||
|
||||
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
|
||||
|
||||
Reference in New Issue
Block a user