diff --git a/Contributors/contributor.css b/Contributors/contributor.css index 1f9c83f..0400e8a 100644 --- a/Contributors/contributor.css +++ b/Contributors/contributor.css @@ -1,250 +1,534 @@ -* { +*{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 0; - box-sizing: border-box; } -body { - font-family: Arial, sans-serif; - background-color: #f9fafb; - color: #1f2937; - line-height: 1.5; +.container { + text-align: center; } -.hero { - height: 70vh; - display: flex; - align-items: center; - justify-content: center; - position: relative; - background-color: #bfdbfe; - color: white; - text-align: center; +.title { + display: inline-block; + font-size: 3em; + margin-bottom: 20px; + padding: 10px; + color: #fffdff; + + /* border-radius: 20px; */ + /* background-color: rgba(209, 209, 255, 0.8); */ } -.hero-overlay { +.theme-switch::before { + content: ""; position: absolute; - inset: 0; - background-color: rgba(0, 0, 0, 0.5); + top: 3px; + left: 3px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out; + background-image: url("../Assets/moon.png"); +} + +.theme-switch.dark-theme::before { + left: 33px; + background-image: url("../Assets/sun.png"); +} + +.contributors-grid { + + width: 100vw; + flex-wrap: wrap; + gap: 40px; + padding: 20px; + display: flex; } -.hero-content { +.contributor-card { + min-height: 300px; + display: flex; + justify-content: center; position: relative; - z-index: 10; - max-width: 64rem; - padding: 0 1rem; + max-width: calc(55% - 16px); + display: flex; + flex-direction: column; + align-items: center; + background-color: #253745; + border-radius: 8px; + padding: 16px; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + text-decoration: none; + color: inherit; + /* margin-bottom: 16px; */ + word-wrap: wrap; + transition: transform 0.5s ease-in-out, box-shadow 0.3s ease; + width:14%; } -.hero h1 { - font-size: 3rem; - font-weight: bold; - margin-bottom: 1rem; +#contributors { + perspective: 1000px; /* This adds depth for 3D transformations */ + margin-left: -19px; } -.hero p { - font-size: 1.5rem; - color: #bfdbfe; - margin-bottom: 2rem; + + +.contributor-card img { + border-radius: 50%; + width: 100px; + height: 100px; + object-fit: cover; + margin-bottom: 10px; + transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out; } -.cta-button { - display: inline-block; - padding: 1rem 2rem; - background-color: white; - color: #2563eb; - font-weight: bold; - text-decoration: none; - border-radius: 9999px; - transition: background-color 0.3s ease; + +.contributor-card h2 { + color: #040404; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; } -.cta-button:hover { - background-color: #bfdbfe; +.contributor-card p { + font-size: 1.2em; + position: relative; + z-index: 1; + transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; + margin: 0 0 10px; } -.stats, .contributors { - padding: 4rem 1rem; +.contributor-card:hover h2 { + text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108), + 0 0 0.8em rgb(0, 14, 108); + color: white; } -.stats { - background-color: white; +.contributor-card:hover p { + text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168), + 0 0 0.3em rgb(134, 136, 250); + color: white; + + /* font-weight: 400; */ } -.contributors { - background-color: #f3f4f6; +body { + background-color:#2c394c; + color: hsl(0, 0%, 100%); } -.stats h2, .contributors h2 { - font-size: 2rem; - font-weight: bold; +header { + height: 100px; +} + +.logo { + margin: 30px 0 0 0; +} + +footer { + background-color: #333; + color: white; text-align: center; - margin-bottom: 3rem; + padding: 20px 0; + margin-top: auto; } -.stats-container, .contributors-container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - max-width: 80rem; - margin: 0 auto; +.footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; } -.stat-card, .contributor-card { - background-color: white; - border-radius: 0.5rem; - padding: 1.5rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - transition: transform 0.3s ease, box-shadow 0.3s ease; + +.footer-contact a { + color: white; } -.contributor-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +header { + height: 100px; +} +body { + min-height: 100vh; + max-width: 100vw; +} +.logo { + margin: 5px 0px 0px 0px; } -.stat-card h3 { - font-size: 2rem; - font-weight: bold; - color: #1f2937; +footer { + background: #333; + color: white; + text-align: center; + padding: 20px 0; + margin-top: auto; } -.stat-card p { - color: #6b7280; +.footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; } -.contributor-card img { - width: 6rem; - height: 6rem; - border-radius: 50%; - margin: 0 auto 1rem; - border: 4px solid #3b82f6; +@media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.5rem; + /* Adjust padding to reduce overall height */ + } + + header nav { + flex-direction: column; + align-items: flex-start; + max-width: 100vw; + } + + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; /* Adjust padding for hamburger icon */ + position: absolute; + top: 0; + right: 1rem; /* Adjust right position as needed */ + } + + header nav ul { + flex-direction: column; + align-items: flex-start; + display: none; /* Hide the navbar items */ + max-height: 100vw; /* Full width for mobile view */ + position: absolute; + top: 100%; + right: 0; + background-color: #333; /* Background color for the floating menu */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a box shadow */ + padding: 1rem; /* Add padding */ + border-radius: 0 0 8px 8px; /* Rounded corners at the bottom */ + } + + header nav ul.show { + display: flex; /* Show the navbar items when the hamburger is clicked */ + align-items: flex-start; + } + + header nav ul li { + margin: 0.5rem 1rem; /* Adjust margin for vertical spacing */ + } + header nav ul li a:hover { + color: #00c6ff; + + border-bottom: 2px solid #00c6ff; + + } } -.contributor-card h3 { - font-size: 1.25rem; - font-weight: bold; - margin-bottom: 0.5rem; +/* Styles for larger screens */ +@media (min-width: 901px) { + header { + height: auto; + } + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + /* header nav ul li { + margin: 0 0.5rem; /* Reduce margin between items */ +} +*/ header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; /* Rounded corners for active link */ } -.contributor-card p { - font-size: 0.875rem; - color: #3b82f6; - margin-bottom: 1rem; +footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; } -.contributor-card .contributions { - display: inline-block; - background-color: #dbeafe; - color: #1e40af; - font-weight: 600; - padding: 0.25rem 0.75rem; - border-radius: 9999px; - font-size: 0.875rem; +footer p { + margin: 10px 0; } -.contributor-card a { - display: inline-flex; - align-items: center; - color: #3b82f6; +footer p a { + color: #00c6ff; text-decoration: none; - font-weight: 500; - transition: color 0.3s ease; } -.contributor-card a:hover { - color: #1e40af; +footer p a:hover { + text-decoration: underline; } -.contributor-card svg { - margin-right: 0.5rem; +/* Footer Styles */ +footer { + background-color: #1a1a1a; + color: white; + padding: 40px 0; + text-align: center; } -.loading { - display: flex; - justify-content: center; - align-items: center; - height: 200px; +footer p { + margin: 10px 0; } -.spinner { - border: 4px solid #f3f3f3; - border-top: 4px solid #3b82f6; - border-radius: 50%; - width: 40px; - height: 40px; - animation: spin 1s linear infinite; +footer p a { + color: #00c6ff; + text-decoration: none; } -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } +footer p a:hover { + text-decoration: underline; } -.contribute { - background-color: #2563eb; +footer { + background: #333; color: white; - padding: 4rem 1rem; text-align: center; - margin-bottom: 4rem; + padding: 20px 0; + margin-top: auto; } -.contribute h2 { - font-size: 2rem; - font-weight: bold; - margin-bottom: 1rem; +.footer-container { + max-width: 800px; + margin: auto; + padding: 0 20px; } -.contribute p { - font-size: 1.25rem; - color: #bfdbfe; - margin-bottom: 2rem; + +.footer-contact { + margin: 10px 0; +} + + + + + +html { + scroll-behavior: smooth; + max-width: 100vw; + max-height: 100vh; +} + +body { + background-color: #021024; + overflow-x: hidden; + margin: 0; + + } -#emailForm { +header { + background-color: #1a1a1a; + padding: 0px 20px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + position: sticky; + top: 0; + z-index: 1000; + border-bottom: 3px solid #00c6ff; display: flex; - flex-direction: column; + justify-content: space-between; align-items: center; - gap: 1rem; } -#emailForm input { - padding: 0.75rem 1.5rem; - border-radius: 9999px; - border: none; - width: 100%; - max-width: 20rem; +header nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; +} + +header nav ul { + list-style: none; + display: flex; + gap: 30px; } -#emailForm button { - padding: 0.75rem 2rem; - background-color: white; - color: #2563eb; - font-weight: bold; - border: none; - border-radius: 9999px; - cursor: pointer; - transition: background-color 0.3s ease; +header nav ul li a { + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 18px; + transition: color 0.3s, border-bottom 0.3s; + background-color: rgb(72, 71, 71); + padding: 15px; } -#emailForm button:hover { - background-color: #bfdbfe; +header nav ul li a:hover { + background-color: #00c6ff; + color: #000; + border-radius: 0.75rem; } -@media (min-width: 640px) { - .hero h1 { - font-size: 3.75rem; +@media (max-width: 900px) { + header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; } - .hero p { - font-size: 1.875rem; + header nav { + flex-direction: column; + align-items: flex-start; + width: 100%; } - #emailForm { - flex-direction: row; - justify-content: center; + header nav .hamburger { + display: block; + font-size: 28px; + cursor: pointer; + color: #fff; + padding: 1rem; + position: absolute; + top: 0; + right: 1rem; } - #emailForm input { - width: auto; + header nav ul { + flex-direction: column; + display: none; + width: 100%; + height: 100vh; + background-color: #333; + padding: 1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 0 0 8px 8px; } + + header nav ul.show { + display: flex; + } +} + +@media (min-width: 901px) { + header nav .hamburger { + display: none; + } + + header nav ul { + display: flex; + flex-direction: row; + align-items: center; + } +} + +header .logo h1 { + color: #fff; + font-weight: 700; + font-size: 28px; + margin: 0; +} + + +.homeBtn{ + text-decoration: none; + color: #000; + top: 20px; + left: 20px; + position: absolute; + background-color: #0e99ea; + width: 60px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 40px; + border: #000 2px solid; +} +.homeBtn:hover{ + background-color: #00c6ff; + color: #000; + border: #00c6ff 2px solid; +} + +/* Stats Section */ +.contributor-stats { +max-width: 1200px; +margin: 0 auto; +padding: 2rem 2rem; +text-align: center; +background-color: rgba(255,255,255,0.3); +border-radius: 25px; +margin-top: 60px; +} + +.contributor-stats h2 { +font-size: 3rem; +margin-bottom: 2rem; +} + +.contributor-stats-grid { +display: grid; +grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +gap: 2rem; +} + +.contributor-stat-card { +background-color: rgba(0,0,0,0.4); +border-radius: 10px; +padding: 1.5rem; +text-align: center; +} + +.contributor-stat-card .contributor-icon { +font-size: 2rem; +margin-bottom: 1rem; +} + +.contributor-stat-card h3 { +font-size: 2rem; +margin-bottom: 0.5rem; +} + +.contributor-stat-card p { +color: #ffffff; +} + +div#contributors{ +gap: 2rem 7rem; +flex-wrap: wrap; +justify-content: center; +} + +a{ + text-decoration: none; + color: white; + margin-top: 20px; + font-size: 1.2rem; +} + +.home-nav a { + text-decoration: none; + height: 50px; + width: 250px; + color: white; + font-size: 1.25rem; + position: absolute; + top: 20px; + left: 40px; + background-color: rgba(255, 255, 255, 0.2); + display: flex; + justify-content: center; + align-items: center; + border-radius: 30px; + transition: all 0.4s ease; +} + +.home-nav a:hover { + transform: scale(1.02); + background-color: #fff; + color: black; } \ No newline at end of file diff --git a/Contributors/contributor.html b/Contributors/contributor.html index 6b045ad..affa0cf 100644 --- a/Contributors/contributor.html +++ b/Contributors/contributor.html @@ -1,58 +1,67 @@ - - - - - Contributors Page - - - + + + Contributors + + + - - -
-
-
-

Our Amazing Contributors

-

Shaping the future of Alien Invasion Defense, one commit at a time

- Become a Contributor -
-
+
+   Return to Home +
- -
-

Project Statistics

-
- -
-
+
+

Project Statistics

+
+ +
+
- -
-

Meet Our Contributors

-
-
- -
-
-
+
+

Our Contributors

+
+
+ - + - - \ No newline at end of file + diff --git a/Contributors/contributor.js b/Contributors/contributor.js index e6d1efb..719973e 100644 --- a/Contributors/contributor.js +++ b/Contributors/contributor.js @@ -1,95 +1,39 @@ -document.addEventListener("DOMContentLoaded", function () { - const contributorsContainer = document.getElementById('contributors'); - const statsContainer = document.getElementById('stats'); - const loadingIndicator = document.getElementById('loading'); - const emailForm = document.getElementById('emailForm'); - const emailInput = document.getElementById('email'); - - // Fetch contributors and repo stats - async function fetchData() { - loadingIndicator.style.display = 'flex'; - - try { - const contributorsResponse = await axios.get('https://api.github.com/repos/YadavAkhileshh/Alien-Invasion-Defense/contributors'); - const contributorsData = contributorsResponse.data; - - const repoResponse = await axios.get('https://api.github.com/repos/YadavAkhileshh/Alien-Invasion-Defense'); - const repoData = repoResponse.data; - - populateStats(repoData, contributorsData); - populateContributors(contributorsData); - } catch (error) { - console.error('Error fetching data:', error); - } finally { - loadingIndicator.style.display = 'none'; - } - } - - function populateStats(repoData, contributors) { - const stats = [ - { label: "Contributors", value: contributors.length, icon: '' }, - { label: "Total Contributions", value: contributors.reduce((sum, contributor) => sum + contributor.contributions, 0), icon: '' }, - { label: "GitHub Stars", value: repoData.stargazers_count, icon: '' }, - { label: "Forks", value: repoData.forks_count, icon: '' }, - ]; - - statsContainer.innerHTML = ''; - stats.forEach((stat, index) => { - const statCard = document.createElement('div'); - statCard.className = "stat-card"; - statCard.innerHTML = ` -
${stat.icon}
-

${stat.value}

-

${stat.label}

- `; - statCard.style.opacity = '0'; - statCard.style.transform = 'translateY(20px)'; - statsContainer.appendChild(statCard); - - setTimeout(() => { - statCard.style.transition = 'opacity 0.5s, transform 0.5s'; - statCard.style.opacity = '1'; - statCard.style.transform = 'translateY(0)'; - }, index * 100); - }); - } - - function populateContributors(contributors) { - contributorsContainer.innerHTML = ''; - contributors.forEach((contributor, index) => { - const contributorCard = document.createElement('div'); - contributorCard.className = "contributor-card"; - contributorCard.innerHTML = ` - ${contributor.login} -

${contributor.login}

-

${contributor.type}

-
${contributor.contributions} contributions
- - - - - - View Profile - - `; - contributorCard.style.opacity = '0'; - contributorsContainer.appendChild(contributorCard); - - setTimeout(() => { - contributorCard.style.transition = 'opacity 0.5s'; - contributorCard.style.opacity = '1'; - }, index * 100); - }); +const repoOwner = "YadavAkhileshh"; +const repoName = "Alien-Invasion-Defense"; +const contributorsUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/contributors`; +const repoUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`; + +async function fetchContributorData() { + try { + const [contributorsRes, repoRes] = await Promise.all([ + fetch(contributorsUrl), + fetch(repoUrl) + ]); + + const contributors = await contributorsRes.json(); + const repoData = await repoRes.json(); + + const statsGrid = document.getElementById("statsGrid"); + + statsGrid.innerHTML = ` +

${contributors.length}

Contributors

+

${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}

Total Contributions

+

${repoData.stargazers_count}

GitHub Stars

+

${repoData.forks_count}

Forks

+ `; + + const contributorsContainer = document.getElementById("contributors"); + contributorsContainer.innerHTML = contributors.map(({ login, contributions, avatar_url, html_url }) => ` +
+ ${login}'s avatar +

${login}

+

Contributions: ${contributions}

+ GitHub Profile +
+ `).join(''); + } catch (error) { + console.error("Error fetching data:", error); } +} - // Handle email form submission - emailForm.addEventListener('submit', function (event) { - event.preventDefault(); - const emailValue = emailInput.value; - alert(`Thank you for signing up with ${emailValue}!`); - emailInput.value = ''; - }); - - // Initialize - fetchData(); -}); \ No newline at end of file +fetchContributorData(); diff --git a/index.html b/index.html index 00eb7fa..6b3c5e6 100644 --- a/index.html +++ b/index.html @@ -767,6 +767,11 @@

Player Instructions

Signup/Register +
+ + + +