Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove map form drop and pickup location. And Fixed issue no. #1977. #1978

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 101 additions & 53 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,23 @@
left: 0;
pointer-events: none;
z-index: 99999999;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function() {
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
} else if (userPrefersDark) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.add('light-mode');
}
})();
</script>
}

/* Wrapper for the logo and loader */
Expand Down Expand Up @@ -1337,79 +1354,108 @@ <h3>Local Guide Connection</h3>
});

</script>

<!-- Cab or Auto Booking -->
<img style="position: absolute;height: 450px;left: 1250px;z-index:10;top: 4200px;mix-blend-mode: multiply;"
src="img/BOOK-img.avif" alt="image">

<img style="position: absolute;height: 450px;left: 1250px;z-index:10;top: 4200px;mix-blend-mode: multiply;" src="img/BOOK-img.avif" alt="image">
<section id="cab-booking" class="cab-booking-section light-mode" style="border: 2px solid #FFFFFF;">
<div class="booking-container">
<h1 style="color: white; font-size: xx-large;">Book a Cab or Auto</h1>
<form action="/book-cab" method="POST">
<div class="form-group" style="display: flex; flex-wrap: wrap;">
<!-- <form action="/book-cab" method="POST"> -->

<!--Make sure the form has the autocomplete function switched off:-->
<div class="autocomplete-container">
<form autocomplete="off" action="/action_page.php" style="position: relative;">
<div class="autocomplete " >
<label for="pickup-location" style="font-size: 15px;"><strong>Pickup Location</strong></label>
<input id="myInput" type="text" name="myCountry" placeholder="Enter pickup location" >
</div>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe> -->
</form>
</div>
<div class="autocomplete-container">
<form autocomplete="off" action="/action_page.php" style="position: relative;">
<div class="autocomplete " >
<label for="pickup-location" style="font-size: 15px;"><strong>Drop Location</strong></label>
<input id="myInput" type="text" name="myCountry" placeholder="Enter drop location" >
</div>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe> -->
</form>
</div>



<!-- <div class="form-group" style="display: flex; flex-wrap: wrap;">
<label for="pickup-location" style="font-size: 15px;"><strong>Pickup Location</strong></label>
<input type="text" id="pickup-location" name="pickup-location" placeholder="Enter pickup location"
required />
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319"
width="100%" height="60" frameborder="0" style="border:0"></iframe>
<input type="text" id="pickup-location" onkeyup="changeInput(this.value)" class="form-control form-control-lg search" name="pickup-location" placeholder="Enter pickup location" required style="padding-left: 12px;" />
<div id="result1" class="list-group" >
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe>
</div>
<div class="form-group" style="display: flex; flex-wrap: wrap;">
<label for="drop-location" style="font-size: 15px;"><strong>Drop Location</strong></label>
<input type="text" id="drop-location" name="drop-location" placeholder="Enter drop location" required />
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319"
width="100%" height="60" frameborder="0" style="border:0"></iframe>
</div>

<form action="/book-cab" method="POST" style="
margin-left: 40px;
<input type="text" id="drop-location" onkeyup="changeInput(this.value)" class="form-control form-control-lg search" name="drop-location" placeholder="Enter drop location" required style="padding-left: 12px;"/>
<div id="result2" class="list-group">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="60" frameborder="0" style="border:0"></iframe>
</div> -->

<form
action="/action_page.php"
method="POST"
style="
/* margin-left: 40px; */
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
">

<div style="display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap;">
<label style="font-size: 1.5em; margin-right: 35px;" for="vehicle-type">
<strong>Vehicle Type</strong>
</label>

<select id="vehicle-type" name="vehicle-type" style="width: 150px; height: 35px; padding: 5px;" required>
<option value="cab">Cab</option>
<option value="auto">Auto</option>
<option value="Sharing cab">Sharing Cab</option>
<option value="Sharing cab">Sharing Auto</option>
<option value="Sharing cab">Bike</option>
<option value="Sharing cab">Premium Bike</option>
</select>
</div>
"
>

<div style="display: flex; align-items: center; margin-bottom: 20px; flex-wrap: wrap;">
<label style="font-size: 1.5em; margin-right: 35px;" for="vehicle-type">
<strong>Vehicle Type</strong>
</label>

<select
id="vehicle-type"
name="vehicle-type"
style="width: 150px; height: 35px; padding: 5px;"
required >
<option value="cab">Cab</option>
<option value="auto">Auto</option>
<option value = "Sharing cab">Sharing Cab</option>
<option value = "Sharing cab">Sharing Auto</option>
<option value = "Sharing cab">Bike</option>
<option value = "Sharing cab">Premium Bike</option>
</select>
</div>

<div class="form-group" style="display: flex; flex-wrap: wrap;">
<label for="travel-date" style="font-size: 15px;"><strong>Travel Date</strong></label>
<input type="date" id="travel-date" name="travel-date" required min="" />
<div class=" form-group" style="display: flex; flex-wrap: wrap; width: 100%;">
<label for="travel-date" style="font-size: 15px;"><strong>Travel Date</strong></label>
<input type="date" id="travel-date" name="travel-date" required min="" />

<!--Logic To prevent the user from selecting an old date -->
<!--Logic To prevent the user from selecting an old date -->

<script>
const today = new Date().toISOString().split('T')[0];
document.getElementById('travel-date').setAttribute('min', today);
</script>
<script>
const today = new Date().toISOString().split('T')[0];
document.getElementById('travel-date').setAttribute('min', today);
</script>

</div>
<div class="form-group" style="display: flex; flex-wrap: wrap;">
<label for="travel-time" style="font-size: 15px;"><strong>Travel Time</strong></label>
<input type="time" id="travel-time" name="travel-time" required />
</div>
</div>
<div class="form-group" style="display: flex; flex-wrap: wrap; width: 100%;">
<label for="travel-time" style="font-size: 15px;"><strong>Travel Time</strong></label>
<input type="time" id="travel-time" name="travel-time" required />
</div>



<!-- <button class="book-btn" type="submit" style="padding: 15px; font-size:20px;background-color: #ba5ae0;color: white;font-size: large;font-weight: bolder;">Book now</button> -->
<!-- <button class="book-btn" type="submit" style="padding: 15px; font-size:20px;background-color: #ba5ae0;color: white;font-size: large;font-weight: bolder;">Book now</button> -->

<div class="button-container">
<button class="book2-btn" type="submit">
Book now
</button>
</div>
</section>
<div class="button-container">
<button class="book2-btn" type="submit">
Book now
</button>
</div>
</section>

<style>
/* Main Section Styling */
Expand Down Expand Up @@ -4111,8 +4157,10 @@ <h2>Exclusive Deals and Offers!</h2>
<script src="path/to/visitorCounter.js"></script>
<script src="./assets/css/visitors.css"></script>

<script src="map autofill.js"></script>
<script src="visi.js"></script>
<script src="script.js"></script>


</body>
</html>
Loading