Skip to content

Commit

Permalink
Merge pull request #111 from PriyaGhosal/revert-82-main
Browse files Browse the repository at this point in the history 
Revert "Updated the NavBar"
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 5, 2024
2 parents 39dd0e9 + a50c52e commit 5f40f18
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 143 deletions.
256 changes: 154 additions & 102 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,80 +16,69 @@
rel="stylesheet"
/>
<link rel="icon" href="/icons/airplane.svg" />

<title>BuddyTrail</title>

</head>
<body class="light-mode">

<button id="scrollTopBtn" class="scroll-top-btn">↑ Scroll to Top</button>

<!-- Google Translate Button -->
<div class="translate-container">
<button class="language-toggle" id="languageToggle">🌐</button>
<button class="language-toggle" id="languageToggle">
🌐
</button>
<div id="google_translate_element"></div>
</div>

<script>
// Initialization function
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'en',
includedLanguages:
'en,es,fr,de,it,pt,ja,zh-CN,hi,bn,ml,te,ta,gu,kn,or',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
},
'google_translate_element'
);
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,es,fr,de,it,pt,ja,zh-CN,hi,bn,ml,te,ta,gu,kn,or',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}

// Toggle button event
document
.getElementById('languageToggle')
.addEventListener('click', function () {
var translateElement = document.getElementById(
'google_translate_element'
);

document.getElementById('languageToggle').addEventListener('click', function() {
var translateElement = document.getElementById('google_translate_element');

// Toggle visibility
if (
translateElement.style.display === 'none' ||
translateElement.style.display === ''
) {
translateElement.style.display = 'block';
if (translateElement.style.display === 'none' || translateElement.style.display === '') {
translateElement.style.display = 'block';
} else {
translateElement.style.display = 'none';
translateElement.style.display = 'none';
}
});
});
</script>

<script src="script.js"></script>

<header class="main-head">
<nav>
<h1 id="logo">BuddyTrail</h1>

<ul>
<li><a href="#locations" class="navhover">Location</a></li>
<li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
<li><a href="#reviews" class="navhover">Reviews</a></li>
<li><a href="#benefits" class="navhover">Benefits</a></li>
<li><a href="#contact" class="navhover">Contact</a></li>
<ul >
<li><a href="#locations" class='navhover '>Location</a></li>
<li><a href="#itineraries " class='navhover'>Travel Itineraries</a></li>
<li><a href="#reviews" class='navhover'>Reviews</a></li>
<li><a href="#benefits" class='navhover'>Benefits</a></li>
<li><a href="#contact" class='navhover'>Contact</a></li>
</ul>

<!-- Toggle Button -->
<!-- Toggle Button -->
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
</nav>
</header>

<main>
<section class="hero">
<h2>Travel Beyond Limits</h2>
<h3>
Connect, Explore, and Discover Together. <br />
BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
</h3>
<button id="btn"><a href="book.html">Book now</a></button>
<button id="btn"><a href="book.html ">Book now</a></button>
</section>

<section id="locations">
Expand All @@ -103,12 +92,11 @@ <h3>
<img src="/img/cloud.png" class="moving-cloud-2 cloud" />
</header>
</section>

<section id="benefits">
<header class="benefits-head">
<h2>The Perfect Travel</h2>
<h2>The Perfect travel</h2>
<h3>
We cover everything from picking the perfect hotel, <br />to flight
we cover everything from picking the perfect hotel, <br />to flight
and destination
</h3>
</header>
Expand Down Expand Up @@ -141,15 +129,16 @@ <h4>Hotel</h4>
</div>
<h4>Fly</h4>
<p>
Fly to your dream destination without breaking the bank! We offer
the best flight deals, combining comfort and affordability for the
perfect journey. Book now and take off for less!
Fly to your dream destination without breaking the bank! We
offers the best flight deals, combining comfort and
affordability for perfect journey. Book now and take off for
less!
</p>
</div>
</div>
</section>

<section id="deals" class="deals-section">
<!-- deals -->
<section id="deals" class="deals-section">
<h2>Exclusive Deals and Offers</h2>
<p>Explore our best deals on flights, hotels, and travel packages. Save big on your next adventure!</p>

Expand Down Expand Up @@ -195,29 +184,71 @@ <h3>Adventure in Bali</h3>
</div>
</div>
</section>

<section id="itineraries">
<header class="itineraries-head">
<h2>Your Travel Itinerary Awaits!</h2>
<h3>Customize your journey with unique itineraries designed just for you!</h3>
</header>
<div class="itinerary-cards">
<div class="itinerary-card">
<h4>Beach Getaway</h4>
<p>Experience relaxation and fun at the world's most beautiful beaches!</p>
</div>
<div class="itinerary-card">
<h4>Mountain Adventure</h4>
<p>Explore breathtaking mountain trails and stunning landscapes!</p>
</div>
<div class="itinerary-card">
<h4>Cultural Immersion</h4>
<p>Discover vibrant cultures and historical landmarks!</p>
</div>

<!-- travel itineraries -->
<section id="itineraries" class="itineraries-section">
<h2>Travel Itineraries</h2>
<p>Plan your trips effortlessly with our curated travel itineraries tailored for different types of adventures. Whether you're planning a family vacation, a solo adventure, or a romantic getaway, we’ve got you covered!</p>

<div class="itinerary-list">
<div class="itinerary">
<h3>Family Vacation</h3>
<p>Explore the best family-friendly destinations with day-by-day guides that include must-see attractions and activities for all ages.</p>
<button>View Itinerary</button>
</div>
<div class="itinerary">
<h3>Solo Adventure</h3>
<p>Embark on a solo journey with our handpicked itineraries, offering exciting experiences and peaceful retreats just for you.</p>
<button>View Itinerary</button>
</div>
<div class="itinerary">
<h3>Romantic Getaway</h3>
<p>Plan the perfect romantic escape with itineraries that include serene locations, romantic dinners, and memorable experiences.</p>
<button>View Itinerary</button>
</div>
</div>
</section>

<section id="recommendations" class="recommendations-section">
</section>
<!-- Cab or Auto Booking -->
<section id="cab-booking" class="cab-booking-section">
<h2 style="font-size: 3em; font-weight: normal; margin-left: 40px;">Book a Cab or Auto</h2>
<p style="margin-left:40px; font-size:1.5em;">Book a cab or auto with ease</p>

<form action="/book-cab" method="POST" style="margin-left: 40px;">
<label style="font-size: 1.5em;"
for="pickup-location">Pickup Location:</label>
<input style="height: 29px;width:200px;"
type="text" id="pickup-location" name="pickup-location" placeholder="Enter pickup location" required><br><br>

<label style="font-size: 1.5em;"
for="drop-location">Drop Location:</label>
<input style="height: 29px;width:200px;"
type="text" id="drop-location" name="drop-location" placeholder="Enter drop location" required><br><br>

<label style="font-size: 1.5em;"
for="vehicle-type">Vehicle Type:</label>
<select id="vehicle-type" name="vehicle-type" required>
<option value="cab">Cab</option>
<option value="auto">Auto</option>
</select><br><br>

<label style="font-size: 1.5em;"
for="travel-date">Travel Date:</label>
<input style="height: 29px;width:200px;"
type="date" id="travel-date" name="travel-date" required><br><br>

<label style="font-size: 1.5em;"
for="travel-time">Travel Time:</label>
<input style="height: 29px;width:200px;"
type="time" id="travel-time" name="travel-time" required><br><br>

<input style="background-color:#007bff; color:white;border:none;border-radius: 5px;height:30px;cursor: pointer;"
type="submit" value="Book Now">
</form>
</section>


<!-- recommendations -->
<section id="recommendations" class="recommendations-section">
<h2>Personalized Recommendations</h2>
<p>We’ve picked these destinations, hotels, and activities just for you, based on your preferences.</p>

Expand Down Expand Up @@ -274,40 +305,40 @@ <h2>Contact US</h2>
</div>
</section>
</main>

<section id="reviews" class="reviews-section">
<h2>User Reviews and Ratings</h2>
<p>
Read what others have to say about their experiences with various
destinations, hotels, flights, and activities. Share your own reviews
and help fellow travelers make informed decisions.
</p>

<div class="review-form">
<!-- ratings by user -->
<section id="reviews" class="reviews-section">
<h2>User Reviews and Ratings</h2>
<p>Read what others have to say about their experiences with various destinations, hotels, flights, and activities. Share your own reviews and help fellow travelers make informed decisions.</p>

<div class="review-form">
<h3>Leave a Review</h3>
<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required />

<label for="destination">Destination/Service:</label>
<input type="text" id="destination" name="destination" required />

<label for="rating">Rating:</label>
<select id="rating" name="rating">
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>

<label for="review">Your Review:</label>
<textarea id="review" name="review" rows="4" required></textarea>

<button type="submit">Submit Review</button>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>

<label for="destination">Destination/Service:</label>
<input type="text" id="destination" name="destination" required>

<label for="rating">Rating:</label>
<select id="rating" name="rating">
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>

<label for="review">Your Review:</label>
<textarea id="review" name="review" rows="4" required></textarea>
<label for="complaint">Complaint (if any):</label>
<textarea id="complaint" name="complaint" rows="3" placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>



<button type="submit">Submit Review</button>
</form>
</div>

</div>
<div class="reviews-list">
<h3>What Others Are Saying</h3>
<!-- Example Review -->
Expand Down Expand Up @@ -350,13 +381,13 @@ <h4>Aditi Patel - New York</h4>
<h5>BuddyTrail &copy;</h5>
<ul>
<li>
<a href="#"><img src="icons/twitter.svg" /></a>
<a href="#" class="twitter" id="social-icons"><img src="icons/twitter.svg" /></a>
</li>
<li>
<a href="#"><img src="icons/instagram.svg" /></a>
<a href="#" class="instagram " id="social-icons"><img src="icons/instagram.svg" /></a>
</li>
<li>
<a href="#"><img src="icons/youtube.svg" /></a>
<a href="#" class="youtube " id="social-icons"><img src="icons/youtube.svg" /></a>
</li>
</ul>
</div>
Expand All @@ -370,6 +401,27 @@ <h2>Exclusive Deals and Offers!</h2>
<button onclick="window.location.href='#deals'">Check Out Deals</button>
</div>
</div>
<script>
// script.js
window.onscroll = function() {
toggleScrollTopButton();
};

const scrollTopBtn = document.getElementById("scrollTopBtn");

function toggleScrollTopButton() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
scrollTopBtn.style.display = "block"; // Show button after scrolling down
} else {
scrollTopBtn.style.display = "none"; // Hide button when at the top
}
}

scrollTopBtn.onclick = function() {
window.scrollTo({ top: 0, behavior: 'smooth' }); // Smooth scroll to top
};

</script>

</body>
</html>
Loading

0 comments on commit 5f40f18

Please sign in to comment.