This repository has been archived by the owner on Oct 23, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (134 loc) · 6.65 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
<html lang="en" class="no-js html-blank">
<head>
<meta charset="utf-8">
<title>Global Rare eBird | Zoziologie</title>
<meta name="description" content="My personal website for bird related stuff.">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_GB">
<meta property="og:site_name" content="Zoziologie">
<meta property="og:title" content="Global Rare eBird">
<meta property="og:url" content="http://localhost:4000/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<!-- Main Plugins -->
<script src="https://kit.fontawesome.com/f15ed359e8.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" type="text/javascript">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
type="text/css">
<!-- Leaflet Plugins -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"
integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA=="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-makimarkers@3.1.0/Leaflet.MakiMarkers.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"
type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.10.2/leaflet-providers.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
<script src="./script.js" type="text/javascript"></script>
<link href="./style.css" type="text/css" rel="stylesheet">
<script src="/token.js" type="text/javascript"></script>
</head>
<body class="layout--blank modal-open">
<div class="initial-content">
<div class="d-flex h-100">
<div id="sidebar" class="d-flex flex-column h-100 collapse show">
<div id="sidebar-header" class="d-flex flex-row">
Global Rare eBird
</div>
<!--<div class="section-instruction"><b>Instruction.</b> View rare bird from eBird data</div>-->
<div class="input-group input-group-sm" id="search-country">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<select class="form-control" id="countrySelect">
<option selected disabled value="0">Add a country...</option>
</select>
</div>
<div class="country-added-div"><b>Countries added: </b></div>
<div class="country-added-link">
<a href="#" class="badge badge-secondary cursor-pointer" onclick='copyURL();return false;'>
<i class="fas fa-paperclip"></i> Copy url
</a>
<a href="#" class="badge badge-secondary"
onclick='window.location = window.location.pathname;return false;'>
<i class="fas fa-trash"></i> Remove all
</a>
</div>
<div class="form-inline" id="filter">
<b>Filter: </b>
<div class="form-group">
<label for="formControlRange"><span id="range-value">5 </span>days ago</label>
<input type="range" class="form-control-range" id="formControlRange" min="0" max="30" value="5">
<label><input type="checkbox" id="camera"><i class="fas fa-lg fa-camera obs-icon"></i></label>
</div>
<div class="form-group" id="filter-specie-gr">
<select class="form-control form-control-sm" id="filter-specie">
<option selected value="0">All species</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-sm" id="sort-date"><i class="fas fa-sort"></i> Date</button>
<button class="btn btn-sm" id="sort-specie"><i class="fas fa-sort"></i> Specie</button>
</div>
</div>
<div class="row-obs" id="app-obs">
</div>
<div class="d-flex bottom">
Powered by <a href="https://zoziologie.raphaelnussbaumer.com/" target="_blank">
<img src="/assets/logo.png" id="log-bird" height=30>
</a>
<!--<a href="https://github.com/Zoziologie/GlobalRareeBird"><i class="fab fa-github"></i></a>-->
</div>
</div>
<!--<div class="collapse-sidebar">
<button class="collapse-sidebar-button" data-toggle="collapse" href="#sidebar" data-toggle="tooltip" data-placement="right" title="Collapse panel"> <i id="caret" class="fas fa-caret-left"></i></button>
</div>-->
<div class="h-100 flex-grow-1">
<div id="map"></div>
<div id="mymodal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--<div class="modal-header">
<h4 class="modal-title">Loading Data</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
-->
<div class="modal-body">
<i class="fas fa-3x fa-circle-notch fa-spin" id="waait"></i><br>
<span id="loading">Loading...</span><br>
<span id="ebirddata" display="none;">...eBird data...</span><br>
<span id="markeronmap" display="none;">...and markers on map.</span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
</body>
</html>