-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
179 lines (138 loc) · 7.54 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
<!DOCTYPE html>
<html>
<head>
<title>Path Finding Algorithm Visualizer</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/magic.min.css">
<script src="https://kit.fontawesome.com/d1f3dd87b7.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Here onwards work for the navBar will begin-->
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark" id="myNavbar">
<a class="navbar-brand" href="#" id="logo">Find Your Path!</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active dropdown" id="algorithms">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
arias-haspopup="true" aria-expanded="false">Algorithms</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a href="#" class="dropdown-item">Dijkstra's Algorithm</a>
<a href="#" class="dropdown-item">Breadth First Search</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
arias-haspopup="true" aria-expanded="false">Speed</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a href="#" class="dropdown-item">Fast</a>
<a href="#" class="dropdown-item">Medium</a>
<a href="#" class="dropdown-item">Slow</a>
</div>
</li>
</ul>
<button class="btn btn-success btn-space" type="submit" id="startBtn">Start</button>
<button type="button" class="btn btn-primary btn-space" type="submit" id="clearBtn">Clear Board</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong">Website Info Modal</button>
</div>
</nav>
<!--Here the NavBar work will end-->
<!--Here the legend and colour-description of the nodes visited will be shown -->
<div class="d-flex flex-row flex-wrap m-2 justify-content-around bg-light">
<div class="d-flex p-2">
<div class="key wall"></div>
<div> Wall</div>
</div>
<div class="d-flex p-2">
<div class="key start"></div>
<div>Start</div>
</div>
<div class="d-flex p-2">
<div class="key end"></div>
<div>Target</div>
</div>
<div class="d-flex p-2">
<div class="key searching"></div>
<div>Searching</div>
</div>
<div class="d-flex p-2">
<div class="key visited"></div>
<div>Visited</div>
</div>
<div class="d-flex p-2">
<div class="key success"></div>
<div>Shortest-Path</div>
</div>
<div class="d-flex p-2">
<div class="key"></div>
<div>Unvisited</div>
</div>
</div>
<div class="d-flex flex-row flex-wrap m-2 justify-content-around bg-warning">
<div class="d-flex p-2">
*The shortest path displayed is on the basis of the number of cell transitions.
</div>
</div>
<div class="d-flex flex-column align-items-center" id="bigTableContainer">
<div id="tableContainer"></div>
</div>
<!--Here the legend work will finish-->
<!-- This is for the grid table of size 40*40-->
<!--The CSS id used for this will (i) bigTableContainer and (ii) tableContainer-->
<div class="d-flex flex-column align-items-center" id="bigTableContainer">
<div id="tableContainer"></div>
</div>
<!--More content to come after this, but before complete the above!-->
<!--Adding a warning and Information flexbox-->
<div class="d-flex flex-column" id="results">
<!-- <div class="d-flex justify-content-center">
<i id="resultsIcon" class="fas fa-exclamation"></i>
</div> -->
<div id="duration" class="d-flex justify-content-center">
!
</div>
<div id="length" class="d-flex justify-content-center">
Please select an algorithm and press start.
</div>
</div>
</div>
<!--This is our Info Modal!!!-->
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" align="center">About this Project!!!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This is our Path Finding Algorithm Visualizer Project which we had completed while actively participating in the Microsoft's Mars Colonization Program.</p>
<p>Our main aim was to help build a shortest-path algorithm visualizer which could help the user find the shortest distance between any two points and the same concept can be very much useful when practically apllying the concept for building rovers and vehicles that could help humans traverse far destinations in less time using less energy with the help of some basic algorithms.</p>
<p>In this Project we have used two simple shortest-path finding algorithms:-
<li>Dijkstra's Algorithm</li>
<li>Breadth First Search Algorithm</li></p>
<p>You can select the desired Algorithm by clicking on the choosen algorithm from the Algorithms Tab and then select the desired speed of the animation to continue and have fun visualizing the process after clicking the Start Button.</p>
<p>At the end, if you wish to re-use the table you can simply click on the Clear Board button on the NavBar and it will remove all the walls and the animated cells.</p>
<p>At the bottom-right corner there is a flex-box which will give the information about time taken and the length of the Shortest Path Traversed in units by the chosen algorithm.</p>
<p>In the end, we would like to thank our mentors, friends and seniors who have helped us with some concepts of animation using JavaScript and styling it using CSS.</p>
<p>We intend to work more upon this and add new algorithms like A* and JumpPointSearch after studying them and having a good knowledge about them. We also have to work more upon the website front-end and will improve more on the styling part as well.</p>
<p>Well wishes to the user and Happy Browsing :)!!</p>
- Meghaj Singh and Pranay Mishra
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>