Skip to content

Commit

Permalink
made necessary changes as asked
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mayukh-Mandal2005
Mayukh-Mandal2005 committed Oct 18, 2024
1 parent a88cccc commit 8fdee3a
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 19 deletions.
84 changes: 78 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@
<div id="progressBar"></div>
</div>

<script>
window.onscroll = function () {
updateProgressBar();
};

function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("progressBar").style.width = scrollPercent + "%";
}
</script>

<div class="container">

<div class="navbar">
Expand All @@ -55,11 +68,11 @@
<span class="slider"></span>
</label></li>
-->

<!--Dark and Light Mode Toggle Button-->
<li>
<input type="checkbox" id="theme-toggle" onchange="toggleTheme()" />
<label for="theme-toggle">
<input class="toggle-input" type="checkbox" id="theme-toggle" onchange="toggleTheme()" />
<label class="toggle-label" for="theme-toggle">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="sun" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

Expand Down Expand Up @@ -590,15 +603,15 @@ <h2>Contact Our Customer Support Team</h2>
<div class="form-section">
<form id="contactForm">
<div class="form-group">
<label for="name"><i class="fas fa-user"></i> Name</label>
<label class="contact-label" for="name"><i class="fas fa-user"></i> Name</label>
<input type="text" id="name" name="name" placeholder="Your name">
</div>
<div class="form-group">
<label for="email"><i class="fas fa-envelope"></i> Email</label>
<label class="contact-label" for="email"><i class="fas fa-envelope"></i> Email</label>
<input type="email" id="email" name="email" placeholder="Your email">
</div>
<div class="form-group">
<label for="message"><i class="fas fa-comment"></i> Message</label>
<label class="contact-label" for="message"><i class="fas fa-comment"></i> Message</label>
<textarea id="message" name="message" placeholder="Your message"></textarea>
</div>
<button type="submit">Send</button>
Expand Down Expand Up @@ -735,6 +748,65 @@ <h2>Feedback Form</h2>
</svg>
</button>

<script>
// Show or hide the scroll-top button based on scroll position
window.addEventListener('scroll', function () {
const scrollTopButton = document.querySelector('.scroll-top');
if (window.pageYOffset > 300) {
scrollTopButton.style.display = 'block';
} else {
scrollTopButton.style.display = 'none';
}
});

document.addEventListener('DOMContentLoaded', function () {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
const progressRing = scrollToTopBtn.querySelector('circle');
const rootElement = document.documentElement;

const radius = progressRing.r.baseVal.value;
const circumference = radius * 2 * Math.PI;

progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
progressRing.style.strokeDashoffset = circumference;

function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
progressRing.style.strokeDashoffset = offset;
}

function handleScroll() {
const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
const scrolled = (rootElement.scrollTop / scrollTotal) * 100;

// Show or hide the scroll-to-top button based on scroll position
if (window.pageYOffset > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}

// Update progress circle
requestAnimationFrame(() => {
setProgress(scrolled);
});
}

function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: 'smooth'
});
}

scrollToTopBtn.addEventListener('click', scrollToTop);
window.addEventListener('scroll', handleScroll);

// Initial check in case the page is already scrolled on load
handleScroll();
});
</script>

<script>
let cartItemCount = 0;

Expand Down
31 changes: 18 additions & 13 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
}

/*dark and light mode toggle button*/
label {
.toggle-label {
width: 75px;
height: 30px;
position: relative;
Expand All @@ -61,7 +61,7 @@ label {
margin: 0 auto; /* Center align the toggle switch */
}

label:after {
.toggle-label:after {
content: "";
width: 27px;
height: 27px;
Expand All @@ -74,23 +74,23 @@ label:after {
transform: 0.3s;
}

input {
.toggle-input {
width: 0;
height: 0;
visibility: hidden;
}

input:checked+label {
.toggle-input:checked+ .toggle-label {
background: #d3d3d3;
}

input:checked+label:after {
.toggle-input:checked+ .toggle-label:after {
left: 73px;
transform: translateX(-100%);
background: linear-gradient(180deg, #777, #3a3a3a);
}

label:active:after {
.toggle-label:active:after {
width: 37.5px;
}

Expand All @@ -103,34 +103,34 @@ label:active:after {
transition: 0.3s;
}

input:checked+label+.background {
.toggle-input:checked+.toggle-label+.background {
background: #242424;
}

label svg {
.toggle-label svg {
position: absolute;
width: 22.5px;
top: 3.75px;
z-index: 100;
}

label svg.sun {
.toggle-label svg.sun {
left: 3.75px;
fill: #fff;
transition: 0.3s;
}

label svg.moon {
.toggle-label svg.moon {
left: 48.75px;
fill: #7e7e7e;
transition: 0.3s;
}

input:checked+label svg.sun {
.toggle-input:checked+label svg.sun {
fill: #7e7e7e;
}

input:checked+label svg.moon {
.toggle-input:checked+label svg.moon {
fill: #fff;
}

Expand Down Expand Up @@ -223,11 +223,16 @@ input:checked+label svg.moon {
margin-bottom: 20px;
}

label {
.toggle-label {
display: block;
margin-bottom: 15px;
}

label{
display: block;
margin-bottom: 15px;
}

input,
textarea {
width: 100%; /* Adjust width for better alignment */
Expand Down

0 comments on commit 8fdee3a

Please sign in to comment.