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