Skip to content

Commit

Permalink
Merge pull request #407 from trinetra110/scroll-contributor
Browse files Browse the repository at this point in the history 
feat: Added scroll-to-top button in contributor's page
  • Loading branch information
@Harshdev098
Harshdev098 authored Nov 8, 2024
2 parents e7648bb + 949b22a commit d55f292
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 56 deletions.
131 changes: 93 additions & 38 deletions public/contributor.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Research Nexas</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/css/contributor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
.homeBtn {
position: fixed;
Expand All @@ -20,51 +22,104 @@
}
</style>
</head>

<body>

<a href="/" class="homeBtn">Home</a>
<a href="/" class="homeBtn">Home</a>

<div class="contributor-container">
<!-- Hero Section -->
<section class="contributor-hero">
<div class="contributor-hero-content">
<h1>Welcome toResearch Nexas</h1>
<p>Empowering writers, one commit at a time</p>
<button class="contributor-btn contributor-btn-primary" onclick="scrollToContribute()">Become a Contributor</button>
</div>
</section>
<div class="contributor-container">
<!-- Hero Section -->
<section class="contributor-hero">
<div class="contributor-hero-content">
<h1>Welcome to Research Nexas</h1>
<p>Empowering writers, one commit at a time</p>
<button class="contributor-btn contributor-btn-primary" onclick="scrollToContribute()">Become a
Contributor</button>
</div>
</section>

<!-- Stats Section -->
<section class="contributor-stats">
<h2>Project Statistics</h2>
<div class="contributor-stats-grid" id="statsGrid">
<!-- Stats will be dynamically inserted here -->
</div>
</section>
<!-- Stats Section -->
<section class="contributor-stats">
<h2>Project Statistics</h2>
<div class="contributor-stats-grid" id="statsGrid">
<!-- Stats will be dynamically inserted here -->
</div>
</section>

<!-- Contributors Grid -->
<section class="contributor-contributors">
<h2>Meet Our Contributors</h2>
<div class="contributor-contributors-grid" id="contributorsGrid">
<!-- Contributors will be dynamically inserted here -->
</div>
<div id="loading" class="contributor-loading">
<div class="contributor-spinner"></div>
<!-- Contributors Grid -->
<section class="contributor-contributors">
<h2>Meet Our Contributors</h2>
<div class="contributor-contributors-grid" id="contributorsGrid">
<!-- Contributors will be dynamically inserted here -->
</div>
<div id="loading" class="contributor-loading">
<div class="contributor-spinner"></div>
</div>
</section>

<!-- Call to Action -->
<section id="contribute" class="contributor-cta">
<h2>Ready to Make an Impact?</h2>
<p>Join our community and help shape the future with us at Research Nexas</p>
<form id="subscribeForm">
<input type="email" id="emailInput" placeholder="Enter your email" required>
<button type="submit" class="contributor-btn contributor-btn-secondary">Get Started</button>
</form>
<div id="notification" class="contributor-notification contributor-hidden"></div>
</section>
</div>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top" style="bottom: 72px;">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
</section>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

<!-- Call to Action -->
<section id="contribute" class="contributor-cta">
<h2>Ready to Make an Impact?</h2>
<p>Join our community and help shape the future with us at Research Nexas</p>
<form id="subscribeForm">
<input type="email" id="emailInput" placeholder="Enter your email" required>
<button type="submit" class="contributor-btn contributor-btn-secondary">Get Started</button>
</form>
<div id="notification" class="contributor-notification contributor-hidden"></div>
</section>
</div>
// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>
<script src="/script/contributor.js"></script>
</body>
</html>

</html>
131 changes: 113 additions & 18 deletions public/css/contributor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ body {

/* Hero Section */
.contributor-hero {
background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80');
background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80");
background-size: cover;
background-position: center;
height: 70vh;
Expand All @@ -29,7 +29,7 @@ body {
}

.contributor-hero::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
Expand Down Expand Up @@ -153,11 +153,10 @@ body {

.contributor-contributor-card:hover {
transform: translateY(-5px);


background-color: aqua;
box-shadow: 0.5px 0.5px 5px 3px blue;
}
}

.contributor-contributor-card img {
width: 100px;
Expand Down Expand Up @@ -223,8 +222,12 @@ body {
}

@keyframes contributor-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* Call to Action Section */
Expand Down Expand Up @@ -262,16 +265,13 @@ body {

.contributor-contributor-card:hover {
transform: translateY(-5px);


background-color: aqua;
box-shadow: 0.5px 0.5px 5px 3px blue;
}


}

.contributor-notification {
background-color: #4CAF50;
background-color: #4caf50;
color: white;
padding: 1rem;
border-radius: 5px;
Expand All @@ -285,20 +285,115 @@ body {
/* Responsive Design */
@media (max-width: 768px) {
.contributor-hero h1 {
font-size: 2.5rem;
font-size: 2.5rem;
}

.contributor-hero p {
font-size: 1.2rem;
font-size: 1.2rem;
}

.contributor-cta form {
flex-direction: column;
align-items: center;
flex-direction: column;
align-items: center;
}

.contributor-cta input[type="email"] {
width: 100%;
max-width: 300px;
width: 100%;
max-width: 300px;
}
}
}

.scroll-top {
position: fixed;
right: 1.6%;
background: linear-gradient(100deg, #4453b8, #328aa5, #0b97d3);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
overflow: visible;
z-index: 10;
/* Ensure button is on top */
}

.scroll-top.show {
opacity: 1;
visibility: visible;
}

.scroll-top:hover {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.scroll-top:active {
transform: scale(1.05);
/* Minor scale reduction on click */
}

.scroll-top-icon {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}

.scroll-top:hover .scroll-top-icon {
transform: translateY(-3px);
}

/* Progress Ring Styling */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* To start from the top */
}

.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform-origin: 50% 50%;
}

/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}

50% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
}

100% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}
}

.scroll-top:hover {
animation: pulse 1.5s infinite;
}

.scroll-top.show {
animation: none;
/* No animation when showing the button */
}

.scroll-top.show:hover {
animation: pulse 1.5s infinite;
/* Pulse on hover */
}

0 comments on commit d55f292

Please sign in to comment.