Added contributor page enaable dark mode

jfmartinz · Jun 19, 2024 · 33bc903 · 33bc903
1 parent 36f71d5
commit 33bc903
Show file tree

Hide file tree

Showing 3 changed files with 425 additions and 0 deletions.
diff --git a/new-website/contibuters.js b/new-website/contibuters.js
@@ -0,0 +1,129 @@
+// const hamBurger = document.querySelector(".hamburger");
+// const nMenu = document.querySelector(".nav-menu");
+
+// document.addEventListener("DOMContentLoaded", function () {
+//   setTimeout(function () {
+//     document.querySelector("body").classList.add("loaded");
+//   }, 500);
+// });
+const loading = document.getElementById("loading1");
+loading.innerHTML = `<h1 class="loading">Loading</h1>`;
+// Hamburger menu
+// hamBurger.addEventListener("click", mobileMenu);
+// function mobileMenu() {
+//   hamBurger.classList.toggle("active");
+//   nMenu.classList.toggle("active");
+// }
+
+const cont = document.getElementById("contributor");
+const owner = "jfmartinz";
+const repoName = "ResourceHub";
+
+async function fetchContributors(pageNumber) {
+  const apiUrl =
+    "https://script.googleusercontent.com/macros/echo?user_content_key=SOnBnlAhhwAY2lLH5HfppGmJGT_2ps5V6IQnMqMGBXbQfQRkZzw_v_5iRGG0aocf2N5fb1QagfriAH_KtdGjmF5EZ-d2l64Mm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC62rQSNc23BPEU_1j4s8hh_HP6kAPpX9xtypcE4mPgzpikbBkSG4MZLP8aImUTewbmUkdfzbTtyUarIvNXMDMKXAagsogLIsQ&lib=MghKih2WtI3ppVHa2nSvtXXt7vnFOnL-L";
+
+  async function getkey() {
+    try {
+      const response = await fetch(apiUrl);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data = await response.json();
+      console.log(data); // Log the response data
+      return data.apik[0].apikey;
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  }
+  const token = await getkey();
+  const perPage = 100;
+  const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`;
+
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch contributors data. Status code: ${response.status}`
+    );
+  }
+
+  const contributorsData = await response.json();
+  return contributorsData;
+}
+
+// Function to fetch all contributors
+async function fetchAllContributors() {
+  let allContributors = [];
+  let pageNumber = 1;
+
+  try {
+    while (true) {
+      const contributorsData = await fetchContributors(pageNumber);
+      if (contributorsData.length === 0) {
+        break;
+      }
+      allContributors = allContributors.concat(contributorsData);
+      pageNumber++;
+    }
+    allContributors.forEach((contributor) => {
+      if (loading) loading.innerHTML = ``;
+      if (contributor.login === owner) {
+        return;
+      }
+
+      const contributorCard = document.createElement("div");
+      contributorCard.classList.add("contributor-card");
+
+      const avatarImg = document.createElement("img");
+      avatarImg.src = contributor.avatar_url;
+      avatarImg.alt = `${contributor.login}'s Picture`;
+
+      const loginLink = document.createElement("a");
+      loginLink.href = contributor.html_url;
+      loginLink.target = "_blank";
+      loginLink.appendChild(avatarImg);
+
+      contributorCard.appendChild(loginLink);
+
+      cont.appendChild(contributorCard);
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+fetchAllContributors();
+
+let calcScrollValue = () => {
+  let scrollProg = document.getElementById("progress");
+  let pos = document.documentElement.scrollTop;
+  let calcHeight =
+    document.documentElement.scrollHeight -
+    document.documentElement.clientHeight;
+  let scrollValue = Math.round((pos * 100) / calcHeight);
+  if (pos > 100) {
+    scrollProg.style.display = "grid";
+  } else {
+    scrollProg.style.display = "none";
+  }
+  scrollProg.addEventListener("click", () => {
+    document.documentElement.scrollTop = 0;
+  });
+  scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`;
+};
+
+window.addEventListener("scroll", function () {
+  var scrollToTopButton = document.getElementById("progress");
+  if (window.pageYOffset > 200) {
+    scrollToTopButton.style.display = "block";
+  } else {
+    scrollToTopButton.style.display = "none";
+  }
+});
+
+window.onscroll = calcScrollValue;
+window.onload = calcScrollValue;
diff --git a/new-website/contributor.html b/new-website/contributor.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ResourceHub</title>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2" defer></script>
+    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">  
+    <!-- added fontAwesome links to add github and discord icon -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="loading.css">
+    <link rel="stylesheet" href="contributors.css">
+
+
+    <link rel="icon" href="assets/logo.png">
+<style>
+    #title{
+        margin-top:100px ;
+    }
+    .contributor-card:hover{
+        transition: 0.5s;
+      transform: scale(1.25);
+    }
+</style>
+
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+</head>
+
+<body class="bg-white dark:bg-black dark:text-white">
+
+    <!-- NAVBAR -->
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
+
+
+    <div
+        class="w-full navbr text-gray-800 bg-transparent dark:text-slate-200 dark-mode:text-gray-200 dark-mode:bg-gray-800">
+        <div x-data="{ open: true }"
+            class="flex flex-col items-center justify-between max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
+            <div class="flex flex-row items-center justify-between p-4">
+                <a style="font-family: 'Righteous'; text-transform: none;" href="#"
+                    class="text-lg font-semibold tracking-widest text-gray-900 dark:text-slate-200 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">ResourceHub</a>
+                <button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
+                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
+                        <path x-show="!open" fill-rule="evenodd"
+                            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
+                            clip-rule="evenodd"></path>
+                        <path x-show="open" fill-rule="evenodd"
+                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+            </div>
+            <nav :class="{'flex': open, 'hidden': !open}"
+                class="flex-col flex-grow hidden pb-4  md:pb-0 md:flex md:justify-center md:flex-row">
+    <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200  focus:shadow-outline dark:bg-transparent  md:mt-0 md:ml-4 
+                dark:text-slate-200 focus:outline-none focus:shadow-outline" href="index.html">Home</a>
+    <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="about.html">About</a>
+    <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#resources">Resources</a>
+        <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="contributor.html">Contributors</a>
+    <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#organization">Organization</a>
+    <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+        href="#faq">FAQ</a>
+    <!-- Github and discord icons -->
+    <div class="icons">
+        <a href="https://discord.com/channels/1243120700626309131/1243121246217175081" class="icon-link"><i class="fa-brands fa-discord"></i></a>
+        <a href="https://github.com/jfmartinz/ResourceHub" class="icon-link"><i class="fa-brands fa-github"></i></a>
+    </div>    
+</nav>
+
+<style>
+    .icon-link {
+        font-size: 1.35rem; 
+        margin: 5px 15px; 
+        display: inline-block;
+        transition: transform 0.3s ease;
+    }
+
+    .icon-link:hover {
+        transform: scale(1.2);
+    }
+</style>
+                <input type="checkbox" id="slider" class="slider hidden" onclick="toggleDarkMode()">
+                <label for="slider"
+                    class="slider-label bg-gray-300 dark:bg-gray-700 w-16 h-8 flex items-center rounded-full p-1 cursor-pointer transition duration-500">
+                    <div
+                        class="slider-circle bg-white w-6 h-6 rounded-full shadow-md transform transition duration-500">
+                    </div>
+                </label>
+
+                <div class="btn-container">
+
+                    <div @click.away="open = false" class="" x-data="{ open: true }">
+
+
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+    <div id="particles-js"></div>
+    <div id="title"> <h1>Faces of Dedication: Our Contributing Heroes</h1></div>
+
+    <div id="loading1"></div>
+    <div id="contributor"></div>
+    <!-- Footer Section -->
+<div class="footer-container">
+    <div class="footer-content">
+        <div class="footer-left">
+            <div class="logo-and-title">
+                <img id="logo-image" src="assets/footerLight.png" alt="ResourceHub Image">
+                <h2 class="footer-title">ResourceHub</h2>
+            </div>
+            <p class="footer-description">ResourceHub is an open-source project that serves as a one-stop repository of
+                valuable resources curated by the amazing contributors in the community</p>
+            <div class="footer-icons">
+                <a href="https://github.com/jfmartinz/ResourceHub" target="_blank" aria-label="Github">
+                    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="black"
+                            d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.1c-3.4.7-4.1-1.6-4.1-1.6-.5-1.2-1.3-1.6-1.3-1.6-1.1-.8.1-.8.1-.8 1.2.1 1.8 1.3 1.8 1.3 1 .2 1.7.7 2 .9.2-.7.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.6 0-1.3.4-2.3 1.2-3.2-.1-.3-.5-1.4.1-3 0 0 1-.3 3.4 1.2a11.4 11.4 0 0 1 6.2 0c2.4-1.5 3.4-1.2 3.4-1.2.6 1.6.2 2.7.1 3 .8.9 1.2 1.9 1.2 3.2 0 4.3-2.8 5.3-5.5 5.6.4.4.7 1.1.7 2.1v3c0 .3.2.7.8.6A12 12 0 0 0 12 0Z" />
+                    </svg>
+                </a>
+                <a href="https://discord.com/channels/1243120700626309131/1243121246217175081" target="_blank"
+                    aria-label="Discord">
+                    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="black"
+                            d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2763-3.68-.2763-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561 19.911 19.911 0 004.967 2.5225.0777.0777 0 00.0842-.0276c.3841-.5234.7217-1.0782 1.0062-1.657a.076.0766 0 00-.0416-.1057 13.1141 13.1141 0 01-1.872-1.0279.077.077 0 01-.0076-.1257c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.0991.246.1981.3728.2924a.077.077 0 01-.0066.1256 12.7578 12.7578 0 01-1.873 1.0279.0766.0766 0 00-.0407.1067c.2845.5788.6221 1.1336 1.0062 1.657a.076.076 0 00.0842.0276 19.9183 19.9183 0 004.967-2.5225.077.077 0 00.0313-.0561c.5004-5.177-.8382-9.6739-3.5485-13.6607a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.955-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.955 2.4189-2.1568 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.955-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+                    </svg>
+                </a>
+            </div>
+        </div>
+        <div class="footer-right">
+            <ul class="footer-links">
+                <li><a href="https://github.com/jfmartinz/ResourceHub" target="_blank">View on GitHub</a></li>
+                <li><a href="https://github.com/jfmartinz/ResourceHub/stargazers" target="_blank">Star on GitHub</a></li>
+                <li><a href="https://github.com/jfmartinz/ResourceHub/blob/main/CONTRIBUTING.md" target="_blank">How to Contribute</a></li>
+                <li><a href="https://github.com/jfmartinz/ResourceHub/edit/main/README.md" target="_blank">Edit on GitHub</a></li>
+                <li><a href="feedback.html">Feedback</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="footer-bottom">
+        <p>Copyright &copy; 2024 <a href="#">ResourceHub</a>. All Rights Reserved.</p>
+    </div>
+    <div id="back-to-top-container">
+        <div class="circle1">
+      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
+      </svg>
+      </div>
+      </div>
+</div>
+
+    <!-- for particle effet -->
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            particlesJS.load('particles-js', './assets/homeparticles.json', function () {
+                console.log('callback - particles.js config loaded');
+            });
+        });
+    </script>
+    <script src="particles.js"></script>
+    <script src="home.js"></script>
+    <script src="Resourse.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const backToTopButton = document.getElementById('back-to-top-container');
+
+            function checkButtonVisibility() {
+                if (window.innerWidth > 100 && window.scrollY > 100) {
+                    backToTopButton.style.display = 'block';
+                } else {
+                    backToTopButton.style.display = 'none';
+                }
+            }
+
+            window.addEventListener('scroll', checkButtonVisibility);
+            window.addEventListener('resize', checkButtonVisibility);
+
+            backToTopButton.addEventListener('click', function () {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth' 
+                });
+            });
+            checkButtonVisibility();
+        });
+
+          </script>
+          <script src="contibuters.js"></script>
+</body>
+
+</html>