<body style="min-height: 100vh;">
  <script defer src="index.js"></script>
  <div class="animatedIntroduction fancyText" style="font-weight: 300">
    hooman.dev
  </div>
  <nav>
    <div class="container" style="width: 40%">
      <img alt="VanillaLauncher Logo" style="width: 95px; height: 95px;" src="./assets/logo.webp" />
      <div class="logo fancyText">Vanilla Launcher</div>
    </div>
    <div class="button selectedButton" onclick="changeSelectedButton(this)">Home</div>
    <div class="button" onclick="changeSelectedButton(this)">Settings</div>
    <div class="button" onclick="changeSelectedButton(this)">Downloads</div>
    <div class="container" style="flex-direction: row-reverse; width: 40%" onclick="history.back();">
      <div class="box"><img style="width: 18px; height: 18px;" alt="backButton" src="./assets/x.png" /></div>
    </div>
  </nav>

  <home class="fadeInFirst">
    <div class="container" style="height: 470px; justify-content: center">
      <div class="launch"></div>
      <button class="button launchbutton" style="top: 250px" onclick="launch();">
        <span style="opacity: 1; z-index: 10; font-family: 'Panton'">Launch 1.8.9</span>
      </button>
    </div>
    <div class="container" style="height: 75px; background-color: #141312"></div>
    <span class="subheading">Recent News</span>

    <div class="container newsContainer">
      <div class="news">
        <div id="newsImage1"></div>
        <div id="newsContent1" class="container newsContent">
          Loading...
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor1">me</span></span>
          <div id="newsDate1" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
      <div class="news">
        <div id="newsImage2"></div>
        <div id="newsContent2" class="container newsContent">
          Loading...
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor2">me</span></span>
          <div id="newsDate2" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
      <div class="news">
        <div id="newsImage3"></div>
        <div id="newsContent3" class="container newsContent">
          Loading...
        </div>
        <div class="container newsFooter">
          <span>Posted by <span id="newsAuthor3">me</span></span>
          <div id="newsDate3" class="container" style="flex-direction: row-reverse">
            Loading...
          </div>
        </div>
      </div>
    </div>
    <div class="container" style="height: 75px; background-color: #141312"></div>
    <span class="subheading">Servers</span>
    <div class="container servers" style="flex-wrap: wrap; flex-direction: column; margin-bottom: 50px;">
      <div class="container" style="
          position: absolute;
          width: 90%;
          height: 50px;
          background-color: #DA5A57;
          justify-content: space-between;
          font-size: 1.5em;
          font-weight: 400;
          border-radius: 10px 10px 0 0;
          z-index: 100;
        ">
        <div class="container" style="width: 40%; margin-left: 15px; ">#1</div>
        VanillaMC
        <div class="container" style="width: 40%; flex-direction: row-reverse; margin-right: 15px;">
          <div class="dropdown">
            <span id="hidemobile">Alternative</span> IPs <div class="arrow"> <img alt="downArrow"
                style="width:0.75em; height: 0.75em;" src="./assets/down.svg"> </div>
            <div class="dropdown-content">
              vanillacraftsmp.us.to
              <br>
              vanillamc.tech
              <br>
              vanillacraftsmp.uk.to
              <br>
              vanillacraft.minecraft.pe
              <br>
              vanillacraftsmp.404.mn
              <br>
              vanillamc.boxiq.com
              <br>
              vanillamc.cbu.net
              <br>
              vanillamc.ens.org
              <br>
              th.orns.net
            </div>
          </div>
        </div>
      </div>
      <div class="container" style="
          position: relative;
          top: 50px;
          height: 200px;
          width: 90%;
          background-color: var(--darkgrey-color);
          border-radius: 0 0 10px 10px;
          align-items: start;
        ">
        <div class="container" style="width: 50%;">
          <img alt="VanillaLauncher Logo" src="./assets/logo.webp" style="width: 95px; height: 95px;" />
          <div class="container"
            style="width: 80%; flex-direction: column; justify-content: center; align-items: start;">
            <span style="font-size: 2em; font-weight: 400">VanillaMC
              <span id="hidemobile"><span style="color: grey">|</span> Factions</span></span>
            <span style="font-size: 1.5em; font-weight: 300; color: #ffff55">[wss://] vanillamc.me</span>
          </div>
        </div>
      </div>
    </div>
  </home>
  <settings>
    <div class="navbarfiller"></div>
    <div class="container allSettingsContainer">
      <div class="container" style="
  justify-content: space-between;">
        <span style="font-family: 'Panton'; font-size: 2em; margin: 36px 0 32px 0;">Preferences</span>
        <button class="button saveSettingsButton" style="height: 45px;" onclick="saveSettings();">Save Changes</button>
      </div>
      <span class="settingCategory">Game Settings</span>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">Client</span>
          <span class="settingExplanation">Select the client you want to use
            for the game. WASM versions have better performance</span>
        </div>
        <div class="optionContainer" style="margin-bottom: 36px;">
          <select id="clientDropdown">
            <option value="vanilla">Vanilla 1.8.8</option>
            <option value="wasm">Vanilla 1.8.8 (WASM, more FPS)</option>
            <option value="resent">Resent</option>
            <option value="starlike">Starlike</option>
            <option value="1.9">1.9</option>
            <option value="eaglerforge">EaglerForge</option>
          </select>
        </div>
      </div>
      <span class="settingCategory">Web Settings</span>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for="tabName" style="font-weight: bold; font-size: 1.5em;">Tab name</label>
          <label for="tabName" class="settingExplanation">Set the title of this tab</label>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <input type="text" id="tabName" />
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for="tabIcon" style="font-weight: bold; font-size: 1.5em;">Tab icon</label>
          <label for="tabIcon" class="settingExplanation">Input a url to an image for the tab icon</label>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <input type="text" id="tabIcon" />
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">about:blank</span>
          <span class="settingExplanation">Open this tab in a blank tab</span>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <div class="button" id="aboutBlankButton"
              style="padding: 0px; margin: 0px; background-color: var(--blue-color);" onclick="aboutBlank();">Open</div>
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <span style="font-weight: bold; font-size: 1.5em;">Auto about:blank</span>
          <span class="settingExplanation">Instantly opens about:blank if you don't want to leave
            this page in your history. Doesn't work in firefox</span>
        </div>
        <div class="optionContainer" style="margin-bottom: 36px;">
          <div class="container" style="width: max-content; justify-content: center;">
            <div id="autoaboutblank" class="button" style="padding: 0px; margin: 0px; user-select: none;"
              onclick="toggleAutoAboutBlank();">Disabled</div>
          </div>
        </div>
      </div>
    </div>
  </settings>
  <downloads>
    <div class="navbarfiller"></div>
    <span class="subheading" style="top: 32px;">Downloads</span>
    <div id="downloads" class="container">
    </div>
  </downloads>
  <footer style="position: fixed; bottom: 0; width: 100%; z-index: 100;">
    <div class=" container" style="margin-top: 30px">
      <span style="width: 35%; text-align: start">&copy; 2024 VanillaMC * v1.0.1</span>
      <span id="c" style="color: white"></span>
      <div class="container" style="flex-direction: row-reverse; width: 35%">
        <p>Not affiliated with Mojang, AB.</p>
      </div>
    </div>
  </footer>
</body>