planet_playground/index.html at master · AlphaRLee/planet_playground · GitHub

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
<html>
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

		<link rel="stylesheet" type="text/css" href="style.css">

		<script src="script/config.js"></script>
		<script src="script/layouts.js"></script>
		<script src="script/planet.js"></script>
		<script src="script/sketch.js"></script>
		<script src="script/selector.js"></script>
	</head>
	<body>
		<div class="fixed-top p-2" style="background-color: #222">
			<h1 class="text-light">
				Planet Playground
			</h1>
			<p class="m-1 text-light">Click and drag to launch planets. Press <b>R</b> to reset.</p>
			<p class="m-1">
				<a href="https://github.com/AlphaRLee" class="text-muted">
					A project by Richard Lee
				</a>
			</p>
		</div>
		<div class="container-fluid m-0 p-0">
			<div id="canvas-parent" class="row m-0 p-0"></div>
		</div>
		<div class="fixed-bottom p-md-3 p-sm-1" style="background-color: #222;">
			<div class="container-fluid m-0 ">
				<div class="row">
					<div class="col-3">
						<button type="button" class="btn btn-outline-light mx-md-2 mx-sm-1" onclick="reset()">Reset</button>
						<div class="btn-group dropup ml-md-2 ml-sm-1 mr-md-4 mr-md-4">
							<button id="layout-selector-btn" type="button" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

							</button>
							<div id="layout-selector" class="dropdown-menu">
							</div>
							<template id="layout-options-template">
								<a class="dropdown-item" href="#"></a>
							</template>
						</div>
					</div>
					<div class="col-2">
						<div class="slidecontainer">
							<label for="planet-mass-control" class="text-light">Planet Mass</label>
							<input id="planet-mass-control" type="range" class="slider" min="500" max="40000" value="2000" oninput="setNewPlanetMass(this.value)">
						</div>
					</div>
					<div class="col-2">
						<div class="form-check">
							<input class="form-check-input" type="checkbox" value="" id="planet-fixed-control" onclick="setNewPlanetMobile(!this.checked)">
							<label class="form-check-label text-light" for="planet-fixed-control">
								Fixed
							</label>
						  </div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>