-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (203 loc) · 9.1 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Path finder</title>
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="style/utility.css">
</head>
<body>
<div class="tutorial" id="tutorial">
<div class="card">
<div class="upper">
<!-- -------- WHAT -->
<div class="slide">
<h4>what is path finder visualizer</h4>
<div class="img-box"></div>
<p>It helps you see how path finding <span class="blue">algorithms</span> find the most efficient
<span class="blue">route</span> between source to target on a grid. </p>
</div>
<!-- -------- HOW -->
<div class="slide">
<h4>How does it work</h4>
<div class="img-box"></div>
<p>
You can set start and end points, create mazes, choose algorithms, and watch the process in
action.
It's a fun and visual way to understand how different strategies navigate through obstacles to
find the <span class="blue">shortest path</span>.
</p>
</div>
<!-- -------- SOURCE/TARGET -->
<div class="slide default-bg">
<h4>Adjust source/target</h4>
<div class="img-box shadow">
<img src="assets/tutorial/drag-source-target.gif" alt="">
</div>
<p>
Click and drag the <span class="blue">source/target</span> marker to where you want it on the grid.
</p>
</div>
<!-- -------- DRAW WALLS -->
<div class="slide default-bg">
<h4>Draw walls/obstacles</h4>
<div class="img-box shadow">
<img src="assets/tutorial/draw-wall.gif" alt="">
</div>
<p>
Use the 'Draw Wall' option to mark obstacles on the grid. <br> Simply <span class="blue">click</span> and <span class="blue">drag</span> to create walls and define the layout.
</p>
</div>
<!-- -------- MAZE GENERATION -->
<div class="slide default-bg">
<h4>generate maze</h4>
<div class="img-box shadow">
<img src="assets/tutorial/generate-maze.gif" alt="">
</div>
<p>
It's time to give your pathfinding algorithm a <span class="blue">brainstorm!</span> <br>
Just click <span class="blue">Generate Maze</span> and watch the algorithm's creativity.
</p>
</div>
<!-- -------- PIXEL SIZE -->
<div class="slide default-bg">
<h4>Select Pixel Size</h4>
<div class="img-box shadow">
<img src="assets/tutorial/pixel_tutorial.png" alt="">
</div>
<p>
It allow you to increase or decrease the cells in the grid<br>
helps you to get wider range in small devices, like <span class="blue">mobile phone</span>
</p>
</div>
<!-- -------- SPEED -->
<div class="slide default-bg">
<h4>Adjust the speed</h4>
<div class="img-box shadow">
<img src="assets/tutorial/speed_tutorial.png" alt="">
</div>
<p>
Adjust the <span class="blue">speed</span> of the searching to follow the algorithm's progress
closely.
</p>
</div>
<!-- -------- ALGORITHM -->
<div class="slide default-bg">
<h4>Select Algorithm</h4>
<div class="img-box shadow">
<img src="assets/tutorial/algorithm_tutorial.png" alt="">
</div>
<p>
Pick one... from various <span class="blue">pathfinding algorithms.</span> Each has its unique way
of finding the shortest path.
</p>
</div>
<!-- -------- FINISH -->
<div class="slide">
<h4>click on visualize btn</h4>
<div class="img-box"></div>
<p>
click the <span class="blue">visualize</span> btn and boom !<br>
enjoy the process
</p>
</div>
</div>
<div class="dots">
</div>
<div class="bottom">
<div class="left">
<div class="btn" id="skip">skip tutorial</div>
</div>
<div class="right">
<div id="prev" class="btn unactive">previous</div>
<div id="next" class="btn">next</div>
</div>
</div>
</div>
</div>
<div class="template">
<!-- ================ NAVIGATION BAR ============== -->
<header>
<nav>
<a id="logo" href="./index.html">pathfinding visualizer</a>
<button id="visualize" class="btn">Visualize</button>
<ul class="nav-menu">
<li>
<a id="clear-path" href="#">Clear path</a>
</li>
<li>
<a id="clear-board" href="#">Clear board</a>
</li>
<li>
<a id="generate-maze" href="#">Generate Maze</a>
</li>
<li id="pixel" class="drop-box">
<a class="drop-toggle" href="#">Pixel<span class="carret"></span></a>
<ul class="drop-menu">
<li><a href="#">14px</a></li>
<li><a href="#">16px</a></li>
<li><a href="#">18px</a></li>
<li><a href="#">20px</a></li>
<li><a href="#" class="active">22px</a></li>
<li><a href="#">24px</a></li>
<li><a href="#">26px</a></li>
</ul>
</li>
<li id="speed" class="drop-box">
<a class="drop-toggle" href="#">Speed<span class="carret"></span></a>
<ul class="drop-menu">
<li><a href="#">Slow</a></li>
<li><a href="#" class="active">Normal</a></li>
<li><a href="#">Fast</a></li>
</ul>
</li>
<li id="algo" class="drop-box">
<a class="drop-toggle" href="#">Algorithms <span class="carret"></span></a>
<ul class="drop-menu">
<li><a href="#" class="active">BFS</a></li>
<li><a href="#">Dijkstra's Algorithm</a></li>
<li><a href="#">Greedy Best-first Search</a></li>
<li><a href="#">A* Algorithm</a></li>
</ul>
</li>
</ul>
</nav>
<!-- ================ GUIDE BAR ============== -->
<ul class="guide">
<li>
<div class="symbol source"></div>
<div class="text">Start Node</div>
</li>
<li>
<div class="symbol target"></div>
<div class="text">Target Node</div>
</li>
<li>
<div class="symbol unvisited"></div>
<div class="text"> Unvisited node</div>
</li>
<li>
<div class="symbol visited"></div>
<div class="text">visited node</div>
</li>
<li>
<div class="symbol wall"></div>
<div class="text">wall node</div>
</li>
<li>
<div class="symbol path"></div>
<div class="text">Shortest-Path Node</div>
</li>
<div class="tutorial-toggle"></div>
</ul>
<div class="guide-toggle">
<img src="assets/icon/angle-double-down.svg" alt="">
</div>
</header>
<!-- ============ DYNAMIC BOARD ================ -->
<div id="board"><!-- magic --></div>
</div>
</body>
<script src="index.js"></script>
</html>