-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprologue.html
81 lines (75 loc) · 3.16 KB
/
prologue.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
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/style.css">
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script src="js/common.js"></script>
<script src="js/prologue.js"></script>
</head>
<body>
<button type="button" class="button" id="begin_button" onclick="loadContent()">Begin</button>
<div id="content">
<h1>Messier 31</h1>
<h2>Prologue</h2>
<div id="chancellor" class="fade-in-image">
<img src="img/prologue/001_openingSolarSpikeNews1.png" alt="opening news" width="500" height="600">
</div>
<div id="supernova" class="hidden">
<img src="img/prologue/supernova.gif" alt="supernova" width="500" height="600">
</div>
<div id="supernova-blast" class="hidden">
<img src="img/prologue/supernova-blast.gif" alt="supernova" width="500" height="600">
</div>
<div id="app" class="text"></div>
<div id="music"></div>
<div id="next"></div>
</div>
<div id="content_002" class="hidden">
<div id="spaceship">
<img src="img/prologue/002_spaceship.gif" alt="space_ship_to_deep_gate" class="large_img">
</div>
<div id="localgroup" class="hidden">
<img src="img/prologue/localgroup.gif" alt="local_group" class="large_img">
</div>
<div id="app_002" class="text"></div>
<div id="next_002"></div>
</div>
<div id="content_003" class="hidden">
<div id="cockpit_gif" class="hidden">
<img src="img/prologue/empty_hlem.gif" alt="empty_hlem" class="ex_large_img">
</div>
<div id="cockpit_see_through" class="hidden">
<img id="empty_hlem_pic" src="./img/prologue/empty_hlem.png" alt="empty_hlem" class="ex_large_img">
</div>
<div id="deepgate" class="hidden">
<img id="deepgate_pic" src="./img/prologue/deepgate.gif" alt="deepgate">
</div>
<div id="deepgate_wormhole_transistion" class="hidden">
<img id="deepgate_pic" src="./img/prologue/blue.jpeg" alt="deepgate_wormhole_transistion">
</div>
<div id="wormhole" class="polygon hidden">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div id="app_003" class="hidden"></div>
<div id="next_003"></div>
</div>
</body>
</html>