-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·216 lines (168 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JETOLOGY - sacred journey into the private jets debate</title>
<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"
/>
<link rel="stylesheet" href="./home/home.css">
<link rel="stylesheet" href="./headings.css">
<script src="./libraries/p5.min.js"></script>
<script src="./libraries/p5.sound.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" id="myModal1">
<div id="modalBody">
<h2>#banprivatejets:<br>the social debate</h2>
<h1>THE PROJECT</h1>
<p id="pTheProject">
In 2022 private jets have become a relevant topic in the fight against climate change.
Using #banprivatejets, groups of activists, politicians
and scientists have begun to highlight the need
to tax emissions of private jets more decisively
or, more extremely, to ban them. The project has been carried out during the Final Synthesis Design Studio held by DensityDesign of the MSc in Communication Design, Politecnico di Milano. This web project is part of previous research published in a <a href="https://drive.google.com/file/d/1iZliKCNUlqo48o54cR9xiTehgVB1OEHA/view?usp=sharing" target="_blank">report</a>.
</p>
<h1>THE TEAM</h1>
<div class="row">
<div class="col">
<p>Kangying Chen<br>Giuseppe Defilippis<br>Stefano Gubiolo<br>Maria Martinuz
</p>
<img src="./assets/gif/team3.gif" autoplay loop></img>
</div>
<div class="col">
<p>Donato Renzulli<br>Antonio Sacchet<br>Yuying Tang
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row navbar">
<div class="col-6 logo"> <div id="logo-jet"> <a href="./index.html">Jetology </a> </div> </div>
<div class="navbar-sx">
<div class="col dropdown button-nav-explore">
<a class="dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">explore</a>
<div class="dropdown-menu">
<a class="dropdown-item button-nav-archive" href="./debate.html">DEBATE</a>
<a class="dropdown-item button-nav-archive" href="./archive.html">DATASET</a>
</div>
</div>
<div class="col disclosure"> <a href="./disclosure.html"> <div class="button-nav-disclosure"> disclosure</div></a></div>
</div>
</div>
<div class="cards">
<div class="card third" id="canvas1">
<div class="edit">
<div class="row">
<div class="col-0.5">1
<img src="./assets/icons/Group 551.png"></img>
</div>
<h2 class="col-3">KEYWORDS & RESULTS</h2>
<h1 class="col-6">WHAT ARE THE MAIN TOPICS OF THE DISCUSSION?</h1>
</div>
<p>
The comments under the videos were <br> divided by looking at selected<a id="keywordButton"> keywords</a>. <br> Some comments were about jet pollution, <span></span> <br> others not. Discover what people talked about.
<a href="./debate.html"> <button id="exploreButton"> EXPLORE DEBATE </button> </a>
<a id="skipdataset" href="./archive.html">Skip to dataset →</a>
<div id="keywords">
<a class="keyword a"id="keyword1">FOOTPRINT</a>
<a class="keyword b"id="keyword2">MAINTENANCE</a>
<a class="keyword c"id="keyword3">KARDASHIAN</a>
<a class="keyword d"id="keyword4">STRAWS</a>
<a class="keyword e"id="keyword5">MONEY</a>
<a class="keyword a"id="keyword6">CLIMATE</a>
<a class="keyword b"id="keyword7">PILOT</a>
<a class="keyword c"id="keyword8">MUSK</a>
<a class="keyword d"id="keyword9">PAPER</a>
<a class="keyword e"id="keyword10">LIFESTYLE</a>
<a class="keyword a"id="keyword11">GREEN</a>
<a class="keyword b"id="keyword12">HANGAR</a>
<a class="keyword c"id="keyword13">DRAKE</a>
<a class="keyword d"id="keyword14">GARBAGE</a>
<a class="keyword e"id="keyword15">BUSINESS</a>
<a class="keyword a"id="keyword16">PLANET</a>
<a class="keyword b"id="keyword17">AVIATION</a>
<a class="keyword c"id="keyword18">CULTURE</a>
<a class="keyword d"id="keyword19">OCEAN</a>
<a class="keyword e"id="keyword20">TAX</a>
<a class="keyword a"id="keyword21">TURTLES</a>
<a class="keyword b"id="keyword22">FUEL</a>
<a class="keyword c"id="keyword23">WEDDING</a>
<a class="keyword d"id="keyword24">VEGAN</a>
<a class="keyword e"id="keyword25">MILLIONAIRES</a>
</div>
</div>
<div class="box" id="box2"></div>
</div>
<div class="card second">
<div class="edit">
<!-- <img id="video2" src= "./1.gif" autoplay loop></img> -->
<div class="row">
<div class="col-0.5">1
<img src="./assets/icons/Group 550.png"></img>
</div>
<h2 class="col-3">TIKTOK COMMENTS</h2>
<h1 class="col-6">WHAT DO PEOPLE THINK ABOUT CELEBJETS?</h1>
</div>
<img id="video2" src= "./assets/gif/1.gif" autoplay loop></img>
<!-- <img id="video1" src= "./2.gif" autoplay loop></img> -->
<!-- <img id="celebimage" src="celebjets.png" alt=""> -->
<img id="video3" src= "./assets/gif/3.gif" autoplay loop></img>
<p>
The 22 selected TikToks <br> all talk about theTwitter page <br> <a id="celebButton" href="./disclosure.html">@CelebJets</a>, that exposes<br>celebrities’ short flights and <br> their emissions.</p>
<div id="modalCelebjets">
<!-- Modal content -->
<img src="./assets/pics/celebjets-scroll-lungo.png"></img>
</div>
</div>
</div>
<div class="card first">
<div class="edit">
<div class="row">
<div class="col-0.5">1
<img src="./assets/icons/Group 549.png"></img>
</div>
<h2 class="col-3">RESEARCH FIELD</h2>
<h1 class="col-6">WHAT IS THE DEBATE REALLY ABOUT?</h1>
</div>
<p>
Probably in the last year you have heard<br>of protests about private jets pollution.<br>In order to map the discussion around<br>the topic this project analyses the broad and<br><a id="kyliespan">heated </a>debate on TikTok.
</p>
<img id="kylie" src="./assets/pics/kylie-jenner.png"></img>
</div>
<div class="box" id="box1"></div>
</div>
</div>
<div id="home">
<video class="imagehome" src= "./assets/pics/homepage.mp4" autoplay loop muted></video>
</div>
<!-- partial -->
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src="./home/home.js"></script>
<script src="./home/home-animations.js"></script>
<script src="./animations.js"></script>
</body>
</html>