Template:ParticipantTeam: Difference between revisions

← Older edit Newer edit →

Revision as of 18:53, 18 January 2026

INNOVATIVE: Game Lobby Style. Players appearing as vertical operator cards.

@@ Line 1: / Line 1: @@
 <noinclude>
-INNOVATIVE: 3D Flip Card. Tap to reveal roster.
+INNOVATIVE: Game Lobby Style. Players appearing as vertical operator cards.
-Usage: {{ParticipantTeam |team=Team Name |p1=Player1 ...}}
 </noinclude><includeonly>
-{{#cargo_store:_table=Tournament_Teams|tournament={{#titleparts:{{PAGENAME}}|1}}|team={{{team|}}}|p1={{{p1|}}}|p2={{{p2|}}}|p3={{{p3|}}}|p4={{{p4|}}}|p5={{{p5|}}}}}
+<div class="lobby-card" style="background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-header) 100%); border: 1px solid var(--border-light); border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+  <div style="padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light);">
+    <div style="font-weight: 900; font-size: 1.1em;">[[{{{team}}}]]</div>
+    <div style="width: 30px;">[[File:{{{team}}}.png|30px|link=]]</div>
+  </div>
-<div class="flip-card-container" style="background-color: transparent; width: 100%; height: 200px; perspective: 1000px; margin-bottom:15px;">
+  <div style="display: flex; gap: 4px; padding: 10px; overflow-x: auto; scrollbar-width: none;">
-<div class="flip-card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer;">
-<div class="flip-card-front" style="position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: var(--bg-card); border: 1px solid var(--border-main); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+    {{#if:{{{p1|}}}|
-<div style="width:100px; height:100px; margin-bottom:10px;" class="img-fit">
+    <div style="flex: 1; min-width: 60px; height: 80px; background: #3b82f6; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; position: relative;">
-{{#ifexist: File:{{{team}}}.png | [[File:{{{team}}}.png|link=]] | [[File:Shield_team.png|link=]] }}
+      <div style="font-size: 0.8em; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 2;">[[{{{p1}}}|<span style="color:white">{{{p1}}}</span>]]</div>
-</div>
+      <div style="position:absolute; top:0; left:0; right:0; height:100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6) 100%); border-radius:6px;"></div>
-<div style="font-weight:900; font-size:1.2em; text-transform:uppercase; color:var(--text-header);">[[{{{team}}}]]</div>
+    </div>}}
-<div style="font-size:0.8em; color:var(--text-muted); margin-top:5px;">Tap to view roster <i class="fa-solid fa-rotate"></i></div>
-</div>
-<div class="flip-card-back" style="position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #1a202c; color: white; transform: rotateY(180deg); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; padding: 10px;">
+    {{#if:{{{p2|}}}|
-<div style="font-weight:bold; margin-bottom:10px; color:#fbbf24; border-bottom:1px solid #4a5568; padding-bottom:5px;">ROSTER</div>
+    <div style="flex: 1; min-width: 60px; height: 80px; background: #6366f1; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; position: relative;">
-<div style="display:grid; grid-template-columns: 1fr 1fr; gap:5px; font-size:0.9em; text-align:left; padding:0 10px;">
+      <div style="font-size: 0.8em; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 2;">[[{{{p2}}}|<span style="color:white">{{{p2}}}</span>]]</div>
-{{#if:{{{p1|}}}|<div>• [[{{{p1}}}| <span style="color:#fff;">{{{p1}}}</span>]]</div>}}
+      <div style="position:absolute; top:0; left:0; right:0; height:100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6) 100%); border-radius:6px;"></div>
-{{#if:{{{p2|}}}|<div>• [[{{{p2}}}| <span style="color:#fff;">{{{p2}}}</span>]]</div>}}
+    </div>}}
-{{#if:{{{p3|}}}|<div>• [[{{{p3}}}| <span style="color:#fff;">{{{p3}}}</span>]]</div>}}
-{{#if:{{{p4|}}}|<div>• [[{{{p4}}}| <span style="color:#fff;">{{{p4}}}</span>]]</div>}}
-{{#if:{{{p5|}}}|<div>• [[{{{p5}}}| <span style="color:#fff;">{{{p5}}}</span>]]</div>}}
-</div>
-</div>
-</div>
+    {{#if:{{{p3|}}}|
+    <div style="flex: 1; min-width: 60px; height: 80px; background: #8b5cf6; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; position: relative;">
+      <div style="font-size: 0.8em; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 2;">[[{{{p3}}}|<span style="color:white">{{{p3}}}</span>]]</div>
+      <div style="position:absolute; top:0; left:0; right:0; height:100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6) 100%); border-radius:6px;"></div>
+    </div>}}
+    {{#if:{{{p4|}}}|
+    <div style="flex: 1; min-width: 60px; height: 80px; background: #ec4899; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; position: relative;">
+      <div style="font-size: 0.8em; font-weight: bold; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 2;">[[{{{p4}}}|<span style="color:white">{{{p4}}}</span>]]</div>
+      <div style="position:absolute; top:0; left:0; right:0; height:100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6) 100%); border-radius:6px;"></div>
+    </div>}}
+  </div>
 </div>
 </includeonly>