This repository has been archived by the owner on Dec 24, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
116 lines (105 loc) · 7.87 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.js'></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.2.2/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="js/plan.js"></script>
<script type="text/javascript" src="js/polyline.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:100%;}
</style>
</head>
<body>
<div id='map'></div>
<div class="row">
<div id="modal-simple" class="col-md-4 col-sm-6 col-xs-8" style="padding:5px; margin-left:15px; overflow:hidden;top:60px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;background:rgba(255,255,255,1);-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;">
<form role="form" class="planner-options-form validateDontSubmit form-inline" id="planner-options-form">
<div class="row">
<div style="margin:0px;" class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-6">
<div class="input-group input-group-sm planner-options-inputgroup-from" id="planner-options-inputgroup-from">
<label class="input-group-addon planner-options-input-addon required label-from" for="planner-options-from"><span class="glyphicon glyphicon-play-circle"></span></label>
<input id="planner-options-from" type="text" title="From" aria-required="true" class="planner-place form-control" placeholder="Train station, bus stop, or address" x-webkit-speech="x-webkit-speech" required="required" />
<input id="planner-options-from-latlng" type="hidden" />
</div>
</div>
<div style="margin:0px;" class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-6">
<div class="input-group input-group-sm planner-options-inputgroup-dest" id="planner-options-inputgroup-dest">
<label class="input-group-addon planner-options-input-addon required label-dest" for="planner-options-dest"><span class="glyphicon glyphicon-record"></span></label>
<input id="planner-options-dest" type="text" title="To" aria-required="true" class="planner-place form-control" placeholder="Train station, bus stop, or address" x-webkit-speech="x-webkit-speech" required="required" />
<input id="planner-options-dest-latlng" type="hidden" />
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="input-group input-group-sm planner-options-dateinput" id="planner-options-inputgroup-time">
<label class="input-group-addon planner-options-input-addon label-time" for="planner-options-time"><span class="glyphicon glyphicon-time"></span></label>
<input id="planner-options-time" type="time" title="Time" aria-described-by="planner-options-timeformat" aria-required="true" class="form-control" required="required" />
<div class="input-group-addon planner-options-input-addon" id="planner-options-timeformat">h:mma</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="input-group input-group-sm planner-options-dateinput" id="planner-options-inputgroup-date">
<label class="input-group-addon planner-options-input-addon label-date" for="planner-options-date"><span class="glyphicon glyphicon-calendar"></span></label>
<input id="planner-options-date" type="text" title="Date" aria-label="Datumkiezer, gebruik Ctrl en pijltjes om te navigeren" aria-required="true" class="form-control" required="required" />
</div>
</div>
</div>
<!-- row -->
<!-- <div id="planner-options-date-messages" class="accessibility-helper" aria-live="assertive" aria-atomic="true" aria-relevant="additions"></div> -->
</form>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-xs btn-danger" onclick="clearHash()"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="btn btn-xs btn-info" id="plan-trip" onclick="submit()"><span class="glyphicon glyphicon-play"></span></button>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-xs btn-default mode-option">
<input type="radio" name="mode-select" value="TRANSIT,WALK" id="train" checked><img src="images/Train.svg" width="26" height="27">
</label>
<label class="btn btn-xs btn-default mode-option">
<input type="radio" name="mode-select" value="BUS,WALK" id="bus"><img src="images/Bus.svg" width="26" height="27"><!-- <span class="glyphicon svg-icon-bus"></span> -->
</label>
<label class="btn btn-xs btn-default mode-option">
<input type="radio" name="mode-select" value="BICYCLE" id="bike"><img src="images/Bike.svg" width="26" height="27">
</label>
<label class="btn btn-xs btn-default mode-option">
<input type="radio" name="mode-select" value="CAR" id="car"><img src="images/Car.svg" width="26" height="27">
</label>
<label class="btn btn-xs btn-default mode-option">
<input type="radio" name="mode-select" value="WALK" id="pedestrian"><img src="images/Pedestrian.svg" width="26" height="27">
</label>
<label class="btn btn-xs btn-default mode-option popover-dismiss" data-toggle="popover">
<input type="radio" name="mode-select" value="" id="specialized"><img src="images/Specialized.svg" width="26" height="27">
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="planner-advice-div" class="hidden col-md-4 col-sm-6 col-xs-8" style="padding:5px; margin-top:10px; margin-left:15px; overflow:hidden;top:60px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:rgba(255,255,255,1);-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;">
<div class="btn-group-vertical btn-xs col-xs-12 col-sm-12 col-md-12 col-lg-12" id ="planner-advice-list" data-toggle="buttons"></div>
<button type="button" class="hidden btn btn-xs btn-default" onclick="toggleResults();" id="hide-results"><span class="glyphicon glyphicon-chevron-up"></span><span class="glyphicon glyphicon-chevron-down"></span></button>
<div class="hidden col-md-12" style="max-height:350px; overflow: scroll; overflow-x: hidden;" id="planner-advice-container" aria-hidden="true" style="display: none;">
<div class="row">
<div class="clearfix visible-xs"></div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="list-group" id="planner-leg-list"></ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>