|
|
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| {{#if:{{{bild|}}}|[[File:{{{bild}}}|thumb|right|250px]]}}
| | <noinclude>[[Kategorie:Vorlage]]</noinclude> |
|
| |
|
| <div class="forza-car-info">
| | {{#if:{{{bild|}}}|[[File:{{{bild}}}|thumb|right|280px]]}} |
|
| |
|
| <!-- Obere Info-Bar (wie bei dir) --> | | <div class="forza-car-box"> |
| <div class="info-container"> | | |
| <div class="availability">🚗 Verfügbarkeit: {{{verfugbarkeit|Autoshow + Wheelspins}}}</div> | | <!-- Obere Info-Bar --> |
| <div class="drive">⚙️ {{{antrieb|AWD}}}</div> | | |
| | | <div>🚗 Verfügbarkeit: {{{verfugbarkeit|Autoshow + Wheelspins}}}</div> |
| <span class="class-box class-{{#lc:{{{klasse|D}}}}}">{{{klasse|D}}}</span>
| | <div>⚙️ {{{antrieb|AWD}}}</div> |
| <span class="pi-box">PI {{{pi|100}}}</span>
| | |
| | <span class="class-badge class-{{#lc:{{{klasse|D}}}}}">{{{klasse|D}}}</span> |
| | <span class="pi-badge">PI {{{pi|100}}}</span> |
| | </div> |
| </div> | | </div> |
| </div>
| |
|
| |
| <!-- Performance Balken -->
| |
| <div class="stat-row">
| |
| <span class="stat-label">Geschwindigkeit</span>
| |
| <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{geschwindigkeit|6.0}}} / 10) * 100}}%;"></div></div>
| |
| <span class="stat-value">{{{geschwindigkeit|6.0}}}</span>
| |
| </div>
| |
|
| |
| <div class="stat-row">
| |
| <span class="stat-label">Handling</span>
| |
| <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{handling|2.6}}} / 10) * 100}}%;"></div></div>
| |
| <span class="stat-value">{{{handling|2.6}}}</span>
| |
| </div>
| |
|
| |
|
| <div class="stat-row"> | | <!-- Statistik Zeilen --> |
| <span class="stat-label">Beschleunigung</span> | | <div class="stat-list"> |
| <div class=" progress- container">< div class=" progress- bar" style="width:{{#expr: ({{{beschleunigung|3.7}}} / 10) * 100}}%;"></ div></div> | | <div class=" stat- item">< span class=" stat- name"> Geschwindigkeit</ span><span class="stat- val">{{{ geschwindigkeit| 6. 0}}}</span></div> |
| <span class="stat-value">{{{beschleunigung|3.7}}}</span>
| | <div class="stat- item"><span class="stat- name"> Handling</span>< span class=" stat- val">{{{ handling| 2. 6}}} </ span></div> |
| </div> | | <div class="stat-item"><span class="stat-name">Beschleunigung</span><span class="stat-val">{{{beschleunigung|3.7}}}</span></div> |
| | | <div class="stat- item"><span class="stat- name"> Start</span>< span class=" stat- val">{{{ start| 1. 7}}} </ span></div> |
| <div class="stat-row"> | | <div class="stat-item"><span class="stat-name">Bremsen</span><span class="stat-val">{{{bremsen|2.0}}}</span></div> |
| <span class="stat-label">Start</span>
| | <div class="stat- item"><span class="stat- name">Offroad</span><span class="stat- val">{{{offroad|5.1}}}</span></div> |
| <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{start|1.7}}} / 10) * 100}}%;"></div></div>
| |
| <span class="stat-value">{{{start|1.7}}}</span>
| |
| </div> | |
| | |
| <div class="stat-row"> | |
| <span class="stat-label">Bremsen</span>
| |
| <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{bremsen|2.0}}} / 10) * 100}}%;"></div></div>
| |
| <span class="stat-value">{{{bremsen|2.0}}}</span>
| |
| </div> | |
| | |
| <div class="stat-row"> | |
| <span class="stat-label">Offroad</span>
| |
| <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{offroad|5.1}}} / 10) * 100}}%;"></div></div>
| |
| <span class="stat-value">{{{offroad|5.1}}}</span>
| |
| </div> | |
| | |
| <!-- Toggle / Zusätzliche Infos -->
| |
| <div class="toggle-container">
| |
| <div class="toggle-btn" onclick="this.nextElementSibling.style.display = (this.nextElementSibling.style.display === 'block') ? 'none' : 'block';">
| |
| ▼ Leistungsdaten & Fahrzeugtyp
| |
| </div> | | </div> |
| <div class="toggle-content">
| |
| <p><b>Fahrzeugtyp:</b> {{{fahrzeugtyp|}}}</p>
| |
| <p><b>Seltenheit:</b> {{{seltenheit|}}}</p>
| |
| <p><b>Land:</b> {{{land|}}}</p>
| |
| <p><b>Leistung:</b> {{{leistung|}}} PS</p>
| |
| <p><b>Gewicht:</b> {{{gewicht|}}} kg</p>
| |
| </div>
| |
| </div>
| |
|
| |
|
| </div> | | </div> |
|
| |
| <!-- CSS (vorläufig inline) -->
| |
| <style>
| |
| .info-container { display: flex; justify-content: space-between; background:#f5f5f5; padding:6px; border-radius:4px; margin-bottom:10px; font-weight:bold; }
| |
| .availability { flex:2; }
| |
| .drive { flex:1; }
| |
| .class-pi { display:flex; gap:8px; align-items:center; }
| |
| .class-box { color:white; padding:4px 10px; border-radius:4px; font-weight:bold; }
| |
| .class-d { background:#3dbaea; }
| |
| .class-c { background:#f6bf31; }
| |
| .class-b { background:#ff6533; }
| |
| .class-a { background:#fc355a; }
| |
| .class-s1 { background:#bd5ee4; }
| |
| .class-s2 { background:#1567d6; }
| |
| .class-x { background:#90cf00; }
| |
| .pi-box { background:#333; color:white; padding:4px 10px; border-radius:4px; }
| |
|
| |
| .stat-row { display:flex; align-items:center; margin:6px 0; }
| |
| .stat-label { width:110px; }
| |
| .progress-container { flex:1; background:#eee; height:9px; border-radius:4px; margin:0 10px; }
| |
| .progress-bar { height:100%; background:#d13f8d; border-radius:4px; }
| |
| .stat-value { width:45px; text-align:right; font-weight:bold; }
| |
|
| |
| .toggle-btn { background:#d13f8d; color:white; padding:8px; border-radius:4px; cursor:pointer; margin-top:10px; }
| |
| .toggle-content { display:none; background:#f9f9f9; padding:12px; border:1px solid #ddd; border-top:none; border-radius:0 0 4px 4px; }
| |
| </style>
| |