planet-wars/mapbuilder/index.html
2019-10-20 19:32:05 +02:00

74 lines
No EOL
2.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Planetwars Mapbuilder</title>
<!-- <link rel="stylesheet" type="text/css" href="./static/res/style.css"> -->
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
</head>
<body>
<div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&times;</a>
<div class="section">
<span class="title">Grid</span>
<div class="prop gridline">
<div class="item">
<label for="mwidth" class="input">Line width</label>
<input type="number" id="mwidth" value="4">
</div>
<div class="item">
<label for="mwidth" class="input">Seperation</label>
<input type="number" id="mwidth" value="100">
</div>
<div class="item">
<label for="mwidth" class="input">Color</label>
<input type="text" id="mwidth" value="#333">
</div>
</div>
<hr>
<div class="prop gridline">
<div class="item">
<label for="mwidth" class="input">Line width</label>
<input type="number" id="mwidth" value="2">
</div>
<div class="item">
<label for="mwidth" class="input">Seperation</label>
<input type="number" id="mwidth" value="20">
</div>
<div class="item">
<label for="mwidth" class="input">Color</label>
<input type="text" id="mwidth" value="#333">
</div>
</div>
</div>
</div>
<div id="canvasWrapper" class="wrapper">
<canvas id="canvas" class="canvas"></canvas>
</div>
<button class="openbtn" onclick="toggleNav()">&#9776;</button>
</body>
<script>
var nav_open = false;
/* Set the width of the sidebar to 250px (show it) */
function toggleNav() {
if (nav_open) {
document.getElementById("mySidepanel").style.width = "0";
} else {
document.getElementById("mySidepanel").style.width = "350px";
}
nav_open = !nav_open;
}
</script>
<script src="dist/bundle.js"></script>
</html>