-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
140 lines (127 loc) · 5.92 KB
/
homepage.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
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-pink.min.css" />
<!-- Uses a header that contracts as the page scrolls down. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.mdl-layout__header-row {
padding: 0 16px 0 16px;
}
a {
cursor: pointer;
}
</style>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
/* body { margin: 0; padding: 0; } */
#map { position: -webkit-sticky; position: sticky; top:300px; left: 1000px; }
</style>
<link rel="icon" href="img/favicon.png">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<img src="img/logo.png" class="center" width="480"
height="50" style="vertical-align:middle;margin:0px 50px">
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Choose language</a>
<label class="mdl-button mdl-js-button mdl-button--icon"
for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="search">
</div>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title" id = "userProfile"></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="homepage.html">Home page</a>
<a class="mdl-navigation__link" href="viewall.html">View All Bookings</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<h2>
Book your taxi:
</h2>
<!--Calendar and clock for start date and time-->
<div>
<label for="start">Trip date:</label>
<input type="date" id="startDate" name="trip-start">
</div>
<br><br>
<div>
<label for="appt">Book Time:</label>
<input type="time" id="startTime" name="startTime" min="00:00" max="23:59" required>
</div>
<p>
</p>
<!-- Textfield with Floating Label -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="pickUpAddress">
<label class="mdl-textfield__label" for="sample3">Select Pickup Address:</label>
</div>
<!-- Colored raised button -->
<br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="dropOffAddress">
<label class="mdl-textfield__label" for="sample3">Select Drop Off Address:</label>
</div>
<p>
</p>
<br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="addedStop">
<label class="mdl-textfield__label" for="sample3">Add another stop:</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
onclick="addStop()">Add stop</button>
<p>
</p>
<label for="taxiType"></label>
Select Taxi Type:
<select name="taxiType" id="taxiType">
<option value = "1">Car</option>
<option value = "2">SUV</option>
<option value = "3">Van</option>
<option value = "4">Minibus</option>
</select>
<p>
</p>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
onclick="checkConfirm()">Book Taxi</button>
<p>
</p>
<img src="img/favicon.png" width="50"
height="50">
</div>
<div class="mdl-cell mdl-cell--4-col">
<div id='map' style='width:100%; height:80vh;'></div>
</div>
</div>
</div>
</main>
</div>
<!-- Map div -->
<script src="js/Services.js"></script>
<script src="js/Map.js"></script>
<script src="js/BookingInfo.js"></script>
<script src="js/Shared.js"></script>
<script src="js/Main.js"></script>
</body>