-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (237 loc) · 16.5 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
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
---
layout: default
---
<div class="container my-4 my-sm-5 my-lg-6">
<h1 class="mw-50rem mb-3 mb-lg-4 lh-1">Has your council declared a nature emergency?</h1>
<p class="mw-40rem fs-5">We are in a nature emergency. The four nations of the UK are among the most nature-depleted in the world, with 35% of species populations in decline and 13% under threat of extinction.</p>
<p class="mw-40rem fs-5 mb-0">But there’s hope. By working together, we can turn the tide to restore habitats, improve biodiversity, and better connect landscapes. Together, we can protect wildlife and create a brighter, healthier future for nature and our communities.</p>
</div>
<div class="bg-light py-4 py-sm-5 py-lg-6 my-4 my-sm-5 my-lg-6">
<div class="container">
<h2 class="mw-40rem mb-3 mb-lg-4 lh-1">We’re urging all local authorities to declare a nature emergency</h2>
<p class="mw-40rem">To help nature recover, we all need to play our part—and local councils hold the power to drive the change nature urgently needs. Alongside local communities working to protect and restore nature, a growing number of local authorities are declaring nature emergencies. This is an important first step in acknowledging the challenge.</p>
<p class="mw-40rem">To demonstrate commitment to meaningful action for nature’s recovery, we want to see declarations supported by:</p>
<div class="my-4 mw-40rem d-flex gap-3 flex-column">
<div class="d-flex gap-3 align-items-center">
{% include images/priority-1.svg classes="text-priority-1 mt-n2 mb-2 mb-sm-n2 flex-grow-0 flex-shrink-0" width="60" height="60" %}
<p class="fs-5 lh-md mb-0">development of a nature emergency action plan</p>
</div>
<div class="d-flex gap-3 align-items-center">
{% include images/priority-2.svg classes="text-priority-2 mt-n2 mb-2 mb-sm-n2 flex-grow-0 flex-shrink-0" width="60" height="60" %}
<p class="fs-5 lh-md mb-0">nature’s recovery being embedded into plans and policies</p>
</div>
<div class="d-flex gap-3 align-items-center">
{% include images/priority-3.svg classes="text-priority-3 mt-n2 mb-2 mb-sm-n2 flex-grow-0 flex-shrink-0" width="60" height="60" %}
<p class="fs-5 lh-md mb-0">plans to manage 30% of council land for nature recovery by 2030</p>
</div>
</div>
<p class="mw-40rem mb-0">These actions were chosen by a panel of environmental organisations as the most meaningful indicators of nature recovery. See which local authorities have already made a declaration and taken these significant steps, below.</p>
</div>
</div>
<div class="container my-4 my-xl-5" id="councils">
<h2 class="mb-3 mb-lg-4">Browse the scores</h2>
<div class="scorecard">
<div class="scorecard__summary">
<div class="scorecard__summary__tile">
{% include images/leaf-0.svg classes="text-priority-0-200" %}
<div>
<strong class="d-block h1 lh-1">
<span id="scorecard-summary-ned">{{ site.data.councils|where: "ned", "1"|size }}</span>%
</strong>
<span class="scorecard__summary__tile__of-matches">of matching councils</span>
have declared a nature emergency
</div>
</div>
<div class="scorecard__summary__tile">
{% include images/leaf-1.svg classes="text-priority-1-200" %}
<div>
<strong class="d-block h1 lh-1">
<span id="scorecard-summary-priority-1">{{ site.data.councils|where: "priority_1", "1"|size }}</span>%
</strong>
<span class="scorecard__summary__tile__of-matches">of matching councils</span>
have {{ site.data.priorities["priority_1"].description_committed }}
</div>
</div>
<div class="scorecard__summary__tile">
{% include images/leaf-2.svg classes="text-priority-2-200" %}
<div>
<strong class="d-block h1 lh-1">
<span id="scorecard-summary-priority-2">{{ site.data.councils|where: "priority_2", "1"|size }}</span>%
</strong>
<span class="scorecard__summary__tile__of-matches">of matching councils</span>
have {{ site.data.priorities["priority_2"].description_committed }}
</div>
</div>
<div class="scorecard__summary__tile">
{% include images/leaf-3.svg classes="text-priority-3-200" %}
<div>
<strong class="d-block h1 lh-1">
<span id="scorecard-summary-priority-3">{{ site.data.councils|where: "priority_3", "1"|size }}</span>%
</strong>
<span class="scorecard__summary__tile__of-matches">of matching councils</span>
have {{ site.data.priorities["priority_3"].description_committed }}
</div>
</div>
</div>
<div class="scorecard__data">
<div class="scorecard__data__header">
<p class="h6 mb-0">
Showing <span id="scorecard-filtered-count">{{ site.data.councils|size }}</span> of {{ site.data.councils|size }} councils
</p>
<button class="btn btn-secondary d-flex align-items-center gap-2" type="button" data-bs-toggle="collapse" data-bs-target="#scorecard-filters-detail" aria-controls="scorecard-filters-detail" aria-expanded="false">
{%- include icons/filter.svg -%}
Filter by council type and more…
</button>
</div>
<div class="scorecard__data__filters collapse" id="scorecard-filters-detail">
<div>
<label class="form-label" for="filter-council-type">Council type</label>
<select class="form-select" id="filter-council-type">
<option value="" selected>All</option>
<option value="council-type-stc">Single Tier (Unitary, Borough, etc) councils</option>
<option value="council-type-cty">County councils</option>
<option value="council-type-nmd">District councils</option>
</select>
</div>
<div>
<label class="form-label" for="filter-council-region">Country/region</label>
<select class="form-select" id="filter-council-region">
<option value="" selected>All</option>
<optgroup label="Countries">
<option value="nation-england">England</option>
<option value="nation-scotland">Scotland</option>
<option value="nation-wales">Wales</option>
<option value="nation-northern-ireland">Northern Ireland</option>
</optgroup>
<optgroup label="Regions of England">
<option value="region-east-midlands">East Midlands</option>
<option value="region-east-of-england">East of England</option>
<option value="region-london">London</option>
<option value="region-north-east">North East</option>
<option value="region-north-west">North West</option>
<option value="region-south-east">South East</option>
<option value="region-south-west">South West</option>
<option value="region-west-midlands">West Midlands</option>
<option value="region-yorkshire-and-the-humber">Yorkshire and The Humber</option>
</optgroup>
</select>
</div>
<div>
<label class="form-label" for="filter-council-ruc">Rural/urban</label>
<select class="form-select" id="filter-council-ruc">
<option value="" selected>All</option>
<option value="ruc-rural">Rural</option>
<option value="ruc-sparse-and-rural">Sparse and rural</option>
<option value="ruc-urban">Urban</option>
<option value="ruc-urban-with-rural-areas">Urban with rural areas</option>
</select>
</div>
<div>
<label class="form-label" for="filter-council-imd">Socio-economic index (IMD)</label>
<select class="form-select" id="filter-council-imd">
<option value="" selected>All</option>
<option value="imd-1">1st IMD quintile – most deprived</option>
<option value="imd-2">2nd IMD quintile</option>
<option value="imd-3">3rd IMD quintile</option>
<option value="imd-4">4th IMD quintile</option>
<option value="imd-5">5th IMD quintile – least deprived</option>
</select>
</div>
<div>
<label class="form-label" for="filter-ned">Nature emergency declaration</label>
<select class="form-select" id="filter-ned">
<option value="" selected>All</option>
<option value="has-ned">Has declared a nature emergency</option>
<option value="has-no-ned">Has not declared a nature emergency</option>
<option value="has-priority-1">Has {{ site.data.priorities["priority_1"].description_committed }}</option>
<option value="has-priority-2">Has {{ site.data.priorities["priority_2"].description_committed }}</option>
<option value="has-priority-3">Has {{ site.data.priorities["priority_3"].description_committed }}</option>
</select>
</div>
<div>
<label class="form-label" for="filter-ned-date">Year declaration passed</label>
<select class="form-select" id="filter-ned-date">
<option value="" selected>All</option>
<option value="ned-year-2024">2024</option>
<option value="ned-year-2023">2023</option>
<option value="ned-year-2022">2022</option>
<option value="ned-year-2021">2021</option>
<option value="ned-year-2020">2020</option>
<option value="ned-year-2019">2019</option>
<option value="ned-year-2018">2018</option>
</select>
</div>
</div>
<div class="scorecard__data__table table-responsive">
<table class="table mb-0" id="scorecard-table">
<thead>
<tr>
<th class="council-name">
Council
<label class="visually-hidden" for="scorecard-table-search">Find a council by name</label>
<p class="search-input mt-2 mb-0">
<input type="text" class="form-control form-control-sm" placeholder="Find a council by name" id="scorecard-table-search">
<button type="button" aria-label="Search">{% include icons/search.svg %}</button>
</p>
</th>
<th style="vertical-align: top;" class="priority-0">
{% include images/priority-0.svg classes="d-block text-priority-0 mt-n2 mb-2" width="40" height="40" %}
Nature emergency
</th>
<th style="vertical-align: top;" class="priority-1">
{% include images/priority-1.svg classes="d-block text-priority-1 mt-n2 mb-2" width="40" height="40" %}
{{ site.data.priorities["priority_1"].short_name | capitalize }}
</th>
<th style="vertical-align: top;" class="priority-2">
{% include images/priority-2.svg classes="d-block text-priority-2 mt-n2 mb-2" width="40" height="40" %}
{{ site.data.priorities["priority_2"].short_name | capitalize }}
</th>
<th style="vertical-align: top;" class="priority-3">
{% include images/priority-3.svg classes="d-block text-priority-3 mt-n2 mb-2" width="40" height="40" %}
{{ site.data.priorities["priority_3"].short_name | capitalize }}
</th>
</tr>
</thead>
<tbody>
{%- for c in site.data.councils -%}
<tr data-council-slug="{{ c.council_slug }}" data-council-type="{% include simplified-council-type.html council_type=c.council_type %}" data-nation="{{ c.council_nation }}" data-region="{{ c.council_region }}" data-ruc="{{ c.council_ruc }}" data-imd="{{ c.council_imd|slice:0 }}" data-ned="{{ c.ned }}" data-ned-year="{{ c.ned_date_passed | date: '%Y' }}" data-priority-1="{{ c.priority_1 }}" data-priority-2="{{ c.priority_2 }}" data-priority-3="{{ c.priority_3 }}">
<td class="council-name">
<a href="{{ c.council_slug | prepend: 'councils/' | relative_url }}">{{ c.council_name }}</a>
</td>
<td class="text-{% include declaration-color.html i=c.ned %} priority-0">
{%- include declaration-tick-cross.html i=c.ned -%}
{%- if c.ned_date_passed -%}
{{- c.ned_date_passed | date: '%Y' -}}
{%- endif -%}
</td>
<td class="text-{% include priority-color.html i=c.priority_1 %} priority-1">
{%- include priority-tick-cross.html i=c.priority_1 -%}
</td>
<td class="text-{% include priority-color.html i=c.priority_2 %} priority-2">
{%- include priority-tick-cross.html i=c.priority_2 -%}
</td>
<td class="text-{% include priority-color.html i=c.priority_3 %} priority-3">
{%- include priority-tick-cross.html i=c.priority_3 -%}
</td>
</tr>
{%- endfor -%}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="bg-light py-4 py-sm-5 py-lg-6 mt-4 mt-sm-5 mt-lg-6">
<div class="container">
<h2 class="mw-40rem mb-3 mb-lg-4 lh-1">Why declare a nature emergency?</h2>
<p class="mw-40rem">Nature is integral to our culture, to a healthy society, and to a thriving and sustainable economy. Putting these plans into practice and working with communities and partners will show bold leadership in creating nature-rich places for wildlife and for people to live, work and play. It will also make a crucial contribution to the UK’s commitment to protect and manage 30% of UK land for nature by 2030.</p>
<h2 class="mw-40rem mb-3 mt-5 mt-lg-6 mb-lg-4 lh-1">Next steps</h2>
<p class="mw-35rem">We want to support local authorities to declare nature emergencies and take decisive steps to protect and restore their wildlife.</p>
<ul class="mw-40rem my-3">
<li class="mb-2">Delve into more detail and recommendations for local government in our <a href="#">nature recovery policy report</a></li>
<li class="mb-2">Share the suggested wording in our <a href="#">example motion</a> to make the declaration</li>
<li>See other local authorities’ experiences on this crucial journey in our <a href="#">case studies</a></li>
</ul>
<p class="mw-35rem mb-0">If your local authority needs advice or support, we’re here to help. Email <a href="#">XXXXXXX</a> or call <a href="#">XXXXXXX</a>.</p>
</div>
</div>