forked from Jungle-Bus/unroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (135 loc) · 7.26 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
<!DOCTYPE html>
<html>
<head>
<title>Unroll Kerala</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/tabulator-tables@4.6.3/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body class="w3-light-grey" onload="on_load()">
<!--
<header class="w3-container w3-junglebus">
<img src="img/Logo_Unroll.png" alt="Logo" class="w3-left w3-margin-right" style="height:80px">
<h1>Unroll Kerala</h1>
</header>
-->
<header class="w3-container w3-junglebus" style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; flex: 1;">
<img src="img/Logo_Unroll.png" alt="Logo" class="w3-left w3-margin-right" style="height:80px">
<h1><b>Unroll Kerala</b></h1>
</div>
<div class="w3-right" style="margin-top: 10px;">
<div style="display: inline-block; margin-right: 10px;">
<a href="about.html" style="text-decoration: none; color: inherit;">
<h4 class="w3-hover-opacity"><i class="fa fa-address-card-o fa-lg"></i> About</h4>
</a>
</div>
<!-- <div style="display: inline-block;">
<a href="https://github.com/opendatakerala/unroll" target="_blank" style="text-decoration: none; color: inherit;">
<h4 class="w3-hover-opacity"><i class="fa fa-github fa-lg w3-hover-opacity"></i> Source </h4>
</a>
</div> -->
</div>
</header>
<!-- Header -->
<header class="w3-display-container w3-content" style="max-width:1500px; overflow-x: hidden;">
<img class="w3-image" src="img/background.jpeg" alt="background img" title="image - Binaiks, Wikimedia Commons, License CC BY-SA 3.0" style="min-width:800px" width="1500">
<div class="w3-display-left w3-padding w3-col l6 m8">
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Search');"><i class="fa fa-search w3-margin-right"></i><span data-i18n="Search">Search</span></button>
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Geo');"><i class="fa fa-street-view w3-margin-right"></i><span data-i18n="Town">Town</span></button>
<button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Examples');"><i class="fa fa-exclamation w3-margin-right"></i><span data-i18n="Examples">Examples</span></button>
</div>
<!-- Tabs -->
<form id="Search" class="w3-container w3-white w3-padding-16 myLink">
<h3 data-i18n="Search routes">Search routes</h3>
<p id="error_network_ref"></p>
<div class="w3-row-padding" style="margin:0 -16px;">
<div class="w3-half">
<label for="search_ref" data-i18n="Line number">Line number</label>
<input id="search_ref" class="w3-input w3-border" type="text" placeholder="2A">
</div>
<div class="w3-half">
<label for="search_network" data-i18n="Operator / Network">Operator / Network</label>
<input id="search_network" class="w3-input w3-border" type="text" placeholder="KSRTC">
</div>
</div>
<p><button type="submit" class="w3-button w3-dark-grey" data-i18n="Search">Search</button></p>
</form>
<form id="Geo" class="w3-container w3-white w3-padding-16 myLink">
<h3 data-i18n="Search routes by town name">Search routes by town name</h3>
<p id="error_town"></p>
<!--<input id="search_town" class="w3-input w3-border" type="text" placeholder="Kochi"> -->
<select id="search_town" class="w3-select w3-border">
<option value="Kochi">Kochi</option>
<option value="Thiruvananthapuram">Thiruvananthapuram</option>
</select>
<p><button type="submit" class="w3-button w3-dark-grey" data-i18n="Display routes in town">Display routes in town</button></p>
</form>
<div id="Examples" class="w3-container w3-white w3-padding-16 myLink">
<h3 data-i18n="Check out some examples to get inspired">Check out some examples to get inspired</h3>
<p><button class="w3-button w3-dark-grey" onclick="display_examples()" data-i18n="Display examples">Display examples</button></p>
</div>
</div>
</header>
<div class="w3-content" style="max-width:1100px;">
<div class="w3-container w3-margin-top">
<div id="lines_stats"></div>
<div id="lines_table"></div>
</div>
<!-- End page content -->
</div>
<footer class="w3-container w3-junglelightbus w3-center w3-margin-top w3-tiny">
<p style="font-size:14px;">Mobility open data, proudly crafted by the OpenStreetMap community - Open source tool by <a href="https://junglebus.io" target="_blank">Jungle Bus</a>. Website forked from <a href="https://github.com/Jungle-Bus/unroll", target="_blank">Unroll</a></p>
<p style="font-size:14px;">Project maintained by <a href="https://opendatakerala.org" target="_blank">Open Data Kerala</a>,<a href="https://kerala.openstreetmap.in/" target="_blank">OSM Kerala</a>, <a href="https://geominds.in/" target="_blank">Geominds</a> and <a href="https://meta.wikimedia.org/wiki/Sahya_Digital_Conservation_Foundation" target="_blank">Sahya Digital Conservation Foundation</a>. Funded by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team </a> </p>
<div class="logo-container">
<img src="img/odk_logo.png" alt="Logo1" class="logo">
<img src="img/osmk-logo.svg" alt="Logo12" class="logo">
<img src="img/geominds.jpg" alt="Logo2" class="logo" style="height: 20px;">
<img src="img/SDCF-Logo.png" alt="Logo3" class="logo">
<img src="img/Hot_logo.svg.png" alt="Logo3" class="logo">
</div>
<div class="w3-xlarge">
<a href="https://github.com/opendatakerala/unroll" target="_blank"><i class="fa fa-github w3-hover-opacity"></i></a>
</div>
<div>
<p>Background image courtesy: Binaiks, <a href="https://creativecommons.org/licenses/by-sa/3.0" target="_blank">BY-SA 3.0</a>, via Wikimedia Commons</p>
</div>
</footer>
<script>
// Tabs
function openLink(evt, linkName) {
var i, x, tablinks;
x = document.getElementsByClassName("myLink");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-junglebus", "");
}
document.getElementById(linkName).style.display = "block";
evt.currentTarget.className += " w3-junglebus";
}
// Click on the first tablink on load
document.getElementsByClassName("tablink")[2].click();
// Add submit listeners
document.getElementById("Search").onsubmit = (event) => {
display_from_overpass(false);
event.preventDefault();
};
document.getElementById("Geo").onsubmit = (event) => {
display_from_overpass(true);
event.preventDefault();
};
</script>
<script src="https://unpkg.com/jungle_bus_web_components@1.0.2/src/transport_thumbnail.js"></script>
<script src="assets/papaparse.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.3/dist/js/tabulator.min.js"></script>
<script src="commons.js"></script>
<script src="index.js"></script>
</body>
</html>