Select Git revision
world_ranking_list.py
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
world_ranking_list.py 12.22 KiB
from datetime import datetime
from tools import clean_filename
def get_world_ranking_html(self, sorted_teams, is_legacy):
html_content = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Unofficial Formula Student {self.competition_type} World Ranking">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formula Student {self.competition_type} Elo Rankings</title>
{self.header_snippet}
<style>
body {{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: 'Helvetica Neue', sans-serif;
background: linear-gradient(135deg, #ebebeb, #c9c9c9);
animation: gradientAnimation 10s ease infinite;
background-size: 200% 200%;
padding: 20px;
}}
@keyframes gradientAnimation {{
0%, 100% {{
background-position: 0% 50%;
}}
50% {{
background-position: 100% 50%;
}}
}}
.content-container {{
max-width: 1200px;
width: 100%;
animation: fadeInUp 0.5s ease-out forwards;
justify-content: center;
}}
.sponsor{{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 75%;
transition: all 0.3s cubic-bezier(.08,.82,.17,1);
filter: brightness(calc(1%)) grayscale(100%) contrast(1000%);
min-width: 113px;
}}
.sponsor:hover {{
opacity: 100%;
filter: none;
}}
.sponsor img{{
width: 100%;
height: auto;
min-width: 120px;
}}
.sponsoring-container {{
margin: 30px 0;
justify-content: center;
width: 100%;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
background-color: white;
box-sizing: border-box;
padding-bottom: 30px;
padding-left: 45px;
padding-right: 45px;
}}
.sponsoring-flex {{
display: flex;
row-gap: 20px;
column-gap: 80px;
flex-wrap: wrap;
}}
h1 {{
font-size: 40px;
text-transform: uppercase;
text-align: center;
color: #333;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
}}
h2 {{
text-align: center;
color: #555;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
margin-top: 30px;
}}
p {{
text-align: center;
color: #777;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
}}
table {{
border-collapse: collapse;
width: 100%;
margin-top: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
}}
th, td {{
padding: 12px 15px;
text-align: left;
}}
th {{
background-color: #f2f2f2;
color: #333;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid {self.BORDER_COLOR};
}}
tr {{
background-color: white;
transition: background-color 0.3s ease;
}}
tr:nth-child(even) {{
background-color: #f9f9f9;
}}
tr:hover {{
background-color: #f5f5f5;
}}
tr:nth-child(even)>td:nth-child(1) {{
background-color: {self.BORDER_COLOR_DARK};
}}
tr:nth-child(odd)>td:nth-child(1) {{
background-color: {self.BORDER_COLOR};
}}
td:nth-child(1) {{
text-align: center;
font-weight: bold;
}}
.chart-container {{
margin: 30px 0;
display: flex;
justify-content: center;
width: 100%;
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
background-color: white;
padding: 20px;
box-sizing: border-box;
}}
.chart-container img {{
max-width: 100%;
height: auto;
}}
a {{
color: black;
transition: color 0.3s ease;
}}
a:hover {{
color: {self.LINK_COLOR};
text-decoration: underline;
}}
.timestamp {{
font-size: 12px;
color: #777;
text-align: center;
margin-top: 20px;
animation: fadeInUp 0.5s ease-out 0.7s forwards;
opacity: 0;
}}
.nav-button {{
margin-top: 30px;
padding: 1em 2em;
font-size: larger;
text-transform: uppercase;
width: 12em;
text-align: center;
border: none;
border-radius: 5px;
background: linear-gradient(135deg, #ffff1e, #ffc400);
color: black;
cursor: pointer;
box-shadow: 0 10px 20px rgba(255, 255, 30, 0.3);
animation: fadeInUp 0.5s ease-out 0.8s forwards;
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}}
.nav-button:hover {{
box-shadow: 0 15px 30px rgba(255, 255, 30, 0.4);
transform: translateY(-2px);
}}
.nav-button::before {{
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease;
}}
.nav-button:hover::before {{
left: 100%;
}}
.team-header {{
display: flex;
justify-content: space-between;
align-items: center;
}}
.align-horizontally {{
display: inline-grid;
grid-template-columns: auto auto;
place-items: center;
gap: 10px
}}
.tooltip {{
position: relative;
display: inline-block;
cursor: pointer;
}}
.tooltip .tooltiptext {{
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
top: 125%; /* Position the tooltip above the text */
left: 20%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}}
.tooltip:hover .tooltiptext {{
visibility: visible;
opacity: 1;
text-transform: none;
font-weight: normal;
}}
@keyframes fadeInUp {{
from {{
opacity: 0;
transform: translateY(20px);
}}
to {{
opacity: 1;
transform: translateY(0);
}}
}}
</style>
</head>
<body>
<div class="content-container">
<h1>FS Elo {self.competition_type} Rankings</h1>
<p>Rankings based on {len(self.competition_history)} competitions.</p>
<div class="sponsoring-container">
<div style="margin-bottom: 12px; margin-top: 16px; text-align: center; color: #555">sponsored by:</div>
<div class="sponsoring-flex">
<div class="sponsor">
<a href="https://murtfeldt.de" target="_blank"><img src="../murtfeldt.png" alt="Logo of Murtfeldt Kunststoffe"></a>
</div>
<div class="sponsor">
<a href="https://www.kordel.de" target="_blank"><img src="../kordel.png" alt="Logo of Kordel"></a>
</div>
<div class="sponsor">
<a href="https://www.vulcanus-stahl.de/" target="_blank"><img src="../vulcanus.png" alt="Logo of Vulcanus Stahl"></a>
</div>
</div>
</div>
<h2>Current Rankings</h2>
<div style="overflow-x: scroll;">
<table>
<tr>
<th></th>
<th><div class="team-header">
<div>Team</div>
<div class="tooltip">
<a href={"index.html" if is_legacy else "legacy.html"} style="cursor: pointer;">
<div class="align-horizontally" style="text-transform: none; font-weight: normal;">
hide legacy teams <img src="../{"inactive" if is_legacy else "active_" + self.competition_type}.svg" height="20px" alt="toggle switch">
</div>
</a>
<span class="tooltiptext">legacy teams are those who haven't competed in 3 years</span>
</div>
</div></th>
<th>Elo Rating</th>
<th>Competitions</th>
</tr>
"""
# Add rows for each team
for rank, (team_name, team_data) in enumerate(sorted_teams, 1):
html_content += f"""
<tr>
<td>{rank}</td>
<td><a href="team/{clean_filename(team_name)}.html">{team_name}</a></td>
<td>{int(team_data['elo'])}</td>
<td>{team_data['competitions']}</td>
</tr>"""
html_content += f"""
</table>
</div>
<div class="chart-container">
<img src="images/top_teams_elo.{self.IMAGE_FORMAT}" alt="Top Teams Elo Chart">
</div>
<div class="chart-container">
<img src="images/elo_distribution.{self.IMAGE_FORMAT}" alt="Elo Distribution">
</div>
<div class="timestamp">
<p>Generated on {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}</p>
</div>
<div style="display: flex; justify-content: center;">
<a href="../index.html"><button class="nav-button">Back to Home</button></a>
</div>
</div>
</body>
</html>
"""
return html_content