-
Notifications
You must be signed in to change notification settings - Fork 179
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix issue #338 Add contribution Page
- Loading branch information
1 parent
59ddc22
commit 6462634
Showing
4 changed files
with
374 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,173 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Contributors</title> | ||
<link rel="stylesheet" href="pqr.css"> | ||
<script src="script1.js"></script> | ||
|
||
|
||
<link | ||
rel="stylesheet" | ||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" | ||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" | ||
crossorigin="anonymous" | ||
referrerpolicy="no-referrer" | ||
/> | ||
<link | ||
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" | ||
rel="stylesheet" | ||
/> | ||
<link | ||
href="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;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> | ||
|
||
<style> | ||
html { | ||
scroll-behavior: smooth; | ||
} | ||
body{ | ||
background-image: linear-gradient(120deg, #fbccff, #d8f9ff, #d4c6ff); | ||
} | ||
body.dark-mode { | ||
background-color: #333; | ||
color: #ffffff; | ||
} | ||
.top-btn { | ||
display: none; | ||
width: 50px; | ||
height: 50px; | ||
position: fixed; | ||
bottom: 10px; | ||
right: 0px; | ||
background-color: #ab45e7; | ||
color: #fff; | ||
padding: 2px; | ||
border: none; | ||
margin-right: 36px; | ||
border-radius: 50%; | ||
cursor: pointer; | ||
} | ||
|
||
.top-btn:hover { | ||
background-color: #0056b3; | ||
} | ||
|
||
video#background-video { | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
object-fit: cover; | ||
z-index: -1; | ||
background-size: cover; | ||
} | ||
|
||
.pagination-btns { | ||
margin: 50px 0px; | ||
} | ||
|
||
.pagination-btns button.btn { | ||
border-radius: 5px; | ||
outline: none; | ||
margin: 5px 10px; | ||
border: 1px solid rgb(146, 110, 110); | ||
} | ||
|
||
.pagination-btns button.btn, .pagination-btns button.btn i.bi { | ||
font-size: 2rem; | ||
} | ||
|
||
|
||
#progress-container { | ||
position: fixed ; | ||
top: 0px; | ||
left: 0; | ||
width: 100%; | ||
height: 15px; | ||
z-index: 99990; | ||
/* background: #f3f3f3; */ | ||
} | ||
|
||
#progress-bar { | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
width: 0%; | ||
height: 7px; | ||
width: 0; | ||
background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%); | ||
box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7); | ||
transition: width 0.09s ease-in-out; | ||
border-radius: 10px; | ||
} | ||
|
||
</style> | ||
</style> | ||
</head> | ||
<body> | ||
<div id="progress-container"> | ||
<div id="progress-bar"></div> | ||
</div> | ||
<video id="background-video" autoplay muted loop> | ||
<source src="img/bg video terms2.mp4" type="video/mp4" /> | ||
Your browser does not support the video tag. | ||
</video> | ||
|
||
<div class="container"> | ||
<div class="toggle-container aos-init aos-animate" data-aos="fade-down"> | ||
<input id="themeToggle" class="toggle" type="checkbox"> | ||
</div> | ||
<h1 class="title">Our Contributors</h1> | ||
<div id="contributors" class="contributors-grid"></div> | ||
<div class="pagination-btns"> | ||
<button class="btn" id="prevBtn"> <i class="bi bi-arrow-left-circle"></i> </button> | ||
<button class="btn" id="pageNoBox">1</button> | ||
<button class="btn" id="nextBtn"> <i class="bi bi-arrow-right-circle"></i> </button> | ||
</div> | ||
</div> | ||
<button class="top-btn" id="goToTopBtn" onclick="goToTop()"> | ||
<i class="fa-solid fa-chevron-up" style="color: #ffffff"></i> | ||
</button> | ||
<script> | ||
// Get the button | ||
var mybutton = document.getElementById("goToTopBtn"); | ||
|
||
// When the user scrolls down 20px from the top of the document, show the button | ||
window.onscroll = function () { | ||
scrollFunction(); | ||
}; | ||
|
||
function scrollFunction() { | ||
if ( | ||
document.body.scrollTop > 20 || | ||
document.documentElement.scrollTop > 20 | ||
) { | ||
mybutton.style.display = "block"; | ||
} else { | ||
mybutton.style.display = "none"; | ||
} | ||
} | ||
|
||
// When the user clicks on the button, scroll to the top of the document | ||
function goToTop() { | ||
document.body.scrollTop = 0; | ||
document.documentElement.scrollTop = 0; | ||
} | ||
</script> | ||
<script src="src/Scripts/contributor.js"></script> | ||
<script> | ||
|
||
window.addEventListener('scroll', function() { | ||
const winScroll = document.body.scrollTop || document.documentElement.scrollTop; | ||
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; | ||
const scrolled = (winScroll / height) * 100; | ||
document.getElementById('progress-bar').style.width = scrolled + '%'; | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
body { | ||
font-family: "Poppins"; | ||
color: #333; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
min-height: 100vh; | ||
margin: 0; | ||
} | ||
|
||
.container { | ||
text-align: center; | ||
} | ||
|
||
.title { | ||
font-size: 3em; | ||
margin-bottom: 20px; | ||
padding: 10px; | ||
color: #00d4ff; /* Match with the website’s teal/blue colors */ | ||
text-shadow: 1px 1px 2px rgba(0, 213, 255, 0.7), 0 0 1em rgba(0, 128, 255, 0.6); | ||
} | ||
|
||
.contributors-grid { | ||
display: flex; | ||
flex-wrap: wrap; | ||
gap: 20px; | ||
justify-content: center; | ||
padding: 10px; | ||
gap: 40px; | ||
} | ||
|
||
.contributor-card { | ||
width: 220px; | ||
position: relative; | ||
max-width: calc(25% - 16px); | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
background-color: #1e293b; /* Dark background to fit theme */ | ||
border-radius: 8px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
padding: 16px; | ||
transition: transform 0.5s ease, box-shadow 0.3s ease; | ||
color: #fff; /* White text for dark theme */ | ||
border: none; | ||
} | ||
|
||
.contributor-card:hover { | ||
transform: scale(1.05); | ||
box-shadow: 0 6px 15px rgba(0, 217, 255, 0.8); /* Light blue glow on hover */ | ||
} | ||
|
||
.contributor-card::before { | ||
content: ""; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background: linear-gradient(135deg, #00b4d8 50%, #0077b6 51%); | ||
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; | ||
transform: translate(-100%, -100%); | ||
opacity: 0; | ||
z-index: -1; | ||
} | ||
|
||
.contributor-card:hover::before { | ||
transform: translate(0, 0); | ||
opacity: 1; | ||
} | ||
|
||
.contributor-card img { | ||
border-radius: 50%; | ||
width: 100px; | ||
height: 100px; | ||
object-fit: cover; | ||
margin-bottom: 10px; | ||
border: 2px solid #00d4ff; /* Match with website theme colors */ | ||
transition: box-shadow 0.3s ease-in-out; | ||
} | ||
|
||
.contributor-card:hover img { | ||
box-shadow: 0 0 15px rgba(0, 217, 255, 0.8); /* Light blue border glow */ | ||
} | ||
|
||
.contributor-card h2 { | ||
font-size: 1.3em; | ||
color: #00d4ff; /* Bright teal/blue text */ | ||
transition: color 0.3s ease, text-shadow 0.3s ease; | ||
} | ||
|
||
.contributor-card p { | ||
font-size: 1.1em; | ||
color: #a0aec0; /* Soft grey for descriptions */ | ||
transition: color 0.3s ease, text-shadow 0.3s ease; | ||
} | ||
|
||
.contributor-card:hover h2 { | ||
color: #ffffff; | ||
text-shadow: 1px 1px 2px rgba(0, 255, 255, 0.7), 0 0 10px rgba(0, 217, 255, 0.8); | ||
} | ||
|
||
.contributor-card:hover p { | ||
color: #ffffff; | ||
text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); | ||
} | ||
|
||
/* Dark mode */ | ||
body.dark-mode .contributor-card { | ||
background-color: #121f3d; /* Darker background for dark mode */ | ||
} | ||
|
||
body.dark-mode .contributor-card p, | ||
body.dark-mode .contributor-card h2 { | ||
color: #b0c4de; | ||
} | ||
|
||
body.dark-mode .contributor-card:hover h2, | ||
body.dark-mode .contributor-card:hover p { | ||
color: #ffffff; | ||
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
let pageNo = 1; | ||
|
||
document.addEventListener("DOMContentLoaded", () => { | ||
const contributorsContainer = document.getElementById("contributors"); | ||
const nextBtn = document.getElementById("nextBtn"); | ||
const prevBtn = document.getElementById("prevBtn"); | ||
const pageNoBox = document.getElementById("pageNoBox"); | ||
|
||
async function fetchContributors(page) { | ||
pageNo += page; | ||
try { | ||
const response = await fetch( | ||
`https://api.github.com/repos/ankit071105/Ticket-Booking/contributors?page=${pageNo}` | ||
); | ||
const contributors = await response.json(); | ||
console.log(contributors.length); | ||
if (contributors.length == 0 || pageNo < 1) { | ||
return; | ||
} | ||
|
||
contributorsContainer.innerHTML = ""; | ||
pageNoBox.innerText = pageNo; | ||
contributors.forEach((contributor) => { | ||
const contributorCard = document.createElement("div"); | ||
contributorCard.className = "contributor-card"; | ||
|
||
contributorCard.innerHTML = ` | ||
<a href="${contributor.html_url}" target="_blank" rel="noopener noreferrer"> | ||
<img src="${contributor.avatar_url}" alt="${contributor.login}"> | ||
</a> | ||
<h2>${contributor.login}</h2> | ||
<p>Contributions: ${contributor.contributions}</p> | ||
`; | ||
|
||
contributorsContainer.appendChild(contributorCard); | ||
}); | ||
} catch (error) { | ||
console.error("Error fetching contributors:", error); | ||
} | ||
} | ||
|
||
fetchContributors(0); | ||
|
||
prevBtn.addEventListener("click", (e) => { | ||
e.preventDefault(); | ||
fetchContributors(-1); | ||
}); | ||
nextBtn.addEventListener("click", (e) => { | ||
e.preventDefault(); | ||
fetchContributors(1); | ||
}); | ||
}); | ||
|
||
// dark mode | ||
document.addEventListener("DOMContentLoaded", () => { | ||
const toggleCheckbox = document.getElementById("themeToggle"); | ||
const body = document.body; | ||
|
||
// Load saved dark mode preference from localStorage | ||
if (localStorage.getItem("dark-mode") === "enabled") { | ||
body.classList.add("dark-mode"); | ||
toggleCheckbox.checked = true; | ||
} else { | ||
toggleCheckbox.checked = false; | ||
} | ||
|
||
toggleCheckbox.addEventListener("change", () => { | ||
if (toggleCheckbox.checked) { | ||
body.classList.add("dark-mode"); | ||
localStorage.setItem("dark-mode", "enabled"); | ||
} else { | ||
body.classList.remove("dark-mode"); | ||
localStorage.setItem("dark-mode", "disabled"); | ||
} | ||
}); | ||
}); |