From 223352e05b0ce61144dbbea3da587e01943eebfc Mon Sep 17 00:00:00 2001
From: Subhajit-2023-44 <subhajit2006patra@gmail.com>
Date: Thu, 7 Nov 2024 19:55:08 +0530
Subject: [PATCH] done

---
 Alien.css         |   7 +-
 contributors.css  | 534 ++++++++++++++++++++++++++++++++++++++++++++++
 contributors.html |  67 ++++++
 contributors.js   |  39 ++++
 index.html        |   9 +
 5 files changed, 654 insertions(+), 2 deletions(-)
 create mode 100644 contributors.css
 create mode 100644 contributors.html
 create mode 100644 contributors.js

diff --git a/Alien.css b/Alien.css
index ac8c3bf..3200f17 100644
--- a/Alien.css
+++ b/Alien.css
@@ -63,13 +63,15 @@ body.dark-theme {
   display: flex;
   align-items: left;
   color: #0ff0fc;
-  font-size: 20px;
+  font-size: 14px;
   font-weight: bold;
   /* padding-right: 90px; */
   justify-content: center;
-  -webkit-text-stroke: 2px #093c84;
+  -webkit-text-stroke: 1px #093c84;
   /* Outline color */
   text-shadow: 0 4px 8px rgba(0, 255, 255, 0.1);
+  margin-left: -23px;
+  margin-right: 9px;
 }
 
 .navbar {
@@ -298,6 +300,7 @@ button {
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all var(--transition-speed);
+  margin-left: -13px;
 }
 
 body:not(.dark-theme) button {
diff --git a/contributors.css b/contributors.css
new file mode 100644
index 0000000..238fd26
--- /dev/null
+++ b/contributors.css
@@ -0,0 +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;
+  }
+  
+  .container {
+    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); */
+  }
+  
+  .theme-switch::before {
+    content: "";
+    position: absolute;
+    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;
+  }
+  
+  .contributor-card {
+    min-height: 300px;
+    display: flex;
+    justify-content: center; 
+    position: relative;
+    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%;
+  }
+  
+  #contributors {
+    perspective: 1000px; /* This adds depth for 3D transformations */
+    margin-left: -19px;
+  }
+  
+  
+  
+  .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;
+  }
+  
+  
+  .contributor-card h2 {
+    color: #040404;
+    position: relative;
+    z-index: 1;
+    transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+  }
+  
+  .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;
+  }
+  
+  .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;
+  }
+  
+  .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; */
+  }
+  
+  body {
+    background-color:#2c394c;
+    color: hsl(0, 0%, 100%);
+  }
+  
+  header {
+    height: 100px;
+  }
+  
+  .logo {
+    margin: 30px 0 0 0;
+  }
+  
+  footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 20px 0;
+    margin-top: auto;
+  }
+  
+  .footer-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 0 20px;
+  }
+  
+  
+  .footer-contact a {
+    color: white;
+  }
+  
+  header {
+    height: 100px;
+  }
+  body {
+    min-height: 100vh;
+    max-width: 100vw;
+  }
+  .logo {
+    margin: 5px 0px 0px 0px;
+  }
+  
+  footer {
+    background: #333;
+    color: white;
+    text-align: center;
+    padding: 20px 0;
+    margin-top: auto;
+  }
+  
+  .footer-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 0 20px;
+  }
+  
+  @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;
+  
+    }
+  }
+  
+  /* 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 */
+  }
+  
+  footer {
+    background-color: #1a1a1a;
+    color: white;
+    padding: 40px 0;
+    text-align: center;
+  }
+  
+  footer p {
+    margin: 10px 0;
+  }
+  
+  footer p a {
+    color: #00c6ff;
+    text-decoration: none;
+  }
+  
+  footer p a:hover {
+    text-decoration: underline;
+  }
+  
+  /* Footer Styles */
+  footer {
+    background-color: #1a1a1a;
+    color: white;
+    padding: 40px 0;
+    text-align: center;
+  }
+  
+  footer p {
+    margin: 10px 0;
+  }
+  
+  footer p a {
+    color: #00c6ff;
+    text-decoration: none;
+  }
+  
+  footer p a:hover {
+    text-decoration: underline;
+  }
+  
+  footer {
+    background: #333;
+    color: white;
+    text-align: center;
+    padding: 20px 0;
+    margin-top: auto;
+  }
+  
+  .footer-container {
+    max-width: 800px;
+    margin: auto;
+    padding: 0 20px;
+  }
+  
+  
+  .footer-contact {
+    margin: 10px 0;
+  }
+  
+  
+  
+  
+  
+  html {
+    scroll-behavior: smooth;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  
+  body {
+    background-color: #021024;    
+    overflow-x: hidden;
+    margin: 0;
+  
+  
+  }
+  
+  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;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  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;
+  }
+  
+  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;
+  }
+  
+  header nav ul li a:hover {
+    background-color: #00c6ff;
+    color: #000;
+    border-radius: 0.75rem;
+  }
+  
+  @media (max-width: 900px) {
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.5rem 1rem;
+    }
+  
+    header nav {
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+    }
+  
+    header nav .hamburger {
+      display: block;
+      font-size: 28px;
+      cursor: pointer;
+      color: #fff;
+      padding: 1rem;
+      position: absolute;
+      top: 0;
+      right: 1rem;
+    }
+  
+    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.html b/contributors.html
new file mode 100644
index 0000000..42a991c
--- /dev/null
+++ b/contributors.html
@@ -0,0 +1,67 @@
+<!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="contributors.css">
+  <link rel="icon" href="../image/ml-fusion-lab-logo.png">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="home-nav">
+        <a href="/"><i class="fa-solid fa-arrow-left-long"></i> &nbsp; Return to Home</a>
+    </div>
+
+  <section class="contributor-stats">
+    <h2>Project Statistics</h2>
+    <div class="contributor-stats-grid" id="statsGrid">
+      <!-- Dynamic Stats will be added by JavaScript -->
+    </div>
+  </section>
+
+  <div class="container">
+    <h1 class="title">Our Contributors</h1>
+  </div>
+  <div id="contributors" class="contributors-grid"></div>
+  <style>
+    @property --angle{
+      syntax: "<angle>";
+      initial-value: 0deg;
+      inherits: false;
+    }
+
+    .contributor-card::after, .contributor-card::before{
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      z-index: -1;
+      padding: 4px;
+      top: -1.5%;
+      border-radius: 10px;
+    }
+    .contributor-card:hover::before,
+    .contributor-card:hover::after {
+      animation: spin 0.75s linear infinite;
+      background-image: conic-gradient(from var(--angle),#a9f1df,#ea8d8d,#d8b5ff,#6fd6ff,#a890fe,#a9f1df)
+    }
+    
+    .contributor-card::before{
+      filter: blur(3rem);
+      opacity: 0.5;
+    }
+    
+    @keyframes spin{
+      from{
+        --angle:0deg;
+      }
+      to{
+        --angle:360deg;
+      }
+    }
+  </style>
+
+  <script src="./contributors.js"></script>
+</body>
+</html>
diff --git a/contributors.js b/contributors.js
new file mode 100644
index 0000000..719973e
--- /dev/null
+++ b/contributors.js
@@ -0,0 +1,39 @@
+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 = `
+      <div class="contributor-stat-card"><h3>${contributors.length}</h3><p>Contributors</p></div>
+      <div class="contributor-stat-card"><h3>${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}</h3><p>Total Contributions</p></div>
+      <div class="contributor-stat-card"><h3>${repoData.stargazers_count}</h3><p>GitHub Stars</p></div>
+      <div class="contributor-stat-card"><h3>${repoData.forks_count}</h3><p>Forks</p></div>
+    `;
+
+    const contributorsContainer = document.getElementById("contributors");
+    contributorsContainer.innerHTML = contributors.map(({ login, contributions, avatar_url, html_url }) => `
+      <div class="contributor-card">
+        <img src="${avatar_url}" alt="${login}'s avatar">
+        <p><strong>${login}</strong></p>
+        <p>Contributions: ${contributions}</p>
+        <a href="${html_url}" target="_blank">GitHub Profile</a>
+      </div>
+    `).join('');
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+}
+
+fetchContributorData();
diff --git a/index.html b/index.html
index 909b013..2f13b96 100644
--- a/index.html
+++ b/index.html
@@ -547,9 +547,12 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
                 <button class="faq-btn">Testimonials</button>
             </a>
         </div>
+        
 
         <button class="feedback-button" onclick="window.location.href='donation_page.html'">Donate</button>
 
+        </div>
+
         <div id="privacybtn">
             <a href="privacy_policy.html">
                 <button class="priacy">Privacy Policy</button>
@@ -559,6 +562,12 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
             Signup/Register
         </button>
 
+        <div id="faqbtn">
+            <a href="./contributors.html">
+                <button class="faq-btn">Contributors</button>
+            </a>
+        </div>
+
         <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
                 <input type="checkbox" id="checkbox">