-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathso-sbs.html
executable file
·125 lines (106 loc) · 6.64 KB
/
so-sbs.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
<!DOCTYPE HTML>
<html>
<head>
<title>IUU Fishing Risk-Assessment Tool</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.typeahead.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- JavaScript -->
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>
<!-- <script src="js/popper.min.js"></script> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" id="title">
<h1>IUU Fishing Risk Assessment Tool</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" id="command">
<h1>Enter the species of fish and location you are interested in fishing in.</h1>
</div>
</div>
<div class="row" id="searchFields">
<div class="col-md-4">
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<label for="species">Species</label>
<input id="species" type="search" autocomplete="off">
<small class="form-text text-muted">Enter the species of fish you wish to search for.</small>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<label for="country">Country</label>
<input id="country" type="search" autocomplete="off">
<small class="form-text text-muted">Enter the country you'd like to fish in.</small>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<input id="button" type="submit" class="btn btn-secondary"></button>
</div>
</div>
<div class="row" id="risks">
<div class="col-md-8" id="mapWrapper">
<div id="map"></div>
</div>
<div class="col-md-4" id="button">
<h1>Risk: <button type="button" class="btn btn-inline btn-danger">HIGH</button></h1>
<!-- Case One -->
<p>Based on the selections you made, the risk associated with this region is high. </p>
<p>This region is guilty of committing numerous human rights abuses and having high levels of governmental corruption, making the possibility of future instances of these problems likely. In this region, the level of black market activity is high and the amount of governmental regulation is low. </p>
<p>In addition, there have been instances in this region of the fish being subjected to instances of overfishing, pollution, and IUU offenses in recent history. The operations of vessels from nearby suppliers are a cause for concern as well. </p>
<p>In short, continuing to fish in this area is strongly discouraged for the current time and in future cases. </p>
</div>
</div>
</div>
<script>
$('#species').typeahead({
minLength: 2,
source: [ "Atlantic Cod", "Atlantic Halibut", "Blue Crab (Atlantic)", "Dolphinfish (Mahi Mahi)", "Grouper (Caribbean)", "King Crab (red)", "Pacific Cod Red Snapper (Atlantic)", "Yellowtail Flounder", "Sandbar Sharks", "Red Porgy", "Pink Shrimp (Atlantic)", "Albacore Tuna", "Bigeye Tuna", "Skipjack Tuna", "Yellowfin Tuna", "Bluefin Tuna", "Spotted Bass", "White Catfish", "Grass Carp", "Cresthead Flounder", "Cero Mackerel", "Black Marlin", "White Perch", "Atlantic Salmon", "Sockeye Salmon","Pink Salmon", "Bull Trout", "Rainbow Trout", "Tarpon"]
});
$('#country').typeahead({
minLength: 2,
source: [ "New Zealand", "Denmark", "Finland", "Sweden", "Switzerland", "Norway", "Singapore", "Netherlands", "Canada", "Germany", "Luxembourg", "United Kingdom", "Australia", "Iceland", "Hong Kong", "Belgium", "Austria", "The United States of America", "Ireland", "Japan", "Uruguay", "Estonia", "France", "Bahamas", "Chile", "United Arab Emirates", "Bhutan", "Israel", "Poland", "Portugal", "Barbados", "Taiwan", "Qatar", "Slovenia", "Saint Lucia", "Saint Vincent and The Grenadines", "Botswana", "Dominica", "Cape Verde", "Lithuania", "Costa Rica", "Brunei", "Spain", "Georgia", "Latvia", "Grenada", "Cyprus", "Czech Republic", "Malta", "Mauritius", "Rwanda", "Korea (South)", "Namibia", "Slovakia", "Malaysia", "Croatia", "Jordan", "Hungary", "Romania", "Cuba", "Italy", "Saudi Arabia", "Sao Tome and Principe", "Suriname", "Montenegro", "Oman", "Senegal", "South Africa", "Greece", "Bahrain", "Ghana", "Solomon Islands", "Serbia", "Burkina Faso", "Turkey", "Kuwait", "Tunisia", "Bulgaria", "Brazil", "China", "India", "Belarus", "Jamaica", "Albania", "Bosnia and Herzegovina", "Lesotho", "Panama", "Mongolia", "Zambia", "Colombia", "Indonesia", "The FYR of Macedonia", "Morocco", "Liberia", "Argentina", "El Salvador", "Maldives", "Sri Lanka", "Kosovo", "Benin", "Peru", "Trinidad and Tobago", "Philippines", "Thailand", "Timor-Leste", "Gabon", "Niger", "Guyana", "Algeria", "Egypt", "Côte d’Ivoire", "Ethiopia", "Bolivia", "Vietnam", "Armenia", "Pakistan", "Mali", "Tanzania", "Togo", "Dominican Republic", "Ecuador", "Malawi", "Honduras", "Mexico", "Paraguay", "Laos", "Azerbaijan", "Moldova", "Djibouti", "Sierra Leone", "Nepal", "Kazakhstan", "Russia", "Ukraine", "Iran", "Guatemala", "Myanmar", "Papua New Guinea", "Kyrgyzstan", "Lebanon", "Nigeria", "Guinea", "Mauritania", "Mozambique", "Nicaragua", "Bangladesh", "Cameroon", "Gambia", "Kenya", "Madagascar", "Tajikistan", "Uganda", "Comoros", "Turkmenistan", "Zimbabwe", "Cambodia", "Uzbekistan", "The Democratic Republic of Congo", "Haiti", "Burundi", "Central African Republic", "Chad", "Republic of Congo", "Angola", "Eritrea", "Venezuela", "Iraq", "Guinea-Bissau", "Afghanistan", "Libya", "Yemen", "Sudan", "Syria", "Korea (North)", "South Sudan", "Somalia"]
});
</script>
<script>
function initMap() {
var country = "Sudan";
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1
});
geocoder.geocode( {'address' : country}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
}
function somalia(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address' : "Somalia"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC7nrWmeyQ6BsCv1jZLCckO02FBqQHFUg&callback=initMap"></script>
<!-- -->
</body>
</html>