index.html

<!DOCTYPE html>
<html lang="en" x-data="{
  darkMode: localStorage.getItem('darkMode')
  ? JSON.parse(localStorage.getItem('darkMode'))
  : window.matchMedia('(prefers-color-scheme: dark)').matches,
  toggleDarkMode() {
    this.darkMode = ! this.darkMode;
    localStorage.setItem('darkMode', JSON.stringify(this.darkMode));
  }
}" :class="{ 'dark': darkMode, '' : !darkMode }"
  x-init="$watch('darkMode', value => document.body.classList.toggle('dark', value))">

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: "selector",
      theme: {
        extend: {},
      },
    };
  </script>
  <script type="text/javascript" data-cmp-ab="1"
    src="https://cdn.consentmanager.net/delivery/autoblocking/59e7a281c2e8b.js"
    data-cmp-host="a.delivery.consentmanager.net" data-cmp-cdn="cdn.consentmanager.net" data-cmp-codesrc="16"></script>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-NYTC7DD45D"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-NYTC7DD45D');
  </script>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Openfoot Manager</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="assets/openfootball.svg" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body class="bg-gray-50 dark:bg-slate-900 dark:text-white">
  <header class="fixed top-0 w-full p-4 text-white bg-green-500 dark:bg-green-700">
    <div class="container flex justify-between h-16 mx-auto">
      <a rel="noopener noreferrer" href="#" aria-label="Back to homepage" class="flex items-center p-2">
        <img src="assets/openfootball.svg" class="w-16" />
      </a>
      <ul class="items-stretch hidden space-x-3 md:flex text-lg">
        <li class="flex items-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
            class="bi bi-house-door-fill" viewBox="0 0 16 16">
            <path
              d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5" />
          </svg>
          <a rel="noopener noreferrer" href="#" class="flex px-4 -mb-1 uppercase font-semibold">Home</a>
        </li>
        <li class="flex items-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
            class="bi bi-info-circle-fill" viewBox="0 0 16 16">
            <path
              d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2" />
          </svg>
          <a href="#faq" class="flex px-4 -mb-1 uppercase font-semibold">About</a>
        </li>
        <li class="flex items-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-newspaper"
            viewBox="0 0 16 16">
            <path
              d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z" />
            <path
              d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z" />
          </svg>
          <a href="https://github.com/openfootmanager/openfootmanager/issues/11" target="_blank"
            class="flex px-4 -mb-1 uppercase font-semibold">Roadmap</a>
        </li>
        <li class="flex items-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github"
            viewBox="0 0 16 16">
            <path
              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
          </svg>
          <a href="https://github.com/openfootmanager/openfootmanager" target="_blank"
            class="flex items-center px-4 -mb-1 uppercase font-semibold">GitHub</a>
        </li>
        <li class="flex items-center mr-2">
          <button
            class="flex items-center px-4 -mb-1 uppercase font-semibold rounded-3xl py-4 bg-green-400 hover:bg-green-300 dark:bg-green-600 dark:hover:bg-green-500"
            @click="toggleDarkMode">
            <span x-show="darkMode === true">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun-fill"
                viewBox="0 0 16 16">
                <path
                  d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
              </svg>
            </span>
            <span x-show="darkMode === false">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-fill"
                viewBox="0 0 16 16">
                <path
                  d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278" />
              </svg>
            </span>
          </button>
        </li>
      </ul>
      <button class="flex justify-end p-4 md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </header>

  <section>
    <div class="bg-green-950 text-white" style="
          background-image: url(assets/crowd.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        ">
      <div
        class="flex flex-col items-center px-4 py-5 pb-48 mx-auto text-center lg:pb-48 md:py-48 md:px-10 lg:px-32 dark:text-gray-50">
        <img class="mt-20 mb-10" src="assets/openfootlogo.svg" alt="logo" />
        <h1 class="text-5xl font-bold leading-none sm:text-6xl dark:text-gray-50 uppercase">
          Build your dream team
        </h1>
        <p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-50">
          You make the choices. They make the history!
        </p>
        <div class="flex flex-wrap justify-center">
          <a href="#faq"
            class="px-8 py-3 m-2 text-xl font-semibold rounded-xl bg-green-500 hover:bg-green-400 cursor-pointer dark:bg-green-700 dark:bg-green-600 dark:text-gray-200">
            Learn more
          </a>
          <a href="https://github.com/openfootmanager/openfootmanager/blob/develop/CONTRIBUTING.md"
            class="px-8 py-3 m-2 text-xl border rounded-xl cursor-pointer hover:bg-gray-300 hover:text-black dark:border-gray-300 dark:hover:text-gray-50 dark:hover:bg-gray-500">
            Contribute
          </a>
        </div>
      </div>
    </div>
    <img src="https://source.unsplash.com/random/480x320" alt=""
      class="w-5/6 mx-auto mb-12 -mt-20 dark:bg-gray-500 rounded-lg shadow-md lg:-mt-40" />
  </section>

  <section
    class="container mx-auto py-16 bg-gray-100 dark:bg-slate-800 border border-gray-400 dark:border-slate-600 dark:text-white rounded-3xl shadow-2xl">
    <div class="container mx-auto grid justify-center gap-4 sm:grid-cols-2 lg:grid-cols-3 items-center">
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-github w-16 h-16" viewBox="0 0 16 16">
          <path
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">Open Source</h3>
        <div class="space-y-1 leading-tight text-wrap w-72 text-center">
          Openfoot Manager is an open source project. You can see the source
          code and study how it works. We encourage you to take a look at it
          and try to improve it if you feel like it!
        </div>
      </div>
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-database-fill h-16 w-16" viewBox="0 0 16 16">
          <path
            d="M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4s-.875 1.755-1.904 2.223C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777C2.875 5.755 2 5.007 2 4s.875-1.755 1.904-2.223" />
          <path
            d="M2 6.161V7c0 1.007.875 1.755 1.904 2.223C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777C13.125 8.755 14 8.007 14 7v-.839c-.457.432-1.004.751-1.49.972C11.278 7.693 9.682 8 8 8s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972" />
          <path
            d="M2 9.161V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13s3.022-.289 4.096-.777C13.125 11.755 14 11.007 14 10v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972" />
          <path
            d="M2 12.161V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">Modifiable database</h3>
        <div class="space-y-1 leading-tight text-wrap w-72 text-center">
          The game comes with a default database that is fully modifiable. You
          can easily add your favorite teams and players.
        </div>
      </div>
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-chat-dots-fill w-16 h-16" viewBox="0 0 16 16">
          <path
            d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">Live descriptions</h3>
        <div class="space-y-1 leading-tight w-72 text-center">
          Your matches are simulated in real-time, with live descriptions of what happens in your game.
        </div>
      </div>
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-wifi-off w-16 h-16" viewBox="0 0 16 16">
          <path
            d="M10.706 3.294A12.6 12.6 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4q.946 0 1.852.148zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.45 8.45 0 0 1 3.51-1.27zm2.596 1.404.785-.785q.947.362 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.5 8.5 0 0 0-1.98-.932zM8 10l.933-.933a6.5 6.5 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.53.53 0 0 1-.611.09A5.5 5.5 0 0 0 8 10m4.905-4.905.747-.747q.886.451 1.685 1.03a.485.485 0 0 1 .047.737.52.52 0 0 1-.668.05 11.5 11.5 0 0 0-1.811-1.07M9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A2 2 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75z" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">Offline</h3>
        <div class="space-y-1 leading-tight w-72 text-center">
          The game can be played offline. No need to connect to a server or
          log in to a website. Download it and play it as much as you like.
        </div>
      </div>
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-currency-dollar w-16 h-16" viewBox="0 0 16 16">
          <path
            d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73z" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">No hidden fees</h3>
        <div class="space-y-1 leading-tight w-72 text-center">
          The game is free to play. We don't require any licenses or in-game
          purchases. This is not a gacha game.
        </div>
      </div>
      <div class="flex flex-col items-center p-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-feather h-16 w-16" viewBox="0 0 16 16">
          <path
            d="M15.807.531c-.174-.177-.41-.289-.64-.363a3.8 3.8 0 0 0-.833-.15c-.62-.049-1.394 0-2.252.175C10.365.545 8.264 1.415 6.315 3.1S3.147 6.824 2.557 8.523c-.294.847-.44 1.634-.429 2.268.005.316.05.62.154.88q.025.061.056.122A68 68 0 0 0 .08 15.198a.53.53 0 0 0 .157.72.504.504 0 0 0 .705-.16 68 68 0 0 1 2.158-3.26c.285.141.616.195.958.182.513-.02 1.098-.188 1.723-.49 1.25-.605 2.744-1.787 4.303-3.642l1.518-1.55a.53.53 0 0 0 0-.739l-.729-.744 1.311.209a.5.5 0 0 0 .443-.15l.663-.684c.663-.68 1.292-1.325 1.763-1.892.314-.378.585-.752.754-1.107.163-.345.278-.773.112-1.188a.5.5 0 0 0-.112-.172M3.733 11.62C5.385 9.374 7.24 7.215 9.309 5.394l1.21 1.234-1.171 1.196-.027.03c-1.5 1.789-2.891 2.867-3.977 3.393-.544.263-.99.378-1.324.39a1.3 1.3 0 0 1-.287-.018Zm6.769-7.22c1.31-1.028 2.7-1.914 4.172-2.6a7 7 0 0 1-.4.523c-.442.533-1.028 1.134-1.681 1.804l-.51.524zm3.346-3.357C9.594 3.147 6.045 6.8 3.149 10.678c.007-.464.121-1.086.37-1.806.533-1.535 1.65-3.415 3.455-4.976 1.807-1.561 3.746-2.36 5.31-2.68a8 8 0 0 1 1.564-.173" />
        </svg>
        <h3 class="my-3 text-3xl font-semibold">Lightweight</h3>
        <div class="space-y-1 leading-tight w-60 text-center">
          <p>
            The game is lightweight and fast, so you should not need a beefy
            computer to play it.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section id="faq" class="mt-10 dark:text-white py-16">
    <div
      class="container flex flex-col justify-center p-4 mx-auto md:p-8 rounded-3xl dark:bg-gray-800 dark:text-gray-100 border border-gray-400 dark:border-slate-600 shadow-2xl">
      <h2 class="mb-12 text-4xl font-bold leading-none text-center sm:text-5xl">
        Frequently Asked Questions
      </h2>
      <div class="flex flex-col text-xl divide-y divide-gray-400 sm:px-8 lg:px-12 xl:px-32 dark:divide-gray-300">
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            What's this game about?
          </summary>
          <div class="px-4 pb-4">
            <p>
              <b>Openfoot Manager</b> is a game where you can manage a football
              team, just like you can do in games such as
              <b>Football Manager</b>, <b>FIFA Manager</b>,
              <b>Championship Manager</b>, <b>Elifoot</b>, and etc.
            </p>
            <br />
            <p>
              This project was inspired by a game called
              <b><a href="https://bygfoot.sourceforge.io/new/">Bygfoot</a></b>, which is sort of a free and open source
              alternative to
              Football Manager. Bygfoot is written in C and the interface is
              written in GTK 2. It's pretty outdated for today's standards,
              and the original developers no longer maintain the project, with
              a few players still active on it.
            </p>
            <br />
            <p>
              I wanted to develop a game using the technologies I was most
              comfortable with, so I wrote the base of the game in Python back
              in 2020 as a hobby project. Initially, I didn't know what I was
              doing, so the game went through several rewrites, and
              eventually, it became what I'm working right now. Just recently
              I got more comfortable to invest more time into this project and
              try to bring it to life just as I envisioned it.
            </p>
            <br />
            <p>
              Right now the game is still in development, and I'm using a mix
              of web technologies to build its UI.
            </p>
          </div>
        </details>
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            Who is the author of this game?
          </summary>
          <div class="px-4 pb-4">
            <p>
              You can find me on GitHub as
              <a href="https://github.com/sturdy-robot"><b>Sturdy Robot</b></a>. I'm a 28-year-old programmer from
              Brazil. I love games and I
              experiment with a lot of different programming projects.
            </p>
          </div>
        </details>
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            Where can I download the game?
          </summary>
          <div class="px-4 pb-4">
            <p>
              Unfortunately, we don't have a public release yet, only
              debugging versions that require installing Python to run. As
              soon as the first public release comes out, I'll update this
              website accordingly.
            </p>
          </div>
        </details>
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            Can I see the games in 3D?
          </summary>
          <div class="px-4 pb-4">
            <p>
              My idea with this game was to build a simple simulation engine,
              similar to what Football Manager and Championship Manager did on
              their early days. You can see the descriptions of what happens
              in the matches, but no visual representation.
            </p>
            <br />
            <p>
              3D is very hard to pull off for a single developer. Maybe it's
              something we can work on in the future.
            </p>
          </div>
        </details>
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            When is version 1.0 coming out?
          </summary>
          <div class="px-4 pb-4 space-y-2">
            <p>
              Unfortunately, I don't have a release date yet. I have a
              full-time job, and I work on this during my spare time or
              whenever I feel like it. I also have many projects that I'm
              working on at the same time, so my attention is not entirely
              focused here. As a sister project, I also have
              <a href="https://github.com/esports-manager/esports-manager"><b>eSports Manager</b></a>, which is my
              version of an eSports management game, which is also free
              and open source.
            </p>
            <br />
            <p>
              If you want the project to release earlier, you can submit your
              own contributions. Just check out how you can contribute
              <a href="https://github.com/openfootmanager/openfootmanager/blob/develop/CONTRIBUTING.md"><b>here</b></a>.
            </p>
          </div>
        </details>
        <details>
          <summary class="py-2 outline-none cursor-pointer focus:underline font-bold">
            How can I help?
          </summary>
          <div class="px-4 pb-4 space-y-2">
            <p>
              You can check out the
              <a
                href="https://github.com/openfootmanager/openfootmanager/blob/develop/CONTRIBUTING.md"><b>CONTRIBUTING</b></a>
              page for more information about how to support the project.
            </p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <footer class="py-6 bg-green-500 text-white dark:bg-green-700">
    <div class="container px-6 mx-auto space-y-6 divide-y dark:divide-gray-600 md:space-y-12 divide-opacity-50">
      <div class="grid justify-center pt-6 lg:justify-between">
        <div class="flex flex-col self-center text-sm text-center md:block lg:col-start-1 md:space-x-6">
          <span>©2024 All rights reserved</span>
        </div>
        <div class="flex justify-center pt-4 space-x-4 lg:pt-0 lg:col-end-13">
          <a href="mailto:admin@esportsmanager.net" title="Email"
            class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 text-gray-800">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </a>
          <a href="https://github.com/openfootmanager/openfootmanager" title="GitHub"
            class="flex items-center justify-center w-10 h-10 rounded-full text-gray-800 bg-gray-100">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5">
              <path
                d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z">
              </path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>