40 lines
2.9 KiB
Twig
40 lines
2.9 KiB
Twig
<div class="tile performance-overview-tile" style="grid-column: span 3; grid-row: span 2;">
|
|
<div class="tile-title">Performance-Übersicht</div>
|
|
<div class="performance-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; height: calc(100% - 40px);">
|
|
<!-- Power -->
|
|
{% if tile.drivingCharacteristics.power %}
|
|
<div style="text-align: center; padding: 12px; background: linear-gradient(135deg, rgba(0,122,204,0.1), rgba(0,122,204,0.05)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center;">
|
|
<div style="font-size: 24px; font-weight: bold; color: #007acc; margin-bottom: 4px;">{{ tile.drivingCharacteristics.power.kilowatts|round }}</div>
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 2px;">kW</div>
|
|
<small style="color: #666; font-weight: 600;">Leistung</small>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Top Speed -->
|
|
{% if tile.drivingCharacteristics.topSpeed %}
|
|
<div style="text-align: center; padding: 12px; background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(255,193,7,0.05)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center;">
|
|
<div style="font-size: 24px; font-weight: bold; color: #ffc107; margin-bottom: 4px;">{{ tile.drivingCharacteristics.topSpeed.kmh }}</div>
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 2px;">km/h</div>
|
|
<small style="color: #666; font-weight: 600;">Höchstgeschwindigkeit</small>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Acceleration -->
|
|
{% if tile.drivingCharacteristics.acceleration %}
|
|
<div style="text-align: center; padding: 12px; background: linear-gradient(135deg, rgba(40,167,69,0.1), rgba(40,167,69,0.05)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center;">
|
|
<div style="font-size: 24px; font-weight: bold; color: #28a745; margin-bottom: 4px;">{{ tile.drivingCharacteristics.acceleration.secondsFrom0To100 }}</div>
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 2px;">sec</div>
|
|
<small style="color: #666; font-weight: 600;">0-100 km/h</small>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Consumption -->
|
|
{% if tile.drivingCharacteristics.consumption %}
|
|
<div style="text-align: center; padding: 12px; background: linear-gradient(135deg, rgba(111,66,193,0.1), rgba(111,66,193,0.05)); border-radius: 8px; display: flex; flex-direction: column; justify-content: center;">
|
|
<div style="font-size: 20px; font-weight: bold; color: #6f42c1; margin-bottom: 4px;">{{ tile.drivingCharacteristics.consumption.energyPerKm.kwh|round(1) }}</div>
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 2px;">kWh/100km</div>
|
|
<small style="color: #666; font-weight: 600;">Verbrauch</small>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div> |