This repository has been archived by the owner on Jun 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
detecting_exoplanets.html
207 lines (189 loc) · 10 KB
/
detecting_exoplanets.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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<!-- Font Awesome Free for Commercial Use -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<!--noUiSlider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.css">
<!-- My CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/detections.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.js"></script>
<title>Detecting Exoplanets</title>
<!-- Custom Javascript Files -->
<script src='scripts/initialize.js'></script>
<script src='scripts/detecting_exoplanets.js' defer></script>
</head>
<body>
<!-- Navbar begins -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#"><img src="assets/logo-white.png" class="navbarLogo"></a>
<button id='menuButton' class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://projectpanoptes.org/">About Project PANOPTES</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
All Demos and Simulations
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="exoplanets.html">Introduction to Exoplanets</a>
<a class="dropdown-item active" href="detecting_exoplanets.html">Detecting Exoplanets</a>
<a class="dropdown-item" href="test_understanding.html">Test your Understanding</a>
</div>
</ul>
</div>
</nav>
<!-- Navbar ends -->
<!-- Implementing the animation in html5 canvas for greater control -->
<div id="wrapper">
<div id="animationContainer" class="mx-auto">
<canvas height="400px" width="400px" id="mainCanvas"></canvas>
<canvas height="400px" width="400px" id="chartCanvas"></canvas>
<div id="subtitlesContainer">
<p id="subtitles"></p>
</div>
<div id="animationControls" class="btn-group dropup">
<!-- Animation controls go here -->
<button type="button" class="btn btn-primary col-s-2" id="playButton" onclick="play();"><i class="fa fa-play"></i>
</button>
<button type="button" class="btn btn-primary col-xs-2" id="fullScreenButton" onclick="customRequestFullScreen();">Full
Screen</button>
<button class="btn btn-primary dropdown-toggle" type="button" id="modeDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Mode
</button>
<div class="dropdown-menu" aria-labelledby="modeDropdown">
<button class="dropdown-item" id="sandboxButton" type="button">Sandbox Mode</button>
<button class="dropdown-item" id="kioskButton" type="button">Kiosk Mode</button>
<button class="dropdown-item active" id="animationButton" type="button">Animation Mode</button>
</div>
</div>
<div class="container-fluid">
<div id="parameterControls" class="row hidden">
<div class="col-sm-3">
<br />
<div class="slider-label">Star Radius</div>
<div id="starSlider" class="parameter-slider" type="text"></div>
<span class="slider-value-label float-left" id="star-radius-label"> 80</span>
</div>
<div class="col-sm-3">
<br />
<div class="slider-label">Planet Relative Radius</div>
<div id="planetSlider" class="parameter-slider" type="text"></div>
<span class="slider-value-label float-left" id="planet-relative-radius-label"> 60</span>
</div>
<div class="col-sm-3">
<br />
<div class="slider-label">Orbital Distance</div>
<div id="orbitalSlider" class="parameter-slider" type="text"></div>
<span class="slider-value-label float-left" id="orbital-distance-label"> 60</span>
</div>
<div class="col-sm-3">
<br />
<div class="slider-label">Inclination (degrees)</div>
<div id="inclinationSlider" class="parameter-slider" type="text"></div>
<span class="slider-value-label float-left" id="inclination-label"> 60</span>
</div>
</div>
</div>
</div>
</div>
<!-- All text Content -->
<div class="card mx-auto">
<div class="card-body">
<h3 class="card-title">Detecting Exoplanets</h3>
<div class="list-group">
<h5 class="list-group-item list-group-item-action pageContent">UI Guide</h5>
<div class="card card-body">
<p>Choose one of the following modes:
<ul>
<li>Animation Mode - Normal animation mode. On animation finish the sandbox mode opens up</li>
<li>Sandbox Mode - Play around with Star-Planet system settings with the sliders and observe changes to Transit curve. </li>
<li>Kiosk Mode - On choosing this mode, the animation window expands to full screen and the animation is set to loop indefinitely.</li>
</ul>
</p>
<p>The Full screen button expands the animation to fit the screen. To exit full screen use 'Esc' key or 'F11'
key on Desktop or drag down and press 'back' key on touchscreens.</p>
</div>
<h5 class="list-group-item list-group-item-action pageContent">Exoplanets</h5>
<div class="card card-body">
<p>An exoplanet or an extrasolar planet is a planet that is in orbit of a star other than the star</p>
<p>As of 1 May 2019, there are 4,058 confirmed planets in 3,033 systems, with 658 systems having more than
one planet.</p>
<p>Additional Resources:</p>
<a href="https://exoplanets.nasa.gov/" target="_blank">NASA Exoplanet Exploration</a>
</div>
<a href="test_understanding.html" class="list-group-item list-group-item-action">Next: Test Your Understanding</a>
</div>
</div>
</div>
<!-- Footer begins -->
<footer class="dark-background">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left justify-content-center">
<div class="col-xs-12 col-sm-4 col-md-4 footerColumn">
<h5>About PANOPTES</h5>
<ul class="list-unstyled">
<li><a href="https://projectpanoptes.org/about">About</a></li>
<li><a href="https://projectpanoptes.org/posts">News</a></li>
<li><a href="https://projectpanoptes.org/instructions">Instructions</a></li>
<li><a href="https://projectpanoptes.org/articles/faq">FAQ</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 footerColumn">
<h5>Community</h5>
<ul class="list-unstyled">
<li><a href="https://projectpanoptes.org/teams">Teams</a></li>
<li><a href="https://projectpanoptes.org/people">People</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 footerColumn">
<h5>Contact</h5>
<ul class="list-unstyled">
<li><a href="https://forum.projectpanoptes.org/" title="PANOPTES forum">Forum</a></li>
<li><a href="https://projectpanoptes.org/contact" title="Contact form">Contact Form</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<ul class="list-unstyled list-inline social text-center">
<li class="list-inline-item"><a href="https://www.facebook.com/projectpanoptes/"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/projectpanoptes"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://github.com/panoptes"><i class="fab fa-github"></i></a></li>
<li class="list-inline-item"><a href="https://www.youtube.com/channel/UC14vvlbKTbCb7CJNs-GJF4g"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</hr>
</div>
</div>
</div>
</footer>
</body>
</html>