index.html

<!DOCTYPE html>
<html>

<head>
	<title>
		AI Search
	</title>

	<link rel="icon" href="favicon.jpg">

	<meta charset="utf-8">

	<!-- Brython 3.9 JS -->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython.min.js"></script>
	<!-- Bootstrap 5 JS Bundle with Popper -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
		crossorigin="anonymous"></script>
	<!-- Bootstrap 5 CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
		integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

	<script type="text/python" src="main.py"></script>

	<link rel="stylesheet" href="styles.css">

</head>

<body id="body" onload="brython()">

	<div class="header-height">
		<div class="row position-relative">

			<div class="col-1 py-4 px-5 position-absolute">
				<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Help">
					<button type="button" class="shadow btn btn-primary btn-sm btn-circle" data-bs-toggle="modal"
						data-bs-target="#help-modal">
						<i class="fa fa-question"></i>
					</button>
				</span>
			</div>

			<!-- Help Modal -->
			<div class="modal fade" id="help-modal" tabindex="-1" aria-labelledby="help-modal-label" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="help-modal-label">Help</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
							</br>
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
							This is to be written in the near future.</br>
						</div>
					</div>
				</div>
			</div>
			<!---------------->


			<!-- Weights Dialog -->
			<dialog id="weights-modal">
				<form id="weights-form">
					<div class="row justify-content-center align-items-center">
						<div class="col-auto">
							Enter a weight:
						</div>
						<div class="col-auto">
							<input id="weights-input" type="number" class="form-control" placeholder="1" min="1"
								required>
						</div>
						<div class="col-auto">
							<button id="weights-update" type="button" class="btn btn-primary">Update</button>
						</div>
						<div class="col-auto">
							<button id="weights-close" type="button" class="btn btn-danger">Close</button>
						</div>
					</div>
				</form>
			</dialog>
			<!---------------->


			<div id="tools"
				class="col-8 py-4 btn-group btn-group-sm position-relative top-50 start-50 translate-middle-x"
				role="group" aria-label="tools">
				<input type="radio" class="btn-check" name="btnradio" id="add_node" autocomplete="off" checked>
				<label class="btn btn-outline-primary" for="add_node"><i class="fa fa-square"></i> Add node</label>

				<input type="radio" class="btn-check" name="btnradio" id="add_edge" autocomplete="off">
				<label class="btn btn-outline-primary" for="add_edge"><i class="fa fa-square"></i> Add edge</label>

				<input type="radio" class="btn-check" name="btnradio" id="delete_node" autocomplete="off">
				<label class="btn btn-outline-danger" for="delete_node"><i class="fa fa-minus-square"></i> Delete
					node</label>

				<input type="radio" class="btn-check" name="btnradio" id="delete_edge" autocomplete="off">
				<label class="btn btn-outline-danger" for="delete_edge"><i class="fa fa-minus-square"></i> Delete
					edge</label>

				<input type="radio" class="btn-check" name="btnradio" id="toggle_goal" autocomplete="off">
				<label class="btn btn-outline-success" for="toggle_goal">Goal</label>

				<input type="radio" class="btn-check" name="btnradio" id="update_heuristic" autocomplete="off">
				<label class="btn btn-outline-secondary" for="update_heuristic">Set Heuristic</label>

				<input type="radio" class="btn-check" name="btnradio" id="update_weight" autocomplete="off">
				<label class="btn btn-outline-secondary" for="update_weight">Set Weight</label>
			</div>

		</div>
	</div>

	<canvas id="canvas"></canvas>

	<div class="bottom-options-height">

		<div id="graph_type" class="col-2 btn-group btn-group-sm position-relative start-50 translate-middle-x"
			role="group" aria-label="graph_type">
			<input type="radio" class="btn-check" name="graph-type" id="undirected_graph" autocomplete="off" checked>
			<label class="btn btn-outline-primary" for="undirected_graph">Undirected</label>

			<input type="radio" class="btn-check" name="graph-type" id="directed_graph" autocomplete="off">
			<label class="btn btn-outline-primary" for="directed_graph">Directed</label>
		</div>

		<p class="col-8 my-1 fs-7 position-relative start-50 translate-middle-x">
			Uninformed Search
		</p>
		<div id="uninformed search" class="col-8 btn-group btn-group-sm position-relative start-50 translate-middle-x"
			role="group" aria-label="uninformed search">
			<input type="radio" class="btn-check" name="search" id="breadth-first" autocomplete="off" checked>
			<label class="btn btn-outline-primary" for="breadth-first">Breadth First</label>

			<input type="radio" class="btn-check" name="search" id="depth-first" autocomplete="off">
			<label class="btn btn-outline-primary" for="depth-first">Depth First</label>

			<input type="radio" class="btn-check" name="search" id="depth-limit" autocomplete="off">
			<label class="btn btn-outline-primary" for="depth-limit">Depth Limit</label>

			<input type="radio" class="btn-check" name="search" id="iterative-deepening" autocomplete="off">
			<label class="btn btn-outline-primary" for="iterative-deepening">Iterative Deepening</label>

			<input type="radio" class="btn-check" name="search" id="uniform-cost" autocomplete="off">
			<label class="btn btn-outline-primary" for="uniform-cost">Uniform Cost</label>
		</div>

		<div class="py-2"></div>

		<p class="col-8 my-1 fs-7 position-relative start-50 translate-middle-x">
			Informed Search
		</p>

		<div id="Informed search" class="col-8 btn-group btn-group-sm position-relative start-50 translate-middle-x"
			role="group" aria-label="informed search">
			<input type="radio" class="btn-check" name="search" id="greedy" autocomplete="off">
			<label class="btn btn-outline-primary" for="greedy">Greedy</label>

			<input type="radio" class="btn-check" name="search" id="a*" autocomplete="off">
			<label class="btn btn-outline-primary" for="a*">A*</label>
		</div>
	</div>

	<div class="container solve-btn-height">
		<div class="row justify-content-center">
			<button id="solve" type="button" class="col-5 btn btn-dark btn-sm">Solve</button>
		</div>
	</div>

</body>

</html>