-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (127 loc) · 7.85 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pathfinder Algorithm Visualizer</title>
<link rel="icon" href ="public/images/path.png" type = "image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="public/css/style.css">
<script src="public/js/scripts/helper.js" defer></script>
<script src="public/js/scripts/maze.js" defer></script>
<script src="public/js/algorithms/dijkstra.js" defer></script>
<script src="public/js/algorithms/aStar.js" defer></script>
<script src="public/js/algorithms/greedyBestFirstSearch.js" defer></script>
<script src="public/js/algorithms/swarm.js" defer></script>
<script src="public/js/algorithms/convergentSwarm.js" defer></script>
<script src="public/js/algorithms/biDirectionalSwarm.js" defer></script>
<script src="public/js/scripts/script.js" defer></script>
</head>
<body class="bg-dark">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Pathfinder Visualizer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="select_algorithm_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Algorithm
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="algorithm_list">
<!-- algorithm list -->
</div>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-outline-success" id="starting_point_btn">Set Starting Node</button>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-outline-success" id="end_point_btn">Set End Node</button>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-primary font-weight-bold" id="visualize_btn">Visualize</button>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-danger font-weight-bold" id="clear_btn">Clear</button>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-outline-success" id="wall_btn">Add / Remove Wall</button>
</li>
<li class="nav-item">
<button class="nav-link ml-2 btn btn-outline-success" id="weight_btn">Add / Remove Weight</button>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ml-2" href="#" id="maze_pattern_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Maze & Patterns
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="maze_list">
<!-- Mazes & Patterns List -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ml-2" href="#" id="select_speed_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select Speed
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" id="speed_list">
<!-- Speed List -->
</div>
</li>
</ul>
</div>
</nav>
<!-- Graph -->
<div class="graph m-3" id="graph">
<div class="graph-header" id="graph_header">
<div class="row m-0 p-2">
<div class="node-example text-white" id="starting_node_example"><i class="fa fa-chevron-right" aria-hidden="true"></i></div><div class="text-light ml-1">Starting Node</div>
<div class="ml-3 text-light">|</div>
<div class="node-example text-white ml-3" id="end_node_example"><i class="fa fa-bullseye" aria-hidden="true"></i></div><div class="text-light ml-2">End Node</div>
<div class="ml-3 text-light">|</div>
<div class="node-weight node-example ml-3" id="weight_node_example" title="Weight: 10"><i class="fas fa-weight-hanging"></i></div><div class="text-light ml-2" title="Weight: 10">Weight Node</div>
<div class="ml-3 text-light">|</div>
<div class="node node-active node-example ml-3" id="visited_node_example_1"></div>
<div class="node node-path node-example ml-1" id="visited_node_example_2"></div>
<div class="text-light ml-2">Visited Node</div>
<div class="ml-3 text-light">|</div>
<div class="node node-wall node-example ml-3" id="wall_node_example"></div><div class="text-light ml-2">Wall</div>
<div class="ml-3 text-light">|</div>
<div class="ml-3 text-light"> Algorithm: </div><div class="text-light ml-2" id="algorithm_message"></div>
<a class="ml-2 cursor-pointer text-light algorithm-info-btn" id="algorithm_info_btn"><i class="fas fa-info-circle"></i></a>
<div class="ml-3 text-light">|</div>
<div class="text-light ml-2" id="status_message"></div>
</div>
</div>
<div class="graph-body" id="graph_body">
<!-- Visualizer Graph -->
</div>
<div class="graph-footer row" id="graph_footer">
<div class="p-2 col-md-5">
<a class="ml-2 btn btn-outline-info" href="https://github.com/Mohammad1745/pathfinder_algorithm_visualizer/tree/master" target="_blank"><i class="fab fa-github"></i> GitHub</a>
</div>
<div class="col-md-7 mt-2">
<div class="text-info position-relative float-right">
<i class="fas fa-user"></i> Mohammad Ali
<i class="fas fa-envelope ml-2"></i> [email protected]
</div>
</div>
</div>
</div>
<!-- Algorithm Details Popup -->
<div class="card algorithm-info" id="algorithm_info">
<div class="card-header">
<span class="algorithm-info-header" id="algorithm_info_header"></span>
<span class="algorithm-info-cancel-btn cursor-pointer" id="algorithm_info_cancel_btn"><i class="fas fa-times-circle"></i></span>
</div>
<div class="card-body algorithm-info-body" id="algorithm_info_body"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>