Merge branch 'main' into main

PriyaGhosal · Oct 4, 2024 · f4ffde9 · f4ffde9
2 parents 17d4be9 + 711344e
commit f4ffde9
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 39 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/BuddyTrail b/BuddyTrail
diff --git a/README.md b/README.md
@@ -1,26 +1,94 @@
-# BuddyTrail
-Welcome to **BuddyTrail** – your ultimate travel companion! Whether you're planning a family vacation or a trip with friends, BuddyTrail helps you discover and explore amazing destinations, find the best hotels, and book affordable flights with ease.
-## Features
-**Interactive Travel Map:** Explore popular destinations across India and around the world. Click on markers to learn more about each location.
+# 🏞️ BuddyTrail
 
-**Dark & Bright Mode:** Switch between dark and bright modes for a comfortable browsing experience, day or night.
+Welcome to **BuddyTrail** – your ultimate travel companion! 🌍✈️ Whether you're planning a family vacation 👨‍👩‍👧‍👦 or a trip with friends 👫, BuddyTrail helps you discover and explore amazing destinations 🏖️🏰, find the best hotels 🏨, and book affordable flights 💺 with ease.
 
-**Hotel Finder:** Find the best hotels at affordable rates, handpicked to suit your budget and preferences.
+<br />
 
-**Flight Booking:** Book flights at the best prices, with options tailored to your travel needs.
+<div align="center">
+  <a href="https://github.com/PriyaGhosal/BuddyTrail/stargazers"><img src="https://img.shields.io/github/stars/PriyaGhosal/BuddyTrail" alt="Stars Badge"/></a>
+  <a href="https://github.com/PriyaGhosal/BuddyTrail/network/members"><img src="https://img.shields.io/github/forks/PriyaGhosal/BuddyTrail" alt="Forks Badge"/></a>
+  <a href="https://github.com/PriyaGhosal/BuddyTrail/pulls"><img src="https://img.shields.io/github/issues-pr/PriyaGhosal/BuddyTrail" alt="Pull Requests Badge"/></a>
+  <a href="https://github.com/PriyaGhosal/BuddyTrail/issues"><img src="https://img.shields.io/github/issues/PriyaGhosal/BuddyTrail" alt="Issues Badge"/></a>
+  <a href="https://github.com/PriyaGhosal/BuddyTrail/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/PriyaGhosal/BuddyTrail?color=2b9348"></a>
+</div>
 
-Travel Blog: Read tips, guides, and personal stories from seasoned travelers.
 
-Multi-Language Support: View the website in multiple languages, catering to a global audience.
+<br />
 
-User Reviews and Ratings: Read and leave reviews for destinations, hotels, flights, and activities.
+![image](https://github.com/user-attachments/assets/4e53b040-41de-43d0-91bd-5c31bf5b9959)
+![image](https://github.com/user-attachments/assets/1a2ec256-1099-44a0-b810-7f40b544ec3a)
 
-## Technologies Used
-**HTML/CSS:** For building and styling the website structure.
+<br />
 
-**JavaScript:** For interactive features like the map and mode toggling.
+## 🚀 Features
 
-**Google Maps API:** For displaying the interactive travel map.
+**🗺️ Interactive Travel Map:** Explore popular destinations across India and around the world. Click on markers to learn more about each location.
 
-**Responsive Design:** The website is fully responsive and works on all devices.
+**🌙🌞 Dark & Bright Mode:** Switch between dark and bright modes for a comfortable browsing experience, day or night.
 
+**🏨 Hotel Finder:** Find the best hotels at affordable rates, handpicked to suit your budget and preferences.
+
+**✈️ Flight Booking:** Book flights at the best prices, with options tailored to your travel needs.
+
+**📝 Travel Blog:** Read tips, guides, and personal stories from seasoned travelers.
+
+**🌐 Multi-Language Support:** View the website in multiple languages, catering to a global audience.
+
+**⭐ User Reviews and Ratings:** Read and leave reviews for destinations, hotels, flights, and activities.
+
+<br />
+
+## 🛠️ Technologies Used
+
+**📝 HTML/CSS:** For building and styling the website structure.
+
+**⚙️ JavaScript:** For interactive features like the map and mode toggling.
+
+**🗺️ Google Maps API:** For displaying the interactive travel map.
+
+**📱 Responsive Design:** The website is fully responsive and works on all devices.
+
+<br />
+
+## 🎉 Welcome Contributors!! 👨‍💻👋
+
+Join the list. **We are waiting** :octocat:<br />
+Here's how you can contribute to the repository:
+
+1. **Fork the repository** to your own GitHub account.
+
+2. **Clone the repository** to your local machine:
+
+    ```bash
+    git clone https://github.com/PriyalGhosal/BuddyTrail.git
+    ```
+
+3. **Navigate into the directory**:
+
+    ```bash
+    cd BuddyTrail
+    ```
+
+4. **Install dependencies** (if applicable):
+
+    ```bash
+    npm install
+    ```
+
+5. **Create a new branch** for your changes:
+
+    ```bash
+    git checkout -b <your-branch-name>
+    ```
+
+6. **Make your changes**, commit, and push:
+
+    ```bash
+    git add .
+    git commit -m "Your message here"
+    git push origin <your-branch-name>
+    ```
+
+7. **Create a pull request** from your GitHub repository.
+</br>
+# Thanks for reading!!!
diff --git a/index.html b/index.html
@@ -21,6 +21,8 @@
 
   </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">
@@ -56,12 +58,12 @@
     <header class="main-head">
       <nav>
         <h1 id="logo">BuddyTrail</h1>
-        <ul>
-          <li><a href="#locations">Location</a></li>
-          <li><a href="#itineraries">Travel Itineraries</a></li>
-          <li><a href="#reviews">Reviews</a></li>
-          <li><a href="#benefits">Benefits</a></li>
-          <li><a href="#contact">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 -->
         <button class="mode-toggle" id="modeToggle">
@@ -76,7 +78,7 @@ <h3>
           Connect, Explore, and Discover Together. <br />
           BuddyTrail: Your Journey Begins with the Perfect Travel Companion.
         </h3>
-        <button><a href="book.html ">Book now</a></button>
+        <button id="btn"><a href="book.html ">Book now</a></button>
       </section>
 
       <section id="locations">
@@ -206,6 +208,45 @@ <h3>Romantic Getaway</h3>
             </div>
         </div>
     </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>
@@ -289,6 +330,10 @@ <h3>Leave a Review</h3>
 
               <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>
@@ -336,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>
@@ -356,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>