<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TEKKY BALLERS FOOTBALL CLUB</title>
  <style>
    /* General styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f4f4f4;
      overflow-x: hidden;
    }

    /* Top black bar */
    #top-bar {
      background-color: black;
      color: white;
      display: flex;
      justify-content: space-between;
      padding: 15px 20px;
      position: relative;
      align-items: center;
    }

    #top-bar .title {
      font-size: 18px;
      font-weight: bold;
    }

    #top-bar .menu-icon {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 25px;
      height: 20px;
    }

    #top-bar .menu-icon div {
      width: 100%;
      height: 3px;
      background-color: white;
      transition: transform 0.3s;
    }

    /* Sliding menu */
    .menu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: black;
      color: white;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
      z-index: 999;
      padding: 10px 20px;
    }

    .menu.active {
      transform: translateY(0);
    }

    .menu a {
      display: block;
      margin-bottom: 10px;
      color: white;
      text-decoration: none;
      font-size: 16px;
    }

    .menu a:hover {
      text-decoration: underline;
    }

    /* Main content */
    .container {
      padding: 20px;
    }

    .formation img {
      max-width: 80%;
      height: auto;
      display: block;
      margin: 0 auto; /* Centers the image */
    }

    .formation-text {
      text-align: left;
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.5;
    }

    .discord-button-container {
      margin-top: 20px;
    }

    .discord-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: black;
      color: white;
      font-size: 14px;
      text-decoration: none;
      border: 1px solid white;
      border-radius: 4px;
      transition: background-color 0.3s, color 0.3s;
    }

    .discord-button:hover {
      background-color: white;
      color: black;
    }
  </style>
</head>
<body>
  <!-- Top bar -->
  <div id="top-bar">
    <div class="title">TEKKY BALLERS FOOTBALL CLUB</div>
    <div class="menu-icon" onclick="toggleMenu()">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <!-- Sliding menu -->
  <div class="menu" id="menu">
    <a href="#" onclick="showInfo()">Info</a>
    <a href="#" onclick="showFormation()">Formation</a>
    <a href="#" onclick="showLeagues()">Leagues</a>
  </div>

  <!-- Main content -->
  <div class="container" id="content">
    <p>This is the official Tekky Ballers FC website, if you do not know we are a club in the Roblox game "Realistic Street Soccer". Join for tryouts and getting a spot in the team!</p>

    <div class="discord-button-container">
      <a href="https://discord.gg/YYdqVh8B5H" target="_blank" class="discord-button">Discord Server</a>
    </div>
  </div>

  <script>
    const menu = document.getElementById("menu");
    const content = document.getElementById("content");

    function toggleMenu() {
      menu.classList.toggle("active");
    }

    function showInfo() {
      content.innerHTML = `
        <p>This is the official Tekky Ballers FC website, if you do not know we are a club in the Roblox game "Realistic Street Soccer". Join for tryouts and getting a spot in the team!</p>
        <div class="discord-button-container">
          <a href="https://discord.gg/YYdqVh8B5H" target="_blank" class="discord-button">Discord Server</a>
        </div>
      `;
    }

    function showFormation() {
      content.innerHTML = `
        <div class="formation">
          <img src="https://raw.githubusercontent.com/Klevis123-1/tekkyballersfc.github.io/refs/heads/main/DDCDB3FF-2BD7-4BAE-B4ED-EF9694F9A337.JPEG" alt="Formation">
        </div>
        <div class="formation-text">
          <p>This formation is a 3-1-2-1. This consists of 3 Strikers, Left Striker (LST), Striker (ST), Right Striker (RST), 1 midfielder (CM), 2 Centre-Backs (CB), and one Goalkeeper (GK). Our aim is to have many scoring chances, have playmaking, and good defenders. This is our formation for now, and it can change at any time!</p>
        </div>
      `;
    }

    function showLeagues() {
      content.innerHTML = `
        <p>We play for 4 leagues: one which I own and three that we don’t. They will all be below, so feel free to join! If you are signed, you will need to join so we can sign you, update you on matches, and more.</p>
        <div class="discord-button-container">
          <a href="https://discord.gg/Z925B3Z9er" target="_blank" class="discord-button">RSSL</a>
        </div>
        <div class="discord-button-container">
          <a href="https://discord.gg/rz6YKa33ky" target="_blank" class="discord-button">VSL RSS</a>
        </div>
        <div class="discord-button-container">
          <a href="https://discord.gg/ZcKVFHmHGy" target="_blank" class="discord-button">UEFA | CHAMPIONS LEAGUE</a>
        </div>
        <div class="discord-button-container">
          <a href="https://discord.gg/buaDjBJANE" target="_blank" class="discord-button">Champions League | Season 3</a>
        </div>
      `;
    }
  </script>
</body>
</html>