Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5c978e6

Browse files
update: index.html
1 parent 9cedf20 commit 5c978e6

File tree

1 file changed

+122
-80
lines changed

1 file changed

+122
-80
lines changed

‎index.html‎

Lines changed: 122 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,130 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>AI Search Algorithms</title>
6-
7-
<style>
8-
body, html, #app_div {
9-
margin: 0;
10-
padding: 0;
11-
width: 100%;
12-
height: 100%;
13-
background-color: black;
14-
}
15-
16-
#canvas_div {
17-
height: 90%;
18-
}
19-
20-
#options_div {
21-
height: 10%;
22-
display: flex;
23-
align-items: center;
24-
justify-content: center;
25-
}
26-
27-
#options_div * {
28-
font-size: 1em;
29-
border: 1px;
30-
}
31-
32-
#options_div label{
33-
color: aquamarine;
34-
font-size: 1.3em;
35-
}
36-
37-
span {
38-
margin: 3em;
39-
}
40-
</style>
41-
</head>
42-
43-
<body>
44-
<div id="app_div">
45-
46-
<div id="canvas_div">
47-
<canvas id="canvas"></canvas>
48-
</div>
49-
50-
<div id="options_div">
51-
52-
<label for="maze_alg_selection">Maze Creation Algorithm:</label>
53-
<select name="maze_alg_selection" id="maze_alg_selection">
54-
<option value="Iterative Depth First Search">Iterative Depth First Search</option>
55-
<option value="Randomized Kruskal">Randomized Kruskal</option>
56-
<option value="Recursive Division">Recursive Division</option>
57-
</select>
58-
<button onclick="maze_button_click()">Generate Maze</button>
59-
60-
<span></span>
61-
62-
<label for="search_alg_selection">Maze Pathfinding Algorithm:</label>
63-
<select name="search_alg_selection" id="search_alg_selection">
64-
<option value="Depth First Search">Depth First Search</option>
65-
<option value="Breadth First Search">Breadth First Search</option>
66-
<option value="A* Search">A* Search</option>
67-
</select>
68-
<button onclick="search_button_click()" disabled>Find Path</button>
69-
70-
</div>
713

4+
<head>
5+
<meta charset="utf-8">
6+
<title>AI Search Algorithms</title>
7+
8+
<style>
9+
body,
10+
html,
11+
#app_div {
12+
margin: 0;
13+
padding: 0;
14+
width: 100%;
15+
height: 100%;
16+
background-color: black;
17+
}
18+
19+
#canvas_div {
20+
height: 90%;
21+
}
22+
23+
#options_div {
24+
height: 10%;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
gap: 1em;
29+
/* Add space between elements */
30+
}
31+
32+
#options_div label {
33+
color: aquamarine;
34+
font-size: 1.3em;
35+
margin-right: 0.5em;
36+
/* Space between label and select */
37+
}
38+
39+
#options_div select,
40+
#options_div button {
41+
font-size: 1em;
42+
padding: 0.5em 1em;
43+
border: 1px solid aquamarine;
44+
border-radius: 20px;
45+
/* Rounded corners */
46+
background-color: #333;
47+
color: aquamarine;
48+
outline: none;
49+
margin-right: 1em;
50+
/* Space between select/button pairs */
51+
-webkit-appearance: none;
52+
/* Remove default styling for select on webkit browsers */
53+
-moz-appearance: none;
54+
/* Remove default styling for select on Firefox */
55+
appearance: none;
56+
/* Remove default styling for select on modern browsers */
57+
}
58+
59+
#options_div button {
60+
cursor: pointer;
61+
transition: background-color 0.3s ease;
62+
}
63+
64+
#options_div button:hover {
65+
background-color: aquamarine;
66+
color: #333;
67+
}
68+
69+
span {
70+
margin: 3em;
71+
}
72+
73+
/* Additional styles to make select box look more like the button */
74+
#options_div select {
75+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="aquamarine" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
76+
background-repeat: no-repeat;
77+
background-position: right 0.75em center;
78+
background-size: 0.65em auto;
79+
padding-right: 2em;
80+
}
81+
</style>
82+
</head>
83+
84+
<body>
85+
<div id="app_div">
86+
87+
<div id="canvas_div">
88+
<canvas id="canvas"></canvas>
7289
</div>
7390

74-
<script type="text/javascript" src="utility_calsses/PointClass.js"></script>
75-
<script type="text/javascript" src="utility_calsses/TileClass.js"></script>
76-
<script type="text/javascript" src="utility_calsses/TileGridClass.js"></script>
77-
78-
<script type="text/javascript" src="generation_algorithms/IterativeDepthFirstSearch.js"></script>
79-
<script type="text/javascript" src="generation_algorithms/RandomizedKruskal.js"></script>
80-
<script type="text/javascript" src="generation_algorithms/RecursiveDivision.js"></script>
91+
<div id="options_div">
8192

82-
<script type="text/javascript" src="search_algorithms/BreadthFirstSearch.js"></script>
83-
<script type="text/javascript" src="search_algorithms/DeapthFirstSearch.js"></script>
84-
<script type="text/javascript" src="search_algorithms/AStarSearch.js"></script>
93+
<label for="maze_alg_selection">Maze Creation Algorithm:</label>
94+
<select name="maze_alg_selection" id="maze_alg_selection">
95+
<option value="Iterative Depth First Search">Iterative Depth First Search</option>
96+
<option value="Randomized Kruskal">Randomized Kruskal</option>
97+
<option value="Recursive Division">Recursive Division</option>
98+
</select>
99+
<button onclick="maze_button_click()">Generate Maze</button>
100+
101+
<span></span>
102+
103+
<label for="search_alg_selection">Maze Pathfinding Algorithm:</label>
104+
<select name="search_alg_selection" id="search_alg_selection">
105+
<option value="Depth First Search">Depth First Search</option>
106+
<option value="Breadth First Search">Breadth First Search</option>
107+
<option value="A* Search">A* Search</option>
108+
</select>
109+
<button onclick="search_button_click()" disabled>Find Path</button>
110+
111+
</div>
112+
113+
</div>
114+
115+
<script type="text/javascript" src="utility_calsses/PointClass.js"></script>
116+
<script type="text/javascript" src="utility_calsses/TileClass.js"></script>
117+
<script type="text/javascript" src="utility_calsses/TileGridClass.js"></script>
118+
119+
<script type="text/javascript" src="generation_algorithms/IterativeDepthFirstSearch.js"></script>
120+
<script type="text/javascript" src="generation_algorithms/RandomizedKruskal.js"></script>
121+
<script type="text/javascript" src="generation_algorithms/RecursiveDivision.js"></script>
122+
123+
<script type="text/javascript" src="search_algorithms/BreadthFirstSearch.js"></script>
124+
<script type="text/javascript" src="search_algorithms/DeapthFirstSearch.js"></script>
125+
<script type="text/javascript" src="search_algorithms/AStarSearch.js"></script>
126+
127+
<script type="text/javascript" src="Main.js"></script>
128+
</body>
85129

86-
<script type="text/javascript" src="Main.js"></script>
87-
</body>
88130
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /