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

Added back to top button #54

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added back to top button #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f87c69
Added back to top button
shreyad2806 Oct 4, 2024
d5ec6df
Added Dark mode toggle button
shreyad2806 Oct 4, 2024
cacd479
dark mode
shreyad2806 Oct 5, 2024
b141b0c
Merge branch 'ChandelAnish:master' into master
shreyad2806 Oct 5, 2024
a567d1e
dark mode update
shreyad2806 Oct 6, 2024
8faf3e8
Merge branch 'master' of https://github.com/shreyad2806/hireHUB-website
shreyad2806 Oct 6, 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
85 changes: 48 additions & 37 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,38 @@
</head>
<body class="body">
<!-- navbar -->


<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid" >
<a id="logo" class="navbar-brand" href="#"><i class="fa-solid fa-briefcase"></i> hireHUB</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a id="contactus" class="nav-link" href="#contact-us">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login-page/index.html">login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup-page/index.html">sign up</a>
</li>
</li>
</ul>
</div>
<div class="container-fluid" >
<a id="logo" class="navbar-brand" href="#"><i class="fa-solid fa-briefcase"></i> hireHUB</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>
<li class="nav-item">
<a id="contactus" class="nav-link" href="#contact-us">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login-page/index.html">login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup-page/index.html">sign up</a>
</li>
<li class="nav-item">
<button id="darkModeToggle">
<i class="fas fa-sun"></i>
</button>
</li>
</ul>
</div>
</nav>
</div>
</nav>


<!-- navbar end -->
Expand Down Expand Up @@ -154,6 +156,7 @@ <h1>
<li>Mechanic</li>
</ul>
</div>

</div>
<div class="containerA2-2">
<div class="subheading3">
Expand Down Expand Up @@ -195,29 +198,37 @@ <h2>skilled professionals worldwide</h2>
</div>


<!--an anchor tag at the top of the page -->
<a id="top"></a>

<!-- Add the Back to Top button -->
<button id="back-to-top">
</button>


<!-- footer -->
<hr style="margin-top: 10rem;" class="mx-5">
<footer class="py-5 mx-5 mt-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>About us</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">How it Works</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Security</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Team</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Press Releases</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">News</a></li>
<li class="nav-item mb-2"><a href="#" class="about">How it Works</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Security</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Team</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Press Releases</a></li>
<li class="nav-item mb-2"><a href="#" class="about">News</a></li>
</ul>
</div>


<div class="col-6 col-md-2 mb-3">
<h5>Terms</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Terms and Conditions</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Copyright Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Code of Conduct</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Privacy Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Terms and Conditions</a></li>
<li class="nav-item mb-2"><a href="#" class="about">Copyright Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="us">Code of Conduct</a></li>
</ul>
</div>

Expand Down
38 changes: 38 additions & 0 deletions client/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,41 @@ let btn=document.getElementById("nextbtn")
setInterval(()=>{
btn.click()
},2500)

// Get the Back to Top button and the top anchor
const backToTopButton = document.getElementById('back-to-top');
const topAnchor = document.getElementById('top');

// Add an event listener to the Back to Top button
backToTopButton.addEventListener('click', () => {
// Scroll to the top of the page
window.scrollTo({ top: 0, behavior: 'smooth' });
});

// JavaScript to handle Dark Mode Toggle
// JavaScript to handle Dark Mode Toggle

const toggleButton = document.getElementById('darkModeToggle');
const body = document.body;

// Check for saved user preference in localStorage and apply the theme
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.setAttribute('data-theme', savedTheme);
}

// Event listener for toggle button click
toggleButton.addEventListener('click', function () {
let currentTheme = body.getAttribute('data-theme');

// Toggle between dark and light modes
if (currentTheme === 'dark') {
body.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
toggleButton.innerHTML = '<i class="fas fa-sun"></i>'; // Change icon to sun
} else {
body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; // Change icon to moon
}
});
106 changes: 103 additions & 3 deletions client/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
{
margin: 0rem 65rem 0rem 0rem;
}

.mainheading
{
display: grid;
grid-template-columns: 50rem auto;
/* text-align: center; */
/* justify-content: center; */
margin: 4rem 0rem 12rem 0rem;

}
.maintext2
{
Expand Down Expand Up @@ -39,7 +41,8 @@
height: 15rem;
margin: 5rem 0rem 0rem 5rem;
border-radius: 10px;
background-color: rgb(242, 244, 242);
--background-color-light: #ffffff;
--background-color-dark: #121212;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -148,6 +151,8 @@
.textbox p
{
padding-top: 1rem;
color: #121111;

}
.containerA2
{
Expand All @@ -165,7 +170,10 @@
display: grid;
grid-template-columns: 27rem auto;
background: url('assets/labour\ img8.jpeg') no-repeat bottom/contain;
background-size: 27rem;
background-size: 24rem;
background-position: bottom;
background-position-x: left;

}
.subheading2
{
Expand Down Expand Up @@ -230,7 +238,7 @@
box-shadow: 2px 2px 2px .5px;
display: grid;
grid-template-columns: 50rem auto;
background: url('assets/labour\ img9.png') no-repeat right/contain rgb(207, 243, 239);
background: url('client\assets\imgg.png') no-repeat right/contain rgb(207, 243, 239);
/* padding: 1rem; */
margin: 0rem 5rem 0rem 5rem;
}
Expand Down Expand Up @@ -258,3 +266,95 @@

/* footer */

/* Style the Back to Top button */
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: rgba(107, 218, 138, 0.898);
color: rgb(242, 244, 242);
padding: 10px 20px;
border: none;
border-radius: 50%; /* Make the button circular */
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}

/* Add an upward arrow to the button */
#back-to-top::before {
content: "\25B2";
font-size: 18px;
margin-right: 5px;
}

#back-to-top:hover {
background-color: #121111;
}



:root {
--background-color-light: #ffffff;
--background-color-dark: #121212;
--text-color-light: #000000;
--text-color-dark: #ffffff;
}

/* Light mode (default) */
body {
nav{
height: 40px;
}
background-color: var(--background-color-light);
color: var(--text-color-light);
transition: background-color 0.5s, color 0.5s;
}

/* Dark mode */
body[data-theme='dark'] {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
nav{
height: 40px;
div{
background-color: #2c2b2b;
a{
color: #e0e0e0;
}
}
}
}
/* Styling the toggle button */
#darkModeToggle {
position: fixed;
top: 5px; /* Position from the top */
right: 5px; /* Position from the right */
padding: -100px;
background-color: #ffffff; /* Light background */
border: none;
border-radius: 50%; /* Circular button */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow effect */
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}

/* Dark mode button styles */
body[data-theme='dark'] #darkModeToggle {
background-color: #100f0f; /* Dark background for dark mode */
color: #ffffff; /* White color for dark mode */
}

/* Icon styles */
#darkModeToggle i {
font-size: 15px; /* Adjust icon size */
}

/* Button hover effect */
#darkModeToggle:hover {
background-color: #e0e0e0; /* Lighten on hover */
}