From 3a368155936b1b6dc436e316a928acd803c31f5b Mon Sep 17 00:00:00 2001
From: Souvik Majee <souvikmajee039@gmail.com>
Date: Fri, 8 Nov 2024 17:56:36 +0530
Subject: [PATCH 1/2] Contributors page redesigned

---
 contributor.css  | 846 +++++++++++++++++++++++++++--------------------
 contributor.html | 781 ++++++++-----------------------------------
 contributor.js   | 161 ++-------
 3 files changed, 658 insertions(+), 1130 deletions(-)

diff --git a/contributor.css b/contributor.css
index 5244677..91ef267 100644
--- a/contributor.css
+++ b/contributor.css
@@ -1,537 +1,683 @@
-* {
-  box-sizing: border-box;
+*{
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   padding: 0;
 }
 
-body {
-  font-family: Arial, sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background-color: #f5f5f5;
-}
-#scrollBackBtn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: #005842;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 5px;
-    cursor: pointer;
-    display: none; /* Hidden by default */
-    z-index: 1000; /* Ensure it's above other elements */
+.container {
+  text-align: center;
 }
 
-#scrollBackBtn:hover {
-    background-color: #007B5F; /* Darker shade on hover */
+.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); */
 }
 
-.navbar {
-  background-color: #1f2937;
-  color: white;
-  padding: 15px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.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");
 }
 
-.nav-container {
-  display: flex;
-  align-items: center; /* Vertically center items */
-  justify-content: space-between; /* Space between logo and nav items */
+.theme-switch.dark-theme::before {
+  left: 33px;
+  background-image: url("../Assets/sun.png");
 }
 
-.navbar .logo {
-  font-size: 24px;
-  font-weight: bold;
-  color: #12e9cc;
-}
+.contributors-grid {
 
-.nav-links {
-  list-style: none;
+  width: 100vw;
+  flex-wrap: wrap;
+  gap: 40px;
+  padding: 20px;
   display: flex;
-  gap: 30px;
 }
 
-.nav-links a {
-  color: #fff;
+.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;
-  font-weight: bold;
-  transition: color 0.3s ease;
+  color: inherit;
+  /* margin-bottom: 16px;  */
+  word-wrap: wrap;
+  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+  width:14%;
 }
 
-.nav-links a:hover {
-  color: #00bfa6;
+#contributors {
+  perspective: 1000px; /* This adds depth for 3D transformations */
+  margin-left: -19px;
 }
 
-#darkModeToggle {
-  background-color: transparent;
-  border: none;
-  color: #fff;
-  font-size: 1.2rem;
-  cursor: pointer;
-}
 
-.caption {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: center;
-}
-@media (max-width: 500px) {
-  .navbar .logo {
-    font-size: 20px;
-  }
-
-  .btn {
-    padding: 8px 20px;
-    font-size: 0.9rem;
-  }
 
-  .caption {
-    font-size: 1.2rem;
-  }
-}
-.contributor-container {
-  margin: 0 auto;
+.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;
 }
 
-/* Hero Section */
-.contributor-hero {
-  background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=2850&q=80');
-  background-size: cover;
-  background-position: center;
-  
-  height: 85vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-}
 
-.contributor-hero::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.7);
+.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-hero-content {
+.contributor-card p {
+  font-size: 1.2em;
   position: relative;
   z-index: 1;
-  color: #fff;
+  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+  margin: 0 0 10px;
 }
 
-.contributor-hero h1 {
-  color: #008876;
-  font-size: 3.5rem;
-  margin-bottom: 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;
 }
 
-.contributor-hero p {
-  opacity: 0.8;
-  color:#b7d5cc ;
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
+.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; */
 }
 
-/* Buttons */
-.contributor-btn {
-  display: inline-block;
-  padding: 0.8rem 1.5rem;
-  border: none;
-  border-radius: 5px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+body {
+  background-color:#2c394c;
+  color: hsl(0, 0%, 100%);
 }
 
-.contributor-btn-primary {
- font-weight: 600;
-  background-color: #009a73;
-  color: #333;
+header {
+  height: 100px;
 }
 
-.contributor-btn-primary:hover {
-  background-color: #f0f0f0;
+.logo {
+  margin: 30px 0 0 0;
 }
 
+footer {
+  background-color: #333;
+  color: white;
+  text-align: center;
+  padding: 20px 0;
+  margin-top: auto;
+}
 
+.footer-container {
+  margin: auto;
+  padding: 0 20px;
+}
 
 
-.contributor-btn-secondary {
- 
-  background-color: #00c2a8;
-  color: #fff;
+.footer-contact a {
+  color: white;
 }
 
-.contributor-btn-secondary:hover {
- 
-  transform: scale(1.025);
-    background-color: #006b50;
+header {
+  height: 100px;
+}
+body {
+  min-height: 100vh;
+  max-width: 100vw;
+}
+.logo {
+  margin: 5px 0px 0px 0px;
 }
 
-/* Stats Section */
-.contributor-stats {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 4rem 0;
+footer {
+  background: #333;
+  color: white;
   text-align: center;
+  padding: 20px 0;
+  margin-top: auto;
 }
 
-.contributor-stats h2 {
-  font-size: 2rem;
-  margin-bottom: 2rem;
+.footer-container {
+  margin: auto;
+  padding: 0 20px;
 }
 
-.contributor-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 2rem;
+@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-stat-card {
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 10px;
-  padding: 1.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 */
+}
+
+footer {
+  background-color: #1a1a1a;
+  color: white;
+  padding: 40px 0;
   text-align: center;
 }
 
-.contributor-stat-card .contributor-icon {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+footer p {
+  margin: 10px 0;
 }
 
-.contributor-stat-card h3 {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
+footer p a {
+  color: #00c6ff;
+  text-decoration: none;
 }
 
-.contributor-stat-card p {
-  color: #666;
+footer p a:hover {
+  text-decoration: underline;
 }
 
-/* Contributors Section */
-.contributor-contributors {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 4rem 0;
+/* Footer Styles */
+footer {
+  background-color: #1a1a1a;
+  color: white;
+  padding: 40px 0;
   text-align: center;
 }
 
-.contributor-contributors h2 {
-  font-size: 2rem;
-  margin-bottom: 2rem;
+footer p {
+  margin: 10px 0;
 }
 
-.contributor-contributors-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
+footer p a {
+  color: #00c6ff;
+  text-decoration: none;
 }
 
-.contributor-contributor-card {
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 10px;
-  overflow: hidden;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  box-shadow: 2px 2px 10px rgb(172, 140, 140);
+footer p a:hover {
+  text-decoration: underline;
 }
 
-.contributor-contributor-card:hover {
-  transform: translateY(-5px);
-  
-  background-color: aqua;
-  box-shadow: 1px 1px 12px 4px blue;
-  border-radius: 10px ;
+footer {
+  background: #333;
+  color: white;
+  text-align: center;
+  padding: 20px 0;
+  margin-top: auto;
 }
 
-.contributor-contributor-card img {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  margin: 1.5rem auto;
-  display: block;
-  border: 4px solid #f0f0f0;
+.footer-container {
+  margin: auto;
+  padding: 0 20px;
 }
 
-.contributor-contributor-card h3 {
-  font-size: 1.2rem;
-  margin-bottom: 0.5rem;
+
+.footer-contact {
+  margin: 10px 0;
 }
 
-.contributor-contributor-card p {
-  color: #666;
-  margin-bottom: 1rem;
+
+
+
+
+html {
+  scroll-behavior: smooth;
+  max-width: 100vw;
+  max-height: 100vh;
 }
 
-.contributor-contributor-card .contributor-contributions {
-  background-color: #f0f0f0;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  display: inline-block;
-  margin-bottom: 1rem;
+body {
+  background-color: #021024;    
+  overflow-x: hidden;
+  margin: 0;
+
+
 }
 
-.contributor-contributor-card .contributor-footer {
-  background-color: #f9f9f9;
-  padding: 1rem;
+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;
 }
 
-.contributor-contributor-card .contributor-footer a {
-  color: #333;
-  text-decoration: none;
+header nav {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 0.5rem 1rem;
 }
 
-.contributor-contributor-card .contributor-footer svg {
-  margin-right: 0.5rem;
-}
-
-/* Loading Spinner */
-.contributor-loading {
+header nav ul {
+  list-style: none;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
+  gap: 30px;
 }
 
-.contributor-spinner {
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #333;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: contributor-spin 1s linear infinite;
+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;
 }
 
-@keyframes contributor-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+header nav ul li a:hover {
+  background-color: #00c6ff;
+  color: #000;
+  border-radius: 0.75rem;
 }
 
-/* Call to Action Section */
-.contributor-cta {
-  background-color: #333;
-  color: #fff;
-  padding: 4rem 0;
-  text-align: center;
+@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;
+  }
 }
 
-.contributor-cta h2 {
-  color:#07a893 ;
-  font-size: 2rem;
-  margin-bottom: 1rem;
+@media (min-width: 901px) {
+  header nav .hamburger {
+    display: none;
+  }
+
+  header nav ul {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
-.contributor-cta p {
-  font-size: 1.2rem;
-  margin-bottom: 2rem;
+header .logo h1 {
+  color: #fff;
+  font-weight: 700;
+  font-size: 28px;
+  margin: 0;
 }
 
-.contributor-cta form {
+
+.homeBtn{
+  text-decoration: none;
+  color: #000;
+  top: 20px;
+  left: 20px;
+  position: absolute;
+  background-color: #0e99ea;
+  width: 60px;
+  height: 40px;
   display: flex;
   justify-content: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  align-items: center;
+  border-radius: 40px;
+  border: #000 2px solid;
 }
-
-.contributor-cta input[type="email"] {
-  padding: 0.8rem;
-  font-size: 1rem;
-  border: none;
- 
-  border-radius: 0.75rem;
-  width: 300px;
+.homeBtn:hover{
+  background-color: #00c6ff;
+  color: #000;
+  border: #00c6ff 2px solid;
 }
 
-.contributor-contributor-card:hover {
-  transform: translateY(-5px);
-  
-  background-color: aqua;
-  box-shadow: 1px 1px 12px 4px blue;
-  border-radius: 10px ;
+/* 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-notification {
-  background-color: #4CAF50;
-  color: white;
-  padding: 1rem;
-  border-radius: 5px;
-  margin-top: 1rem;
+.contributor-stats h2 {
+font-size: 3rem;
+margin-bottom: 2rem;
 }
 
-.contributor-hidden {
-  display: none;
+.contributor-stats-grid {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+gap: 2rem;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-  .contributor-hero h1 {
-      font-size: 2.5rem;
-  }
+.contributor-stat-card {
+background-color: rgba(0,0,0,0.4);
+border-radius: 10px;
+padding: 1.5rem;
+text-align: center;
+}
 
-  .contributor-hero p {
-      font-size: 1.2rem;
-  }
+.contributor-stat-card .contributor-icon {
+font-size: 2rem;
+margin-bottom: 1rem;
+}
 
-  .contributor-cta form {
-      flex-direction: column;
-      align-items: center;
-  }
+.contributor-stat-card h3 {
+font-size: 2rem;
+margin-bottom: 0.5rem;
+}
 
-  .contributor-cta input[type="email"] {
-      width: 100%;
-      max-width: 300px;
-  }
+.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;
+}
 
+@media (max-width: 600px) {
+  .contributor-card {
+    width: 90%;
+    margin: 10px auto;
+  }
+  .contributors-grid {
+  
+  }
+}
 
-/* General Footer Styling */
+/* Footer Container */
 .footer-container {
-  background-color: #1f2937;
+  background-color: #1a1a1a;
   color: #ffffff;
-  padding: 40px 0;
+  padding: 40px 20px;
   font-family: Arial, sans-serif;
 }
 
-/* Logo and Tagline */
+/* Footer Top Section */
+.footer-top {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #444;
+}
+
+/* Logo and Description Section */
 .footer-logo-section {
+  flex: 1 1 250px;
+  max-width: 300px;
   text-align: center;
-  margin-bottom: 30px;
 }
+
 .footer-logo {
-  max-width: 150px;
+  max-width: 80%;
   margin-bottom: 10px;
-  border-radius: 50px;
 }
+
 .footer-logo-section p {
   margin: 5px 0;
-  font-size: 0.95rem;
 }
+
 .follow-us {
-  margin-top: 10px;
   font-weight: bold;
+  color: #dcfffa;
+  margin-top: 10px;
 }
 
-/* Social Media Icons */
 .social-icons a {
-  display: inline-block;
-  margin: 0 10px;
-  color: #12e9cc;
-  font-size: 1.5rem;
-  text-decoration: none;
+  color: #ffffff;
+  margin: 0 5px;
+  font-size: 20px;
+  transition: color 0.3s;
 }
+
 .social-icons a:hover {
-  color: #76b2ab;
+  color: #b5fdf4;
 }
 
-/* Footer Link Sections */
+#visitorCounter {
+  margin-top: 15px;
+  background-color: #00aaff;
+  border: none;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+/* Footer Links Section */
 .footer-links {
   display: flex;
-  justify-content: space-around;
+  flex: 2 1 500px;
+  justify-content: space-between;
   flex-wrap: wrap;
-  margin: 20px 100px;
+  gap: 20px;
 }
+
 .footer-column {
-  flex-basis: 20%;
-  margin-bottom: 10px;
+  flex: 1 1 200px;
+  max-width: 250px;
 }
+
 .footer-column h4 {
-  font-size: 1rem;
+  color: #b5fdf4;
   margin-bottom: 10px;
-  color: #12e9cc;
+  font-size: 16px;
 }
+
 .footer-column ul {
   list-style: none;
   padding: 0;
 }
-.footer-column ul li {
-  margin-bottom: 8px;
+
+.footer-column li {
+  margin: 8px 0;
 }
-.footer-column ul li a {
+
+.footer-column li a {
   color: #ffffff;
   text-decoration: none;
-  font-size: 0.95rem;
+  transition: color 0.3s;
 }
-.footer-column ul li a:hover {
-  text-decoration: underline;
+
+.footer-column li a:hover {
+  color: #00aaff;
 }
 
-/* Footer Bottom Links */
+/* Footer Bottom Section */
 .footer-bottom {
   text-align: center;
-  border-top: 1px solid #ddd;
   padding-top: 20px;
 }
+
 .footer-bottom ul {
   list-style: none;
   padding: 0;
-  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
 }
-.footer-bottom ul li {
-  display: inline-block;
-  margin: 0 15px;
+
+.footer-bottom li {
+  margin: 5px 0;
 }
-.footer-bottom ul li a {
-  color: #12e9cc;
+
+.footer-bottom li a {
+  color: #b5fdf4;
   text-decoration: none;
-  font-size: 0.95rem;
+  font-weight: bold;
+  transition: color 0.3s;
 }
-.footer-bottom ul li a:hover {
-  text-decoration: underline;
+
+.footer-bottom li a:hover {
+  color: #00aaff;
 }
 
-/* Responsive Adjustments */
+/* Responsive Design */
 @media (max-width: 768px) {
-  .footer-links {
-    flex-direction: column;
-    align-items: center;
+  .footer-top {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
   }
-  .footer-column {
-    flex-basis: 100%;
-    text-align: center;
+  
+  .footer-links {
+      flex-direction: column;
+      align-items: center;
   }
 }
 
-
-.contributor-stats-grid, 
-.contributor-contributors-grid {
-    color: #000000; /* Default text color for grids */
-}
-
-
-body.dark-mode .contributor-stats-grid, 
-body.dark-mode .contributor-contributors-grid {
-    color: #000000; /* Text color for content in dark mode */
-}
-/* Optional: Background color for dark mode */
-body.dark-mode {
-    background-color: #121212; /* Example dark background */
-}
-
diff --git a/contributor.html b/contributor.html
index 0153a5b..4874fbc 100644
--- a/contributor.html
+++ b/contributor.html
@@ -1,669 +1,146 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuddyTrail Contributors</title>
-    <link rel="stylesheet" href="/style.css">
-    <link rel="stylesheet" href="contributor.css">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="shortcut icon" href="images/4.jpeg" type="image/x-icon">
-    <link href="https://fonts.goohttps://github.com/ankit071105/Ticket-Booking/pull/866/conflict?name=contributor.html&ancestor_oid=195768eb259a8c57a66063cf6f5ac0f7f3f64921&base_oid=7ee7a7c2ec064da47aa52160c62764bcd4825c49&head_oid=732b332fcead1f148a9b198f35a8fcf33b55ce8fgleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
-    <link rel="stylesheet" href="index.css">
-    <link rel="stylesheet" href="about.css">
-    <link rel="stylesheet" href="main.css">
-    <link rel="stylesheet" href="footer.css"> 
-    <link rel="stylesheet" href="faq.css">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="navbar.css">
-    <link rel="stylesheet" href="index.css">
-    <link rel="stylesheet" href="why-us.css">
-    <script src="https://kit.fontawesome.com/3d20c433e1.js" crossorigin="anonymous"></script>
-    <style>
-        .homeBtn {
-            position: fixed;
-            z-index: 1000;
-            top: 20px;
-            left: 20px;
-            font-weight: bolder;
-            padding: 7px 16px ;
-            background-color: #005842;
-            color: white;
-            text-decoration: none;
-            border-radius: 5px;
-        }
-        .contributor-contributor-card:hover {
-  transform: translateY(-5px);
-  
-  background-color: aqua;
-  box-shadow: 1px 1px 12px 4px blue;
-  border-radius: 10px ;
-}
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Contributors</title>
+  <link rel="stylesheet" href="./contributor.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="cursor"></div>
-    <div class="cursor-trail"></div>
-
-    
-
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-         <!-- Preloader -->
-      <div id="preloader">
-        <div class="loader-wrapper">
-          <img src="Ticket booking.png" alt="Travel Website Logo" id="logo">
-          <div class="loader-globe"></div>
-        </div>
-        <div id="loading-text">Ready to Explore the World...</div>
-      </div>
-    <style>
-      /* Preloader Container */
-      #preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: rgba(0, 0, 0, 0.988);
-    z-index: 1000;
-  }
-  
-  /* Wrapper for the logo and loader */
-  .loader-wrapper {
-    position: relative;
-    width: 180px;
-    height: 180px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  /* Logo Styling */
-  #logo {
-    width: 140px;
-    position: relative;
-    z-index: 10; /* Ensures logo stays above the loader */
-    animation: pulse 2s infinite ease-in-out;
-  }
-  
-  /* Circular Loader surrounding the logo */
-  .loader-globe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 8px solid transparent;
-    border-left-color: rgb(248, 172, 21);
-    border-right-color: rgb(8, 82, 230);
-    animation: spin 2s linear infinite;
-  }
-  
-  /* Loading Text */
-  #loading-text {
-    margin-top: 20px;
-    font-size: 20px;
-    color: white;
-    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
-    letter-spacing: 1px;
-    animation: textGlow 2s ease-in-out infinite;
-  }
-  
-  /* Keyframes Animations */
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  @keyframes textGlow {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-  
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
-  }
-</style>
-<script>
-        // Function to hide preloader and show content once the page has fully loaded
-    window.addEventListener('load', function() {
-        const preloader = document.getElementById('preloader');
-        const content = document.getElementById('content');
-    
-        // Set a small timeout for better user experience
-        setTimeout(function() {
-            // Hide preloader
-            preloader.style.opacity = '0';
-            preloader.style.transition = 'opacity 1s ease-in-out';
-    
-            // Show content after preloader fades out
-            setTimeout(function() {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                content.classList.add('show');  // Trigger fade-in transition
-            }, 1000); // Match the transition duration
-        }, 2000);  // Adjust to the length of your spinner animation
-    });
-    
-      </script>
-        <div id="scrollProgressBar" class="progress-bar"></div>
-        <!-- Your existing content goes here -->
-    </body>
-    <div class="gtranslate_wrapper"></div>
-    <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
-    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
-    <button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed;  right: 30px; z-index: 100000;">
-      <i class="fa fa-arrow-up" aria-hidden="true"></i>
-  </button>
-    <style>
-      body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-.content {
-    padding: 20px;
-}
-    </style>
-    <!--chat bot-->
-    <button onclick="toggleChatbot()" id="chatbotBtn" title="chat bot"></button>
-    
-    <div class="chatbot-container" id="chatbot-container">
-        <div class="chatbot-title">Ticket Bot</div>
-        <div class="chatbot-chat" id="chatbot-chat"></div>
-        <input type="text" class="chatbot-input" id="chatbot-input" placeholder="Type your message here...." />
-        <button class="chatbot-button" id="chatbot-button"><i class="fa-brands fa-telegram"></i></button>
-      </div>
-      <nav class="navbar">
-        <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
-        <div class="logo" style="font-size: 20px;">Ticket Marketplace</div>
-
-        <!-- Toggle Button (Visible on Small Screens) -->
-        <button id="navToggle">☰</button>
-
-        <!-- Navbar Links -->
-        <div id="navLinks">
-        <a href="index.html" style="display: flex; align-items: center; text-decoration: none; white-space: nowrap; margin-right: -250px;">
-          <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
-          <div class="logo" style="font-size: 20px; margin-left: 8px;">Ticket Marketplace</div>
-      </a><div>
-            <a href="index.html"><i class="fas fa-home"></i> Home</a>
-            <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
-            <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
-            <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
-            <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
-            <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
-            <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
-        </div>
-
-        <!-- Dark Mode Button -->
-        <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
-    </nav>
-            <a href="contributor.html" class="active"><i class="fas fa-users"></i> Contributors</a>
-            <a href="register.html"><i class="fas fa-sign-in-alt"></i> Login</a>
-    
-          </div>
-          <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
-    
-      </nav>
-    
-      </div>
+    <div class="home-nav">
+        <a href="/"><i class="fa-solid fa-arrow-left-long"></i> &nbsp; Return to Home</a>
     </div>
-	<div class="social-sidebar">
-		<div class="close-btn" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
-		<ul>
-			<li><a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
-			<li><a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
-			<li><a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
-			<li><a href="https://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
-		</ul>
-	</div>
-	
-	<div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
-        <i class="fas fa-arrow-right"></i>
-	</div>
-
-
 
-  <div class="contributor-container">
-    <!-- Hero Section -->
-    <section class="contributor-hero">
-        <div class="contributor-hero-content">
-            <h1>Welcome to Ticket Booking platform</h1>
-            <p>Empowering writers, one commit at a time</p>
-        </div>
-    </section>
-
-    <!-- Stats Section -->
-    <section class="contributor-stats">
-        <h2>Project Statistics</h2>
-        <div class="contributor-stats-grid" id="statsGrid">
-            <!-- Stats will be dynamically inserted here -->
-        </div>
-    </section>
-
-    <!-- Contributors Grid -->
-    <section class="contributor-contributors">
-        <h2>Meet Our Contributors</h2>
-        <div class="contributor-contributors-grid" id="contributorsGrid">
-            <!-- Contributors will be dynamically inserted here -->
-        </div>
-        <div id="loading" class="contributor-loading">
-            <div class="contributor-spinner"></div>
-        </div>
-    </section>
-
-    <!-- Call to Action -->
-    
-        
-        <form id="subscribeForm">
-            
-        </form>
-        <div id="notification" class="contributor-notification contributor-hidden"></div>  
-  </div> 
-<footer class="footer-container">
-    <div class="footer-top">
-      
-      <div class="footer-logo-section">
-        
-
-        <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo">
-        <p style="color: #b5fdf4;" >Affordable adventures, unforgettable memories—explore with ease.</p>
-        <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
-        
-        <div class="social-icons">
-          <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
-          <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
-          <a href="https://www.twitter.com" ><i class="fa-brands fa-x-twitter"></i></a>
-          <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
-          <a href="#"><i class="fab fa-youtube"></i></a>
-        </div>
-      </div>
-    
-      <div class="footer-links">
-        <div class="footer-column">
-          <h4>HELPFUL LINKS</h4>
-          <ul>
-            <li><a href="help.html">Help Centre</a></li>
-            <li><a href="#">Special Assistance</a></li>
-            <li><a href="#">Download The App</a></li>
-            <li><a href="book_condition.html">Booking Conditions</a></li>
-            <li><a href="Faq.html">FAQ</a></li>
-
-          </ul>
-        </div>
-  
-        <div class="footer-column">
-          <h4>ABOUT US</h4>
-          <ul>
-            <li><a href="#">Media Center</a></li>
-            <li><a href="#">Investors</a></li>
-            <li><a href="ModernSlaveryAct.html">Modern Slavery Act</a></li>
-            <li><a href="terms.html">Terms Of Use</a></li>
-          </ul>
-        </div>
-  
-        <div class="footer-column">
-          <h4>KEEPING SAFE</h4>
-          <ul>
-            <li><a href="#">ATOL Protected</a></li>
-            <li><a href="travelAware.html">Travel Aware</a></li>
-            <li><a href="fcdoTravel.html">FCDO Travel Advice</a></li>
-            <li><a href="#">ABTA</a></li>
-          </ul>
-        </div>
-  
-        <div class="footer-column">
-          <h4>FIND US</h4>
-          <ul>
-            <li><a href="contactus.html">Contact Us</a></li>
-            <li><a href="GroupCookieNotice.html">Group Cookie Notice</a></li>
-            <li><a href="privacy.html">Privacy And Policy</a></li>
-            <li><a href="sitemap.html">Sitemap</a></li>
-          </ul>
-        </div>
-      </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)
+    }
     
-    <div class="footer-bottom">
-      <ul>
-        <li><a href="#">Holiday Type</a></li>
-        <li><a href="#">Holiday Deals</a></li>
-        <li><a href="#">Popular Counters</a></li>
-        <!-- <li><a href="#">Flight Only</a></li> -->
-        <li><a href="#">Top Hotels</a></li>
-      </ul>
-    </div>
-  </footer>
-
-
-    <script src="contributor.js"></script>
-    <script>
-      // cursor
-
-      const coords = { x: 0, y: 0 };
-const circles = document.querySelectorAll(".circle");
-
-const colors = [
-
-"#BCE954",
-"#98FF98",
-"#9CB071",
-"#90C209",
-"#B2C248",
-"#85BB65",
-"#99C68E",
-"#6CBB3C",
-"#3ea055",
-"#41a317",
-"#4AA02C",
-"#6AA121",
-"#347C2C",
-"#387C44",
-"#437C17",
-"#306754",
-"#254117",
-"#667C26",
-"#728C00",
-"#008000"
-
-];
-
-circles.forEach(function (circle, index) {
-circle.x = 0;
-circle.y = 0;
-circle.style.backgroundColor = colors[index % colors.length];
-});
-
-window.addEventListener("mousemove", function(e){
-coords.x = e.clientX;
-coords.y = e.clientY;
-
-});
-
-function animateCircles() {
-
-let x = coords.x;
-let y = coords.y;
-
-circles.forEach(function (circle, index) {
-  circle.style.left = x - 12 + "px";
-  circle.style.top = y - 12 + "px";
-  
-  circle.style.scale = (circles.length - index) / circles.length;
-  
-  circle.x = x;
-  circle.y = y;
-
-  const nextCircle = circles[index + 1] || circles[0];
-  x += (nextCircle.x - x) * 0.3;
-  y += (nextCircle.y - y) * 0.6;
-});
-
-requestAnimationFrame(animateCircles);
-}
-
-animateCircles();
-      
-      
-      
-
-      let currentSlide = 0;
-      const slides = document.querySelectorAll('.slide');
-
-      function showSlide(index) {
-          slides.forEach((slide, i) => {
-              slide.classList.remove('active');
-              if (i === index) {
-                  slide.classList.add('active');
-              }
-          });
-      }
-
-      function nextSlide() {
-          currentSlide = (currentSlide + 1) % slides.length;
-          showSlide(currentSlide);
-      }
-
-      function prevSlide() {
-          currentSlide = (currentSlide - 1 + slides.length) % slides.length;
-          showSlide(currentSlide);
-      }
-
-      function toggleSidebar() {
-          const sidebar = document.querySelector('.social-sidebar');
-          const arrow = document.querySelector('.toggle-arrow');
-
-          if (sidebar.style.display === 'none' || !sidebar.style.display) {
-              sidebar.style.display = 'flex'; // Show sidebar
-              arrow.style.display = 'none'; // Hide arrow
-          } else {
-              sidebar.style.display = 'none'; // Hide sidebar
-              arrow.style.display = 'block'; // Show arrow
-          }
-      }
-
-      // Initialize sidebar to be visible on page load
-      document.querySelector('.social-sidebar').style.display = 'flex';
-
-
-      setInterval(nextSlide, 5000);
-      showSlide(currentSlide);
-
-      const darkModeToggle = document.getElementById('darkModeToggle');
-      const body = document.querySelector('body');
-      if (darkModeToggle) {
-          darkModeToggle.addEventListener('click', () => {
-              document.body.classList.toggle('dark-mode');
-              if (body.classList.contains('dark-mode')) {
-                  darkModeToggle.innerHTML = "🔆";
-              }
-              else {
-                  darkModeToggle.innerHTML = "🌙";
-              }
-          });
-      }
-      // change icon of the dark/light mode
-
-      const menuToggle = document.querySelector('.menu-toggle');
-      const navLinks = document.querySelector('.nav-links');
-      menuToggle.addEventListener('click', () => {
-          navLinks.classList.toggle('active');
-          menuToggle.classList.toggle('active');
-          // Special effect for hamburger icon
-          const bars = menuToggle.querySelectorAll('.bar');
-          bars.forEach((bar, index) => {
-              if (menuToggle.classList.contains('active')) {
-                  bar.style.transform = index === 1 ? 'scale(0)' : `rotate(${index === 0 ? '45deg' : '-45deg'})`;
-              } else {
-                  bar.style.transform = 'none';
-              }
-          });
-      });
-
-      // Close menu when clicking outside
-      document.addEventListener('click', (event) => {
-          if (!navLinks.contains(event.target) && !menuToggle.contains(event.target)) {
-              navLinks.classList.remove('active');
-              menuToggle.classList.remove('active');
-              menuToggle.querySelectorAll('.bar').forEach(bar => {
-                  bar.style.transform = 'none';
-              });
-          }
-      });
-
-      // When the user scrolls down 100px from the top, show the button
-
-      window.onscroll = function () { scrollFunction() };
-
-      function scrollFunction() {
-          const topBtn = document.getElementById("topBtn");
-          if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-              topBtn.style.display = "block"; // Show button
-          } else {
-              topBtn.style.display = "none"; // Hide button
-          }
-      }
-
-      // When the user clicks on the button, scroll to the top of the document
-      function moveToTop() {
-          window.scrollTo({ top: 0, behavior: 'smooth' }); // Smooth scroll to top
-      }
-
-      // script for faq section
-
-      document.querySelectorAll('.faq-question').forEach(button => {
-          button.addEventListener('click', () => {
-              const answer = button.nextElementSibling;
-              const isExpanded = button.getAttribute('aria-expanded') === 'true';
-
-              document.querySelectorAll('.faq-answer').forEach(a => a.style.display = 'none');
-              document.querySelectorAll('.faq-question').forEach(q => q.setAttribute('aria-expanded', 'false'));
-
-              if (!isExpanded) {
-                  answer.style.display = 'block';
-                  button.setAttribute('aria-expanded', 'true');
-              }    
-          })       
-      });
-
-      window.onscroll = function() { 
-         scrollFunction() 
-       };
-
-      function scrollFunction() {
-      const topBtn = document.getElementById("topBtn");
-      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-          topBtn.style.display = "block"; // Show button
-      } else {
-          topBtn.style.display = "none"; // Hide button
-      }
-      }
-         function moveToTop() {
-          window.scrollTo({ 
-              top: 0, 
-              behavior: 'smooth' 
-          }); 
-      }
-
-      document.querySelectorAll('details').forEach((faq) => {
-          faq.addEventListener('toggle', function() {
-              const content = this.querySelector('p');
-              if (this.open) {
-                  content.style.height = '0px';
-                  content.style.transition = 'height 0.2s ease-out';
-                  content.style.height = content.scrollHeight + 'px'; // Sets the height based on the actual content
-              } else {
-                  content.style.height = content.scrollHeight + 'px'; // Height is set to the current scrollHeight
-                  setTimeout(() => {
-                      content.style.height = '0px'; // Collapses after the content has been shown
-                  }, 10); // Delay to allow height to adjust first
-
-              }
-          });
-      });
-
-
-
-
-      let mybutton = document.getElementById("myBtn");
-
-      window.onscroll = function () { scrollFunction() };
-      window.onscroll = function() {
-          scrollFunction()
-      };
-
-
-      function scrollFunction() {
-          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-              mybutton.style.display = "block";
-          } else {
-              mybutton.style.display = "none";
-          }
-      }
-
-      function topFunction() {
-          document.body.scrollTop = 0;
-          document.documentElement.scrollTop = 0;
+    .contributor-card::before{
+      filter: blur(3rem);
+      opacity: 0.5;
+    }
+    
+    @keyframes spin{
+      from{
+        --angle:0deg;
       }
-
-      function topFunction() {
-          document.body.scrollTop = 0;
-          document.documentElement.scrollTop = 0;
+      to{
+        --angle:360deg;
       }
+    }
+  </style>
+  <footer class="footer-container">
+        <div class="footer-top">
+
+            <div class="footer-logo-section">
+                <a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
+                <p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
+                <p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
+                <div class="social-icons">
+                    <a href="#"><i class="fab fa-facebook"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                    <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin"></i></a>
+                    <a href="#"><i class="fab fa-youtube"></i></a>
+                </div>
+                <button id="visitorCounter" class="btn btn-info text-white rounded">Visitors Count: 1</button>
+            </div>
+
+
+            <div class="footer-links">
+                <div class="footer-column">
+                    <h4>HELPFUL LINKS</h4>
+                    <ul>
+                        <li><a href="help.html">Help Centre</a></li>
+                        <li><a href="#">Special Assistance</a></li>
+                        <li><a href="#">Download The App</a></li>
+                        <li><a href="#">Booking Conditions</a></li>
+                        <li><a href="Faq.html">FAQ</a></li>
+
+                    </ul>
+                </div>
+
+                <div class="footer-column">
+                    <h4>ABOUT US</h4>
+                    <ul>
+                        <li><a href="#">Media Center</a></li>
+                        <li><a href="#">Investors</a></li>
+                        <li><a href="ModernSlaveryAct.html">Modern Slavery Act</a></li>
+                        <li><a href="terms.html">Terms Of Use</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-column">
+                    <h4>KEEPING SAFE</h4>
+                    <ul>
+                        <li><a href="atol.html">ATOL Protected</a></li>
+                        <li><a href="./travelawares.html">Travel Aware</a></li>
+                        <li><a href="fcdoTravel.html">FCDO Travel Advice</a></li>
+                        <li><a href="abta.html">ABTA</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-column">
+                    <h4>FIND US</h4>
+                    <ul>
+
+                        <li><a href="contactus.html">Contact
+                        <li><a href="GroupCookieNotice.html">Group Cookie Notice</a></li>
+                        <li><a href="privacy.html">Privacy And Policy</a></li>
+                        <li><a href="sitemap.html">Sitemap</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        </div>
 
-  // toggle chatbot function
-  function toggleChatbot() {
-      const chatbotContainer = document.getElementById("chatbot-container");
-      chatbotContainer.classList.toggle("chatbot-show");
-  }
-
-  window.addEventListener('scroll', () => {
-  const scrollProgressBar = document.getElementById('scrollProgressBar');
-  const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
-  const progressHeight = (window.scrollY / totalHeight) * 100;
-  scrollProgressBar.style.width = progressHeight + '%';
-});
 
-  </script>
-    <script>
-      // Toggle Navbar Links
-      const navToggle = document.getElementById('navToggle');
-      const navlinks = document.getElementById('navLinks');
+        <div class="footer-bottom">
+            <ul>
+                <li><a href="#">Holiday Type</a></li>
+                <li><a href="#">Holiday Deals</a></li>
+                <li><a href="#">Popular Counters</a></li>
+                <!-- <li><a href="#">Flight Only</a></li> -->
+                <li><a href="#">Top Hotels</a></li>
+                <li><a href="Faq.html">FAQ</a></li>
 
-      navToggle.addEventListener('click', () => {
-          navlinks.style.display = navlinks.style.display === 'flex' ? 'none' : 'flex';
-      });
+            </ul>
+        </div>
+    </footer>
 
-      // Ensure navbar links are visible on large screens
-      window.addEventListener('resize', () => {
-          if (window.innerWidth > 768) {
-              navlinks.style.display = 'flex'; // Show links on large screens
-          } else {
-              navlinks.style.display = 'none'; // Hide links on small screens
-          }
-      });
 
-      // Set initial state based on the current window size
-      if (window.innerWidth > 768) {
-          navlinks.style.display = 'flex'; // Show links if starting on a large screen
-      } else {
-          navlinks.style.display = 'none'; // Hide links if starting on a small screen
-      }
-  </script>
-  <script src="app.js"></script>
+  <script src="./contributor.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/contributor.js b/contributor.js
index 0adc45b..f6cd137 100644
--- a/contributor.js
+++ b/contributor.js
@@ -1,134 +1,39 @@
-// Fetch data from GitHub API
-async function fetchAllContributors() {
-  const contributors = [];
-  let page = 1;
-  const perPage = 100;
+const repoOwner = "ankit071105";
+const repoName = "Ticket-Booking";
+const contributorsUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/contributors`;
+const repoUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
 
+async function fetchContributorData() {
   try {
-      while (true) {
-          const response = await fetch(`https://api.github.com/repos/ankit071105/Ticket-Booking/contributors?per_page=${perPage}&page=${page}`);
-          const data = await response.json();
-
-          // If the data is empty, we have no more pages
-          if (data.length === 0) break;
-
-          // Add contributors from this page to the array
-          contributors.push(...data);
-          page++;
-      }
-  } catch (error) {
-      console.error('Error fetching contributors data:', error);
-  }
-
-  return contributors;
-}
-
-async function fetchData() {
-  try {
-      const contributorsData = await fetchAllContributors();
-      
-
-      const repoResponse = await fetch('https://api.github.com/repos/ankit071105/Ticket-Booking');
-      const repoData = await repoResponse.json();
-      console.log(repoData);
-      return { contributors: contributorsData, repoStats: repoData };
+    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);
-      return { contributors: [], repoStats: {} };
+    console.error("Error fetching data:", error);
   }
 }
 
-// Render stats
-function renderStats(repoStats, contributorsCount,contributors) {
-  const statsGrid = document.getElementById('statsGrid');
-  const stats = [
-      { label: 'Contributors', value: contributorsCount, icon: 'users' },
-      { label: 'Total Contributions', value: contributors.reduce((sum, contributor) => sum + contributor.contributions, 0) || 0, icon: 'git-commit' },
-      { label: 'GitHub Stars', value: repoStats.stargazers_count || 0, icon: 'star' },
-      { label: 'Forks', value: repoStats.forks_count || 0, icon: 'git-branch' }
-  ];
-
-  statsGrid.innerHTML = stats.map(stat => `
-      <div class="contributor-stat-card">
-          <div class="contributor-icon">${getIcon(stat.icon)}</div>
-          <h3>${stat.value}</h3>
-          <p>${stat.label}</p>
-      </div>
-  `).join('');
-}
-
-// Render contributors
-function renderContributors(contributors) {
-  const contributorsGrid = document.getElementById('contributorsGrid');
-  contributorsGrid.innerHTML = contributors.map(contributor => `
-      <div class="contributor-contributor-card">
-          <img src="${contributor.avatar_url}" alt="${contributor.login}">
-          <h3>${contributor.login}</h3>
-          <p>${contributor.type}</p>
-          <div class="contributor-contributions">${contributor.contributions} contributions</div>
-          <div class="contributor-footer">
-              <a href="${contributor.html_url}" target="_blank" rel="noopener noreferrer">
-                  ${getIcon('external-link')}
-                  View Profile
-              </a>
-              ${getIcon('github')}
-          </div>
-      </div>
-  `).join('');
-}
-
-// Helper function to get icons (simplified version)
-function getIcon(name) {
-  const icons = {
-      'users': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>',
-      'git-commit': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>',
-      'star': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>',
-      'git-branch': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>',
-      'external-link': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21  9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>',
-      'github': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>'
-  };
-  return icons[name] || '';
-}
-
-// Initialize the page
-async function init() {
-  const loading = document.getElementById('loading');
-  const contributorsGrid = document.getElementById('contributorsGrid');
-
-  loading.style.display = 'flex';
-  contributorsGrid.style.display = 'none';
-
-  const { contributors, repoStats } = await fetchData();
-
-  renderStats(repoStats, contributors.length,contributors);
-  renderContributors(contributors);
-
-  loading.style.display = 'none';
-  contributorsGrid.style.display = 'grid';
-}
-
-// Handle form submission
-document.getElementById('subscribeForm').addEventListener('submit', function(e) {
-  e.preventDefault();
-  const email = document.getElementById('emailInput').value;
-  const notification = document.getElementById('notification');
-  
-  notification.textContent = `Thank you for subscribing with ${email}. We'll keep you updated!`;
-  notification.classList.remove('hidden');
-  
-  document.getElementById('emailInput').value = '';
-  
-  setTimeout(() => {
-      notification.classList.add('hidden');
-  }, 5000);
-});
-
-
-// Scroll to contribute section
-function scrollToContribute() {
-  document.getElementById('contribute').scrollIntoView({ behavior: 'smooth' });
-}
-
-
-// Initialize the page when the DOM is loaded
-document.addEventListener('DOMContentLoaded', init);
\ No newline at end of file
+fetchContributorData();

From 5e5a32b719e6a4f1b9253218ae13061bb0e46288 Mon Sep 17 00:00:00 2001
From: Souvik Majee <souvikmajee039@gmail.com>
Date: Fri, 8 Nov 2024 18:21:38 +0530
Subject: [PATCH 2/2] All contributors added

---
 contributor.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/contributor.js b/contributor.js
index f6cd137..733f561 100644
--- a/contributor.js
+++ b/contributor.js
@@ -3,16 +3,33 @@ const repoName = "Ticket-Booking";
 const contributorsUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/contributors`;
 const repoUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
 
+async function fetchAllContributors(url) {
+  let contributors = [];
+  let page = 1;
+  let perPage = 100; // Max per page is 100
+
+  while (true) {
+    const response = await fetch(`${url}?per_page=${perPage}&page=${page}`);
+    const data = await response.json();
+
+    if (data.length === 0) {
+      break;
+    }
+
+    contributors = contributors.concat(data);
+    page++;
+  }
+
+  return contributors;
+}
+
 async function fetchContributorData() {
   try {
-    const [contributorsRes, repoRes] = await Promise.all([
-      fetch(contributorsUrl),
-      fetch(repoUrl)
+    const [contributors, repoData] = await Promise.all([
+      fetchAllContributors(contributorsUrl),
+      fetch(repoUrl).then(res => res.json())
     ]);
 
-    const contributors = await contributorsRes.json();
-    const repoData = await repoRes.json();
-
     const statsGrid = document.getElementById("statsGrid");
 
     statsGrid.innerHTML = `