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

widget css immowelt #321

Merged
UMBENOMENA merged 1 commits from UMBE into main 2025-02-09 19:25:08 +00:00
Conversation 0 Commits 1 Files Changed 10 +595 -29
10 changed files with 595 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/images/immowelt/gewerbegebaeude_immowelt.svg Normal file
View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
<defs>
<style>
.cls-1 {
fill: #fc0;
}
.cls-2 {
fill: #222;
}
</style>
</defs>
<g id="Wellen">
<path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
<path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
</g>
<g id="Gewerbegebaeude">
<path class="cls-2" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
<path class="cls-2" d="M254.81,65.15c-.02-6.59,0-45.44,0-45.44l-24.88-6.69v66.43s11.96-.84,24.22-12.71c.42-.41.66-.99.65-1.6Z"/>
<g>
<polygon class="cls-2" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
<polygon class="cls-2" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
<polygon class="cls-2" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
<polygon class="cls-2" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
<polygon class="cls-2" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
<path class="cls-2" d="M122.76,70.93c3.1.69,6.21,1.48,9.24,2.28,1.2.32,2.39.63,3.57.94l91.08.55v-5.86l-119.43-.7h-.09c5.22.81,10.49,1.66,15.63,2.79Z"/>
</g>
<g>
<polygon class="cls-2" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
<polygon class="cls-2" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
<path class="cls-2" d="M43.86,67.57c7.08-1.11,14.25-1.82,21.44-2.12v-5.15l-55.63,4.35.17,7.82,34.02-4.9Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

40
public/images/immowelt/wohngebaeude_immowelt.svg Normal file
View File

@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
<defs>
<style>
.cls-1 {
fill: #fc0;
}
.cls-2 {
fill: #222;
}
.cls-3 {
fill: #c6c6c6;
}
</style>
</defs>
<g id="Wellen">
<path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
<path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
</g>
<g id="Wohngebaeude">
<g>
<path class="cls-2" d="M62.1,66.01L103.83,11.59l52.17,63.63s72.22,24.35,98.81-11.35l-26.6-38.82-27.22-4.45V0h-19.83v39.66h-7.08v-22.76L101.52,4.02l-39.42,61.99Z"/>
<polygon class="cls-2" points="72.53 39.06 91.66 14.16 47.37 14.16 10.07 72.88 49 19.22 72.53 39.06"/>
<g>
<rect class="cls-3" x="90.51" y="35.34" width="11.33" height="12.75"/>
<rect class="cls-3" x="103.26" y="35.34" width="11.33" height="12.75"/>
<rect class="cls-3" x="90.51" y="49.51" width="11.33" height="12.75"/>
<rect class="cls-3" x="103.26" y="49.51" width="11.33" height="12.75"/>
</g>
<g>
<rect class="cls-3" x="40.93" y="35.41" width="5.67" height="8.5"/>
<rect class="cls-3" x="48.02" y="35.41" width="5.67" height="8.5"/>
<rect class="cls-3" x="40.93" y="45.33" width="5.67" height="8.5"/>
<rect class="cls-3" x="48.02" y="45.33" width="5.67" height="8.5"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

474
public/images/right-sidebar/promo-boxes_immowelt_CD.ai Normal file
View File

File diff suppressed because one or more lines are too long

4
src/components/design/content/ProduktUebersichtBedarfsausweisGewerbe.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtBedarfssausweisGewerbe">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtBedarfsausweisWohnen.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtBedarfssausweisWohnen">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtVerbrauchsausweisGewerbe.svelte
View File

@@ -26,7 +26,7 @@
<div id="ProduktUebersichtVerbrauchsausweisGewerbe">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

4
src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte
View File

@@ -26,7 +26,7 @@ bullets = [
<div id="ProduktUebersichtVerbrauchsausweisWohnen">
<div class="w-full sm:w-[80%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="w-full sm:w-[90%] sm:mx-auto grid grid-cols-[1fr_max-content_max-content_max-content] sm:grid-cols-[1fr_min-content_min-content_min-content]">
<div class="zeile grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center sm:text-[1.25rem]">
<div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>
@@ -82,6 +82,6 @@ bullets = [
@apply text-[1.25rem] sm:text-[1.5rem] font-bold text-red-700;
}
.price{@apply text-[1.15rem] sm:text-[1.5rem]}
.price{@apply text-[1.25rem] sm:text-[2rem]}
</style>

18
src/components/design/content/WidgetCardTemplate.svelte
View File

@@ -31,9 +31,7 @@
/>
<div class="justify-self-start">
<p class="promo">
<span class="[font-family:Antique_Olive_Compact_bold]">
ab {price} €
</span>
ab {price} €
</p>
</div>
@@ -80,7 +78,7 @@
.sumCent{@apply justify-self-center col-span-2 md:mb-6}
.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
.forServices{@apply w-full md:w-auto}
.forServices{@apply block}
.image{@apply w-[75%] justify-self-center
md:w-[75%] md:pl-12}
@@ -88,11 +86,11 @@
.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-[0.5rem] text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary}
.buttoncol{@apply mt-[0.5rem] text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
hover:bg-[#222222] hover:text-white}
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
.promo{@apply tracking-tighter text-[2rem] text-gray-700 pl-12 m-0 -mt-4;
font-family: "Antique Olive Compact bold";}
@@ -104,16 +102,16 @@ hover:bg-primary}
}
.services {
@apply hidden w-full text-start py-1 md:grid grid-cols-[1fr_minmax(25px,50px)] items-center;
@apply hidden w-full text-start py-1 md:grid md:grid-cols-[1fr_50px]
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end font-bold text-green-700;
@apply justify-self-end self-center font-bold text-green-700;
}
.check-no {
@apply justify-self-end font-bold text-red-700;
@apply justify-self-end self-center font-bold text-red-700;
}
</style>

40
src/components/widgets/WelcherAusweisWidget_1.svelte
View File

@@ -170,7 +170,7 @@ $: {
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
src="/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
@@ -195,7 +195,7 @@ $: {
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
src="/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -212,7 +212,7 @@ $: {
</div>
{/if}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (ausnahme === false)}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
@@ -220,13 +220,13 @@ $: {
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
services={[
["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
["Wird nicht immer bei den Banken akzeptiert.", false],
@@ -247,7 +247,7 @@ $: {
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -273,7 +273,7 @@ $: {
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="nein"
@@ -300,7 +300,7 @@ $: {
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="nein"
@@ -340,8 +340,26 @@ $: {
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
}
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
*{font-family: "Heron";}
@font-face {
font-family: "immo Sans Bold";
src: url('/fonts/Immo-Sans/immoSans-Bold.eot');
src: url('/fonts/Immo-Sans/immoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff2') format('woff2'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff') format('woff');
font-style: normal;
font-weight: 700;
}
*{font-family: "immo Sans";}
#OEA_widget {
@apply min-w-[320px] max-w-[1920px] p-[4px]
@@ -350,7 +368,7 @@ $: {
.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-white font-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
.titel{@apply text-black font-bold bg-[#ffcc00] px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
@@ -359,7 +377,7 @@ $: {
.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-black font-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}

1
src/style/global.css
View File

@@ -35,6 +35,7 @@
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
color:#222222;
}