-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
155 lines (136 loc) · 7.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Ocean Commitments</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://playground.qlik.com/showcase/resources/autogenerated/qlik-styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script src="resources/overlay.js"></script>
</head>
<body>
<div id="qOverlay" class="overlay">
<div class="container-fluid">
<div class="row overlay-content">
<div class="col col-md-2">
<img class="overlay-icon" src="resources/images/logo.png">
</div>
<div class="col col-md-10 overlay-text">
<h1 class="oswald text-center">GOAL 14</h1>
<h2 class="capitalized oswald">conserve and sustainbly use the oceans, seas and marine resources for sustainable development</h2>
<h2>How are you helping #saveourocean?</h2>
<p>The world's oceans drive global systems that make earth a habitable place for humankind. Careful management of our oceans is key to leading a sustainable future. Everyone is giving a hand – individually or in partnership.What are the committments by ocean basins? Which countries are involved? What type of organization are contributing?</p>
<p>Explore the voluntary commitments that aim to contribute to the implementation of <a href="http://www.un.org/sustainabledevelopment/oceans/" target="_blank">GOAL 14</a>.</p>
<div onclick="closeOverlay()" class="arrow animated bounce">
<p style="margin-left: -8%; position: absolute; margin-top: -5%;">
<!---
<span class="badge badge-info">Scroll Down</span>
--->
</p>
<img width="50" height="50" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyDQoJbDE4OS45OTktMTkwYzIwLjE3OC0yMC4xNzgsNTMuMTY0LTE5LjkxMyw3My42NzIsMC41OTVsMCwwYzIwLjUwOCwyMC41MDksMjAuNzcyLDUzLjQ5MiwwLjU5NSw3My42NzFMMjkzLjc1MSw0NTUuODY4eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIyMC4yNDksNDU1Ljg2OGMyMC4xOCwyMC4xNzksNTMuMTY0LDE5LjkxMyw3My42NzItMC41OTVsMCwwYzIwLjUwOS0yMC41MDgsMjAuNzc0LTUzLjQ5MywwLjU5Ni03My42NzINCglsLTE5MC0xOTBjLTIwLjE3OC0yMC4xNzgtNTMuMTY0LTE5LjkxMy03My42NzEsMC41OTVsMCwwYy0yMC41MDgsMjAuNTA5LTIwLjc3Miw1My40OTItMC41OTUsNzMuNjcxTDIyMC4yNDksNDU1Ljg2OHoiLz4NCjwvc3ZnPg0K" />
</div>
</div>
</div>
</div>
<div class="overlay-image"></div>
</div>
<div class="header">
<div class="header-content">
<img class="header-icon" src="resources/images/logo.png">
</div>
</div>
<button class="question-mark-button" onClick="openOverlay()"><img src="resources/images/question-mark.png" class="question-mark" /></button>
<div class="row">
<div class="col-md-8">
<h1 class="oswald map-title"> Volunteer <br/> Commitments </h1>
</div>
<div class="col-md-4" style="margin-left:-50px;">
<h1 class="oswald"> Sustainable Developent Goals </h1>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div id="map">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<p class="center"> Explore the UN Member States, broader community and oceans to see who has volunteered to meet the various commitments for SDG14 and see what those specific commitments are. </p>
</div>
<div class="col-md-3"></div>
</div>
<div class="container-fluid">
<div id="mapid"></div>
</div>
</div>
</div>
<div class="col-md-4" style="margin-left:-50px">
<div id="svg">
<p class="center"> Sustainable Development Goals are categories chosen by the UN to focus commitments. <br /> Click on the categories to filter.</p>
<div id="targets" class="kpiAlignment"> </div>
<div id="showEnities"></div>
</div>
</div>
<div>
</div>
<div class="filters">
<span class="oswald filters-title"> Filters </span>
<span id="filters-bar-style"></span>
<div id="filters-bar">
</div>
<span id="commitment-count" class="filters-title">Commitments:
<span id="commitments"></span>
</span>
<button type="button" class="btn btn-info" onclick="clearState()">Clear Selections</button>
</div>
<div class="container list-container">
<h1 class="oswald">Lead Entity Types</h1>
<div class="list-group" id="leadEntityTypeList">
</div>
</div>
<div class="container list-container">
<h1 class="oswald">Lead Entities</h1>
<div class="list-group" id="leadEntityList">
</div>
</div>
<div class="container list-container">
<h1 class="oswald"> Commitments </h1>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<p class="center"> The specific commitments of the UN Member States and broader community. </p>
</div>
<div class="col-md-3"></div>
</div>
<div class="list-group" id="commitmentList">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://playground.qlik.com/showcase/resources/assets/external/requirejs/require.js"></script>
<!-- <script type="text/javascript" src="/node_modules/playground-js-api/dist/playground-js-api.min.js"></script> -->
<script type="text/javascript" src="/resources/mapHyperCube.js"></script>
<script type="text/javascript" src="/resources/script.js"></script>
<script type="text/javascript" src="/resources/map.js"></script>
<script type="text/javascript" src="/resources/filter.js"></script>
<script type="text/javascript" src="/resources/filterBarCube.js"></script>
<script type="text/javascript">
main();
</script>
</body>
</html>