Vorlage:Forza Car Infobox: Unterschied zwischen den Versionen

Version vom 29. April 2026, 18:27 Uhr

🚗 Verfügbarkeit: Autoshow + Wheelspins

⚙️ AWD

   D
   PI 100

Geschwindigkeit

6.0

Handling

2.6

Beschleunigung

3.7

Start

1.7

Bremsen

2.0

Offroad

5.1

Fahrzeugtyp:

Seltenheit:

Land:

Leistung: PS

Gewicht: kg

   font-family: system-ui, -apple-system, sans-serif;
   max-width: 100%;
   margin: 15px 0;

}

.info-bar {

   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   background: #f8f8f8;
   padding: 10px 14px;
   border-radius: 6px;
   margin-bottom: 14px;
   font-weight: 600;

}

.info-item { flex: 1; min-width: 140px; } .class-pi { display: flex; gap: 8px; align-items: center; } .class-badge {

   color: white;
   padding: 5px 12px;
   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-badge {

   background: #2c2c2c;
   color: white;
   padding: 5px 12px;
   border-radius: 4px;
   font-weight: bold;

}

.stat-block {

   display: flex;
   flex-direction: column;
   gap: 2px;

}

.stat-row {

   background: #f9f9f9;
   padding: 12px 16px;
   border-radius: 6px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;

}

.stat-label {

   font-weight: 500;
   color: #333;

}

.stat-value {

   font-weight: bold;
   font-size: 17px;
   color: #222;

}

.extra-info {

   margin-top: 18px;
   padding: 14px;
   background: #f8f8f8;
   border-radius: 6px;
   line-height: 1.7;

} </style>

@@ Zeile 1: / Zeile 1: @@
-{{#if:{{{bild|}}}|[[File:{{{bild}}}|thumb|right|250px]]}}
+{{#if:{{{bild|}}}|[[File:{{{bild|}}}|thumb|right|280px|link=]]}}
-<div class="forza-car-info">
+<div class="fh-car-infobox">
-<!-- Obere Info-Bar (wie bei dir) -->
+<!-- Obere Info-Leiste -->
-<div class="info-container">
+<div class="info-bar">
-   <div class="availability">🚗 Verfügbarkeit: {{{verfugbarkeit|Autoshow + Wheelspins}}}</div>
+   <div class="info-item">🚗 Verfügbarkeit: {{{verfugbarkeit|Autoshow + Wheelspins}}}</div>
-   <div class="drive">⚙️ {{{antrieb|AWD}}}</div>
+   <div class="info-item">⚙️ {{{antrieb|AWD}}}</div>
    <div class="class-pi">
-     <span class="class-box class-{{#lc:{{{klasse|D}}}}}">{{{klasse|D}}}</span>
+     <span class="class-badge class-{{#lc:{{{klasse|D}}}}}">{{{klasse|D}}}</span>
-     <span class="pi-box">PI {{{pi|100}}}</span>
+     <span class="pi-badge">PI {{{pi|100}}}</span>
    </div>
 </div>
-<!-- Performance Balken -->
+<!-- Statistik Zeilen -->
-<div class="stat-row">
+<div class="stat-block">
-  <span class="stat-label">Geschwindigkeit</span>
+  <div class="stat-row">
-   <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{geschwindigkeit|6.0}}} / 10) * 100}}%;"></div></div>
+    <div class="stat-label">Geschwindigkeit</div>
-   <span class="stat-value">{{{geschwindigkeit|6.0}}}</span>
+    <div class="stat-value">{{{geschwindigkeit|6.0}}}</div>
+  </div>
+   <div class="stat-row">
+    <div class="stat-label">Handling</div>
+    <div class="stat-value">{{{handling|2.6}}}</div>
+  </div>
+  <div class="stat-row">
+    <div class="stat-label">Beschleunigung</div>
+    <div class="stat-value">{{{beschleunigung|3.7}}}</div>
+  </div>
+  <div class="stat-row">
+    <div class="stat-label">Start</div>
+    <div class="stat-value">{{{start|1.7}}}</div>
+  </div>
+  <div class="stat-row">
+    <div class="stat-label">Bremsen</div>
+    <div class="stat-value">{{{bremsen|2.0}}}</div>
+  </div>
+   <div class="stat-row">
+    <div class="stat-label">Offroad</div>
+    <div class="stat-value">{{{offroad|5.1}}}</div>
+  </div>
 </div>
-<div class="stat-row">
+<!-- Zusatzinfos -->
-   <span class="stat-label">Handling</span>
+<div class="extra-info">
-   <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{handling|2.6}}} / 10) * 100}}%;"></div></div>
+   <p><b>Fahrzeugtyp:</b> {{{fahrzeugtyp|}}}</p>
-   <span class="stat-value">{{{handling|2.6}}}</span>
+   <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 class="stat-row">
-  <span class="stat-label">Beschleunigung</span>
-  <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{beschleunigung|3.7}}} / 10) * 100}}%;"></div></div>
-  <span class="stat-value">{{{beschleunigung|3.7}}}</span>
 </div>
-<div class="stat-row">
+<style>
-  <span class="stat-label">Start</span>
+.fh-car-infobox {
-  <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{start|1.7}}} / 10) * 100}}%;"></div></div>
+    font-family: system-ui, -apple-system, sans-serif;
-  <span class="stat-value">{{{start|1.7}}}</span>
+    max-width: 100%;
-</div>
+    margin: 15px 0;
+}
+.info-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    background: #f8f8f8;
+    padding: 10px 14px;
+    border-radius: 6px;
+    margin-bottom: 14px;
+    font-weight: 600;
+}
-<div class="stat-row">
+.info-item { flex: 1; min-width: 140px; }
-  <span class="stat-label">Bremsen</span>
+.class-pi { display: flex; gap: 8px; align-items: center; }
-  <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{bremsen|2.0}}} / 10) * 100}}%;"></div></div>
+.class-badge {
-  <span class="stat-value">{{{bremsen|2.0}}}</span>
+    color: white;
-</div>
+    padding: 5px 12px;
+    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; }
-<div class="stat-row">
+.pi-badge {
-  <span class="stat-label">Offroad</span>
+    background: #2c2c2c;
-  <div class="progress-container"><div class="progress-bar" style="width:{{#expr: ({{{offroad|5.1}}} / 10) * 100}}%;"></div></div>
+    color: white;
-  <span class="stat-value">{{{offroad|5.1}}}</span>
+    padding: 5px 12px;
-</div>
+    border-radius: 4px;
+    font-weight: bold;
+}
-<!-- Toggle / Zusätzliche Infos -->
+.stat-block {
-<div class="toggle-container">
+    display: flex;
-  <div class="toggle-btn" onclick="this.nextElementSibling.style.display = (this.nextElementSibling.style.display === 'block') ? 'none' : 'block';">
+     flex-direction: column;
-     ▼ Leistungsdaten & Fahrzeugtyp
+     gap: 2px;
-  </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>
+.stat-row {
+    background: #f9f9f9;
+    padding: 12px 16px;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+}
-<!-- CSS (vorläufig inline) -->
+.stat-label {
-<style>
+    font-weight: 500;
-.info-container { display: flex; justify-content: space-between; background:#f5f5f5; padding:6px; border-radius:4px; margin-bottom:10px; font-weight:bold; }
+    color: #333;
-.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-value {
-.stat-label { width:110px; }
+    font-weight: bold;
-.progress-container { flex:1; background:#eee; height:9px; border-radius:4px; margin:0 10px; }
+    font-size: 17px;
-.progress-bar { height:100%; background:#d13f8d; border-radius:4px; }
+    color: #222;
-.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; }
+.extra-info {
-.toggle-content { display:none; background:#f9f9f9; padding:12px; border:1px solid #ddd; border-top:none; border-radius:0 0 4px 4px; }
+    margin-top: 18px;
+    padding: 14px;
+    background: #f8f8f8;
+    border-radius: 6px;
+    line-height: 1.7;
+}
 </style>

Vorlage:Forza Car Infobox: Unterschied zwischen den Versionen

Version vom 29. April 2026, 18:27 Uhr

Navigationsmenü

Suche