-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
266 lines (249 loc) · 14.1 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
<!DOCTYPE html>
<html lang="fi">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-155551331-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-155551331-1');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Joukkoliikennelaskuri</title>
<meta
content='Joukkoliikennelaskuri auttaa löytämään halvimman paikan, jossa voi ladata kautta tai arvoa Helsingin seudun liikenteen (HSL) matkakortille.'
name='description' />
<meta
content='Joukkoliikennelaskuri, joukkoliikenne, laskuri, HSL, Helsingin seudun joukkoliikenne, matkakortti, kausilippu, arvolippu'
name='keywords' />
<meta content='Joukkoliikennelaskuri' name='twitter:title' />
<meta
content='Joukkoliikennelaskuri auttaa löytämään halvimman paikan, jossa voi ladata kautta tai arvoa Helsingin seudun liikenteen (HSL) matkakortille.'
name='twitter:description' />
<meta content='https://joukkoliikennelaskuri.com/joukkoliikennelaskuri_twitter.jpg' name='twitter:image' />
<meta content='summary_large_image' name='twitter:card' />
<meta content='https://joukkoliikennelaskuri.com/' property='og:url' />
<meta content='Joukkoliikennelaskuri' property='og:title' />
<meta
content='Joukkoliikennelaskuri auttaa löytämään halvimman paikan, jossa voi ladata kautta tai arvoa Helsingin seudun liikenteen (HSL) matkakortille.'
property='og:description' />
<meta content='joukkoliikennelaskuri_fb.jpg' property='og:image' />
</head>
<body>
<div class="container">
<h2 class="jumbotron text-center bg-primary text-white">Joukkoliikennelaskuri</h2>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home">Aloitus</a>
</li>
<li class="nav-item">
<a class="nav-link tab2" href="#menu1">Arvoliput</a>
</li>
<li class="nav-item">
<a class="nav-link tab3" href="#menu2">Kausiliput</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Aloitus</h3>
<p>
Joukkoliikennelaskuri auttaa löytämään halvimman paikan, jossa voi ladata kautta tai arvoa Helsingin seudun
liikenteen
(HSL) matkakortille.
</p>
<p>
Tämä laskuri on kahden helsinkiläisen veljeksen kehittämä työkalu. Kyse ei ole siis HSL:n tuotteesta. Tarkempia
tietoja
joukkoliikennelipuista löytyy <a href="https://www.hsl.fi/liput" target="_blank">HSL:n verkkosivuilta</a>. Emme
myöskään myy matkalippuja. Niitä voi
ostaa esimerkiksi <a href="https://www.hsl.fi/myyntipaikkahaku" target="_blank">R-kioskeista sekä K- ja S-ryhmän
kaupoista</a>.
</p>
<p>
<a id="linkToCalc1" href="#">Arvolippulaskurilla</a> pystyt laskemaan, paljonko palvelupalkkiota eri HSL:n
myyntipisteet veloittavat saldon
lataamisesta matkakortille.
</p>
<p>
<a id="linkToCalc2" href="#">Kausilippulaskuri</a> toimii samalla tavoin. Siinä voit valita, kuinka pitkän kauden aiot
ostaa, millä vyöhykkeellä
matkustat ja kuulutko alennusryhmiin. Näin saat laskettua, mikä myyntipiste on edullisin.
</p>
<hr>
<h3>Usein kysyttyjä kysymyksiä</h3>
<h4>Miksi Joukkoliikennelaskuri on luotu?</h4>
<p>
HSL lopetti 1.1.2020 alkaen palkkioiden maksun jälleenmyyjille matkalippujen myynnistä. Tämän vuoksi ostosta
syntyvät
kulut voidaan veloittaa asiakkaalta. Palvelumaksujen suurudessa on eroja, sillä halvimman ja kalleimman myyntihinnan
erotus voi olla kausilipuissa viiden euron verran. Kannattaa siis vertailla hintoja Joukkoliikennelaskurin avulla!
</p>
<h4>Kuka laskuria ylläpitää?</h4>
<p>
Joukkoliikennelaskurin on ideoinut Tarmo Ylhävuori ja toteuttanut Arttu Ylhävuori. HSL ei ole osallistunut laskurin
tekoon tai ylläpitoon. Saat yhteyden meihin lähettämällä sähköpostia osoitteeseen:
<a href="mailto:joukkoliikennelaskuri@gmail.com">joukkoliikennelaskuri@gmail.com</a>
</p>
<h4>Pitävätkö laskurin hinnat varmasti paikkansa?</h4>
<p>
Olemme tarkastaneet hinnat useaan kertaan, mutta on mahdollista, että niissä esiintyy virheitä. Jos löydät
korjattavaa,
ota yhteyttä yllä olevaan osoitteeseen.
</p>
<hr>
<h3>Päivitykset</h3>
<p>
<li>14.1.2021 klo 20.30: Päivitetty HSL:n uudet kausilippujen hinnat laskuriin.</li>
<li>9.1.2020 klo 7.30: Korjattu R-kioskin prosenttiosuuden laskeminen siten, että
<a href="https://www.r-kioski.fi/palvelut/matkustaminen/" target="_blank">R-kioski veloittaa lataamisesta enintään 5
euroa</a>.</li>
</p>
<hr>
<p>© 2021 Idea: Tarmo Ylhävuori. Toteutus: Arttu Ylhävuori. Ota yhteyttä: <a
href="mailto:joukkoliikennelaskuri@gmail.com">joukkoliikennelaskuri@gmail.com</a></p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Arvolippulaskuri</h3>
<p>Syötä matkakortille ladattava arvo: <input id="valuePriceInput" type="number" min="0" step="0.01"> €</p>
<h2>Hinnat</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Myyjä</th>
<th scope="col">Hinta</th>
</tr>
</thead>
<tbody>
<tr>
<td>HSL-automaatti, HSL-palvelupiste ja kortti.hsl.fi</td>
<td><span id="valueCost1">0,00 €</span></td>
</tr>
<tr>
<td>S-ryhmän kaupat</td>
<td><span id="valueCost2">0,00 €</span></td>
</tr>
<tr>
<td>K-ryhmän kaupat</td>
<td><span id="valueCost3">0,00 €</span>*</td>
</tr>
<tr>
<td>R-kioskit</td>
<td><span id="valueCost4">0,00 €</span></td>
</tr>
</tbody>
</table>
<p>* K-ryhmän kauppojen palvelumaksuissa voi esiintyä kauppakohtaista vaihtelua. Palvelumaksu on arvolipuissa
korkeintaan 1
euron.</p>
<p>© 2021 Idea: Tarmo Ylhävuori. Toteutus: Arttu Ylhävuori. Ota yhteyttä: <a
href="mailto:joukkoliikennelaskuri@gmail.com">joukkoliikennelaskuri@gmail.com</a></p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Kausilippulaskuri</h3>
<div class="row">
<div class="col-sm">
<p>
Kausilipun kesto (vrk):
<select id="seasonDaysSelection">
<option value="empty"></option>
<option value="14">14</option>
<option value="30">30</option>
<option value="60">60</option>
<option value="90">90</option>
<option value="360">360</option>
</select>
<a href="#" data-toggle="popover" data-placement="top" data-trigger="focus"
data-content="Laskuri perustuu oletukseen, että käyttäjän kotikunta on HSL-kunta tai kehyskunta ja kausi ladataan henkilökohtaiselle matkakortille.
Lue lisää <a href='https://www.hsl.fi/asiakaspalvelu/ohjeita-ja-tietoja/yleiset-matkaehdot' target='_blank'>HSL:n verkkosivuilta</a>.">
<i class="material-icons">info</i>
</a>
</p>
</div>
<div class="col-sm">
<p>
Vyöhyke:
<select id="zoneSelection">
<option value="ab">AB</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="bc">BC</option>
<option value="bcd">BCD</option>
<option value="cd">CD</option>
<option value="d">D</option>
</select>
<a href="#" data-toggle="popover" data-placement="top" data-trigger="focus"
data-content="Lisätietoja vyöhykejaosta <a href='https://www.hsl.fi/liput/vyohykkeet' target='_blank'>HSL:n verkkosivuilta</a>.">
<i class="material-icons">info</i>
</a>
</p>
</div>
<div class="col-sm">
<p>
Asiakasryhmä:
<select id="customerGroupSelection">
<option value="adult">Aikuinen</option>
<option value="child">Lapsi 7–17 v.</option>
<option value="student">Opiskelija</option>
<option value="pensioner">Eläkeläinen</option>
<option value="physicallyChallenged">Liikuntarajoitteinen</option>
</select>
<a href="#" data-toggle="popover" data-placement="top" data-trigger="focus"
data-content="Lisätietoja asiakasryhmistä <a href='https://www.hsl.fi/liput-ja-hinnat/alennusliput' target='_blank'>HSL:n verkkosivuilta</a>.">
<i class="material-icons">info</i>
</a>
</p>
</div>
</div>
<h2>Hinnat</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Myyjä</th>
<th scope="col">Hinta</th>
</tr>
</thead>
<tbody>
<tr>
<td>HSL-automaatti, HSL-palvelupiste, HSL-sovellus (jatkuva tilaus 30 vrk) ja kortti.hsl.fi</td>
<td><span id="seasonCost1">0,00 €</span></td>
</tr>
<tr>
<td>S-ryhmän kaupat</td>
<td><span id="seasonCost2">0,00 €</span></td>
</tr>
<tr>
<td>K-ryhmän kaupat</td>
<td><span id="seasonCost3">0,00 €</span>*</td>
</tr>
<tr>
<td>R-kioskit</td>
<td><span id="seasonCost4">0,00 €</span></td>
</tr>
</tbody>
</table>
<p>* K-ryhmän kauppojen palvelumaksuissa voi esiintyä kauppakohtaista vaihtelua. Palvelumaksu on aikuisten kausilipuissa
korkeintaan 2 euroa sekä lasten ja alennusryhmien kausilipuissa korkeintaan 1 euron.</p>
<p>© 2021 Idea: Tarmo Ylhävuori. Toteutus: Arttu Ylhävuori. Ota yhteyttä: <a
href="mailto:joukkoliikennelaskuri@gmail.com">joukkoliikennelaskuri@gmail.com</a></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>