Merge pull request #14 from IBCornelsen/UMBE

HEADER Variation

public/images/header/logo-IBC-big.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 111.4 123.9">
+  <!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #3d46a3;
+      }
+
+      .st0, .st1 {
+        fill-rule: evenodd;
+      }
+
+      .st2 {
+        fill: #3b459d;
+      }
+
+      .st1 {
+        fill: #848b91;
+      }
+    </style>
+  </defs>
+  <g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f">
+    <path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" class="st1" d="M99.9,93.2c3.9,1,7.7,1.9,11.5,2.9,0,3.9-.8,7.4-3.7,10.2-2.3,2.2-5.1,3.1-8.2,3.1-5.9,0-11.8,0-17.7,0-7,0-11-5.1-11.6-10.7,0-.8-.1-1.7-.1-2.5,0-13.2,0-26.3,0-39.5,0-3.6,1.1-6.8,3.6-9.4,2.1-2.2,4.8-3.2,7.8-3.2,6.1,0,12.1,0,18.1,0,7.8.1,10.9,5.4,11.6,10.8,0,.8.1,1.7.2,2.5-3.8,1-7.7,2-11.5,3,0-.3,0-.6-.1-.9-.2-2.2-1.6-3.6-3.8-3.8-.8,0-1.7,0-2.5,0-2.5,0-4.9,0-7.4,0-.5,0-1,0-1.5.1-2.1.4-3.1,1.7-3.1,4.1,0,1.5,0,3.8,0,3.8v29.9c0,3.1,3.7,4.2,3.7,4.2.3,0,.9.2,1.3.2h8.7c2.8,0,4.2-1.3,4.5-4.1,0-.2,0-.3,0-.5"/>
+    <path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" class="st0" d="M35.6,70.1c0,.4.3.7.7.7h10.5c.3,0,.6,0,.9,0,2.1-.2,3.3-1.6,3.4-3.7,0-2.6,0-5.2,0-7.9,0-2-1.1-3.2-2.9-3.6-.4,0-.9-.1-1.3-.1-3.5,0-6.9,0-10.4,0s-.5,0-.8,0v14.7h0ZM35.6,97.2c0,.4.2.7.4.7h.2c3.7,0,7.4,0,11,0,2.4,0,3.9-1.5,3.9-3.9,0-2.5,0-5,0-7.4,0-2.8-1.4-4.2-4.2-4.2h-10.8c-.2,0-.5.3-.5.7v14.2h0ZM21.1,109.4v-10.8c0-.4.3-.7.7-.7h1.5c.4,0,.7-.3.7-.7v-41.2c0-.4-.3-.7-.7-.7h-1.5c-.4,0-.7-.3-.7-.7v-10.3c0-.4.3-.7.7-.7h28.8c7.8,0,11.4,5.3,11.8,10.9.3,4.6.2,9.2,0,13.8-.1,3.2-1.6,5.9-4.3,8.1.4.3.7.4,1,.7,2.5,2.6,3.4,5.8,3.5,9.3,0,3.9.1,7.9-.2,11.8-.3,4.2-2.1,7.7-5.9,9.8-1.5.8-3.2,1.2-4.9,1.3-10.1,0-20.1,0-30.2,0s-.2,0-.3,0"/>
+    <path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" class="st0" d="M11.8,108.7c0,.4-.3.7-.7.7H1c-.4,0-.7-.3-.7-.7V44.4c0-.4.3-.7.7-.7h10.1c.4,0,.7.3.7.7v64.3h0Z"/>
+    <path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" class="st0" d="M111.1,117.2c.2,0,.4.3.4.7v5.3c0,.4-.2.7-.4.7H.6c-.2,0-.4-.3-.4-.7v-5.3c0-.4.2-.7.4-.7h110.5Z"/>
+    <path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" class="st2" d="M54.5.4c-.5,0-1.1.2-1.7.6C35.6,11.8,18.5,22.6,1.3,33.4c-1.1.7-1.4,1.4-1,2.5h13.8c13-8.1,25.9-16.2,38.9-24.4,1.2-.8,2.2-.7,3.3,0,13.6,8.2,27.2,16.3,40.8,24.5h14.2c.3-1,.2-1.8-.9-2.4C92.3,22.6,74.3,11.8,56.2.9c-.6-.3-1.1-.5-1.7-.5"/>
+  </g>
+</svg>

src/components/design/header/Header.astro

@@ -1,25 +1,23 @@
-<header class="max-w-[1920px] w-full relative bg-white
+---
-md:bg-[url('/images/header/header-bg.jpg')] 
+import Login from "#sidebarCards/card-login.svelte";
-md:bg-cover md:grid md:grid-cols-2
+
-lg:grid lg:grid-cols-3">
+---
+
+<header>
+
+<div class="max-w-[1920px] w-full grid relative bg-white
+
+sm:grid-cols-[0px_1fr_minmax(450px,450px)] sm:pl-6 sm:pr-3 sm:py-2
+md:grid-cols-[0px_1fr_minmax(450px,450px)] md:pl-6 md:pr-3 md:py-2
+lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
+lg:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
+xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
+2xl:grid-cols-[minmax(350px,350px)1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
 
 
 
-	<div class="
+<!---
-	justify-self-center px-2 py-2
+		
-	xs:px-6 xs:py-4
-	md:px-4 md:py-4
-	md:col-end-4 md:justify-self-end 
-	xl:my-4 xl:mr-9 xl:p-0">
-
-	
-		<a href="/">
-			<img class="
-			w-full
-			md:w-[350px]
-			lg:w-[420px]" 
-			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
-		</a>
 		
 		<h2 class="text-secondary font-normal absolute
 					top-1 right-2 text-[1.1rem]
@@ -37,9 +35,28 @@ lg:grid lg:grid-cols-3">
 					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>
+		</h2> -->
 		
-	</div>
+<div></div>
+
+<div class="self-center justify-self-start
+		sm:justify-self-start
+		md:justify-self-start
+		lg:justify-self-center
+		xl:justify-self-center
+		2xl:justify-self-center">
+	<a href="/index_1">
+		<img class="w-[73px]" 
+		src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
+	</a>
+</div>
+
+<div class="w-[450px]">
+		<Login client:load />
+		</div>
+
+
+</div>
 
 	<div class="col-start-1 col-span-3">
 		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary

src/components/design/header/Header_1.astro

@@ -0,0 +1,68 @@
+<header class="max-w-[1920px] w-full relative bg-white
+md:bg-[url('/images/header/header-bg.jpg')] 
+md:bg-cover md:grid md:grid-cols-2
+lg:grid lg:grid-cols-3">
+
+
+
+	<div class="
+	justify-self-center px-2 py-2
+	xs:px-6 xs:py-4
+	md:px-4 md:py-4
+	md:col-end-4 md:justify-self-end 
+	xl:my-4 xl:mr-9 xl:p-0">
+
+	
+		<a href="/">
+			<img class="
+			w-full
+			md:w-[350px]
+			lg:w-[420px]" 
+			src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
+		</a>
+		
+		<h2 class="text-secondary font-normal absolute
+					top-1 right-2 text-[1.1rem]
+					xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
+					
+					md:top-[1.25rem] md:right-4 md:text-[1.1rem]
+					xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
+					Energieausweis online erstellen
+		</h2>
+				
+		<h2	class="text-primary font-normal absolute 
+					top-[1.6rem] right-2 text-[0.85rem]
+					xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
+					
+					md:top-[2.5rem] md:right-4 md:text-[0.9rem]
+					xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
+					Energieausweise nach aktuellem GEG
+		</h2>
+		
+	</div>
+
+	<div class="col-start-1 col-span-3">
+		<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
+					lg:h-[14px] xl:h-[18px]">
+
+			<!-- <a
+				class="header-button hidden md:block"
+				href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
+				>Energieausweis erstellen</a
+			>
+			<a class="header-button hidden md:block" href="/kontakt"
+				>Kontakt</a
+			>
+			<a class="header-button hidden md:block" href="/agb">AGB</a>
+				-->
+				
+		</div>
+	</div>
+
+</header>
+
+<style>
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+</style>

src/components/design/sidebars/cards/card-login.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { loginClient } from "#lib/login";
+	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { fade } from "svelte/transition";
+
+	let email: string;
+	let passwort: string;
+
+	async function login(e: SubmitEvent) {
+		console.log(e);
+		
+		e.preventDefault();
+		const response = await loginClient(email, passwort);
+
+		if (response === null) {
+			errorHidden = false;
+		} else {
+			window.location.href = "/dashboard";
+		}
+	}
+
+	let errorHidden = true;
+</script>
+
+<div
+	id="card-login"
+	class="box card bg-white px-2 py-2
+			lg:block lg:ring-2 lg:ring-secondary/50"
+>
+	<div>
+
+	
+		<form on:submit={login}>
+			<div class="grid grid-cols-[1fr_1fr] gap-2">
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="text"
+				placeholder="nutzer@email.com"
+				name="email"
+				bind:value={email}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			<input
+				class="my-1 rounded-md px-2 py-1 ring-1 w-full"
+				type="password"
+				minlength="8"
+				placeholder="********"
+				name="passwort"
+				bind:value={passwort}
+				on:focus={() => (errorHidden = true)}
+				required
+			/>
+			{#if !errorHidden}
+			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+				<CrossCircled size={24} />
+				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
+			</div>
+			{/if}
+		
+			<div class="w-full text-center self-center">
+				<a
+					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+					href="/auth/signup">Registrieren</a
+				> /
+				<a
+					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
+					href="/auth/passwort-vergessen">Passwort vergessen</a
+				>
+			</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>
+
+		
+
+		<div></div>
+	</div>
+</div>
+
+<style lang="postcss">
+
+
+</style>

src/components/design/sidebars/cards/card-login_1.svelte

@@ -93,4 +93,4 @@
 </div>
 
 <style lang="scss">
-</style>
+</style>

src/components/design/sidebars/cards/card-navigation.svelte

@@ -97,7 +97,7 @@ if(innerWidth>1024){
 
 
 
-<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 lg:block"> 
+<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block"> 
 
   <div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
     {#if innerWidth > 1023}

src/components/design/sidebars/right/SidebarRight.astro

@@ -1,5 +1,5 @@
 ---
-import Login from "#sidebarCards/SidebarWidgetLogin.svelte";
+
 import Contact from "#sidebarCards/card-contact.svelte";
 import Review from "#sidebarCards/card-review.svelte";
 import VApromo from "#sidebarCards/card-VA-promo.svelte";
@@ -11,7 +11,7 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
 <div class="hidden
             xl:flex xl:flex-col xl:grow
             ">
-    <Login client:load />
+
     <Contact client:load />
     <Review client:load />
     <VApromo client:load />

src/components/design/sidebars/right/SidebarRight_1.astro

@@ -0,0 +1,25 @@
+---
+import Login from "#sidebarCards/card-login_1.svelte";
+import Contact from "#sidebarCards/card-contact.svelte";
+import Review from "#sidebarCards/card-review.svelte";
+import VApromo from "#sidebarCards/card-VA-promo.svelte";
+import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
+import BApromo from "#sidebarCards/card-BA-promo.svelte";
+import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
+---
+
+<div class="hidden
+            xl:flex xl:flex-col xl:grow
+            ">
+            
+    <Login client:load />
+    <Contact client:load />
+    <Review client:load />
+    <VApromo client:load />
+    <VAGpromo client:load />
+    <BApromo client:load />
+    <BAGpromo client:load />
+</div>
+
+
+</div>

src/layouts/AusweisLayout.astro

@@ -75,7 +75,7 @@ const { title } = Astro.props;
 
 		<SidebarLeft />
 		
-		<article class="box grow">
+		<article class="box grow rounded-tl-none">
 		<slot />
 		</article>
 

src/layouts/Layout.astro

@@ -13,7 +13,6 @@ export interface Props {
 
 const { title } = Astro.props;
 
-
 ---
 
 <!DOCTYPE html>
@@ -38,8 +37,8 @@ const { title } = Astro.props;
 
 		<main
 			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
 			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
 			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
 			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
@@ -47,7 +46,7 @@ const { title } = Astro.props;
 
 		<SidebarLeft />
 		
-		<article class="box grow">
+		<article class="box grow rounded-tl-none">
 		<slot />
 		</article>
 		

src/layouts/Layout_1.astro

@@ -0,0 +1,63 @@
+---
+import "../style/global.css";
+import "../../svelte-dialogs.config"
+import Header from "#header/Header_1.astro";
+import Footer from "#footer/Footer.astro";
+import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
+import SidebarRight from "#sidebarRight/SidebarRight_1.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+---
+
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body>
+		<container class="w-full max-w-[1920px]">
+		
+		<Header />
+
+		<main
+			class="w-full p-0 grid
+			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
+			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
+			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
+			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
+			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
+		">
+
+		<SidebarLeft />
+		
+		<article class="box grow rounded-tl-none">
+		<slot />
+		</article>
+		
+		<SidebarRight />
+
+		</main>
+	
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
+
+

src/pages/index.astro

@@ -6,7 +6,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
 	<h1>Energieausweis online erstellen</h1>
-	<BannerPrice client:load />
+	<!--<BannerPrice client:load /> -->
 </Layout>
 
 

src/pages/index_1.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "#layouts/Layout_1.astro";
+import BannerPrice from "#content/banner-saeule.svelte";
+
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>Energieausweis online erstellen</h1>
+	<!--<BannerPrice client:load /> -->
+</Layout>
+
+
+
+

src/style/global.css

@@ -48,7 +48,7 @@
 
 
 body{
-	@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
+	@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed  max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
 }
 
 
@@ -96,7 +96,7 @@ article {
 .no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
 
 .nav-element:hover > .nav-element-child{ 
-    	@apply 		!bg-primary !text-white cursor-pointer 
+    	@apply 		!bg-primary !text-white cursor-pointer
 }
 
 .nav-element:hover > .nav-element-child .no-dropdown{ 
@@ -104,12 +104,12 @@ article {
 }
 
 .nav-element:hover > .dropdown-content{ 
-	@apply 			lg:visible lg:opacity-100 lg:block
+	@apply 			lg:visible lg:opacity-100 lg:block lg:ml-[2px]
 }
 
 .nav-element:hover:first-child > .nav-element-child{
     	@apply 		!rounded-none
-					xl:!rounded-tl-xl xl:!rounded-tr-none
+					lg:!rounded-tl-xl lg:!rounded-tr-none
 }
 
 .nav-element:hover:last-child > .nav-element-child{