Immobilien & User hinzugefügt
This commit is contained in:
211
templates/immobilie/show.html.twig
Normal file
211
templates/immobilie/show.html.twig
Normal file
@@ -0,0 +1,211 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}{{ immobilie.adresse }} - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
.immobilie-detail {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.immobilie-header {
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.immobilie-typ-badge {
|
||||
display: inline-block;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.immobilie-adresse {
|
||||
font-size: 28px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.immobilie-preis-box {
|
||||
background: #e8f5e9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.preis-haupt {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #4CAF50;
|
||||
}
|
||||
.preis-pro-qm {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.detail-box {
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #4CAF50;
|
||||
}
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.beschreibung-box {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.status-verfuegbar {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.status-nicht-verfuegbar {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
}
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.features-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.features-list li {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.features-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.feature-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<a href="{{ path('app_immobilie_index') }}" class="back-link">← Zurück zur Übersicht</a>
|
||||
|
||||
<div class="immobilie-detail">
|
||||
<div class="immobilie-header">
|
||||
<span class="immobilie-typ-badge">{{ immobilie.typ.label }}</span>
|
||||
<h2 class="immobilie-adresse">{{ immobilie.adresse }}</h2>
|
||||
<span class="status-badge {{ immobilie.verfuegbar ? 'status-verfuegbar' : 'status-nicht-verfuegbar' }}">
|
||||
{{ immobilie.verfuegbar ? 'Verfügbar' : 'Nicht verfügbar' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="immobilie-preis-box">
|
||||
<div class="preis-haupt">{{ immobilie.preis|number_format(2, ',', '.') }} €</div>
|
||||
<div class="preis-pro-qm">{{ immobilie.preisProQm|number_format(2, ',', '.') }} € pro m²</div>
|
||||
</div>
|
||||
|
||||
<h3>Hauptmerkmale</h3>
|
||||
<div class="details-grid">
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Wohnfläche</div>
|
||||
<div class="detail-value">{{ immobilie.flaeche }} m²</div>
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Zimmer</div>
|
||||
<div class="detail-value">{{ immobilie.zimmer }}</div>
|
||||
</div>
|
||||
{% if immobilie.baujahr %}
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Baujahr</div>
|
||||
<div class="detail-value">{{ immobilie.baujahr }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if immobilie.etage is not null %}
|
||||
<div class="detail-box">
|
||||
<div class="detail-label">Etage</div>
|
||||
<div class="detail-value">{{ immobilie.etage }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<h3>Ausstattung & Extras</h3>
|
||||
<ul class="features-list">
|
||||
<li>
|
||||
<span class="feature-icon">🚗</span>
|
||||
<strong>Garage:</strong> {{ immobilie.garage ? 'Ja' : 'Nein' }}
|
||||
</li>
|
||||
{% if immobilie.balkonFlaeche %}
|
||||
<li>
|
||||
<span class="feature-icon">🌿</span>
|
||||
<strong>Balkon:</strong> {{ immobilie.balkonFlaeche }} m²
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.kellerFlaeche %}
|
||||
<li>
|
||||
<span class="feature-icon">📦</span>
|
||||
<strong>Keller:</strong> {{ immobilie.kellerFlaeche }} m²
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.heizungstyp %}
|
||||
<li>
|
||||
<span class="feature-icon">🔥</span>
|
||||
<strong>Heizung:</strong> {{ immobilie.heizungstyp }}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if immobilie.nebenkosten %}
|
||||
<li>
|
||||
<span class="feature-icon">💶</span>
|
||||
<strong>Nebenkosten:</strong> {{ immobilie.nebenkosten|number_format(2, ',', '.') }} € / Monat
|
||||
</li>
|
||||
{% endif %}
|
||||
<li>
|
||||
<span class="feature-icon">📊</span>
|
||||
<strong>Gesamtfläche:</strong> {{ immobilie.gesamtflaeche }} m²
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% if immobilie.beschreibung %}
|
||||
<h3>Beschreibung</h3>
|
||||
<div class="beschreibung-box">
|
||||
{{ immobilie.beschreibung|nl2br }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; color: #666; font-size: 14px;">
|
||||
Erstellt am: {{ immobilie.createdAt|date('d.m.Y H:i') }} Uhr<br>
|
||||
Zuletzt aktualisiert: {{ immobilie.updatedAt|date('d.m.Y H:i') }} Uhr
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user