-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
394 lines (374 loc) · 17.7 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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Galactic Tourism Project</title>
<link rel="stylesheet" href="./assets/css/index.css" />
<link rel="icon" type="image/png" href="./assets/img/icon.png" />
</head>
<body>
<header id="title-section">
<div id="title">
<h1 id="project-title" class="text-header">
Galactic Tourism:<br />
Holes Tour
</h1>
</div>
<div id="description">
<h2>
Discover the wonders of the universe. Visit some of the most
extreme and mysterious objects in the cosmos.
</h2>
<p>
Our tour covers three destinations; some of the most extreme
celestial objects that practically defy spacetime.
</p>
</div>
</header>
<div id="destinations">
<div id="black-hole" onclick="displayContent('black-hole-info')">
<img src="./assets/img/black-hole.jpg" class="content-image" />
<h2 class="text-header">Black Hole</h2>
<p>
A black hole may look scary, but how would you even know?
Their gravitational pull is so strong that nothing, not even
light, can escape. So maybe you won't really be seeing a
black hole on our tour, but the event horizon is just as
cool!
</p>
</div>
<div id="white-hole" onclick="displayContent('white-hole-info')">
<img src="./assets/img/white-hole.png" class="content-image" />
<h2 class="text-header">White Hole</h2>
<p>
A white hole is the black hole's antisocial cousin. It spits
out matter and light, but never lets any in. Problem is, we
really don't know if they exist. Please don't ask for a
refund!
</p>
</div>
<div id="worm-hole" onclick="displayContent('wormhole-info')">
<img src="./assets/img/wormhole.png" class="content-image" />
<h2 class="text-header">Wormhole</h2>
<p>
If you're too lazy to wait two light years to reach the next
solar system, a wormhole is a solid option; assuming we can
locate one for you... no promises!
</p>
</div>
</div>
<div id="info-div" class="travel-info-div">
<div class="travel-info-div-content" id="info-content">
<button
id="info-close-button"
class="close-button"
onclick="closeContent('info-div')"
>
Close
</button>
<div id="info-text">
<h2 id="info-title" class="text-header">
Welcome to Galactic Tourism
</h2>
<h3>Interacting with the Website</h3>
<p id="info-description">
Click on any of the destination containers on the main
page to learn more about them. Click the close button to
return to the main page.
<br /><br />
The information is organized in somewhat of a story; I'd
recommend going in the presented order.
</p>
<h3>Background Information</h3>
<p id="info-description">
I focused on mostly decoration for this website; it
ended up becoming one of the more visually appealing
projects I've made. Hopefully I'll have the chance to
code more projects in the future!
<br /><br />
Programming takes a while; I spent almost seven hours
working on styling alone. However, the final result came
out very well in my opinion, and was worth the time.
<br /><br />
This website is open-source and available on
<a
href="https://github.com/dacoder101/galactic-tourism-project"
class="link"
>GitHub</a
>.
<br /><br />
- Bobby Elmore
</p>
</div>
</div>
</div>
<div class="travel-info-div" id="black-hole-info">
<div class="travel-info-div-content">
<button
class="close-button"
onclick="closeContent('black-hole-info')"
>
Close
</button>
<h2 class="text-header">Black Hole</h2>
<h3>
This part of the tour is sponsored by an imploded star; we
wouldn't being enjoying this tour without it!
</h3>
<p>
Before that star imploded, nuclear fusion fought against
gravity and kept the star stable. However, the star was
<strong>large.</strong>
</p>
<h3>What Happened?</h3>
<p>
Massive stars generate iron, which is a problem because that
reaction doesn't produce energy. The star's core fills up
with iron until the balance with the external gravity is
broken. The core collapses, and creates a supernova. It
could've become a neutron star, but the star was too big.
</p>
<h3>
The core collapses into a singularity, and the star becomes
a black hole.
</h3>
<hr class="divider" />
<h3>
Black holes don't suck you in, so why can't you escape them?
</h3>
<p>
What we're observing now is the event horizon; essentially
<strong>"the point of no return."</strong> If our "tour bus"
were to cross... well, all directions we could go lead to
the singularity. This is because the black hole's gravity is
so strong that it warps spacetime.
</p>
<h3>Well, what's a singularity?</h3>
<p>
We don't exactly know... some scientists think that the
singularity is infinitely dense, with almost no volume. We
<i>thankfully</i> will not be making the discovery
ourselves.
</p>
<hr class="divider" />
<h3>This black hole may disappear sometime soon!</h3>
<p>
Thankfully, sometime soon is about
<strong>10<sup>100</sup></strong> years, don't stress about
not getting your money's worth. The dissipation process of a
black hole is called Hawking Radiation, and it takes a
<strong>long</strong> time.
</p>
<h3>
Essentially, space has particles popping into, and
“annihilating” each other from existence.
</h3>
<p>
When this happens near the event horizon, one particle gets
sucked in, and the other escapes. The escaping particle
steals energy from the black hole, and the black hole loses
mass. This process is incredibly slow, but it's happening
right now.
</p>
</div>
</div>
<div class="travel-info-div" id="white-hole-info">
<div class="travel-info-div-content">
<button
class="close-button"
onclick="closeContent('white-hole-info')"
>
Close
</button>
<h2 class="text-header">White Hole</h2>
<h3>Woah, did that black hole just spit out a planet?</h3>
<p>
Haha, just kidding. We'd have to get pretty luck to see a
white hole; scientists aren't even 100% sure they exist.
</p>
<h3>
White holes are the mathematical opposite of black holes.
</h3>
<p>
They're the result of a solution to the Einstein Field
Equations, but they're not very stable. They're like a black
hole, but they spit out matter and light, and don't let
anything in.
</p>
<h3>How would a white hole push you away?</h3>
<p>
White holes have a repulsive force, which is the opposite of
gravity. If you were to get close to a white hole, you'd be
pushed away at an increasing speed. Essentially "negative
gravity," which is a concept we aren't too familiar with.
</p>
<h3>
Scientists think that white holes are the time reverse of
black holes.
</h3>
<p>
They think white holes' singularities exist in the past, and
black holes' singularities exist in the future. However, the
existence of white holes violates multiple assumptions; "How
can a white hole exist if it's spitting out matter?" "Isn't
entropy supposed to increase?"
<br /><br />
Another thing to add; matter spat out of a white hole may
collide with the matter around the event horizon, which
would cause the white hole to collapse into a black hole.
</p>
<hr class="divider" />
<h3>Any promising theories?</h3>
<p>
If you're good at reading math equations, maybe. Some
scientists think the death of a black hole could result in a
white hole. As the black hole loses mass, it would further
defy physics and gravity, but would still contain all the
matter it consumed (cause quantum physics says so!!) and if
multiple factors align, a black hole could potentially start
spitting out matter.
</p>
<h3>
If this theory holds, white holes could recreate conditions
for life!
</h3>
<p>
Instead of the universe becoming nothing, and our touring
business going bankrupt, white holes could potentially
refill the universe with matter and energy. Its a genius
business strategy!
</p>
</div>
</div>
<div class="travel-info-div" id="wormhole-info">
<div class="travel-info-div-content">
<button
class="close-button"
onclick="closeContent('wormhole-info')"
>
Close
</button>
<h2 class="text-header">Wormhole</h2>
<h3>Well, thanks for coming on the tour guys!</h3>
<p>
It'll take us about 7 light-years to get back to Earth, so
pray we find a wormhole or you might be waiting a while.
</p>
<h3>Wormholes are essentially shortcuts through spacetime.</h3>
<p>
They're like a tunnel connecting two points in spacetime.
They're theoretical, but they're a solution to the Einstein
Field Equations. They're kind of like a black hole, but they
have two event horizons. Sadly, their only known existence
right now is a math equation...
</p>
<hr class="divider" />
<h3>Let's picture space in 2D.</h3>
<p>
If you were to draw a wormhole, it would look like a funnel.
</p>
<img
class="content-image"
src="./assets/img/wormhole-2d.png"
alt="Wormhole visualized in 2D"
/>
<p>
The two event horizons are the two openings of the funnel.
The throat is the tunnel connecting the two event horizons.
If wormholes did exist, you would be able to travel light
years almost instantly.
</p>
<h3>How would you find a wormhole?</h3>
<p>
Currently, there are three "promising" theories on how we
could use a wormhole to get home. One involves going through
a black hole to a mirrored universe! I'd prefer to avoid
that one, though. Another theory is called string theory;
there's also a possibility we could create manmade
wormholes!
</p>
<hr class="divider" />
<h3>What the heck is string theory?</h3>
<p>
Very, very tiny spacetime quantum flucuations, smaller than
the size of atoms, could've created many wormholes. Threaded
through these wormholes are strings (also known as cosmic
strings), which are essentially what prevents the wormhole
from collapsing.
<br /><br />
During the first "millionth of a trillionth of a second" of
the big bang, these wormholes would've been spread through
the universe light years apart. If we could find one, we
could take thousands of years off our travel home!
</p>
<h3>What if we're too far away from a natural wormhole?</h3>
<p>
In theory, we could create a wormhole. We'd need a lot of
supplies though. It couldn't kill us trying to traverse
through it either. Most importantly, we would need
<strong>exotic matter</strong> to keep the wormhole open.
</p>
<h3>
Exotic matter acts like a cosmic string, and has negative
mass.
</h3>
<p>
Exotic matter would be repulsive unlike matter and
antimatter, perfect for keeping a wormhole open. If we
manipulated quantum flucuations, we could create some exotic
matter.
</p>
<hr class="divider" />
<h3>Well, that's all assuming wormholes could even be made.</h3>
<p>
"The haters" say wormholes could create time travel
paradoxes, leading them to believe making them is
impossible. Some think wormholes couldn't exist at all.
However, if humans could create wormholes, who knows what
kind of transportation we could have.
</p>
<h3>
By the way, our contract specified no refunds if we didn't
end up seeing what was originally planned. Sorry!
</h3>
</div>
</div>
<footer id="footer-section">
<div id="copyright">
<b id="copyright-text"></b>
</div>
<div id="socials-section">
<h3>Follow Us</h3>
<div id="socials">
<a href="https://facebook.com/"
><img
src="./assets/img/socials/facebook.png"
alt="Facebook"
class="social-icon"
width="32px"
height="32px"
/></a>
<a href="https://x.com/"
><img
src="./assets/img/socials/x.png"
alt="X"
class="social-icon"
width="32px"
height="32px"
/></a>
<a href="https://instagram.com/"
><img
src="./assets/img/socials/instagram.png"
alt="Instagram"
class="social-icon"
width="32px"
height="32px"
/></a>
</div>
</div>
</footer>
<script src="./assets/js/func.js"></script>
<script src="./assets/js/index.js"></script>
</body>
</html>