Skip to content

Commit a26a111

Browse files
Bulletdevclaude
Bulletdev
and
claude
committed
feat: port seasons pages to retro UI with edition logos
- seasons/index: roman numeral badges (I/II/III) for regular seasons, Kings_Lendas_Cup.webp image for Copa, full retro design language - seasons/show: retro panel for standings (with WR%) and top champions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 0edc658 commit a26a111

2 files changed

Lines changed: 104 additions & 64 deletions

File tree

‎app/views/seasons/index.html.erb‎

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,62 @@
11
<div class="max-w-4xl mx-auto px-4 py-10">
2-
<div class="mb-8">
3-
<p class="text-kl-teal text-sm font-medium uppercase tracking-wider mb-1">IDL Kings Lendas</p>
4-
<h1 class="text-3xl font-black text-white">Temporadas</h1>
2+
<div style="margin-bottom:24px">
3+
<div class="retro-section-label">// IDL Kings Lendas</div>
4+
<h1 class="retro-title-lg">Temporadas</h1>
55
</div>
66

7-
<div class="grid gap-4">
7+
<div style="display:flex;flex-direction:column;gap:10px">
88
<% @seasons.each do |season| %>
99
<% next if season[:slug] == "copa" %>
10-
<%= link_to season_path(season[:slug]), class: "card-glass rounded-2xl p-6 hover-lift flex items-center gap-5 group" do %>
11-
<div class="w-16 h-16 rounded-full bg-kl-gold/10 border border-kl-gold/30 flex items-center justify-center flex-shrink-0">
12-
<span class="text-kl-gold font-black text-lg"><%= season[:slug].split("-").last&.upcase || "S" %></span>
10+
<%
11+
roman = { 1 => "I", 2 => "II", 3 => "III", 4 => "IV", 5 => "V" }
12+
season_num = season[:slug].split("-").last.to_i
13+
roman_num = roman[season_num] || season[:slug].upcase
14+
%>
15+
<%= link_to season_path(season[:slug]), style: "text-decoration:none;display:block" do %>
16+
<div style="border:1px solid var(--retro-gold-dim);background:var(--retro-card);padding:16px 20px;position:relative;display:flex;align-items:center;gap:16px;transition:border-color 0.15s,background 0.15s"
17+
onmouseover="this.style.borderColor='var(--retro-gold)';this.style.background='rgba(200,155,60,0.05)'"
18+
onmouseout="this.style.borderColor='var(--retro-gold-dim)';this.style.background='var(--retro-card)'">
19+
<div class="retro-corners"></div>
20+
<!-- Season roman numeral badge -->
21+
<div style="width:56px;height:56px;border:1px solid var(--retro-gold);background:linear-gradient(135deg,var(--retro-blue),var(--retro-blue-dark));display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative">
22+
<div class="retro-corners"></div>
23+
<span style="font-size:20px;font-weight:bold;color:var(--retro-gold);font-family:var(--retro-font);text-shadow:0 0 8px rgba(200,155,60,0.6)"><%= roman_num %></span>
24+
</div>
25+
<div style="flex:1">
26+
<p style="font-size:9px;color:var(--retro-teal);letter-spacing:0.18em;font-family:var(--retro-font);text-transform:uppercase;margin-bottom:3px">IDL Kings Lendas</p>
27+
<h2 style="font-size:15px;font-weight:bold;color:var(--retro-gold);font-family:var(--retro-font);letter-spacing:0.04em"><%= season[:label] %></h2>
28+
<p style="font-size:10px;color:rgba(255,255,255,0.3);font-family:var(--retro-font);margin-top:2px"><%= season[:name] %></p>
29+
<% if season[:champion] %>
30+
<p style="font-size:10px;color:rgba(255,255,255,0.45);font-family:var(--retro-font);margin-top:3px">◆ Campeão: <span style="color:rgba(200,155,60,0.85)"><%= season[:champion] %></span></p>
31+
<% end %>
32+
</div>
33+
<span style="color:var(--retro-gold-dim);font-family:var(--retro-font);font-size:16px">→</span>
1334
</div>
14-
<div class="flex-1">
15-
<h2 class="text-xl font-bold text-white group-hover:text-kl-gold transition-colors"><%= season[:label] %></h2>
16-
<p class="text-sm text-gray-500 mt-0.5"><%= season[:name] %></p>
17-
<% if season[:champion] %>
18-
<p class="text-sm text-kl-gold mt-1">
19-
<i class="ri-trophy-fill text-xs"></i> Campeão: <span class="font-bold"><%= season[:champion] %></span>
20-
</p>
21-
<% end %>
22-
</div>
23-
<i class="ri-arrow-right-line text-gray-500 group-hover:text-kl-gold transition-colors text-xl"></i>
2435
<% end %>
2536
<% end %>
2637

27-
<!-- Copa link -->
28-
<%= link_to cup_path, class: "card-glass rounded-2xl p-6 hover-lift flex items-center gap-5 group border border-kl-gold/20" do %>
29-
<div class="w-16 h-16 rounded-full bg-kl-gold/20 border border-kl-gold/50 flex items-center justify-center flex-shrink-0 shadow-[0_0_15px_rgba(200,155,60,0.3)]">
30-
<span class="text-kl-gold font-black text-lg">CUP</span>
31-
</div>
32-
<div class="flex-1">
33-
<div class="flex items-center gap-2">
34-
<h2 class="text-xl font-bold text-kl-gold">Kings Lendas Cup 2026</h2>
35-
<span class="text-xs px-2 py-0.5 bg-kl-teal/20 text-kl-teal border border-kl-teal/30 rounded-full">EM ANDAMENTO</span>
38+
<!-- Copa -->
39+
<%= link_to cup_path, style: "text-decoration:none;display:block" do %>
40+
<div style="border:1px solid var(--retro-gold);background:var(--retro-card);padding:16px 20px;position:relative;display:flex;align-items:center;gap:16px;transition:box-shadow 0.15s"
41+
onmouseover="this.style.boxShadow='0 0 24px rgba(200,155,60,0.2)'"
42+
onmouseout="this.style.boxShadow='none'">
43+
<div class="retro-corners"></div>
44+
<!-- Cup logo -->
45+
<div style="width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center">
46+
<%= image_tag "/Kings_Lendas_Cup.webp", alt: "Kings Lendas Cup", width: 56, height: 56,
47+
style: "width:56px;height:56px;object-fit:contain" %>
48+
</div>
49+
<div style="flex:1">
50+
<div style="display:flex;align-items:center;gap:8px;margin-bottom:3px">
51+
<p style="font-size:9px;color:var(--retro-teal);letter-spacing:0.18em;font-family:var(--retro-font);text-transform:uppercase">IDL Kings Lendas</p>
52+
<span class="retro-status" style="color:var(--retro-teal);border-color:var(--retro-teal);font-size:8px">EM ANDAMENTO</span>
53+
</div>
54+
<h2 style="font-size:15px;font-weight:bold;color:var(--retro-gold);font-family:var(--retro-font);letter-spacing:0.04em">Kings Lendas Cup 2026</h2>
55+
<p style="font-size:10px;color:rgba(255,255,255,0.3);font-family:var(--retro-font);margin-top:2px">Off-season • 6 times • 06–15/Mar/2026</p>
56+
<p style="font-size:10px;color:rgba(200,155,60,0.7);font-family:var(--retro-font);margin-top:2px">◆ Premiação: R$ 50.000</p>
3657
</div>
37-
<p class="text-sm text-gray-500 mt-0.5">Off-season • 6 times • 06–15/Mar/2026</p>
38-
<p class="text-sm text-kl-gold mt-1">Premiação: R$ 50.000</p>
58+
<span style="color:var(--retro-gold);font-family:var(--retro-font);font-size:16px">→</span>
3959
</div>
40-
<i class="ri-arrow-right-line text-kl-gold text-xl"></i>
4160
<% end %>
4261
</div>
4362
</div>

‎app/views/seasons/show.html.erb‎

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,75 @@
11
<div class="max-w-5xl mx-auto px-4 py-10">
2-
<%= link_to "← Temporadas", seasons_path, class: "text-sm text-gray-500 hover:text-white transition-colors mb-6 inline-block" %>
2+
<%= link_to "← Temporadas", seasons_path,
3+
style: "font-size:11px;color:var(--retro-gold-dim);font-family:var(--retro-font);text-decoration:none;letter-spacing:0.08em;display:inline-block;margin-bottom:20px" %>
34

4-
<div class="mb-8">
5-
<p class="text-kl-teal text-sm font-medium uppercase tracking-wider mb-1">IDL Kings Lendas</p>
6-
<h1 class="text-3xl font-black text-white"><%= @season_data[:label] %></h1>
5+
<div style="margin-bottom:24px">
6+
<div class="retro-section-label">// IDL Kings Lendas</div>
7+
<h1 class="retro-title-lg"><%= @season_data[:label] %></h1>
78
<% if @season_data[:champion] %>
8-
<p class="text-lg text-kl-gold mt-1">
9-
<i class="ri-trophy-fill"></i> Campeão: <span class="font-bold"><%= @season_data[:champion] %></span>
10-
</p>
9+
<p style="font-size:13px;color:var(--retro-gold);font-family:var(--retro-font);margin-top:8px">◆ Campeão: <strong><%= @season_data[:champion] %></strong></p>
1110
<% end %>
1211
</div>
1312

1413
<!-- Standings -->
15-
<div class="card-glass rounded-2xl overflow-hidden mb-6">
16-
<div class="p-5 border-b border-kl-border">
17-
<h2 class="text-lg font-bold text-white">Classificação Final</h2>
18-
</div>
19-
<% if @standings.any? %>
20-
<div class="divide-y divide-kl-border/40">
21-
<% @standings.each_with_index do |row, idx| %>
22-
<div class="flex items-center gap-4 px-5 py-3 hover:bg-white/3 transition-colors">
23-
<span class="w-7 text-center font-bold <%= idx.zero? ? 'text-kl-gold' : 'text-gray-500' %>">
24-
<%= idx + 1 %>
25-
<%= idx.zero? ? "🏆" : "" %>
26-
</span>
27-
<%= team_logo(row["Team"], size: 32) %>
28-
<span class="flex-1 font-medium text-white"><%= row["Team"] %></span>
29-
<span class="text-kl-win font-semibold"><%= row["Wins"] %>V</span>
30-
<span class="text-kl-loss font-semibold ml-2"><%= row["Losses"] %>D</span>
31-
</div>
32-
<% end %>
33-
</div>
34-
<% else %>
35-
<div class="p-8 text-center text-gray-500">Dados não disponíveis</div>
14+
<div style="margin-bottom:24px">
15+
<%= retro_panel(title: "Classificação Final", category: "// TEMPORADA", footer: @season_data[:name]) do %>
16+
<% if @standings.any? %>
17+
<table style="width:100%;border-collapse:collapse">
18+
<thead>
19+
<tr style="border-bottom:1px solid var(--retro-gold-dim)">
20+
<th class="retro-table-head" style="text-align:center;width:32px">#</th>
21+
<th class="retro-table-head" style="text-align:left">Time</th>
22+
<th class="retro-table-head" style="text-align:center">V</th>
23+
<th class="retro-table-head" style="text-align:center">D</th>
24+
<th class="retro-table-head" style="text-align:center">WR%</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<% @standings.each_with_index do |row, idx| %>
29+
<tr class="retro-table-row" style="border-bottom:1px solid rgba(200,155,60,0.08)">
30+
<td style="padding:10px 8px;text-align:center;white-space:nowrap">
31+
<span style="font-size:12px;font-weight:bold;color:<%= idx.zero? ? 'var(--retro-gold)' : 'rgba(255,255,255,0.4)' %>;font-family:var(--retro-font)"><%= idx + 1 %></span>
32+
<% if idx.zero? %><span style="font-size:10px;margin-left:2px">🏆</span><% end %>
33+
</td>
34+
<td style="padding:10px 8px 10px 0">
35+
<div style="display:flex;align-items:center;gap:8px">
36+
<%= team_logo(row["Team"], size: 26) %>
37+
<span style="font-size:12px;font-weight:bold;color:rgba(255,255,255,0.85);font-family:var(--retro-font)"><%= row["Team"] %></span>
38+
</div>
39+
</td>
40+
<td style="padding:10px 8px;text-align:center">
41+
<span style="font-size:13px;font-weight:bold;color:var(--color-kl-win);font-family:var(--retro-font)"><%= row["Wins"] %></span>
42+
</td>
43+
<td style="padding:10px 8px;text-align:center">
44+
<span style="font-size:13px;font-weight:bold;color:var(--color-kl-loss);font-family:var(--retro-font)"><%= row["Losses"] %></span>
45+
</td>
46+
<td style="padding:10px 8px;text-align:center">
47+
<% w = row["Wins"].to_i; l = row["Losses"].to_i; t = w + l %>
48+
<% pct = t.zero? ? 0 : (w.to_f / t * 100).round %>
49+
<span style="font-size:12px;font-weight:bold;font-family:var(--retro-font);color:<%= pct >= 60 ? 'var(--color-kl-win)' : (pct >= 40 ? 'rgba(255,255,255,0.6)' : 'var(--color-kl-loss)') %>"><%= pct %>%</span>
50+
</td>
51+
</tr>
52+
<% end %>
53+
</tbody>
54+
</table>
55+
<% else %>
56+
<p style="padding:28px;text-align:center;font-size:12px;color:rgba(255,255,255,0.3);font-family:var(--retro-font)">Dados não disponíveis</p>
57+
<% end %>
3658
<% end %>
3759
</div>
3860

3961
<!-- Top champions -->
4062
<% if @champion_stats.any? %>
41-
<div class="card-glass rounded-2xl p-5">
42-
<h2 class="text-lg font-bold text-white mb-4">Top Campeões</h2>
43-
<div class="grid grid-cols-5 sm:grid-cols-10 gap-3">
63+
<%= retro_panel(title: "Top Campeões", category: "// ESTATÍSTICAS", footer: @season_data[:name]) do %>
64+
<div style="display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 8px">
4465
<% @champion_stats.each do |champ| %>
45-
<div class="text-center">
66+
<div style="text-align:center;width:58px">
4667
<%= champion_icon(champ["Champion"], size: 44, css_class: "mx-auto") %>
47-
<p class="text-xs text-gray-400 mt-1 truncate"><%= champ["Champion"] %></p>
48-
<p class="text-xs text-kl-teal"><%= champ["Picks"] %>P</p>
68+
<p style="font-size:9px;color:rgba(255,255,255,0.4);margin-top:4px;font-family:var(--retro-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= champ["Champion"] %></p>
69+
<p style="font-size:10px;color:var(--retro-teal);font-family:var(--retro-font)"><%= champ["Picks"] %>P</p>
4970
</div>
5071
<% end %>
5172
</div>
52-
</div>
73+
<% end %>
5374
<% end %>
5475
</div>

0 commit comments

Comments
 (0)