<!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;
    }

    /* Text in the black bar */
    #top-bar .title {
      font-size: 18px;
      font-weight: bold;
    }

    /* Smaller menu button */
    #top-bar .menu-icon {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 25px; /* Smaller button */
      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%; /* Adjusted size to make the image larger but within limits */
      height: auto;
      display: block;
      margin: 0 auto; /* Centers the image */
    }

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

    /* Discord button styling */
    .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>
  </div>

  <!-- Main content -->
  <div class="container" id="content">
    <p>This is the official Tekky Ballers FC website, where you can join our Discord and find more.</p>

    <!-- Discord button -->
    <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");

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

    // Show Info page
    function showInfo() {
      content.innerHTML = `
        <p>This is the official Tekky Ballers FC website, where you can join our Discord and find more.</p>
        <div class="discord-button-container">
          <a href="https://discord.gg/YYdqVh8B5H" target="_blank" class="discord-button">Discord Server</a>
        </div>
      `;
    }

    // Show Formation page
    function showFormation() {
      content.innerHTML = `
        <div class="formation">
          <img src="formation.png" alt="Formation">
        </div>
        <div class="formation-text">
          <p>We play in a formation called the pickaxe: 3 attackers, 2 midfielders, 1 defender, and 1 goalkeeper. This creates a full-out attack that can make more goal-scoring opportunities available. Join the Discord, and we can discuss what positions are available!</p>
        </div>
      `;
    }
  </script>
</body>
</html>