-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
541 lines (538 loc) · 25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="assets/images/train-world-logo.webp">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Speed Ahead</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
</head>
<body>
<div class="site-wrapper">
<div class="header">
<div class="logos">
<a href="https://www.trainworld.be/en"><img src="assets/images/train-world-logo.webp" class="header-logo" alt="logo" /></a>
<a href="https://www.belgiantrain.be/en"><img src="assets/images/belgian-train-logo.webp" class="header-logo" alt="logo" /></a>
</div>
<a href="https://webshoptrainworld.recreatex.be/Exhibitions/Overview" class="button">Plan your visit</a>
</div>
<section class="landing">
<h1 class="title">Full Speed</h1>
<img src="assets/svg/abstract.svg" class="abstract" alt="abstract">
<h1 class="title-ahead">Ahead</h1>
<noscript>
<h1>Ahead</h1>
</noscript>
<div class="ahead-animation"></div>
<div class="mobile-animation"></div>
<p class="landing-p">End of the XX – beginning of the XXI century</p>
</section>
<section class="history">
<h1>1986</h1>
<h2>High speed line history</h2>
<div class="text-content">
<p class="history-text">At the 1986 annual conference of the Ministers of Transport for France, Germany, Belgium and The Netherlands, a high-speed network between Paris – Brussels - Cologne/Amsterdam, or PBKAL for short (the first letters of each connected city) was discussed for the first time. The L referred to London, which would also be connected to this network via the Channel Tunnel.</p>
<div class="flags-animation"></div>
</div>
</section>
<section class="document-section">
<div class="left-side">
<h3 class="document-title">Start the historical journey - <br>Sign the Document</h3>
<p><span>Drag and Drop</span> Countries in a right order of <br>PBKAL document, when ready - sign the contract!
</p>
<div class="shapes">
<div id="france" draggable="true">
<img src="assets/svg/France.svg" alt="France">
</div>
<div id="belgium" draggable="true">
<img src="assets/svg/Belgium.svg" alt="Belgium">
</div>
<div id="germany" draggable="true">
<img src="assets/svg/Germany.svg" alt="Germany">
</div>
<div id="netherlands" draggable="true">
<img src="assets/svg/Netherlands.svg" alt="Netherlands">
</div>
<div id="uk" draggable="true">
<img src="assets/svg/England.svg" alt="UK">
</div>
</div>
<a class="button contract-button">Sign the Contract</a>
</div>
<div class="right-side">
<div class="document">
<div class="document-header">
<p class="large-paragraph">The Establishment and Development of the PBKAL High-Speed Rail Network</p>
<div class="signature-animation"></div>
<div class="drop-area">
<div id="drop-france"></div>
<div id="drop-belgium"></div>
<div id="drop-germany"></div>
<div id="drop-netherlands"></div>
<div id="drop-uk"></div>
</div>
<p class="left-aligned-p">This document allows building PBKAL, a high-speed rail network connecting
<span>Paris</span>, <span>Brussels</span>, <span>Cologne</span>, <span>Amsterdam</span>, and
<span>London</span>. It's the result of a collaborative effort between France, Germany, Belgium, the
Netherlands, and the United Kingdom. This is a unique opportunity to connect the most important cities in
Europe to open the new possibilities!
</p>
<div class="date-and-signature">
<p>Paris, 1986</p>
<p>Minister of Transport</p>
</div>
</div>
</div>
</div>
</section>
<section class="mobile-document-section">
<div class="mobile-heading">
<h3>Let's test your knowledge!</h3>
<p>Try to place the countries in the boxes and collect the word "PBKAL"</p>
</div>
<div class="shapes">
<div id="france" draggable="true">
<img src="assets/svg/France.svg" alt="France" />
</div>
<div id="belgium" draggable="true">
<img src="assets/svg/Belgium.svg" alt="Belgium" />
</div>
<div id="germany" draggable="true">
<img src="assets/svg/Germany.svg" alt="Germany" />
</div>
<div id="netherlands" draggable="true">
<img src="assets/svg/Netherlands.svg" alt="Netherlands" />
</div>
<div id="uk" draggable="true">
<img src="assets/svg/England.svg" alt="UK" />
</div>
</div>
<div class="drop-area">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="pbkal">
<h1>P</h1>
<h1>B</h1>
<h1>K</h1>
<h1>A</h1>
<h1>L</h1>
</div>
</section>
<section class="opinions">
<h2>But there were different opinions..</h2>
<div class="opinions-container">
<div class="opinion-card against-opinion">
<div class="opinion-header">
<h3>Environmental Concerns</h3>
<span class="material-symbols-outlined opinion-symbol"> close </span>
</div>
<p>The construction of new railway lines often requires significant land alteration, which can disrupt local
ecosystems, lead to the loss of wildlife habitats, and increase noise and air pollution.</p>
</div>
<div class="opinion-card pro-opinion">
<div class="opinion-header">
<h3>Economic Development</h3>
<span class="material-symbols-outlined opinion-symbol"> check </span>
</div>
<p>Proponents argued that high-speed trains could significantly boost economic development. They improve
connectivity between cities, reduce travel times, and can attract businesses and tourism.</p>
</div>
<div class="opinion-card against-opinion">
<div class="opinion-header">
<h3>Regional Development Concerns</h3>
<span class="material-symbols-outlined opinion-symbol"> close </span>
</div>
<p>In Belgium, there was specific resistance in the Campine region against the HST. This resistance was partly
due to concerns about the impact on the local environment and communities.</p>
</div>
<div class="opinion-card pro-opinion">
<div class="opinion-header">
<h3>Job Creation</h3>
<span class="material-symbols-outlined opinion-symbol"> check </span>
</div>
<p>The construction and operation of HST lines were also seen as opportunities for job creation, both directly
in the railway sector and indirectly in related industries.</p>
</div>
<div class="opinion-card against-opinion">
<div class="opinion-header">
<h3>Financial Costs</h3>
<span class="material-symbols-outlined opinion-symbol"> close </span>
</div>
<p>Critics pointed out the high costs associated with building and maintaining high-speed rail lines. The
investment required for such projects is substantial, leading to concerns about whether the financial
benefits justify the expense.</p>
</div>
<div class="opinion-card pro-opinion">
<div class="opinion-header">
<h3>Modernization of Transport</h3>
<span class="material-symbols-outlined opinion-symbol"> check </span>
</div>
<p>Supporters viewed the HST as a step towards modernizing Belgium's transportation infrastructure, aligning
it with other leading European nations that were already investing in high-speed rail.</p>
</div>
</div>
</section>
<section class="events">
<h2>Some events helped to make it happen</h2>
<div class="events-blocks">
<div class="events-block">
<div class="event-header">
<h3>Eurotunnel and LGV Nord</h3>
</div>
<div class="event-content">
<div class="animation-container">
<div class="lgv-animation"></div>
<div class="animation-text">
<h4>Paris - London</h4>
<div class="animation-text__line-block">
<div class="animation-text__line">
<img src="assets/svg/plane.svg" alt="plane" class="animation-icon">
<p>3:30 hours</p>
</div>
<div class="animation-text__line">
<img src="assets/svg/train-vector.svg" alt="train" class="animation-icon">
<p>2:15 hours</p>
</div>
</div>
</div>
</div>
<div class="year-and-description">
<h3 class="accent-year">1994</h3>
<p class="events-text">Opened in 1994, the Eurotunnel is an engineering marvel, connecting the UK and
France with the world's longest undersea tunnel portion. It dramatically reduces travel time between the
two countries, symbolizing a triumph of technology and international cooperation.<br><br>After
Eurotunnel was build you can go from Paris to London in 2 hours.</p>
</div>
</div>
</div>
<div class="events-block">
<div class="event-header">
<h3>HSL Leuven - Liège</h3>
</div>
<div class="event-content">
<div class="animation-container">
<div class="leuven-animation"></div>
<div class="animation-text">
<h4>Leuven - Liège</h4>
<div class="animation-text__line-block">
<div class="animation-text__line">
<img src="assets/svg/car.svg" alt="car" class="animation-icon">
<p>1 hour</p>
</div>
<div class="animation-text__line">
<img src="assets/svg/train-vector.svg" alt="train" class="animation-icon">
<p>0:30 minutes</p>
</div>
</div>
</div>
</div>
<div class="year-and-description">
<h3 class="accent-year">2002</h3>
<p class="events-text">In 2002, a significant milestone in the development of Belgium's high-speed rail
network was marked with the opening of the High-Speed Line (HSL) between Leuven and Liège. This line was
a key part of Belgium's commitment to enhancing its railway infrastructure, greatly reducing travel time
between these two major cities. </p>
</div>
</div>
</div>
<div class="events-block">
<div class="event-header">
<h3>HSL 4, Amsterdam - Brussels</h3>
</div>
<div class="event-content">
<div class="animation-container">
<div class="hsl-4-animation"></div>
<div class="animation-text">
<h4>Amsterdam - Brussels</h4>
<div class="animation-text__line-block">
<div class="animation-text__line">
<img src="assets/svg/car.svg" alt="car" class="animation-icon">
<p>2:12 hours</p>
</div>
<div class="animation-text__line">
<img src="assets/svg/train-vector.svg" alt="train" class="animation-icon">
<p>1:19 hours</p>
</div>
</div>
</div>
</div>
<div class="year-and-description">
<h3 class="accent-year">2009</h3>
<p class="events-text">2009 witnessed the further expansion of Belgium's high-speed rail capabilities with
two significant openings. The first was the Chênée - Walhorn section, which included the impressive
Soumagne Tunnel, known for being the longest railway tunnel in Belgium. This section was crucial for
enhancing the connectivity in the eastern part of the country. </p>
</div>
</div>
</div>
</div>
</section>
<section class="text-section">
<h2 class="hidden"></h2>
<p>In</p>
<p><span class="animated-digit">16 years</span></p>
<p>Belgium had become the 1st country in Europe to achieve a complete HSL network, suitable for speeds of</p>
<p><span class="animated-digit">300 km/h</span></p>
<p>The investment ran to well over</p>
<p><span class="animated-digit">5 000 000 000 €</span></p>
<p>The highest amount since the World Expo in 1958</p>
</section>
<section class="company-structure">
<h2>The new face of the Belgian railways</h2>
<h3 class="accent-year">2014 - Now</h3>
<p>The federal parliament carried out a new restructuring in 2014, aimed at more efficient management and better
operational performance.</p>
<div class="carousel-container">
<div class="circle-container">
<div class="circle"></div>
</div>
<input class="radio--sncb radio" name="company" value="sncb" type="radio" checked>
<input class="radio--hr radio" name="company" value="Hr-rail" type="radio">
<input class="radio--infra radio" name="company" value="Infrabel" type="radio">
<div class="carousel">
<div class="carousel-item carousel--sncb">
<img src="assets/images/belgian-train-logo.webp" class="logo" alt="belgian-train-logo">
<h3>NMBS/SNCB</h3>
<p class="company-desc">Railway operator</p>
<div class="company-list">
<p>Operates the trains</p>
<p>Manages the stations</p>
<p>Manages the ticketing</p>
</div>
</div>
<div class="carousel-item carousel--hr">
<img src="assets/images/hr-rail.png" class="logo" alt="hr-rail logo">
<h3>HR-Rail</h3>
<p class="company-desc">Legal employer</p>
<div class="company-list">
<p>Manages the staff</p>
<p>Manages the recruitment</p>
<p>Manages the social consultation</p>
</div>
</div>
<div class="carousel-item carousel--infra">
<img src="assets/images/infrabel_logo.png" class="logo" alt="infrabel_logo">
<h3>Infrabel</h3>
<p class="company-desc">Infrastructure manager</p>
<div class="company-list">
<p>Manages the railway infrastructure</p>
<p>Manages the train traffic</p>
<p>Manages the train paths</p>
</div>
</div>
</div>
</div>
</section>
<section class="investments">
<div class="investment-container">
<div class="investment-item">
<h3 class="accent-year">Timeline<span class="material-symbols-outlined"> double_arrow </span></h3>
<h2 class="project-heading">Investment and modernisation</h2>
<p>NMBS/SNCB and Infrabel continue to invest in new rolling stock and in modernising the railway network in
the 21st century.</p>
</div>
<div class="investment-item">
<h3 class="accent-year">2011</h3>
<div class="invetment-flex">
<div class="investment-left">
<h2 class="project-heading">The New Trains</h2>
<p>NMBS/SNCB brought a new range of electric units into service for local and regional passenger
transport. This consists of 305 three-part electric units of the ‘Desiro Main Line’ type. These are
light-weight trains with a low-floor section, making them supremely suited to routes with many stops.
</p>
</div>
<div class="investment-right">
<picture class="investment-img">
<source srcset="
./assets/images/desiro/desiro_400.avif 400w,
./assets/images/desiro/desiro_823.avif 823w,
./assets/images/desiro/desiro_1200.avif 1200w,
" type="image/avif">
<source srcset="
./assets/images/desiro/desiro_400.webp 400w,
./assets/images/desiro/desiro_823.webp 823w,
./assets/images/desiro/desiro_1201.webp 1201w,
" type="image/webp">
<img class="investment-img" src="./assets/images/desiro/desiro.jpg" alt="Desiro main line">
</picture>
</div>
</div>
</div>
<div class="investment-item">
<h3 class="accent-year">2012</h3>
<div class="invetment-flex">
<div class="investment-left">
<h2 class="project-heading">The Diabolo Project</h2>
<p>This project, providing northern access to Zaventem (Brussels Airport), involved constructing a new
railway line between Mechelen and Schaerbeek, running largely along the E19 motorway and connecting to
the airport through a railway triangle.</p>
</div>
<div class="investment-right">
<picture class="investment-img">
<source srcset="
./assets/images/diabolo/diabolo_400.avif 400w,
./assets/images/diabolo/diabolo_764.avif 764w,
./assets/images/diabolo/diabolo_1200.avif 1200w,
" type="image/avif">
<source srcset="
./assets/images/diabolo/diabolo_400.webp 400w,
./assets/images/diabolo/diabolo_764.webp 764w,
./assets/images/diabolo/diabolo_1200.webp 1200w,
" type="image/webp">
<img class="investment-img" src="./assets/images/diabolo/diabolo.jpg" alt="The Diabolo Project">
</picture>
</div>
</div>
</div>
<div class="investment-item">
<h3 class="accent-year">2015</h3>
<div class="invetment-flex">
<div class="investment-left">
<h2 class="project-heading">RER Network</h2>
<p>Major works since 2006 have been undertaken for the Brussels RER (Réseau Express Régional), including
the expansion of various lines to four tracks and the construction of the Schuman-Josaphat Tunnel.
Officially opened on December 13, 2015, it aims to enhance the suburban transport network.</p>
</div>
<div class="investment-right">
<picture class="investment-img">
<source srcset="
./assets/images/rer/Rer_400.avif 400w,
./assets/images/rer/Rer_738.avif 738w,
./assets/images/rer/Rer_1200.avif 1200w,
" type="image/avif">
<source srcset="
./assets/images/rer/Rer_400.webp 400w,
./assets/images/rer/Rer_854.webp 854w,
./assets/images/rer/Rer_1200.webp 1200w,
" type="image/webp">
<img class="investment-img" src="./assets/images/rer/Rer.png" alt="The Rer project">
</picture>
</div>
</div>
</div>
<div class="investment-item">
<h3 class="accent-year">2020</h3>
<div class="invetment-flex">
<div class="investment-left">
<h2 class="project-heading">M7 Carriages</h2>
<p>In 2020, NMBS/SNCB introduced the first M7 carriages, with 445 double-decker carriages ordered to
provide 50,000 seats. These new carriages, designed based on comprehensive traveller surveys, boast
modern safety systems and enhanced comfort.</p>
</div>
<div class="investment-right">
<picture class="investment-img">
<source srcset="
./assets/images/m7/m7_400.avif 400w,
./assets/images/m7/m7_831.avif 831w,
./assets/images/m7/m7_1200.avif 1200w,
" type="image/avif">
<source srcset="
./assets/images/m7/m7_400.webp 400w,
./assets/images/m7/m7_727.webp 727w,
./assets/images/m7/m7_1200.webp 1200w,
" type="image/webp">
<img class="investment-img" src="./assets/images/m7/m7.jpeg" alt="M7 carriages">
</picture>
</div>
</div>
</div>
</div>
</section>
<section class="test-yourself">
<h2>Test Yourself</h2>
<p class="test-yourself-p">Draw on the map your “Dream route” and explore its distance, travel time and estimated
cost</p>
<div class="map-content">
<div class="map" id="map"></div>
<div class="info-with-btn">
<div class="route-information">
<div class="information-block">
<h3>Route Distance</h3>
<p>Draw on map</p>
</div>
<div class="information-block">
<h3>Travel time</h3>
<p>With average speed of 200km/h</p>
</div>
<div class="information-block">
<h3>Estimated Costs</h3>
<p>With cost of 25 millions / km</p>
</div>
</div>
<a href="https://www.facebook.com/trainworldmuseum?fref=ts" class="button share-button">Share</a>
</div>
</div>
</section>
<section class="final-section">
<h2>Did you like the interactive experience?</h2>
<h3>Find out more in <span>TrainWorld!</span></h3>
<div class="discount">
<div class="text">
<p>Scan the QR code and get</p>
<p class="discount-text">20%</p>
<p>discount for museum tickets!</p>
</div>
<div class="qr-code">
<img src="assets/svg/qr.svg" class="qr-code" alt="qr-code">
</div>
</div>
</section>
<section class="footer">
<div class="stories-links">
<div class="stories-link">
<a href="https://www.trainworld.be/en/collections/history-of-the-belgian-railways/5-the-golden-sixties-and-the-oil-crisis-second-half-of-the-20th-century">Previous</a>
<p>5. The Golden Sixties and the oil crisis (second half of the 20th century)</p>
</div>
<div class="stories-link">
<a href="https://www.trainworld.be/en/collections/history-of-the-belgian-railways/7-stations">Next</a>
<p>7. Stations</p>
</div>
</div>
<h2>Practical information</h2>
<div class="practicals">
<div class="practical-left">
<div class="practical">
<p class="info-type">Location</p>
<p>Prinses Elisabethplein 1030 Schaerbeek</p>
</div>
<div class="practical">
<p class="info-type">E-mail</p>
<a href="mailto:trinworld.be">b2b@trainworld.be</a>
</div>
<div class="practical">
<p class="info-type">Phone</p>
<a href="tel:">+32 2 224 74 37</a>
</div>
<a href="https://webshoptrainworld.recreatex.be/Exhibitions/Overview" class="button footer-button">Plan your
visit</a>
</div>
<div class="practical-right">
<div class="practical hours-practical">
<p class="info-type">Opening hours</p>
<div class="hours">
<p>Tuesday - Sunday: 10:00 - 17:00</p>
<p>Monday: Closed</p>
</div>
</div>
</div>
</div>
<div class="footer-socials">
<a href="https://www.facebook.com/trainworldmuseum?fref=ts"><img src="assets/svg/facebook.svg" alt="facebook" class="social"></a>
<a href="https://www.instagram.com/trainworld_museum/"><img src="assets/svg/insta.svg" alt="instagram" class="social"></a>
<a href="https://twitter.com/i/flow/login?redirect_after_login=%2FTrainWorldFR"><img src="assets/svg/twitter.svg" alt="twitter" class="social"></a>
<a href="https://www.youtube.com/channel/UCY-STWe1lKemDbpZw4XuZyA/featured?view_as=subscriber"><img src="assets/svg/youtube.svg" alt="youtube" class="social"></a>
</div>
</section>
</div>
<script type="module" src="/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
</body>
</html>