-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
426 lines (387 loc) · 13.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
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
<!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>(VFT) Virtual Field Trip</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<!-- Panorama Container -->
<div class="panorama-image"></div>
<!-- Infospots -->
<!-- <div id="desc-container" style="display:none">
<iframe src="https://www.youtube.com/embed/D7icsuamx5E"></iframe>
<div class="title">China's Forgotten War</div>
<div class="text">WWII came to the small town of Tai’erzhuang in central China – and it was never the same again.
The town was strategically placed, on the north-south transport railway corridor and the ancient Grand Canal, and
so was a focus of the Japanese Imperial army as it advanced. Li Jing Shan was only a child when his family fled
the fighting. They returned to find their home, and most of the town, in ruins.</div>
</div>
<div class="infospot infospot-3">
<div class="toggle-wrapper">
<span>Infospot 3</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Lake's Bridge</h2>
<img class="infospot-image" src="images/lake-bridge.jpg" alt="Lake's Bridge">
</div>
</div>
</div>
<div class="infospot infospot-4">
<div class="toggle-wrapper">
<span>Infospot 4</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<iframe src="https://www.youtube.com/embed/DUfXCgjAobQ" allowfullscreen width="100%"></iframe>
</div>
<div class="content-wrapper other">
<img class="infospot-image" src="images/pano1.jpg" alt="Video China War">
</div>
</div>
</div> -->
<!-- Infospots Panorama Laut Dangkal (1) -->
<div class="infospot infospot-petunjuk">
<div class="toggle-wrapper">
<span>Petunjuk Penggunaan</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Petunjuk Penggunaan</h2>
<p class="text">
Pada kegiatan ini, kalian akan mengunjungi tiga tempat dan mengamati berbagai interaksi yang terjadi
</p>
<ul class="text-list">
<li>Pilih salah satu dari tiga tempat yang akan kalian kunjungi</li>
<li>Jelajahi tempat tersebut dan temukan informasi berupa foto ataupun video mengenai interaksi hewan</li>
<li>Klik ikon info kemudian klik infospot yang muncul</li>
<li>Amati interaksi yang terjadi</li>
<li>Cari informasi dari berbagai sumber untuk melengkapi informasi mengenai foto/video yang ditampilkan</li>
</ul>
</div>
</div>
</div>
<div class="infospot infospot-1_1">
<div class="toggle-wrapper">
<span>Infospot 1</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Penyu dan Ubur-ubur</h2>
<iframe src="https://www.youtube.com/embed/PA66nEJYaAU" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_2">
<div class="toggle-wrapper">
<span>Infospot 2</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ikan Giru Hitam dan Terumbu Karang</h2>
<iframe src="https://www.youtube.com/embed/hC7CGJJgWYY" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_3">
<div class="toggle-wrapper">
<span>Infospot 3</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Bintang Laut dan Kerang</h2>
<iframe src="https://www.youtube.com/embed/4dkieg7F37c" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_4">
<div class="toggle-wrapper">
<span>Infospot 4</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title"><i>Brain Coral</i> dan ikan penghuni karang laut</h2>
<iframe src="https://www.youtube.com/embed/3blhUwerST4" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_5">
<div class="toggle-wrapper">
<span>Infospot 5</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Interaksi ikan Mutiara dan Timun Laut</h2>
<iframe src="https://www.youtube.com/embed/o6NIG3KkwLE" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_6">
<div class="toggle-wrapper">
<span>Infospot 6</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Interaksi antara kedua ikan Sarcastic Fringehead</h2>
<iframe src="https://www.youtube.com/embed/M7EAKwrRXco" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_7">
<div class="toggle-wrapper">
<span>Infospot 7</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Cacing Bobbit dan Ikan</h2>
<iframe src="https://www.youtube.com/embed/K_7ByiYbCYM" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_8">
<div class="toggle-wrapper">
<span>Infospot 8</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Kerang dan Ikan</h2>
<iframe src="https://www.youtube.com/embed/jYMjLgPFSso" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_9">
<div class="toggle-wrapper">
<span>Infospot 9</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ikan Kakatua dan Alga yang menempel pada terumbu karang</h2>
<iframe src="https://www.youtube.com/embed/o-blz2ghKOU" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_11">
<div class="toggle-wrapper">
<span>Infospot 11</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ikan Surgeon dan Penyu</h2>
<iframe src="https://www.youtube.com/embed/3unDrsDuerY" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-1_12">
<div class="toggle-wrapper">
<span>Infospot 12</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ikan Goby dan Udang Pistol</h2>
<iframe src="https://www.youtube.com/embed/50FgPLdZUEE" allowfullscreen width="100%"></iframe>
</div>
<div class="content-wrapper other">
<iframe src="https://www.youtube.com/embed/qHE0Jgmbtsg" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<!-- End of Infospots Panorama Laut Dangkal (1) -->
<!-- Infospots Panorama Gurun (2) -->
<div class="infospot infospot-2_1">
<div class="toggle-wrapper">
<span>Infospot 1</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Burung Kaktus Wren dan tumbuhan Kaktus</h2>
<iframe src="https://www.youtube.com/embed/U1XqsOTvTnc" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-2_2">
<div class="toggle-wrapper">
<span>Infospot 2</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Tanaman benalu gurun (<i>Mistletoe</i>) dan burung <i>Phainopepla</i></h2>
<img class="infospot-image" src="images/infospots/2-2.webp" alt="burung hitam">
</div>
</div>
</div>
<div class="infospot infospot-2_3">
<div class="toggle-wrapper">
<span>Infospot 3</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Tanaman <i>Mistletoe</i> dan inangnya</h2>
<img class="infospot-image" src="images/infospots/2-3.jpg" alt="pohon ranting">
</div>
</div>
</div>
<div class="infospot infospot-2_4">
<div class="toggle-wrapper">
<span>Infospot 4</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Kadal dan Ular</h2>
<iframe src="https://www.youtube.com/embed/0WUzZtHv3_8" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-2_5">
<div class="toggle-wrapper">
<span>Infospot 5</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Interaksi 2 Burung Unta</h2>
<iframe src="https://www.youtube.com/embed/L0HkAIyZRn8" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-2_6">
<div class="toggle-wrapper">
<span>Infospot 6</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title"><i>Fat-tailed scorpion dan spiny-tailed lizard</i></h2>
<img class="infospot-image" src="images/infospots/2-6.jpg" alt="reptil dan kalajengking">
</div>
</div>
</div>
<!-- End of Infospots Panorama Gurun -->
<!-- Infospots Panorama Sungai (3) -->
<div class="infospot infospot-3_1">
<div class="toggle-wrapper">
<span>Infospot 1</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ular Air Kelabu dan Ikan</h2>
<iframe src="https://www.youtube.com/embed/l7sKyKYf3Eg" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-3_2">
<div class="toggle-wrapper">
<span>Infospot 2</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Burung Cekakak dan Ikan</h2>
<iframe src="https://www.youtube.com/embed/xX9J-lVUQd0" allowfullscreen width="100%"></iframe>
</div>
</div>
</div>
<div class="infospot infospot-3_3">
<div class="toggle-wrapper">
<span>Infospot 3</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Tanaman <i>Mistletoe</i> dan pohon inangnya</h2>
<img class="infospot-image" src="images/infospots/3-3.jpg" alt="semut di daun">
</div>
</div>
</div>
<div class="infospot infospot-3_4">
<div class="toggle-wrapper">
<span>Infospot 4</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Fungi dan Batang Pohon</h2>
<img class="infospot-image" src="images/infospots/3-4.jpg" alt="jamur di batang">
</div>
</div>
</div>
<div class="infospot infospot-3_6">
<div class="toggle-wrapper">
<span>Infospot 6</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Ular (<i>Phyton sp</i>) dan Kutu yang menempel</h2>
<img class="infospot-image" src="images/infospots/3-6.jpg" alt="ular">
</div>
</div>
</div>
<div class="infospot infospot-3_7">
<div class="toggle-wrapper">
<span>Infospot 7</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Induk burung memberi makan anaknya
dan ikan yang dimakan burung
</h2>
<img class="infospot-image" src="images/infospots/3-7.jpg" alt="sarang burung">
</div>
</div>
</div>
<div class="infospot infospot-3_8">
<div class="toggle-wrapper">
<span>Infospot 8</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Fungi dan Alga Hijau yng bersimbiosis membentuk Lichenes</h2>
<img class="infospot-image" src="images/infospots/3-8.jpg" alt="pohon lapuk">
</div>
</div>
</div>
<div class="infospot infospot-3_9">
<div class="toggle-wrapper">
<span>Infospot 9</span>
</div>
<div class="content-infospot">
<div class="content-wrapper">
<h2 class="title">Semut dan Kutu Daun (<i>Aphids</i>)</h2>
<img class="infospot-image" src="images/infospots/3-9.jpg" alt="semut pohon">
</div>
</div>
</div>
<!-- End of Infospots Panorama Sungai -->
<!-- End of Infospots -->
<!-- Image Viewer -->
<div class="image-viewer-overlay">
<div class="content">
<img class="image-zoom" src="" alt="">
</div>
</div>
<!-- End of Image Viewer -->
<!-- Loading Progress -->
<div id="progress"></div>
<!-- Menu Navigation -->
<div class="menu-navigation">
<div class="nav-icon-wrapper">
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<span class="navigation-title">Virtual Field Trip</span>
</div>
<div class="menu-list">
<div class="menu-item active" data-panorama="home">Home</div>
<div class="menu-item" data-panorama="laut-dangkal">Ekosistem Laut Dangkal</div>
<div class="menu-item" data-panorama="gurun">Ekosistem Gurun</div>
<div class="menu-item" data-panorama="sungai">Ekosistem Sungai</div>
</div>
<!-- End of Menu Navigation -->
<script src="js/threer105.min.js"></script>
<script src="js/panolens.min.js"></script>
<!-- <script src="js/panolens-update.min.js"></script> -->
<script src="js/main.js"></script>
</body>
</html>