-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
673 lines (613 loc) · 37.8 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
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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<meta name="description" content="Після 30 років 12% людей помирає від куріння.Він вбиває більше 8 мільйонів людей щороку. Кожній з цих смертей можна запобігти." />
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="P.E.N.">
<meta property="og:url" content="https://priceofsmoking.org/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Україна: ціна куріння | Ukraine: the Price of Smoking" />
<meta property="og:description" content="Після 30 років 12% людей помирає від куріння.Він вбиває більше 8 мільйонів людей щороку. Кожній з цих смертей можна запобігти." />
<meta property="og:image" content="https://priceofsmoking.org/oth3.gif" />
<link rel="canonical" href="https://stayhomecampaign.org" />
<title>Україна: ціна куріння | Ukraine: the Price of Smoking</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Main CSS -->
<link rel="stylesheet" href="./css/style.css">
<!-- Custom font-->
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-154441744-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-154441744-1');
</script>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="./js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
</head>
<body>
<!-- Progress bar by https://medium.com/@nilayvishwakarma/ -->
<div id="_progress"></div>
<script>
document.addEventListener(
"scroll",
function() {
var scrollTop =
document.documentElement["scrollTop"] || document.body["scrollTop"];
var scrollBottom =
(document.documentElement["scrollHeight"] ||
document.body["scrollHeight"]) - document.documentElement.clientHeight;
scrollPercent = scrollTop / scrollBottom * 100 + "%";
document
.getElementById("_progress")
.style.setProperty("--scroll", scrollPercent);
},
{ passive: true }
);
</script>
<!-- Facebook share button -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v7.0" nonce="vVe0ezNm"></script>
<!-- Header -->
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="https://s3.eu-central-1.amazonaws.com/policyentrepreneurs.org/vid/smoke2.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="text-right align-items-center">
<a id="lang">
<br>
<strong class="en">Українська</strong>
<strong class="ukr">English</strong>
</a>
</div>
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white en">
<p><h1 class="title en">Ukraine: the Price of Smoking</h1></p>
<p class="lead">Every year, tobacco kills up to a half of its users worldwide. The most cost-effective way to reduce tobacco use is to raise taxes. In a country like Ukraine, a tax increase that raises tobacco prices by 10% decreases tobacco consumption by about 5%. It is especially effective among youth and people of low income.</p>
<div class="scroll-down" style="padding: 3vh"><a href="#part-2">LEARN MORE</a></div>
</div>
<div class="w-100 text-white ukr">
<p><h1 class="title">Україна: ціна куріння</h1></p>
<p class="lead">Щороку, тютюн вбиває до половини курців. Податок, що підвищує ціну тютюну на 10%, знижує його вживання на 5%. Це особливо ефективно серед молоді та людей з низьким рівнем доходу.</p>
<div class="scroll-down" style="padding: 3vh"><a href="#part-2">прокрути вниз</a></div>
</div>
</div>
</div>
</header>
<section>
<div class="container-fluid part-x" id="part-2">
<div class="slide">
<div class="slide-title">
<h3 class="en">Fact: tobacco accounts for 12% of all death in the world</h3>
<h3 class="ukr">Факт: 12% всіх смертей у світі стаються через тютюн</h3>
</div>
<div class="slide-graphic">
<canvas id="chart-area-2"></canvas>
</div>
<div class="slide-info en">
<div class="source en"><p>Source: <a href="https://www.who.int/news-room/fact-sheets/detail/tobacco" target="_blank">WHO</a></p></div>
<p>12% of all deaths among adults aged 30 years and over were attributed to tobacco use. It kills more than 8 million people each year.</p>
<p>Each of these deaths is preventable.</p>
</div>
<div class="slide-info ukr">
<div class="source ukr"><p>джерело: <a href="https://www.who.int/news-room/fact-sheets/detail/tobacco" target="_blank">WHO</a></p></div>
<p>Після 30 років 12% людей помирає від куріння.Він вбиває більше 8 мільйонів людей щороку.</p>
<p>Кожній з цих смертей можна запобігти.</p>
</div>
</div>
<script>
const blue = "rgb(20,98,106, 0.8)"
const red = "rgb(173,32,32, 0.8)"
new Chart(document.getElementById("chart-area-2"), {
type: 'pie',
data: {
datasets: [{
data: [
12,
88,
],
backgroundColor: [
red,
blue
],
label: 'Dataset 1'
}],
labels: [
'Tobacco, %',
'Other causes, %'
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
</div>
</section>
<section>
<div class="container-fluid part-x" id="part-3" >
<div class="slide">
<div class="slide-title en">
<p><h3>Fact: In Ukraine, prices for tobacco products are among the lowest in the world</h3></p>
<p><h6>Average price of a pack of cigarettes in USD, 2014</h6></p>
</div>
<div class="slide-title ukr">
<p><h3>Факт: В Україні ціни на тютюнові вироби одні з найнижчих у світі</h3></p>
<p><h6>Середня ціна за пачку цигарок в USD станом на 2014</h6></p>
</div>
<div class="slide-graphic map">
<div id="container1"></div>
</div>
<div class="slide-info en">
<div class="source"><p>Source: <a href="https://ourworldindata.org/grapher/average-price-of-a-pack-of-cigarettes" target="_blank">Our World in Data</a></p></div>
<p>At the average current price of 37 UAH <sup style="font-family: Arial; opacity: 0.6">
<a href="https://www.ukrinform.net/rubric-economy/2895917-all-alcohol-tobacco-products-rise-in-price-in-ukraine.html" target="_blank"> source</a></sup>, tobacco is very affordable in Ukraine as compared to other countries in the world.</p>
</div>
<div class="slide-info ukr">
<div class="source"><p>джерело: <a href="https://ourworldindata.org/grapher/average-price-of-a-pack-of-cigarettes" target="_blank">Our World in Data</a></p></div>
<br><p>Середня ціна за пачку цигарок становить 37 грн<sup style="font-family: Arial; opacity: 0.6">
<a href="https://www.ukrinform.net/rubric-economy/2895917-all-alcohol-tobacco-products-rise-in-price-in-ukraine.html" target="_blank">джерело</a></sup>,
тож тютюн надзвичайно доступний в Україні, порівняно з іншими країнами світу</p>
</div>
</div>
<script>
var series = [["DZA",2.09],["ARG",3.47],["ARM",1.74],["AUS",10.64],["AUT",5.34],["AZE",2.7],["BHS",9.75],
["BGD",1.54],["BLR",1.77],["BEL",6.08],["BLZ",6.75],["BOL",2.82],["BIH",3.86],["BRA",2.85],["BGR",6.25],
["BDI",2.26],["KHM",0.92],["CMR",2.43],["CAN",6.88],["CHL",5.21],["CHN",2.13],["COL",1.81],["COM",1.96],
["CRI",3.63],["HRV",5.65],["CYP",5.52],["CZE",5.69],["DNK",4.73],["DOM",6.25],["ECU",5.91],["EGY",2.69],
["EST",4.8],["ETH",1.97],["FJI",4.57],["FIN",5.42],["FRA",7.61],["GMB",4.42],["GEO",2.41],["DEU",6.34],
["GHA",2.41],["GRC",5.75],["GTM",3.22],["HND",3.38],["HUN",6.74],["ISL",8.89],["IND",4.63],["IDN",2.68],
["IRN",2.52],["IRL",11.16],["ISR",7.15],["ITA",5.43],["JAM",13],["JPN",4.34],["KAZ",1.45],["KEN",1.78],
["LVA",7.13],["LBN",2.67],["LTU",5.11],["LUX",4.47],["MKD",3.05],["MYS",6.1],["MLI",1.85],["MEX",5.15],
["MDA",2.06],["MNG",2.54],["MAR",4.81],["NPL",1.73],["NLD",7.22],["NZL",10.61],["NOR",9.31],["OMN",2.86],
["PAK",1.1],["PAN",6.44],["PER",3.7],["PHL",1.86],["POL",6.45],["PRT",5.93],["ROU",6.16],["RUS",2.18],
["RWA",2.01],["SEN",1.91],["SRB",4.48],["SLE",1.58],["SGP",11.04],["SVK",4.95],["SVN",5.84],["ZAF",5.48],
["KOR",3.24],["ESP",6.39],["LKA",8.42],["SWE",6.5],["CHE",5.08],["THA",3.41],["TUN",3.26],["TUR",5.63],
["UGA",2.03],["UKR",2.22],["ARE",1.82],["GBR",11.2],["USA",6.07],["URY",3.71],["UZB",2.31],["VNM",2.07],
["YEM",1.94],["ZMB",1.81],["ZWE",1.07]];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// We need to colorize every country based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj){ return obj[1]; });
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue,maxValue])
.range(["#AD2020","#EFEFFF"]);
// fill dataset in appropriate format
series.forEach(function(item){ //
// item example value ["USA", 70]
var iso = item[0],
value = item[1];
dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
});
// render map
new Datamap({
element: document.getElementById('container1'),
projection: 'mercator', // big world map
// countries don't listed in dataset will be painted with this color
fills: { defaultFill: '#F5F5F5' },
data: dataset,
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 2,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) { return ; }
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Average price in USD: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
});
</script>
</div>
</section>
<section>
<div class="container-fluid part-x" id="part-4" >
<div class="slide">
<div class="slide-title">
<span class="en">
<h3>Fact: in Ukraine, the death rate from smoking is among the highest in the world</h3>
<h6>Death rate from smoking</h6>
</span>
<span class="ukr">
<h3>Факт: В Україні рівень смертності від куріння один із найвищих у світі</h3>
<h6>Смертність від куріння</h6>
</span>
</div>
<div class="slide-graphic map">
<div id="container2"></div>
</div>
<div class="slide-info">
<div class="source">
<span class="en">
<p>Source: <a href="https://ourworldindata.org/grapher/death-rate-smoking" target="_blank">Our World in Data</a></p>
</span>
<span class="ukr">
<p>джерело: <a href="https://ourworldindata.org/grapher/death-rate-smoking" target="_blank">Our World in Data</a></p>
</span>
</div>
</div>
</div>
<script>
var series = [
["AFG",90],["ALB",98],["DZA",60],["ASM",74],["AND",58],["AGO",88],["ATG",38],["ARG",97],["ARM",117],
["AUS",51],["AUT",64],["AZE",142],["BHS",43],["BHR",46],["BGD",80],["BRB",34],["BLR",135],["BEL",84],
["BLZ",52],["BEN",45],["BMU",49],["BTN",54],["BOL",50],["BIH",142],["BWA",74],["BRA",75],["BRN",105],
["BGR",141],["BFA",36],["BDI",67],["KHM",129],["CMR",46],["CAN",70],["CPV",29],["CAF",113],["TCD",32],
["CHL",45],["CHN",120],["COL",36],["COM",41],["COG",67],["CRI",45],["CIV",60],["HRV",105],["CUB",98],
["CYP",78],["CZE",98],["COD",48],["DNK",97],["DJI",68],["DMA",41],["DOM",86],["ECU",33],["EGY",123],
["SLV",39],["GNQ",40],["ERI",49],["EST",82],["ETH",25],["FJI",122],["FIN",45],["FRA",57],["GAB",62],
["GMB",73],["GEO",116],["DEU",74],["GHA",41],["GRC",100],["GRD",56],["GUM",64],["GTM",37],
["GIN",42],["GNB",44],["GUY",67],["HTI",62],["HND",70],["HUN",126],["ISL",58],["IND",92],["IDN",116],
["IRN",60],["IRQ",54],["IRL",76],["ISR",53],["ITA",55],["JAM",75],["JPN",52],["JOR",66],["KAZ",119],
["KEN",50],["KIR",266],["KWT",42],["KGZ",89],["LAO",141],["LVA",106],["LBN",114],["LSO",156],["LBR",50],
["LBY",62],["LTU",101],["LUX",68],["MKD",126],["MDG",54],["MWI",55],["MYS",100],["MDV",65],["MLI",35],
["MLT",69],["MHL",131],["MRT",26],["MUS",70],["MEX",48],["FSM",116],["MDA",112],["MNG",137],["MNE",169],
["MAR",59],["MOZ",91],["MMR",175],["NAM",89],["NPL",125],["NLD",88],["NZL",54],["NIC",33],["NER",24],
["NGA",18],["PRK",118],["MNP",54],["NOR",60],["OMN",51],["PAK",129],["PSE",50],["PAN",39],
["PRY",86],["PER",23],["PHL",140],["POL",109],["PRT",51],["PRI",26],["QAT",38],["ROU",112],["RUS",130],
["RWA",84],["LCA",54],["VCT",51],["WSM",140],["STP",40],["SAU",35],["SEN",34],["SRB",153],["SYC",85],
["SLE",71],["SGP",36],["SVK",90],["SVN",69],["SLB",169],["SOM",80],["ZAF",70],["KOR",58],["SSD",68],
["ESP",65],["LKA",55],["SDN",16],["SUR",83],["SWZ",100],["SWE",58],["CHE",53],["SYR",81],["TWN",72],
["TJK",85],["TZA",70],["THA",58],["TLS",109],["TGO",44],["TON",105],["TTO",56],["TUN",94],["TUR",89],
["TKM",98],["UGA",44],["UKR",154],["ARE",66],["GBR",69],["USA",76],["VIR",44],["URY",89],["UZB",99],
["VUT",146],["VEN",59],["VNM",99],["YEM",103],["ZMB",77],["ZWE",139]];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// We need to colorize every country based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj){ return obj[1]; });
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue,maxValue])
.range(["#EFEFFF",blue]); // blue color
// fill dataset in appropriate format
series.forEach(function(item){ //
// item example value ["USA", 70]
var iso = item[0],
value = item[1];
dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
});
// render map
new Datamap({
element: document.getElementById('container2'),
projection: 'mercator', // big world map
// countries don't listed in dataset will be painted with this color
fills: { defaultFill: '#F5F5F5' },
data: dataset,
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 2,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) { return ; }
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Deaths per 100,000: <strong>', data.numberOfThings, '</strong>',
'</div>'].join('');
}
}
});
</script>
</div>
</section>
<section>
<div class="container-fluid part-x" id="part-5" >
<div class="slide">
<div class="slide-title en">
<h3>Tax increases are already helping to reduce tobacco consumption in Ukraine</h3>
</div>
<div class="slide-title ukr">
<h3>Підвищення податків — економічно найефективніший спосіб зниження вживання тютюну</h3>
</div>
<div class="slide-graphic">
<canvas id="chart_1"></canvas>
</div>
<div class="slide-info">
<span class="en">
<div class="source"><p>Source: <a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank">World Bank</a></p>
</div>
<p>The most cost-effective way to reduce tobacco use is to raise taxes. In a country like Ukraine, a tax increase that increases tobacco prices by 10% decreases tobacco consumption by about 5%. It is especially effective among youth and people of low income.
<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank"> source</a></sup>
</p>
</span>
<span class="ukr">
<div class="source"><p>джерело: <a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank">World Bank</a></p></div>
<p>Податок, що підвищує ціну тютюну на 10%, знижує його вживання на 5%. Це особливо ефективно серед молоді та людей з низьким рівнем доходу.
<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank"> джерело</a></sup></p>
</span>
</div>
</div>
<script>
new Chart(document.getElementById("chart_1"), {
"type": "bar",
"data": {
"labels": ["2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
"datasets": [{
"label": "Excise per pack of cigarettes, UAH",
"data": [0.58,1.62,2.74,3.48,4.04,4.76,4.96,6.08,8.62,12,15.5],
"type": "line",
"fill": false,
"borderColor": blue,
"backgroundColor": blue
},{
"label": "Number of daily smokers, millions",
"data": [10.1,9.2,8.7,8.6,8.35,8.1,7.7,6.7,6.9,6.5,5.96],
"type": "line",
"fill": false,
"borderColor": red,
"backgroundColor": red,}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
},
"responsive": true,
"maintainAspectRatio": false
},
});
</script>
</div>
</section>
<section>
<div class="container-fluid part-x" id="part-6" >
<div class="slide">
<div class="slide-title">
<span class="en">
<h3>Tax increases are already generating public health benefits in Ukraine</h3>
</span>
<span class="ukr">
<h3>Підвищення податку вже сприяє позитивним змінам для охорони здоров'я в Україні</h3>
</span>
</div>
<div class="slide-graphic">
<canvas id="chart-area-3"></canvas>
</div>
<div class="slide-info">
<span class="en">
<div class="source"><p>Source: <a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank">World Bank</a></p></div>
<div>
<p>World Bank's simulation estimated the public-health impacts of tobacco taxation measures, along with other tobacco control policies.
By 2035, Ukraine’s tobacco tax hike will avoid: 126,730 new cases of smoking-related disease; 29,172 premature deaths;
and 267,098 potential years of life lost.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/893811554737147697/Is-Tobacco-Taxation-Regressive-Evidence-on-Public-Health-Domestic-Resource-Mobilization-and-Equity-Improvements" target="_blank"> source</a></sup>
</p>
<p>Reductions in disease and death will save UAH 1.5 billion in health care costs and UAH 16.5 billion in premature mortality costs.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/893811554737147697/Is-Tobacco-Taxation-Regressive-Evidence-on-Public-Health-Domestic-Resource-Mobilization-and-Equity-Improvements" target="_blank"> source</a></sup> It will also avert the GDP loss of 3,2%.<sup style="font-family: Arial; opacity: 0.6"><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5801657/" target="_blank"> джерело</a></sup>
</p>
<p>And no, it's not a critical factor in the increase of illicit trade.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/238861522243274209/Economics-of-Tobacco-Taxation-Toolkit" target="_blank"> source</a></sup>
</p>
</div>
</span>
<span class="ukr">
<div class="source">
<p>джерело: <a href="http://documents.worldbank.org/curated/en/765671507036953947/Regressive-or-progressive-the-effect-of-tobacco-taxes-in-Ukraine" target="_blank">World Bank</a></p>
</div>
<div>
<p>Світовий банк передбачає, що до 2035 року податок на тютюн в Україні допоможе уникнути 126,730 нових випадків захворювань, пов'язаних із курінням, 29,172 передчасних смертей та 267,098 втрачених років життя.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/893811554737147697/Is-Tobacco-Taxation-Regressive-Evidence-on-Public-Health-Domestic-Resource-Mobilization-and-Equity-Improvements" target="_blank"> джерело</a></sup>
</p>
<p>Зменшення захворюваності та смертей збереже 1.5 мільярдів гривень на охорону здоров'я, а також 16.5 мільярдів гривень витрат на передчасну смерть.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/893811554737147697/Is-Tobacco-Taxation-Regressive-Evidence-on-Public-Health-Domestic-Resource-Mobilization-and-Equity-Improvements" target="_blank"> джерело</a></sup>
</p>
<p>Це також дозволить запобігти втраті ВВП на 3,2%.<sup style="font-family: Arial; opacity: 0.6"><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5801657/" target="_blank"> джерело</a></sup></p>
<p>І це не є критичним фактором збільшення незаконної торгівлі.<sup style="font-family: Arial; opacity: 0.6"><a href="http://documents.worldbank.org/curated/en/238861522243274209/Economics-of-Tobacco-Taxation-Toolkit" target="_blank"> джерело</a></sup>
</p>
</div>
</span>
</div>
</div>
<script>
new Chart(document.getElementById("chart-area-3"), {
"type": "bar",
"data": {
"labels": ["2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
"datasets": [{
"label": "Tobacco excise revenue, bln UAH",
"data": [3.6,9.1,13.1,15.3,16.6,17.9,18.1,22.2,33.2,39.9,43.6,44.1],
"type": "line",
"fill": false,
"backgroundColor": blue,
"borderColor": blue
},{
"label": "Excise per pack of cigarettes, UAH",
"data": [0.58,1.62,2.74,3.48,4.04,4.76,4.96,6.08,8.62,12,15.5,19.6],
"type": "line",
"fill": false,
"borderColor": red,
// "backgroundColor": "rgba(255, 99, 132, 0.8)"}]
"backgroundColor": red,}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
},
"responsive": true,
"maintainAspectRatio": false
}
});
</script>
</div>
</section>
<section>
<div class="container-fluid part-x" id="part-last" >
<div class="container" style="color: #1d2124; opacity: 0.9;">
<span class="en">
<p class="ml12" style="font-size: 6.5vh; font-weight: 300; line-height: 1.2;">Ukraine: the Price of Smoking</p>
<p class="lead mb-0">Every year, tobacco kills up to a half of its users worldwide. The most cost-effective way to reduce tobacco use is to raise taxes. In a country like Ukraine, a tax increase that increases tobacco prices by 10% decreases tobacco consumption by about 5%. It is especially effective among youth and people of low income.</p>
<br>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/_lLovbIX2OQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p class="lead mb-0">Thank you for protecting your citizens, Ukraine!</p>
</span>
<span class="ukr">
<p class="ml12" style="font-size: 6.5vh; font-weight: 300; line-height: 1.2;">Україна: ціна куріння</p>
<p class="lead mb-0">Щороку тютюн вбиває до половини курців. Податок, що підвищує ціну тютюну на 10%, знижує його вживання на 5%. Це особливо ефективно серед молоді та людей з низьким рівнем доходу.</p>
<br>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/_lLovbIX2OQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p class="lead mb-0">Дякуємо Україні за захист своїх громадян та їхніх дітей завдяки оподаткуванню тютюнових виробів!</p>
</span>
<div class="fb-share-button" data-href="https://priceofsmoking.org" data-layout="button" data-size="large"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fpriceofsmoking.org%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore"><span class="en">Share</span><span class="ukr"></span></a></div>
</div>
<!-- Animated text -->
<script>
var textWrapper = document.querySelector('.ml12');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml12 .letter',
translateX: [40,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1200,
delay: (el, i) => 500 + 30 * i
}).add({
targets: '.ml12 .letter',
translateX: [0,-30],
opacity: [1,0],
easing: "easeInExpo",
duration: 1100,
delay: (el, i) => 100 + 30 * i
});
</script>
<!-- Animated background-->
<script type="text/javascript">
const colors = [[241,235,235], [238,232,232], [202,202,202], [155,157,161], [246,240,229], [155,157,161]];
let step = 0;
const colorIndices = [0, 1, 2, 3];
const gradientSpeed = 0.002;
function updateGradient() {
if ($ === undefined) return;
const c0_0 = colors[colorIndices[0]];
const c0_1 = colors[colorIndices[1]];
const c1_0 = colors[colorIndices[2]];
const c1_1 = colors[colorIndices[3]];
const istep = 1 - step;
const r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
const g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
const b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
const color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";
const r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
const g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
const b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
const color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";
$('#part-last').css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
}).css({
background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
});
step += gradientSpeed;
if (step >= 1) {
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient, 10);
</script>
<div class="footer">
<br><p id="copyright"></p>
</div>
<script>
function copyrightYear() {
var d = new Date();
var y = d.getFullYear();
document.getElementById("copyright").innerHTML = 'Copyright © ' + y + ' <a href="https://github.com/ukraine-in-smoke/ukraine-in-smoke.github.io" target="_blank">The Price of Smoking</a> for <a href="http://center-life.org/en/" target="_blank">Життя</a>.'
+ ' <br>Наші реквізити: ГО «ЖИТТЯ», код ЄДРПОУ-36594108'
+ ' <br>р/р № UA 673220010000026000000578849'
+ ' <br>в АТ «Універсал Банк» МФО 322001.'
+ ' <br>Призначення платежу: добровільна пожертва.';
}
copyrightYear();
</script>
</div>
</section>
<script>
// // Stick to the top when scrolling
// var els = document.getElementsByClassName("part-x");
// var inViews = [];
// for(var i=0; i<els.length; i++) {
// inViews[i] = false;
// stick(els[i], i);
// }
// function stick(el, i) {
// window.addEventListener("scroll", function() {
// var fromTop = el.getBoundingClientRect().top;
// if (Math.abs(fromTop) < 100 && inViews[i] == false) {
// el.scrollIntoView();
// inViews[i] = true;
// }
// if (Math.abs(fromTop) >= 100) {
// inViews[i] = false;
// }
// })
// }
// Language switcher
var lang = document.getElementById("lang");
var showUKR = true;
lang.onclick = function() {
if (showUKR) {
$('.ukr').hide();
$('.en').show();
showUKR = false;
} else {
$('.en').hide();
$('.ukr').show();
showUKR = true;
}
}
</script>
</body>
</html>