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

Merge pull request #14 from IBCornelsen/UMBE

Browse Source 
HEADER Variation
This commit is contained in:
UMBENOMENA
2024-11-29 20:06:39 +01:00
committed by GitHub
parent 0e1f02f256 c029077aef
commit ca58bbcf39
14 changed files with 337 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,23 @@
<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">
---
import Login from "#sidebarCards/card-login.svelte";
---
<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

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

@@ -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>

86
src/components/design/sidebars/cards/card-login.svelte Normal file
View File

@@ -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>

2
src/components/design/sidebars/cards/SidebarWidgetLogin.svelte → src/components/design/sidebars/cards/card-login_1.svelte
View File

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

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

@@ -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}

4
src/components/design/sidebars/right/SidebarRight.astro
View File

@@ -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 />

25
src/components/design/sidebars/right/SidebarRight_1.astro Normal file
View File

@@ -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>

2
src/layouts/AusweisLayout.astro
View File

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

7
src/layouts/Layout.astro
View File

@@ -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
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
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
@@ -47,7 +46,7 @@ const { title } = Astro.props;
<SidebarLeft />
<article class="box grow">
<article class="box grow rounded-tl-none">
<slot />
</article>

63
src/layouts/Layout_1.astro Normal file
View File

@@ -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>

2
src/pages/index.astro
View File

@@ -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>

14
src/pages/index_1.astro Normal file
View File

@@ -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>

8
src/style/global.css
View File

@@ -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{