UMBE files für Templates
This commit is contained in:
Robert Jagtiani
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -1,5 +1,6 @@
|
||||
{
|
||||
"i18n-ally.localesPaths": [
|
||||
"public/locales"
|
||||
]
|
||||
],
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
10
src/components/UMBE_Footer.astro
Normal file
10
src/components/UMBE_Footer.astro
Normal file
@@ -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>
|
||||
45
src/components/UMBE_Header.astro
Normal file
45
src/components/UMBE_Header.astro
Normal file
@@ -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>
|
||||
9
src/components/UMBE_SidebarLeft.astro
Normal file
9
src/components/UMBE_SidebarLeft.astro
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import Navigation from "../components/UMBE_navcard.astro";
|
||||
---
|
||||
|
||||
<div class="flex flex-col gap-6 bg-slate-200 grow">
|
||||
|
||||
<Navigation>
|
||||
|
||||
</div>
|
||||
3
src/components/UMBE_SidebarRight.astro
Normal file
3
src/components/UMBE_SidebarRight.astro
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="flex flex-col gap-4 bg-slate-200 grow">
|
||||
|
||||
</div>
|
||||
100
src/components/UMBE_navcard.astro
Normal file
100
src/components/UMBE_navcard.astro
Normal file
@@ -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>
|
||||
96
src/layouts/UMBE_Layout.astro
Normal file
96
src/layouts/UMBE_Layout.astro
Normal file
@@ -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>
|
||||
16
src/pages/UMBE_test.astro
Normal file
16
src/pages/UMBE_test.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
|
||||
|
||||
import Layout from "#layouts/UMBE_Layout.astro";
|
||||
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<h1>HALLO</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
48
src/style/UMBE_global.css
Normal file
48
src/style/UMBE_global.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user