-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorbits.html
40 lines (37 loc) · 2.67 KB
/
orbits.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
<html>
<head>
<title>oribits</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/orbits.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_orange-orange.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/orbits.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<canvas id="game"></canvas>
<div id="inputs">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label in">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="distance">
<label class="mdl-textfield__label" for="distance">Distance from sun (in AU)</label> <span class="mdl-textfield__error">Input is not a number!</span> </div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label in">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="direction">
<label class="mdl-textfield__label" for="direction">Direction from sun (in degrees)</label> <span class="mdl-textfield__error">Input is not a number!</span> </div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label in">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="speed">
<label class="mdl-textfield__label" for="speed">Speed (in 'earth speeds')</label> <span class="mdl-textfield__error">Input is not a number!</span> </div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label in">
<input class="mdl-textfield__input" type="text" id="color">
<label class="mdl-textfield__label" for="color">Color</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="addPlanet()"> Create </button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id=init onclick="init()"> Initialize </button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="stop()"> Pause </button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="reset()"> Reset </button>
</div>
<div id="settings">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="window.SHOW_PATHS = !window.SHOW_PATHS"> Toggle Paths </button>
</div>
<div id="info"></div>
</body>
</html>