SolarSim/index.html at master · ualberta-spacebar/SolarSim · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SolarSim</title>
    <link href="./favicon.ico" rel="icon" type="image/x-icon" />
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" defer></script>
	<script src="game.js" defer></script>
	<script src="canvas.js" defer></script>
	<!--<script src="https://cdn.socket.io/socket.io-1.4.5.js" defer></script>
	<script defer>
		var socket = io();

		var random = Math.random();

		var happy = function () {
			socket.emit('happy', {
				reason: 'its my birthday' + random
			});
		}

		socket.on('serverMsg', function (data) {
			console.log(data.msg);
		});
	</script>-->
</head>
<body>
    <canvas></canvas>

	<div class="overlay">
		<h2>☰</h2>
		<h3>CONTROL</h3>
		<div class="game_settings" id="game_objects">
			<button onclick="random_planet();toggling()">➕</button>
			<div class="object" id="sun">
				<label>▼</label>
				<ul id="characteristics">
					<li class="para" id="mass">
						Mass (×10<sup>28</sup> kg) <input type="number" min="0">
					</li>
					<li class="para" id="temp">
						Temperature (K) <input type="number" min="2500" max="40000" step="25">
					</li>
				</ul>
				<input type="text" id="labelName" maxlength="14" value="Sun">
			</div>
		</div>
		<div class="game_settings" id="game_parameters">
			<button id="pause_button" onclick="pause()">⏸</button>
			<label>
				<p>Stars</p>
				<input type="checkbox" checked="true" onchange=on_click_stars(this.checked)>
			</label>
			<label>
				<p>Trails</p>
				<input type="checkbox" checked="true" onchange=on_click_trails(this.checked)>
			</label>
			<label>
				<p>Grid</p>
				<input type="checkbox" checked="true" onchange=on_click_grid(this.checked)>
            </label>
            <label>
				<p>Habitable Zone</p>
				<input type="checkbox" checked="true" onchange=on_click_habitable(this.checked)>
			</label>
			<label class="sliders">
				<p>Time Scale</p>
				<input id="time" type="range" min="10000" max="1000000" step="1" oninput=on_time_change(this.value) onchange=on_time_change(this.value)>
			</label>
			<label class="sliders">
				<p>Zoom Factor</p>
				<input id="zoom" type="range" min="0.1" max="99" step="any" oninput=on_zoom_change(this.value) onchange=on_zoom_change(this.value)>
			</label>
		</div>
	</div>
	<div class="github">
		<a href="https://github.com/ualberta-spacebar/SolarSim/" target="blank">
			+ GitHub
		</a>
	</div>

</body>
</html>