55 lines
2.6 KiB
HTML
55 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>A* Visualisation Algorithm</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
|
|
</head>
|
|
<body>
|
|
<h1>Hello World!</h1>
|
|
<div class="container py-4">
|
|
<div class="mb-3">
|
|
<label for="widthInput" class="form-label">Width</label>
|
|
<input oninput="onWidthInputChanged(this.value)" type="number" class="form-control" id="widthInput" placeholder="Define a width of field">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="heightInput" class="form-label">Height</label>
|
|
<input oninput="onHeightInputChanged(this.value)" type="number" class="form-control" id="heightInput" placeholder="Define a height of field">
|
|
</div>
|
|
<button onclick="regenerateField()" type="button" class="btn btn-danger">Regenerate</button>
|
|
|
|
<div class="pt-4">
|
|
<div>
|
|
Selected mode: <span id="mode">Free Field</span>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" onclick="changeMode(0)">Free Space</button>
|
|
<button type="button" class="btn btn-dark" onclick="changeMode(1)">Obstacle</button>
|
|
<button type="button" class="btn btn-warning" onclick="changeMode(2)">Start Point</button>
|
|
<button type="button" class="btn btn-success" onclick="changeMode(3)">End Point</button>
|
|
</div>
|
|
</div>
|
|
<div id="field" class="container text-center">
|
|
<div id="row-0" class="row g-2 g-lg-3">
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
</div>
|
|
<div id="row-1" class="row g-2 g-lg-3">
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
</div>
|
|
<div id="row-2" class="row g-2 g-lg-3">
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
</div>
|
|
<div id="row-3" class="row g-2 g-lg-3">
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
<div class="col p-3 border border-1 border-dark">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/main.js">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|