<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <img src="img/atlas.png" id="atlas" style="display: none;"/>
        <canvas id="canvas" style="display: none;"></canvas>
        <style id="style"></style>
        <div id="center">
            <div id="center-inner">
                <form id="join" autocomplete="off">
                    <input type="text" id="room_code" name="room_code" placeholder="Room Code">
                    <input type="text" id="player_name" name="name" placeholder="Player Name">
                    <input type="submit" value="Join!"/>
                </form>
                <input id="custommaps" type="button" value="Custom Map Overrides">
                <input id="mapeditor" type="button" value="Map Editor">
                <div id="lobby" style="display: none;">
                    <span>Players:</span>
                    <div id="players"></div>
                    <input type="button" id="start" value="Start Game"/>
                </div>
                <div id="popup" style="display: none">
                    <input type="button" id="close" value="x" style='margin-bottom: .5rem' onclick="document.getElementById('popup').style.display = 'none'">
                    Map 1
                    <textarea id="map1"></textarea>
                    Map 2
                    <textarea id="map2"></textarea>
                    Map 3
                    <textarea id="map3"> </textarea>
                    Map 4
                    <textarea id="map4"></textarea>
                </div>
            </div>
        </div>
        <script src="js/main.js" type="module"></script>
    </body>
</html>