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

Energetischer Ist-Zustand Dach fertiggestellt

Browse Source
This commit is contained in:
Jens Cornelsen
2025-01-09 00:42:45 +01:00
parent 87780216dc
commit 6e60973767
9 changed files with 1173 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/images/sanierungsfahrplan/farbeEnergieEffizienzEins.svg Normal file
View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="17.968029mm"
height="4.0999832mm"
viewBox="0 0 17.968029 4.0999832"
version="1.1"
id="svg1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" />
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath8889">
<path
d="M 0,0 H 595.276 V 841.89001 H 0 Z"
transform="translate(-52.157501,-438.8346)"
id="path8889" />
</clipPath>
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-95.779167,-146.57917)">
<path
id="path8888"
d="m 0,0 c -3.131,0 -5.669,-2.538 -5.669,-5.669 v -0.284 c 0,-3.1309996 2.538,-5.669 5.669,-5.669 h 39.595001 c 3.131001,0 5.668999,2.5380004 5.668999,5.669 v 0.284 C 45.264,-2.538 42.726002,0 39.595001,0 Z"
style="fill:#00a759 icc-color(sRGB-IEC61966-2, 0.1, 0, 0.65400696, 0.34899902);fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0.35277776,0,0,-0.35277776,97.779064,146.57917)"
clip-path="url(#clipPath8889)"
inkscape:export-filename="farbeEnergieEffizienzEins.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

47
public/images/sanierungsfahrplan/farbeEnergieEffizienzZwei.svg Normal file
View File

@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="17.968029mm"
height="4.0999832mm"
viewBox="0 0 17.968029 4.0999832"
version="1.1"
id="svg1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" />
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath8891">
<path
d="M 0,0 H 595.276 V 841.89001 H 0 Z"
transform="translate(-52.157501,-413.6851)"
id="path8891" />
</clipPath>
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-95.779167,-146.57917)">
<path
id="path8890"
d="m 0,0 c -3.131,0 -5.669,-2.538 -5.669,-5.669 v -0.284 c 0,-3.1309996 2.538,-5.669 5.669,-5.669 h 39.595001 c 3.131001,0 5.668999,2.5380004 5.668999,5.669 v 0.284 C 45.264,-2.538 42.726002,0 39.595001,0 Z"
style="fill:#56be06 icc-color(sRGB-IEC61966-2, 0.1, 0.33898926, 0.74499512, 0.02198792);fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(0.35277776,0,0,-0.35277776,97.779064,146.57917)"
clip-path="url(#clipPath8891)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

850
public/images/sanierungsfahrplan/farbenEnergieEffizienzHuelle.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 225 KiB

89
public/images/sanierungsfahrplan/skalaEnergieEffizienzVertikal.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

103
src/components/design/content/SanierungsFahrplanBauteilTemplate.svelte Normal file
View File

@@ -0,0 +1,103 @@
<div class="bauteilBox">
<div class="farbBox">
<div class="labelBox">Farbklasse</div>
<div class="farbe"><div class="farbBalkenEins"></div></div>
<div class="farbe"><div class="farbBalkenZwei"></div></div>
<div class="farbe"><div class="farbBalkenDrei"></div></div>
<div class="farbe"><div class="farbBalkenVier"></div></div>
<div class="farbe"><div class="farbBalkenFuenf"></div></div>
<div class="farbe"><div class="farbBalkenAcht"></div></div>
<div class="farbe"><div class="farbBalkenNeun"></div></div>
</div>
<div class="inhaltsBox">
<div class="labelBox">U-Wert [W/(m²K)] / Beschreibung</div>
<div class="textZeileEins">≤ 0,12 / Sparrendach geneigt und stark hinterlüftet mit 20cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
<div class="textZeileZwei">≤ 0,14 / Sparrendach geneigt und stark hinterlüftet mit 18cm PUR/PIR-Hartschaum Aufsparrendämmung (hocheffiziente Dämmung mit WLG 0,024)</div>
<div class="textZeileDrei">≤ 0,24 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung und 5 cm Untersparrendämmung (Standarddämmung mit WLG 0,04)</div>
<div class="textZeileVier">≤ 0,30 / Sparrendach geneigt und hinterlüftet mit 18cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
<div class="textZeileFuenf">≤ 0,50 / Sparrendach geneigt und hinterlüftet mit 12cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
<div class="textZeileAcht">≤ 0,80 / Sparrendach geneigt und hinterlüftet mit 5cm mineralischer Zwischensparren- <br>dämmung (Standarddämmung mit WLG 0,04)</div>
<div class="textZeileNeun">> 0,80 / Sparrendach geneigt und hinterlüftet ungedämmt oder weniger als 5cm Zwischensparrendämmung (Standarddämmung mit WLG 0,04)</div>
</div>
</div>
<style lang="scss">
.bauteilBox {
@apply w-2/3 grid gap-2 items-stretch border-2 p-4 mt-8;
grid-template-columns: 1fr 5fr; /* 1/6 for farbBox and 5/6 for inhaltsBox */
}
.farbe {
@apply flex justify-center items-center;
}
.labelBox {
@apply flex justify-start items-center text-lg font-bold;
}
.farbBalkenEins {
@apply flex w-full bg-effizienzFarbe-1 rounded-3xl h-6;
}
.farbBalkenZwei {
@apply flex w-full bg-effizienzFarbe-2 rounded-3xl h-6;
}
.farbBalkenDrei {
@apply flex w-full bg-effizienzFarbe-3 rounded-3xl h-6;
}
.farbBalkenVier {
@apply flex w-full bg-effizienzFarbe-4 rounded-3xl h-6;
}
.farbBalkenFuenf {
@apply flex w-full bg-effizienzFarbe-5 rounded-3xl h-6;
}
.farbBalkenAcht {
@apply flex w-full bg-effizienzFarbe-8 rounded-3xl h-6;
}
.farbBalkenNeun {
@apply flex w-full bg-effizienzFarbe-9 rounded-3xl h-6;
}
.inhaltsBox {
@apply grid grid-rows-8 gap-3 ml-3 pb-3;
}
.farbBox {
@apply grid grid-rows-8 gap-3 pb-3;
}
.textZeileEins {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-1;
}
.textZeileZwei {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-2;
}
.textZeileDrei {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-3;
}
.textZeileVier {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-4;
}
.textZeileFuenf {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-5;
}
.textZeileAcht {
@apply flex justify-start items-center bg-white p-1 border-2 border-effizienzFarbe-8;
}
.textZeileNeun {
@apply flex justify-start items-center bg-white p-1 border-effizienzFarbe-9;
}
</style>

14
src/components/design/content/SanierungsFahrplanIstTemplate.svelte
View File

@@ -1,4 +1,3 @@
<div class="beam">
<img class="skalaBeam" src="/images/sanierungsfahrplan/skalaEnergieEffizienz.svg" alt="Skala Energieeffizienz"/>
</div>
@@ -10,9 +9,13 @@
<div class="card-subtitle">*inklusive Kellerwänden</div>
</div>
<!-- Dach -->
<div class="card">
<img class="hausIcon" src="/images/sanierungsfahrplan/hausIconDach.svg" alt="Hausicondach"/>
<div class="card-subtitle">inklusive Kellerwänden</div>
<div class="card" id="card">
<img
href="/sanierungsfahrplan/dach"
class="hausIcon cursor-pointer"
src="/images/sanierungsfahrplan/hausIconDach.svg"
alt="Hausicondach"/>
<div class="card-subtitle">oberer Gebäudeabschluss</div>
</div>
<!-- Lüftung -->
<div class="card">
@@ -64,7 +67,7 @@
.wrapper {
@apply grid grid-cols-3 gap-6 items-center justify-center px-10 m-6 py-10;
@apply grid grid-cols-3 gap-10 items-center justify-center px-10 m-6 py-10;
}
.card {
@@ -79,5 +82,4 @@
.hausIcon {
@apply w-full;}
</style>

15
src/pages/sanierungsfahrplan/dach/index.astro Normal file
View File

@@ -0,0 +1,15 @@
---
import Layout from "#layouts/Layout.astro";
import SanierungsFahrplanBauteilTemplate from "#components/design/content/SanierungsFahrplanBauteilTemplate.svelte";
---
<Layout title="Sanierungsfahrplan - Dach">
<h1>Dach - energetischer Istzustand</h1>
<h2>Überblick zum energetischen Istzustand des Daches ihres Hauses</h2>
<SanierungsFahrplanBauteilTemplate />
</Layout>

2
src/pages/sanierungsfahrplan/index.astro
View File

@@ -10,6 +10,6 @@ import SanierungsFahrplanIstTemplate from "#components/design/content/Sanierungs
<h2>Überblick zum energetischen Istzustand und Sanierungsbedarf ihres Hauses</h2>
<SanierungsFahrplanIstTemplate />
<SanierungsFahrplanIstTemplate client:load/>
</Layout>

11
tailwind.config.cjs
View File

@@ -37,7 +37,16 @@ module.exports = {
"formular-rahmen": "rgba(255,204,6,1)",
"bereich-box": "rgba(252,234,187,0.2)",
"effizienzFarbe-1": "#00a759ff",
"effizienzFarbe-2": "#56be06ff",
"effizienzFarbe-3": "#d2dd00ff",
"effizienzFarbe-4": "#fbe115ff",
"effizienzFarbe-5": "#fbb900ff",
"effizienzFarbe-6": "#f59401ff",
"effizienzFarbe-7": "#ef6800ff",
"effizienzFarbe-8": "#dd2a1bff",
"effizienzFarbe-9": "#b11c0cff",
"pdf-yellow-bright": "#f3cb00",
"pdf-yellow-light": "#fff6ca",