diff --git a/.github/ISSUE_TEMPLATE/enhancement.yml b/.github/ISSUE_TEMPLATE/enhancement.yml new file mode 100644 index 00000000..4a79850e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/enhancement.yml @@ -0,0 +1,32 @@ +name: "✨ Code Change Request" +description: "Request a code change or feature enhancement" +title: "CODE CHANGE:" +labels: ["Enhancement", "Code Change"] +body: + - type: checkboxes + attributes: + label: "Is there an existing issue for this?" + description: "Please search to see if an issue already exists for the code change you are requesting." + options: + - label: "I have searched the existing issues" + required: true + - type: textarea + attributes: + label: "Describe the code change" + description: "A concise description of the code change or feature enhancement you are requesting." + validations: + required: true + - type: textarea + attributes: + label: "Proposed solution" + description: "Describe your proposed solution or implementation details." + validations: + required: true + - type: checkboxes + attributes: + label: "Record" + options: + - label: "I agree to follow this project's Code of Conduct" + required: true + - label: "I'm a GSSOC'24 contributor" + - label: "I want to work on this issue" \ No newline at end of file diff --git a/.github/scripts/update_structure.py b/.github/scripts/update_structure.py new file mode 100644 index 00000000..73fb4977 --- /dev/null +++ b/.github/scripts/update_structure.py @@ -0,0 +1,67 @@ +import os +import github +from github import Github + +def get_repo_structure(path='.', prefix=''): + structure = [] + items = sorted(os.listdir(path)) + for i, item in enumerate(items): + if item.startswith('.'): + continue + item_path = os.path.join(path, item) + is_last = i == len(items) - 1 + current_prefix = '└── ' if is_last else '├── ' + structure.append(f"{prefix}{current_prefix}{item}") + if os.path.isdir(item_path): + next_prefix = prefix + (' ' if is_last else '│ ') + structure.extend(get_repo_structure(item_path, next_prefix)) + return structure + +def update_structure_file(structure): + with open('project_structure.txt', 'w') as f: + f.write('\n'.join(structure)) + +def update_readme(structure): + with open('project-structure.md', 'r') as f: # updated file name + content = f.read() + + start_marker = '' + end_marker = '' + + start_index = content.find(start_marker) + end_index = content.find(end_marker) + + if start_index != -1 and end_index != -1: + new_content = ( + content[:start_index + len(start_marker)] + + '\n```\n' + '\n'.join(structure) + '\n```\n' + + content[end_index:] + ) + + with open('project-structure.md', 'w') as f: + f.write(new_content) + print("Repo-structure.md updated with new structure.") + else: + print("Markers not found in Repo-structure.md. Structure not updated.") + +def main(): + g = Github(os.environ['GH_TOKEN']) + repo = g.get_repo(os.environ['GITHUB_REPOSITORY']) + + current_structure = get_repo_structure() + + try: + contents = repo.get_contents("project_structure.txt") + existing_structure = contents.decoded_content.decode().split('\n') + except github.GithubException: + existing_structure = None + + if current_structure != existing_structure: + update_structure_file(current_structure) + update_readme(current_structure) + print("Repository structure updated.") + else: + print("No changes in repository structure.") + +if __name__ == "__main__": + main() \ No newline at end of file diff --git a/.github/workflows/add-contributor.yml b/.github/workflows/add-contributor.yml new file mode 100644 index 00000000..207afa97 --- /dev/null +++ b/.github/workflows/add-contributor.yml @@ -0,0 +1,21 @@ +name: Update Contributors in README +on: + push: + branches: ["main"] + workflow_dispatch: + +jobs: + contrib-readme-job: + runs-on: ubuntu-latest + name: An action workflow to automate contributors in README + permissions: + contents: write + pull-requests: write + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Update Contributors List + uses: akhilmhdh/contributors-readme-action@v2.3.10 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/update-structure.yml b/.github/workflows/update-structure.yml new file mode 100644 index 00000000..cb1e1117 --- /dev/null +++ b/.github/workflows/update-structure.yml @@ -0,0 +1,45 @@ +name: Detect and Update Repo Structure + +on: + schedule: + - cron: '0 * * * *' + workflow_dispatch: + push: + branches: + - main + +jobs: + detect-and-update-structure: + runs-on: ubuntu-latest + permissions: + contents: write + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Python + uses: actions/setup-python@v2 + with: + python-version: 3.12 + + - name: Install dependencies + run: | + python -m pip install --upgrade pip + pip install PyGithub + + - name: Run update script + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: python .github/scripts/update_structure.py + + - name: Commit and push if changed + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + git config --global user.email "github-actions[bot]@users.noreply.github.com" + git config --global user.name "github-actions[bot]" + git add . + git diff --quiet && git diff --staged --quiet || ( + git commit -m "Update repo structure" && + git push https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/PriyaGhosal/BuddyTrail.git + ) diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..b58b603f --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/BuddyTrail.iml b/.idea/BuddyTrail.iml new file mode 100644 index 00000000..24643cc3 --- /dev/null +++ b/.idea/BuddyTrail.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..2536f415 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/BuddyTrail b/BuddyTrail index fd812a83..3205e5cd 160000 --- a/BuddyTrail +++ b/BuddyTrail @@ -1 +1 @@ -Subproject commit fd812a8344751280a93e3b3b70729528eae743d5 +Subproject commit 3205e5cd4eec97ac5d055c40a1238fd1745ff0a1 diff --git a/README.md b/README.md index f62922a4..2b9bd06d 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,49 @@ -# 🏞️ 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. +# `🏞️ 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. + -
- Stars Badge - Forks Badge - Pull Requests Badge - Issues Badge - GitHub contributors
+
+
-
+ + + + + + + + + + + + + + + + + + + + + + + +
🌟 Stars🍴 Forks🐛 Issues🔔 Open PRs🔕 Close PRs🛠️ Languages🌐 Contributors
StarsForksIssuesOpen Pull RequestsClose Pull RequestsGitHub language countGitHub contributors
+
+
-![image](https://github.com/user-attachments/assets/4e53b040-41de-43d0-91bd-5c31bf5b9959) -![image](https://github.com/user-attachments/assets/1a2ec256-1099-44a0-b810-7f40b544ec3a) +# 📸 Website Preview -
+image +image +image + +
## 🚀 Features @@ -55,7 +80,7 @@ Welcome to **BuddyTrail** – your ultimate travel companion! 🌍✈️ Whether Join the list. **We are waiting** :octocat:
Here's how you can contribute to the repository: -1. **Fork the repository** to your own GitHub account. +1. **[Fork](https://github.com/PriyaGhosal/BuddyTrail/fork) the repository** to your own GitHub account. 2. **Clone the repository** to your local machine: @@ -89,6 +114,585 @@ Here's how you can contribute to the repository: git push origin ``` -7. **Create a pull request** from your GitHub repository. -
-# Thanks for reading!!! +7. **Submit a pull request:** + - Go to the original repository on GitHub. + - Click on the "Pull Requests" tab. + - Click the "New Pull Request" button. + - Select your feature branch and submit the pull request. + +8. **Wait for review and feedback.** + - Address any comments or requested changes. + - Once approved, your feature will be merged into the main branch. + +
+ +## Project-strucutre 📁 + +You can find the project structure in the [Project Structure](project-structure.md) file. It contains the details of the project structure and the files present in the project. It will help you to understand the project structure better. 🗂️ + +
+ +## Contributors + +A heartfelt thank you to the following individuals for their valuable contributions to this project. Your support and dedication are greatly appreciated: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + PriyaGhosal +
+ Priya Ghosal + + 		+ + yashksaini-coder +
+ Yash Kumar Saini + + 		+ + akhandpratap18 +
+ Akhand Pratap Singh + + 		+ + devarsheecodess +
+ Devarshee Gaunekar + + 		+ + Bhum-ika +
+ Bhumika Sharma + + 		+ + rees8 +
+ Rhea + +
+ + HS202022 +
+ Himangshu Sharma + + 		+ + Archisman141 +
+ Archisman Khanra + + 		+ + anuragverma108 +
+ Anurag Verma + + 		+ + tarunkumar2005 +
+ Tarun kumar + + 		+ + Aradhya-005 +
+ Aradhya Yadav + + 		+ + Annapoornaaradhya +
+ ANNAPOORNA V + +
+ + Aarnachauhan +
+ Aarna chauhan + + 		+ + RahulScripted +
+ RahulScripted + + 		+ + PATILYASHH +
+ Yash patil + + 		+ + dwivedishrey +
+ dwivedishrey + + 		+ + Abankita +
+ Abankita Behera + + 		+ + T-Rahul-prabhu-38 +
+ Abankita Behera + +
+ + jvkousthub +
+ Kousthub J V + + 		+ + poorvikaa08 +
+ Poorvika + + 		+ + Son7c +
+ Son7c + + 		+ + Aditi2k5 +
+ Aditi Prabakaran + + 		+ + riyaaryan2004 +
+ Riya Aryan + + 		+ + avisha191 +
+ avisha191 + +
+ + snehhhcodes +
+ Sneha Tiwari + + 		+ + Kavish-Paraswar +
+ Kavish Paraswar + + 		+ + Ishika-Gupta06 +
+ Ishika Gupta + + 		+ + hritika2409 +
+ Hritika Sharan + + 		+ + hgjajoo +
+ Harshvardhan Jajoo + + 		+ + Mr-DK07 +
+ D K + +
+ + ananyag309 +
+ Ananya Gupta + + 		+ + Codewithmeowmeow +
+ codewithvibha + + 		+ + tusharmishra069 +
+ Tushar Mishra + + 		+ + swamimalode07 +
+ Swami Malode + + 		+ + sadafhukkeri +
+ sadafhukkeri + + 		+ + Darshan3690 +
+ Darshan Rajput + +
+ + Ananya-vastare +
+ Ananya Ravikiran Vastare + + 		+ + HarshadaGirase +
+ Harshada Girase + + 		+ + Slambot01 +
+ Zorslay#17 + + 		+ + SagnikGos +
+ SagnikGos + + 		+ + Peart-Guy +
+ Ankan + + 		+ + Risheendra183 +
+ Risheendra183 + +
+ + samarth-6 +
+ Samarth Mishra + + 		+ + shashankgoud18 +
+ Shashank Goud + + 		+ + ShradhaSaxena23 +
+ Shradha Saxena + + 		+ + ShrishtiSingh26 +
+ Shrishti + + 		+ + SupratitDatta +
+ Supratit Datta + + 		+ + vaibhav-yerkar +
+ Vaibhav._Y + +
+ + Krishnamverma951 +
+ Krishnam Verma + + 		+ + Nimit1775 +
+ nimit sodhani + + 		+ + ruchikakengal +
+ Ruchika Kengal + + 		+ + sarinsanyal +
+ Sarin Sanyal + + 		+ + SiddarthaKarri +
+ Siddartha Karri + + 		+ + souvikpramanikgit +
+ Souvik Kumar Pramanik + +
+ + srishti023 +
+ Srishti Choudhary + + 		+ + Raj-Aditya-27 +
+ Aditya Raj + + 		+ + ahinagangopadhyay +
+ Ahina Gangopadhyay + + 		+ + Amarjha01 +
+ AMAR + + 		+ + amitroy-thedev +
+ Amit Roy + + 		+ + amitroy5817 +
+ Amit Roy + +
+ + kekubhai +
+ Anirban Ghosh + + 		+ + Antima2004 +
+ Antima Mishra + + 		+ + anuragbansall +
+ Anurag Bansal + + 		+ + AsifQamar +
+ Cyphrr_07 + + 		+ + Avidiptab17 +
+ Avidipta Banerjee + + 		+ + Durgeshwar-AI +
+ Durgeshwar-AI + +
+ + Geet2002 +
+ Geetartha Bordoloi + + 		+ + IshaRawat7 +
+ Isha Rawat + + 		+ + Kajalmehta29 +
+ Kajal Mehta + + 		+ + kushal7201 +
+ Kushal Bansal + + 		+ + neeru24 +
+ Neeru + + 		+ + Nikhileshmauje +
+ NikhileshM24 + +
+ + +
+ +### ↳ Stargazers + +
+ +[![Stargazers repo roster for @PriyaGhosal/BuddyTrail](https://reporoster.com/stars/PriyaGhosal/BuddyTrail)](https://github.com/PriyaGhosal/BuddyTrail/stargazers) + +
+ +### ↳ Forkers +
+ +[![Forkers repo roster for @PriyaGhosal/BuddyTrail](https://reporoster.com/forks/PriyaGhosal/BuddyTrail)](https://github.com/PriyaGhosal/BuddyTrail/network/members) + +
+ + +
+ + Back to Top + +
+ +# Thanks for reading!!! \ No newline at end of file diff --git a/RatingStyle.css b/RatingStyle.css new file mode 100644 index 00000000..a98f5615 --- /dev/null +++ b/RatingStyle.css @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + display: flex; + align-items: flex-start; /* Align items at the start of the container */ + justify-content: space-between; /* Space between elements */ + gap: 20px; /* Optional gap between form and rating section */ + height: auto; /* Adjust height if necessary */ +} +.form-section { + width: 70%; /* Adjust width as needed */ +} +.rating-wrap { + width: 30%; /* Adjust width as needed */ + text-align: left; +} + +.center { + width: auto; + display: inline-flex; /* Align stars and rating count in a row */ + align-items: center; + gap: 10px; /* Add some space between the stars and the count */ +} + + +#rating-value { + font-size: 1.2rem; /* Adjust font size */ + font-weight: bold; + color: black; /* Optional: change the color to match the theme */ +} + +.rating { + border: none; + float:right; +} + +.rating > input { + display: none; +} + +.rating > label:before { + content: '\f005'; + font-family: FontAwesome; + margin: 5px; + font-size: 1.5rem; + display: inline-block; + cursor: pointer; +} + +.rating > .half:before { + content: '\f089'; + position: absolute; + cursor: pointer; +} + +.rating > label { + color: #ddd; /* Empty stars initially */ + float: right; + cursor: pointer; +} + +/* Filled stars on hover and selection */ +.rating > input:checked ~ label, +.rating:not(:checked) > label { + color: #ddd; /* Keep stars empty until interaction */ +} + +.rating > input:checked ~ label, +.rating > input:checked ~ label:hover, +.rating > input:checked ~ label:hover ~ label { + color: rgb(230, 166, 17); /* Green for filled stars */ +} + +.rating > label:hover ~ label, +.rating > label:hover { + color:rgb(230, 166, 17); /* Green hover effect */ +} diff --git a/auth.css b/auth.css new file mode 100644 index 00000000..13b5697a --- /dev/null +++ b/auth.css @@ -0,0 +1,462 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +input { + font-family: "Poppins", sans-serif; +} + +.container { + position: relative; + width: 100%; + background-color: #54c5c9; + min-height: 100vh; + overflow: hidden; +} + +.forms-container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.sign-in-signup { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + left: 75%; + width: 50%; + transition: 1s 0.7s ease-in-out; + display: grid; + grid-template-columns: 1fr; + z-index: 5; +} + +form { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 5rem; + transition: all 0.2s 0.7s; + overflow: hidden; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +form.sign-up-form { + opacity: 0; + z-index: 1; +} + +form.sign-in-form { + z-index: 2; +} + +.title { + font-size: 2.2rem; + color: #444; + margin-bottom: 10px; +} + +.input-field { + max-width: 380px; + width: 100%; + background-color: #f0f0f0; + margin: 10px 0; + height: 55px; + border-radius: 55px; + display: grid; + grid-template-columns: 15% 70% 15%; + padding: 0 0.4rem; + position: relative; +} + +.input-field i { + text-align: center; + line-height: 55px; + color: #acacac; + transition: 0.5s; + font-size: 1.1rem; +} + +.input-field input { + background: none; + outline: none; + border: none; + line-height: 1; + font-weight: 600; + font-size: 1.1rem; + color: #333; +} + +.input-field input::placeholder { + color: #aaa; + font-weight: 500; +} + +.password-toggle { + cursor: pointer; +} + +.social-text { + padding: 0.7rem 0; + font-size: 1rem; +} + +.social-media { + display: flex; + justify-content: center; +} + +.social-icon { + height: 46px; + width: 46px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 0.45rem; + color: #333; + border-radius: 50%; + border: 1px solid #333; + text-decoration: none; + font-size: 1.1rem; + transition: 0.3s; +} + +.social-icon:hover { + color: #0b3174; + border-color: #000000; +} + +.btn { + width: 150px; + background-color: #000000; + border: none; + outline: none; + height: 49px; + border-radius: 49px; + color: #fff; + text-transform: uppercase; + font-weight: 600; + margin: 10px 0; + cursor: pointer; + transition: 0.5s; +} + +.btn:hover { + background-color: #161618; +} + +.panels-container { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.container:before { + content: ""; + position: absolute; + height: 2000px; + width: 2000px; + top: -10%; + right: 48%; + transform: translateY(-50%); + background-image: linear-gradient(-45deg, #000000 0%, #000000 100%); + transition: 1.8s ease-in-out; + border-radius: 50%; + z-index: 6; +} + +.image { + width: 100%; + transition: transform 1.1s ease-in-out; + transition-delay: 0.4s; +} + +.panel { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-around; + text-align: center; + z-index: 6; +} + +.left-panel { + pointer-events: all; + padding: 3rem 17% 2rem 12%; +} + +.right-panel { + pointer-events: none; + padding: 3rem 12% 2rem 17%; +} + +.panel .content { + color: #fff; + transition: transform 0.9s ease-in-out; + transition-delay: 0.6s; +} + +.panel h3 { + font-weight: 600; + line-height: 1; + font-size: 1.5rem; +} + +.panel p { + font-size: 0.95rem; + padding: 0.7rem 0; +} + +.btn.transparent { + margin: 0; + background: none; + border: 2px solid #fff; + width: 130px; + height: 41px; + font-weight: 600; + font-size: 0.8rem; +} + +.right-panel .image, +.right-panel .content { + transform: translateX(800px); +} + +.container.sign-up-mode:before { + transform: translate(100%, -50%); + right: 52%; +} + +.container.sign-up-mode .left-panel .image, +.container.sign-up-mode .left-panel .content { + transform: translateX(-800px); +} + +.container.sign-up-mode .sign-in-signup { + left: 25%; +} + +.container.sign-up-mode form.sign-up-form { + opacity: 1; + z-index: 2; +} + +.container.sign-up-mode form.sign-in-form { + opacity: 0; + z-index: 1; +} + +.container.sign-up-mode .right-panel .image, +.container.sign-up-mode .right-panel .content { + transform: translateX(0%); +} + +.container.sign-up-mode .left-panel { + pointer-events: none; +} + +.container.sign-up-mode .right-panel { + pointer-events: all; +} + +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: #ffffff; + color: #000000; + padding: 10px; + border-radius: 50%; + cursor: pointer; + transition: 0.3s; + text-decoration: none; + z-index: 10; +} + +.homeBtn:hover { + background: #000000; + color: #ffffff; +} + +.password-strength { + display: flex; + margin-top: 5px; + height: 5px; + width: 200px; +} + +.password-strength div { + height: 100%; + width: 33.33%; + margin-right: 3px; + background-color: #ddd; + transition: background-color 0.3s; +} + +.password-strength .weak { background-color: #ff4757; } +.password-strength .medium { background-color: #ffa502; } +.password-strength .strong { background-color: #23ad5c; } + +@media (max-width: 870px) { + .container { + min-height: 800px; + height: 100vh; + } + .sign-in-signup { + width: 100%; + top: 95%; + transform: translate(-50%, -100%); + transition: 1s 0.8s ease-in-out; + } + + .sign-in-signup, + .container.sign-up-mode .sign-in-signup { + left: 50%; + } + + .panels-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; + } + + .panel { + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 2.5rem 8%; + grid-column: 1 / 2; + } + + .right-panel { + grid-row: 3 / 4; + } + + .left-panel { + grid-row: 1 / 2; + } + + .image { + width: 200px; + transition: transform 0.9s ease-in-out; + transition-delay: 0.6s; + } + + .panel .content { + padding-right: 15%; + transition: transform 0.9s ease-in-out; + transition-delay: 0.8s; + } + + .panel h3 { + font-size: 1.2rem; + } + + .panel p { + font-size: 0.7rem; + padding: 0.5rem 0; + } + + .btn.transparent { + width: 110px; + height: 35px; + font-size: 0.7rem; + } + + .container:before { + width: 1500px; + height: 1500px; + transform: translateX(-50%); + left: 30%; + bottom: 68%; + right: initial; + top: initial; + transition: 2s ease-in-out; + } + + .container.sign-up-mode:before { + transform: translate(-50%, 100%); + bottom: 32%; + right: initial; + } + + .container.sign-up-mode .left-panel .image, + .container.sign-up-mode .left-panel .content { + transform: translateY(-300px); + } + + .container.sign-up-mode .right-panel .image, + .container.sign-up-mode .right-panel .content { + transform: translateY(0px); + } + + .right-panel .image, + .right-panel .content { + transform: translateY(300px); + } + + .container.sign-up-mode .sign-in-signup { + top: 5%; + transform: translate(-50%, 0); + } +} + +@media (max-width: 570px) { + form { + padding: 0 1.5rem; + } + + .image { + display: none; + } + .panel .content { + padding: 0.5rem 1rem; + } + .container { + padding: 1.5rem; + } + + .container:before { + bottom: 72%; + left: 50%; + } + + .container.sign-up-mode:before { + bottom: 28%; + left: 50%; + } +} + +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: #ffffff; + color: #000000; + padding: 10px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; + text-decoration: none; +} + +.homeBtn:hover { + background: #232323; +} + +.homeBtn:active { + background: #191919; +} \ No newline at end of file diff --git a/auth.html b/auth.html new file mode 100644 index 00000000..ec469eff --- /dev/null +++ b/auth.html @@ -0,0 +1,110 @@ + + + + + + Register & Login + + + + +
+
+ +
+ + + + +
+
+
+

New here ?

+

+ Discover new experiences with BuddyTrail!
Create your account. +

+ +
+ +
+
+
+

One of us ?

+

+ Welcome back to our community +

+ +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/auth.js b/auth.js new file mode 100644 index 00000000..fab96e16 --- /dev/null +++ b/auth.js @@ -0,0 +1,94 @@ +const sign_in_btn = document.querySelector("#sign-in-btn"); +const sign_up_btn = document.querySelector("#sign-up-btn"); +const container = document.querySelector(".container"); + +sign_up_btn.addEventListener("click", () => { + container.classList.add("sign-up-mode"); +}); + +sign_in_btn.addEventListener("click", () => { + container.classList.remove("sign-up-mode"); +}); + +// Sign in form submission +document.querySelector(".sign-in-form").addEventListener('submit', function(event) { + event.preventDefault(); + + // Get the input values + const username = document.querySelector(".sign-in-form input[type='text']").value; + const password = document.querySelector(".sign-in-form input[type='password']").value; + + // Dummy login logic for demo purposes + if (username === 'admin' && password === 'password') { + alert('Login successful!'); + // Redirect to dashboard page + window.location.href = 'index.html'; + } else { + alert('Invalid username or password'); + } +}); + +// Sign up form submission +document.querySelector(".sign-up-form").addEventListener('submit', function(event) { + event.preventDefault(); + + // Get the input values + const username = document.querySelector(".sign-up-form input[type='text']").value; + const email = document.querySelector(".sign-up-form input[type='email']").value; + const password = document.querySelector(".sign-up-form input[type='password']").value; + + if (username === '' || email === '' || password === '') { + alert('Please fill in all fields'); + return; + } + + // Dummy signup logic for demo purposes + localStorage.setItem('username', username); + localStorage.setItem('email', email); + localStorage.setItem('password', password); + localStorage.setItem('isLoggedIn', 'true'); + + alert('Signup successful!'); + // Redirect to dashboard page + window.location.href = 'index.html'; +}); + +// Toggle password visibility +function togglePassword(fieldId, icon) { + const field = document.getElementById(fieldId); + const isPassword = field.type === 'password'; + + // Toggle between 'password' and 'text' + field.type = isPassword ? 'text' : 'password'; + + // Change the icon class between eye and eye-slash + icon.classList.toggle('fa-eye-slash', isPassword); + icon.classList.toggle('fa-eye', !isPassword); +} + +// Check password strength +function checkPasswordStrength() { + const password = document.querySelector(".sign-up-form input[type='password']").value; + const strengthWeak = document.getElementById('strength-weak'); + const strengthMedium = document.getElementById('strength-medium'); + const strengthStrong = document.getElementById('strength-strong'); + + let strength = 0; + + if (password.length >= 8) strength++; + if (password.match(/[A-Z]/)) strength++; + if (password.match(/[a-z]/)) strength++; + if (password.match(/[0-9]/)) strength++; + if (password.match(/[^a-zA-Z0-9]/)) strength++; + + strengthWeak.className = ''; + strengthMedium.className = ''; + strengthStrong.className = ''; + + if (strength >= 1) strengthWeak.className = 'weak'; + if (strength >= 3) strengthMedium.className = 'medium'; + if (strength >= 5) strengthStrong.className = 'strong'; +} + +// Call the checkPasswordStrength function on password input +document.querySelector(".sign-up-form input[type='password']").addEventListener('input', checkPasswordStrength); \ No newline at end of file diff --git a/chatbot.html b/chatbot.html deleted file mode 100644 index 66011b10..00000000 --- a/chatbot.html +++ /dev/null @@ -1,367 +0,0 @@ - - - - - - canvas Editor- Chat Bot - - - - - - - - - -
-
-
- Chat Bot -
- -
-
- How can I help you today? -
-
-
-
- -
- - - - -
-
-
- - - - - - - - - diff --git a/crescent-moon.png b/crescent-moon.png new file mode 100644 index 00000000..2a8693e6 Binary files /dev/null and b/crescent-moon.png differ diff --git a/day-mode.png b/day-mode.png new file mode 100644 index 00000000..797ee086 Binary files /dev/null and b/day-mode.png differ diff --git a/firebase.js b/firebase.js index 8ae45553..d355b3a1 100644 --- a/firebase.js +++ b/firebase.js @@ -131,3 +131,12 @@ document.getElementById('loginForm').addEventListener('submit', function (e) { // Call the login function loginWithEmailAndPassword(email, password); }); + +function togglePassword(fieldId) { + const passwordField = document.getElementById(fieldId); + if (passwordField.type === "password") { + passwordField.type = "text"; + } else { + passwordField.type = "password"; + } +} \ No newline at end of file diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..e4359168 Binary files /dev/null and b/img/logo.png differ diff --git a/img/logo2.png b/img/logo2.png new file mode 100644 index 00000000..6b5fd87e Binary files /dev/null and b/img/logo2.png differ diff --git a/index.html b/index.html index f665a3e7..7ce397e5 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation" /> + @@ -26,52 +27,145 @@ BuddyTrail + .card button{ + margin-bottom: 20px; + border-radius: 10px; + padding: 15px; + } + + - + +
+
+
@@ -89,271 +183,415 @@ "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" - ); - - // Toggle visibility - if ( - translateElement.style.display === "none" || - translateElement.style.display === "" - ) { - translateElement.style.display = "block"; - } else { - translateElement.style.display = "none"; + + // Toggle visibility + if ( + translateElement.style.display === "none" || + translateElement.style.display === "" + ) { + translateElement.style.display = "block"; + } else { + translateElement.style.display = "none"; + } + } + //Providing scroll animation between different parts of the page using jquery + $(document).ready(function () { + $ ("a[href^='#']").on("click", function (event) { + event.preventDefault(); + if (this.hash !== "") { + event.preventDefault(); + var hash = this.hash; + var navbarHeight = $(".main-head").outerHeight(); + $("html, body").animate( + { + scrollTop: $(hash).offset().top - navbarHeight, + }, + 1000 + ); + event.preventDefault(); } + event.preventDefault(); }); + event.preventDefault(); + }); + + + + +
+ + +
+
+

Travel Beyond Limits

+

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

+ +
+ +
+
+

The Perfect Travel Experience!

+ + -
- -
+
+

Travel Beyond Limits

+

- Connect, Explore, and Discover Together.
- BuddyTrail: Your Journey Begins with the Perfect Travel Companion. + We handle everything, from finding the ideal travel buddy to + selecting your perfect hotel, flight, and destination.

- -
- -
-
-

The Perfect Travel Experience!

-

- We handle everything, from finding the ideal travel buddy to - selecting your perfect hotel, flight, and destination. -

- - -
-
-
-
-

The Perfect travel

-

- we cover everything from picking the perfect hotel,
to flight - and destination -

-
-
-
-
- -
-

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

+ + +
+
+
+
+

The Perfect travel

+

+ we cover everything from picking the perfect hotel,
to flight + and destination +

+
+
+
+
+
-
-
- -
-

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

+

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

+ +
+
+
+
-
-
- -
-

Fly

-

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

+

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

+ +
+
+
+
+

Fly

+

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

+
-
- -
-

Exclusive Deals and Offers

+
+ + +
+

About BuddyTrail - Your Ultimate Travel Companion

+

+ Welcome to BuddyTrail, the all-in-one travel platform + that turns your dream vacations into reality! 🌍✈ Whether you're + planning a fun family getaway 👨‍👩‍👧‍👦, an exciting trip with friends 👫, or + even a solo adventure, BuddyTrail is here to guide you every step of + the way. Discover new destinations 🏖🏰, find the best hotels 🏨, and + book budget-friendly flights 💺 without the hassle. +

+ +

Why Choose BuddyTrail?

- Explore our best deals on flights, hotels, and travel packages. Save - big on your next adventure! + BuddyTrail isn't just another travel site. It's designed to give you + the most personalized, stress-free travel experience possible, making + sure every detail is taken care of. Here's what makes us different:

+ +
    +
  • + 🌍 Explore the World with an Interactive Travel Map: + Want to see the world at your fingertips? Our dynamic map lets you + discover the top travel destinations, both within India and + globally, with just a click. Find out more about each location, + including the best activities, top-rated attractions, and hidden + gems you won't want to miss. +
    • +
  • + 🏨 Find Hotels that Fit Your Style & Budget: + Finding the perfect place to stay has never been easier! Our hotel finder + matches you with a wide selection of handpicked hotels that suit + your style and budget, from luxury resorts to budget-friendly stays. +
    • +
  • + ✈ Book Flights at the Best Prices: + With BuddyTrail, you can find and book flights at unbeatable prices, + tailored to your travel dates and preferences. +
    • +
  • + 📝 Get Expert Tips from Seasoned Travelers: + Our travel blog is packed with insider tips, guides, and stories from + seasoned travelers. +
    • +
  • + ⭐ Read & Leave Reviews to Guide Fellow Travelers: + Travel smarter by reading user reviews and ratings for destinations, + hotels, flights, and activities. +
    • +
  • + 🌐 Multi-Language Support for Global Travelers: + We offer multi-language support to make sure everyone feels at home. +
    • +
  • + 🌙🌞 Dark & Bright Modes for Comfortable Browsing: + BuddyTrail lets you switch between dark and bright modes with ease. +
    • +
  • + 📱 Seamless Experience Across Devices: + BuddyTrail is designed to be fully responsive, so you can plan and book your trips from any device. +
    • +
+ +

Join a Community of Travelers!

+

+ Become part of the BuddyTrail community and connect with fellow + travelers! Share your experiences, get inspired by others, and enjoy a + personalized travel experience like never before. +

+ +

+ + Start your journey today with BuddyTrail, and turn your travel + dreams into memories that last a lifetime! + +

+
+ + +
+

Exclusive Deals and Offers

+

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

-
- -
-

Flight to Dubai

-

Save 20% on round-trip flights to Dubai. Limited time offer!

-

- Price: ₹25,000 - ₹20,000 -

- -
+
+ +
+

Flight to Dubai

+

Save 20% on round-trip flights to Dubai. Limited time offer!

+

+ Price: ₹20,000 + ₹25,000 +

+ +
- -
-

Luxury Stay in Goa

-

- Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of - luxury at an affordable price! -

-

- Price: ₹15,000 - ₹10,500 per night -

- -
+ +
+

Luxury Stay in Goa

+

+ Get 30% off on a 5-star hotel stay in Goa. Enjoy the best of + luxury at an affordable price! +

+

+ Price: ₹10,500 + ₹15,000 per night +

+ +
- -
-

Kerala Backwaters Package

-

- Experience the serene beauty of Kerala's backwaters with a 4-day, - 3-night package. All-inclusive deal! -

-

- Price: ₹50,000 - ₹40,000 -

- -
+ +
+

Kerala Backwaters Package

+

+ Experience the serene beauty of Kerala's backwaters with a 4-day, + 3-night package. All-inclusive deal! +

+

+ Price: ₹40,000 + ₹50,000 +

+ +
- -
-

Paris Romantic Getaway

-

- Enjoy a romantic trip to Paris with your loved one. Special - package for couples! -

-

- Price: ₹1,50,000 - ₹1,20,000 per couple -

- -
+ +
+

Paris Romantic Getaway

+

+ Enjoy a romantic trip to Paris with your loved one. Special + package for couples! +

+

+ Price: ₹1,20,000 + ₹1,50,000 per couple +

+ +
- -
-

Adventure in Bali

-

- Book an adventure trip to Bali with activities like snorkeling, - trekking, and more. Discount available for groups! -

-

- Price: ₹60,000 - ₹48,000 per person -

- -
+ +
+

Adventure in Bali

+

+ Book an adventure trip to Bali with activities like snorkeling, + trekking, and more. Discount available for groups! +

+

+ Price: ₹48,000 + ₹60,000 per person +

+
-
+
+ - -
-

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

+ +
+

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

-
-
-

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

- -
-
-

Romantic Getaway

-

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

- -
+
+
+

Family Vacation

+

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

+
-
- -
-

- Book a Cab or Auto -

-

- Book a cab or auto with ease -

+
+

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

+ +
+ +
+ + + +
+
+

Book a Cab or Auto

+
+
+ + +
+
+ + +
+ Romantic Getaway flex-direction: column; " > -
- -

-
-
- -

-
-
- -

-
+ +
+ + + +
-
- -

+
+ +
- -
- -

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

Personalized Recommendations

-

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

-
- -
-

Beach Resort in Goa

-

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

- -
+ +
+

Personalized Recommendations

+

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

-
-

Cultural Tour in Rajasthan

-

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

- -
+
+ +
+

Beach Resort in Goa

+

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

+ +
-
-

Adventure Trek in Himachal

-

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

- -
+
+

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

+
+
+
+ +
+

Travel Discussion Forum

+ +
+ +
+
+

Destination Guides

+
+

Share Your Experiences

+
+ + +
+
+
+ +
+ + + + + + +
+

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.

-
-
+ +
-
-
-

Contact US

-
-
-
- - +
+
+
+
+
+

CONTACT US

+

At BuddyTrail, we are here to assist you every step of the way! Whether you have questions, feedback, or just want to learn more about our platform, feel free to reach out to us. Our team is committed to providing you with the best experience as you explore new trails and make new friends along the way.

+
+
    +
  • +
    + + + + +
    +
    +

    Our Address

    +

    123 Trailblazer Lane, Adventure

    +
    +
    • +
  • +
    + + + + + +
    +
    +

    Contact

    +

    Mobile: +91 921 456-7890

    +

    Mail: buddyTrail@gmail.com

    +
    +
    • +
  • +
    + + + + +
    +
    +

    Working Hours

    +

    Monday - Friday: 08:00 - 17:00

    +

    Saturday & Sunday: 08:00 - 12:00

    +
    +
    • +
+
+
+

Ready to Get Started?

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

Rate your experience

+

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

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

User Reviews and Ratings

-

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

+ + +
-
-

Leave a Review

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

What Others Are Saying

- -
-

John Doe - Paris

-

⭐⭐⭐⭐⭐

-

- Amazing experience in Paris! The Eiffel Tower was breathtaking, and - the food was incredible. Highly recommend! -

+
+ + + + + + + + + +
+
- - + + +
+
+
+
-
-
BuddyTrail ©
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
- -
+ + + + + + + + + + + - + + + + + + + + + + diff --git a/login.css b/login.css deleted file mode 100644 index 88fcabdc..00000000 --- a/login.css +++ /dev/null @@ -1,139 +0,0 @@ -/* General Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; /* Light background for contrast */ - color: #333; /* Dark text for readability */ -} - -/* Header Styles */ -.main-head { - background: #131c27; /* Dark background for the header */ - color: white; - position: sticky; - top: 0; - z-index: 5; -} - -/* Container for centering the form */ -.container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -/* Login box styling */ -.login-box { - position: fixed; - top: 24%; - background: #fff; /* Clean white background for contrast */ - border-radius: 12px; /* More rounded corners for a modern feel */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow for depth */ - padding: 2.5rem; /* Increased padding for better spacing */ - width: 100%; - max-width: 450px; /* Slightly larger width */ - transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */ -} - -.login-box h2 { - margin-bottom: 1.5rem; /* Increased space below the heading */ - font-size: 1.8rem; /* Larger font size for emphasis */ - color: #131c27; /* Consistent with header color */ - text-align: center; -} - -/* Google Login Button */ -.google-login { - margin-bottom: 1rem; -} - -.google-btn { - display: flex; - justify-content: space-around; - align-items: center; - background-color: white; - color: rgb(23, 23, 23); - border-radius: 20px; - padding: 5px 5px; - text-decoration: none; - font-weight: 600; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); - transition: transform 0.3s ease; - max-width: 250px; - font-size: 15px; - margin: 0 auto; - margin-bottom: 15px; - border: none; - outline: none; -} - -.google-btn img { - width: 30px; - height: 30px; - margin-right: 0px; - background-color: white; -} - -.google-btn:hover { - transform: scale(1.05); -} - -/* Input field styling */ -.input-field { - margin-bottom: 1.2rem; -} - -.input-field label { - display: block; - margin-bottom: 0.5rem; - font-weight: bold; -} - -.input-field input { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 1rem; -} - -/* Submit button styling */ -.input-field button { - width: 100%; - margin-top: 5px; - padding: 15px; /* Increased padding for a larger button */ - border: none; - border-radius: 8px; /* More rounded button */ - background-color: #4a8ae4; /* Bright teal background */ - color: white; - font-size: 1.7rem; /* Larger font size */ - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; /* Added smooth transitions */ -} - -.input-field button:hover { - background-color: #012e49; -} - -/* Styling for the sign-in link below the submit button */ -.signUp-link { - text-align: center; /* Center the link */ - margin-top: 1rem; /* Add some space above the link */ - font-size: 5px; -} - -.signUp-link a { - color: #3066dc; /* Match the link color with the theme */ - text-decoration: none; /* Remove underline from the link */ - font-weight: 100; /* Make the link text bold */ -} - -.signUp-link a:hover { - text-decoration: underline; /* Add underline on hover for better UX */ -} diff --git a/login.html b/login.html deleted file mode 100644 index 2711f614..00000000 --- a/login.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - Login - - - - - -
- -
- -
- -
- - - - - - - diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..31cdcb43 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "BuddyTrail", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/project-structure.md b/project-structure.md new file mode 100644 index 00000000..99580fb0 --- /dev/null +++ b/project-structure.md @@ -0,0 +1,42 @@ + +``` +├── BuddyTrail +├── Code_of_Conduct.md +├── README.md +├── RatingStyle.css +├── auth.css +├── auth.html +├── auth.js +├── book.html +├── boy.png +├── chatbot.gif +├── crescent-moon.png +├── day-mode.png +├── firebase.js +├── icons +│ ├── airplane.svg +│ ├── bed-solid.svg +│ ├── instagram.svg +│ ├── plane-departure-solid.svg +│ ├── route-solid.svg +│ ├── twitter-x.svg +│ ├── twitter.svg +│ └── youtube.svg +├── img +│ ├── cloud.png +│ ├── contact-mountain.png +│ ├── googleLogo.png +│ ├── landing-page.jpg +│ ├── logo.png +│ ├── logo2.png +│ └── new-york-page.png +├── index.html +├── package-lock.json +├── project-structure.md +├── project_structure.txt +├── reviews.html +├── script.js +├── star-rating.js +└── style.css +``` + \ No newline at end of file diff --git a/project_structure.txt b/project_structure.txt new file mode 100644 index 00000000..2ae8e2e4 --- /dev/null +++ b/project_structure.txt @@ -0,0 +1,38 @@ +├── BuddyTrail +├── Code_of_Conduct.md +├── README.md +├── RatingStyle.css +├── auth.css +├── auth.html +├── auth.js +├── book.html +├── boy.png +├── chatbot.gif +├── crescent-moon.png +├── day-mode.png +├── firebase.js +├── icons +│ ├── airplane.svg +│ ├── bed-solid.svg +│ ├── instagram.svg +│ ├── plane-departure-solid.svg +│ ├── route-solid.svg +│ ├── twitter-x.svg +│ ├── twitter.svg +│ └── youtube.svg +├── img +│ ├── cloud.png +│ ├── contact-mountain.png +│ ├── googleLogo.png +│ ├── landing-page.jpg +│ ├── logo.png +│ ├── logo2.png +│ └── new-york-page.png +├── index.html +├── package-lock.json +├── project-structure.md +├── project_structure.txt +├── reviews.html +├── script.js +├── star-rating.js +└── style.css \ No newline at end of file diff --git a/reviews.html b/reviews.html new file mode 100644 index 00000000..6eed6678 --- /dev/null +++ b/reviews.html @@ -0,0 +1,896 @@ + + + + + + BuddyTrail - User Content and Reviews + + + + + +
+ +
+ +
+
+
+ + +
+ +
+
+

Share Your Travel Experience

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+

Travel Experiences

+
+ +
+
+
+ +
+

Moderation Panel

+
+ +
+
+
+ +
+ + + + + +
+
+ +
+
+ +
+
+
+

About Us

+

We are a team of passionate developers creating amazing web experiences.

+
+
+

Quick Links

+ +
+ + +
+

Contact Us

+

Email: info@example.com

+

Phone: +123 456 7890

+
+
+

Follow Us

+ +
+
+ +
+

© 2024 Buddy Trail. All rights reserved.

+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js index abcf0373..ca89b30a 100644 --- a/script.js +++ b/script.js @@ -315,6 +315,26 @@ // } +document.getElementById('postForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const postContent = document.getElementById('postContent').value; + if (postContent.trim() === '') return; + + const postContainer = document.getElementById('posts'); + const newPost = document.createElement('div'); + newPost.classList.add('post'); + newPost.textContent = postContent; + + postContainer.appendChild(newPost); + document.getElementById('postContent').value = ''; // Clear the textarea +}); + +window.addEventListener("scroll", function () { + let navbar = document.getElementById("main-head"); + if (window.scrollY > 100) navbar.classList.add("shadow"); + else navbar.classList.remove("shadow"); +}); function initMap() { var map = new google.maps.Map(document.getElementById('map'), { @@ -365,7 +385,17 @@ document.addEventListener('DOMContentLoaded', function() { const sunIcon = document.querySelector('.sun-icon'); const moonIcon = document.createElement('span'); moonIcon.className = 'moon-icon'; - moonIcon.innerHTML = '🌙'; + moonIcon.innerHTML = ''; + + const currentTheme = localStorage.getItem('theme'); + + if (currentTheme === 'dark') { + document.body.classList.add('dark-mode'); + modeToggle.replaceChild(moonIcon, sunIcon); + } else { + document.body.classList.add('light-mode'); + sunIcon.classList.add('glow'); + } modeToggle.addEventListener('click', function() { document.body.classList.toggle('dark-mode'); @@ -373,12 +403,15 @@ document.addEventListener('DOMContentLoaded', function() { if (document.body.classList.contains('dark-mode')) { modeToggle.replaceChild(moonIcon, sunIcon); + localStorage.setItem('theme', 'dark'); } else { modeToggle.replaceChild(sunIcon, moonIcon); sunIcon.classList.add('glow'); + localStorage.setItem('theme', 'light'); } }); }); + // discount pop_up document.addEventListener('DOMContentLoaded', function() { // Show the popup after a slight delay @@ -408,9 +441,9 @@ modeToggle.addEventListener('click', () => { // Toggle the icon if (body.classList.contains('dark-mode')) { - modeToggle.innerHTML = '🌙'; + modeToggle.innerHTML = ''; } else { - modeToggle.innerHTML = '☀️'; + modeToggle.innerHTML = ''; } }); // google translator diff --git a/signUp.css b/signUp.css deleted file mode 100644 index 6e7d64ae..00000000 --- a/signUp.css +++ /dev/null @@ -1,135 +0,0 @@ -/* General Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; /* Light background for contrast */ - color: #333; /* Dark text for readability */ -} - -/* Header Styles */ -.main-head { - background: #131c27; /* Dark background for the header */ - color: white; - position: sticky; - top: 0; - z-index: 5; -} - - -.container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; -} - -.signup-box { - position: fixed; - top: 24%; - margin-top: 0px; - background: #fff; /* Clean white background for contrast */ - border-radius: 12px; /* More rounded corners for a modern feel */ - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow for depth */ - padding: 2.5rem; /* Increased padding for better spacing */ - width: 100%; - max-width: 450px; /* Slightly larger width */ - transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */ -} - - -.signup-box h2 { - margin-bottom: 1.5rem; /* Increased space below the heading */ - font-size: 1.8rem; /* Larger font size for emphasis */ - color: #131c27; /* Consistent with header color */ - text-align: center; -} - -.google-signup { - margin-bottom: 1rem; -} - -.google-btn { - display: flex; - justify-content:space-around; - align-items: center; - background-color: white; - color: rgb(23, 23, 23); - border-radius: 20px; - padding: 5px 5px; - text-decoration: none; - font-weight: 600; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); - transition: transform 0.3s ease; - max-width: 250px; - font-size: 15px; - margin: 0 auto; - margin-bottom: 15px; - border: none; - outline: none; -} -.google-btn img { - width: 30px; - height: 30px; - margin-right: 0px; - background-color: white; -} - -.google-btn:hover { - transform: scale(1.05); -} - -.input-field { - margin-bottom: 1.2rem; -} - -.input-field label { - display: block; - margin-bottom: 0.5rem; - font-weight: bold; -} - -.input-field input { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 1rem; -} - -.input-field button { - width: 100%; - margin-top: 5px; - padding: 15px; /* Increased padding for a larger button */ - border: none; - border-radius: 8px; /* More rounded button */ - background-color: #4a8ae4; /* Bright teal background */ - color: white; - font-size: 1.7rem; /* Larger font size */ - cursor: pointer; - transition: background-color 0.3s, transform 0.3s;/* Added smooth transitions */ -} - -.input-field button:hover { - background-color: #012e49; -} - -.signin-link { - text-align: center; /* Center the link */ - margin-top: 1rem; /* Add some space above the link */ - font-size: 5px; -} - -.signin-link a { - color: #3066dc; /* Match the link color with the theme */ - text-decoration: none; /* Remove underline from the link */ - font-weight: 100; /* Make the link text bold */ -} - -.signin-link a:hover { - text-decoration: underline; /* Add underline on hover for better UX */ -} \ No newline at end of file diff --git a/signUp.html b/signUp.html deleted file mode 100644 index 1b6dc829..00000000 --- a/signUp.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - Sign in - - - - - -
- -
- -
- -
- - - - - - diff --git a/star-rating.js b/star-rating.js new file mode 100644 index 00000000..2f613711 --- /dev/null +++ b/star-rating.js @@ -0,0 +1,9 @@ +let star = document.querySelectorAll('input'); +let showValue = document.querySelector('#rating-value'); + +for(let i = 0; i < star.length; i++) { + star[i].addEventListener('click', function() { + let selectedRating = this.value; + showValue.innerHTML = selectedRating; // Only show the rating value + }); +} \ No newline at end of file diff --git a/style.css b/style.css index b215d779..57bb02e0 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,73 @@ box-sizing: border-box; font-family: "Poppins", sans-serif; } +.forum_1 +{ + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} +.hi +{ + background: #35424a; + color: #ffffff; + padding: 10px 0; + text-align: center; +} +nav ul { + list-style-type: none; + padding: 0; +} + +nav ul li { + display: inline; + margin: 0 10px; +} + +nav a { + color: #ffffff; + text-decoration: none; +} + +main { + padding: 20px; +} + +.post-container { + background: #ffffff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +textarea { + width: 100%; + height: 100px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background: #35424a; + color: #ffffff; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; +} +button:hover { + background: #2c3e50; +} + +.post { + margin: 10px 0; + padding: 10px; + background: #e8e8e8; + border-radius: 5px; +} html { font-size: 62.5%; } @@ -15,6 +81,24 @@ html { body { font-family: "Poppins", sans-serif; } + +#progressBarContainer { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 7px; + background-color: whitesmoke; + z-index: 9999; +} + +#progressBar { + height: 100%; + width: 0%; + background: #2C3E50;; + transition: width 0.2s ease; +} + .scroll-top-btn { position: fixed; /* Fixed position */ bottom: 20px; /* Distance from the bottom of the viewport */ @@ -50,6 +134,11 @@ h5 { font-size: 2.8rem; } +#logo-web{ + height: 50px; + width: 70px; +} + a { color: white; text-decoration: none; @@ -72,46 +161,133 @@ button { cursor: pointer; transition: background 0.6s ease-in-out; } -#btn:hover{ - background-color: rgb(1, 20, 27); - box-shadow: 0 0 10px lightblue, 0 0 20px lightblue; +#btn:hover { + background-color: rgb(1, 20, 27); + box-shadow: 0 0 10px lightblue, 0 0 20px lightblue; } /**** MAIN PAGE ****/ - +/* Header Styles */ .main-head { - background: #131c27; - color: white; - position: sticky; - top: 0%; + position: fixed; + top: 0; + left: 0; + right: 0; z-index: 5; + padding: 15px; + background-color: rgb(156, 156, 156); + /*background-color: transparent;*/ + color: white; + display: flex; + justify-content: center; /* Keep header centered */ + align-items: center; + transition: background-color 0.3s ease; +} +.main-head.shadow { + background-color: #000; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } - nav { display: flex; - width: 90%; - margin: auto; - padding: 2rem; - min-height: 10vh; align-items: center; - flex-wrap: wrap; + justify-content: space-between; + max-width: 1200px; /* Limit the width for better centering */ + width: 100%; /* Ensure nav takes full width */ + margin: 0 auto; /* Center the nav */ } -nav ul { +.logo { display: flex; - flex: 1 1 40rem; - justify-content: space-around; align-items: center; +} + +#nav-list { + display: flex; + gap: 20px; list-style: none; + margin: 0; + padding: 0; } -#logo { - flex: 2 1 40rem; - font-family: "Pattaya", sans-serif; - font-weight: 400; +#nav-list li a { + color: white; + text-decoration: none; + font-weight: bold; + +} + +.hamburger { + display: none; /* Hidden on larger screens */ + background: none; + border: none; + color: white; + font-size: 1.5em; + cursor: pointer; } +.mode-toggle { + position: fixed; + top: 20px; + right: 20px; + border: none; + background-color:white; + cursor: pointer; + padding: 5px; + +} +.mode-toggle img { + width: 30px; /* Adjust the size as needed */ + height: auto; + +} + + +/* Responsive Styles for smaller screens */ +@media (max-width: 768px) { + .hamburger { + display: block; /* Show hamburger on small screens */ + } + + #nav-list { + display: none; /* Hide menu initially */ + position: absolute; + top: 100%; /* Position dropdown below header */ + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.9); + flex-direction: column; + align-items: center; + padding: 10px 0; + } + + #nav-list.active { + display: flex; /* Show menu when active */ + } + + /* Close button styles */ + .dropdown-close-btn { + display: block; /* Visible only in the dropdown menu */ + align-self: flex-end; + margin-right: 20px; + color: white; + font-size: 2em; + padding: 5px; + cursor: pointer; + } +} + +/* Hide the close button on larger screens (revised) */ +@media (min-width: 769px) { + /* Hide the close button by setting its display to none and removing it from the DOM */ + .dropdown-close-btn { + display: none; + /* Remove the close button from the DOM */ + display: none !important; + } +} + + .hero { - min-height: 90vh; + min-height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.8), transparent), url("/img/landing-page.jpg"); background-repeat: no-repeat; @@ -127,46 +303,24 @@ nav ul { .hero button { border-radius: 1rem; + + padding: 1.5rem 4rem; + background: #4c6e97; + border: none; + color: white; + font-size: 1.8rem; + cursor: pointer; + transition: background 0.6s ease-in-out; + } .hero h3 { + font-size: 25px; + line-height: 40px; + letter-spacing: 0.7px; padding: 5rem; } -/* Header Styles */ -.main-head { - padding: 15px; - background-color: #007bff; /* Header background */ - color: white; - display: flex; - justify-content: space-between; - align-items: center; -} - -.main-head ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - gap: 20px; -} - -.main-head ul li { - display: inline; -} - -.main-head ul li a { - color: white; - text-decoration: none; - font-weight: bold; -} -.mode-toggle { - background: none; - border: none; - cursor: pointer; - font-size: 1.5em; - color: white; -} /* Section Styles */ .content-section { @@ -211,13 +365,13 @@ nav ul { .locations-head h2 { padding: 1rem 0rem; - text-decoration: underline; + text-decoration: none; text-decoration-thickness: 0.5rem; } .locations-head h3 { padding: 4rem 0rem; - background: linear-gradient(#090f15, #42231e); + background: linear-gradient(#1d71c4, #f9f9f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -316,37 +470,52 @@ nav ul { #contact { min-height: 100vh; - background: linear-gradient(rgba(0, 0, 0, 0.5), transparent), - url("/img/contact-mountain.png"); + background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; + position: relative; + border-radius: 10px; + overflow: hidden; } - -.form-wrapper { - background: rgba(19, 28, 39, 0.8); - width: 60%; - color: white; - border-radius: 2rem; +#contact .title{ + color: #f4f4f4; } - -.form-head { - text-align: center; - padding: 4rem; +#contact .description{ + color: #d3cece; } - -.name-form, -.email-form { - padding: 3rem; +.info-item{ + display: flex; +} +.info-text-content h3{ + font-size: 20px; + color: #f7f3f3; +} +.info-text-content p{ + font-size: 16px; + color: #f1ecec; +} +.form-container{ + position: absolute; + right: 0; + top: 0; + width: 50%; + height: 100%; + padding: 30px 45px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.form-container .form-title{ text-align: center; + font-size: 3.1rem; + margin-bottom: 20px; } -.form-wrapper label { - margin: 0rem 3rem; -} .form-wrapper button { width: 100%; @@ -356,37 +525,328 @@ nav ul { border-bottom-right-radius: 2rem; } -.form-wrapper input { - padding: 1rem 3rem; + +#About { + padding: 60px; + background-color: #f5f5f5; /* Light grey background */ + color: #333; /* Dark grey text */ + font-family: "Helvetica", "Arial", sans-serif; + line-height: 1.6; + text-align: left; + border-radius: 8px; /* Rounded corners */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ +} + +#About h1 { + font-size: 3.5em; + color: #007bff; /* Blue color for the main heading */ + margin-bottom: 20px; + font-weight: bold; + text-align: center; +} + +#About h2 { + font-size: 3em; + color: #0056b3; /* Dark blue color for subheadings */ + margin-top: 40px; + font-weight: 600; +} + +#About p { + font-size: 2.2em; + margin-bottom: 20px; + color: #444; /* Slightly darker grey for paragraph text */ +} + +#About p strong { + color: #007bff; /* Blue highlight for important text */ +} + +#About ul { + list-style-type: none; + padding-left: 0; + margin-top: 20px; +} + +#About ul li { + font-size: 1.5em; + margin-bottom: 15px; + display: flex; + align-items: flex-start; +} + +#About ul li::before { + content: "✔"; /* Checkmark symbol as bullet point */ + margin-right: 10px; + color: #28a745; /* Green checkmark */ + font-size: 1.5em; +} +/* Light mode for #About */ +.light-mode #About { + background-color: #f5f5f5; /* Light grey background */ + color: #333; /* Dark grey text */ +} + +/* Dark mode for #About */ +.dark-mode #About { + background-color: #121212; /* Dark background */ + color: #e0e0e0; /* Light grey text */ +} + +.light-mode #About h1 { + color: #007bff; /* Blue color for the main heading in light mode */ +} + +.dark-mode #About h1 { + color: #ffa500; /* Orange color for the main heading in dark mode */ +} + +.light-mode #About h2 { + color: #0056b3; /* Dark blue subheading in light mode */ +} + +.dark-mode #About h2 { + color: #ffd700; /* Bright yellow subheading in dark mode */ +} + +.light-mode #About p { + color: #444; /* Slightly darker grey for paragraph text in light mode */ +} + +.dark-mode #About p { + color: #d3d3d3; /* Lighter grey for paragraph text in dark mode */ +} + +.light-mode #About p strong { + color: #007bff; /* Blue highlight for important text in light mode */ +} + +.dark-mode #About p strong { + color: #ffcc00; /* Yellow highlight for important text in dark mode */ +} + + +/* Cab Booking Section Styles */ +.cab-booking-section { + display: flex; + justify-content: center; /* Center the content horizontally */ + align-items: center; /* Center the content vertically */ + min-height: 100vh; /* Minimum height to fill the viewport */ + padding: 20px; /* Padding around the section */ + background-color: white; /* Translucent background for section */ +} + +.booking-container { + width: 100%; + max-width: 500px; /* Set a max width for the container */ + text-align: center; /* Centering the text */ + padding: 20px; /* Add padding inside the container */ + border: 2px solid #007bff; /* Border color */ + border-radius: 10px; /* Rounded corners */ + box-shadow: 0 4px 15px rgba(247, 247, 247, 0.2); /* Slight shadow for depth */ + background-color: rgba(0,0,0,0); /* Translucent white background */ +} + +h2 { + font-size: 2.5em; + font-weight: 700; + margin: 10px 0; /* Margin adjustment */ + color: hsl(0, 0%, 0%); /* Heading color */ +} + +p { + font-size: 1.5em; + margin-bottom: 20px; + color: #666; /* Paragraph color */ +} + +/* Form Group Styles */ +.form-group { + margin-bottom: 15px; + text-align: left; /* Align labels and inputs to the left */ +} + +label { + font-size: 1.2em; + color: #333; /* Label color */ +} + +input, +select, +textarea { + height: 45px; + width: 100%; /* Full width */ + padding: 5px; + border: 1px solid #ccc; /* Border for inputs */ + border-radius: 5px; /* Rounded corners */ + font-size: 1.6rem; + margin-top: 5px; + outline: none; +} +textarea{ + height: 150px; +} + +input[type="text"], +input[type="date"], +input[type="time"] { + transition: border 0.3s; /* Smooth transition */ +} + +input:focus, +textarea:focus{ + border: 2px solid #007bff; /* Border color on focus */ +} + +/* Button Styles */ +.book-btn { + background-color: #007bff; /* Button background color */ + color: white; /* Button text color */ + border: none; /* No border */ + border-radius: 5px; /* Rounded corners */ + padding: 10px 20px; /* Padding for button */ + cursor: pointer; /* Pointer cursor on hover */ + font-size: 1.2em; /* Button text size */ + width: 100%; /* Full width */ + max-width: 300px; /* Max width for button */ + margin-top: 10px; /* Margin above button */ } +.book-btn:hover { + background-color: #0056b3; /* Darker shade on hover */ +} + +/* Dark Mode Styles */ +.dark-mode .cab-booking-section { + background-color: rgba(18, 18, 18, 0.9); /* Dark background for section */ +} +.dark-mode h2 { + color: #ffa500; /* Bright color for heading */ +} + + /**** FOOTER ****/ +/* Footer Styles */ footer { - color: white; - background-color: rgba(19, 28, 39, 1); + background: linear-gradient(135deg, #343a40, #212529); + color: #ffffff; + padding: 40px 0; + text-align: center; } -.footer-wrapper { - display: flex; - padding: 2rem; - width: 90%; - margin: auto; - align-items: center; - min-height: 10vh; - flex-wrap: wrap; + +.footer-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 20px; + max-width: 1200px; + margin: auto; } -footer h5 { - flex: 1 1 40rem; + +.footer-column { + flex: 1; + min-width: 200px; + margin: 10px; } -footer ul { + +.footer-column a { + font-size: 16px; + line-height: 2; +} +#footer-contact-us{ display: flex; - list-style: none; - flex: 1 1 40rem; - justify-content: space-between; - align-items: center; + flex-direction: column; +} + + +.footer-column h3 { + margin-bottom: 15px; + font-size: 18px; + color: #f39c12; +} + +.footer-column p, .footer-column ul { + font-size: 14px; + line-height: 1.5; +} + +.footer-column ul { + list-style: none; + padding: 0; +} + +.footer-column ul li { + margin-bottom: 10px; +} + +.footer-column ul li a { + color: #ffffff; + text-decoration: none; + transition: color 0.3s; +} + +.footer-column ul li a:hover { + color: #f39c12; + text-decoration: underline; +} + +.social-icons { + margin-top: 20px; +} + +.social-icons a { + margin: 0 10px; + color: #ffffff; + font-size: 20px; + transition: color 0.3s; +} + +.social-icons a:hover { + color: #f39c12; +} + +.footer-bottom { + margin-top: 20px; + font-size: 14px; } + +/* for facebook */ +.social-icons .fa-facebook-f { + transition: color 0.3s ease, transform 0.3s ease; +} +.social-icons .fa-facebook-f:hover{ + color:#4267B2; + transform:scale(1.1); +} + +/* for twitter */ +.social-icons .fa-x-twitter { + transition: color 0.3s ease, transform 0.3s ease; +} +.social-icons .fa-x-twitter:hover{ + color:black; + transform:scale(1.1); +} +/* for instagram */ +.social-icons .fa-instagram { + transition: color 0.3s ease, transform 0.3s ease; +} +.social-icons .fa-instagram:hover{ + color:#c32aa3; + transform:scale(1.1); +} + +/* for instagram */ +.social-icons .fa-linkedin-in{ + transition: color 0.3s ease, transform 0.3s ease; + } + .social-icons .fa-linkedin-in:hover{ + color:#0a66c2; + transform:scale(1.1); + } /**** MEDIA QUERY ****/ @media screen and (max-width: 932px) { @@ -473,6 +933,7 @@ body.dark-mode { /* Sun and moon icons */ .sun-icon { color: #ffd700; + size: 20px; } .moon-icon { @@ -565,6 +1026,15 @@ body.dark-mode { .itinerary button:hover { background-color: #0056b3; } +.cab-booking-section { + background-color:rgba(0, 0, 0, 0.2); /* Dark translucent background */ +} +.booking-container p, + .booking-container h1, + .booking-container h2 { + color: #f1f1f1; /* Lighter text color for readability */ + } +} @media (max-width: 768px) { .itinerary { flex: 1 1 calc(45% - 20px); @@ -578,116 +1048,360 @@ body.dark-mode { max-width: 100%; } } -#itineraries { - background-color: #f9f9f9; /* Light background */ - border: 1px solid #007bff; /* Blue border */ -} +#itineraries { + background-color: #f9f9f9; /* Light background */ + border: 1px solid #007bff; /* Blue border */ +} + +.dark-mode #itineraries { + background-color: #1e1e1e; /* Dark background */ + border: 1px solid #0056b3; /* Darker blue border */ +} + + +/* user rating */ +.reviews-section { + padding: 50px; + background-color: #F0F8FF; + +} +.review{ + display: flex; +justify-content: center; + +} + +.review-p{ + font-size:small; + color:#543db0; + font-style: italic; + font-weight: 500; +} + +.reviews-section h2 { + font-size: 3em; + margin-bottom: 20px; +} + +.review-form { + background: #ffffff; + padding: 30px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + margin-bottom: 30px; + display: flex; + flex-direction: column; + width:40vw; + align-items: center; + justify-items: center; +} + +.form{ + margin-top: 10px; + width:30vw; +} +.review-form h3 { + font-size: 1.5em; + margin-bottom: 15px; +} + +.review-form label { + display: block; + margin-bottom: 5px; + font-weight: bold; + font-size: 15px; +} + +.review-form input, +.review-form select, +.review-form textarea { + min-width: 100%; + max-width: 100%; + font-weight: 600; + padding: 10px; + font-size: 15px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.review-form button { + background-color: #F7D160; + padding: 10px 30px; + border: none; + border-radius: 30px; + cursor: pointer; + transition: background-color 0.3s; + color:black; + font-size:14px; + +} + +.form-button{ + text-align: center; + +} + +.reviews-container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + background-color: #f8f9fa; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); +} + +.reviews-title { + font-size: 2.5em; + color: #2c3e50; + text-align: center; + margin-bottom: 40px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; +} + +.reviews-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.review-card { + background: white; + border-radius: 15px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: all 0.3s ease; + display: flex; + flex-direction: column; +} + +.review-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); +} + +.review-header { + display: flex; + align-items: center; + padding: 20px; + background-color: #ecf0f1; + border-bottom: 2px solid #e0e0e0; +} + +.reviewer-avatar { + width: 70px; + height: 70px; + border-radius: 50%; + margin-right: 20px; + border: 3px solid #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.reviewer-info { + flex-grow: 1; +} + +.reviewer-name { + font-size: 1.3em; + margin: 0; + color: #34495e; + font-weight: 600; +} + +.reviewer-location { + font-size: 0.95em; + color: #7f8c8d; + margin: 5px 0 0; + font-style: italic; +} + +.review-rating { + padding: 15px 20px; + border-bottom: 1px solid #eee; + background-color: #f9f9f9; +} + +.star-rating { + color: #f1c40f; + font-size: 1.4em; + letter-spacing: 3px; +} + +.review-text { + padding: 20px; + font-size: 1em; + line-height: 1.7; + color: #444; + flex-grow: 1; + background-color: #ffffff; + border-radius: 0 0 15px 15px; +} + +@media (max-width: 768px) { + .reviews-list { + grid-template-columns: 1fr; + } + .form-button button{ + width:100%; + } + .reviews-title { + font-size: 2em; + } + + .review-card { + max-width: 400px; + margin: 0 auto; + } + .review-form{ + width:60vw; + } + .form{ + width: 50vw; + } +} -.dark-mode #itineraries { - background-color: #1e1e1e; /* Dark background */ - border: 1px solid #0056b3; /* Darker blue border */ +@media (max-width: 480px) { + .reviews-container { + padding: 20px 10px; + } + .review-form{ + width:80vw; + } + .form{ + width:70vw; + } + .form-button button{ + width:100% + } + .review-header { + flex-direction: column; + text-align: center; + } + + .reviewer-avatar { + margin-right: 0; + margin-bottom: 10px; + } + + .reviewer-info { + text-align: center; + } } -/* user rating */ -.reviews-section { - padding: 50px; - background-color: #f4f4f4; +/* Animations */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } } -.reviews-section h2 { - font-size: 2em; - margin-bottom: 20px; +.review-card { + animation: fadeIn 0.5s ease-out forwards; + opacity: 0; } -.review-form { - background: white; +.review-card:nth-child(1) { animation-delay: 0.1s; } +.review-card:nth-child(2) { animation-delay: 0.2s; } +.review-card:nth-child(3) { animation-delay: 0.3s; } +.review-card:nth-child(4) { animation-delay: 0.4s; } +.review-card:nth-child(5) { animation-delay: 0.5s; } + +.review-item { padding: 20px; + border: 1px solid #ccc; /* Light border in light mode */ border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - margin-bottom: 30px; + transition: border-color 0.3s ease; } -.review-form h3 { - font-size: 1.5em; - margin-bottom: 15px; +.light-mode .review-item { + border-color: #ccc; } -.review-form label { - display: block; - margin-bottom: 5px; - font-weight: bold; - font-size: 15px; +.light-mode .reviews-section{ + background-color: white; } -.review-form input, -.review-form select, -.review-form textarea { - width: 100%; - font-weight: 600; - padding: 10px; - font-size: 15px; - margin-bottom: 15px; - border: 1px solid #ccc; - border-radius: 5px; +/* Dark Mode Styles for Reviews Section */ +.dark-mode .reviews-section { + background-color: #121212; /* Dark background */ + color: white; /* White text */ + border: 2px solid white; } -.review-form button { - background-color: #007bff; - color: white; - padding: 10px 15px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; +.dark-mode .review { + background-color: #1e1e1e; /* Dark background for review cards */ + color: white; /* White text for review content */ + border: 1px solid #ebe2e2; /* Darker border */ } -.review-form button:hover { - background-color: #0056b3; +.dark-mode .review h4 { + color: #ffa500; /* Optional: Highlight the reviewer's name */ +} +.dark-mode .review label { + color: rgb(233, 220, 220); } -.reviews-list { - margin-top: 30px; +.dark-mode .review p { + color: white; /* White text for review paragraphs */ } -.review { - background: white; - padding: 15px; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - margin-bottom: 20px; +/* Adjusting rating stars color in dark mode */ +.dark-mode .rating { + color: #ffcc00; /* Bright yellow stars for dark mode */ } -.review h4 { - font-size: 1.2em; - margin-bottom: 5px; +/* Dark Mode Styles for Review Form */ +.dark-mode .review-form { + background-color: #121212; /* Dark background for the review form */ + color: white; /* White text color */ + padding: 20px; /* Padding for inner spacing */ + border-radius: 5px; /* Rounded corners */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: shadow for depth */ } -.review p { - margin: 5px 0; +.review-form h1 { + margin-bottom: 10px; /* Space below heading */ } -.reviews-list { - display: flex; - flex-direction: column; - gap: 20px; +.review-form label { + margin-top: 10px; /* Space above labels */ + display: block; /* Makes the label block-level for better spacing */ } -.review-item { - padding: 20px; - border: 1px solid #ccc; /* Light border in light mode */ - border-radius: 8px; - transition: border-color 0.3s ease; +.dark-mode .review-form input, +.dark-mode .review-form select, +.dark-mode .review-form textarea +{ + width: 100%; /* Full width */ + padding: 10px; /* Padding inside fields */ + background-color: #1e1e1e; /* Dark background for inputs */ + color: white; /* White text */ + border: 1px solid #333; /* Dark border */ + border-radius: 4px; /* Slightly rounded corners */ + margin-bottom: 10px; /* Space between fields */ } -.light-mode .review-item { - border-color: #ccc; +.review-form input::placeholder, +.review-form textarea::placeholder { + color: #aaa; /* Lighter placeholder text */ +} + +.review-form button { + background-color: #333; /* Dark button background */ + color: white; /* White button text */ + border: none; /* No border */ + padding: 10px 15px; /* Padding inside button */ + border-radius: 4px; /* Rounded corners */ + cursor: pointer; /* Pointer on hover */ } -.dark-mode .review-item { - border-color: black; /* Dark border in dark mode */ +.review-form button:hover { + background-color: #444; /* Slightly lighter on hover */ } -.cab-booking-section input, .cab-booking-section select { +.cab-booking-section input, +.cab-booking-section select { width: 100%; font-weight: 600; padding: 20px; @@ -734,7 +1448,7 @@ body.dark-mode { .popup-content { background-color: #fff; margin: 15% auto; - padding: 20px; + padding: 30px; border: 1px solid #888; border-radius: 10px; width: 100%; @@ -742,7 +1456,6 @@ body.dark-mode { position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } - /* Close Button */ .close-btn { position: absolute; @@ -768,6 +1481,52 @@ body.dark-mode { text-decoration: none; } +.popup { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); /* Background overlay */ + display: flex; + justify-content: center; + align-items: center; +} + +.popup-content { + position: relative; + background: white; + padding: 40px; /* Increased padding around content */ + padding-top: 60px; /* Extra top padding to account for close button */ + border-radius: 10px; + max-width: 500px; + text-align: center; +} + +.close-btn { + position: absolute; + top: 15px; + right: 15px; + width: 30px; + height: 30px; + font-size: 2rem; + cursor: pointer; + background-color: #ff4c4c; + color: #fff; + border-radius: 50%; + border: none; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} + +.close-btn:hover { + background-color: #ff0000; + transform: scale(1.1); +} + + /* Button to check deals */ .popup-content button { background-color: #007bff; @@ -783,14 +1542,16 @@ body.dark-mode { .popup-content button:hover { background-color: #0056b3; } -/* deals */ -.deals-section { - padding: 50px; + + +/* Deals */ +.deals-section { + padding: 90px 20px; /* Adjusted padding for smaller screens */ background-color: #f8f9fa; } .deals-section h2 { - font-size: 2em; + font-size: 2.2em; margin-bottom: 20px; text-align: center; } @@ -802,24 +1563,35 @@ body.dark-mode { } .deals-list { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 20px; + max-width: 90%; /* Increased max-width for better responsiveness */ + justify-content: center; + padding: 40px 0; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); /* Three equal columns */ + grid-template-rows: repeat(2, auto); /* Two rows with automatic height */ + gap: 30px; /* Space between grid items */ } .deal-item { background-color: #fff; - padding: 20px; + padding: 25px 30px; /* Added padding left and right */ border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - max-width: 300px; text-align: center; color: #090f15; + transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1); /* for smooth hover transform animation */ +} + +/* Added hover effect */ +.deal-item:hover { + transform: translateY(-10px); + cursor: pointer; } .deal-item h3 { font-size: 1.5em; + font-weight: 600; /* Made heading bold */ margin-bottom: 15px; color: #090f15; } @@ -844,12 +1616,14 @@ body.dark-mode { border: none; border-radius: 5px; cursor: pointer; + margin-bottom: 10px; transition: background-color 0.3s; } .deal-item button:hover { background-color: #218838; } + #deals { background-color: #f9f9f9; /* Light background */ border: 1px solid #007bff; /* Blue border */ @@ -859,6 +1633,32 @@ body.dark-mode { background-color: #1e1e1e; /* Dark background */ border: 1px solid #0056b3; /* Darker blue border */ } + +/* Responsive Styles */ +@media (max-width: 768px) { + .deals-section { + padding: 60px 10px; /* Reduce padding for smaller screens */ + } + + .deals-list { + grid-template-columns: repeat(2, 1fr); /* Two columns on small screens */ + } +} + +@media (max-width: 480px) { + .deals-list { + grid-template-columns: 1fr; /* One column on very small screens */ + } + + .deal-item { + padding: 20px; /* Reduce padding inside deal items */ + } + + .deals-section h2, .deals-section p { + font-size: 1.5em; /* Reduce font size for smaller screens */ + } +} + /* recommendations */ .recommendations-section { padding: 50px; @@ -921,6 +1721,14 @@ body.dark-mode { .recommendation-item button:hover { background-color: #003d80; /* Darker blue on hover */ } +@media (max-width: 768px) { + .recommendation-list{ + flex-direction: column; + } + .recommendation-item{ + max-width: 100%; + } +} /* Positioning and Styling for Google Translate Button */ .translate-container { position: fixed; @@ -943,6 +1751,17 @@ body.dark-mode { .language-toggle:hover { background-color: #0056b3; /* Darker blue on hover */ } +/* Dark Mode For Recommendations */ +.dark-mode .recommendations-section { + background-color: #121212; /* Dark background */ +} +.dark-mode .recommendations-section p { + color: #e0e0e0; /* Lighter text color */ +} +.dark-mode .recommendation-item { + background-color: #1e1e1e; /* Darker background for items */ + border: 2px solid #0056b3; /* Darker blue border */ +} /* Hide Google Translate Element by Default */ #google_translate_element { @@ -960,7 +1779,7 @@ body.dark-mode { } .navhover:hover { - background-color: #3498db; /* Adds a blue background on hover */ + border: 1px solid #3498db; color: white; /* Changes text color on hover */ } @@ -988,7 +1807,11 @@ body.dark-mode { } /* Extra small devices (phones, 600px and down) */ -/*@media only screen and (max-width: 600px) {...}*/ +@media only screen and (max-width: 600px) { + .recommendation-item{ + max-width: 100%; + } +} /* Small devices (portrait tablets and large phones, 600px and up) */ /*@media only screen and (min-width: 600px) {...}*/ @@ -1001,3 +1824,191 @@ body.dark-mode { /* Extra large devices (large laptops and desktops, 1200px and up) */ /*@media only screen and (min-width: 1200px) {...}*/ + + +/*For contact page*/ +/* Section Styling */ +.contact-heading { + text-align: center; + font-size: 2.5rem; + font-weight: bold; + margin-bottom: 20px; +} + + +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Heading and Title */ +.subheading { + font-weight: 600; + text-transform: uppercase; + color: #3b82f6; +} + +.title { + font-weight: bold; + color: white; + font-size: 5rem; +} + +.wr{ + font-weight:600; + color: white; +} +.description { + color: #4b5563; + margin-top: 1rem; + font-size: 2.19rem; +} + +/* Contact Container */ +.contact-container { + display: flex; + justify-content: center; + align-items: stretch; +} + +/* Grid Layout */ +.grid-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +/* Text Container */ +.text-container { + padding-right: 1.5rem; +} + +/* Info Text */ +.info-text { + margin-bottom: 1.5rem; + color: #4b5563; + font-size: 1rem; +} + +/* Info List */ +.info-list { + list-style: none; + padding: 0; +} + +.info-item { + display: flex; + margin-bottom: 1.5rem; +} + +.icon { + width: 4rem; + height: 2.5rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + color: white; + margin-top: 1rem; +} + +.info-text-content { + margin-left: 1rem; +} + +.info-title { + font-weight: 600; + color: white; +} + +.info-description { + color:white; + text-shadow: 2px 2px 0 black; +} + +/* Form Styling */ +.form-container { + padding: 1.5rem; + background-color: white; + border-radius: 0.75rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.form-title { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; + color: #111827; +} + +.input-group { + margin-bottom: 1.5rem; +} + +.input-field { + width: 100%; + padding: 0.75rem; + margin-bottom: 1rem; + border: 1px solid #d1d5db; + border-radius: 0.5rem; +} + +.submit-button-container { + text-align: center; +} + +.submit-button { + background-color: #2563eb; + color: white; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + border: none; + cursor: pointer; +} + +.submit-button:hover { + background-color: #1d4ed8; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .grid-container { + grid-template-columns: 1fr; + } +} + +/* Scroll to top button */ +.scroll-container { + position: fixed; + bottom: 80px; /* Adjust as needed */ + right: 20px; /* Adjust as needed */ + z-index: 1000; /* Ensure it appears above other elements */ +} + +.scroll-button { + background-color: #007bff; /* Change to your preferred color */ + border: none; + border-radius: 50%; + padding: 5px; /* Smaller padding */ + cursor: pointer; + position: relative; + width: 50px; /* Adjusted size */ + height: 50px; /* Adjusted size */ +} + +.scroll-button img { + width: 30px; /* Adjusted image size */ + height: 30px; /* Adjusted image size */ +} + +.tooltip-text-scroll { + position: absolute; + bottom: 10%; /* Position above the button */ + right: 50%; + transform: translateX(50%); + color: #fff; /* Tooltip text color */ + padding: 5px; + border-radius: 5px; + white-space: nowrap; /* Prevent text from wrapping */ +}