Login Umgestaltung
This commit is contained in:
Moritz Utcke
233
src/pages/pdf/ansichtsausweis.astro
Normal file
233
src/pages/pdf/ansichtsausweis.astro
Normal file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
import moment from "moment";
|
||||
import Checkbox from "~/components/Checkbox.svelte";
|
||||
import PDFHeader from "~/components/PDF/PDFHeader.svelte";
|
||||
import PDFSectionHeader from "~/components/PDF/PDFSectionHeader.svelte";
|
||||
import PDFLayout from "~/layouts/PDFLayout.astro";
|
||||
---
|
||||
|
||||
<PDFLayout title="">
|
||||
<div class="flex flex-col gap-20">
|
||||
<div class="flex flex-col gap-2">
|
||||
<PDFHeader></PDFHeader>
|
||||
<PDFSectionHeader number={1}>
|
||||
<p class="text-xs">
|
||||
Gültig bis: <span
|
||||
>{
|
||||
moment().add("10", "years").format("DD. MMM. YYYY")
|
||||
}</span>
|
||||
</p>
|
||||
<p class="text-xs">Ausweis ID <span>1293819</span></p>
|
||||
<p class="text-xs">
|
||||
Registriernummer wird nach Zahlungseingang vergeben
|
||||
</p>
|
||||
</PDFSectionHeader>
|
||||
<div
|
||||
class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg"
|
||||
>
|
||||
<h2>Gebäude</h2>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Gebäudetyp</td>
|
||||
<td>Einfamilienhaus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Adresse</td>
|
||||
<td>Mönckebergstraße, 22049 Hamburg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudeteil</td>
|
||||
<td>Gesamtgebäude</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baujahr Gebäude ³</td>
|
||||
<td>1962</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
>Baujahr Wärmeerzeuger <sup>3</sup>
|
||||
<sup>4</sup></td
|
||||
>
|
||||
<td>1974</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anzahl Wohnungen</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>182m²</td>
|
||||
<td
|
||||
class="flex flex-row items-center h-full w-full gap-2 pl-2"
|
||||
>
|
||||
<input type="checkbox" />
|
||||
nach § 19 EnEV aus der Wohnfläche ermittelt
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
>Wesentliche Energieträger für<br /> Heizung und
|
||||
Warmwasser <sup>3</sup></td
|
||||
>
|
||||
<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="w-[35%]">
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<table></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>
|
||||
Hinweise zu den Angaben über die energetische Qualität des
|
||||
Gebäudes
|
||||
</h2>
|
||||
<div class="bg-white w-full">
|
||||
<p>
|
||||
Die energetische Qualität eines Gebäudes kann durch die
|
||||
Berechnung des <strong>Energiebedarfs</strong> unter Annahme
|
||||
von standardisierten Randbedingungen oder durch die Auswertung
|
||||
des <strong>Energieverbrauchs</strong> ermittelt werden. Als
|
||||
Bezugsfläche dient die energetische Gebäudenutzfläche nach der
|
||||
EnEV, die sich in der Regel von den allgemeinen Wohnflächenangaben
|
||||
unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige
|
||||
Vergleiche ermöglichen (<strong
|
||||
>Erläuterungen - siehe Seite 5</strong
|
||||
>). Teil des Energieausweises sind die
|
||||
Modernisierungsempfehlungen (Seite 4).
|
||||
</p>
|
||||
<Checkbox checked={true}>
|
||||
Der Energieausweis wurde auf der Grundlage von Berechnungen
|
||||
des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis).
|
||||
Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt.
|
||||
Zusätzliche Informationen zum Verbrauch sind freiwillig.
|
||||
</Checkbox>
|
||||
<Checkbox checked={false}>
|
||||
Der Energieausweis wurde auf der Grundlage von Auswertungen
|
||||
des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis).
|
||||
Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
|
||||
</Checkbox>
|
||||
<div class="flex flex-row justify-between items-center w-[80%]">
|
||||
<p>Datenerhebung Bedarf/Verbrauch durch</p>
|
||||
<Checkbox checked={true}>Eigentümer</Checkbox>
|
||||
<Checkbox checked={false}>Aussteller</Checkbox>
|
||||
</div>
|
||||
<Checkbox>
|
||||
Dem Energieausweis sind zusätzliche Informationen zur
|
||||
energetischen Qualität beigefügt (freiwillige Angabe).
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h2>Hinweise zur Verwendung des Energieausweises</h2>
|
||||
<p class="bg-white">
|
||||
Der Energieausweis dient lediglich der Information. Die Angaben
|
||||
im Energieausweis beziehen sich auf das gesamte Wohngebäude oder
|
||||
den oben bezeichneten Gebäudeteil. Der Energieausweis ist
|
||||
lediglich dafür gedacht, einen überschlägigen Vergleich von
|
||||
Gebäuden zu ermöglichen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
|
||||
<p>Aussteller:</p>
|
||||
</div>
|
||||
<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20"></div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<p>
|
||||
<sup>1</sup> Datum der angewendeten EnEV, gegebenenfalls angewendeten
|
||||
Änderungsverordnung zur EnEV
|
||||
</p>
|
||||
<p>
|
||||
<sup>2</sup> Bei nicht rechtzeitiger Zuteilung der Registriernummer
|
||||
(§ 17 Absatz 4 Satz 4 und 5 EnEV) ist das Datum der Antragstellung
|
||||
einzutragen; die Registriernummer ist nach deren Eingang nachträglich
|
||||
einzusetzen.
|
||||
</p>
|
||||
<p><sup>3</sup> Mehrfachangaben möglich</p>
|
||||
<p><sup>4</sup> bei Wärmenetzen Baujahr der Übergabestation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<PDFHeader></PDFHeader>
|
||||
<PDFSectionHeader number={2}>
|
||||
<p>Berechneter Energiebedarf des Gebäudes</p>
|
||||
</PDFSectionHeader>
|
||||
<div
|
||||
class="box"
|
||||
>
|
||||
<h2>Energiebedarf</h2>
|
||||
<div class="bg-white w-full flex flex-col">
|
||||
<div class="flex flex-col items-end text-center">
|
||||
<div class="flex flex-row">
|
||||
<span class="bg-gray-300 p-0.5">200</span>
|
||||
<span>kg/(m²a)</span>
|
||||
</div>
|
||||
<span>CO² Treibhausgas Emissionen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PDFLayout>
|
||||
|
||||
<style is:global>
|
||||
table {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
td > table td {
|
||||
@apply px-0 py-0 border-t-0 border-b-0;
|
||||
}
|
||||
|
||||
td:has(table) {
|
||||
@apply p-0;
|
||||
}
|
||||
|
||||
td > table td:first-child {
|
||||
@apply border-l-0;
|
||||
}
|
||||
|
||||
td > table td:last-child {
|
||||
@apply border-r-0;
|
||||
}
|
||||
|
||||
td {
|
||||
@apply border border-black px-1 text-xs py-0.5;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply font-bold text-sm;
|
||||
}
|
||||
|
||||
p,
|
||||
label {
|
||||
@apply text-xs;
|
||||
}
|
||||
|
||||
.box {
|
||||
@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
|
||||
}
|
||||
|
||||
.box > * {
|
||||
@apply px-1 py-0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user