-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
105 lines (102 loc) · 5.24 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Direction Angrignon</title>
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46914903-1', 'kruchten.com'); ga('send', 'pageview');</script>
<!-- external libs from cdnjs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
</head>
<style>
p, a {
font-family: Verdana;
color: white;
}
body {
text-align: center;
background: black;
}
select {
font-size: 24px;
}
</style>
<script type="text/javascript">
$(function(){
$("select").on("change", function(){
$($(this).data("station"))
.attr("src", "output/"+$(this).val()+".jpg")
.show();
})
});
</script>
<body align="center">
<img src="output/header.png" style="width: 350px; margin-top:25px;" />
<p>Compare platforms from the Montreal Métro's green line, direction Angrignon. <a href="http://nicolas.kruchten.com/content/2016/07/direction-angrignon/">More info »</a>
<div id="controls" style="margin: 25px;">
<select data-station="#station1">
<option value="01-HBG">Honoré-Beaugrand</option>
<option value="02-RAD">Radisson</option>
<option value="03-LGL">Langelier</option>
<option value="04-CDL">Cadillac</option>
<option value="05-ASM">Assomption</option>
<option value="06-VIA">Viau</option>
<option value="07-PIX" selected>Pie-IX</option>
<option value="08-JLT">Joliette</option>
<option value="09-PFN">Préfontaine</option>
<option value="10-FNC">Frontenac</option>
<option value="11-PPN">Papineau</option>
<option value="12-BDR">Beaudry</option>
<option value="13-BUQ">Berri-UQAM</option>
<option value="14-STL">Saint-Laurent</option>
<option value="15-PDA">Place-des-Arts</option>
<option value="16-MCG">McGill</option>
<option value="17-PEL">Peel</option>
<option value="18-GCC">Guy-Concordia</option>
<option value="19-AWT">Atwater</option>
<option value="20-LGR">Lionel-Groulx</option>
<option value="21-CVX">Charlevoix</option>
<option value="22-LSL">Lasalle</option>
<option value="23-DLG">De l'Église</option>
<option value="24-VRD">Verdun</option>
<option value="25-JLC">Jolicoeur</option>
<option value="26-MNK">Monk</option>
<option value="27-ANG">Angrignon</option>
</optgroup>
</select>
vs
<select data-station="#station2">
<option value="01-HBG">Honoré-Beaugrand</option>
<option value="02-RAD">Radisson</option>
<option value="03-LGL">Langelier</option>
<option value="04-CDL">Cadillac</option>
<option value="05-ASM">Assomption</option>
<option value="06-VIA">Viau</option>
<option value="07-PIX">Pie-IX</option>
<option value="08-JLT">Joliette</option>
<option value="09-PFN">Préfontaine</option>
<option value="10-FNC">Frontenac</option>
<option value="11-PPN">Papineau</option>
<option value="12-BDR">Beaudry</option>
<option value="13-BUQ">Berri-UQAM</option>
<option value="14-STL">Saint-Laurent</option>
<option value="15-PDA">Place-des-Arts</option>
<option value="16-MCG">McGill</option>
<option value="17-PEL" selected>Peel</option>
<option value="18-GCC">Guy-Concordia</option>
<option value="19-AWT">Atwater</option>
<option value="20-LGR">Lionel-Groulx</option>
<option value="21-CVX">Charlevoix</option>
<option value="22-LSL">Lasalle</option>
<option value="23-DLG">De l'Église</option>
<option value="24-VRD">Verdun</option>
<option value="25-JLC">Jolicoeur</option>
<option value="26-MNK">Monk</option>
<option value="27-ANG">Angrignon</option>
</select>
</div>
<img id="station1" src="output/07-PIX.jpg" style="height: 100px;" />
<img id="station2" src="output/17-PEL.jpg" style="height: 100px;" />
<a href="http://nicolas.kruchten.com/" target="_blank"><img src="output/copyright.png" style="width: 150px;" border="0"/></a>
</body>
</html>