Skip to content

Commit 684679e

Browse files
Linux0HatLinux0Hat
committed
Enhance page
1 parent 11c30e2 commit 684679e

1 file changed

Lines changed: 63 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 63 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,73 @@
22
<html>
33
<head>
44
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
5-
<link href=https://tomhodgins.github.io/preset/preset.css rel=stylesheet>
5+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
6+
<style>
7+
#canvas-container {
8+
width: 100%;
9+
display: flex;
10+
justify-content: center;
11+
}
12+
canvas {
13+
outline: 5px solid black;
14+
}
15+
</style>
616
</head>
7-
<body>
8-
<canvas id="canvas" height="800" width="800" style="outline: 5px solid black"></canvas>
9-
<div style="width: 750px;">
10-
<fieldset>
11-
<legend>World</legend>
12-
<button id="restart_button">Restart</button><br>
13-
<span>Select a preset :
14-
<select id="world_preset">
15-
<option value="collision">Collision</option>
16-
<option value="universal">Universal gravitation</option>
17-
</select>
18-
</span>
19-
<div>
20-
<input type="checkbox" id="pause" />
21-
<label for="pause">Pause</label>
22-
</div>
23-
</fieldset>
24-
<fieldset>
25-
<legend>View settings</legend>
17+
<body class="container my-4">
18+
<div class="d-flex align-items-start">
19+
<!-- Canvas on the left -->
20+
<div id="canvas-container" class="me-4">
21+
<canvas id="canvas" height="800" width="800"></canvas>
22+
</div>
2623

27-
<div>
28-
<input type="checkbox" id="follow" />
29-
<label for="follow">Follow</label>
24+
<!-- Controls on the right -->
25+
<div>
26+
<!-- World settings card -->
27+
<div class="card mb-4" style="width: 18rem;">
28+
<div class="card-body">
29+
<h5 class="card-title">World</h5>
30+
<hr>
31+
<button id="restart_button" class="btn btn-primary mb-3">Restart</button>
32+
<div class="mb-3">
33+
<label for="world_preset" class="form-label">Select a preset:</label>
34+
<select id="world_preset" class="form-select">
35+
<option value="collision">Collision</option>
36+
<option value="universal">Universal gravitation</option>
37+
</select>
38+
</div>
39+
<div class="form-check">
40+
<input type="checkbox" id="pause" class="form-check-input"/>
41+
<label for="pause" class="form-check-label">Pause</label>
42+
</div>
43+
</div>
3044
</div>
31-
32-
<fieldset>
33-
<legend><input type="checkbox" id="vectors"/>
34-
<label for="vectors">Vectors</label></legend>
35-
36-
<div>
37-
<input type="checkbox" id="vectors_values"/>
38-
<label for="vectors_values">Display values</label>
45+
46+
<!-- View settings card -->
47+
<div class="card" style="width: 18rem;">
48+
<div class="card-body">
49+
<h5 class="card-title">View settings</h5>
50+
<hr>
51+
<div class="form-check mb-3">
52+
<input type="checkbox" id="follow" class="form-check-input"/>
53+
<label for="follow" class="form-check-label">Follow</label>
54+
</div>
55+
<div class="card">
56+
<div class="card-body">
57+
<h5 class="card-title">
58+
<input type="checkbox" id="vectors" class="form-check-input"/>
59+
<label for="vectors" class="form-check-label">Vectors</label>
60+
</h5>
61+
<hr>
62+
<div class="form-check mb-3">
63+
<input type="checkbox" id="vectors_values" class="form-check-input"/>
64+
<label for="vectors_values" class="form-check-label">Display values</label>
65+
</div>
66+
</div>
67+
</div>
3968
</div>
40-
</fieldset>
41-
</fieldset>
69+
</div>
70+
</div>
4271
</div>
72+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
4373
</body>
4474
</html>

0 commit comments

Comments
 (0)