CubeBit/a-star-visualize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Denys Seredenko
2025-06-03 13:11:19 +02:00
commit e65150f518
2 changed files with 155 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
index.html Normal file
View File

@@ -0,0 +1,54 @@
<!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>