Skip to content
Snippets Groups Projects
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
world_ranking_list.py 7.33 KiB
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;
            }}

            .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: {self.LINK_COLOR};
                text-decoration: none;
                transition: color 0.3s ease;
            }}

            a:hover {{
                color: {self.LINK_COLOR_HOVER};
                text-decoration: none;
            }}

            .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.png" alt="Top Teams Elo Chart">
            </div>

            <h2>Current Rankings</h2>
            <table>
                <tr>
                    <th>Rank</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 += """
            </table>

            <div class="chart-container">
                <img src="images/elo_distribution.png" alt="Elo Distribution">
            </div>

            <div class="timestamp">
                <p>Generated on {}</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>
    """.format(datetime.now().strftime("%Y-%m-%d %H:%M:%S"))

    return html_content