<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>StarKingdoms</title>
<script type="module" crossorigin src="/index.js"></script>
<link rel="modulepreload" crossorigin href="/modulepreload-polyfill-6303fcb0.js">
</head>
<body>
<h1>StarKingdoms</h1>
<fieldset class="joingamebox">
<legend>Join Game</legend>
<form action="/play.html" method="GET">
<label for="server">Choose server</label>
<select class="joingamecontent" name="server" id="server">
<!-- Dynamically filled by the JS later in this file -->
</select>
<br>
<label for="textures">Texture quality</label>
<select class="joingamecontent" name="textures" id="textures">
<option value="full">Full quality (May impact loading times)</option>
<option selected value="375">Medium quality (Recommended)</option>
<option value="125">Low quality</option>
</select>
<br>
<label for="username">Username</label>
<br>
<input class="m-5px" type="text" name="username" id="username" required/>
<br>
<button class="m-5px w-full">Launch!</button>
<br>
<p id="loginstatus">You are not logged in.</p>
<button style="display: none;" id="logout">Log out</button>
<a href="http://localhost:8080/select-realm" id="login">Click here to log in or change accounts.</a>
</form>
</fieldset>
</body>
<style>
.joingamebox {
width: min-content;
padding: 10px;
}
.m-5px {
margin: 5px;
}
.w-full {
width: 100%;
}
</style>
</html>