/
index.html
275 lines (253 loc) · 12.6 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
<!DOCTYPE HTML>
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Saving Stranded Whales</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/custom.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo.svg" alt="" /></span>
<h1>期末報告</h1>
<p>鯨豚擱淺救援 <br />
built by <a href="https://github.com/ChiangHaoWei/Cetacean_Biology_Final_Project">@Orca班 第四組</a> for <a href="https://github.com/ChiangHaoWei/Cetacean_Biology_Final_Project">鯨豚保育生物學</a>.</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#first">鯨豚擱淺現況</a></li>
<li><a href="#second">鯨豚擱淺案件</a></li>
<li><a href="#third">鯨豚擱淺原因</a></li>
<li><a href="#forth">幫助擱淺的鯨豚</a></li>
<li><a href="#cta">Game Started</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Introduction</h2>
</header>
<p>根據許多資料顯⽰，全球的擱淺鯨豚數量逐年上升，⽽我們居住的台灣也不例外，
究竟鯨豚為何會擱淺？遇到擱淺鯨豚時，我們⼜該如何處理和幫助他們呢？
此網站內整理並回顧了相關的⽂獻，請⼤家仔細瀏覽，並透過⼩遊戲加深印象吧！</p>
<ul class="actions">
<li><a href="index_unity.html".html" class="button">直接玩遊戲</a></li>
</ul>
</div>
<span class="image"><img src="images/save_the_whale.jpg" alt="" /></span>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
<h2>各地區鯨豚擱淺現況</h2>
</header>
<p>根據目前各地區的相關新聞報導與研究，世界各地區的鯨豚擱淺事件都有逐漸增加的趨勢，以下就以台灣為例。</p>
<div class="row" id="map-option">
<div class="col-3 col-4-large col-12-medium">
<select name="classify-category" id="classify-category" onchange="handleSelectChange()">
<option value="">- Category -</option>
<option value="year">Years</option>
<option value="month">Months</option>
<option value="season">Seasons</option>
</select>
</div>
<div class="col-9 col-8-large col-12-medium"></div>
<div id="spacing-top" class="col-12"></div>
<div id="spacing-down" class="col-12"></div>
</div>
<div id="map_tw" style="width: 50%;max-width: 50%;"></div>
<p style="margin-top: 20px;">資料來源： <a href="http://www.whale.org.tw/index.php">中華鯨豚協會網站</a></p>
<footer class="major">
<ul class="actions special">
<li><a href="current_situation.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special">
<header class="major">
<h2>近年發生之鯨豚擱淺案件</h2>
</header>
<p>近年來不管是國內還是國外接發生了許多鯨豚擱淺案件，下圖為近兩年愛爾蘭附近海域所發生的鯨豚擱淺案件。</p>
<!-- <svg width="1000px" height="600px"></svg> -->
<div id="map_irish" style="width: 50%;max-width: 50%;"></div>
<p style="margin-top: 20px;">資料來源： <a href="https://iwdg.ie/">Irish Whale and Dolphin Group</a></p>
<footer class="major">
<ul class="actions special">
<li><a href="cases.html".html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
<h2>鯨豚擱淺原因</h2>
</header>
<p>不論健康或是不健康個體都有可能擱淺，且擱淺後可能因過熱、溺水、循環速度下降等原因而死亡（Hobson, 2021）。擱淺事件又可分成單獨與集體擱淺，其中單獨個體較常發生，通常認為是因嚴重疾病而造成，而大推模的擱淺則可能因為物理條件（天氣、潮汐、海流、地形等）、生物條件（捕食者、獵物、回聲定位干擾、相關疾病感染等）以及兩者的交互作用導致，另外大腦皮層下區域受壓力時，也可能刺激鯨豚上岸尋求庇護（Cordes, 1982），也有研究指出當太陽風增強影響地球磁場時，也可能與鯨豚擱淺相關（Vanselow et al. 2018）。除了上述中的自然因素，尚有許多會造成鯨豚擱淺的人為因素：</p>
<ul class="features">
<li>
<div class="icon major">
<span class="icon-image"><img src="images/cartnoon_fishing_new.jfif" alt="" /></span>
</div>
<h3>漁業干擾</h3>
<p>包含了船隻撞擊、漁民誤捕</p>
</li>
<li>
<div class="icon major">
<span class="icon-image"><img src="images/sonar_noise_whale.jpg" alt="" /></span>
</div>
<h3>軍事聲納影響</h3>
<p>軍事聲納對於他們來說就如同高分貝的噪音</p>
</li>
<li>
<div class="icon major">
<span class="icon-image"><img src="images/trash_whale.jpg" alt="" /></span>
</div>
<h3>海洋廢棄物污染</h3>
<p>目前大多數擱淺的鯨豚體內都含有大量的人造垃圾</p>
</li>
</ul>
<footer class="major">
<ul class="actions special">
<li><a href="reason.html" class="button">Learn More</a></li>
</ul>
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
<h2>如何減少並幫助擱淺鯨豚</h2>
</header>
<p>當遇到還存活的鯨豚時，除了撥打海巡署的「118」專線、中華鯨豚協會的「0928-539-977」鯨豚擱淺通報專線之外，根據中華鯨豚協會的教學，在現場我們也能夠以「三要四不原則」為鯨豚做緊急的處理。（參考資料：<a href="http://www.whale.org.tw/index.php">中華鯨豚協會網站</a> ）</p>
<div class="caution-box">
<div class="title">三要</div>
<ui class="features">
<li>
<span class="subtitle">要扶正</span>
<p>將鯨豚調整至頭部朝向岸邊，身體垂直於海浪的位置，且將其扶正到背鰭與呼吸孔朝上的姿勢，同時注意海水不超過眼睛高度與漲退潮，移動鯨豚時注意將其胸鰭貼近腹部避免受傷。若是情況許可，可在鯨豚下方挖洞並擺放防水布，以減輕擱淺個體器官受到其自身體重的壓迫。</p>
</li>
<li>
<span class="subtitle">要保濕</span>
<p>使用毛巾等覆蓋鯨豚，優先覆蓋背鰭與尾鰭，同時避開呼吸孔位置。以乾淨海水澆淋鯨豚身體，切記勿讓海水、砂石等直接進入呼吸孔。</p>
</li>
<li>
<span class="subtitle">要記錄呼吸心跳</span>
<p>觀察呼吸孔的閉合，當氣孔閉合後開始計時5分鐘，將手掌輕壓於左側胸鰭下方內部的位置，計算一分鐘內的心跳次數，且每30分鐘測量和紀錄。</p>
</li>
</ui>
<hr />
<div class="title">四不要</div>
<div class="box alt">
<div class="row gtr-uniform">
<div class="col-6 card">
<span class="subtitle">不要讓鯨豚風吹日曬</span>
<p class="discription">以布覆蓋、撐傘等避免太陽日曬，另也以物品擋風，配合持續澆灌乾淨海水。</p>
</div>
<div class="col-6 card">
<span class="subtitle">不要太靠近鯨豚頭部與尾部</span>
<p class="discription">避免受利齒、尾部拍擊所傷。</p>
</div>
<div class="col-6 card">
<span class="subtitle">不要拖拉、翻滾鯨豚身體</span>
<p class="discription">使用床單、擔架等幫助搬運和移動鯨豚，扶正後就不要任意翻滾鯨豚。</p>
</div>
<div class="col-6 card">
<span class="subtitle">不要喧譁</span>
<p class="discription">隔離群眾、減少噪音以降低擱淺個體的緊迫。</p>
</div>
</div>
</div>
</div>
</section>
<!-- Get Started -->
<section id="cta" class="main special">
<header class="major">
<h2>簡單小遊戲</h2>
<p>看完了前面鯨豚擱淺的資料，想必你對於鯨豚擱淺有一定的了解了，那麼不妨就透過這個簡單的遊戲幫助你加深印象吧！</p>
</header>
<footer class="major">
<ul class="actions special">
<li><a href="index_unity.html" class="button primary">Get Started</a></li>
<li><a href="https://drive.google.com/drive/folders/1NeISIolZ8QkAJ3TNb0xY64VZAuPcvzjX?usp=sharing" class="button">Download Game</a></li>
</ul>
</footer>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div style="width: 100%;">
<h2>About us</h2>
<div class="team-member">
<dl class="alt" style="width: 50%;">
<dt>陳銘杰</dt>
<dd>影片腳本、拍攝</dd>
<dt>鍾宜安</dt>
<dd>網站資料收集與彙整</dd>
<dt>陳矩仁</dt>
<dd>遊戲劇本構想</dd>
</dl>
<dl class="alt" style="width: 50%;">
<dt>江浩瑋</dt>
<dd>遊戲製作與網站架設</dd>
<dt>劉映辰</dt>
<dd>影片剪輯</dd>
<dt>陳芷晴</dt>
<dd>遊戲素材蒐集</dd>
</dl>
</div>
</div>
<div>
<ul class="icons">
<li><a href="https://html5up.net" class="icon brands fa-html5 alt"><span class="label">HTML5</span></a></li>
<li><a href="https://www.facebook.com/tcstcswhale" class="icon brands fa-facebook-f alt"><span class="label">Facebook</span></a></li>
<li><a href="https://github.com/ChiangHaoWei/Cetacean_Biology_Final_Project" class="icon brands fa-github alt"><span class="label">GitHub</span></a></li>
<li><a href="https://www.oca.gov.tw/ch/home.jsp?id=189&parentpath=0,6,185" class="icon brands fa-dribbble alt"><span class="label">Dribbble</span></a></li>
<li><a href="https://unity.com/" class="icon brands fa-unity alt"><span class="label">unity</span></a></li>
</ul>
</div>
<p class="copyright">© ChiangHaoWei. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/mapdata_irish.js"></script>
<script src="assets/js/countrymap_irish.js"></script>
<script type="text/javascript">
var irish_map = simplemaps_countrymap.create()
</script>
<script src="assets/js/mapdata.js"></script>
<script src="assets/js/countrymap.js"></script>
<script type="text/javascript">
var tw_map = simplemaps_countrymap.create()
</script>
<script src="assets/js/map_control.js"></script>
<!-- <script src="assets/js/drawMap.js"></script> -->
</body>
</html>