index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gravity Well</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        #instructionPlate {
            display: block;
            position: absolute;                         
            bottom: 33%;
            z-index: 100000;
            background: rgba(255,255,255,0.78);
            font-family: courier;
            margin: 0 20px;
            padding: 0 20px;
        }

        #instructionPlate ul {
            list-style-type: square;
        }

        #instructionPlate ul li {

        }

        #instructionPlate pre {
            display: inline-block;
        }

    </style>


    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

    
</head>

<body>
<div id="instructionPlate">
    <h2>Controls</h2>
    <ul>
        <li>Rotate right: <pre>D</pre> or <pre>&rightarrow;</pre></li>
        <li>Rotate left: <pre>A</pre> or <pre>&leftarrow;</pre></li>
        <li>Apply forward thrust: <pre>W</pre> or <pre>&uparrow;</pre></li>
    </ul>
</div>
<div id="settingsPanel"></div>
</body>
</html>