mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
Updated Web UI
This commit is contained in:
@@ -167,46 +167,53 @@ func (m DashboardModel) View() string {
|
||||
|
||||
titleStyle := lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color(colorF1Red)).
|
||||
Bold(true)
|
||||
Bold(true).
|
||||
MarginBottom(1)
|
||||
|
||||
now := time.Now()
|
||||
weekendUnderway := meetingHasStarted(*m.next, now)
|
||||
|
||||
sb.WriteString("\n")
|
||||
// Left panel: Meeting Info & Countdown
|
||||
var leftSide strings.Builder
|
||||
leftSide.WriteString("\n")
|
||||
if weekendUnderway {
|
||||
sb.WriteString(titleStyle.Render(fmt.Sprintf(" CURRENT RACE: %s", m.next.MeetingOfficialName)) + "\n")
|
||||
leftSide.WriteString(titleStyle.Render(fmt.Sprintf("CURRENT RACE: %s", m.next.MeetingOfficialName)) + "\n")
|
||||
} else {
|
||||
sb.WriteString(titleStyle.Render(fmt.Sprintf(" NEXT RACE: %s", m.next.MeetingOfficialName)) + "\n")
|
||||
leftSide.WriteString(titleStyle.Render(fmt.Sprintf("NEXT RACE: %s", m.next.MeetingOfficialName)) + "\n")
|
||||
}
|
||||
sb.WriteString(fmt.Sprintf(" %s • %s\n", countryFlag(m.next.CountryCode), m.next.Location))
|
||||
leftSide.WriteString(fmt.Sprintf(" %s • %s\n", countryFlag(m.next.CountryCode), m.next.Location))
|
||||
|
||||
currentSession, nextSession := currentAndNextSession(m.sessions, now)
|
||||
|
||||
sb.WriteString("\n")
|
||||
leftSide.WriteString("\n")
|
||||
if currentSession != nil {
|
||||
liveBadge := lipgloss.NewStyle().Background(lipgloss.Color(colorSoft)).Foreground(lipgloss.Color(colorSurface0)).Bold(true).Padding(0, 1).Render("LIVE")
|
||||
sb.WriteString(fmt.Sprintf(" %s %s\n", liveBadge, currentSession.SessionName))
|
||||
liveBadge := lipgloss.NewStyle().Background(lipgloss.Color(colorF1Red)).Foreground(lipgloss.Color(colorWhite)).Bold(true).Padding(0, 1).Render("LIVE")
|
||||
leftSide.WriteString(fmt.Sprintf(" %s %s\n", liveBadge, currentSession.SessionName))
|
||||
} else if nextSession != nil {
|
||||
nextStart, err := sessionStartTime(*nextSession)
|
||||
if err != nil {
|
||||
sb.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Schedule unavailable") + "\n")
|
||||
leftSide.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Schedule unavailable") + "\n")
|
||||
} else {
|
||||
diff := nextStart.Sub(now)
|
||||
days := int(diff.Hours() / 24)
|
||||
hours := int(diff.Hours()) % 24
|
||||
mins := int(diff.Minutes()) % 60
|
||||
secs := int(diff.Seconds()) % 60
|
||||
sb.WriteString(fmt.Sprintf(" Next: %s in %dd %02dh %02dm %02ds\n", nextSession.SessionName, days, hours, mins, secs))
|
||||
|
||||
countdown := fmt.Sprintf("%dd %02dh %02dm %02ds", days, hours, mins, secs)
|
||||
leftSide.WriteString(fmt.Sprintf(" Next: %s\n", styleBold.Render(nextSession.SessionName)))
|
||||
leftSide.WriteString(fmt.Sprintf(" Starts in: %s\n", styleCountdown.Render(countdown)))
|
||||
}
|
||||
} else {
|
||||
sb.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Weekend Finished") + "\n")
|
||||
leftSide.WriteString(" " + lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted)).Render("Weekend Finished") + "\n")
|
||||
}
|
||||
|
||||
sb.WriteString("\n")
|
||||
leftPanel := stylePanelBorder.Width(w/2 - 4).Render(leftSide.String())
|
||||
|
||||
// Weekend Schedule
|
||||
// Right panel: Weekend Schedule
|
||||
var rightSide strings.Builder
|
||||
if len(m.sessions) > 0 {
|
||||
sb.WriteString(lipgloss.NewStyle().Foreground(lipgloss.Color(colorWhite)).Bold(true).Render(" WEEKEND SCHEDULE (Local Time)") + "\n")
|
||||
rightSide.WriteString(lipgloss.NewStyle().Foreground(lipgloss.Color(colorWhite)).Bold(true).Render("WEEKEND SCHEDULE (Local Time)") + "\n\n")
|
||||
for _, s := range m.sessions {
|
||||
stLocal, err := sessionStartTime(s)
|
||||
if err != nil {
|
||||
@@ -219,13 +226,20 @@ func (m DashboardModel) View() string {
|
||||
if end, err := sessionEndTime(s); err == nil && !now.Before(end) {
|
||||
rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorMuted))
|
||||
} else if currentSession != nil && currentSession.SessionKey == s.SessionKey {
|
||||
rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorSoft)).Bold(true)
|
||||
rowStyle = lipgloss.NewStyle().Foreground(lipgloss.Color(colorF1Red)).Bold(true)
|
||||
}
|
||||
|
||||
sb.WriteString(rowStyle.Render(fmt.Sprintf(" %-15s %-12s %s", s.SessionName, day, tStr)) + "\n")
|
||||
rightSide.WriteString(rowStyle.Render(fmt.Sprintf("%-15s %-12s %s", s.SessionName, day, tStr)) + "\n")
|
||||
}
|
||||
}
|
||||
rightPanel := stylePanelBorder.Width(w/2 - 4).Render(rightSide.String())
|
||||
|
||||
sb.WriteString("\n" + helpBar("1-6 tabs", "q quit"))
|
||||
if m.width > 80 {
|
||||
sb.WriteString(lipgloss.JoinHorizontal(lipgloss.Top, leftPanel, " ", rightPanel))
|
||||
} else {
|
||||
sb.WriteString(leftPanel + "\n" + rightPanel)
|
||||
}
|
||||
|
||||
sb.WriteString("\n\n" + helpBar("1-7 tabs", "q quit"))
|
||||
return sb.String()
|
||||
}
|
||||
|
||||
@@ -347,13 +347,23 @@ func (m StandingsModel) renderDriverStandings() string {
|
||||
colorBar := lipgloss.NewStyle().Foreground(lipgloss.Color(teamColor)).Render("┃")
|
||||
pointsBar := renderPointsBar(s.PointsCurrent, maxPoints, barWidth, teamColor)
|
||||
|
||||
// Styling for top 3
|
||||
nameStyle := lipgloss.NewStyle()
|
||||
if i == 0 {
|
||||
nameStyle = stylePositionFirst
|
||||
} else if i == 1 {
|
||||
nameStyle = stylePositionSecond
|
||||
} else if i == 2 {
|
||||
nameStyle = stylePositionThird
|
||||
}
|
||||
|
||||
var row string
|
||||
if compact {
|
||||
row = fmt.Sprintf(" %s %s %s %s %s %s",
|
||||
padRightVisible(pos, 3),
|
||||
delta,
|
||||
colorBar,
|
||||
padRight(acronym, 4),
|
||||
nameStyle.Render(padRight(acronym, 4)),
|
||||
padRight(truncate(team, teamWidth), teamWidth),
|
||||
padLeft(fmt.Sprintf("%.0f", s.PointsCurrent), 5),
|
||||
)
|
||||
@@ -362,8 +372,8 @@ func (m StandingsModel) renderDriverStandings() string {
|
||||
padRightVisible(pos, 4),
|
||||
delta,
|
||||
colorBar,
|
||||
padRight(acronym, 4),
|
||||
padRight(truncate(name, nameWidth), nameWidth),
|
||||
nameStyle.Render(padRight(acronym, 4)),
|
||||
nameStyle.Render(padRight(truncate(name, nameWidth), nameWidth)),
|
||||
padRight(truncate(team, teamWidth), teamWidth),
|
||||
padLeft(fmt.Sprintf("%.0f", s.PointsCurrent), 6),
|
||||
pointsBar,
|
||||
|
||||
@@ -615,6 +615,32 @@ function standingsPage() {
|
||||
: [];
|
||||
} catch (_) { this.teamStandings = []; }
|
||||
},
|
||||
|
||||
standingsBarWidth(pts, list) {
|
||||
if (!list || !list.length) return 0;
|
||||
const max = list[0].points_current;
|
||||
return max > 0 ? Math.round((pts / max) * 100) : 0;
|
||||
},
|
||||
|
||||
teamColor(name) {
|
||||
// Map known constructor names to brand colors
|
||||
const map = {
|
||||
'Red Bull Racing': '#3671C6',
|
||||
'Mercedes': '#27F4D2',
|
||||
'Ferrari': '#E8002D',
|
||||
'McLaren': '#FF8000',
|
||||
'Aston Martin': '#229971',
|
||||
'Alpine': '#FF87BC',
|
||||
'Williams': '#64C4FF',
|
||||
'Racing Bulls': '#6692FF',
|
||||
'Kick Sauber': '#52E252',
|
||||
'Haas F1 Team': '#B6BABD',
|
||||
};
|
||||
for (const key of Object.keys(map)) {
|
||||
if (name && name.includes(key.split(' ')[0])) return map[key];
|
||||
}
|
||||
return '#666688';
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -40,6 +40,16 @@
|
||||
<div class="home-hero" x-show="!loading">
|
||||
<!-- Next race -->
|
||||
<div class="card next-race" x-show="nextRace">
|
||||
<!-- Speed lines background -->
|
||||
<div class="speed-lines" aria-hidden="true">
|
||||
<div class="speed-line"></div><div class="speed-line"></div><div class="speed-line"></div>
|
||||
<div class="speed-line"></div><div class="speed-line"></div><div class="speed-line"></div>
|
||||
<div class="speed-line"></div><div class="speed-line"></div>
|
||||
</div>
|
||||
<!-- Circuit watermark -->
|
||||
<div class="circuit-watermark" x-text="nextRace?.circuit_short_name||''"></div>
|
||||
<!-- Checkered flag pattern -->
|
||||
<div class="checkered-corner" aria-hidden="true"></div>
|
||||
<div class="card-label" x-text="heroLabel"></div>
|
||||
<div class="next-race-flag" x-text="flagEmoji(nextRace?.country_code)"></div>
|
||||
<h2 class="next-race-name" x-text="nextRace?.meeting_name||''"></h2>
|
||||
@@ -51,8 +61,10 @@
|
||||
<!-- Championship sidebar -->
|
||||
<div class="card champ-sidebar">
|
||||
<div class="card-label">DRIVERS' CHAMPIONSHIP</div>
|
||||
<template x-for="d in champDrivers.slice(0,5)" :key="d.driver_number">
|
||||
<div class="champ-row" :style="`--team-color:#${d.team_colour}`">
|
||||
<template x-for="(d, idx) in champDrivers.slice(0,10)" :key="d.driver_number">
|
||||
<div class="champ-row"
|
||||
:class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
|
||||
:style="`--team-color:#${d.team_colour}`">
|
||||
<span class="champ-pos" x-text="d.position_current"></span>
|
||||
<span class="team-swatch"></span>
|
||||
<span class="champ-tla" x-text="d.name_acronym||d.driver_number"></span>
|
||||
@@ -74,7 +86,8 @@
|
||||
<div class="section-label" x-text="season + ' SEASON'"></div>
|
||||
<div class="meetings-grid" x-show="!loading">
|
||||
<template x-for="m in meetings" :key="m.meeting_key">
|
||||
<a class="meeting-card" :class="{past: isPast(m)}" :href="`#/race/${m.meeting_key}`">
|
||||
<a class="meeting-card" :class="{past: isPast(m), 'meeting-next': m === nextRace}" :href="`#/race/${m.meeting_key}`">
|
||||
<div class="meeting-card-accent"></div>
|
||||
<div class="meeting-flag" x-text="flagEmoji(m.country_code)"></div>
|
||||
<div class="meeting-name" x-text="m.meeting_name"></div>
|
||||
<div class="meeting-circuit" x-text="m.circuit_short_name"></div>
|
||||
@@ -285,32 +298,73 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<table class="data-table" x-show="!loading && view==='drivers'">
|
||||
<thead><tr><th>POS</th><th>DRIVER</th><th>TEAM</th><th>PTS</th></tr></thead>
|
||||
<tbody>
|
||||
<template x-for="d in driverStandings" :key="d.driver_number">
|
||||
<tr :style="`--team-color:#${d.team_colour}`">
|
||||
<td x-text="d.position_current"></td>
|
||||
<td><span class="team-swatch"></span><span x-text="d.full_name||d.driver_number"></span></td>
|
||||
<td x-text="d.team_name||'-'"></td>
|
||||
<td x-text="d.points_current"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Drivers standings table -->
|
||||
<div class="standings-table" x-show="!loading && view==='drivers'">
|
||||
<div class="standings-header">
|
||||
<span class="sh-pos">POS</span>
|
||||
<span class="sh-driver">DRIVER</span>
|
||||
<span class="sh-team">TEAM</span>
|
||||
<span class="sh-bar"></span>
|
||||
<span class="sh-pts">PTS</span>
|
||||
<span class="sh-gap">GAP</span>
|
||||
</div>
|
||||
<template x-for="(d, idx) in driverStandings" :key="d.driver_number">
|
||||
<div class="standings-row"
|
||||
:class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
|
||||
:style="`--team-color:#${d.team_colour}`">
|
||||
<!-- Team color left border (via CSS) -->
|
||||
<div class="sr-pos">
|
||||
<span class="trophy-icon" x-show="idx < 3" x-text="['🥇','🥈','🥉'][idx]"></span>
|
||||
<span x-show="idx >= 3" x-text="d.position_current" class="pos-num"></span>
|
||||
</div>
|
||||
<div class="sr-driver">
|
||||
<span class="driver-num-badge" :style="`background:#${d.team_colour}22; color:#${d.team_colour}; border-color:#${d.team_colour}55`" x-text="d.driver_number"></span>
|
||||
<div class="sr-driver-info">
|
||||
<span class="sr-full-name" x-text="d.full_name||d.driver_number"></span>
|
||||
<span class="sr-tla" x-text="d.name_acronym||''"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sr-team" x-text="d.team_name||'-'"></div>
|
||||
<div class="sr-bar-wrap">
|
||||
<div class="sr-bar" :style="`width:${standingsBarWidth(d.points_current, driverStandings)}%;`"></div>
|
||||
</div>
|
||||
<div class="sr-pts" x-text="d.points_current"></div>
|
||||
<div class="sr-gap" x-text="idx === 0 ? 'LEADER' : '-' + (driverStandings[0].points_current - d.points_current)"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<table class="data-table" x-show="!loading && view==='teams'">
|
||||
<thead><tr><th>POS</th><th>TEAM</th><th>PTS</th></tr></thead>
|
||||
<tbody>
|
||||
<template x-for="t in teamStandings" :key="t.team_name">
|
||||
<tr>
|
||||
<td x-text="t.position_current"></td>
|
||||
<td x-text="t.team_name"></td>
|
||||
<td x-text="t.points_current"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Constructors standings table -->
|
||||
<div class="standings-table" x-show="!loading && view==='teams'">
|
||||
<div class="standings-header constructor-header">
|
||||
<span class="sh-pos">POS</span>
|
||||
<span class="sh-driver">CONSTRUCTOR</span>
|
||||
<span class="sh-bar"></span>
|
||||
<span class="sh-pts">PTS</span>
|
||||
<span class="sh-gap">GAP</span>
|
||||
</div>
|
||||
<template x-for="(t, idx) in teamStandings" :key="t.team_name">
|
||||
<div class="standings-row constructor-row"
|
||||
:class="idx === 0 ? 'podium-1' : (idx === 1 ? 'podium-2' : (idx === 2 ? 'podium-3' : ''))"
|
||||
:style="`--team-color:${teamColor(t.team_name)}`">
|
||||
<div class="sr-pos">
|
||||
<span class="trophy-icon" x-show="idx < 3" x-text="['🥇','🥈','🥉'][idx]"></span>
|
||||
<span x-show="idx >= 3" x-text="t.position_current" class="pos-num"></span>
|
||||
</div>
|
||||
<div class="sr-driver">
|
||||
<div class="constructor-color-block" :style="`background:${teamColor(t.team_name)}`"></div>
|
||||
<div class="sr-driver-info">
|
||||
<span class="sr-full-name" x-text="t.team_name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sr-bar-wrap">
|
||||
<div class="sr-bar" :style="`width:${standingsBarWidth(t.points_current, teamStandings)}%;`"></div>
|
||||
</div>
|
||||
<div class="sr-pts" x-text="t.points_current"></div>
|
||||
<div class="sr-gap" x-text="idx === 0 ? 'LEADER' : '-' + (teamStandings[0].points_current - t.points_current)"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -145,74 +145,183 @@ a { color: inherit; text-decoration: none; }
|
||||
.home-hero { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Next race card */
|
||||
.next-race { text-align: center; }
|
||||
.next-race-flag { font-size: 3rem; margin: 0.25rem 0; }
|
||||
.next-race-name { font-size: 1.4rem; font-weight: 700; margin: 0.25rem 0; }
|
||||
.next-race-circuit { color: var(--text-2); font-size: 0.85rem; margin-bottom: 0.5rem; }
|
||||
/* ---- Next race card — rich hero ---- */
|
||||
.next-race {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #1a0000 0%, #2d0a0a 40%, var(--surface-2) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: rgba(225,6,0,0.25);
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
}
|
||||
.next-race::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff4422, var(--f1-red));
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer-red 2.5s linear infinite;
|
||||
}
|
||||
@keyframes shimmer-red {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Animated speed lines */
|
||||
.speed-lines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.speed-line {
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(225,6,0,0.18), transparent);
|
||||
width: 60%;
|
||||
animation: speedline 3s ease-in-out infinite;
|
||||
}
|
||||
.speed-line:nth-child(1) { top: 18%; animation-delay: 0s; animation-duration: 2.8s; width: 55%; }
|
||||
.speed-line:nth-child(2) { top: 30%; animation-delay: 0.4s; animation-duration: 3.2s; width: 70%; }
|
||||
.speed-line:nth-child(3) { top: 42%; animation-delay: 0.9s; animation-duration: 2.5s; width: 45%; }
|
||||
.speed-line:nth-child(4) { top: 55%; animation-delay: 1.3s; animation-duration: 3.5s; width: 65%; }
|
||||
.speed-line:nth-child(5) { top: 65%; animation-delay: 0.2s; animation-duration: 2.9s; width: 50%; }
|
||||
.speed-line:nth-child(6) { top: 75%; animation-delay: 1.7s; animation-duration: 3.1s; width: 60%; }
|
||||
.speed-line:nth-child(7) { top: 85%; animation-delay: 0.6s; animation-duration: 2.7s; width: 40%; }
|
||||
.speed-line:nth-child(8) { top: 92%; animation-delay: 1.1s; animation-duration: 3.4s; width: 55%; }
|
||||
@keyframes speedline {
|
||||
0% { transform: translateX(-20%); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translateX(220%); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Circuit name watermark */
|
||||
.circuit-watermark {
|
||||
position: absolute;
|
||||
bottom: -0.25rem;
|
||||
right: -0.5rem;
|
||||
font-size: 4.5rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.03);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Checkered flag corner decoration */
|
||||
.checkered-corner {
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 64px; height: 64px;
|
||||
background-image:
|
||||
repeating-conic-gradient(rgba(255,255,255,0.07) 0% 25%, transparent 0% 50%);
|
||||
background-size: 16px 16px;
|
||||
mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
|
||||
-webkit-mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.next-race .card-label { position: relative; z-index: 1; }
|
||||
.next-race-flag { font-size: 3.5rem; margin: 0.5rem 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); position: relative; z-index: 1; }
|
||||
.next-race-name { font-size: 1.8rem; font-weight: 800; margin: 0.25rem 0; letter-spacing: -0.02em; position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
|
||||
.next-race-circuit { color: var(--text-2); font-size: 0.95rem; margin-bottom: 0.75rem; font-weight: 500; position: relative; z-index: 1; }
|
||||
.next-race-session {
|
||||
color: var(--text-1);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.45rem;
|
||||
display: inline-block;
|
||||
background: rgba(225, 6, 0, 0.15);
|
||||
color: var(--f1-red);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid rgba(225, 6, 0, 0.3);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.next-race-countdown {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--f1-red);
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-1);
|
||||
letter-spacing: 0.02em;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
|
||||
/* Championship sidebar */
|
||||
.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; }
|
||||
.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; background: var(--surface-1); }
|
||||
.champ-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px 12px 36px 1fr 40px;
|
||||
grid-template-columns: 24px 4px 40px 1fr 45px;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.champ-pos { color: var(--text-2); font-size: 0.8rem; text-align: right; }
|
||||
.champ-tla { font-weight: 600; font-size: 0.85rem; }
|
||||
.champ-row:hover { background: var(--surface-2); }
|
||||
.champ-row.podium-1 { background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.1); }
|
||||
.champ-row.podium-1 .champ-pos { color: #FFD700; font-weight: 800; }
|
||||
.champ-row.podium-2 .champ-pos { color: #C0C0C0; font-weight: 800; }
|
||||
.champ-row.podium-3 .champ-pos { color: #CD7F32; font-weight: 800; }
|
||||
|
||||
.champ-pos { color: var(--text-2); font-size: 0.9rem; text-align: center; font-weight: 600; }
|
||||
.champ-tla { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
|
||||
.champ-bar-wrap {
|
||||
background: var(--surface-3);
|
||||
border-radius: 2px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
.champ-bar {
|
||||
height: 100%;
|
||||
background: var(--team-color, var(--f1-red));
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s;
|
||||
border-radius: 3px;
|
||||
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.champ-pts { font-size: 0.8rem; color: var(--text-2); text-align: right; }
|
||||
.champ-pts { font-size: 0.9rem; color: var(--text-1); text-align: right; font-weight: 700; }
|
||||
|
||||
/* Team color swatch */
|
||||
.team-swatch {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: var(--team-color, #666);
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* ---- Season meetings grid ---- */
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-3);
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-2);
|
||||
padding: 0.75rem 1.5rem 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.section-label::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 1em;
|
||||
background: var(--f1-red);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.meetings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
@@ -223,11 +332,36 @@ a { color: inherit; text-decoration: none; }
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.meeting-card:hover { background: var(--surface-2); border-color: var(--text-3); }
|
||||
.meeting-card.past { opacity: 0.55; }
|
||||
.meeting-flag { font-size: 1.5rem; margin-bottom: 0.3rem; }
|
||||
.meeting-card:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--text-3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.meeting-card.past { opacity: 0.5; }
|
||||
.meeting-card-accent {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--surface-3);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.meeting-card:not(.past) .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff4422);
|
||||
}
|
||||
.meeting-card.meeting-next .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff8844, var(--f1-red));
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer-red 2s linear infinite;
|
||||
}
|
||||
.meeting-card.meeting-next {
|
||||
border-color: rgba(225,6,0,0.35);
|
||||
box-shadow: 0 0 0 1px rgba(225,6,0,0.12), 0 4px 16px rgba(225,6,0,0.1);
|
||||
}
|
||||
.meeting-flag { font-size: 1.5rem; margin: 0.3rem 0 0.3rem; }
|
||||
.meeting-name { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
|
||||
.meeting-circuit { color: var(--text-2); font-size: 0.78rem; margin-top: 0.15rem; }
|
||||
.meeting-date { color: var(--text-3); font-size: 0.75rem; margin-top: 0.3rem; }
|
||||
@@ -292,23 +426,30 @@ a { color: inherit; text-decoration: none; }
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
.data-table th {
|
||||
background: var(--surface-1);
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
color: var(--text-3);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--surface-2);
|
||||
border-bottom: 2px solid var(--surface-3);
|
||||
color: var(--text-2);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.data-table td {
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data-table tr:hover td { background: var(--surface-1); }
|
||||
.pos-cell { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
|
||||
.data-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
|
||||
.data-table tr.podium-1 td { background: rgba(255, 215, 0, 0.03); }
|
||||
.data-table tr.podium-1 .pos-cell { color: #FFD700; font-weight: 900; }
|
||||
.data-table tr.podium-2 .pos-cell { color: #C0C0C0; font-weight: 900; }
|
||||
.data-table tr.podium-3 .pos-cell { color: #CD7F32; font-weight: 900; }
|
||||
|
||||
.pos-cell { font-weight: 700; font-size: 1rem; }
|
||||
.driver-cell { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.95rem; }
|
||||
.pts-cell { font-weight: 800; font-size: 1rem; color: var(--text-1); }
|
||||
|
||||
/* ---- Badges ---- */
|
||||
.badge {
|
||||
@@ -488,3 +629,177 @@ a { color: inherit; text-decoration: none; }
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Standings — custom row layout
|
||||
============================================================ */
|
||||
.standings-table {
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
.standings-header {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr 180px 120px 70px 70px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1rem 0.5rem 1.25rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-3);
|
||||
text-transform: uppercase;
|
||||
border-bottom: 2px solid var(--surface-3);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.standings-header { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
|
||||
.sh-team { display: none; }
|
||||
}
|
||||
.standings-row {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr 180px 120px 70px 70px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1rem 0.6rem 0;
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
transition: background 0.15s;
|
||||
position: relative;
|
||||
border-left: 3px solid var(--team-color, transparent);
|
||||
padding-left: 1rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.standings-row:hover { background: rgba(255,255,255,0.025); }
|
||||
.standings-row.podium-1 { background: rgba(255,215,0,0.04); }
|
||||
.standings-row.podium-2 { background: rgba(192,192,192,0.03); }
|
||||
.standings-row.podium-3 { background: rgba(205,127,50,0.03); }
|
||||
@media (max-width: 700px) {
|
||||
.standings-row { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
|
||||
.sr-team { display: none; }
|
||||
}
|
||||
|
||||
/* Position column */
|
||||
.sr-pos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
}
|
||||
.trophy-icon { font-size: 1.3rem; line-height: 1; }
|
||||
.pos-num { font-size: 1rem; font-weight: 800; color: var(--text-2); }
|
||||
.standings-row.podium-1 .pos-num { color: #FFD700; }
|
||||
.standings-row.podium-2 .pos-num { color: #C0C0C0; }
|
||||
.standings-row.podium-3 .pos-num { color: #CD7F32; }
|
||||
|
||||
/* Driver number badge */
|
||||
.driver-num-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.03em;
|
||||
border: 1px solid;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Driver column */
|
||||
.sr-driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.sr-driver-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.sr-full-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.sr-tla {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-3);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Team column */
|
||||
.sr-team {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Points bar */
|
||||
.sr-bar-wrap {
|
||||
background: var(--surface-3);
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sr-bar {
|
||||
height: 100%;
|
||||
background: var(--team-color, var(--f1-red));
|
||||
border-radius: 3px;
|
||||
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
/* Points */
|
||||
.sr-pts {
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
/* Gap */
|
||||
.sr-gap {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-3);
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.standings-row.podium-1 .sr-gap {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--f1-red);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Constructor color block */
|
||||
.constructor-color-block {
|
||||
width: 5px;
|
||||
height: 32px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.constructor-row .sr-full-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Constructor table has no TEAM column — use 5-col grid */
|
||||
.constructor-header,
|
||||
.constructor-row {
|
||||
grid-template-columns: 52px 1fr 140px 70px 70px;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.constructor-header,
|
||||
.constructor-row {
|
||||
grid-template-columns: 44px 1fr 80px 55px 55px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user