from datetime import datetime
from tools import clean_filename
def get_world_ranking_html(self, sorted_teams):
html_content = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
}}
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%;
}}
@keyframes fadeInUp {{
from {{
opacity: 0;
transform: translateY(20px);
}}
to {{
opacity: 1;
transform: translateY(0);
}}
}}
</style>
</head>
<body>
<div class="content-container">
<h1>Formula Student {self.competition_type} Elo Rankings</h1>
<p>Rankings based on {len(self.competition_history)} competitions.</p>
<div class="chart-container">
<img src="images/top_teams_elo.{self.IMAGE_FORMAT}" alt="Top Teams Elo Chart">
</div>
<h2>Current Rankings</h2>
<div style="overflow: scroll;">
<table>
<tr>
<th></th>
<th>Team</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/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