159 lines
4.3 KiB
Plaintext
159 lines
4.3 KiB
Plaintext
---
|
|
|
|
import Layout from "#layouts/Layout.astro";
|
|
|
|
---
|
|
|
|
<Layout title="Welcher Energieausweis">
|
|
|
|
<h1 class="text-3xl">Welcher Energieausweis?</h1>
|
|
|
|
<div class="mt-12 m-auto w-[90%] relative">
|
|
<div id="OEA_widget">
|
|
<input id="recode" type="hidden" value="widgetvorlage">
|
|
|
|
<div id="OEA_input">
|
|
|
|
<div class="OEA_zeile1">
|
|
<div class="OEA_item1">
|
|
<div class="OEA_title1">Gebäudetyp</div>
|
|
<select class="OEA_auswahl1" id="OEA_changeTyp">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
|
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
|
|
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
|
<option value="Gewerbegebäude">Gewerbegebäude</option>
|
|
<option value="Mischgebäude">Mischgebäude</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="OEA_item2">
|
|
<div class="OEA_title1">Anlass</div>
|
|
<select class="OEA_auswahl1" id="OEA_changeAnlass">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
|
|
<option value="Modernisierung">Modernisierung</option>
|
|
<option value="Neubau">Neubau</option>
|
|
<option value="Erweiterung">Erweiterung</option>
|
|
<option value="Aushangpflicht">Aushangpflicht</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="OEA_zeile2">
|
|
<div class="OEA_item3">
|
|
<div class="OEA_title2">Baujahr</div>
|
|
<select class="OEA_auswahl2" id="changeBaujahr">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="1">vor 1978</option>
|
|
<option value="0">nach 1977</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="OEA_item4">
|
|
<div class="OEA_title2">Wohneinheiten</div>
|
|
<select class="OEA_auswahl2" id="changeEinheiten">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="1">bis 4 Wohneinheiten</option>
|
|
<option value="0">mehr als 4 Wohneinheiten</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="OEA_item5">
|
|
<div class="OEA_title2">Sanierungsstatus</div>
|
|
<select class="OEA_auswahl2" id="changeStatus">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="0">saniert</option>
|
|
<option value="1">unsaniert</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="OEA_item6 result">
|
|
<div id="OEA_result">
|
|
<div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
|
|
<p id="OEA_result_text"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="OEA_item7 referrer">
|
|
<div id="OEA_logo_referrer">
|
|
<img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="OEA_item8 ibcornelsen">
|
|
<div id="OEA_logo_IBC">
|
|
<a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
|
|
<div id="IBC_LOGO">powered by</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
#OEA_widget {
|
|
@apply bg-white p-6 rounded-lg shadow-lg space-y-6;
|
|
|
|
#OEA_input {
|
|
@apply space-y-4 space-x-4;
|
|
|
|
.OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
|
|
@apply space-y-2 w-full;
|
|
|
|
.OEA_title1, .OEA_title2 {
|
|
@apply font-bold text-lg text-white p-2 rounded;
|
|
}
|
|
}
|
|
|
|
.OEA_zeile1, .OEA_zeile2 {
|
|
@apply flex flex-row;
|
|
}
|
|
|
|
.OEA_title1 {
|
|
@apply bg-blue-900;
|
|
}
|
|
|
|
.OEA_title2 {
|
|
@apply bg-primary;
|
|
}
|
|
|
|
.OEA_auswahl1, .OEA_auswahl2 {
|
|
@apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
|
|
}
|
|
|
|
#OEA_result {
|
|
@apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
|
|
}
|
|
|
|
.OEA_title3 {
|
|
@apply text-xl font-semibold text-blue-900;
|
|
}
|
|
|
|
#OEA_logo_referrer img {
|
|
@apply w-full max-w-xs mx-auto;
|
|
}
|
|
|
|
#IBC_LOGO {
|
|
@apply text-center text-gray-500 font-semibold text-sm mt-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
@apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
|
|
}
|
|
|
|
|
|
.empfehlungen a {
|
|
@apply text-blue-600 underline hover:text-blue-800 font-semibold;
|
|
}
|
|
</style>
|