From 6462634ff54079dfcbc1d9ecf187f02e4ac468cc Mon Sep 17 00:00:00 2001 From: "sanikamandale177@gmail.com" Date: Wed, 16 Oct 2024 23:53:23 +0530 Subject: [PATCH] Fix issue #338 Add contribution Page --- contributors.html | 173 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 + pqr.css | 123 ++++++++++++++++++++++++++++++++ script1.js | 76 ++++++++++++++++++++ 4 files changed, 374 insertions(+) create mode 100644 contributors.html create mode 100644 pqr.css create mode 100644 script1.js diff --git a/contributors.html b/contributors.html new file mode 100644 index 0000000..535c437 --- /dev/null +++ b/contributors.html @@ -0,0 +1,173 @@ + + + + + + Contributors + + + + + + + + + + + + + +
+
+
+ + +
+
+ +
+

Our Contributors

+
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 56ff0cf..8fd5365 100644 --- a/index.html +++ b/index.html @@ -941,6 +941,8 @@
  • Buy
  • Sell
  • Contact
    • +
  • Our Contributors
    • +
    • diff --git a/pqr.css b/pqr.css new file mode 100644 index 0000000..51db4ae --- /dev/null +++ b/pqr.css @@ -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); + } + \ No newline at end of file diff --git a/script1.js b/script1.js new file mode 100644 index 0000000..5e21c65 --- /dev/null +++ b/script1.js @@ -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 = ` + + ${contributor.login} + +

    ${contributor.login}

    +

    Contributions: ${contributor.contributions}

    + `; + + 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"); + } + }); +});