-
Notifications
You must be signed in to change notification settings - Fork 1
/
profile_game4A.html
311 lines (275 loc) · 17.6 KB
/
profile_game4A.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>Bu Virtual Habitat</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="shortcut icon" href="favicon.png">
<link href="//fonts.googleapis.com/css?family=Comfortaa:300,400,700|News+Cycle:400,700|Oswald" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<link rel="stylesheet" href="js/vendor/animsition-master/dist/css/animsition.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="js/vendor/slick-1.8.0/slick/slick-theme.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="js/vendor/select2-develop/dist/css/select2.min.css">
<link rel="stylesheet" href="js/vendor/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css">
<!-- script src="//use.typekit.net/xjn7mvl.js"></script-->
<!-- script>try{Typekit.load({ async: true });}catch(e){}</script-->
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/static.css" rel="stylesheet">
<link href="css/style_theme2.css" rel="stylesheet">
<link href="css/style_mobile.css" rel="stylesheet">
</head>
<body id="profile">
<div class="animsition">
<header>
<div class="container clearfix">
<div class="top-nav">
<ul class="list-inline mainMenu clearfix">
<li class="lang-opt hidden-xs"><div class="dropdown">
<div data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="current_lang"></span>
<span class="icon-r"><img src="images/common/icon-lang.svg"></span>
</div>
<ul class="dropdown-menu select-language" aria-labelledby="dLabel"></ul>
</div>
</li>
<li class="logo-core text-center"> <a href="index.html" class="logo"><img src="images/common/logo.svg" class="img-fluid"></a></li>
<li class="text-right widget-social hidden-xs">
<a href=""><img src="images/common/icon-facebook.svg" class="svg img-fluid"></a>
<a href=""><img src="images/common/icon-instagram.svg" class="svg img-fluid"></a>
</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#login-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<hr>
<nav class="navbar-menu">
<div class="collapse navbar-collapse" id="login-menu">
<ul class="nav-menu">
<li class="">
<a href="about.html" class="nav1"></a>
</li>
<!-- 3 -->
<li class="">
<a href="hall.html" class="nav2"></a>
</li>
<!-- 4 -->
<li class="">
<a href="faq.html" class="nav3"></a>
</li>
<!-- 5 -->
<li class="">
<a href="news.html" class="nav4"></a>
</li>
<!-- 6 -->
<li class="active">
<a href="memberLogin.html" class="nav5"></a>
</li>
<!-- 7 -->
<li>
<a href="contact.html" class="nav6"></a>
</li>
<li class="booking">
<a class="btn theme6" href="booking.html">
<span class="icon">
<img src="images/common/icon-calendar2.svg" class="svg img-fluid">
</span>
<span class="nav7"></span>
</a>
</li>
<ul class="lang-btn clearfix select-language" aria-labelledby="dLabel">
<li><img src="images/common/icon-lang.svg"></li>
<li>繁</li>
<li>簡</li>
</ul>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</header>
<div class="section-profile" id="vue_app">
<div class="session-myprofile">
<div class="pos-grid">
<div class="container">
<div class="title">{{lang.member_landing.hello}}, {{user.username}}</div>
<div class="info">
{{lang.member_landing.score}}:33333 | <span class="icon"><img src="images/common/icon-clock.svg"></span> {{lang.member_landing.last_update}}: {{user.created_at}}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br class="hidden-xs">Aenean commodo ligula eget dolor.</p>
</div>
<ul class="btn-wrapper">
<li><a href="memberLanding.html" class="btn theme1"><span class="icon"><img src="images/common/icon-foot.svg" class="img-fluid"></span>{{lang.member_landing.my_footprint}}</a></li>
<li><a href="" class="btn link"><span class="icon"><img src="images/common/icon-profile.svg" class="img-fluid"></span>{{lang.member_landing.my_account}}</a></li>
</ul>
</div>
</div>
<img src="images/profile/profileBgT.jpg" class="img-full hidden-xs">
<img src="images/profile/profileBgTm.jpg" class="img-full visible-xs">
</div>
<div class="section-profileCon">
<div class="container">
<div class="top-nav text-center">
<ul class="widget-submenu hidden-xs clearfix">
<li><a href="profile.html">{{lang.member_landing.coll1}}</a></li>
<li><span>|</span></li>
<li><a href="profile_game2.html">{{lang.member_landing.coll2}}</a></li>
<li><span>|</span></li>
<li><a href="profile_game3.html">{{lang.member_landing.coll3}}</a></li>
<li><span>|</span></li>
<li class="active"><a href="profile_game4.html">{{lang.member_landing.coll4}}</a></li>
<li><span>|</span></li>
<li><a href="profile_game5.html">{{lang.member_landing.coll5}}</a></li>
</ul>
<div class="visible-xs">
<div class="widget-dd dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{lang.member_landing.coll4}}<i class="icon fa fa-angle-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu widget-option" aria-labelledby="dLabel">
<li data-value="Virtual habitat"><a href="profile.html">{{lang.member_landing.coll1}}</a></li>
<li class="active" data-value="Pokemon go game"><a href="profile_game2.html" >{{lang.member_landing.coll2}}</a></li>
<li data-value="有機耕種技術農夫"><a href="profile_game3.html">{{lang.member_landing.coll3}}</a></li>
<li data-value="錦囊集"><a href="profile_game4.html">{{lang.member_landing.coll4}}</a></li>
<li data-value="購物車"><a href="profile_game5.html">{{lang.member_landing.coll5}}</a></li>
</ul>
</div>
</div>
</div>
<div class="game-profile section1">
<div class="game4-list innerPage clearfix">
<div class="game-descpt clearfix">
<div class="col-xs-12 col-sm-3 title">
<div class="item">
<div class="icon"><img src="images/profile/icon-global.svg" class="img-fluid"></div>
</div>
</div>
<div class="col-xs-12 col-sm-9 paragraph clearfix">
<a href="profile_game4.html" class="pull-right link"><span class="icon"><img src="images/profile/icon-close.svg" class="img-fluid"></span>返回</a>
<h1 class="title">Globalization 全球化與生物多樣性</h1> <p>全球化是一個令全球的消費和生產模式趨向單一化的過程。資訊科技和交通運輸的發達促使人類活動不再受地域限制，對經濟、政治、文化和自然環境等層面有深遠的影響，其中，對生態系統更造成不可逆轉的破壞，導致基因、物種以至生境多樣性的流失。</p>
</div>
</div>
<div class="detail">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel item1">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panelH" role="tab" id="headingOne">
<h4 class="panel-title">
基因多樣性的流失 <div class="press-btn"><img src="images/profile/button2.png" class="img-fluid"></div>
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
過去有大約7000種植物被用作人類食物，但城市化和現代營銷模式已經大大減少食物的種類，現時工業化農業為提高耕地環
境的穩定性及農作物的產量，利用化學肥料及殺蟲劑、除草劑，並選擇性種植具有商業價值的作物類別；畜牧業亦會對牲畜
注射抗生素、餵飼人工飼料，或進行育種、篩選及培養具備疾病抗性、環境適應能力或特性的品種，甚至選用基因改造品種
，導致基因多樣性流失。印度過去曾經種植超過30,000種的稻米品種，然而在過去數十年間已大幅減少，在2030年或之前甚
至可能減少至50種；目前世界上22%的家畜品系也正在面臨滅絕風險，而8%已經滅絕。
</div>
</div>
</div>
<div class="panel panel-default">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="panelH" role="tab" id="headingOne">
<h4 class="panel-title">
物種多樣性的流失 <div class="press-btn"><img src="images/profile/button2b.png" class="img-fluid"></div>
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
隨著因消費主義盛行而導致的過度開發天然資源（例如伐林、過度捕撈）、水或空氣污染等問題及氣候變化，不少原始棲息地消失，物種失去棲息地，瀕臨或已經絕種。另外加上生態旅遊的興起，人類與野生動物的接觸增加，疾病跨物種傳染的機會亦隨之增加。再者，因全球貿易及運輸而轉入的外來物種會引起捕食、競爭及排擠、疾病或寄生蟲的傳染、雜交的問題，以及改變生態系統，嚴重影響當地生態。科學家估計，我們現在正在以自然發生的背景數據的1000到10000倍地喪失物種，每天有多達幾十個物種滅絕，到本世紀中期，更多達30-50%的物種可能會滅絕。
</div>
</div>
</div>
<div class="panel panel-default">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<div class="panelH" role="tab" id="headingOne">
<h4 class="panel-title">
生境多樣性的流失 <div class="press-btn"><img src="images/profile/button2c.png" class="img-fluid"></div>
</h4>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
根據估計，到2032年地球表面的70%將受到干擾或破壞，原兇正是人類活動。其中包括闢地、填海以開發土地發展城市、砍伐林木、開採礦場及全球暖化等，令生境環境遭到改變、退化或破壞而消失。而且，城市建設時所鋪設的道路、鐵路亦會將自然生境分割成許多細小的區域，降低生境連接性，產生的邊緣效應。此令生境的物理、化學環境改變，更容易被進一步破壞。另外，全球在生產及運輸過程中所導致的空氣污染、水污染，都會對環境造成影響。例如船隻漏油污染海域，對海洋生態造成無法挽回的傷害
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="clearfix">
<div class="visible-xs widget-social">
<span class="lang_about_me"></span><br>
<ul>
<li><a href=""><img src="images/common/icon-facebook.svg" class="svg img-fluid"></a></li>
<li><a href=""><img src="images/common/icon-instagram.svg" class="svg img-fluid"></a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 widget-link lang_about_link">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div class="hidden-xs col-sm-4 widget-social">
<span class="lang_about_me"></span><br>
<ul>
<li><a href=""><img src="images/common/icon-facebook.svg" class="svg img-fluid"></a></li>
<li><a href=""><img src="images/common/icon-instagram.svg" class="svg img-fluid"></a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 widget-contact">
<ul>
<li><span class="lang_footer_addr_label"></span> : <span class="lang_footer_addr_value"></span></li>
<li><span class="lang_footer_opentime_label"></span> : <span class="lang_footer_opentime_value"></span></li>
<li><span class="lang_footer_phone_label"></span> : <span class="lang_footer_phone_value"></span></li>
<li><span class="lang_footer_email_label"></span> : <span class="lang_footer_email_value"></span></li>
</ul>
</div>
</div>
<div class="copyright text-center lang_footer_copyright"></div>
</div>
</footer>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/vendor/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="js/vendor/waypoint/waypoints.min.js"></script>
<script src="js/vendor/select2-develop/dist/js/select2.min.js"></script>
<script src="//unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="js/vendor/animsition-master/dist/js/animsition.js"></script>
<script src="js/vendor/jquery-match-height-master/jquery.matchHeight.js"></script>
<script src="js/vendor/backstretch/jquery.backstretch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script src="js/vendor/masonry-docs/masonry.pkgd.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script src="js/script.js"></script>
<script src="js/language.js"></script>
<script src="js/jsProfile4A.js"></script>
</body>
</html>