<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>

</html>