<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="src/style.css" rel="stylesheet" type="text/css" />
    <script src="src/nuts.js" type="module"></script>
    <script src="src/balls.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
</head>

<body>
    <div id="optionContainer">
        <div class="mainDescription">
            <div class="textContainer">Options</div>
        </div>
        <div id="grass" class="lined ContainerOptions">
            <img id='grassIcone' class='icons' src="src/images/customize.png" alt="grass">
            <div class="description" id="grassDescription">
                <div class="textContainer">Cutomize Game</div>
            </div>
        </div>
        <div id="account" class="lined ContainerOptions">
            <img id='accountIcone' class='icons' src="src/images/account.png" alt="account">
            <div class="description" id="accountDescription">
                <div class="textContainer">Manage Accounts</div>
            </div>
        </div>
        <div id="game" class="lined ContainerOptions">
            <img src="src/images/game.png" class="icons" id="gameIcon">
            <div class="description" id="gameDescription">
                <div class="textContainer">Game Features</div>
            </div>
        </div>
        <div class="mainDescription" id="bottomIcons">
            <a href="https://discord.gg/V2HTjSxnT7" target="_blank" rel="noopener noreferrer">
                <img src="src/images/discord.png" alt="Discord" class="icons" id="discordIcon">
            </a>
            <img src="src/images/settings.png" class="icons" id="settingsIcon">
            <img src="/src/images/list.png" id="GeneralInfoIcon">
        </div>
    </div>

    <div id="grassClicked" class="clicked">
        <div class="mainDescription">
            <div class="textContainer">Customization</div>
        </div>
        <div id="grassColorDiv" class="lined">
            <input id="grassColorPicker" type="color" name="colorPicker" value="#1F0000">
            <div class="description" id="grassDescription">
                <div class="button" id="changeGrassButton">&#10229; Change Grass</div>
            </div>
        </div>
        <div class="lined" id="hidePass">
            <img src="src/images/eye.jpg" class='icons' id="eyeIcon">
            <div class="description">
                <div class="button">
                    Spectate
                </div>
            </div>
        </div>
        <div><img class="returnHome" src="src/images/return.png" alt="returnHome"></div>
    </div>
    <div id="accountClicked" class="clicked">
        <div class="mainDescription">
            <div class="textContainer">Account Management</div>
        </div>
        <div class="lined" id="getAccountCode">
            <img src="src/images/icon.png" class="icons" id="accountCodeIcon">
            <div class="description" id="accountCode">
                <div class="textContainer" id="accountCodeTextContainer">Get Private Code</div>
            </div>
        </div>
        <div class="lined" id="changeAccount">
            <img src="src/images/accounts.png" class="icons" id="accountsIcon">
            <div class="description" id="accountCodeInputDesc">
                <input type="text" class="textContainer" id="accountCodeInput" placeholder="Insert Code">
            </div>
        </div>
        <div id="accountList" class="lined">
            <img src="src/images/list.png">
            <div class="description" id="accountListDescription">
                <div class="textContainer" >Alt Accounts</div>
            </div>
        </div>
        <div><img class="returnHome" src="src/images/return.png" alt="returnHome"></div>
    </div>
    <div class="clicked" id="accountListClicked">
        <div class="mainDescription"><div class="textContainer">Alt Accounts</div></div>
        <div class="HalfButton">
            <div class="button" style="width: 100px;">
                Validate
            </div>
            <div class="button" id="buttonIDK" style="width: 100px;">
                check
            </div>
        </div>
        <div id="accountListAppend" class="lined">
        </div>
        <div><img class="returnHome lined" src="src/images/return.png"></div>
    </div>
    <div id="gameClicked" class="clicked">
        <div class="mainDescription ">
            <div class="textContainer">Game Management</div>
        </div>
        <div><img class="returnHome" src="src/images/return.png"></div>
    </div>
    <div id="settingsClicked" class="clicked">
        <div class="mainDescription">
            <div class="textContainer">Account Settings</div>
        </div>
        <div><img class="returnHome lined" src="src/images/return.png"></div>
    </div>
    <div id="changeLogClicked" class="clicked">
        
    </div>
</body>

</html>