<link rel="stylesheet" href="./css/index.css">

<div id="content">

</div>

<div id='controls'>

<div>Directions</div>

<p>The object is to get planets to orbit the Sun</p>

<p> Click and drag in space to create a planet (drag to make it larger)</p>

<p> Click and drag to set a velocity (speed and direction) </p>

<p> Release the mouse button to launch the planet</p>

<p> Launch as many planets as you like.</p>

<div class='buttons'>

<div class='row'>

<button id='random-btn'>Random Planets</button>

</div>

<div class='row'>

<span>Show Trails</span><input id='show-trails-input' type='checkbox' checked='false' />

<button id='clear-trails-btn'>Clear Trails</button>

</div>

<div class='row'>

<span>Sun Mass</span>

<div id='sun-mass-slider'></div>

<span>Fixed Sun</span>

<input id='fixed-sun-input' type='checkbox' checked='false' />

</div>

<div class='row'>

<span>Gravitational Constant</span>

<div id='g-constant-input'></div>

</div>

<div class='row'>

<span>Scale</span>

<div id='scale-input'></div>

<div>

<button id='auto-scale-btn'>Auto Scale</button>

</div>

</div>

<div class='row'>

<span>Time Scale</span>

<div id='time-scale-input'></div>

</div>

</div>

<pre id='data'></pre>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script src="./js/orbits.js"></script>