Update Template Files

This commit is contained in:
Robert Jagtiani
2024-04-16 00:05:35 +02:00
parent 0815957448
commit b5ed22589f
15 changed files with 533 additions and 203 deletions

View File

@@ -1,6 +1,11 @@
{
"i18n-ally.localesPaths": [
"public/locales"
],
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"less.lint.unknownAtRules": "ignore"
}

View File

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.06 123.91">
<defs>
<style>
.uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac {
fill: #3d46a3;
}
.uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac, .uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd {
fill-rule: evenodd;
}
.uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd {
fill: #848b91;
}
.uuid-437b8d44-715a-4bf2-8481-68132d40d3d1 {
fill: #3b459d;
}
</style>
</defs>
<g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f" data-name="g5671">
<path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" data-name="path5677" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m99.93,93.22c3.87.98,7.67,1.93,11.49,2.9-.04,3.86-.82,7.4-3.68,10.17-2.28,2.21-5.11,3.09-8.21,3.1-5.91.03-11.81,0-17.72.01-7,.01-11.01-5.12-11.63-10.69-.09-.84-.12-1.69-.12-2.54,0-13.17-.03-26.35,0-39.53,0-3.58,1.08-6.81,3.6-9.45,2.13-2.23,4.84-3.17,7.85-3.19,6.05-.05,12.09-.08,18.13,0,7.76.11,10.93,5.38,11.61,10.8.1.82.13,1.65.2,2.54-3.85,1-7.66,1.99-11.53,2.99-.04-.35-.08-.63-.11-.92-.19-2.18-1.57-3.6-3.76-3.8-.82-.08-1.65-.08-2.48-.09-2.47-.01-4.94-.01-7.41,0-.49,0-.99.03-1.47.13-2.07.4-3.09,1.74-3.11,4.11-.02,1.48,0,3.78,0,3.78,0,.37,0,.97,0,1.33v28.55c0,3.1,3.75,4.22,3.75,4.22.35.1.94.19,1.31.19h8.7c2.79,0,4.23-1.3,4.52-4.08.01-.15.05-.31.09-.53"/>
<path id="uuid-b7a5e321-3bac-4878-8e16-b5a91ac6964f" data-name="path5679" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m211.34,64.04c0-.37.3-.67.67-.67h6.75c.37,0,.67.3.67.67v44.72c0,.37-.3.67-.67.67h-.27c-2.05,0-4.11,0-6.16,0-.34,0-.52-.08-.68-.4-3.19-6.37-6.4-12.73-9.6-19.09-1.09-2.17-2.18-4.34-3.28-6.5l-.06-.12c-.13-.21-.24-.08-.24.29v25.13c0,.37-.3.67-.67.67h-6.76c-.37,0-.67-.3-.67-.67v-44.72c0-.37.3-.67.67-.67h.52c1.96,0,3.91.01,5.87-.01.44,0,.66.14.85.53,4.22,8.42,8.45,16.83,12.68,25.24.09.17.18.34.38.49v-25.54Z"/>
<path id="uuid-14d91d42-52e1-4383-912b-718d5552121d" data-name="path5681" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m397.06,108.76c0,.37-.3.67-.67.67,0,0-3.92,0-6.19-.02-.17,0-.39-.22-.49-.39-1.31-2.57-2.6-5.14-3.9-7.71-2.99-5.94-5.99-11.88-8.98-17.82l-.07-.13c-.13-.22-.25-.1-.25.27v25.09c0,.37-.3.67-.67.67h-6.77c-.37,0-.67-.3-.67-.67v-44.71c0-.37.29-.67.64-.67,2.13,0,4.26.01,6.4-.01.47,0,.69.15.89.56,4.25,8.49,8.52,16.97,12.78,25.45l.04.09c.1.18.17.03.17-.34v-25.03c0-.37.3-.67.67-.67h6.37c.37,0,.67.3.67.67v44.71Z"/>
<path id="uuid-5673c601-d2a1-4ccc-9646-350f9c0c153c" data-name="path5683" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m162.87,81.63c0,.37.19.68.41.7h.17c3.14,0,6.28,0,9.42,0,1.76,0,2.81-1.02,2.84-2.78.02-1.76.03-3.52,0-5.27-.03-1.87-.99-2.78-2.86-2.79-3.14,0-8.75,0-8.75,0h-.95c-.15,0-.28.3-.28.67v9.48Zm-.02,8.83v18.26c0,.37-.3.67-.67.67h-6.77c-.37,0-.67-.3-.67-.67v-45.32c.1-.02.21-.06.33-.06,6.81,0,13.63,0,20.44,0,5.36,0,8.25,4.29,8.33,8.38.07,3.67.06,7.35,0,11.02-.06,3.49-2.61,6.54-6.05,7.37-.3.07-.61.13-.99.22,2.36,6.38,6.83,18.45,6.83,18.45.13.34-.07.62-.44.62h-8.05c-.49-1.31-.99-2.63-1.48-3.96-1.81-4.84-3.61-9.69-5.43-14.52-.07-.19-.32-.44-.48-.45-1.6-.03-3.19-.02-4.89-.02"/>
<path id="uuid-53215661-af4c-482b-aabe-0c99430e6b10" data-name="path5685" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m140.12,87.07v-12.52c0-2.14-.93-3.07-3.08-3.07-2.19,0-4.39,0-6.58,0-2.31,0-3.25.94-3.26,3.23,0,7.8,0,15.6,0,23.41,0,.3,0,.6.05.89.19,1.27.91,2.01,2.18,2.23.33.06.67.09,1,.09,2.18,0,4.35,0,6.52,0,2.22,0,3.15-.93,3.16-3.13v-11.13Zm-21.01-.68c0-4.72,0-9.44,0-14.16,0-1.62.32-3.18,1.07-4.63,1.42-2.7,3.68-4.17,6.71-4.23,4.52-.08,9.05-.11,13.57,0,4.15.11,7.01,2.88,7.6,7.08.1.68.15,1.38.15,2.07,0,9.3,0,18.6,0,27.91,0,1.62-.28,3.18-1,4.65-1.36,2.78-3.65,4.25-6.7,4.31-4.56.09-9.12.07-13.69,0-3.85-.05-6.91-2.9-7.54-6.9-.12-.72-.17-1.45-.17-2.18-.01-4.64,0-9.28,0-13.92"/>
<path id="uuid-937e127c-2f65-47a9-a395-3fa2a236bc9d" data-name="path5687" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m318.19,74.78c-.02-.2-.03-.35-.04-.51-.21-1.69-1.23-2.72-2.94-2.75-2.43-.06-4.86-.05-7.29,0-1.59.04-2.49.91-2.58,2.51-.08,1.61-.08,3.24,0,4.85.09,1.6,1.12,2.64,2.69,2.93,3.51.67,7.02,1.31,10.52,2.03,2.2.46,4.22,1.31,5.73,3.09,1.16,1.36,1.82,2.97,1.87,4.71.1,3.55.28,7.13-.05,10.64-.45,4.66-3.4,7.07-8.11,7.13-4.15.04-8.29.02-12.44.01-4.49-.01-7.62-2.77-8.22-7.23-.08-.57-.08-1.14-.14-1.71-.03-.33.12-.45.41-.52,2.52-.63,5.05-1.26,7.66-1.92.03.2.07.38.08.57.18,1.71.95,2.61,2.66,2.67,2.54.09,5.1.07,7.64-.03,1.55-.06,2.44-1.06,2.52-2.62.06-1.3.06-2.61,0-3.91-.09-1.67-1.11-2.73-2.85-3.07-3.25-.64-6.51-1.25-9.76-1.93-2.47-.51-4.7-1.49-6.39-3.46-1.38-1.61-1.94-3.51-1.96-5.58-.03-2.92-.06-5.85,0-8.77.08-3.4,1.49-6.09,4.54-7.77,1.09-.6,2.31-.8,3.55-.8,4.27-.01,8.54-.02,12.8,0,2.22.01,4.2.68,5.75,2.36,1.73,1.88,2.43,4.16,2.46,6.68,0,.16-.2.43-.35.48-2.5.66-5,1.28-7.51,1.92-.05.01-.12,0-.24-.01"/>
<path id="uuid-e21f2cfb-411b-47e9-92a5-77307d1bfbcb" data-name="path5689" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m332.82,64.04c0-.37.3-.67.67-.67h27.74c.37,0,.67.3.67.67v6.78c0,.37-.3.67-.67.67h-19.6c-.37,0-.67.3-.67.67v9.51c0,.37.3.67.67.67h11.43c.37,0,.67.3.67.67v6.79c0,.37-.3.67-.67.67h-11.42c-.37,0-.67.3-.67.67v9.55c0,.37.3.67.67.67h19.6c.37,0,.67.3.67.67v6.74c0,.37-.3.67-.67.67h-27.74c-.37,0-.67-.3-.67-.67v-44.69Z"/>
<path id="uuid-bb067a0a-0347-44e8-8866-09b23461da83" data-name="path5691" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m225.99,64.04c0-.37.3-.67.67-.67h27.74c.37,0,.67.3.67.67v6.77c0,.37-.3.67-.67.67h-19.63c-.37,0-.67.3-.67.67v9.53c0,.37.3.67.67.67h11.45c.37,0,.67.3.67.67v6.77c0,.37-.3.67-.67.67h-11.44c-.37,0-.67.3-.67.67v9.55c0,.37.3.67.67.67h19.63c.37,0,.67.3.67.67v6.75c0,.37-.3.67-.67.67h-27.74c-.37,0-.67-.3-.67-.67v-44.69Z"/>
<path id="uuid-bcbd012e-62b7-41a4-ac44-152f7811e7ac" data-name="path5693" class="uuid-d0147991-ce0b-4fcb-96a0-249b70e67fbd" d="m262.25,109.4c-.37,0-.67-.3-.67-.67v-44.69c0-.37.3-.67.67-.67h6.75c.37,0,.67.3.67.67v36.62c0,.37.3.67.67.67h19.66c.37,0,.67.3.67.67v6.73c0,.37-.3.67-.67.67h-27.75Z"/>
<path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" data-name="path5695" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m35.62,70.1c0,.37.3.67.67.67h10.47c.31,0,.61,0,.92-.03,2.07-.18,3.35-1.55,3.4-3.74.05-2.62.05-5.24,0-7.87-.03-2.01-1.07-3.22-2.95-3.6-.44-.09-.88-.14-1.33-.14-3.46-.01-6.91,0-10.38,0-.27,0-.53.02-.8.03v14.67Zm.01,27.11c0,.37.16.69.36.72h.16c3.68,0,7.36.03,11.04,0,2.45-.02,3.86-1.47,3.89-3.95.03-2.48.02-4.96,0-7.44-.01-2.77-1.42-4.16-4.19-4.17-3.46,0-9.7,0-9.7,0h-1.11c-.25,0-.45.3-.45.67v14.18Zm-14.49,12.16v-10.83c0-.37.3-.67.67-.67h1.49c.37,0,.67-.3.67-.67v-41.21c0-.37-.3-.67-.67-.67h-1.47c-.37,0-.67-.3-.67-.67v-10.31c0-.37.3-.67.67-.67h.31c9.51,0,19.03,0,28.54,0,7.85,0,11.41,5.3,11.81,10.93.32,4.58.19,9.2.02,13.79-.12,3.2-1.57,5.89-4.3,8.12.37.26.72.45.99.72,2.5,2.6,3.42,5.85,3.47,9.34.06,3.93.11,7.87-.16,11.79-.3,4.18-2.07,7.67-5.95,9.77-1.52.83-3.18,1.25-4.9,1.26-10.07.03-20.15.02-30.21.02-.08,0-.16-.03-.29-.06"/>
<path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" data-name="path5697" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m11.78,108.73c0,.37-.3.67-.67.67H.99c-.37,0-.67-.3-.67-.67V44.42c0-.37.3-.67.67-.67h10.13c.37,0,.67.3.67.67v64.31Z"/>
<path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" data-name="path5707" class="uuid-57d3d2d7-df3c-47fe-8d1b-3ad7a5cb5fac" d="m395.33,117.25c.76,0,1.38.3,1.38.67v5.33c0,.37-.62.67-1.38.67H1.55c-.76,0-1.38-.3-1.38-.67v-5.33c0-.37.62-.67,1.38-.67h393.78Z"/>
<path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" data-name="path5713" class="uuid-437b8d44-715a-4bf2-8481-68132d40d3d1" d="m50.17.41c-.5,0-1.03.21-1.58.58C32.8,11.81,17.01,22.61,1.17,33.36c-1,.68-1.31,1.36-.96,2.5h12.71c11.93-8.13,23.88-16.25,35.79-24.42,1.1-.76,2.01-.74,3.08-.04,12.53,8.17,25.05,16.31,37.58,24.46h13.08c.3-1.05.17-1.76-.83-2.42C84.96,22.63,68.36,11.8,51.71.95c-.54-.35-1.04-.55-1.54-.54"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-30bfcab6-bf04-4c4b-b8c9-a63fbc68588a" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 98.11 100.64">
<image width="100" height="104" transform="translate(0 -.91)" xlink:href="data:image/png;base64,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"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

View File

@@ -2,9 +2,20 @@
const currentYear = new Date().getFullYear();
---
<footer class="max-w-[1920px] w-full">
<div class="flex flex-row justify-between px-4 items-center bg-primary py-2 mt-auto">
<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
</div>
<footer class="
grid grid-cols-1 bg-primary lg:px-9 lg:py-1
lg:grid-cols-4 lg:px-9 lg:py-1">
<div class="
justify-self-center
md:col-end-2 md:justify-self-start md:px-4">
<a class=" text-white font-normal text-lg no-underline" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
</div>
<div class="
justify-self-center
md:col-end-5 md:justify-self-end md:px-6">
<a class=" text-white font-normal text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} <span class="">IB Cornelsen Hamburg</span></a>
</div>
</footer>

View File

@@ -1,28 +1,48 @@
<header class="max-w-[1920px] w-full relative">
<a class="hidden md:block w-full h-48 bg-base-200" href="/">
<img
src="/images/header/header-bg.jpg"
class="w-full h-full object-cover"
alt="Hintergrund - Rollen Architektenpapier"
/>
<img
src="/images/header/logo-big.svg"
class="absolute top-4 right-0 w-[464px]"
alt="IBCornelsen - Logo"
/>
<h2
class="text-secondary font-semibold text-2xl absolute top-8 right-4"
>
<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_logo-big.svg" alt="IBCornelsen-Logo"/>
</a>
<h2 class="text-secondary font-normal absolute
top-1 right-2 text-[1.1rem]
xs:top-[1.7rem] xs:right-6 xs:text-[1.6rem]
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-semibold text-xl absolute top-16 right-4"
>
Energieausweise nach aktueller GEG
<h2 class="text-primary font-normal absolute
top-[1.6rem] right-2 text-[0.85rem]
xs:top-[3.5rem] 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>
</a>
<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
<a
</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-[36px]">
<!-- <a
class="header-button hidden md:block"
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
>Energieausweis erstellen</a
@@ -31,11 +51,11 @@
>Kontakt</a
>
<a class="header-button hidden md:block" href="/agb">AGB</a>
-->
<a class="hamburger_menu"
><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
>
</div>
</div>
</header>
<style>

View File

@@ -1,9 +1,10 @@
---
import Navigation from "../components/UMBE_navcard.astro";
import Navigation from "./UMBE_card-navigation.svelte";
---
<div class="flex flex-col gap-6 bg-slate-200 grow">
<div class="flex flex-col grow">
<Navigation>
<Navigation client:load>
</div>

View File

@@ -1,3 +1,14 @@
<div class="flex flex-col gap-4 bg-slate-200 grow">
---
import Contact from "./UMBE_card-contact.svelte";
---
<div class="hidden
xl:flex xl:flex-col xl:grow
">
<Contact client:load>
</div>
</div>

View File

@@ -0,0 +1,23 @@
<div id ="card-contact" class="box card bg-white px-6 py-4">
<div class="grid grid-cols-[max-content,1fr]">
<div class="">
<h2>Rufen Sie uns an<br>Wir sind gerne für Sie da</h2>
<hr class="w-11/12"/>
<p>Telefonische Beratung unter</p>
<a class="text-lg font-bold text-box-heading" href="tel:+4940209339850">040 / 209 339 850</a>
</div>
<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
</div>
</div>
<style lang="scss">
h2{ @apply text-lg}
p{ @apply text-lg}
</style>

View File

@@ -0,0 +1,173 @@
<script>
let innerWidth
function dropdown(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth<1024){
const check_element = this.lastChild;
const rotate_list = document.querySelectorAll(".dd-symbol");
const rotate_element = this.childNodes[0].lastChild;
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 hamburger(){
const nodeList = document.querySelectorAll(".dropdown-content");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].classList.remove("show-dropdown-content");}
var element = document.getElementById("card-navigation");
element.classList.toggle("hidden");
const spans = this.children;
console.log(spans);
var first_check = spans[0].classList.contains("hamburger-swing-0");
if(first_check == true){
for (let i = 0; i < spans.length; i++)
{spans[i].classList.remove("hamburger-swing-"+i);}
const rotate_list = document.querySelectorAll(".dd-symbol");
for (let i = 0; i < rotate_list.length; i++)
{rotate_list[i].classList.remove("rotate-symbol");}
}else{
for (let i = 0; i < spans.length; i++)
{spans[i].classList.add("hamburger-swing-"+i);} }
}
</script>
<svelte:window bind:innerWidth />
<div class="hamburger_menu py-1 px-2 bg-secondary
xs:px-6
lg:hidden">
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id="card-navigation" class="card-navigation hidden box lg:block">
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
{#if innerWidth > 1023}
<a href="" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol"></span></a>
{:else}
<a href="#" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol"></span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
{#if innerWidth < 1023}
<li><a href="">Energieausweis erstellen</a></li>
{/if}
<li><a href="">Verbrauchsausweis erstellen</a></li>
<li><a href="">Bedarfsausweis erstellen</a></li>
<li><a href="">Verbrauchsausweis Gewerbe erstellen</a></li>
<li><a href="">Bedarfsausweis Gewerbe erstellen</a></li>
</ul>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Welcher Energieausweis?</div>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol"></span></a>
<ul class="dropdown-content verbrauchsausweis">
{#if innerWidth < 1023}
<li><a href="">Verbrauchsausweis</a></li>
{/if}
<li><a href="">Verbrauchsausweis Wohngebäude</a></li>
<li><a href="">Verbrauchsausweis online erstellen</a></li>
<li><a href="">Häufige Fragen zum Verbrauchsausweis</a></li>
<li><a href="">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
<li><a href="">Verbrauchsausweis Gewerbe</a></li>
<li><a href="">Verbrauchsausweis Gewerbe online erstellen</a></li>
<li><a href="">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
<li><a href="">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Bedarfsausweis<span class="dd-symbol"></span></a>
<ul class="dropdown-content bedarfsausweis">
{#if innerWidth < 1023}
<li><a href="">Bedarfsausweis</a></li>
{/if}
<li><a href="">Bedarfsausweis Wohngebäude</a></li>
<li><a href="">Bedarfsausweis online erstellen</a></li>
<li><a href="">Häufige Fragen zum Bedarfsausweis</a></li>
<li><a href="">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
<li><a href="">Bedarfsausweis Gewerbe</a></li>
<li><a href="">Bedarfsausweis Gewerbe online erstellen</a></li>
<li><a href="">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
<li><a href="">Statistiken zum Bedarfsausweis Gewerbe</a></li>
</ul>
</div>
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
<a href="#" class="nav-element-child">Energieausweis<span class="dd-symbol"></span></a>
<ul class="dropdown-content energieausweis">
{#if innerWidth < 1023}
<li><a href="">Energieausweis</a></li>
{/if}
<li class=""><a href="">Energieausweis Pflicht</a></li>
<li class=""><a href="">Energieausweis Kosten</a></li>
<li class=""><a href="">Energieausweis Haus</a></li>
</ul>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">EnEV Zusammenfassung - Archiv</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Energieausweis Aussteller</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">Kundenbewertungen</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child">FAQ</div>
</div>
<div class="nav-element dropdown">
<div class="nav-element-child xl:!rounded-b-xl">Für Entwickler</div>
</div>
</nav>

View File

@@ -1,100 +1,96 @@
<script>
<script>
</script>
<ul id="main-navigation">
<a class="nav-element-link">
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">Energieausweis erstellen<span></span>
</a>
<div class="">
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Verbrauchsausweis erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Bedarfsausweis erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Verbrauchsausweis Gewerbe erstellen</a></li>
<li class="nav-second"><a class="nav-element-link">Bedarfsausweis Gewerbe erstellen</a></li>
<details class="dropdown block xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Energieausweis erstellen<span class="absolute right-[20px]"></span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Verbrauchsausweis erstellen</a></li>
<li class=""><a>Bedarfsausweis erstellen</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe erstellen</a></li>
<li class=""><a>Bedarfsausweis Gewerbe erstellen</a></li>
</ul>
</details>
</li>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Welcher Energieausweis?</summary>
</details>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Welcher Energieausweis</a>
</li>
<li class="dropdown lg:dropdown-bottom xl:dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Verbrauchsausweis<span></span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Verbrauchsausweis<span class="absolute right-[20px]"></span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Verbrauchsausweis Wohngebäude</a></li>
<li class=""><a>Verbrauchsausweis online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Verbrauchsausweis</a></li>
<li class=""><a>Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe</a></li>
<li class=""><a>Verbrauchsausweis Gewerbe online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
<li class=""><a>Statistiken zum Verbrauchsausweis Gewerbe</a></li>
</ul>
</li>
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Bedarfsausweis<span></span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
</details>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Bedarfsausweis<span class="absolute right-[20px]"></span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Bedarfsausweis Wohngebäude</a></li>
<li class=""><a>Bedarfsausweis online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Bedarfsausweis</a></li>
<li class=""><a>Statistiken zum Bedarfsausweis Wohngebäude</a></li>
<li class=""><a>Bedarfsausweis Gewerbe</a></li>
<li class=""><a>Bedarfsausweis Gewerbe online erstellen</a></li>
<li class=""><a>Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
<li class=""><a>Statistiken zum Bedarfsausweis Gewerbe</a></li>
</ul>
</li>
<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
<a class="nav-element-link" href="">Energieausweis<span></span></a>
<ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
<li class="nav-second"><a class="nav-element-link">Item 1</a></li>
<li class="nav-second"><a class="nav-element-link">Item 2</a></li>
</details>
<details class="dropdown block xl:dropdown-hover xl:dropdown-right">
<summary class="btn rounded-none w-full justify-start">Energieausweis<span class="absolute right-[20px]"></span></summary>
<ul class="dd-cont p-2 shadow menu dropdown-content z-[1] w-full bg-base-100">
<li class=""><a>Energieausweis Pflicht</a></li>
<li class=""><a>Energieausweis Kosten</a></li>
<li class=""><a>Energieausweis Haus</a></li>
</ul>
</li>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">EnEV Zusammenfassung - Archiv</summary>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Energieausweis Aussteller</summary>
</details>
<details class="dropdown block">
<summary class="btn rounded-none w-full justify-start">Kundenbewertungen</summary>
</details>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">EnEV Zusammenfassung - Archiv</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Energieausweis Aussteller</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Kundenbewertungen</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">FAQ</a>
</li>
<li class="no-dropdown nav-element w-full">
<a class="nav-element-link" href="">Für Entwickler</a>
</li>
</div>
<style>
#main-navigation, .nav-list{border-top: 1px solid #ccc;}
#main-navigation li{border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.nav-element{
@apply p-2 bg-white font-normal text-lg hover:bg-primary hover:text-white
.dd-cont{
@apply !relative lg:!absolute;
li{
@apply w-max
}
}
.nav-second{
@apply p-2 bg-white font-normal text-lg hover:bg-secondary hover:text-white
}
.nav-element-link{
@apply text-black no-underline hover:no-underline hover:text-white
}
.nav-element-link span{
position:absolute;right:15px;top:0.65rem;
summary{
@apply text-black !text-[1.1rem] !font-normal
}
.nav-element:hover > .nav-element-link, .nav-second:hover > .nav-element-link{
@apply text-white
details:hover > summary {
@apply !bg-primary !text-white
}
details:hover > details.dd-cont {
@apply !visible
}
.nav-element ul{margin: -1px 0;}
</style>

View File

@@ -1,6 +1,4 @@
---
import i18next from "i18next";
import "../style/UMBE_global.css";
import "../../svelte-dialogs.config"
import Footer from "../components/UMBE_Footer.astro";
@@ -19,7 +17,7 @@ const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang={i18next.language}>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@@ -34,18 +32,31 @@ const { title } = Astro.props;
</head>
<body>
<container class="max-w-[1920px] w-full mx-auto bg-slate-600 grid border-solid border-grey-200 border">
<container class="w-full max-w-[1920px]">
<Header />
<main
class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full bg-base-100"
>
class="w-full p-0
lg:grid grid-cols-[max-content,6fr] lg:gap-1 lg:p-3
xl:grid-cols-[2fr,6fr,2fr] xl:gap-3 xl:py-4 xl:px-3
2xl:grid-cols-[2fr,6fr,2fr] 2xl:gap-5 2xl:py-4 2xl:px-9
">
<SidebarLeft />
<article class="w-full max-w-full bg-base-200 border border-base-300">
<article class="box grow">
<slot />
</article>
<SidebarRight />
</main>
<Footer />
<NotificationWrapper client:load />
</container>
@@ -54,43 +65,4 @@ const { title } = Astro.props;
<style is:global lang="scss">
:root {
@apply bg-base-100 text-base-content;
}
article {
@apply rounded-lg w-full shadow-md border;
}
.mainContent {
p, h1, h2, h3, h4, h5, h6 {
@apply text-base-content;
}
}
body {
min-height: 100vh;
}
.button {
@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
color: #fff !important;
}
h3 {
@apply text-xl font-medium mt-6 mb-4;
}
input {
@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
}
input:hover,
input:focus {
@apply bg-gray-100;
}
label {
@apply text-base font-semibold;
}
</style>

View File

@@ -1,16 +1,9 @@
---
import Layout from "#layouts/UMBE_Layout.astro";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>HALLO</h1>
<h1>Energieausweis online erstellen</h1>
</div>
</Layout>

View File

@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
* {
font-weight: 400;
@@ -7,42 +7,112 @@
font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
article hr {
@apply mb-4 mt-4;
body{
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
/*ARTICLE*/
article {
@apply px-6 md:px-8 py-6 w-full relative bg-white;
@apply px-6 py-6 w-full relative bg-white min-h-screen;
hr {@apply mb-4 mt-4;}
h1 {@apply text-4xl font-normal mb-2;}
h2 {@apply text-2xl font-normal mb-2;}
h3 {@apply text-xl font-normal mb-2;}
a {@apply text-blue-700 font-medium text-lg;}
}
article h1 {
@apply text-4xl font-normal my-4;
/*SIDEBARS*/
/*BOXES*/
.box{
@apply rounded-none
xl:rounded-xl xl:shadow-box xl:ring-1 xl:ring-gray-200
}
article h2 {
@apply text-2xl font-normal my-4;
.card{
h2 {@apply text-lg font-bold text-box-heading leading-6}
hr {@apply my-2}
p {@apply text-lg}
a {@apply text-lg}
}
article h3 {
@apply text-xl font-normal my-2;
/*SIDEBAR-LEFT*/
/*NAVIGATION*/
.nav-element{@apply relative block cursor-pointer}
.nav-element:not(:first-child){@apply border-gray-200 border-t-[1px]}
.nav-element:hover > .nav-element-child{
@apply !bg-primary !text-white cursor-pointer
}
article a {
@apply text-blue-700 font-medium text-lg;
.nav-element:hover > .dropdown-content{
@apply lg:visible lg:opacity-100 lg:block
}
article select {
@apply rounded-lg px-2 py-1.5 outline-none;
.nav-element:hover:first-child > .nav-element-child{
@apply !rounded-none
xl:!rounded-tl-xl xl:!rounded-tr-none
}
.checkbox {
@apply h-5 w-4 checkbox-secondary;
.nav-element:hover:last-child > .nav-element-child{
@apply !rounded-none
xl:!rounded-b-xl
}
.nav-element-child{
@apply px-4 py-3 w-full justify-start text-sm bg-white flex !no-underline text-black
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;
li {@apply text-sm bg-white flex
xl:text-lg}
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
lg:px-4 py-3 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
}
.verbrauchsausweis li:nth-child(5), .bedarfsausweis li:nth-child(5){
@apply !border-primary !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}
}
.hamburger-swing-0{@apply origin-left rotate-45 -translate-y-[1.5px] !transition-all duration-500}
.hamburger-swing-1{@apply origin-center opacity-0 !transition-all}
.hamburger-swing-2{@apply origin-left -rotate-45 translate-y-[1.5px] !transition-all duration-500}
.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
/*NAVIGATION-ANIMATION*/
/*SIDEBAR-RIGHT*/
/*FOOTER*/

View File

@@ -3,12 +3,22 @@ module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/@ibcornelsen/ui/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
darkMode: "class",
plugins: [require("daisyui"), require("@tailwindcss/typography")],
important: true,
theme: {
extend: {
screens: {
xs: '480px'
},
colors: {
"pdf-yellow-bright": "#f3cb00",
"pdf-yellow-light": "#fff6ca",
"box-heading": 'var(--box-heading)'
},
boxShadow: {
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
}
},
},
daisyui: {
@@ -22,6 +32,8 @@ module.exports = {
'secondary-focus': '#2f397f',
'secondary-content': '#ffffff',
'--box-heading': '#3A4AB5',
'accent': '#7b37cd',
'accent-focus': '#5f25a7',
'accent-content': '#ffffff',
@@ -63,6 +75,8 @@ module.exports = {
'secondary-focus': '#2f397f',
'secondary-content': '#ffffff',
'--box-heading': '#3A4AB5',
'accent': '#8c45e3',
'accent-focus': '#7532c8',
'accent-content': '#ffffff',
@@ -115,8 +129,8 @@ module.exports = {
'5xl': '4.210rem',
},
fontFamily: {
heading: 'Poppins',
body: 'Poppins',
heading: 'Abel',
body: 'Abel',
},
fontWeight: {
normal: '400',