-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
60 lines (55 loc) · 2.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" />
<script src="javascript/window.mjs" type="module"></script>
</head>
<body>
<div id="blur"></div>
<canvas width="1200" height="800">You need to enable JavaScript</canvas>
<div id="sidebar">
<fieldset id="settings">
<h2>Settings</h2>
<label for="INVERT_SCROLL"><input type="checkbox" id="INVERT_SCROLL" name="INVERT_SCROLL" />Invert scroll</label>
<label for="SHOW_CENTRE"><input type="checkbox" id="SHOW_CENTRE" name="SHOW_CENTRE" />Show map centre</label>
<label for="OVERWRITE_NODES"><input type="checkbox" id="OVERWRITE_NODES" name="OVERWRITE_NODES" />Overwrite
nodes</label>
<label for="EDGE_PAN"><input type="checkbox" id="EDGE_PAN" name="EDGE_PAN" />Pan on mouse edge</label>
<label for="BLUR"><input type="checkbox" id="BLUR" name="BLUR" />Blur on blur</label>
<label for="RENDER_ON_BLUR"><input type="checkbox" id="RENDER_ON_BLUR" name="RENDER_ON_BLUR" />Render on
blur</label>
</fieldset>
<hr />
<fieldset id="style">
<h2>Style</h2>
<label for="GRID">Grid
<select name="GRID" id="GRID">
<option value="square">Square</option>
<option value="triangle">Triangle</option>
<option value="hexagon">Hexagon</option>
</select>
</label>
<label for="SHAPE">Shape
<select name="SHAPE" id="SHAPE">
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle</option>
<option value="hexagon">Hexagon</option>
</select>
</label>
<label for="FILL">Fill <input type="color" id="FILL" name="FILL" value="#000000"></label>
<label for="SIZE">Size <input type="range" id="SIZE" name="SIZE" min="1" max="100" value="100"></label>
<label for="OUTLINE">Outline <input type="color" id="OUTLINE" name="OUTLINE" value="#000000"></label>
<label for="THICKNESS">Thickness <input type="range" id="THICKNESS" name="THICKNESS" min="0" max="50"
value="0"></label>
</fieldset>
<hr />
<fieldset id="actions">
<h2>Actions</h2>
<button id="FULLSCREEN">Fullscreen</button>
<button id="CONVERT_ALL">Style all nodes</button>
<button id="CLEAR_ALL">Clear all nodes</button>
</fieldset>
</div>
</body>
</html>