<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="VanillaLauncher" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <title>VanillaLauncher</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="icon" href="./assets/logo.png" />
</head>

<body>
  <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 style="height: 100%" src="./assets/logo.png" />
      <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)">Staff</div>
    <div class="container" style="flex-direction: row-reverse; width: 40%" onclick="history.back();">
      <div class="box"><img style="height: 40%" 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">loading...</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">Loading...</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">Loading...</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">
      <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 style="width: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 src="./assets/logo.png" style="width: 20%;" />
          <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; font-weight: bold;"
          onclick="saveSettings();">Save Changes</button>
      </div>
      <span class="settingCategory">Game Settings</span>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for=" clientDropdown" style="font-weight: bold; font-size: 1.5em;">Client</label>
          <label for="clientDropdown" class="settingExplanation">Select the client you want to use
            for the game. WASM versions have better performance</label>
        </div>
        <div class="optionContainer">
          <select id="clientDropdown">
            <option value="vanilla">Vanilla</option>
            <option value="wasm">Vanilla (WASM, more FPS)</option>
            <option value="resent">Resent</option>
            <option value="starlike">Starlike</option>
            <!-- <option value="1.9">1.9 (Only suported servers work)</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" placeholder="tab name" />
          </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" placeholder="image link" />
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for=" tabName" style="font-weight: bold; font-size: 1.5em;">about:blank</label>
          <label for=" tabName" class="settingExplanation">Open this tab in a blank tab</label>
        </div>
        <div class="optionContainer">
          <div class="container" style="width: max-content; justify-content: center;">
            <div class="button" style="padding: 0px; margin: 0px; background-color: var(--blue-color);"
              onclick="aboutBlank();">Open</div>
          </div>
        </div>
      </div>
      <div class="container settingContainer">
        <div class="settingTitleDescContainer">
          <label for=" autoaboutblank" style="font-weight: bold; font-size: 1.5em;">Auto about:blank</label>
          <label for="autoaboutblank" class="settingExplanation">Instantly opens about:blank if you don't want to leave
            this page in your history. Doesn't work in firefox</label>
        </div>
        <div class="optionContainer"">
          <div class=" container" style="width: max-content; justify-content: center;">
          <div id="autoaboutblank" class="button"
            style="padding: 0px; margin: 0px; user-select: none; border: var(--red-color) 1px solid;"
            onclick="toggleAutoAboutBlank();">Disabled</div>
        </div>
      </div>
    </div>
    </div>
  </settings>
  <staff>
    <div class="navbarfiller"></div>
    <div class="container" style="height: 75px; background-color: #141312"></div>
    <div class="container" style="height: 700px; background-color: var(--darkgrey-color); flex-direction: column;">
      <div class="container" style="width: 100%; height: 30%; justify-content: center;">
        <div
          style="background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), hsla(0, 0%, 0%, 0.25), rgba(0, 0, 0, 0)), url('https://preview.redd.it/what-is-your-favourite-minecraft-shader-and-why-v0-3xpvwe50vved1.jpeg?auto=webp&s=54f61e7fc42d73000b67e4dfaf72ab69f1e41e14'); background-size: cover; filter:blur(5px); width: 100%; height: 100%;">
        </div>
        <span
          style="font-size: 3em; font-weight: 700; font-family: 'Panton'; color: white; position: absolute;">Owners</span>
      </div>
      <div class="container" style="justify-content: space-evenly; box-sizing: border-box; width: 100%; height: 70%;">
        <div class="container" style="flex-direction: column; width: 30%; height: 80%;">
          <div class="container" style="width: 100%; height: 90%; justify-content: center;">
            <img src="https://skins.mcstats.com/body/front/f07fa847-63be-46d4-880a-de1f185ff6ed" />
          </div>
          <span
            style="font-size: 1.5em; font-weight: 700; font-family: 'Roboto', sans-serif; margin-top: 20px; color: #b4b4b4; letter-spacing: normal;">505cm
            [@hooman23]</span>
        </div>
        <div class="container" style="flex-direction: column; width: 30%; height: 80%;">
          <div class="container" style="width: 100%; height: 90%; justify-content: center;">
            <img src="https://skins.mcstats.com/body/front/84a7ef85-bb83-47d9-a0bf-ba11d0396d7f" />
          </div>
          <span
            style="font-size: 1.5em; font-weight: 700; font-family: 'Roboto', sans-serif; margin-top: 20px; color: #b4b4b4; letter-spacing: normal;">
            luciiii
            [@lucirer]</span>
        </div>
      </div>
    </div>
  </staff>
  <footer position: fixed; bottom: 0; width: 100%;>
    <div class="container" style="margin-top: 30px">
      <span style="width: 50%; text-align: start">&copy; 2024 VanillaMC * v1.0.0</span>
      <span id="c" style="color: white"></span>
      <div class="container" style="flex-direction: row-reverse; width: 50%">
        <p>Not affiliated with Mojang, AB.</p>
      </div>
    </div>
  </footer>
</body>

</html>