<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FIFA Champions</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body {
            background-color: white;
            color: black;
        }

        .top-bar {
            background-color: #003366; /* Darker blue */
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 30px;
            width: 100%;
            position: relative;
            z-index: 10;
        }

        .top-bar img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }

        .top-bar div {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .menu-button {
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            color: white;
        }

        /* Menu position and transition */
        .menu {
            background-color: #002244; /* Darker blue */
            position: absolute;
            top: 8%; /* Position directly below the blue bar */
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            transform: translateY(-100%); /* Initially hidden above the bar */
            transition: transform 0.5s ease; /* Smooth transition */
            border-radius: 0 0 20px 20px; /* Rounded corners at the bottom */
            z-index: 1; /* Ensure it appears above content */
        }

        /* Menu links */
        .menu a {
            color: white;
            text-decoration: none;
            padding: 15px;
            text-align: center;
            display: block;
        }

        .home-content, .rules-content, .partnerships-content, .league-content, .suspensions-content {
            display: none;
        }

        .home-content {
            margin-top: 20px;
            padding: 20px;
            display: block; /* This ensures Home section is visible by default */
        }

        /* When the menu is active, it smoothly slides down */
        .menu.open {
            transform: translateY(0); /* Menu slides down to its position */
        }

        .button {
            background-color: #003366;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 12px;
            margin-top: 10px;
        }

        .section-button {
            background-color: #003366;
            color: white;
            padding: 15px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 12px;
            margin: 10px;
        }

        .section-button:hover {
            background-color: #002244;
        }

        .partnerships-content a {
            background-color: #003366;
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            margin-top: 10px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }

        .suspensions-content p {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="top-bar">
        <div>
            <img src="https://cdn.discordapp.com/attachments/1334956170267459626/1334957318084886538/generated-image-1737817908094.png.jpg?ex=679e6b62&is=679d19e2&hm=e19628d950fb883f7d7ecee2cbb86988cb04bb005b43074618d8aec3c3b461a4&" alt="Logo">
            FIFA CHAMPIONS
        </div>
        <button class="menu-button" onclick="toggleMenu()">☰</button>
    </div>

    <div class="menu" id="menu">
        <a href="javascript:void(0)" onclick="showSection('home')">Home</a>
        <a href="javascript:void(0)" onclick="showSection('rules')">Rules</a>
        <a href="javascript:void(0)" onclick="showSection('partnerships')">Partnerships</a>
        <a href="javascript:void(0)" onclick="showSection('league')">League Winners</a>
        <a href="javascript:void(0)" onclick="showSection('suspensions')">Suspensions</a>
    </div>

    <div class="home-content" id="home-section">
        <p>This website is made for a league for RSS (Realistic Street Soccer, a game made on Roblox). By this website, you can keep updated on news, such as suspensions, partnerships, and league winners. This website will update a lot, so make sure you come on this website again!, press on the three stripes to start exploring.</p>
    </div>

    <div class="rules-content" id="rules-section">
        <p>Press on the link to be directed to the rules! READ CAREFULLY. <a href="https://docs.google.com/document/d/e/2PACX-1vSKNpr2hu9TQsP6W584h7oG8gNPOxthuQpEfCHpaq-760pp4iZTOqmx05EMivlATJyVIDOV5LGqpH39/pub" target="_blank">Rules</a></p>
    </div>

    <div class="partnerships-content" id="partnerships-section">
        <h2>Partnerships</h2>
        <a href="https://discord.gg/Cq6qUs8BQe" target="_blank" class="section-button">Intercontinental Cup</a>
        <a href="https://discord.gg/3HaBsPAHmC" target="_blank" class="section-button">UEFA</a>
        <a href="https://discord.gg/CD2q8CAPaC" target="_blank" class="section-button">RSSU</a>
        <a href="https://discord.gg/sKbJC3jTdr" target="_blank" class="section-button">Liga Portugal</a>
    </div>

    <div class="league-content" id="league-section">
        <h2>League Winners</h2>
        <p>To be updated...</p>
    </div>

    <div class="suspensions-content" id="suspensions-section">
        <h2>Suspensions</h2>
        <p><strong>falshero</strong> - 20/20M TC<br>
           <strong>REASON:</strong> N WORD<br>
           PAID
        </p>
        <p><strong>Messi 2.0</strong> - 7.5M/7.5M TC Bail<br>
           <strong>REASON:</strong> Harassment<br>
           PAID, NO SUSPENSIONS
        </p>
        <p><strong>albx</strong> - 5M/5M TC Bail<br>
           <strong>REASON:</strong> Harassment<br>
           PAID
        </p>
        <p><strong>Messi 2.0</strong> - 20.5M TC<br>
           <strong>REASON:</strong> Harassment<br>
           <em>(Key note: if you lose a match and feel the need to be salty, then don't be like this guy)</em>
        </p>
    </div>

    <script>
        function toggleMenu() {
            const menu = document.getElementById("menu");
            menu.classList.toggle("open");
        }

        function showSection(section) {
            // Hide all sections
            document.querySelectorAll('.home-content, .rules-content, .partnerships-content, .league-content, .suspensions-content').forEach(function(section) {
                section.style.display = 'none';
            });

            // Show the selected section
            document.getElementById(section + '-section').style.display = 'block';

            // Close the menu when a section is clicked
            toggleMenu();
        }
    </script>
</body>
</html>
