This repository has been archived by the owner on Oct 9, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (60 loc) · 3.18 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app" class="flex justify-around">
<div id="map-container" class="w-1/2 lg:w-1/3">
</div>
<div id="input-container" class="w-1/3">
<form class="p-10 space-y-5 text-left">
<h1 class="text-xl text-center">Problem parameters</h1>
<div>
<label for="problem-select" class="block text-sm font-medium text-gray-700">Problem type</label>
<select id="problem-select" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="alpine">Alpine</option>
<option value="alpine2">Alpine 2</option>
<option value="sphere">Sphere</option>
<option value="ackley">Ackley</option>
</select>
</div>
<div>
<label for="wolves-number" class="block text-sm font-medium text-gray-700">Number of wolves</label>
<input type="number" name="wolves-number" id="wolves-number" value="5" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
</div>
<div class="relative pt-1">
<label for="simulation-speed" class="form-label">Simulation speed</label>
<input type="range" class="w-full h-6 p-0" id="simulation-speed" min="1" max="60"/>
</div>
<div>
<button id="control-button-start" type="button" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Start</button>
<button id="control-button-pause" type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Pause</button>
</div>
<div class="mt-10">
<div>
<span class="font-bold">Maximum number of iterations : </span><span class="inline">500</span>
</div>
<div>
<span class="font-bold">a : </span><span class="inline" id="a-value"></span>
</div>
<div>
<span class="font-bold">Best solution : </span><span class="inline" id="best-solution-fitness"></span>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js" integrity="sha512-NxocnqsXP3zm0Xb42zqVMvjQIktKEpTIbCXXyhBPxqGZHqhcOXHs4pXI/GoZ8lE+2NJONRifuBpi9DxC58L0Lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module" src="/src/main.ts"></script>
</body>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</html>