<html>
<head>
<title>WebMinecraft</title>
<script src="app.js"></script>
<style>
body {
font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
}
.params {
background-color: cadetblue;
width: fit-content;
}
.collapsible {
padding: 8px;
cursor: pointer;
border: none;
text-align: left;
width: 100%;
font-size: medium;
}
.paramContent {
display: flex;
overflow-y: hidden;
height: 0px;
}
.paramPanel {
padding: 10px;
background-color: #eeeeee;
}
</style>
</head>
<body>
<canvas id="game" width="1024" height="768"></canvas>
<div id="fps"></div>
<div class="params">
<button class="collapsible">Parameters</button>
<div class="paramContent">
<div class="paramPanel">
<h3>Light direction</h3>
<p>
x:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightx" />
</p>
<p>
y:
<input type="range" min="-100" max="100" value="50" class="slider" id="lighty" />
</p>
<p>
z:
<input type="range" min="-100" max="100" value="50" class="slider" id="lightz" />
</p>
<p>
<div id="lightDirVec"></div>
</p>
</div>
<div class="paramPanel">
<h3>Ambiant light</h3>
<p>
<input type="range" min="0" max="100" value="50" class="slider" id="ambiant" />
</p>
</div>
</div>
</div>
</body>
</html>