diff --git a/index.html b/index.html index 9b2890de..5168faab 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,26 @@ - - - - - - + + + + + + + - + - + - - - - - - - - - - - - - - - - - - - - BuddyTrail - + + - - - + - - - -
-
- -
-
-
Ready to Explore the World...
-
- - + - - + - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - + -
+
-

Travel Beyond Limits

+
+

Travel Beyond Limits

+

Connect, Explore, and Discover Together.
BuddyTrail: Your Journey Begins with the Perfect Travel Companion.

-
+ Book now
- + - -
-
+ + + + + + +
+ +
+ +
- - - - + + + - - + // Scroll event to handle header transparency + window.addEventListener("scroll", function () { + if (window.scrollY > 50) { // If scrolled more than 50px + mainHead.classList.add("shadow"); + } else { + mainHead.classList.remove("shadow"); + } + }); + }); + - + -
- - -
+
+ + +
-

Ready for Your Next Adventure?

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); background-image: linear-gradient(to right, #6a11cb, #2575fc); "> - We handle everything, from finding the ideal travel buddy to - selecting your perfect hotel, flight, and destination. - + We handle everything, from finding the ideal travel buddy to + selecting your perfect hotel, flight, and destination. + - +
@@ -672,94 +740,96 @@

-
- - -
-
-
- Travel Icon -
-

Travel

-

- Discover budget-friendly getaways for families and friends! From serene - mountains to sunny beaches, find your next adventure without breaking the - bank. Start exploring now! -

- Explore more -
-
+
- -
-
-
- Hotel Icon -
-

Hotel

-

- We've handpicked top-rated options that offer exceptional value. Book your - perfect stay today and enjoy premium accommodations without the premium - price tag! -

- See Hotels -
-
+ +
+
+
+ Travel Icon +
+

Travel

+

+ Discover budget-friendly getaways for families and friends! From serene + mountains to sunny beaches, find your next adventure without breaking the + bank. Start exploring now! +

+ Explore more +
+
- -
-
-
- Fly Icon -
-

Fly

-

- Fly to your dream destination without breaking the bank! We offer the best - flight deals, combining comfort and affordability for perfect journey. - Book now and take off for less! -

- See Flights -
-
+ +
+
+
+ Hotel Icon +
+

Hotel

+

+ We've handpicked top-rated options that offer exceptional value. Book your + perfect stay today and enjoy premium accommodations without the premium + price tag! +

+ See Hotels +
+
-
- - - + .dark-mode .card p { + color: #fff; + } + + + + -
-

Exclusive Deals and Offers

-

Explore our best deals on flights, hotels, and travel packages. Save big on your next adventure!

+

Exclusive Deals and Offers

+

Explore our best deals on flights, hotels, and travel packages. Save big on your next adventure!

-
+ + +
+
- + h2 { + font-size: xx-large; + margin-bottom: 1.5rem; + } + + p { + color: #333; + font-size: 1.1rem; + margin-bottom: 1.2rem; + } + + /* Carousel Styling */ + .carousel { + position: relative; + overflow: hidden; + width: 940px; + max-width: 1000px; + margin: 0 auto; + height: 450px; + display: flex; + align-items: center; + } - + to { + transform: translateX(0); + } + } + + .carousel-inner { + animation: slideIn 0.5s ease-in-out; + } + + /* Deal Title and Price Styling */ + h3 { + font-size: 1.8rem; + color: #ffffff; + margin-bottom: 0.8rem; + transition: color 0.4s ease; + } + + p { + transition: color 0.4s ease; + } + + .discount { + text-decoration: line-through; + color: #6cff43; + /* Discount text in a noticeable orange */ + } + + .btn-book-now { + position: fixed; + top: 84%; + left: 34%; + } + + + - -
-

TRAVEL ITINERARIES

+ +
+

TRAVEL ITINERARIES

-

- 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! -

+

+ 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! +

-
-
+
+
-

Family Vacation

-

Explore the best family-friendly destinations with day-by-day guides that include must-see attractions and activities for all ages.

- +

Family Vacation

+

Explore the best family-friendly destinations + with day-by-day guides that include must-see attractions and activities for all ages.

+
-
+
-
+
-

Solo Adventure

-

Embark on a solo journey with our handpicked itineraries, offering exciting experiences and peaceful retreats just for you.

- +

Solo Adventure

+

Embark on a solo journey with our handpicked + itineraries, offering exciting experiences and peaceful retreats just for you.

+
-
+
-
+
-

Romantic Getaway

-

Plan the perfect romantic escape with itineraries that include serene locations, romantic dinners, and memorable experiences.

- +

Romantic Getaway

+

Plan the perfect romantic escape with + itineraries that include serene locations, romantic dinners, and memorable experiences.

+
+
-
-
+
- + /* Dark Mode Styling */ + .dark-mode #itineraries h2 { + color: #ffa500; + } + + .dark-mode #itineraries h3 { + color: #ffa500; + } + + .dark-mode #itineraries p { + color: #fff; + } + + .dark-mode .itinerary { + background-color: #0e0e0e; + } + + .dark-mode .itinerary p { + color: #2c2fdf; + } +
@@ -1271,29 +1364,42 @@

Our Services

-
- -
-

Travel Map

-

Explore popular destinations across India and the world. Click on markers to learn more about each location. + +

+ + +

Travel Map

+
+

Explore popular destinations across India and the world. Click on markers to learn more about each + location.

-
- -
-

Hotel Finder

+ +
+ +
+
+ +

Hotel Finder

+

Find the best hotels at affordable rates, handpicked to suit your budget and preferences.

-
- -
-

Flight Booking

+ +
+ +
+
+ +

Flight Booking

+

Book flights at the best prices, with options tailored to your travel needs.

@@ -1301,26 +1407,34 @@

Our Services

+ + +

Travel Blog

+

Read tips, guides, and personal stories from seasoned travelers.

- -
-
+ +
+ +
-
-

Local Guide Connection

-

Partner with local guides and tour providers, allowing to book personalized tours or experiences led by locals for an authentic travel experience.

-
+
+ + +

Local Guide Connection

+
+

Partner with local guides and tour providers, allowing to book personalized tours or experiences led by + locals for an authentic travel experience.

+
- image + image

Book a Cab or Auto

- - + +
- +
- - -
- - - -
+ "> + +
+ + + +
-
- - +
+ + - + - + -
-
- - -
+
+
+ + +
- + -
- -
-
+
+ +
+ - + /* Booking Container Styling */ + .booking-container { + width: 80%; + /* Increase width of the container */ + max-width: 1200px; + /* Limit max width for larger screens */ + margin: 0 auto; + /* Center align the container */ + background: linear-gradient(135deg, #5fc0d6, #2193b0); + /* Eye-catching gradient */ + border-radius: 10px; + padding: 30px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + /* Subtle shadow for depth */ + transition: transform 0.3s, box-shadow 0.3s; + } + + .booking-container:hover { + transform: scale(1.02); + /* Slight scale effect on hover */ + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); + /* Increase shadow on hover */ + } + + /* Heading Styles */ + .cab-booking-section h2 { + color: white; + /* Match with gradient background */ + text-align: center; + margin-bottom: 30px; + transition: color 0.3s; + } + + .cab-booking-section h2:hover { + color: #f1f1f1; + /* Slight lightening effect on hover */ + } + + /* Form Group Styles */ + .form-group { + background-color: rgba(255, 255, 255, 0.9); + /* Semi-transparent white background */ + border-radius: 5px; + padding: 15px; + margin-bottom: 20px; + transition: background-color 0.3s; + } + + .form-group:hover { + background-color: rgba(255, 255, 255, 1); + /* Fully opaque on hover */ + } + + /* Label and Input Styles */ + label { + color: #333; + } + + input[type="text"], + input[type="date"], + input[type="time"], + select { + width: 200px; + padding: 12px; + border-radius: 5px; + border: 2px solid #ddd; + transition: border-color 0.3s, box-shadow 0.3s; + } + + input[type="text"]:focus, + input[type="date"]:focus, + input[type="time"]:focus, + select:focus { + border-color: #2193b0; + box-shadow: 0 0 5px rgba(33, 147, 176, 0.5); + /* Match gradient color */ + } + + /* Button Styling */ + .book-btn { + background: linear-gradient(135deg, #2193b0, #6dd5ed); + /* Smooth gradient */ + color: #fff; + padding: 12px 24px; + /* Balanced padding for a better look */ + font-size: 18px; + /* Slightly smaller font for a cleaner appearance */ + border: none; + border-radius: 8px; + /* Smoothly rounded corners */ + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + /* Subtle shadow for depth */ + transition: background 0.3s ease, transform 0.2s ease; + cursor: pointer; + /* Pointer cursor for better interactivity */ + width: fit-content; + /* Ensures the button fits the content */ + } + + .book-btn:hover { + background: linear-gradient(135deg, #6dd5ed, #2193b0); + /* Reverse gradient on hover */ + transform: translateY(-3px); + /* Slight lift effect on hover */ + } + + .book-btn:active { + transform: translateY(1px); + /* Pressed effect for click feedback */ + } + + + /* Main Section Styling */ + .cab-booking-section { + background-color: #f9f9f9; + padding: 40px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + + /* Background color for form groups */ + .form-group { + background-color: #e8f4fa; + /* Light blue background for each form group */ + border-radius: 5px; + padding: 15px; + /* Padding around the inputs */ + margin-bottom: 20px; + transition: background-color 0.3s; + /* Transition for background color on hover */ + } + + .form-group:hover { + background-color: #d1e7f9; + /* Darker blue on hover */ + } + + /* Heading Styles */ + .cab-booking-section h2 { + color: #4a90e2; + text-align: center; + margin-bottom: 30px; + transition: color 0.3s; + } + + .cab-booking-section h2:hover { + color: #007bff; + /* Color changes on hover */ + } + + /* Label Styles */ + label { + display: block; + color: #333; + font-size: 15px; + margin-bottom: 5px; + } + + /* Input Styles */ + input[type="text"], + input[type="date"], + input[type="time"], + select { + width: 100%; + /* Increased width for text inputs */ + padding: 12px; + border: 2px solid #ddd; + border-radius: 5px; + transition: border-color 0.3s, box-shadow 0.3s; + } + + input[type="text"]:focus, + input[type="date"]:focus, + input[type="time"]:focus, + select:focus { + border-color: #4a90e2; + box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); + } + + /* Button Styles */ + .book-btn { + background-color: #4a90e2; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + padding: 15px; + font-size: 20px; + transition: background-color 0.3s, transform 0.2s; + } + + .book-btn:hover { + background-color: #007bff; + /* Button color on hover */ + transform: scale(1.05); + /* Slight zoom effect */ + } + + /* Responsive Iframe Styles */ + iframe { + border: none; + border-radius: 5px; + margin-top: 10px; + transition: transform 0.3s; + } + + iframe:hover { + transform: scale(1.02); + /* Slight zoom effect on iframe */ + } + + /* Flex Container for Vehicle Type */ + .form-group { + display: flex; + align-items: center; + } + + /* Vehicle Type Dropdown Styling */ + select { + margin-left: 10px; + } + @@ -1629,7 +1771,7 @@

Book a Cab or Auto

Personalized Recommendations

-

+

We’ve picked these destinations, hotels, and activities just for you, based on your preferences.

@@ -1638,122 +1780,124 @@

Personalized Recommendations

-

Beach Resort in Goa

-

- Based on your love for sunny destinations, we recommend this - beachfront resort in Goa for a perfect getaway. -

- -
+

Beach Resort in Goa

+

+ Based on your love for sunny destinations, we recommend this + beachfront resort in Goa for a perfect getaway. +

+ + +
-

Cultural Tour in Rajasthan

-

- Explore the rich cultural heritage of Rajasthan. This tour is - highly recommended based on your interest in historical places. -

- -
+

Cultural Tour in Rajasthan

+

+ Explore the rich cultural heritage of Rajasthan. This tour is + highly recommended based on your interest in historical places. +

+ + +
-

Adventure Trek in Himachal

-

- For the adventure lover in you, we recommend a thrilling trek in - the mountains of Himachal Pradesh. -

- -
+

Adventure Trek in Himachal

+

+ For the adventure lover in you, we recommend a thrilling trek in + the mountains of Himachal Pradesh. +

+ + +
- -
-

Packing Checklist

-

🌍 Choose your travel style to receive a personalized packing checklist ✈️, curated from seasoned travelers 🧳!

-
- - - -
-
- - - +
-
-

Emergency SOS

-

In case of an emergency, press the button to send your current location to your emergency contacts.

- -
-
+
+

Emergency SOS

+

In case of an emergency, press the button to send your current + location to your emergency contacts.

+ +
+
@@ -1995,356 +2166,382 @@

Upload Content

-
-

Content

- - -
-
- +
+

Content

+ + +
+ + + + + + + #submit:hover { + background-color: #744caf; + } -

Travel Discussion Forum

-
- - - - - - -
- -

Destination Guide

-
+ } + +

Destination + Guide

+
-
+

Share Your Experiences

- - + +
-
- - -
- Destination Image -
-
+ +
+ Destination Image +
+
-
+
-
-

Explore Popular Destinations

-

Click on the markers to learn more about each destination.

-
-
+
+

Explore Popular Destinations

+

Click on the markers to learn more about each destination.

+
+
- -
-
-

Get in Touch with BuddyTrail

-
-
-
-
- - - - -
-
-

Our Address

-

123 Trailblazer Lane, Adventure City

-
-
-
-
- - - - - -
-
-

Contact

-

Mobile: +91 921 456-7890

-

Mail: buddyTrail@gmail.com

-
-
-
-
- - - - -
-
-

Working Hours

-

Monday - Friday: 08:00 - 17:00

-

Saturday & Sunday: 08:00 - 12:00

-
-
-
-

About BuddyTrail

-

At BuddyTrail, we're passionate about connecting adventurers and making every trail an unforgettable experience. Our platform is designed to help you discover new paths, meet like-minded explorers, and create lasting memories in the great outdoors.

-
-
-
-

Send Us a Message

-
-
- - -
-
- - - -
-
- - -
- -
-
-
+ max-width: 1200px; + margin: 0 auto; + padding: 20px; + } + +
+
+

Get in Touch with BuddyTrail

+
+
+
+
+ + + + +
+
+

Our Address

+

123 Trailblazer Lane, Adventure City

+
-
- + textarea.form-control { + resize: none; + } - -
@@ -2796,140 +3005,140 @@

Thank You!

-
-

Testimonials

+
+

Testimonials

+ +
+
+
+
+
+

It made solo travel a breeze! I met amazing companions and discovered hidden gems.

+
+

Wisteria Ravenclaw

+

Traveller

+
+
+
+
+
+ +
+
+

Finding the perfect travel group was so easy with Buddy Trail. Unforgettable trips, hassle-free + planning! +

+
+

Ursula Gurnmeister

+

Traveller

+
+
+
+
+
+ +
+
+

I found great travel buddies for my Europe trip! The platform is intuitive and made my adventure even + better.

+
+

Ingredia Nutrisha

+

Traveller

+
+
+
+
+
+ + + .snip1533 h4 { + font-size: 1rem; + color: #34495e; + } + + /* Hover Text Color Effect */ + .snip1533:hover h3 { + color: #7a15be; + } + + .snip1533:hover h4 { + color: #004d40; + } + + /* Glowing Border Animation */ + .snip1533:hover { + border: 2px solid rgba(0, 150, 136, 0.2); + box-shadow: 0 0 15px rgba(0, 150, 136, 0.4), 0 0 25px rgba(0, 150, 136, 0.2); + } + @@ -2945,20 +3154,19 @@

Rate your experience

- - + + - + -
- - - - - - - - - - -
+ + + + + + + + + + +
+
- - + - + @@ -3005,46 +3213,46 @@

Rate your experience

@@ -3053,62 +3261,62 @@

Rate your experience

+ - + @@ -3117,73 +3325,73 @@

Rate your experience

-
- TrailBot - -
-
-
-
- - +
+ TrailBot + +
+
+
+
+ +
+ document.addEventListener('DOMContentLoaded', function () { + document.getElementById('contactForm').addEventListener('submit', async function (event) { + event.preventDefault(); // Prevent the default form submission + + const name = document.getElementById('name').value; + const email = document.getElementById('email').value; + const message = document.getElementById('message').value; + + // Create an object with the form data + const formData = { + name: name, + email: email, + message: message + }; + + console.log('Form Data:', formData); // Debugging statement + + try { + // Send the data to the backend + const response = await fetch('http://localhost:5000/api/contact/', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(formData) + }); + + // Check if the response is ok (status code 200-299) + if (response.ok) { + const result = await response.json(); + alert(result.message); // Show success message + // Optionally reset the form + document.getElementById('contactForm').reset(); + } else { + const errorData = await response.json(); + alert(`Error: ${errorData.message}`); // Show error message + } + } catch (error) { + alert('Failed to send message. Please try again later.'); // Handle network errors + console.error('Error:', error); + } + }); + }); + - + + + - - - + + - // + // + + function closePopup() { + document.getElementById('confirmationPopup').style.display = 'none'; + } + -
+
- + - - - + + - + .custom-alert p { + /* white color text on black background will look nice */ + color: white; + margin: 0; + line-height: 1.5; + } + -
- - +
+ + - - main - -
- + - -
- 🗨️ -
+ +
+ 🗨️ +
- -
- -
+ +
+ +


@@ -3696,9 +3907,9 @@

Exclusive Deals and Offers!

- - + + - + \ No newline at end of file