-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (152 loc) · 6.96 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="vendor/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="vendor/jquery-mobile-bower/css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script data-main="js/main" src="vendor/requirejs/require.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<p class="app-title">OpenWildlife</p>
</div>
<div data-role="content" id="map-page">
<div id="map"></div>
</div>
<div data-role="footer">
<div data-role="popup" id="no-more-records-popup">
<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>There are no more records to add</p>
</div>
<div data-role="popup" id="no-location-popup" class="random-reserve-popup">
<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<h4 id='welcome-message'>Welcome</h4>
<p><span class='app-highlight'>OpenWildife</span> can't find your location, so here is a random nature reserve instead</p>
<h4><span id='random-reserve-name'/></h4>
</div>
<div data-role="navbar" data-grid="d">
<ul>
<li><a href="#app-info" id='info' data-role="button" data-inline="true" data-icon="info" data-iconpos="top" class="footer-menu">Info</a></li>
<li><a href="#settings" data-role="button" data-inline="true" data-icon="gear" data-iconpos="top" class="footer-menu">Settings</a></li>
<li><a href="#" id='geolocate-button' data-role="button" data-inline="true" data-icon="navigation" data-iconpos="top" class="footer-menu">My Location</a></li>
<li><a href="#summary" id='summary-button' data-role="button" data-inline="true" data-icon="action" data-iconpos="top" class="footer-menu">Summary</a></li>
<li><a href="#" id='add-more-records' data-role="button" data-inline="true" data-icon="plus" data-iconpos="top" class="footer-menu">Records</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="settings" data-theme="b">
<div data-role="header">
<a href='#index' data-icon="carat-l" class="ui-btn-left">Map</a>
<p class="app-title">Settings</p>
</div>
<div data-role="content">
<form>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="flip-names">Species name preference:</label>
<div class="settings-input">
<input type="checkbox" data-role="flipswitch" name="flip-name" id="flip-name" checked="" data-on-text="Scientific" data-off-text="Common" data-wrapper-class="names-flipswitch">
</div>
</li>
<li class="ui-field-contain">
<label for="slider-year">Start year:</label>
<input type="range" name="slider-year" id="slider-year" value="1900" min="1900" max="2015">
</li>
<li class="ui-field-contain">
<label for="taxon-group">Limit to a species group:</label>
<select name="taxon-group" id="taxon-group">
<option value="">All species</option>
<option value="131">Amphibians</option>
<option value="797">Butterflies and moths</option>
<option value="327,13,9,126,125">Bryophytes</option>
<option value="212">Birds</option>
<option value="1470">Beetles</option>
<option value="194">Conifers</option>
<option value="789">Dragonflies and damselflies</option>
<option value="120,121,204,239,357">Fishes</option>
<option value="220">Flowering plants</option>
<option value="5">Fungi</option>
<option value="1458">Grasshoppers and crickets</option>
<option value="216">Insects</option>
<option value="359">Mammals</option>
<option value="52">Molluscs</option>
<option value="715">Reptiles</option>
<option value="225">Slugs and snails</option>
<option value="1003,1225,787">River flies</option>
<option value="1496">Spiders</option>
</select>
</li>
</ul>
</form>
</div>
</div>
<div data-role="page" id="species-info-page" data-theme="b">
<div data-role="header">
<a href='#index' data-icon="carat-l" class="ui-btn-left">Map</a>
<p class="app-title">Species info</p>
</div>
<div data-role="content" class="species-info-content">
<h3 id="species-name-title"></h3>
<span id="species-info-date"></span><br/><br/>
<div class="compensate-for-jqm-listview-negative-margin">
<span id="species-name-intro"></span> has observations at this location from the following datasets:
</div>
<div id="dataset-info"></div>
</div>
</div>
<div data-role="page" id="app-info" data-theme="b">
<div data-role="header">
<a href='#index' data-icon="carat-l" class="ui-btn-left">Map</a>
<p class="app-title">Info</p>
</div>
<div data-role="content">
<p><span class="app-highlight">OpenWildlife</span> has been built to help you find out what plants and animals have been observered near you or anywhere.</p>
<p>It is powered by the data services of the Global Biodiversity Information Facility (GBIF). These services give access to the millions of wildlife observations throughout the world that data owners have made <span class="app-highlight">openly</span> and freely available.</p>
</div>
</div>
<div data-role="page" id="summary" data-theme="b">
<div data-role="header">
<a href='#index' data-icon="carat-l" class="ui-btn-left">Map</a>
<p class="app-title">Summary</p>
</div>
<div data-role="content">
<p>There are <span id='summary-num-markers'></span> placemarkers on your map containing <span id='summary-num-species'></span> species from <span id='summary-earliest-rec'></span> to <span id='summary-latest-rec'></span>.</p>
<p>Your map has <span id='summary-percentage-recs'></span>% (<span id='summary-num-recs'></span>) of the sightings available from Gbif for the area shown.
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4><span id='summary-species-title'/></h4>
<table id='top-ten-species' class='summary-table'>
<thead>
<tr>
<th>Species</th>
<th>Num records</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4>Species groups</h4>
<table id='species-group-summary' class='summary-table'>
<thead>
<tr>
<th><span id=''>Group</span></th>
<th>Num species</th>
<th>Num records</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4>Datasets</h4>
<div id='summary-datasets' />
</div>
</div>
</div>
</body>
</html>