-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
144 lines (138 loc) · 7.48 KB
/
Copy pathindex.html
File metadata and controls
144 lines (138 loc) · 7.48 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pathfinding Visualizer</title>
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./media/logo-2.png" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Pathfinding Visualizer">
<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 src="./src/index.js" defer type="module"></script>
<link rel="manifest" href="./manifest.json">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark text-light bg-dark nav-custom ">
<img src="./media/logo-2.svg" alt="logo" style="width:50px ; padding: 0 0.1rem;">
<p class="navbar-brand text-light custom-title" >Pathfinding Visualizer</p>
<button class="btn btn-primary" style="margin-left: 1rem; width:5rem ; box-shadow: 0px 0px 10px #007bff;" type="button" id="start_btn">
start
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
algorithm
</a>
<div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
<button class="dropdown-item bg-dark text-light btn" id="algo_dijkestra">Dijkestra</button>
<button class="dropdown-item bg-dark text-light btn" id="algo_dijkestra_heap_based">Dijkestra_heap_based</button>
<button class="dropdown-item bg-dark text-light btn" id="algo_A_start">A*</button>
<button class="dropdown-item bg-dark text-light btn" id="algo_greedy">Greedy</button>
<div class="dropdown-divider"></div>
<div style=" padding: 0 1.4rem ;" class="text-light">speed</div>
<input type="range" class="form-range dropdown-item" min="0" max="15" value="0" id="algorithm_speed">
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Maze algorithm
</a>
<div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
<button class="dropdown-item bg-dark text-light btn" id = "maze_recursive_backtracking">recursive back-tracking</button>
<button class="dropdown-item bg-dark text-light btn" id = "maze_basic_random">basic random</button>
<button class="dropdown-item bg-dark text-light btn" id = "maze_randomized_kruskal">randomized kruskal</button>
<div class="dropdown-divider"></div>
<div style=" padding: 0 1.4rem ;" class="text-light">speed</div>
<input type="range" class="form-range dropdown-item" min="0" max="15" id="maze_algorithm_speed">
</div>
</li>
<li class="btn-group btn-group-toggle" style="margin: 0rem auto;" data-toggle="buttons">
<!-- <label class="btn btn-secondary active" id="create_maze">
<input type="radio" name="options" id="option1" autocomplete="off" checked> create Maze
</label> -->
<label class="btn btn-secondary active" id="clear_maze">
<input type="radio" name="options" id="option1" autocomplete="off" checked> clear board
</label>
<label class="btn btn-secondary active" id="clear_path">
<input type="radio" name="options" id="option1" autocomplete="off" checked> clear path
</label>
<label class="btn btn-secondary active" id="clear_walls">
<input type="radio" name="options" id="option1" autocomplete="off" checked> clear walls
</label>
<!-- <label class="btn btn-secondary active" id="create_maze">
<input type="radio" name="options" id="option1" autocomplete="off" checked> clear path
</label> -->
</li>
<li class="nav-item dropdown">
<div class="nav-item text-light" style="display: none;">
detail mode
<label class="switch ">
<input id='detail-mode' type="checkbox" >
<span class="slider round"></span>
</label>
</div>
</li>
</ul>
</div>
</nav>
<div class="legend">
<div class="legend__item">
<div class="legend__item__content">start</div>
<div class="legend__item__symbol"><img src="./media/arrow .png" alt="arrow"></div>
</div>
<div class="legend__item">
<div class="legend__item__content">target</div>
<div class="legend__item__symbol"><img src="./media/destination.png" alt="destination"></div>
</div>
<div class="legend__item">
<div class="legend__item__content">unvisited</div>
<div class="legend__item__symbol"><div class="legend__item__symbol__colorItem"></div></div>
</div>
<div class="legend__item">
<div class="legend__item__content">visited</div>
<div class="legend__item__symbol"><div class="legend__item__symbol__colorItem visited"></div></div>
</div>
<div class="legend__item">
<div class="legend__item__content">shortest path</div>
<div class="legend__item__symbol"><div class="legend__item__symbol__colorItem path"></div></div>
</div>
<div class="legend__item">
<div class="legend__item__content">wall</div>
<div class="legend__item__symbol"><div class="legend__item__symbol__colorItem wall_leg"></div></div>
</div>
<div class="legend__item">
<div class="legend__item__content">weight</div>
<div class="legend__item__symbol"><img style="padding: 0.2rem;" src="./media/weight.svg" alt=""></div>
</div>
</div>
<div class="board"></div>
<div class="guide">
<h2 class="giude__header">Guide</h2>
<p class="guide__item">hold <span class="guide__item__key">w</span> to draw wall </p>
<p class="guide__item">hold <span class="guide__item__key">E</span> to erease </p>
<p class="guide__item">hold <span class="guide__item__key">X</span> to draw weight </p>
<img src="./media/close.png" id="guide_close" class="guide__item__icon" alt="close">
<img src="./media/burger.png" id="guide_open" class="guide__item__icon hide" alt="burger">
</div>
</body>
</html>