Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

fixed #241 Improve the UI of the Navbar #245

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+152 −110
Open

fixed #241 Improve the UI of the Navbar #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0767cd
modified the css of exclusive deals section
Aradhya-005 Oct 7, 2024
9181f9c
improved the UI of navbar and elements alignment
Aradhya-005 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 69 additions & 52 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,46 +27,45 @@
<title>BuddyTrail</title>
<style>
.chatbot-container {
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it appears above other elements */
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it appears above other elements */
}

.chatbot-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 */
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 */
}

.chatbot-button img {
width: 30px; /* Adjusted image size */
height: 30px; /* Adjusted image size */
width: 30px; /* Adjusted image size */
height: 30px; /* Adjusted image size */
}

.tooltip-text {
display: none; /* Hide by default */
position: absolute;
bottom: 100%; /* Position above the button */
right: 50%;
transform: translateX(50%);
background-color: #333; /* Background color for tooltip */
color: #fff; /* Tooltip text color */
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
display: none; /* Hide by default */
position: absolute;
bottom: 100%; /* Position above the button */
right: 50%;
transform: translateX(50%);
background-color: #333; /* Background color for tooltip */
color: #fff; /* Tooltip text color */
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
}

.chatbot-button:hover .tooltip-text {
display: block; /* Show on hover */
display: block; /* Show on hover */
}
</style>

</style>
</head>
<body class="light-mode">
<button id="scrollTopBtn" class="scroll-top-btn">
Expand Down Expand Up @@ -117,35 +116,42 @@
<header class="main-head">
<nav>
<h1 id="logo">BuddyTrail</h1>
<ul >
<li><a href="#home" class='navhover '>Home</a></li>
<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>
<li><a href="signUp.html" class='navhover'>Sign In</a></li>

<ul>
<li><a href="#home" class="navhover">Home</a></li>
<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>
<li><a href="signUp.html" class="navhover">Sign In</a></li>
</ul>
<!-- Toggle Button -->
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
<div>
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
</div>
</nav>
</header>
<div id="progress-bar"></div>
<!-- funcioning of progress bar -->
<script>
window.addEventListener('scroll', function() {
// Calculate the scroll progress
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100;

// Update the width of the progress bar
document.getElementById('progress-bar').style.width = scrollPercent + '%';
window.addEventListener("scroll", function () {
// Calculate the scroll progress
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100;

// Update the width of the progress bar
document.getElementById("progress-bar").style.width =
scrollPercent + "%";
});
</script>
</script>
<main>
<section class="hero">
<h2>Travel Beyond Limits</h2>
Expand Down Expand Up @@ -619,18 +625,17 @@ <h4>Aditi Patel - New York</h4>
<a href="chatbot.html">
<div class="fixed bottom-0 right-2 chatbot-container">
<button class="chatbot-button group">
<img class="h-20" src="chatbot.gif" alt="chatbot">
<img class="h-20" src="chatbot.gif" alt="chatbot" />
<span class="tooltip-text">
Welcome to Buddytrail! <br>
How can I help You? ^_^
Welcome to Buddytrail! <br />
How can I help You? ^_^
</span>
</button>
</div>
</a>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>


<footer>
<div class="footer-wrapper">
<h5>BuddyTrail &copy;</h5>
Expand Down Expand Up @@ -671,6 +676,18 @@ <h2>Exclusive Deals and Offers!</h2>
</div>
<script>
// script.js

// change the color of navbar while scrolling to make it visible

window.addEventListener("scroll", function () {
const navbar = document.querySelector(".main-head");
if (window.scrollY > 0) {
navbar.classList.add("sticky"); // Add class when scrolled
} else {
navbar.classList.remove("sticky"); // Remove class when at the top
}
});

window.onscroll = function () {
toggleScrollTopButton();
};
Expand Down
Loading