-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
258 lines (251 loc) · 10.1 KB
/
index.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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
<!-- NASA Space Apps Challange 2023 made and submitted by Team SOLV8ORS -->
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script
src="https://kit.fontawesome.com/b0f29e9bfe.js"
crossorigin="anonymous"
></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eclipses</title>
</head>
<body>
<main class="mainClass">
<header>
<h1 id="title">ECLIPSES</h1>
<h3 id="tagline">PERSPECTIVE IS EVERYTHING</h3>
</header>
<section>
<a href="#story" id="btn">Scroll TO Explore!</a>
<img
src="./public/images/desert.png"
alt="stars-image"
id="mountains_front"
/>
</section>
<div class="story" id="story">
<button id="prev-btn">
<i>Back</i>
</button>
<!-- book -->
<div id="book" class="book">
<!-- paper1 -->
<div id="p1" class="paper">
<div class="front">
<div id="f1" class="front-content">
<h1>
<img class="image" src="./public/images/wtt.webp" />
</h1>
</div>
</div>
<div class="back">
<div id="b1" class="back-content">
<img src="./public/images/chess/chess.png" width="350" />
</div>
</div>
</div>
<!-- paper2 -->
<div id="p2" class="paper">
<div class="front text">
<div id="f2" class="front-content">
<audio id="myAudio2" src="./public/audios/page2.mp3"></audio>
<p class="story1">
Once upon a time, there was a girl named Saros who was
obsessed with spaces and different scientific occurences.With
her increasing curiosity, she went to her dad who was an
astrophysicist but from the thought of bothering him during
his works, she decided to not trouble him and kept her
questions with herself. She eagerly waited for Friday night as
that was 'The Chess Day'.She and her dad had a long ritual of
playing chess every Friday night. She was sure that this
time,she will at any cost win her dad in chess.She decided to
use this opportunity to get answers to her curiosities too.
</p>
</div>
</div>
<div class="back">
<div id="b2" class="back-content">
<img src="./public/images/chess/chess2.png" height="350px" />
</div>
</div>
</div>
<!-- paper 3 -->
<div id="p3" class="paper">
<div class="front">
<div id="f3" class="front-content">
<audio id="myAudio3" src="./public/audios/page3.mp3"></audio>
<p class="story1">
Just when her bishop was at threat she decided to distract her
dad and also hit the nail by asking him her questions
regarding the event. She asked to her dad,"Dad! Why was i
named Saros?"Dad smiled and said,"There's a cycle called Saros
cycle for eclipses and i was fascinated with that research
when you were just a little kid." Saros (in excitement) asks
again,"What's so wonderful about eclipses,Dad?". Dad happily
says," In order to unveil that you have to first know
everything about the eclipses. " "Checkmate",says Saros.
</p>
</div>
</div>
<div class="back">
<div id="b3" class="back-content">
<img src="./public/images/chess/chess3.png" width="350" />
</div>
</div>
</div>
<!-- paper4 -->
<div id="p4" class="paper">
<div class="front text">
<div id="f4" class="front-content">
<audio id="myAudio4" src="./public/audios/page4.mp3"></audio>
<p class="story1">
Dad was willingly ready to lose from his daughter to introduce
her to the magical world of eclipses. Bingo!Saros's plan was
successful and she was thrilled to know everything about
eclipses.Saros's dad was obsessed with eclipses.He was always
ready to teach his daughter about the wonders of space and
couldn't hold back teaching everything about this mystical
event to her. Saros's Dad says joyfully,
<b>"Now here begins the majestic journey of eclipses!!"</b>
</p>
</div>
</div>
<div class="back">
<div id="b4" class="back-content">
<h1></h1>
<img class="cab" src="./public/images/thh.jpg" />
</div>
</div>
</div>
</div>
<!-- next button -->
<button id="next-btn">
<i>Next</i>
</button>
</div>
</main>
<div class="help-overlay">
<li>Click and drag to rotate the camera around.</li>
<li>Right click with the mouse to pan.</li>
<li>Pinch in a Touchpad or scroll to zoom.</li>
<li>Scroll on right to know about Eclipse</li>
</div>
<div class="secondPage">
<div class="question-answers">
<div class="questions">1.How do Eclipses occur?</div>
<div class="answers">
Eclipses are the scientific phenomena that occur when any celestial
body comes in shadow of another celestial body which can cause the
blocking of light for temporary amount of time. There are mainly two
types of eclipses that occur. They are:Solar eclipses and Lunar
eclipses.
</div>
</div>
<div class="question-answers">
<div class="questions">
2.Why do only some people on Earth see an eclipse at a given time?
</div>
<div class="answers">
The person needs to be within or near the eclipse path to see the
eclipse and if he/she is out of it,the eclipse is not observed. Lunar
eclipses are visible from everywhere until the person is at the
night-side of the Earth but in case of the solar eclipse, the moon
casts the umbra and penumbra shadow over the Earth. Umbra is the
shadow that gets smaller as it reaches the Earth and people in umbra
will see a total eclipse while penumbra is the shadow that gets bigger
as it reaches the Earth and people in penumbra will only see a partial
eclipse.
</div>
</div>
<div class="question-answers">
<div class="questions">
3.What causes the Sun, Moon, and Earth to align?
</div>
<div class="answers">
The main reason for the Sun,Moon and Earth to align is the inclination
of the Moon that is tilted about 5.1 degrees with it's ecliptic
plane,inclination of Earth's orbit around the Sun and the Earth's axis
is tilted at an angle of about 23.5 degrees with respect to it's
ecliptic plane and due to nodes(intersection of the Moon's orbit and
the ecliptic plane) and the different phases of the moon that cause
the eclipses to occur accordingly.
</div>
</div>
<div class="question-answers">
<div class="questions">4.How often do eclipses occur?</div>
<div class="answers">
Partial lunar eclipses are pretty common and at least two partial
lunar eclipses occur every year but the total lunar eclipses are
rare.In case of solar eclipses, they occur every 18 months on the
Earth.According to NASA, On average, the same spot on the Earth only
gets to see a solar eclipse for a few minutes about every 375 years.
After about every 18 years, similar eclipses are occurred as studied
in the Saros cycle, which is approximately 18 years, 11 days and 8
hours cycle.
</div>
</div>
<div class="question-answers">
<div class="questions">
5.How do scientists know when and where eclipses will occur?
</div>
<div class="answers">
Scientists use the scientific table called Ephemerides that gives the
positions of celestial objects at a specific time and now in
advancement with technology, different apps are also available for
monitoring the positions of the celestial bodies and navigating them
accordingly.Eclipse season also gives information about the eclipses
to occur.They use different mathematical models and their
computational power to predict about the eclipses.
</div>
</div>
<div class="question-answers">
<div class="questions">
6.What is the difference between a lunar and solar eclipse?
</div>
<div class="answers">
In solar eclipse, moon comes in between the Sun and the Earth and
casts a shadow over the Earth.It can further be divided into Total
Solar Eclipse,Partial Solar Eclipse and Annular Solar Eclipse.
Similarly, in lunar eclipse, earth comes in between the Sun and the
Moon which causes the Earth's shadow to fall on the moon. It can
further be divided into Total Lunar Eclipse and Partial Lunar
Eclipse.Lunar eclipses occur and remain for some hours and are safe to
watch with our naked eyes while solar eclipses occur only for few
minutes and should not be looked at directly.
</div>
</div>
<div class="question-answers">
<div class="questions">
7. What is an eclipse season and why do they occur approximately every
six months (or twice a year)?
</div>
<div class="answers">
Eclipse seasons occur approximately every six months when the Sun is
near one of the nodes.They occur due to the axial parallelism of the
orbital plane of the Moon which is tilted about 5 degrees to the
Earth's orbital plane. Each eclipse season lasts for about 35 days and
solar and lunar eclipse can occur only this short period of time.About
every six months, Earth comes to a sweet spot in its orbit where a
perfect—or almost perfect—three-way alignment of the Earth, Moon, and
Sun can occur. Each sweet spot lasts for about 34.5 days: an eclipse
season.If there is a New Moon near the middle of an eclipse season, it
will form a straight line with the Earth and the Sun. The result will
be a total solar eclipse, or an annular solar eclipse, if the Moon is
too far from Earth to cover the Sun completely. In a similar way, a
Full Moon near the middle of an eclipse season will produce a total
lunar eclipse.
</div>
</div>
<div class="question-answers creds">
Made with ♥ by Team Solv8ors. Thank You!!
</div>
</div>
<div class="render-container">
<canvas></canvas>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>