-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoutback.html
More file actions
155 lines (129 loc) · 5.26 KB
/
outback.html
File metadata and controls
155 lines (129 loc) · 5.26 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Queensland Bioseek</title>
<link rel="stylesheet" href="css/style.css">
<!-- Reference from Bootstrap: https://getbootstrap.com/docs/4.0/content/code/ -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<!-- Reference from Font Awesome: https://fontawesome.com/ -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<!-- Reference from: https://fonts.google.com/, -->
<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=Libre+Baskerville:wght@700&family=Montserrat&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<meta name="description"
content="bioseek, rainforest, ecosystems, australia, queensland, daintree, birds, reptiles, fish, mammals.">
<link rel="icon" type="image/png" href="./images/cassowary_favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- SPLASH PAGE-->
<div id="splashWrapper">
<div id="splashContainer">
<img src="images/BioSeek_logo_horizontal.png" alt="bioseek" class="logo">
<br>
<br>
<br>
<p id="splashSub">Welcome to The Outback Environment</p>
<br>
<p id="splashContent">In this experience you take the role of a field zoologists tasked to find and study
animals hidden
in their habitat
<br>
<br>
Finding the animals will reveal valuable information about them and once you find them all you can move
to
the next enviroment
<br>
<br>
You can keep track of what you have found in the bottom left
</p>
<br>
<p id="splashSub">CONTINUE?</p>
<div id="closeCon">
<button id="close" onclick="closeSplash()"><i class="far fa-arrow-alt-circle-right"></i></button>
</div>
</div>
</div>
<!-- SPLASH PAGE-->
<!-- BACKGROUND IMAGES -->
<div id="background-image-outback"></div>
<img src="images/BioSeek_logo_horizontal.png" alt="bioseek" class="logo">
<!-- KANGAROO -->
<img src="images/Kangaroo.png" class="kangaroo" id="kangaroo">
<img src="images/Kangaroo_Cover.png" class="kangaroo_cover">
<!-- CROCODIAL -->
<img src="images/Crocodial.png" class="crocodial" id="crocodial">
<img src="images/Crocodial_Cover.png" class="crocodial_cover">
<!-- DINGO -->
<img src="images/Dingo.png" class="dingo" id="dingo">
<img src="images/Dingo_Cover.png" class="dingo_cover">
<!-- KOALA -->
<img src="images/Koala.png" class="koala" id="koala">
<!-- COCKATOO -->
<img src="images/Black_Cockatoo.png" class="black_cockatoo" id="black_cockatoo">
<div id="detailpage" class="detailedpage">
<button id="sound_button" class="sound_button">
<i class="fas fa-circle-thin fa-volume-mute"></i>
</button>
<p class="sound_instruction">
<i class="fas fa-align-center fa-lg fa-rotate-90"></i> This page is best experienced with sound. Use
headphones and turn up the volume.
</p>
<img src="images/BioSeek_logo_horizontal.png" alt="bioseek" class="logo">
<a href="javascript:void(0)" class="closebtn" onclick="closeDetailPage()">×</a>
<div class="container detailpage-structure">
<div class="row title-detail-page"></div>
<div class="row content-structure"></div>
</div>
</div>
<div class="check_list_animal">
<h4>FOUND ANIMALS</h4>
<ul>
</ul>
<p>You have 5 animals left!</p>
</div>
<div class="next_envi">
<button id="next_envi_button" onclick="closeSplash()"><i class="far fa-arrow-alt-circle-right"></i></button>
</div>
<!-- REFERENCE PART
<button id="reference_button">REFERENCE</button>
<div id="reference" class="reference">
<a href="javascript:void(0)" class="closebtn" onclick="closeReference()">×</a>
<div class="reference_list">
<h1>REFERENCE</h1>
<p>aaaaaaaaaaaaaaa</p>
</div>
</div> -->
<div id="congrat_popup">
<div id="congrat-mess">
<h2>CONGRATULATIONS!</h2>
<p>You have found all the animals!</p>
<p>Do you want to go to the next environment?</p>
<div class="buttons">
<button type="button" class="btn btn-outline-primary" onclick="nextEnvi()">Yes</button>
<button type="button" class="btn btn-outline-primary" onclick="closeCongrat()">No</button>
</div>
</div>
</div>
</body>
<script src="js/script.js"></script>
<!-- This code is reference from https://stackoverflow.com/questions/19970082/cannot-call-methods-on-tooltip-prior-to-initialization/54464578 -->
<script>
let _tooltip = jQuery.fn.tooltip;
</script>
<script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
jQuery.fn.tooltip = _tooltip;
</script>
<!-- Reference from: https://getbootstrap.com/ -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
</script>
</html>