-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.html
283 lines (272 loc) · 14.8 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JELATA | Solar System</title>
<link rel="stylesheet" href="/style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
</head>
<body>
<div id="splash">
<img src="/android-chrome-512x512.png" alt="" style="width: 200px" />
<div>
<h1>JELATA</h1>
<h2>Jelajah Tata Surya</h2>
<p>Oleh Kelompok Terakhir</p>
</div>
<p id="tips">Click anywhere to continue</p>
</div>
<button id="btn" class="hidden">PANEL</button>
<audio src="/public/assets/clickk.mp3" id="click"></audio>
<audio src="./public/assets/hover.mp3" id="hover"></audio>
<div id="toolbox" class="hidden">
<button id="close">x</button>
<header>
<h1 id="title">JELATA</h1>
<h4 id="sub-title">Jelajah Tata Surya</h4>
</header>
<main>
<div id="planet-list">
<button id="btn-mercury" class="btn-planet">Mercury</button>
<button id="btn-venus" class="btn-planet">Venus</button>
<button id="btn-earth" class="btn-planet">Earth</button>
<button id="btn-mars" class="btn-planet">Mars</button>
<button id="btn-jupiter" class="btn-planet">Jupiter</button>
<button id="btn-saturn" class="btn-planet">Saturn</button>
<button id="btn-uranus" class="btn-planet">Uranus</button>
<button id="btn-neptune" class="btn-planet">Neptune</button>
</div>
<div id="page-mercury" class="hidden page">
<button id="back-mercury" class="btn-back">Back</button>
<img src="/public/assets/ico-mercury.png" alt="mercury" />
<p>
Merkurius adalah planet terkecil di Tata Surya sekaligus yang terdekat dari Matahari. Periode revolusi planet ini merupakan yang terpendek dari semua planet di Tata Surya, yakni 87,79 hari. Seperti halnya Venus, Merkurius
merupakan planet inferior yang letak orbitnya berada di sebelah dalam orbit Bumi, dan ketika diamati dari Bumi, jarak sudutnya dari Matahari tidak pernah melebihi 28°.
</p>
<button id="travel-mercury" class="btn-planet">Fast Travel</button>
<a href="/mercury.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-venus" class="hidden page">
<button id="back-venus" class="btn-back">Back</button>
<img src="/public/assets/ico-venus.png" alt="venus" />
<p>
Venus adalah planet terdekat kedua dari Matahari setelah Merkurius. Planet ini mengorbit Matahari selama 224,7 hari Bumi. Venus tidak memiliki satelit alami dan dinamai dari dewi cinta dan kecantikan dalam mitologi Romawi.
Setelah Bulan, planet ini merupakan objek alami tercerah di langit malam, dengan magnitudo tampak sebesar −4,6 yang cukup cerah untuk menghasilkan bayangan.
</p>
<button id="travel-venus" class="btn-planet">Fast Travel</button>
<a href="/venus.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-earth" class="hidden page">
<button id="back-earth" class="btn-back">Back</button>
<img src="/public/assets/ico-earth.png" alt="earth" />
<p>
Bumi adalah planet ketiga dari Matahari yang merupakan planet terpadat dan terbesar kelima dari delapan planet dalam Tata Surya. Bumi juga merupakan planet terbesar dari empat planet kebumian di Tata Surya. Bumi terkadang
disebut dengan dunia atau Planet Biru.
</p>
<button id="travel-earth" class="btn-planet">Fast Travel</button>
<a href="/earth.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-mars" class="hidden page">
<button id="back-mars" class="btn-back">Back</button>
<img src="/public/assets/ico-mars.png" alt="mars" />
<p>
Mars adalah planet terdekat keempat dari Matahari. Namanya diambil dari dewa perang Romawi, Mars. Planet ini sering dijuluki sebagai "planet merah" karena tampak dari jauh berwarna kemerah-kemerahan. Ini disebabkan oleh
keberadaan besi(III) oksida di permukaan planet Mars. Mars adalah planet bebatuan dengan atmosfer yang tipis. Di permukaan Mars terdapat kawah, gunung berapi, lembah, gurun, dan tudung es.
</p>
<button id="travel-mars" class="btn-planet">Fast Travel</button>
<a href="/mars.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-jupiter" class="hidden page">
<button id="back-jupiter" class="btn-back">Back</button>
<img src="/public/assets/ico-jupiter.png" alt="jupiter" />
<p>
Jupiter atau Yupiter adalah planet terdekat kelima dari Matahari setelah Merkurius, Venus, Bumi, dan Mars. Planet ini juga merupakan planet terbesar di Tata Surya. Jupiter merupakan raksasa gas dengan massa seperseribu massa
Matahari dan dua setengah kali jumlah massa semua planet lain di Tata Surya.
</p>
<button id="travel-jupiter" class="btn-planet">Fast Travel</button>
<a href="/jupiter.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-saturn" class="hidden page">
<button id="back-saturn" class="btn-back">Back</button>
<img src="/public/assets/ico-saturn.png" alt="saturn" />
<p>
Saturnus adalah planet keenam dari Matahari dan merupakan planet terbesar kedua di Tata Surya setelah Jupiter. Saturnus juga merupakan sebuah raksasa gas yang memiliki radius rata-rata sekitar 9 kali radius rata-rata Bumi. Massa
jenis rata-rata Saturnus hanya 1/8 massa jenis rata-rata Bumi, tetapi dengan volume yang lebih besar dari Bumi, massa Saturnus tercatat 95 kali massa Bumi. Saturnus dinamai menurut dewa kesejahteraan dan agribudaya dalam
mitologi Yunani; simbol astronominya (♄) melambangkan sabit yang digunakan oleh dewa tersebut.
</p>
<button id="travel-saturn" class="btn-planet">Fast Travel</button>
<a href="/saturn.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-uranus" class="hidden page">
<button id="back-uranus" class="btn-back">Back</button>
<img src="/public/assets/ico-uranus.png" alt="uranus" />
<p>
Uranus (berasal dari nama Latin Ūranus untuk nama dewa Yunani Οὐρανός) adalah planet ketujuh dari Matahari. Uranus merupakan planet yang memiliki jari-jari terbesar ketiga sekaligus massa terbesar keempat di Tata Surya. Uranus
juga merupakan satu-satunya planet yang namanya berasal dari tokoh dalam mitologi Yunani, dari versi Latinisasi nama dewa langit Yunani Ouranos. Komposisi Uranus serupa dengan Neptunus, dan keduanya mempunyai komposisi kimiawi
yang berbeda dari raksasa gas yang lebih besar, Jupiter dan Saturnus.
</p>
<button id="travel-uranus" class="btn-planet">Fast Travel</button>
<a href="/uranus.html" class="btn-planet">Enter Planet</a>
</div>
<div id="page-neptune" class="hidden page">
<button id="back-neptune" class="btn-back">Back</button>
<img src="/public/assets/ico-neptune.png" alt="neptune" />
<p>
Neptunus merupakan planet terjauh (kedelapan) jika ditinjau dari Matahari. Planet ini dinamai dari dewa lautan Romawi. Neptunus merupakan planet terbesar keempat berdasarkan diameter (49.530 km) dan terbesar ketiga berdasarkan
massa. Massa Neptunus tercatat 17 kali lebih besar daripada Bumi, dan sedikit lebih kecil daripada Uranus. Neptunus mengorbit Matahari pada jarak 30,1 sa atau sekitar 4.450 juta km. Periode rotasi planet ini adalah 16,1 jam,
sedangkan periode revolusinya adalah 164,8 tahun. Simbol astronomisnya adalah ♆, yang merupakan trisula dewa Neptunus.
</p>
<button id="travel-neptune" class="btn-planet">Fast Travel</button>
<a href="/neptune.html" class="btn-planet">Enter Planet</a>
</div>
</main>
</div>
<script src="dist/bundle.js"></script>
<script>
const btn = document.getElementById("btn");
const toolbox = document.getElementById("toolbox");
const splash = document.getElementById("splash");
const close = document.getElementById("close");
const title = document.getElementById("title");
const subTitle = document.getElementById("sub-title");
splash.addEventListener("click", function () {
splash.classList.add("hidden");
btn.classList.remove("hidden");
});
btn.addEventListener("click", function () {
btn.classList.add("hidden");
toolbox.classList.remove("hidden");
});
close.addEventListener("click", function () {
toolbox.classList.add("hidden");
btn.classList.remove("hidden");
});
const planetList = document.getElementById("planet-list");
const btnMercury = document.getElementById("btn-mercury");
const pageMercury = document.getElementById("page-mercury");
const backMercury = document.getElementById("back-mercury");
btnMercury.addEventListener("click", function () {
planetList.classList.add("hidden");
pageMercury.classList.remove("hidden");
title.innerText = "Mercury";
subTitle.innerText = "Merkurius merupakan planet terkecil";
});
backMercury.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageMercury.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnVenus = document.getElementById("btn-venus");
const pageVenus = document.getElementById("page-venus");
const backVenus = document.getElementById("back-venus");
btnVenus.addEventListener("click", function () {
planetList.classList.add("hidden");
pageVenus.classList.remove("hidden");
title.innerText = "Venus";
subTitle.innerText = "Venus adalah planet kedua dari Matahari";
});
backVenus.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageVenus.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnEarth = document.getElementById("btn-earth");
const pageEarth = document.getElementById("page-earth");
const backEarth = document.getElementById("back-earth");
btnEarth.addEventListener("click", function () {
planetList.classList.add("hidden");
pageEarth.classList.remove("hidden");
title.innerText = "Earth";
subTitle.innerText = "Satu-satunya planet yang tidak didasari dari nama dewa";
});
backEarth.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageEarth.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnMars = document.getElementById("btn-mars");
const pageMars = document.getElementById("page-mars");
const backMars = document.getElementById("back-mars");
btnMars.addEventListener("click", function () {
planetList.classList.add("hidden");
pageMars.classList.remove("hidden");
title.innerText = "Mars";
subTitle.innerText = "Meskipun berwarna merah, Mars adalah tempat yang dingin";
});
backMars.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageMars.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnJupiter = document.getElementById("btn-jupiter");
const pageJupiter = document.getElementById("page-jupiter");
const backJupiter = document.getElementById("back-jupiter");
btnJupiter.addEventListener("click", function () {
planetList.classList.add("hidden");
pageJupiter.classList.remove("hidden");
title.innerText = "Jupiter";
subTitle.innerText = "Jupiter merupakan planet terbesar dari semuanya";
});
backJupiter.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageJupiter.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnSaturn = document.getElementById("btn-saturn");
const pageSaturn = document.getElementById("page-saturn");
const backSaturn = document.getElementById("back-saturn");
btnSaturn.addEventListener("click", function () {
planetList.classList.add("hidden");
pageSaturn.classList.remove("hidden");
title.innerText = "Saturn";
subTitle.innerText = "Saturnus adalah raksasa gas dan memiliki beberapa cincin";
});
backSaturn.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageSaturn.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnUranus = document.getElementById("btn-uranus");
const pageUranus = document.getElementById("page-uranus");
const backUranus = document.getElementById("back-uranus");
btnUranus.addEventListener("click", function () {
planetList.classList.add("hidden");
pageUranus.classList.remove("hidden");
title.innerText = "Uranus";
subTitle.innerText = "Tak hanya saturnus yang memiliki cincin, Uranus juga";
});
backUranus.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageUranus.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
const btnNeptune = document.getElementById("btn-neptune");
const pageNeptune = document.getElementById("page-neptune");
const backNeptune = document.getElementById("back-neptune");
btnNeptune.addEventListener("click", function () {
planetList.classList.add("hidden");
pageNeptune.classList.remove("hidden");
title.innerText = "Neptune";
subTitle.innerText = "Neptunus memiliki usia yang hampir sama dengan matahari";
});
backNeptune.addEventListener("click", function () {
planetList.classList.remove("hidden");
pageNeptune.classList.add("hidden");
title.innerText = "JELATA";
subTitle.innerText = "Jelajah Tata Surya";
});
</script>
</body>
</html>