UMBE files für Templates

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
 	"i18n-ally.localesPaths": [
 		"public/locales"
-	]
+	],
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

src/components/UMBE_Footer.astro

@@ -0,0 +1,10 @@
+---
+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>

src/components/UMBE_Header.astro

@@ -0,0 +1,45 @@
+<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"
+			>
+				Energieausweis online erstellen
+			</h2>
+			<h2
+				class="text-primary font-semibold text-xl absolute top-16 right-4"
+			>
+				Energieausweise nach aktueller GEG
+			</h2>
+	</a>
+	<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
+		<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>
+			
+			<a class="hamburger_menu"
+				><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
+			>
+		</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/UMBE_SidebarLeft.astro

@@ -0,0 +1,9 @@
+---
+import Navigation from "../components/UMBE_navcard.astro";
+---
+
+<div class="flex flex-col gap-6 bg-slate-200 grow">
+
+<Navigation>
+
+</div>

src/components/UMBE_SidebarRight.astro

@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4 bg-slate-200 grow">
+
+</div>

src/components/UMBE_navcard.astro

@@ -0,0 +1,100 @@
+<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>
+
+    <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>    
+    </ul>
+
+</li>
+
+<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>
+    </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>
+    </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>
+    </ul>
+</li>
+
+<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
+}
+
+.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;
+
+}
+
+.nav-element:hover > .nav-element-link, .nav-second:hover > .nav-element-link{ 
+	@apply text-white
+}
+
+.nav-element ul{margin: -1px 0;}
+
+</style>

src/layouts/UMBE_Layout.astro

@@ -0,0 +1,96 @@
+---
+import i18next from "i18next";
+
+import "../style/UMBE_global.css";
+import "../../svelte-dialogs.config"
+import Footer from "../components/UMBE_Footer.astro";
+import Header from "../components/UMBE_Header.astro";
+import SidebarLeft from "../components/UMBE_SidebarLeft.astro";
+import SidebarRight from "../components/UMBE_SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+
+---
+
+<!DOCTYPE html>
+<html lang={i18next.language}>
+	<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="max-w-[1920px] w-full mx-auto bg-slate-600 grid  border-solid border-grey-200 border">
+		<Header />
+		<main
+			class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full bg-base-100"
+		>
+			<SidebarLeft />
+			<article class="w-full max-w-full bg-base-200 border border-base-300">
+				<slot />
+			</article>
+			<SidebarRight />
+		
+		</main>
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
+
+<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>

src/pages/UMBE_test.astro

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

src/style/UMBE_global.css

@@ -0,0 +1,48 @@
+@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");
+
+* {
+	font-weight: 400;
+	box-sizing: border-box;
+	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;
+}
+
+article {
+	@apply px-6 md:px-8 py-6 w-full relative bg-white;
+}
+
+article h1 {
+	@apply text-4xl font-normal my-4;
+}
+
+article h2 {
+	@apply text-2xl font-normal my-4;
+}
+
+article h3 {
+	@apply text-xl font-normal my-2;
+}
+
+article a {
+	@apply text-blue-700 font-medium text-lg;
+}
+
+article select {
+	@apply rounded-lg px-2 py-1.5 outline-none;
+}
+
+.checkbox {
+	@apply h-5 w-4 checkbox-secondary;
+}