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

bannersäulen

Browse Source
This commit is contained in:
Robert Jagtiani
2024-11-19 19:35:04 +01:00
parent a36619fa07
commit 28c9df7e18
7 changed files with 159 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.vscode/settings.json vendored
View File

@@ -8,9 +8,10 @@
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore",
"less.lint.unknownAtRules": "ignore"
}
"workbench.colorCustomizations": {
"minimap.background": "#00000000",
"scrollbar.shadow": "#00000000"
}
},
}

7
package.json
View File

@@ -47,13 +47,14 @@
"katex": "^0.16.7",
"moment": "^2.29.4",
"moment-timezone": "^0.5.45",
"postcss-nested": "^7.0.2",
"radix-svelte-icons": "^1.0.0",
"sass": "^1.62.1",
"svelte": "^3.59.1",
"svelte-dialogs": "^1.2.2",
"svelte-preprocess": "^5.0.3",
"svelte-ripple-action": "^1.0.5",
"tailwindcss": "^3.3.2",
"tailwindcss": "^3.4.15",
"trpc-openapi": "^1.2.0",
"uuid": "^9.0.0",
"zod": "^3.22.4"
@@ -67,12 +68,16 @@
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"autoprefixer": "^10.4.20",
"bun-types": "^1.0.22",
"cypress": "^13.6.2",
"cypress-file-upload": "^5.0.8",
"daisyui": "^4.6.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"postcss": "^8.4.49",
"postcss-import": "^16.1.0",
"postcss-nesting": "^13.0.1",
"prettier": "^2.8.8",
"typescript": "^4.9.5"
}

11
postcss.config.js Normal file
View File

@@ -0,0 +1,11 @@
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
'postcss-preset-env': {
features: { 'nesting-rules': false },
},
}
}

147
src/components/UMBE_banner-saeule.svelte
View File

@@ -1,28 +1,133 @@
<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
<script>
import { PRICES } from "#lib/constants";
</script>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div id="saeulen">
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="name">Bedarfsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<style lang="scss">
#saeulen{@apply grid grid-cols-[1fr,1fr,1fr,1fr] gap-4;
.saeule{@apply grid;
img{@apply w-full justify-self-center mb-1}
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
.name{@apply w-full}
.name{font-size: clamp(15px, 2vh, 18px)}
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
.ab{@apply leading-[1]}
.mwst{@apply leading-[auto]}
.price{font-size: clamp(15px, 5vh, 50px)}
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
.services{@apply py-2}
.services:first-child{@apply font-bold}
.services:nth-child(even){@apply bg-secondary/10}
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
}
}
</style>

2
src/pages/UMBE_test.astro
View File

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

10
src/style/UMBE_global.css
View File

@@ -37,6 +37,14 @@
font-family: "Antique Olive Compact bold";
}
.promo1{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222;
}
body{
@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
@@ -112,7 +120,7 @@ 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
lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}

5
tailwind.config.cjs
View File

@@ -128,8 +128,9 @@ module.exports = {
'5xl': '4.210rem',
},
fontFamily: {
heading: 'Abel',
body: 'Abel',
heading: 'Heron',
body: 'Heron',
},
fontWeight: {
normal: '400',