<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StarKingdoms</title>
</head>
<body>
<script type="module" src="/src/index.ts"></script>
<canvas id="canvas" class="renderbox"></canvas>
<div class="infobox">
<p id="pos">Position: NaN, NaN</p>
<p id="vel">Velocity: NaN</p>
<p id="pos-moon">Relative to Moon: NaN, NaN</p>
<p id="vel-dir">Track Angle: NaN</p>
<button style="display: none;" id="beamout">Beam out!</button>
</div>
</body>
<style>
:root {
--ui-bg-color: gray;
--ui-padding: 5px;
}
.renderbox {
position: absolute;
top: 0;
left: 0;
}
body {
margin: 0;
padding: 0;
}
.infobox {
position: absolute;
bottom: 0;
left: calc(50vw - 25%);
width: 50%;
background-color: var(--ui-bg-color);
padding: var(--ui-padding);
}
</style>
</html>