2019-10-20 11:08:13 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2019-10-20 12:36:18 +02:00
|
|
|
|
|
|
|
|
<head>
|
2019-10-20 11:08:13 +02:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Planetwars Mapbuilder</title>
|
2019-10-20 15:53:23 +02:00
|
|
|
<!-- <link rel="stylesheet" type="text/css" href="./static/res/style.css"> -->
|
2019-10-20 12:36:18 +02:00
|
|
|
<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()">×</a>
|
2019-10-20 19:32:05 +02:00
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
2019-10-20 12:36:18 +02:00
|
|
|
</div>
|
|
|
|
|
|
2019-10-20 15:53:23 +02:00
|
|
|
<div id="canvasWrapper" class="wrapper">
|
|
|
|
|
<canvas id="canvas" class="canvas"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
2019-10-20 12:36:18 +02:00
|
|
|
<button class="openbtn" onclick="toggleNav()">☰</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 {
|
2019-10-20 19:32:05 +02:00
|
|
|
document.getElementById("mySidepanel").style.width = "350px";
|
2019-10-20 12:36:18 +02:00
|
|
|
}
|
|
|
|
|
nav_open = !nav_open;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2019-10-20 15:53:23 +02:00
|
|
|
|
2019-10-20 12:36:18 +02:00
|
|
|
<script src="dist/bundle.js"></script>
|
|
|
|
|
|
|
|
|
|
</html>
|
