-
Notifications
You must be signed in to change notification settings - Fork 0
/
zwc-kalkulator.html
302 lines (268 loc) · 13.4 KB
/
zwc-kalkulator.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - ZWC mock</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.8/spectre.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<div class="container grid-sm">
<div class="columns">
<!-- TODO: na koncu naredi proper responsive: ?
https://picturepan2.github.io/spectre/layout/responsive.html
https://picturepan2.github.io/responsive-resizer/
trenutno ni nobene potrebe po column(s) - izbriši
-->
<div class="column">
<div class="panel">
<div class="panel-header columns col-gapless">
<div class="column col-9">
<div class="panel-title h5 mt-10" id="main-title">Zero Waste Cities calculator</div>
<div class="panel-subtitle" id="main-subtitle">What are the potential savings?</div>
</div>
<div class="column col-3 tooltip tooltip-bottom" id="lang-switcher-block" data-tooltip="Choose language">
<form class="">
<div class="form-group">
<select class="form-select select-sm" id="lang-switcher">
<option selected value="en">English</option>
<option value="bg">Bulgarian</option>
<option value="cs">Czech</option>
<option value="sl">Slovenian</option>
</select>
</div>
</form>
</div>
<!-- <div class="column col-4">
<img src="https://ebm.si/p/zwcities-calc/logo_zwe.png" alt="ZWE logo">
<img src="https://ebm.si/p/zwcities-calc/logo_hnuti_duha.gif" alt="HD logo">
<img src="https://ebm.si/minlogo.png" alt="EBM logo">
</div> -->
</div>
<nav class="panel-nav clearfix">
<ul class="tab tab-block">
<li class="tab-item active" data-idx="0">
<a href="#city" id="tab1">City data</a>
</li>
<li class="tab-item" data-idx="1">
<a href="#waste" id="tab2">Waste data</a>
</li>
<li class="tab-item" data-idx="2">
<a href="#cost" id="tab3">Cost data</a>
</li>
<li class="tab-item" data-idx="3">
<a href="#results" id="tab4">Results</a>
</li>
<li class="tab-item" data-idx="4">
<a href="#more" id="tab5">Learn more</a>
</li>
</ul>
</nav>
<div class="panel-body d-none" data-idx="0">
<span id="t1-intro">Please enter some <strong>basic data about your city:</strong></span>
<form class="">
<div class="form-group">
<select class="form-select" id="population">
<option disabled selected id="t1-pop">Population</option>
<option value="5k" id="t1-5k">Below 5,000</option>
<option value="50k">5,000 - 50,000</option>
<option value="100k">50,000 - 100,000</option>
<option value="300k">100,000 - 500,000</option>
</select>
<div class="vspacer"></div>
<select class="form-select" id="ambition">
<option disabled selected id="t1-amb">Ambition</option>
<option id="t1-amb1">Low</option>
<option id="t1-amb2">Medium</option>
<option id="t1-amb3">High</option>
</select>
<div class="vspacer"></div>
<div class="vspacer"></div>
<span id="t1-intro2" class="">Select the country if you wish to improve the cost comparisons:</span>
<select class="form-select" id="ppp">
<option selected id="t1-ctry0">Other</option>
<option id="t1-ctry1">Austria</option>
<option id="t1-ctry2">Belgium</option>
<option id="t1-ctry3">Czech Republic</option>
<option id="t1-ctry4">Denmark</option>
<option id="t1-ctry5">Estonia</option>
<option id="t1-ctry6">Finland</option>
<option id="t1-ctry7">France</option>
<option id="t1-ctry8">Germany</option>
<option id="t1-ctry9">Greece</option>
<option id="t1-ctry10">Hungary</option>
<option id="t1-ctry11">Iceland</option>
<option id="t1-ctry12">Ireland</option>
<option id="t1-ctry13" value="it">Italy</option>
<option id="t1-ctry14">Latvia</option>
<option id="t1-ctry15">Lithuania</option>
<option id="t1-ctry16">Luxembourg</option>
<option id="t1-ctry17">Netherlands</option>
<option id="t1-ctry18">Norway</option>
<option id="t1-ctry19">Poland</option>
<option id="t1-ctry20">Portugal</option>
<option id="t1-ctry21">Slovak Republic</option>
<option id="t1-ctry22" value="si">Slovenia</option>
<option id="t1-ctry23">Spain</option>
<option id="t1-ctry24">Sweden</option>
<option id="t1-ctry25">Switzerland</option>
<option id="t1-ctry26">Türkiye</option>
<option id="t1-ctry27">United Kingdom</option>
</select>
</div>
</form>
<div class="vspacer2"></div>
<p id="t1-note">The data you submit through this form will be used to calculate potential savings through comparable scenarios and suggest further action for waste management optimization. It will take purchasing power parity into account if you selected a country.<br>The form contains default values which are 2021 EU-27 averages. You can modify these values in the next few steps.</p>
</div>
<!-- Eurostat "Municipal waste by waste management operations" for the treatment shares; separation lower bound is recycling+composting share -->
<div class="panel-body d-none" data-idx="1">
<strong id="msw">Municipal solid waste</strong>:
<form class="form-horizontal">
<div class="form-group">
<div class="col-6 col-sm-12">
<label class="form-label" for="wastegen" id="gen">Waste generation per capita</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="wastegen" min="0" max="1000" step="1" value="530">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em" id="kgpa">kg / year</span>
</div>
<div class="col-12 vspacer"></div>
<!-- separation -->
<div class="col-6 col-sm-12">
<label class="form-label" for="separation" id="sep">Separate collection rate</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="separation" min="0" max="100" value="50" step="1">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em">%</span>
</div>
<div class="col-12 vspacer2"></div>
<!-- treatment: landfilling, recycling, composting, WtE -->
<div class="col-12" style="height: 2.5em; font-weight:bold"><span id="treat">Waste treatment (total</span>: <span id="pertotal">100</span> %):</div>
<div class="col-6 col-sm-12">
<label class="form-label" for="compost" id="comp">Composting</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input percent-100" type="number" id="compost" min="0" max="100" value="19" step="1">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em">%</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="recycling" id="recy">Recycling</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input percent-100" type="number" id="recycling" min="0" max="100" value="32" step="1">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em">%</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="landfill" id="land">Landfilling</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input percent-100" type="number" id="landfill" min="0" max="100" value="23" step="1">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em">%</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="wte" id="w2e">(Co)incineration</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input percent-100" type="number" id="wte" min="0" max="100" value="26" step="1">
</div>
<div class="col-2 col-sm-4">
<span class="form-label" style="padding-left: 1em">%</span>
</div>
<div class="col-12 vspacer"></div>
</div>
</form>
</div>
<div class="panel-body d-none" data-idx="2">
<strong id="t3-intro">Cost of waste treatment per ton:</strong>
<form class="form-horizontal">
<div class="form-group">
<div class="col-6 col-sm-12">
<label class="form-label" for="cost-compost" id="c-comp">Composting</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="cost-compost" min="0" max="5000" value="60" step="1">
</div>
<div class="col-2 col-sm-4">
<span id="ppt" class="form-label" style="padding-left: 1em">€ / t</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="cost-recycling" id="c-recy">Recycling</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="cost-recycling" min="0" max="5000" value="70" step="1">
</div>
<div class="col-2 col-sm-4">
<span id="ppt1" class="form-label" style="padding-left: 1em">€ / t</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="cost-landfill" id="c-land">Landfilling</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="cost-landfill" min="0" max="5000" value="60" step="1">
</div>
<div class="col-2 col-sm-4">
<span id="ppt2" class="form-label" style="padding-left: 1em">€ / t</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="cost-wte" id="c-w2e">(Co)incineration</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="cost-wte" min="0" max="5000" value="140" step="1">
</div>
<div class="col-2 col-sm-4">
<span id="ppt3" class="form-label" style="padding-left: 1em">€ / t</span>
</div>
<div class="col-12 vspacer"></div>
<div class="col-6 col-sm-12">
<label class="form-label" for="cost-pretreatment" id="c-pret">Pre-treatment</label>
</div>
<div class="col-4 col-sm-8">
<input class="form-input" type="number" id="cost-pretreatment" min="0" max="5000" value="50" step="1">
</div>
<div class="col-2 col-sm-4">
<span id="ppt4" class="form-label" style="padding-left: 1em">€ / t</span>
</div>
<div class="col-12 vspacer"></div>
</div>
<span id="c-value">These default costs don't include offsets for the market value of recyclables.</span>
</form>
</div>
<div class="panel-body d-none" data-idx="3">
<strong id="t4-intro">Results</strong><br/>
<div id="results">Press next</div>
</div>
<div class="panel-body d-none" data-idx="4">
<p id="t5-p1">Want to get familiar with key principles and myths of the Zero Waste approach, dive into case studies or learn through site visits? Explore the <a href='https://zerowastecities.eu/' target='_blank' rel='noopener'>Zero Waste Cities</a> website for that and more!</p>
<div>
<img class="float-right" alt="Erasmus+ logo" src="https://ebm.si/p/zwcities-calc/eu_flag_co_funded_pos_rgb_left-200px.jpg">
<p id="t5-p2">This calculator was developed by <a href='https://ebm.si/en/' target='_blank' rel='noopener'>Ekologi brez meja</a> during the <i>Creating zero waste methodology for municipalities</i> Erasmus+ project together with <a href='http://hnutiduha.cz/o-nas/about-us/' target='_blank' rel='noopener'>Hnutí Duha</a> and <a href='https://zerowasteeurope.eu/' target='_blank' rel='noopener'>Zero Waste Europe</a>. It was upgraded in 2023 with the support of the European Climate Foundation</p>
</div>
<p id="t5-p3">Besides Eurostat data, it uses City of London GHG emission figures for different waste treatment options, model city figures from their annual Zero Waste strategy reports and the initial per-ton costs computed from a report by the German Environmental Agency.</p>
</div>
<div class="panel-footer">
<button class="btn btn-primary btn-block" id="next" disabled>Next</button>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>