GraphNav-Pathfinding-Visualizer/index.html at main · deepakvishwakarma24/GraphNav-Pathfinding-Visualizer · 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
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index, follow" />

    <!-- Primary SEO -->
    <title>GraphNav – Pathfinding Visualizer</title>
    <meta
      name="description"
      content="GraphNav is an interactive pathfinding visualizer to understand BFS, DFS, Dijkstra, A*, and Bi-Directional BFS with real-time animations on a 2D grid."
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="GraphNav – Pathfinding Visualizer" />
    <meta
      property="og:description"
      content="Visualize and compare popular pathfinding algorithms like BFS, DFS, Dijkstra, and A* through real-time animations."
    />
    <meta
      property="og:url"
      content="https://graphnav-pathfinder-visualizer.vercel.app/"
    />
    <meta
      property="og:image"
      content="https://graphnav-pathfinder-visualizer.vercel.app/assets/og.png"
    />
    <meta property="og:site_name" content="GraphNav" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="GraphNav – Pathfinding Visualizer" />
    <meta
      name="twitter:description"
      content="Interactive pathfinding visualizer built to understand BFS, DFS, Dijkstra, and A* algorithms."
    />
    <meta
      name="twitter:image"
      content="https://graphnav-pathfinder-visualizer.vercel.app/assets/og.png"
    />
    <meta
      name="twitter:url"
      content="https://graphnav-pathfinder-visualizer.vercel.app/"
    />

    <!-- Styles -->
    <link rel="stylesheet" href="./CSS/main.css" />
    <link rel="stylesheet" href="./CSS/utility.css" />
  </head>

  <body class="light">
    <div class="tutorial" id="tutorial">
      <div class="card">
        <div class="upper">
          <!-- -------- WHAT -->
          <div class="slide">
            <h2>what is path finder visualizer</h2>
            <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">
            <h2>How does it work</h2>
            <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-indicator.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.webp" 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.webp" 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.webp" 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">
      <header>
        <nav>
          <h1>
            <a id="logo" href="./index.html">pathfinding visualizer</a>
          </h1>

          <button id="visualize" class="btn">Visualize</button>

          <ul class="nav-menu">
            <li id="clear-path">Clear path</li>
            <li id="clear-board">Clear board</li>
            <li id="generate-maze">Generate Maze</li>

            <li id="pixel" class="drop-box">
              <div class="dropdown-trigger">
                Pixel
                <span class="carret"></span>
              </div>
              <ul class="drop-menu">
                <li>14px</li>
                <li>16px</li>
                <li>18px</li>
                <li>20px</li>
                <li class="active">22px</li>
                <li>24px</li>
                <li>26px</li>
              </ul>
            </li>

            <li id="speed" class="drop-box">
              <div class="dropdown-trigger">
                Speed
                <span class="carret"></span>
              </div>

              <ul class="drop-menu">
                <li>Slow</li>
                <li class="active">Normal</li>
                <li>Fast</li>
              </ul>
            </li>

            <li id="algo" class="drop-box">
              <div class="dropdown-trigger">
                Algorithms
                <span class="carret"></span>
              </div>
              <ul class="drop-menu">
                <li class="active">BFS</li>
                <li>Bi-Directional BFS</li>
                <li>DFS</li>
                <li>Dijkstra's Algorithm</li>
                <li>Greedy Best-first Search</li>
                <li>A* Algorithm</li>
              </ul>
            </li>
          </ul>
        </nav>

        <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"
            aria-label="Open tutorial"
            role="button"
            tabindex="0"
          ></div>
        </ul>

        <div class="guide-toggle">
          <img src="assets/icon/angle-double-down.svg" alt="" />
        </div>
      </header>

      <div id="board"></div>
    </div>

    <!-- JS -->
    <script src="app.js"></script>
  </body>
</html>