-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
158 lines (154 loc) · 6.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Kuopion Julkinen Liikenne" />
<meta
property="og:description"
content="Find all the busses/bus routes, Vilkku-bicycles and Biketaxis in Kuopio/Siilinjärvi region"
/>
<meta property="og:image" content="img/vilkku.jpg" />
<meta name="google-adsense-account" content="ca-pub-9765110233243602" />
<title>Kuopion Julkinen Liikenne</title>
<link rel="stylesheet" href="styles.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9765110233243602"
crossorigin="anonymous"
></script>
</head>
<body>
<header class="flex flex-col items-center p-4 shadow-md absolute z-10 bg-gray-800 w-full sm:w-auto sm:top-4 sm:left-4 sm:rounded-lg text-xs sm:text-sm">
<div class="flex flex-col gap-2 w-80">
<div class="input-container">
<input
id="start"
type="text"
class="p-2 rounded-md border border-gray-300 w-full my-1"
placeholder="Mistä? - Katuosoite tai paikka"
/>
<input
id="end"
type="text"
class="p-2 rounded-md border border-gray-300 w-full my-1"
placeholder="Minne? - Katuosoite tai paikka"
/>
<button id="routeBtn" class="bg-green-500 border-2 border-white text-white px-4 py-2 rounded-md hover:bg-green-600 my-2 w-full" onclick="onButtonClick()">Hae reittejä</button>
<div class="flex justify-between w-full">
<button id="useCurrentLocation" class="bg-red-600 text-white px-2 rounded-md hover:bg-red-700 border-2 mr-1">
<i class="material-icons">edit_location</i>
</button>
<button id="alertsContainerButton" class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 w-full mx-2 border-2">Tiedotteet</button>
<button id="extraOptionsButton" class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 w-full border-2">Valikko</button>
</div>
<div id="alertsContainer">
<div id="alertsContainerInfo" class="text-white pt-4"></div>
</div>
<div id="extraOptionsContainer" class="hidden pt-4">
<button id="stopInfo" class="bg-blue-600 text-white rounded-md hover:bg-blue-700 p-2 mb-2 w-full">
<a
href="https://vilkku.kuopio.fi/"
target="_blank"
id="stopInfoButton"
>
Osta bussilippu
</a>
</button>
<button id="stopInfo" class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 w-full mb-2">
<a
href="https://pysakit.kuopio.fi/"
id="stopInfoButton"
target="_blank"
>
Pysäkkitiedot
</a>
</button>
<button id="stopInfo" class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 mb-2 w-full">
<a href="https://taksi1.fi/" id="stopInfoButton" target="_blank">
Taksiykköset
</a>
</button>
<button id="siteInfoContainerButton" class="bg-blue-800 text-white p-2 rounded-md hover:bg-blue-900 mb-4 w-full border-2">Ohjeet</button>
<div id="siteInfoContainer" class="text-white hidden">
<br />
<h3 class="text-xl">Sivun ohjeet</h3>
<br />
<ul>
<li>
Näet kartalla kaikki liikenteessä olevat Vilkku-bussit sekä
Vilkku-fillari -asemat.
</li>
<li>
Voit klikata haluamaasi bussia nähdäksesi sen reitin sekä tämän
hetkisen nopeuden. Lisäksi näet linkin jota klikkaamalla pääset
Vilkun nettisivuille ostamaan lipun.
</li>
<li>
Voit myös klikata haluamaasi Vilkku-fillarit -aseman ikonia
jolloin näet kaikki asemalla olevat vapaat pyörät sekä paljonko
virtaa kussakin pyörässä on jäljellä.
</li>
<li>
Voit seurata haluamaasi bussia klikkaamalla ensin valikosta
`Seuraa bussia` painiketta, jonka jälkeen voit klikata bussia
jota haluat seurata. Tämän jälkeen bussi pysyy kokoajan kartan
keskellä ruudun seuratessa sitä kokoajan.
</li>
</ul>
<p class="mt-2">Tee ilmoitus bugeista tai muista häiriöistä <a href="https://github.com/nikohoffren/kuopio-public-transport" class="underline text-blue-300 hover:text-blue-400 cursor-pointer" target="_blank">GitHub repositoriossamme</a>, jossa voit myös halutessasi osallistua sivuston kehitykseen.</p>
<br />
</div>
<div class="checkboxes">
<input
type="checkbox"
id="followBusCheckbox"
name="followBusCheckbox"
/>
<label for="followBusCheckbox" class="text-white"
>Seuraa bussia</label
>
<input
type="checkbox"
id="showBusCheckbox"
name="showBusCheckbox"
class="ml-2"
checked
/>
<label for="showBusCheckbox" class="text-white">Bussit</label>
<input
type="checkbox"
id="showBicycleCheckbox"
name="showBicycleCheckbox"
class="ml-2"
checked
/>
<label for="showBicycleCheckbox" class="text-white">Pyörät</label>
</div>
<br />
</div>
</div>
</header>
<div id="busInfo" class="absolute top-32 right-2 text-center bg-gray-800 rounded-lg shadow-md p-2 z-10">
<button id="toggleBusInfo" class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 w-full mt-2">
<!-- <i class="tiny material-icons">dehaze</i> -->
Näytä/piilota
</button>
<div id="busInfoContent" class="rounded-lg"></div>
</div>
<div id="map" class="h-screen"></div>
<script type="module" src="script.js"></script>
</body>
</html>