path-finding-visualization/index.html at main · LuchoLorenzo1/path-finding-visualization · GitHub

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
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Path Finding Algorithms</title>
	<link rel="stylesheet" href="./src/styles/styles.css" type="text/css" media="all">
	<link rel="stylesheet" href="./src/styles/grid.css" type="text/css" media="all">
	<link rel="stylesheet" href="./src/styles/menu.css" type="text/css" media="all">
	<link rel="shortcut icon" href="#">
</head>

<body>

	<canvas id="canvas"></canvas>

	<div id="menu-container" class="menu-container" style="display: none;">
		<ul id="menu-options" class="menu-options">
			<li id="algorithms-option" class="menu-option active">algorithms</li>
			<li id="grid-option" class="menu-option inactive">grid</li>
			<!-- <li id="terrain-option" class="menu-option inactive">terrain</li> -->
		</ul>

		<div id="algorithms-menu" class="menu" style="display: grid;">
			<label>
				select algorithm <select id="select-algorithm" name="select" class="boton"></select>
			</label>
			<label>
				speed <input type="range" id="algorithm-speed-input" name="speed" min="0.1" max="1.90" value="1" step="0.01" />
			</label>
		</div>

		<div id="grid-menu" class="menu" style="display: none;">
			<label>
				grid size <input type="range" id="grid-size" name="speed" min="10" max="500" step="2" value="80"/>
			</label>

			<!-- <label> -->
				<!-- border <input type="checkbox" id="border-checkbox" /> -->
			<!-- </label> -->
			<!-- <label> -->
				<!-- show weights <input type="checkbox" id="weights-checkbox" /> -->
			<!-- </label> -->
			<!-- <label> -->
			<!-- 	<h3>change colors</h3> -->
			<!-- 	<ul> -->
			<!-- 		origin <input type="color" name="origin-color-changer" value="#00FF00"> -->
			<!-- 	</ul> -->
			<!-- </label> -->
		</div>
		<!-- <div id="terrain-menu" class="menu" style="display: none;"></div> -->
		<!-- <div id="nodes-menu" class="menu" style="display: none;"></div> -->
	</div>

	<div class="buttons-container">
		<button id="menu-button" class="menu-button">MENU</button>
		<button id="run" class="start-button">RUN</button>
		<button id="clean-grilla" class="boton">CLEAN</button>
	</div>

</body>
<script type="module" src="./src/main.js"></script>
<script type="module" src="./src/menu.js"></script>

<link rel="stylesheet" href="" type="text/css" media="all">

</html>