-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
67 lines (60 loc) · 2.62 KB
/
template.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
<!DOCTYPE html>
<!-- template.html -->
<html class="h-100">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="app.css" />
{{ headContent() }}
</head>
<body class="h-100">
<div class="container-fluid mw-1500">
<div class="d-flex h-100 align-items-stretch">
<div class="col-sm-6 col-md-4 col-lg-3 ms-0 ps-0">
<div class="bg-light ms-0 h-100 px-4">
<div class="divider-top"></div>
{{ sidebar }}
</div>
</div>
<div class="col-sm-6 col-md-8 col-lg-9 mt-4 ps-2">
<div class="row">
<div class="col-12 d-flex justify-content-between align-items-center">
<h1 class="ms-4">SDG Interactive Data Explorer</h1>
<div class="d-flex justify-content-end align-items-center">
<img src="stats4sd-logo.png" width="150px" height="auto"/>
<img src="icraf-logo.png" width="75px" height="auto"/>
</div>
</div>
<div class="col-10 m-4">
<div class="alert alert-info show">
This tool, designed by <a href="https://stats4sd.org">Statistics for Sustainable Development</a> in collaboration with <a href="https://www.worldagroforestry.org/">World Agroforestry (ICRAF)</a>, is intended to let users explore data on different SDGs. <br/><br/>
You can plot data from any SDG or any individual indicators against each other, and view how the data changes over time. You can also assign SDGs to the size, point colour, shape and line colour to really dig into the data. <br/><br/>
Data for SDG goals extracted from the <a href="https://dashboards.sdgindex.org/">Sustainable Development Report 2023</a>.
A direct link to raw data used can be found <a href="https://dashboards.sdgindex.org/static/downloads/files/SDR2023-data.xlsx">here</a>.
</div>
</div>
</div>
<div class="mb-4 pb-4">
{{ timeline }}
</div>
<div class="mb-4 pb-4">
{{ plot_plotly }}
{{ plot_interactive }}
</div>
<div class="row">
<div class="col-10 ms-4 ps-4">
<div class="card mt-4">
<div class="card-header">
<h5 class="mb-0">Variables included</h5>
</div>
<div class="card-body">{{ bottom_text }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>