lasercool/index.html at master · avsteele/lasercool · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
	<meta charset="UTF-8">
	<head>
		<title>Light and Matter</title>
		<link rel="stylesheet" href="cool.css">
		<link rel="stylesheet" href="slider.css">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="./three.min.js"></script>
		<script src="./OrbitControls.js"></script>
		<script src="./Stats.js"></script>
		<!--<script src="./interface.js"></script>  -->
		<script src="./lib.js"></script>
		<script src="./Laser.js"></script>
		<script src="./Atom.js"></script>
		<script src="./Earth.js"></script>
		<script src="./SolarSail.js"></script>
		<script src="./StarField.js"></script>
		<script src="./cool_params.js"></script>
		<script src="./content.js"></script>
		<script src="./Controls.js"></script>
		<script src="./cool_main.js"></script>

	</head>

	<body>
		<section class="summary">
			<nav>
				<h1>Chapters</h1>
				<ol>
					<li class="chapter"><a href="#" id="navc1">Light</a></li>
					<li class="chapter"><a href="#" id="navc2">Atoms</a></li>
				</ol>
			</nav>
			<h1>Now</h1>
			<section id="slide-desc">
				<p>
					Description of action goes here.  If you are seeing
					this, an error may have occured or the page may still
					be loading.
				</p>
			</section>
			<!-- <section class="legend" style="vertical-align: bottom;">
				<h1>Legend</h1>
				<p id="legend-content">
					Legend of chapter visual objects
			</section> -->
		</section>
		<main class="oGLRender">
			<p> OpenGL contnent should display here momentarily.
				If you are seeing
				this There may have been an error </p>
		</main>
		<nav class="bottom">
			<ul id="controls">

			</ul>
		</nav>
		<script>
			$(document).ready(function(){
				init();
				animate();
			});
		</script>
		<!-- <section id="controls" class="hidden"> -->
		<section class="hidden">
			<li id=empty></li>
			<li id="navback">
				<a href="#">
					<!-- <p id="back">Back</p> -->
					<!-- <img id="back" src="assets/noise4.png" alt="back"> -->
					<img style="transform: rotate(90deg)" src="assets/arrow_down.svg" alt="back"/>
				</a>
			</li>
			<li id="navreset">
				<a href="#">
					<!-- <p id="reset">Reset</p> -->
					<!-- <img id="reset-frame" src="assets/noise4.png" alt="reset"> -->
					<img id="reset-frame" style="transform: rotate(180deg);" src="assets/arrow_down.svg" alt="reset"/>
				</a>
				<h4>Reset</h4>
			</li>
			<li id="navforward">
				<a href="#">
					<!-- <p id="forward">Forward</p> -->
					<!-- <img id="forward" src="assets/noise4.png" alt="forward"> -->
					<img id="forward" style="transform: rotate(-90deg)" src="assets/arrow_down.svg" alt="forward"/>
				</a>
			</li>
			<li id="sliderControl" class="slider">
				<img src="assets/dot_tb.png" alt="slider image" class="sliderimg">
				<input type="range" class="slider" min="-1" max="1" step="0.01">
				<h1>Name</h1>
			</li>
			<li id="buttonControl">
				<button class="off">Name</button>
			</li>
		</section>
	</body>
</html>