-
Notifications
You must be signed in to change notification settings - Fork 0
/
fare.html
237 lines (203 loc) · 7.3 KB
/
fare.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rickshaw Booking</title>
<style>
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style for the fare section */
.fare {
padding: 20px;
background-color: #ffffff;
}
/* Style for the fare container */
.farecon {
max-width: 700px;
margin: 40px auto;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Style for the heading */
.fare h1 {
text-align: center;
margin-bottom: 20px;
}
/* Style for the form */
.form-fare {
display: flex;
flex-direction: column;
}
/* Style for the form labels */
.form-fare label {
margin-bottom: 10px;
font-weight: bold;
}
/* Style for the select elements */
.form-fare select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
/* Style for the fare button */
.farebutton {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.farebutton:hover {
background-color: #0056b3;
}
/* Style for the fare result */
#fareResult {
margin-top: 20px;
text-align: center;
font-weight: bold;
}
/* Style for the book ride button */
.form-fare a {
text-align: center;
margin-top: 20px;
color: #218838;
text-decoration: none;
}
.form-fare a:hover {
text-decoration: underline;
}
.form-fare button {
width: 100%;
padding: 10px;
background-color: #28783b;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-fare button:hover {
background-color: #3ab055;
}
</style>
</head>
<body>
<section class="fare">
<div class="farecon">
<h1>Auto Booking</h1>
<div class="form-fare">
<label for="pickup">Pickup Location:</label>
<select id="pickup" name="pickup">
<option value="PillaiCollege">Pillai's College</option>
<option value="PanvelStation">Panvel Station</option>
<option value="OrionMall">Orion Mall</option>
<option value="PillaisBoysHostel">Pillai's Boys Hostel</option>
<option value="VadaleLake">Vadale Lake</option>
<option value="KhandaColony">Khanda Colony</option>
<option value="Vichumbe">Vichumbe</option>
<!-- Add more options as needed -->
</select>
<label for="destination">Destination:</label>
<select id="destination" name="destination">
<option value="PillaiCollege">Pillai's College</option>
<option value="PanvelStation">Panvel Station</option>
<option value="OrionMall">Orion Mall</option>
<option value="PillaisBoysHostel">Pillai's Boys Hostel</option>
<option value="VadaleLake">Vadale Lake</option>
<option value="KhandaColony">Khanda Colony</option>
<option value="Vichumbe">Vichumbe</option>
<!-- Add more options as needed -->
</select>
<button class="farebutton" onclick="calculateFare()">
Estimated Fare
</button>
<p id="fareResult"></p>
<!-- <button class="book">Book</button> -->
<a onclick="bookRide()"><button>Book Your Ride</button></a>
<a href="index.php">Go to Home Page</a>
</div>
</div>
</section>
<script>
// Define fare rates per kilometer and base fare
const farePerKm = 10; // Fare per kilometer in rupees
const baseFare = 23; // Base fare in rupees
// Location coordinates (latitude and longitude)
const locationCoordinates = {
PillaiCollege: [18.9902, 73.1277], // Pune coordinates18.9902° N, 73.1277° E pillai
PanvelStation: [18.98932, 73.12229], // Mumbai coordinates18.98932°N 73.12229°E station
OrionMall: [18.9934303, 73.1157848], // Delhi coordinates Latitude: 18.9934303. Longitude: 73.1157848 orion
PillaisBoysHostel: [19.017429, 73.107742], // Delhi coordinates Latitude: 18.9934303. Longitude: 73.1157848 orion
VadaleLake: [19.003990, 73.031723], // Delhi coordinates Latitude: 18.9934303. Longitude: 73.1157848 orion
KhandaColony: [19.0094, 73.1114], // 19.0094° N, 73.1114° EDelhi coordinates Latitude: 18.9934303. Longitude: 73.1157848 orion
Vichumbe: [18.9857, 73.1347] // 18.9857° N, 73.1347° E EDelhi coordinates Latitude: 18.9934303. Longitude: 73.1157848 orion
// Add more locations as needed
};
// Function to calculate distance using Haversine formula
function calculateDistanceInKm(source, destination) {
const earthRadiusKm = 6371; // Radius of the Earth in kilometers
const [lat1, lon1] = source;
const [lat2, lon2] = destination;
const dLat = degreesToRadians(lat2 - lat1);
const dLon = degreesToRadians(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = earthRadiusKm * c;
return distance;
}
// Function to convert degrees to radians
function degreesToRadians(degrees) {
return degrees * (Math.PI / 180);
}
// Function to calculate fare
function calculateFare() {
const pickupLocation = document.getElementById("pickup").value;
const destinationLocation = document.getElementById("destination").value;
// Retrieve coordinates for pickup and destination locations
const source = locationCoordinates[pickupLocation];
const destination = locationCoordinates[destinationLocation];
// Calculate distance
const distanceInKm = calculateDistanceInKm(source, destination);
// Calculate fare
const fare = calculateFareBasedOnDistance(distanceInKm);
// Display fare
document.getElementById("fareResult").innerText = `Estimated fare for the journey is: ₹${fare.toFixed(2)}`;
}
// Function to calculate fare based on distance
function calculateFareBasedOnDistance(distanceInKm) {
// Calculate fare
const fare = baseFare + (farePerKm * distanceInKm);
return fare;
}
function bookRide() {
// Calculate fare first
calculateFare();
// Retrieve pickup and destination locations
const pickupLocation = document.getElementById("pickup").value;
const destinationLocation = document.getElementById("destination").value;
// Store pickup and destination locations in sessionStorage
sessionStorage.setItem("pickupLocation", pickupLocation);
sessionStorage.setItem("destinationLocation", destinationLocation);
// Store fare in sessionStorage
const fare = document.getElementById("fareResult").innerText;
sessionStorage.setItem("fare", fare);
// Redirect to invoice page
window.location.href = "invoice.html";
}
</script>
<!-- <script src="map.js"></script> -->
</body>
</html>