From f75f70811fc703b7f46adf568a0d680f2bd20fc1 Mon Sep 17 00:00:00 2001
From: Eshita Badhe <sge.eshita31gb@gmail.com>
Date: Wed, 18 Feb 2026 19:57:24 +0530
Subject: [PATCH 1/3] feat(programs): enhance programs page with filters,
 labels, and dark mode improvements

- Added new open source programs
- Introduced label badges (Paid, Global, Beginner-Friendly, etc.)
- Implemented filter functionality (Level, Type, Region, Status)
- Upgraded filter UI with premium styling
- Fixed dropdown arrow visibility
- Fixed dark mode select background
- Improved heading contrast in dark mode
- Improved overall scalability and UX
---
 frontend/css/program.css     | 192 +++++++++++++++++++++++++++++++++++
 frontend/pages/programs.html | 158 ++++++++++++++++++++++++++--
 2 files changed, 344 insertions(+), 6 deletions(-)

diff --git a/frontend/css/program.css b/frontend/css/program.css
index d7ce9d6..638fdaa 100644
--- a/frontend/css/program.css
+++ b/frontend/css/program.css
@@ -313,4 +313,196 @@ body.dark-mode .programs-heading {
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+}
+
+/* =========================================
+   PREMIUM FILTER BAR STYLING
+========================================= */
+
+.filter-bar {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 40px 0 60px;
+}
+
+/* Wrapper REQUIRED for custom arrow */
+.filter-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* Select Styling */
+.filter-wrapper select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: none;
+
+  padding: 12px 45px 12px 20px;
+  border-radius: 30px;
+  border: 1px solid rgba(181, 157, 92, 0.35);
+
+  font-family: 'Inter', sans-serif;
+  font-weight: 600;
+  font-size: 0.95rem;
+
+  background: linear-gradient(145deg, #ffffff, #f9f6f0);
+  color: #2c3e50;
+
+  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
+  cursor: pointer;
+
+  transition: all 0.3s ease;
+}
+
+/* Hover */
+.filter-wrapper select:hover {
+  border-color: var(--primary-gold);
+  box-shadow: 0 8px 25px rgba(181, 157, 92, 0.25);
+}
+
+/* Focus */
+.filter-wrapper select:focus {
+  outline: none;
+  border-color: var(--primary-gold);
+  box-shadow: 0 0 0 3px rgba(181, 157, 92, 0.2);
+}
+
+/* Custom Gold Arrow */
+.filter-wrapper::after {
+  content: "▾";
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--primary-gold);
+  pointer-events: none;
+}
+
+/* =========================
+   DARK MODE FIX
+========================= */
+
+body.dark-mode .filter-wrapper select {
+  background: linear-gradient(145deg, #1f2937, #111827) !important;
+  color: #f9fafb !important;
+  border: 1px solid #374151 !important;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
+}
+
+body.dark-mode .filter-wrapper select:hover {
+  border-color: var(--primary-gold) !important;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.8),
+    0 0 15px rgba(212, 175, 55, 0.2) !important;
+}
+
+/* Dark mode dropdown options */
+body.dark-mode .filter-wrapper select option {
+  background: #111827;
+  color: #f9fafb;
+}
+
+/* =========================================
+   PREMIUM LABEL BADGES
+========================================= */
+
+.badge-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 18px;
+}
+
+.label {
+  padding: 5px 12px;
+  font-size: 0.72rem;
+  border-radius: 20px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+/* LIGHT MODE COLORS */
+.label.paid {
+  background: rgba(22, 163, 74, 0.1);
+  color: #15803d;
+  border-color: rgba(22, 163, 74, 0.3);
+}
+
+.label.unpaid {
+  background: rgba(107, 114, 128, 0.1);
+  color: #4b5563;
+  border-color: rgba(107, 114, 128, 0.3);
+}
+
+.label.global {
+  background: rgba(37, 99, 235, 0.1);
+  color: #1d4ed8;
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+.label.india {
+  background: rgba(249, 115, 22, 0.1);
+  color: #ea580c;
+  border-color: rgba(249, 115, 22, 0.3);
+}
+
+.label.beginner {
+  background: rgba(251, 191, 36, 0.15);
+  color: #b45309;
+  border-color: rgba(251, 191, 36, 0.4);
+}
+
+.label.intermediate {
+  background: rgba(147, 51, 234, 0.1);
+  color: #7e22ce;
+  border-color: rgba(147, 51, 234, 0.3);
+}
+
+.label.advanced {
+  background: rgba(220, 38, 38, 0.1);
+  color: #b91c1c;
+  border-color: rgba(220, 38, 38, 0.3);
+}
+
+/* Hover polish */
+.label:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+body.dark-mode .label {
+  backdrop-filter: blur(6px);
+}
+
+body.dark-mode .label.paid {
+  background: rgba(22, 163, 74, 0.2);
+  color: #4ade80;
+}
+
+body.dark-mode .label.global {
+  background: rgba(37, 99, 235, 0.2);
+  color: #60a5fa;
+}
+
+body.dark-mode .label.beginner {
+  background: rgba(251, 191, 36, 0.2);
+  color: #facc15;
+}
+
+body.dark-mode .label.intermediate {
+  background: rgba(147, 51, 234, 0.2);
+  color: #c084fc;
+}
+
+body.dark-mode .label.advanced {
+  background: rgba(220, 38, 38, 0.2);
+  color: #f87171;
 }
\ No newline at end of file
diff --git a/frontend/pages/programs.html b/frontend/pages/programs.html
index 51369b8..7fa2f15 100644
--- a/frontend/pages/programs.html
+++ b/frontend/pages/programs.html
@@ -34,48 +34,160 @@ <h3 class="programs-heading">Open Source Programs</h3>
         gain real-world experience through contributions.
       </p>
 
+      <!-- =========================
+          FILTER BAR
+      ========================== -->
+      <div class="filter-bar">
+
+        <div class="filter-wrapper">
+          <select id="levelFilter">
+            <option value="all">All Levels</option>
+            <option value="beginner">Beginner</option>
+            <option value="intermediate">Intermediate</option>
+            <option value="advanced">Advanced</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="typeFilter">
+            <option value="all">All Types</option>
+            <option value="paid">Paid</option>
+            <option value="unpaid">Unpaid</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="regionFilter">
+            <option value="all">All Regions</option>
+            <option value="global">Global</option>
+            <option value="india">India</option>
+          </select>
+        </div>
+
+        <div class="filter-wrapper">
+          <select id="statusFilter">
+            <option value="all">All Status</option>
+            <option value="seasonal">Seasonal</option>
+            <option value="ongoing">Ongoing</option>
+          </select>
+        </div>
+
+      </div>
+
       <div class="card-grid" id="programs-grid">
-        <div class="program-card">
+
+        <!-- EXISTING PROGRAMS (UNCHANGED CONTENT + ADDED CLASSES + LABELS) -->
+
+        <div class="program-card beginner paid global seasonal">
           <div class="card-icon"><i class="fas fa-code"></i></div>
           <h3>Google Summer of Code</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A global program focused on bringing new contributors into open source software development.</p>
           <a href="Event/gsoc.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid india seasonal">
           <div class="card-icon"><i class="fas fa-users"></i></div>
           <h3>GSSoC</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label india">India</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>GirlScript Summer of Code is a three-month-long Open Source program by GirlScript Foundation.</p>
           <a href="Event/gssoc.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid global seasonal">
           <div class="card-icon"><i class="fas fa-terminal"></i></div>
           <h3>Hacktoberfest</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A month-long celebration of open-source software run by DigitalOcean.</p>
           <a href="Event/hacktober.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card intermediate paid global ongoing">
           <div class="card-icon"><i class="fas fa-linux"></i></div>
           <h3>Linux Foundation</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label intermediate">Intermediate</span>
+          </div>
+
           <p>Explore various mentorship opportunities within the massive Linux ecosystem.</p>
           <a href="Event/linux.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner paid global seasonal">
           <div class="card-icon"><i class="fas fa-globe"></i></div>
           <h3>Outreachy</h3>
+
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>Provides internships to people subject to systemic bias and underrepresented in tech.</p>
           <a href="Event/outreachy.html" class="card-btn">View Details</a>
         </div>
 
-        <div class="program-card">
+        <div class="program-card beginner unpaid india seasonal">
           <div class="card-icon"><i class="fas fa-heart"></i></div>
           <h3>Social Summer of Code</h3>
+
+          <div class="badge-group">
+            <span class="label unpaid">Unpaid</span>
+            <span class="label india">India</span>
+            <span class="label beginner">Beginner-Friendly</span>
+          </div>
+
           <p>A program to promote open source and encourage student developers to build for social good.</p>
           <a href="Event/ssoc.html" class="card-btn">View Details</a>
         </div>
+
+        <!-- NEW PROGRAMS ADDED BELOW -->
+
+        <div class="program-card intermediate paid global ongoing">
+          <div class="card-icon"><i class="fas fa-laptop-code"></i></div>
+          <h3>MLH Fellowship</h3>
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label intermediate">Intermediate</span>
+          </div>
+          <p>A 12-week remote internship alternative for aspiring engineers.</p>
+          <a href="#" class="card-btn">View Details</a>
+        </div>
+
+        <div class="program-card advanced paid global seasonal">
+          <div class="card-icon"><i class="fas fa-file-alt"></i></div>
+          <h3>Google Season of Docs</h3>
+          <div class="badge-group">
+            <span class="label paid">Paid</span>
+            <span class="label global">Global</span>
+            <span class="label advanced">Advanced</span>
+          </div>
+          <p>Supports open source documentation projects.</p>
+          <a href="#" class="card-btn">View Details</a>
+        </div>
+
       </div>
     </section>
   </main>
@@ -94,6 +206,40 @@ <h3>Social Summer of Code</h3>
   </button>
   <script src='../js/pwa.js'></script>
   <script src="../js/pr-generator.js"></script>
+  <script>
+    const filters = {
+      level: document.getElementById("levelFilter"),
+      type: document.getElementById("typeFilter"),
+      region: document.getElementById("regionFilter"),
+      status: document.getElementById("statusFilter"),
+    };
+
+    const cards = document.querySelectorAll(".program-card");
+
+    function applyFilters() {
+      cards.forEach(card => {
+        const matchLevel =
+          filters.level.value === "all" || card.classList.contains(filters.level.value);
+
+        const matchType =
+          filters.type.value === "all" || card.classList.contains(filters.type.value);
+
+        const matchRegion =
+          filters.region.value === "all" || card.classList.contains(filters.region.value);
+
+        const matchStatus =
+          filters.status.value === "all" || card.classList.contains(filters.status.value);
+
+        card.style.display = (matchLevel && matchType && matchRegion && matchStatus)
+          ? "flex"
+          : "none";
+      });
+    }
+
+    Object.values(filters).forEach(filter =>
+      filter.addEventListener("change", applyFilters)
+    );
+  </script>
 </body>
 
 </html>
\ No newline at end of file

From 12078cd0cfe0abbe1d9385b2eaef13e8cdff2a44 Mon Sep 17 00:00:00 2001
From: Eshita Badhe <sge.eshita31gb@gmail.com>
Date: Wed, 18 Feb 2026 20:08:55 +0530
Subject: [PATCH 2/3] feat(programs): enhance programs page with filters,
 labels, and dark mode improvements

- Added new open source programs
- Introduced label badges (Paid, Global, Beginner-Friendly, etc.)
- Implemented filter functionality (Level, Type, Region, Status)
- Upgraded filter UI with premium styling
- Fixed dropdown arrow visibility
- Fixed dark mode select background
- Improved heading contrast in dark mode
- Improved overall scalability and UX
---
 frontend/pages/programs.html | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/pages/programs.html b/frontend/pages/programs.html
index 7fa2f15..a8a1de5 100644
--- a/frontend/pages/programs.html
+++ b/frontend/pages/programs.html
@@ -75,9 +75,6 @@ <h3 class="programs-heading">Open Source Programs</h3>
       </div>
 
       <div class="card-grid" id="programs-grid">
-
-        <!-- EXISTING PROGRAMS (UNCHANGED CONTENT + ADDED CLASSES + LABELS) -->
-
         <div class="program-card beginner paid global seasonal">
           <div class="card-icon"><i class="fas fa-code"></i></div>
           <h3>Google Summer of Code</h3>

From 8c970ba46f8da626f81d2446f57f8ea67d1bd972 Mon Sep 17 00:00:00 2001
From: Eshita Badhe <sge.eshita31gb@gmail.com>
Date: Wed, 18 Feb 2026 22:29:37 +0530
Subject: [PATCH 3/3] fix(contributors): improve grid layout, card structure
 and GitHub icon alignment

---
 frontend/css/contributors.css    | 113 ++++++++-----------------------
 frontend/pages/contributors.html | 109 -----------------------------
 2 files changed, 29 insertions(+), 193 deletions(-)

diff --git a/frontend/css/contributors.css b/frontend/css/contributors.css
index ca01f5c..d8101ab 100644
--- a/frontend/css/contributors.css
+++ b/frontend/css/contributors.css
@@ -118,24 +118,6 @@ body.dark-mode .contributors-section p {
   flex: 0 0 auto;
 }
 
-.contributor-github {
-  width: 42px;
-  height: 42px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  color: var(--deep-navy);
-  background: rgb(255 255 255 / 90%);
-  border: 1px solid rgb(212 175 55 / 24%);
-  transition: transform 0.2s ease, background 0.2s ease;
-}
-
-.contributor-github:hover {
-  transform: scale(1.06);
-  background: rgb(255 248 231 / 95%);
-}
 .contributor-card {
   background: linear-gradient(
     180deg,
@@ -149,8 +131,10 @@ body.dark-mode .contributors-section p {
     inset 0 1px 0 rgb(255 255 255 / 60%);
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1.5rem;
   max-width: 360px;
+  min-height: 140px;
   margin: 0 auto;
   position: relative;
 
@@ -180,9 +164,10 @@ body.dark-mode .contributors-section p {
 
 .contributor-main {
   flex: 1;
+  max-width: 100px;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
 }
 
 .contributor-name {
@@ -240,29 +225,10 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-actions {
-  
   flex-shrink: 0;
-}
-
-.contributor-github {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: #1a2433;
-  background: #f9f9f9;
-  border: 1.5px solid #d4af37;
-  box-shadow: 0 2px 6px rgb(0 0 0 / 0.07);
-  transition: all 0.25s ease;
-  cursor: pointer;
-}
-
-.contributor-github:hover {
-  background: #fff8dc;
-  transform: scale(1.12);
-  box-shadow: 0 4px 10px rgb(212 175 55 / 0.5);
 }
 
 /* Skeleton loading */
@@ -764,20 +730,6 @@ body.dark-mode .contributors-section p {
   }
 }
 
-/* Card refinement */
-.contributor-card {
-  padding: 1.5rem 1.55rem 1.35rem;
-  border-radius: 20px;
-  background: linear-gradient(
-    180deg,
-   #dfc981fb,
-    rgb(255 255 255 / 88%)
-  );
-  box-shadow:
-    0 12px 30px rgb(0 0 0 / 8%),
-    inset 0 1px 0 rgb(255 255 255 / 60%);
-}
-
 /* Hover feels lighter */
 .contributor-card:hover {
   transform: translateY(-5px);
@@ -862,21 +814,6 @@ body.dark-mode .contributors-section p {
   color: var(--text-secondary);
 }
 
-/* GitHub action button */
-.contributor-github {
-  width: 44px;
-  height: 44px;
-  background: linear-gradient(
-    180deg,
-    rgb(255 255 255 / 95%),
-    rgb(248 248 248 / 90%)
-  );
-}
-
-.contributor-github:hover {
-  background: rgb(255 250 235);
-}
-
 /* Mobile tuning */
 @media (max-width: 720px) {
   .contributors-grid {
@@ -916,13 +853,6 @@ body.dark-mode .contributors-section p {
   text-overflow: ellipsis;    
 }
 
-.contributor-actions {
-  flex-shrink: 0;  
-  margin-left: 1rem;
-  display: flex;
-  align-items: center;
-}
-
 /* Animation trigger */
 .contributor-card.is-visible {
     opacity: 1;
@@ -1006,16 +936,29 @@ body.dark-mode .contributors-section p {
 }
 
 .contributor-github {
-    font-size: 1.5rem;
-    color: #1b263b;
-    transition: color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.3rem;
+  text-decoration: none;
+
+  background: #ffffff;
+  border: 2px solid #d4af37;
+  color: #1b263b;
+
+  transition: all 0.25s ease;
+  flex-shrink: 0;
 }
 
 .contributor-github:hover {
-    color: #d4af37; /* Gold */
+  transform: scale(1.1);
+  background: #fff8dc;
+  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
 }
 
 /* =========================================
@@ -1092,11 +1035,13 @@ body.dark-mode .contributor-chip.is-bot {
 }
 
 body.dark-mode .contributor-github {
-    color: #e0e0e0 !important; /* White/Light Grey Icon */
+  background: #1f2937;
+  border-color: #d4af37;
+  color: #f9fafb;
 }
 
 body.dark-mode .contributor-github:hover {
-    color: #d4af37 !important; /* Gold on Hover */
+  background: #2a2f3a;
 }
 
 /* Skeleton Dark Mode */
diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html
index 8db82ef..6499c78 100644
--- a/frontend/pages/contributors.html
+++ b/frontend/pages/contributors.html
@@ -21,115 +21,6 @@
   
   <link rel='manifest' href='../../manifest.json' />
 
-  <style>
-    /* --- 1. Page Spacing & Heading --- */
-    .contributors-section {
-      padding-top: 20px; 
-    }
-
-    .contributors-section h1 {
-      text-align: center;
-      font-size: 4rem; 
-      margin: 0;
-    }
-
-    .contributors-section > p {
-      text-align: center;
-      margin-top: 5px;
-      margin-bottom: 40px; 
-      color: #555; 
-      font-size: 1.1rem;
-    }
-
-    /* --- 2. Grid Container --- */
-    #contributors-grid {
-      display: flex;
-      flex-direction: column;
-      gap: 20px; 
-      align-items: center; 
-      width: 100%;
-      max-width: 1000px; 
-      margin: 0 auto; 
-    }
-
-    /* --- 3. THE CARD STYLING --- */
-    .contributor-card {
-      display: flex !important; 
-      flex-direction: row !important;
-      align-items: center !important;
-      justify-content: space-between !important; 
-      
-      width: 90%; 
-      background-color: #ffffff; 
-      padding: 15px 30px; 
-      border-radius: 15px; 
-      box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
-      border: 1px solid rgba(0,0,0,0.05);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .contributor-card:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 8px 15px rgba(0,0,0,0.1);
-    }
-
-    /* --- SECTION 1: Avatar (Left) --- */
-    .card-avatar-section img {
-      width: 70px;
-      height: 70px;
-      border-radius: 50%;
-      object-fit: cover;
-      border: 2px solid #eee;
-      display: block;
-    }
-
-    /* --- SECTION 2: Info (Center) --- */
-    .card-info-section {
-      flex-grow: 1; 
-      display: flex;
-      flex-direction: column;
-      align-items: center; 
-      justify-content: center;
-      padding: 0 20px; 
-      text-align: center;
-    }
-    
-    .card-info-section h2,
-    .card-info-section h3, 
-    .card-info-section p,
-    .card-info-section strong {
-      margin: 2px 0;
-      text-align: center;
-    }
-
-    /* --- SECTION 3: GitHub Icon (Right) --- */
-    .card-icon-section {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      min-width: 50px;
-    }
-    
-    .card-icon-section a, 
-    .card-icon-section i {
-      font-size: 1.8rem;
-      color: #333;
-      text-decoration: none;
-      
-      /* ADDED: Smooth transition for the hover effect */
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
-      display: inline-block; /* Required for transform to work on spans/links */
-    }
-
-    /* ADDED: The Hover Effect specifically for the Logo */
-    .card-icon-section a:hover, 
-    .card-icon-section i:hover {
-      transform: scale(1.3) rotate(10deg); /* Zoom in and tilt */
-      color: #000; /* Make it darker black */
-      cursor: pointer;
-    }
-  </style>
-
 </head>
 
 <body class="contributors-page">