check

Taxi Booking App – Customer

Taxi Booking App – Driver

In-Drive App

/* Reset default styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Header & Navigation Bar */
header {
background-color: #333;
padding: 10px 0;
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}

/* Main Section */
#main {
display: flex;
justify-content: space-around;
margin: 20px;
}

#map {
width: 50%;
height: 400px;
background-color: #f0f0f0;
}

#booking-form {
width: 40%;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#booking-form h2 {
margin-bottom: 15px;
}

#booking-form label {
display: block;
margin: 5px 0;
}

#booking-form input,
#booking-form select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

#booking-form button {
width: 100%;
padding: 10px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
}

/* Footer */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}

// Function to initialize the Google Map
function initMap() {
// Get user’s current location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
const userLocation = { lat: position.coords.latitude, lng: position.coords.longitude };

// Create a map centered around the user’s location
const map = new google.maps.Map(document.getElementById(“map”), {
zoom: 14,
center: userLocation,
});

// Add a marker at the user’s location
new google.maps.Marker({
position: userLocation,
map: map,
title: “Your Location”,
});
});
} else {
alert(“Geolocation is not supported by this browser.”);
}
}

// Handle form submission
document.getElementById(“ride-form”).addEventListener(“submit”, function(event) {
event.preventDefault(); // Prevent form submission

const pickupLocation = document.getElementById(“pickup-location”).value;
const dropLocation = document.getElementById(“drop-location”).value;
const cabType = document.getElementById(“cab-type”).value;

// Basic validation
if (pickupLocation && dropLocation) {
alert(`Booking successful!\nPickup: ${pickupLocation}\nDrop: ${dropLocation}\nCab Type: ${cabType}`);
} else {
alert(“Please fill in all fields.”);
}
});

Tiger Cabs