diff --git a/team.html b/team.html index 493e6a26..6c6a37a4 100644 --- a/team.html +++ b/team.html @@ -1,187 +1,113 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Team Contributors</title> <link rel="stylesheet" href="communityStyle.css"> <link rel="icon" href="https://img.icons8.com/?size=100&id=23332&format=png&color=000000"> - <!-- <link rel="stylesheet" href="style.css"> --> - <script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous"></script> + <script src="https://kit.fontawesome.com/c4254e24a8.js" crossorigin="anonymous" defer></script> + <style> + body { + background-color: #040b21; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + } + + .home-btn { + height: 50px; + background-color: black; + color: white; + border-radius: 10px; + margin: 20px; + } + + .team-top { + text-align: center; + } + + .team-top h3 { + font-size: 36px; + margin-top: 20px; + border: 2.5px solid gray; + } + + .team-members { + display: flex; + gap: 20px; + margin-top: 5rem; + flex-wrap: wrap; + justify-content: center; + align-items: center; + } + + .team-member { + text-align: center; + max-width: 150px; + } + + .team-member img { + width: 150px; + height: 150px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 10px; + transition: transform 0.3s ease; + border: 4px solid #fff; + } + + .team-member img:hover { + transform: scale(1.1); + border: 0px; + } + + .team-member p { + font-size: 13px; + font-weight: bold; + color: #f1e4e4; + overflow-wrap: break-word; + } + + .box-panel { + display: flex; + justify-content: center; + align-items: center; + } + + /* Responsive styling */ + @media (max-width: 768px) { + .team-members { + flex-direction: column; + margin-top: 3rem; + } + } + + /* Animation for the header */ + .heading-contributors { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: 100px; + font-stretch: expanded; + padding-bottom: 1px; + line-height: 120px; + text-transform: uppercase; + color: transparent; + -webkit-text-stroke: 0.1px #140000; + background: url(img/background.jpeg); + -webkit-background-clip: text; + background-position: 0 0; + animation: back 10s linear infinite; + } + + @keyframes back { + 100% { + background-position: 200% 0; + } + } + </style> </head> -<style> - -body { - /* padding-top: 80px; */ - background-color: #040b21; -} -.home-btn{ - height: 50px; - background-color:black ; - color: white; - border-radius: 10px; -} - -.team-top { - text-align: center; -} - -.team-top h3 { - font-size: 36px; - margin-top: 20px; - border: 2.5px solid gray; -} - -.team-members { - display: flex; - gap: 20px; - margin-top: 5rem; - flex-wrap: wrap; - justify-content: center; - align-items: center; -} - -.team-member { - text-align: center; -} - -.team-member img { - width: 150px; - height: 150px; - border-radius: 50%; - object-fit: cover; - margin-bottom: 10px; - transition: transform 0.3s ease; - border: 4px solid #fff; -} - -.team-member p { - font-size: 13px; - font-weight: bold; - color: rgb(241, 228, 228); -} - -.team-member img:hover { - transform: scale(1.121); - border: 0px; - position: relative; -} - -.team-member p:nth-child(1) { - z-index: 999; -} - -.team-member p:nth-child(2) { - border: 2px solid #333; - background-color: #ffffff4a; - border-radius: 20px; - z-index: -1; -} - -.box-panel { - display: flex; - justify-content: center; - align-items: center; -} - -.widget-container { - transition: all 0.3s ease; -} - -.common-flip-style { - width: 250px; - height: 250px; - cursor: pointer; -} - -.common-box-style { - transform-style: preserve-3d; - backface-visibility: hidden; - position: absolute; - width: 100%; - height: 100%; - transition: all 0.6s ease-in-out; - border-radius: 10px; -} - -.flip-box { - position: relative; - perspective: 1000px; - transform-style: preserve-3d; -} - -.box-front { - transform: none; - z-index: 1; - background-position: center center; - background-size: cover; - background-repeat: no-repeat; -} - -.box-back { - width: calc(100% - 10px); - height: calc(100% - 10px); - transform: rotateX(0) rotateY(-180deg); - background: #fff; - color: red; - border: 5px solid orange; -} - -.flip-box:hover .box-front { - transform: rotateX(0) rotateY(180deg); -} - -.flip-box:hover .box-back { - border-radius: 50%; - color: red; - transform: none; -} -.box-content-wrapper { - display: flex; - width: 100%; - height: 100%; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - transform: translateZ(90px); - border-radius: 50%; -} - -.box-content-wrapper img { - width: 90%; - height: 90%; - border-radius: 50%; - object-fit: cover; -} -/* text"meet our awesome contributors" design for glowy animation */ -.heading-contributors{ - font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - font-size: 100px; - font-stretch: expanded; - padding-bottom: 1px; - line-height: 120px; - text-transform: Uppercase; - color: transparent; - -webkit-text-stroke: 0.1px #140000; - background: url(img/Premium\ Photo\ _\ Vibrant\ mesh\ gradient\ with\ magenta\ and\ blue\ colors\ high\ quality\ image\ for\ backgrounds\ and\ web.jpeg); - -webkit-background-clip: text; - background-position: 0 0; - animation: back 10s linear infinite; - -} -@keyframes back{ - 100%{ - - background-position: 200% 0; - } -} - - - - -</style> <body> <!-- Header Include --> @@ -189,101 +115,72 @@ <a href="index.html"><button class="home-btn">Back to Home</button></a> </header> - <!-- Sidebar Include --> - <aside> - <!-- Include your sidebar here --> - </aside> - - <!-- Navbar Include --> <main> <section class="team"> <div class="team-top" id="slide"> - <div class="heading-contributors"><h2>Meet our awesome contributors 💙</h2></div> - <div class="team-members"> + <div class="heading-contributors"> + <h2>Meet our awesome contributors 💙</h2> + </div> + <div class="team-members" id="team-members"> <!-- Team members' data will be dynamically populated here --> </div> + <p id="error-message" style="color: red; display: none;">Failed to load contributors. Please try again later.</p> </div> </section> </main> - <!-- Footer Include --> <footer> - <!-- Include your footer here --> + <!-- Footer Content Here --> </footer> <script> - const ownerName = "PriyaGhosal"; -const repoName = "BuddyTrail"; -const apiURL = `https://api.github.com/repos/${ownerName}/${repoName}/contributors`; - -fetch(apiURL) - .then((response) => response.json()) - .then((contributors) => { - const teamMembersDiv = document.querySelector(".team-members"); - contributors.forEach((contributor) => { - const contributorDiv = document.createElement("div"); - contributorDiv.classList.add("team-member"); - - const boxPanelSection = document.createElement("section"); - boxPanelSection.classList.add("box-panel"); - const widgetContainer = document.createElement("div"); - widgetContainer.classList.add("widget-container"); - const flipBox = document.createElement("div"); - flipBox.classList.add("flip-box", "common-flip-style"); - const boxFront = document.createElement("div"); - boxFront.classList.add("box-front", "common-box-style"); - const boxContentWrapperFront = document.createElement("div"); - boxContentWrapperFront.classList.add("box-content-wrapper"); - const contributorImageFront = document.createElement("img"); - contributorImageFront.src = contributor.avatar_url; - contributorImageFront.alt = contributor.login; - boxContentWrapperFront.appendChild(contributorImageFront); - boxFront.appendChild(boxContentWrapperFront); - - const boxBack = document.createElement("div"); - boxBack.classList.add("box-back", "common-box-style", "box-bgi-effect"); - const boxContentWrapperBack = document.createElement("div"); - boxContentWrapperBack.classList.add("box-content-wrapper"); - const boxContentBack = document.createElement("div"); - boxContentBack.classList.add("box-content"); - const contributorNameBack = document.createElement("h1"); - contributorNameBack.textContent = "Hello there!"; - const contributorRoleBack = document.createElement("h1"); - contributorRoleBack.innerHTML = `I am the <strong>${contributor.login}</strong>.`; - const contributorCommitsBack = document.createElement("h1"); - contributorCommitsBack.textContent = `Commits: ${contributor.contributions}`; - boxContentBack.appendChild(contributorNameBack); - boxContentBack.appendChild(contributorRoleBack); - boxContentBack.appendChild(contributorCommitsBack); - boxContentWrapperBack.appendChild(boxContentBack); - boxBack.appendChild(boxContentWrapperBack); - - flipBox.appendChild(boxFront); - flipBox.appendChild(boxBack); - widgetContainer.appendChild(flipBox); - boxPanelSection.appendChild(widgetContainer); - contributorDiv.appendChild(boxPanelSection); - - const contributorLink = document.createElement("a"); - contributorLink.href = contributor.html_url; - contributorLink.target = "_blank"; - - const contributorName = document.createElement("p"); - contributorName.textContent = contributor.login; - - const contributorRole = document.createElement("p"); - contributorRole.textContent = "Commits: " + contributor.contributions; - - contributorDiv.appendChild(contributorLink); - teamMembersDiv.appendChild(contributorDiv); - }); - }) - .catch((error) => { - console.error("Error fetching contributors:", error); - }); - - - + // Get owner and repo from query params (e.g., ?owner=PriyaGhosal&repo=BuddyTrail) + const urlParams = new URLSearchParams(window.location.search); + const ownerName = urlParams.get('owner') || "PriyaGhosal"; // Fallback to default owner + const repoName = urlParams.get('repo') || "BuddyTrail"; // Fallback to default repo + const apiURL = `https://api.github.com/repos/${ownerName}/${repoName}/contributors`; + + fetch(apiURL) + .then((response) => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then((contributors) => { + const teamMembersDiv = document.getElementById("team-members"); + contributors.forEach((contributor) => { + const contributorDiv = document.createElement("div"); + contributorDiv.classList.add("team-member"); + + const contributorImage = document.createElement("img"); + contributorImage.src = contributor.avatar_url; + contributorImage.alt = `${contributor.login}'s avatar`; + + const contributorName = document.createElement("p"); + contributorName.textContent = contributor.login; + + const contributorCommits = document.createElement("p"); + contributorCommits.textContent = `Commits: ${contributor.contributions}`; + + const contributorLink = document.createElement("a"); + contributorLink.href = contributor.html_url; + contributorLink.target = "_blank"; + contributorLink.appendChild(contributorDiv); + + contributorDiv.appendChild(contributorImage); + contributorDiv.appendChild(contributorName); + contributorDiv.appendChild(contributorCommits); + + teamMembersDiv.appendChild(contributorDiv); + }); + }) + .catch((error) => { + document.getElementById("error-message").style.display = "block"; + console.error("Error fetching contributors:", error); + }); </script> + </body> + </html>