From 4a692a6717eaed4b79c3aedc3dd285c08381d3b1 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Mon, 15 Dec 2025 22:20:56 +0530
Subject: [PATCH 01/14] Add Dark Mode Toggle Feature (#85-10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implement dark mode toggle button in top-right corner
- Add comprehensive dark mode CSS styles
- Persist user preference in localStorage
- Toggle displays moon icon (🌙) in light mode, sun icon (☀️) in dark mode
- Dark theme uses comfortable #1e1e1e background with proper contrast
- Smooth transitions between light and dark modes
- Mobile-responsive toggle button
- Accessible with aria-labels and title attributes

Features:
- Dark mode preference persists across sessions
- All UI elements properly themed (cards, filters, header, footer)
- Links maintain proper color contrast in both modes
- Smooth animations for mode transitions
---
 docs/script.js      |  48 +++++++++++++
 docs/styles.css     | 162 ++++++++++++++++++++++++++++++++++++++++++++
 layouts/header.html |   5 ++
 3 files changed, 215 insertions(+)

diff --git a/docs/script.js b/docs/script.js
index a64161a..46ffde5 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -508,3 +508,51 @@ function hideLoadingState() {
     if (loadingState) loadingState.style.display = 'none';
     if (loadingStateDesktop) loadingStateDesktop.style.display = 'none';
 }
+// ============================================================================
+// DARK MODE TOGGLE
+// ============================================================================
+/**
+ * Initialize dark mode functionality
+ * - Load saved preference from localStorage
+ * - Set up toggle button listener
+ * - Apply dark mode class if preference is set
+ */
+function initializeDarkMode() {
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    const isDarkMode = localStorage.getItem('darkMode') === 'enabled';
+    
+    if (isDarkMode) {
+        document.body.classList.add('dark-mode');
+        updateDarkModeIcon(true);
+    }
+    
+    if (darkModeToggle) {
+        darkModeToggle.addEventListener('click', toggleDarkMode);
+    }
+}
+
+/**
+ * Toggle dark mode on/off
+ * - Saves preference to localStorage
+ * - Applies/removes dark-mode class from body
+ */
+function toggleDarkMode() {
+    const isDarkMode = document.body.classList.toggle('dark-mode');
+    localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
+    updateDarkModeIcon(isDarkMode);
+}
+
+/**
+ * Update dark mode toggle icon
+ * @param {boolean} isDarkMode - Whether dark mode is currently enabled
+ */
+function updateDarkModeIcon(isDarkMode) {
+    const darkModeToggle = document.getElementById('darkModeToggle');
+    if (darkModeToggle) {
+        darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
+        darkModeToggle.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+    }
+}
+
+// Call dark mode initialization when DOM is ready
+document.addEventListener('DOMContentLoaded', initializeDarkMode);
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
index f9ffc05..1946373 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -593,3 +593,165 @@ footer {
         display: none;
     }
 }
+/* ============================================================================ */
+/* DARK MODE STYLES */
+/* ============================================================================ */
+body.dark-mode {
+    background: #1e1e1e;
+    color: #e0e0e0;
+}
+
+body.dark-mode h1 {
+    color: #e0e0e0;
+}
+
+body.dark-mode .header-section {
+    background: #2d2d2d;
+}
+
+body.dark-mode .filters-aside {
+    background: #2d2d2d;
+    border-right: 1px solid #444;
+}
+
+body.dark-mode .filters-aside h2 {
+    color: #e0e0e0;
+}
+
+body.dark-mode .filters-content {
+    color: #e0e0e0;
+}
+
+body.dark-mode .filters-content label {
+    color: #e0e0e0;
+}
+
+body.dark-mode input[type="text"],
+body.dark-mode select {
+    background: #3a3a3a;
+    color: #e0e0e0;
+    border: 1px solid #555;
+}
+
+body.dark-mode input[type="text"]::placeholder {
+    color: #888;
+}
+
+body.dark-mode input[type="text"]:focus,
+body.dark-mode select:focus {
+    border-color: #667eea;
+    background: #3a3a3a;
+}
+
+body.dark-mode .card {
+    background: #2d2d2d;
+    color: #e0e0e0;
+    border: 1px solid #444;
+}
+
+body.dark-mode .card:hover {
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+body.dark-mode .details-box {
+    background: #1e1e1e;
+}
+
+body.dark-mode .details-box strong {
+    color: #fff;
+}
+
+body.dark-mode .details-box span {
+    color: #b0b0b0;
+}
+
+body.dark-mode .details-box a {
+    color: #667eea;
+}
+
+body.dark-mode .details-box a:hover {
+    color: #764ba2;
+}
+
+body.dark-mode .btn-apply,
+body.dark-mode .btn-reset {
+    background: #667eea;
+    color: white;
+    border: none;
+}
+
+body.dark-mode .btn-apply:hover,
+body.dark-mode .btn-reset:hover {
+    background: #764ba2;
+}
+
+body.dark-mode .results-info {
+    color: #e0e0e0;
+}
+
+body.dark-mode .results-info strong {
+    color: #fff;
+}
+
+body.dark-mode footer {
+    background: #2d2d2d;
+    color: #b0b0b0;
+    border-top: 1px solid #444;
+}
+
+body.dark-mode footer a {
+    color: #667eea;
+}
+
+body.dark-mode footer a:hover {
+    color: #764ba2;
+}
+
+/* Dark Mode Toggle Button */
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    transition: all 0.3s ease;
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}
+
+.dark-mode-toggle:active {
+    transform: scale(0.95);
+}
+
+body.dark-mode .dark-mode-toggle {
+    background: linear-gradient(135deg, #f4a460 0%, #ff8c69 100%);
+    box-shadow: 0 4px 15px rgba(255, 140, 105, 0.4);
+}
+
+body.dark-mode .dark-mode-toggle:hover {
+    box-shadow: 0 6px 20px rgba(255, 140, 105, 0.6);
+}
+
+@media (max-width: 768px) {
+    .dark-mode-toggle {
+        top: 10px;
+        right: 10px;
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+}
\ No newline at end of file
diff --git a/layouts/header.html b/layouts/header.html
index 87a7da7..2b657e1 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -37,6 +37,11 @@
         <img class="github-ribbon" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub">
     </a>
 
+<!-- Dark Mode Toggle Button -->
+<button id="darkModeToggle" class="dark-mode-toggle" title="Switch to Dark Mode" aria-label="Toggle dark mode">
+    🌙
+</button>
+
 <!-- Mobile Filter Toggle Button -->
 <button id="filterToggleBtn" class="filter-toggle-btn" onclick="toggleFiltersPanel()" aria-label="Toggle filters">
     🔍 Filters

From e758bd840c3b8bdb0734bf9733af46a9617ba3a9 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Mon, 15 Dec 2025 22:27:19 +0530
Subject: [PATCH 02/14] Refactor Dark Mode implementation based on code review
 feedback

Code Quality Improvements:
- Add constants for localStorage keys (DARK_MODE_KEY, THEME_ENABLED, THEME_DISABLED)
- Cache darkModeToggleElement to avoid redundant DOM queries
- Centralize dark mode initialization by calling initializeDarkMode() from initializeApp()
- Remove duplicate DOMContentLoaded event listener

CSS Best Practices:
- Introduce CSS Custom Properties (variables) for theming
- Define light theme colors in :root
- Override colors in body.dark-mode for dark theme
- Consolidate dark mode styles using variables instead of hardcoded values
- Improves maintainability and makes future theme changes easier

Benefits:
- Reduced code duplication
- Better performance with cached DOM elements
- Centralized initialization logic
- Easier to extend with additional themes
- Single source of truth for color values
---
 docs/script.js  |  30 ++++++------
 docs/styles.css | 120 ++++++++++++++++++++++++++++--------------------
 2 files changed, 87 insertions(+), 63 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index 46ffde5..2aaa9e7 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -31,6 +31,12 @@
 
 let allUsers = [];
 let filteredUsers = [];
+let darkModeToggleElement = null;
+
+// Dark mode constants
+const DARK_MODE_KEY = 'darkMode';
+const THEME_ENABLED = 'enabled';
+const THEME_DISABLED = 'disabled';
 
 // ============================================================================
 // INITIALIZATION
@@ -41,6 +47,7 @@ document.addEventListener('DOMContentLoaded', initializeApp);
  * Initialize the application on page load
  */
 function initializeApp() {
+    initializeDarkMode();
     const cards = document.querySelectorAll('.card');
     showLoadingState();
     document.getElementById('totalCount').textContent = cards.length.toLocaleString();
@@ -516,18 +523,19 @@ function hideLoadingState() {
  * - Load saved preference from localStorage
  * - Set up toggle button listener
  * - Apply dark mode class if preference is set
+ * - Cache DOM element for performance
  */
 function initializeDarkMode() {
-    const darkModeToggle = document.getElementById('darkModeToggle');
-    const isDarkMode = localStorage.getItem('darkMode') === 'enabled';
+    darkModeToggleElement = document.getElementById('darkModeToggle');
+    const isDarkMode = localStorage.getItem(DARK_MODE_KEY) === THEME_ENABLED;
     
     if (isDarkMode) {
         document.body.classList.add('dark-mode');
         updateDarkModeIcon(true);
     }
     
-    if (darkModeToggle) {
-        darkModeToggle.addEventListener('click', toggleDarkMode);
+    if (darkModeToggleElement) {
+        darkModeToggleElement.addEventListener('click', toggleDarkMode);
     }
 }
 
@@ -538,7 +546,7 @@ function initializeDarkMode() {
  */
 function toggleDarkMode() {
     const isDarkMode = document.body.classList.toggle('dark-mode');
-    localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
+    localStorage.setItem(DARK_MODE_KEY, isDarkMode ? THEME_ENABLED : THEME_DISABLED);
     updateDarkModeIcon(isDarkMode);
 }
 
@@ -547,12 +555,8 @@ function toggleDarkMode() {
  * @param {boolean} isDarkMode - Whether dark mode is currently enabled
  */
 function updateDarkModeIcon(isDarkMode) {
-    const darkModeToggle = document.getElementById('darkModeToggle');
-    if (darkModeToggle) {
-        darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
-        darkModeToggle.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+    if (darkModeToggleElement) {
+        darkModeToggleElement.textContent = isDarkMode ? '☀️' : '🌙';
+        darkModeToggleElement.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
     }
-}
-
-// Call dark mode initialization when DOM is ready
-document.addEventListener('DOMContentLoaded', initializeDarkMode);
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
index 1946373..30da21f 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -2,9 +2,28 @@
     box-sizing: border-box;
 }
 
+/* ============================================================================ */
+/* CSS VARIABLES FOR THEMING */
+/* ============================================================================ */
+:root {
+    --bg-color: #f0f2f5;
+    --text-color: #333;
+    --text-secondary: #666;
+    --card-bg: #ffffff;
+    --card-border: #ddd;
+    --input-bg: #ffffff;
+    --input-border: #ccc;
+    --header-bg: #ffffff;
+    --footer-bg: #ffffff;
+    --footer-border: #e0e0e0;
+    --link-color: #667eea;
+    --link-hover: #764ba2;
+}
+
 body {
     font-family: 'Arial', sans-serif;
-    background: #f0f2f5;
+    background: var(--bg-color);
+    color: var(--text-color);
     margin: 0;
     padding: 0;
 }
@@ -593,60 +612,70 @@ footer {
         display: none;
     }
 }
+
 /* ============================================================================ */
-/* DARK MODE STYLES */
+/* DARK MODE STYLES - USING CSS VARIABLES */
 /* ============================================================================ */
 body.dark-mode {
-    background: #1e1e1e;
-    color: #e0e0e0;
+    --bg-color: #1e1e1e;
+    --text-color: #e0e0e0;
+    --text-secondary: #b0b0b0;
+    --card-bg: #2d2d2d;
+    --card-border: #444;
+    --input-bg: #3a3a3a;
+    --input-border: #555;
+    --header-bg: #2d2d2d;
+    --footer-bg: #2d2d2d;
+    --footer-border: #444;
+    --link-color: #667eea;
+    --link-hover: #764ba2;
+}
+
+body.dark-mode {
+    background: var(--bg-color);
+    color: var(--text-color);
 }
 
 body.dark-mode h1 {
-    color: #e0e0e0;
+    color: var(--text-color);
 }
 
 body.dark-mode .header-section {
-    background: #2d2d2d;
+    background: var(--header-bg);
 }
 
 body.dark-mode .filters-aside {
-    background: #2d2d2d;
-    border-right: 1px solid #444;
-}
-
-body.dark-mode .filters-aside h2 {
-    color: #e0e0e0;
-}
-
-body.dark-mode .filters-content {
-    color: #e0e0e0;
+    background: var(--header-bg);
+    border-right: 1px solid var(--card-border);
 }
 
+body.dark-mode .filters-aside h2,
+body.dark-mode .filters-content,
 body.dark-mode .filters-content label {
-    color: #e0e0e0;
+    color: var(--text-color);
 }
 
 body.dark-mode input[type="text"],
 body.dark-mode select {
-    background: #3a3a3a;
-    color: #e0e0e0;
-    border: 1px solid #555;
+    background: var(--input-bg);
+    color: var(--text-color);
+    border: 1px solid var(--input-border);
 }
 
 body.dark-mode input[type="text"]::placeholder {
-    color: #888;
+    color: var(--text-secondary);
 }
 
 body.dark-mode input[type="text"]:focus,
 body.dark-mode select:focus {
-    border-color: #667eea;
-    background: #3a3a3a;
+    border-color: var(--link-color);
+    background: var(--input-bg);
 }
 
 body.dark-mode .card {
-    background: #2d2d2d;
-    color: #e0e0e0;
-    border: 1px solid #444;
+    background: var(--card-bg);
+    color: var(--text-color);
+    border: 1px solid var(--card-border);
 }
 
 body.dark-mode .card:hover {
@@ -654,7 +683,7 @@ body.dark-mode .card:hover {
 }
 
 body.dark-mode .details-box {
-    background: #1e1e1e;
+    background: var(--bg-color);
 }
 
 body.dark-mode .details-box strong {
@@ -662,49 +691,40 @@ body.dark-mode .details-box strong {
 }
 
 body.dark-mode .details-box span {
-    color: #b0b0b0;
+    color: var(--text-secondary);
 }
 
-body.dark-mode .details-box a {
-    color: #667eea;
+body.dark-mode .details-box a,
+body.dark-mode footer a {
+    color: var(--link-color);
 }
 
-body.dark-mode .details-box a:hover {
-    color: #764ba2;
+body.dark-mode .details-box a:hover,
+body.dark-mode footer a:hover {
+    color: var(--link-hover);
 }
 
 body.dark-mode .btn-apply,
 body.dark-mode .btn-reset {
-    background: #667eea;
+    background: var(--link-color);
     color: white;
     border: none;
 }
 
 body.dark-mode .btn-apply:hover,
 body.dark-mode .btn-reset:hover {
-    background: #764ba2;
-}
-
-body.dark-mode .results-info {
-    color: #e0e0e0;
+    background: var(--link-hover);
 }
 
+body.dark-mode .results-info,
 body.dark-mode .results-info strong {
-    color: #fff;
+    color: var(--text-color);
 }
 
 body.dark-mode footer {
-    background: #2d2d2d;
-    color: #b0b0b0;
-    border-top: 1px solid #444;
-}
-
-body.dark-mode footer a {
-    color: #667eea;
-}
-
-body.dark-mode footer a:hover {
-    color: #764ba2;
+    background: var(--footer-bg);
+    color: var(--text-secondary);
+    border-top: 1px solid var(--footer-border);
 }
 
 /* Dark Mode Toggle Button */

From bb05600b71156216984e1c9ab4855ebe5c88d498 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Mon, 15 Dec 2025 23:05:45 +0530
Subject: [PATCH 03/14] Fix CSS issues from code review

- Fix z-index bug: Change dark mode toggle z-index from 999 to 100001
  Prevents toggle button from being hidden behind GitHub ribbon (z-index: 100000)
- Remove redundant CSS rule: body.dark-mode background/color already inherit from variables
- Replace hardcoded color: Use var(--text-color) instead of #fff in details-box strong
  Maintains consistency with theme variables for easier future updates
---
 docs/styles.css | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 30da21f..92faf41 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -631,11 +631,6 @@ body.dark-mode {
     --link-hover: #764ba2;
 }
 
-body.dark-mode {
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-
 body.dark-mode h1 {
     color: var(--text-color);
 }
@@ -687,7 +682,7 @@ body.dark-mode .details-box {
 }
 
 body.dark-mode .details-box strong {
-    color: #fff;
+    color: var(--text-color);
 }
 
 body.dark-mode .details-box span {
@@ -743,7 +738,7 @@ body.dark-mode footer {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 999;
+    z-index: 100001;
     box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
     transition: all 0.3s ease;
 }

From c73304f9bf04bf5cddd0b5639bdd04e95bfb5771 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Wed, 17 Dec 2025 08:40:49 +0530
Subject: [PATCH 04/14] Fix flash of incorrect theme and refactor CSS to use
 variables

Prevent Flash of Incorrect Theme (FOIT):
- Add inline script in <head> to apply dark mode before page renders
- Prevents white flash when user has dark mode enabled
- Script runs synchronously before page content is rendered

JavaScript Improvements:
- Update initializeDarkMode() to check documentElement instead of reading localStorage
- Use document.documentElement for theme application (not body)
- Simplify init logic - theme is already applied by inline script

CSS Refactoring:
- Change all body.dark-mode selectors to html.dark-mode
- Refactor base styles to use CSS variables:
  * h1: use var(--text-color) instead of #333
  * .card: use var(--card-bg) instead of #fff
  * .details-box strong: use var(--text-color)
  * .details-box span: use var(--text-secondary)
  * .stats-row border: use var(--card-border)
  * .stat a: use var(--link-color) and var(--link-hover)
- Eliminates need for many dark-mode override rules
- More maintainable and concise CSS
- Automatic theme application without duplication

Result:
- Smooth theme switching without flicker
- Cleaner, more maintainable codebase
- Better user experience overall
---
 docs/script.js      | 13 +++-----
 docs/styles.css     | 74 ++++++++++++++++++++++-----------------------
 layouts/header.html |  9 ++++++
 3 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index b46f4aa..ee085c7 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -540,17 +540,14 @@ function hideLoadingState() {
  * Initialize dark mode functionality
  * - Load saved preference from localStorage
  * - Set up toggle button listener
- * - Apply dark mode class if preference is set
+ * - Update icon based on current theme state
  * - Cache DOM element for performance
  */
 function initializeDarkMode() {
     darkModeToggleElement = document.getElementById('darkModeToggle');
-    const isDarkMode = localStorage.getItem(DARK_MODE_KEY) === THEME_ENABLED;
+    const isDarkMode = document.documentElement.classList.contains('dark-mode');
     
-    if (isDarkMode) {
-        document.body.classList.add('dark-mode');
-        updateDarkModeIcon(true);
-    }
+    updateDarkModeIcon(isDarkMode);
     
     if (darkModeToggleElement) {
         darkModeToggleElement.addEventListener('click', toggleDarkMode);
@@ -560,10 +557,10 @@ function initializeDarkMode() {
 /**
  * Toggle dark mode on/off
  * - Saves preference to localStorage
- * - Applies/removes dark-mode class from body
+ * - Applies/removes dark-mode class from html element
  */
 function toggleDarkMode() {
-    const isDarkMode = document.body.classList.toggle('dark-mode');
+    const isDarkMode = document.documentElement.classList.toggle('dark-mode');
     localStorage.setItem(DARK_MODE_KEY, isDarkMode ? THEME_ENABLED : THEME_DISABLED);
     updateDarkModeIcon(isDarkMode);
 }
diff --git a/docs/styles.css b/docs/styles.css
index 92faf41..3c6aaee 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -51,7 +51,7 @@ h1 {
     text-align: center;
     margin-top: 30px;
     font-size: 2.5rem;
-    color: #333;
+    color: var(--text-color);
 }
 
 #head {
@@ -343,7 +343,7 @@ h1 {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0,0,0,0.15);
-    background: #fff;
+    background: var(--card-bg);
     transition: transform 0.3s, box-shadow 0.3s;
     display: none;
 }
@@ -370,12 +370,12 @@ h1 {
 .details-box strong {
     display: block;
     font-size: 1.1rem;
-    color: #222;
+    color: var(--text-color);
 }
 
 .details-box span {
     display: block;
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
 }
 
@@ -385,7 +385,7 @@ h1 {
     gap: 8px;
     margin-top: 8px;
     padding-top: 8px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--card-border);
     font-size: 0.85rem;
 }
 
@@ -395,14 +395,14 @@ h1 {
 }
 
 .stat a {
-    color: #667eea;
+    color: var(--link-color);
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s;
 }
 
 .stat a:hover {
-    color: #764ba2;
+    color: var(--link-hover);
     text-decoration: underline;
 }
 
@@ -616,7 +616,7 @@ footer {
 /* ============================================================================ */
 /* DARK MODE STYLES - USING CSS VARIABLES */
 /* ============================================================================ */
-body.dark-mode {
+html.dark-mode {
     --bg-color: #1e1e1e;
     --text-color: #e0e0e0;
     --text-secondary: #b0b0b0;
@@ -631,92 +631,92 @@ body.dark-mode {
     --link-hover: #764ba2;
 }
 
-body.dark-mode h1 {
+html.dark-mode h1 {
     color: var(--text-color);
 }
 
-body.dark-mode .header-section {
+html.dark-mode .header-section {
     background: var(--header-bg);
 }
 
-body.dark-mode .filters-aside {
+html.dark-mode .filters-aside {
     background: var(--header-bg);
     border-right: 1px solid var(--card-border);
 }
 
-body.dark-mode .filters-aside h2,
-body.dark-mode .filters-content,
-body.dark-mode .filters-content label {
+html.dark-mode .filters-aside h2,
+html.dark-mode .filters-content,
+html.dark-mode .filters-content label {
     color: var(--text-color);
 }
 
-body.dark-mode input[type="text"],
-body.dark-mode select {
+html.dark-mode input[type="text"],
+html.dark-mode select {
     background: var(--input-bg);
     color: var(--text-color);
     border: 1px solid var(--input-border);
 }
 
-body.dark-mode input[type="text"]::placeholder {
+html.dark-mode input[type="text"]::placeholder {
     color: var(--text-secondary);
 }
 
-body.dark-mode input[type="text"]:focus,
-body.dark-mode select:focus {
+html.dark-mode input[type="text"]:focus,
+html.dark-mode select:focus {
     border-color: var(--link-color);
     background: var(--input-bg);
 }
 
-body.dark-mode .card {
+html.dark-mode .card {
     background: var(--card-bg);
     color: var(--text-color);
     border: 1px solid var(--card-border);
 }
 
-body.dark-mode .card:hover {
+html.dark-mode .card:hover {
     box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
 }
 
-body.dark-mode .details-box {
+html.dark-mode .details-box {
     background: var(--bg-color);
 }
 
-body.dark-mode .details-box strong {
+html.dark-mode .details-box strong {
     color: var(--text-color);
 }
 
-body.dark-mode .details-box span {
+html.dark-mode .details-box span {
     color: var(--text-secondary);
 }
 
-body.dark-mode .details-box a,
-body.dark-mode footer a {
+html.dark-mode .details-box a,
+html.dark-mode footer a {
     color: var(--link-color);
 }
 
-body.dark-mode .details-box a:hover,
-body.dark-mode footer a:hover {
+html.dark-mode .details-box a:hover,
+html.dark-mode footer a:hover {
     color: var(--link-hover);
 }
 
-body.dark-mode .btn-apply,
-body.dark-mode .btn-reset {
+html.dark-mode .btn-apply,
+html.dark-mode .btn-reset {
     background: var(--link-color);
     color: white;
     border: none;
 }
 
-body.dark-mode .btn-apply:hover,
-body.dark-mode .btn-reset:hover {
+html.dark-mode .btn-apply:hover,
+html.dark-mode .btn-reset:hover {
     background: var(--link-hover);
 }
 
-body.dark-mode .results-info,
-body.dark-mode .results-info strong {
+html.dark-mode .results-info,
+html.dark-mode .results-info strong {
     color: var(--text-color);
 }
 
-body.dark-mode footer {
+html.dark-mode footer {
     background: var(--footer-bg);
     color: var(--text-secondary);
     border-top: 1px solid var(--footer-border);
@@ -752,12 +752,12 @@ body.dark-mode footer {
     transform: scale(0.95);
 }
 
-body.dark-mode .dark-mode-toggle {
+html.dark-mode .dark-mode-toggle {
     background: linear-gradient(135deg, #f4a460 0%, #ff8c69 100%);
     box-shadow: 0 4px 15px rgba(255, 140, 105, 0.4);
 }
 
-body.dark-mode .dark-mode-toggle:hover {
+html.dark-mode .dark-mode-toggle:hover {
     box-shadow: 0 6px 20px rgba(255, 140, 105, 0.6);
 }
 
diff --git a/layouts/header.html b/layouts/header.html
index 8fe2666..2993e07 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -31,6 +31,15 @@
 <link rel="apple-touch-icon" href="images/other/hm-180.png">
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="styles.css?version=3">
+
+<!-- Prevent Flash of Incorrect Theme (FOIT) -->
+<script>
+  (function() {
+    if (localStorage.getItem('darkMode') === 'enabled') {
+      document.documentElement.classList.add('dark-mode');
+    }
+  })();
+</script>
 </head>
 <body>
     <a href="https://github.com/john-bampton/faces">

From a07db53d8c8f154eb6208644da74b4616ba3ccdd Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 00:28:53 +0530
Subject: [PATCH 05/14] fix(review): remove extra braces, unused var, and use
 gradient hover

---
 docs/script.js  | 3 +--
 docs/styles.css | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index 784cbb3..2f88540 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', initializeApp);
  */
 async function initializeApp() {
     initializeDarkMode();
-    const cards = document.querySelectorAll('.card');
+
     showLoadingState();
     setupEventListeners();
     await fetchAndPrepareUsers();
@@ -799,5 +799,4 @@ function updateDarkModeIcon(isDarkMode) {
         darkModeToggleElement.textContent = isDarkMode ? '☀️' : '🌙';
         darkModeToggleElement.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
     }
-}
 }
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
index 1d41a3b..d50348f 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -765,7 +765,7 @@ html.dark-mode .card img {
 html.dark-mode .card:hover img {
     opacity: 1;
 }
-}
+
 
 /* Dark Mode Toggle Button */
 .dark-mode-toggle {
@@ -790,7 +790,7 @@ html.dark-mode .card:hover img {
 
 .dark-mode-toggle:hover {
     transform: scale(1.1);
-    background: #555;
+    background: linear-gradient(135deg, #5a68c4 0%, #613e86 100%);
 }
 
 /* Adjust position for mobile if needed */

From 8a2d7d5bf3c3681cb0240332d5be61a63dc03a1e Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 00:42:46 +0530
Subject: [PATCH 06/14] Fix dark mode: update reset button style and remove
 FOIT

---
 docs/styles.css     |   9 +-
 layouts/layout.html | 621 ++++++++++++++++++++++----------------------
 2 files changed, 324 insertions(+), 306 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index d50348f..d7d03cc 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -744,13 +744,18 @@ html.dark-mode .stat-label {
     color: #888;
 }
 
-html.dark-mode .btn-apply,
-html.dark-mode .btn-reset {
+html.dark-mode .btn-apply {
     background: var(--link-color);
     color: white;
     border: none;
 }
 
+html.dark-mode .btn-reset {
+    background: rgba(255, 80, 80, 0.3);
+    color: white;
+    border: 1px solid rgba(255, 80, 80, 0.5);
+}
+
 html.dark-mode .btn-apply:hover,
 html.dark-mode .btn-reset:hover {
     background: var(--link-hover);
diff --git a/layouts/layout.html b/layouts/layout.html
index 26fa1fa..c412bb8 100644
--- a/layouts/layout.html
+++ b/layouts/layout.html
@@ -1,340 +1,353 @@
 <!DOCTYPE html>
 <html lang="en-US">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Top GitHub Faces</title>
-
-<meta name="description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
-<meta name="keywords" content="GitHub, avatars, top developers, open source, profiles, faces">
-<meta name="author" content="John Bampton">
-<meta name="theme-color" content="#667eea">
-<meta name="mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-<meta name="apple-mobile-web-app-title" content="GitHub Faces">
-
-<meta property="og:type" content="website">
-<meta property="og:title" content="Top GitHub Faces">
-<meta property="og:description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
-<meta property="og:url" content="https://github.com/john-bampton/john-bampton.github.io">
-<meta property="og:image" content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/other/screenshot-1280.png">
-
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="Top GitHub Faces">
-<meta name="twitter:description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
-<meta name="twitter:image" content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/other/screenshot-1280.png">
-
-<link rel="manifest" href="manifest.json">
-<link rel="apple-touch-icon" sizes="180x180" href="images/other/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="images/other/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="images/other/favicon-16x16.png">
-<link rel="icon" href="images/other/favicon.ico">
-<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
-<link rel="stylesheet" href="styles.css?version=3">
-
-<!-- Prevent Flash of Incorrect Theme (FOIT) -->
-<script>
-  (function() {
-    if (localStorage.getItem('darkMode') === 'enabled') {
-      document.documentElement.classList.add('dark-mode');
-    }
-  })();
-</script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Top GitHub Faces</title>
+
+    <meta name="description"
+        content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
+    <meta name="keywords" content="GitHub, avatars, top developers, open source, profiles, faces">
+    <meta name="author" content="John Bampton">
+    <meta name="theme-color" content="#667eea">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="GitHub Faces">
+
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Top GitHub Faces">
+    <meta property="og:description"
+        content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
+    <meta property="og:url" content="https://github.com/john-bampton/john-bampton.github.io">
+    <meta property="og:image"
+        content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/other/screenshot-1280.png">
+
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Top GitHub Faces">
+    <meta name="twitter:description"
+        content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
+    <meta name="twitter:image"
+        content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/other/screenshot-1280.png">
+
+    <link rel="manifest" href="manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="images/other/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/other/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/other/favicon-16x16.png">
+    <link rel="icon" href="images/other/favicon.ico">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css?version=3">
+
+    <!-- Prevent Flash of Incorrect Theme (FOIT) -->
+    <script>
+        (function () {
+            if (localStorage.getItem('darkMode') === 'enabled') {
+                document.documentElement.classList.add('dark-mode');
+            }
+        })();
+    </script>
 </head>
+
 <body>
     <a href="https://github.com/john-bampton/john-bampton.github.io">
         <img class="github-ribbon" src="images/other/fork.png" alt="Fork me on GitHub">
     </a>
 
-<!-- Dark Mode Toggle Button -->
-<button id="darkModeToggle" class="dark-mode-toggle" title="Switch to Dark Mode" aria-label="Toggle dark mode">
-    🌙
-</button>
-
-<!-- Mobile Filter Toggle Button -->
-
-<button id="filterToggleBtn" class="filter-toggle-btn" onclick="toggleFiltersPanel()" aria-label="Toggle filters">
-    🔍 Filters
-</button>
-
-<div class="main-layout">
-    <header class="header-section">
-        <div id="head"><h1>Top GitHub Faces</h1></div>
-    </header>
-
-    <aside id="filtersAside" class="filters-aside">
-        <button id="filterCloseBtn" class="filter-close-btn" onclick="toggleFiltersPanel()" aria-label="Close filters">
-            ✕
-        </button>
-
-        <div class="filters-content">
-            <h2>🔍 Find Your Favorite Developer</h2>
-            <button id="randomUserBtn" class="btn-random">🎲 I'm Feeling Lucky</button>
-            
-            <div class="filters-section">
-                <div class="search-input-wrapper">
-                    <input type="text" id="searchInput" placeholder="Search by name, username, or location...">
-                    <span class="search-icon">🔎</span>
-                </div>
+    <!-- Dark Mode Toggle Button -->
+    <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode"></button>
 
-                <div class="filter-group">
-                    <label for="sortBy">Sort by:</label>
-                    <select id="sortBy">
-                        <option value="followers-desc">Most Followers</option>
-                        <option value="followers-asc">Least Followers</option>
-                        <option value="following-desc">Most Following</option>
-                        <option value="following-asc">Least Following</option>
-                        <option value="repos-desc">Most Repos</option>
-                        <option value="repos-asc">Least Repos</option>
-                        <option value="forks-desc">Most Forks</option>
-                        <option value="forks-asc">Least Forks</option>
-                        <option value="sponsors-desc">Most Public Sponsors</option>
-                        <option value="sponsors-asc">Least Public Sponsors</option>
-                        <option value="sponsoring-desc">Most Sponsoring</option>
-                        <option value="sponsoring-asc">Least Sponsoring</option>
-                        <option value="stars-desc">Most Stars</option>
-                        <option value="stars-asc">Least Stars</option>
-                        <option value="last-repo-desc">Recent Repo Activity</option>
-                        <option value="last-repo-asc">Oldest Repo Activity</option>
-                        <option value="last-commit-desc">Recent Public Commit</option>
-                        <option value="last-commit-asc">Oldest Public Commit</option>
-                        <option value="ratio-followers-following">Followers/Following Ratio</option>
-                        <option value="name-asc">Name (A-Z)</option>
-                        <option value="name-desc">Name (Z-A)</option>
-                    </select>
-                </div>
+    <!-- Mobile Filter Toggle Button -->
 
-                <div class="filter-group">
-                    <label for="followersFilter">Min Followers:</label>
-                    <select id="followersFilter">
-                        <option value="0">Any</option>
-                        <option value="1000">1K+</option>
-                        <option value="2000">2K+</option>
-                        <option value="5000">5K+</option>
-                        <option value="10000">10K+</option>
-                        <option value="25000">25K+</option>
-                        <option value="50000">50K+</option>
-                        <option value="100000">100K+</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label for="maxFollowersFilter">Max Followers:</label>
-                    <select id="maxFollowersFilter">
-                        <option value="999999999">Any</option>
-                        <option value="999">Less than 1K</option>
-                        <option value="1000">1K</option>
-                        <option value="2000">2K</option>
-                        <option value="5000">5K</option>
-                        <option value="10000">10K</option>
-                        <option value="25000">25K</option>
-                        <option value="50000">50K</option>
-                        <option value="100000">100K</option>
-                        <option value="500000">500K</option>
-                        <option value="1000000">1M</option>
-                    </select>
-                </div>
+    <button id="filterToggleBtn" class="filter-toggle-btn" onclick="toggleFiltersPanel()" aria-label="Toggle filters">
+        🔍 Filters
+    </button>
 
-                <div class="filter-group">
-                    <label for="minReposFilter">Min Repos:</label>
-                    <select id="minReposFilter">
-                        <option value="0">Any</option>
-                        <option value="10">10+</option>
-                        <option value="25">25+</option>
-                        <option value="50">50+</option>
-                        <option value="100">100+</option>
-                        <option value="250">250+</option>
-                        <option value="500">500+</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label for="maxReposFilter">Max Repos:</label>
-                    <select id="maxReposFilter">
-                        <option value="999999">Any</option>
-                        <option value="10">Less than 10</option>
-                        <option value="25">25</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="250">250</option>
-                        <option value="500">500</option>
-                        <option value="1000">1000</option>
-                    </select>
-                </div>
+    <div class="main-layout">
+        <header class="header-section">
+            <div id="head">
+                <h1>Top GitHub Faces</h1>
+            </div>
+        </header>
 
-                <div class="filter-group">
-                    <label for="minForksFilter">Min Forks:</label>
-                    <select id="minForksFilter">
-                        <option value="0">Any</option>
-                        <option value="10">10+</option>
-                        <option value="50">50+</option>
-                        <option value="100">100+</option>
-                        <option value="500">500+</option>
-                        <option value="1000">1000+</option>
-                        <option value="5000">5000+</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label for="maxForksFilter">Max Forks:</label>
-                    <select id="maxForksFilter">
-                        <option value="999999">Any</option>
-                        <option value="10">Less than 10</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="500">500</option>
-                        <option value="1000">1000</option>
-                        <option value="5000">5000</option>
-                    </select>
-                </div>
+        <aside id="filtersAside" class="filters-aside">
+            <button id="filterCloseBtn" class="filter-close-btn" onclick="toggleFiltersPanel()"
+                aria-label="Close filters">
+                ✕
+            </button>
 
-                <div class="filter-group">
-                    <label for="sponsorsFilter">Public Sponsors:</label>
-                    <select id="sponsorsFilter">
-                        <option value="any">Any</option>
-                        <option value="has-sponsors">Has Public Sponsors</option>
-                        <option value="min-1">1+</option>
-                        <option value="min-5">5+</option>
-                        <option value="min-10">10+</option>
-                        <option value="min-50">50+</option>
-                        <option value="min-100">100+</option>
-                    </select>
-                </div>
-                <div class="filter-group">
-                    <label for="sponsoringFilter">Sponsoring:</label>
-                    <select id="sponsoringFilter">
-                        <option value="any">Any</option>
-                        <option value="is-sponsoring">Is Sponsoring</option>
-                        <option value="min-1">1+</option>
-                        <option value="min-5">5+</option>
-                        <option value="min-10">10+</option>
-                        <option value="min-50">50+</option>
-                        <option value="min-100">100+</option>
-                    </select>
-                </div>
+            <div class="filters-content">
+                <h2>🔍 Find Your Favorite Developer</h2>
+                <button id="randomUserBtn" class="btn-random">🎲 I'm Feeling Lucky</button>
 
-                <div class="filter-group">
-                    <label for="avatarAgeFilter">Avatar Updated:</label>
-                    <select id="avatarAgeFilter">
-                        <option value="any">Any</option>
-                        <option value="week">This Week</option>
-                        <option value="month">This Month</option>
-                        <option value="6months">Last 6 Months</option>
-                        <option value="year">This Year</option>
-                        <option value="2years">Last 2 Years</option>
-                        <option value="5years">Less than 5 Years</option>
-                        <option value="old">Over 5 Years</option>
-                    </select>
-                </div>
+                <div class="filters-section">
+                    <div class="search-input-wrapper">
+                        <input type="text" id="searchInput" placeholder="Search by name, username, or location...">
+                        <span class="search-icon">🔎</span>
+                    </div>
 
-                <div class="filter-group">
-                    <label for="minStarsFilter">Min Stars (total):</label>
-                    <select id="minStarsFilter">
-                        <option value="0">Any</option>
-                        <option value="100">100+</option>
-                        <option value="1000">1K+</option>
-                        <option value="5000">5K+</option>
-                        <option value="10000">10K+</option>
-                        <option value="50000">50K+</option>
-                        <option value="100000">100K+</option>
-                    </select>
-                </div>
+                    <div class="filter-group">
+                        <label for="sortBy">Sort by:</label>
+                        <select id="sortBy">
+                            <option value="followers-desc">Most Followers</option>
+                            <option value="followers-asc">Least Followers</option>
+                            <option value="following-desc">Most Following</option>
+                            <option value="following-asc">Least Following</option>
+                            <option value="repos-desc">Most Repos</option>
+                            <option value="repos-asc">Least Repos</option>
+                            <option value="forks-desc">Most Forks</option>
+                            <option value="forks-asc">Least Forks</option>
+                            <option value="sponsors-desc">Most Public Sponsors</option>
+                            <option value="sponsors-asc">Least Public Sponsors</option>
+                            <option value="sponsoring-desc">Most Sponsoring</option>
+                            <option value="sponsoring-asc">Least Sponsoring</option>
+                            <option value="stars-desc">Most Stars</option>
+                            <option value="stars-asc">Least Stars</option>
+                            <option value="last-repo-desc">Recent Repo Activity</option>
+                            <option value="last-repo-asc">Oldest Repo Activity</option>
+                            <option value="last-commit-desc">Recent Public Commit</option>
+                            <option value="last-commit-asc">Oldest Public Commit</option>
+                            <option value="ratio-followers-following">Followers/Following Ratio</option>
+                            <option value="name-asc">Name (A-Z)</option>
+                            <option value="name-desc">Name (Z-A)</option>
+                        </select>
+                    </div>
 
-                <div class="filter-group">
-                    <label for="languageFilter">Language:</label>
-                    <div class="search-input-wrapper">
-                        <input type="text" id="languageFilter" placeholder="e.g. TypeScript">
+                    <div class="filter-group">
+                        <label for="followersFilter">Min Followers:</label>
+                        <select id="followersFilter">
+                            <option value="0">Any</option>
+                            <option value="1000">1K+</option>
+                            <option value="2000">2K+</option>
+                            <option value="5000">5K+</option>
+                            <option value="10000">10K+</option>
+                            <option value="25000">25K+</option>
+                            <option value="50000">50K+</option>
+                            <option value="100000">100K+</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label for="maxFollowersFilter">Max Followers:</label>
+                        <select id="maxFollowersFilter">
+                            <option value="999999999">Any</option>
+                            <option value="999">Less than 1K</option>
+                            <option value="1000">1K</option>
+                            <option value="2000">2K</option>
+                            <option value="5000">5K</option>
+                            <option value="10000">10K</option>
+                            <option value="25000">25K</option>
+                            <option value="50000">50K</option>
+                            <option value="100000">100K</option>
+                            <option value="500000">500K</option>
+                            <option value="1000000">1M</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="minReposFilter">Min Repos:</label>
+                        <select id="minReposFilter">
+                            <option value="0">Any</option>
+                            <option value="10">10+</option>
+                            <option value="25">25+</option>
+                            <option value="50">50+</option>
+                            <option value="100">100+</option>
+                            <option value="250">250+</option>
+                            <option value="500">500+</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label for="maxReposFilter">Max Repos:</label>
+                        <select id="maxReposFilter">
+                            <option value="999999">Any</option>
+                            <option value="10">Less than 10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                            <option value="250">250</option>
+                            <option value="500">500</option>
+                            <option value="1000">1000</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="minForksFilter">Min Forks:</label>
+                        <select id="minForksFilter">
+                            <option value="0">Any</option>
+                            <option value="10">10+</option>
+                            <option value="50">50+</option>
+                            <option value="100">100+</option>
+                            <option value="500">500+</option>
+                            <option value="1000">1000+</option>
+                            <option value="5000">5000+</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label for="maxForksFilter">Max Forks:</label>
+                        <select id="maxForksFilter">
+                            <option value="999999">Any</option>
+                            <option value="10">Less than 10</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                            <option value="500">500</option>
+                            <option value="1000">1000</option>
+                            <option value="5000">5000</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="sponsorsFilter">Public Sponsors:</label>
+                        <select id="sponsorsFilter">
+                            <option value="any">Any</option>
+                            <option value="has-sponsors">Has Public Sponsors</option>
+                            <option value="min-1">1+</option>
+                            <option value="min-5">5+</option>
+                            <option value="min-10">10+</option>
+                            <option value="min-50">50+</option>
+                            <option value="min-100">100+</option>
+                        </select>
+                    </div>
+                    <div class="filter-group">
+                        <label for="sponsoringFilter">Sponsoring:</label>
+                        <select id="sponsoringFilter">
+                            <option value="any">Any</option>
+                            <option value="is-sponsoring">Is Sponsoring</option>
+                            <option value="min-1">1+</option>
+                            <option value="min-5">5+</option>
+                            <option value="min-10">10+</option>
+                            <option value="min-50">50+</option>
+                            <option value="min-100">100+</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="avatarAgeFilter">Avatar Updated:</label>
+                        <select id="avatarAgeFilter">
+                            <option value="any">Any</option>
+                            <option value="week">This Week</option>
+                            <option value="month">This Month</option>
+                            <option value="6months">Last 6 Months</option>
+                            <option value="year">This Year</option>
+                            <option value="2years">Last 2 Years</option>
+                            <option value="5years">Less than 5 Years</option>
+                            <option value="old">Over 5 Years</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="minStarsFilter">Min Stars (total):</label>
+                        <select id="minStarsFilter">
+                            <option value="0">Any</option>
+                            <option value="100">100+</option>
+                            <option value="1000">1K+</option>
+                            <option value="5000">5K+</option>
+                            <option value="10000">10K+</option>
+                            <option value="50000">50K+</option>
+                            <option value="100000">100K+</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="languageFilter">Language:</label>
+                        <div class="search-input-wrapper">
+                            <input type="text" id="languageFilter" placeholder="e.g. TypeScript">
+                        </div>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="lastRepoActivityFilter">Last Repo Activity:</label>
+                        <select id="lastRepoActivityFilter">
+                            <option value="any">Any</option>
+                            <option value="week">This Week</option>
+                            <option value="month">This Month</option>
+                            <option value="6months">Last 6 Months</option>
+                            <option value="year">This Year</option>
+                            <option value="2years">Last 2 Years</option>
+                            <option value="5years">Less than 5 Years</option>
+                            <option value="old">Over 5 Years</option>
+                        </select>
+                    </div>
+
+                    <div class="filter-group">
+                        <label for="lastCommitFilter">Last Public Commit:</label>
+                        <select id="lastCommitFilter">
+                            <option value="any">Any</option>
+                            <option value="week">This Week</option>
+                            <option value="month">This Month</option>
+                            <option value="6months">Last 6 Months</option>
+                            <option value="year">This Year</option>
+                            <option value="2years">Last 2 Years</option>
+                            <option value="5years">Less than 5 Years</option>
+                            <option value="old">Over 5 Years</option>
+                        </select>
                     </div>
                 </div>
 
-                <div class="filter-group">
-                    <label for="lastRepoActivityFilter">Last Repo Activity:</label>
-                    <select id="lastRepoActivityFilter">
-                        <option value="any">Any</option>
-                        <option value="week">This Week</option>
-                        <option value="month">This Month</option>
-                        <option value="6months">Last 6 Months</option>
-                        <option value="year">This Year</option>
-                        <option value="2years">Last 2 Years</option>
-                        <option value="5years">Less than 5 Years</option>
-                        <option value="old">Over 5 Years</option>
-                    </select>
+                <div class="filters-buttons">
+                    <button class="btn-apply" onclick="toggleFiltersPanel()">Apply Filters</button>
+                    <button class="btn-reset" onclick="resetFilters()">Reset</button>
                 </div>
 
-                <div class="filter-group">
-                    <label for="lastCommitFilter">Last Public Commit:</label>
-                    <select id="lastCommitFilter">
-                        <option value="any">Any</option>
-                        <option value="week">This Week</option>
-                        <option value="month">This Month</option>
-                        <option value="6months">Last 6 Months</option>
-                        <option value="year">This Year</option>
-                        <option value="2years">Last 2 Years</option>
-                        <option value="5years">Less than 5 Years</option>
-                        <option value="old">Over 5 Years</option>
-                    </select>
+                <div class="results-info" id="loadingState" style="display: none;">
+                    <div class="loading-spinner"></div>
+                    <div>Loading developers...</div>
                 </div>
-            </div>
 
-            <div class="filters-buttons">
-                <button class="btn-apply" onclick="toggleFiltersPanel()">Apply Filters</button>
-                <button class="btn-reset" onclick="resetFilters()">Reset</button>
+                <div class="results-info" id="resultsInfo">
+                    <div id="resultsFound">
+                        Showing <strong id="visibleCount">0</strong> of <strong id="totalCount">0</strong> developers
+                    </div>
+                    <div id="noResults" style="display: none;">
+                        <strong>No developers found</strong> matching your filters.
+                    </div>
+                </div>
             </div>
+        </aside>
 
-            <div class="results-info" id="loadingState" style="display: none;">
+        <main class="main-content">
+            <div class="results-info-desktop" id="loadingStateDesktop" style="display: none;">
                 <div class="loading-spinner"></div>
                 <div>Loading developers...</div>
             </div>
 
-            <div class="results-info" id="resultsInfo">
-                <div id="resultsFound">
-                    Showing <strong id="visibleCount">0</strong> of <strong id="totalCount">0</strong> developers
+            <div class="results-info-desktop" id="resultsInfoDesktop">
+                <div id="resultsFoundDesktop">
+                    Showing <strong id="visibleCountDesktop">0</strong> of <strong id="totalCountDesktop">0</strong>
+                    developers
                 </div>
-                <div id="noResults" style="display: none;">
+                <div id="noResultsDesktop" style="display: none;">
                     <strong>No developers found</strong> matching your filters.
                 </div>
             </div>
-        </div>
-    </aside>
-
-    <main class="main-content">
-        <div class="results-info-desktop" id="loadingStateDesktop" style="display: none;">
-            <div class="loading-spinner"></div>
-            <div>Loading developers...</div>
-        </div>
-
-        <div class="results-info-desktop" id="resultsInfoDesktop">
-            <div id="resultsFoundDesktop">
-                Showing <strong id="visibleCountDesktop">0</strong> of <strong id="totalCountDesktop">0</strong> developers
-            </div>
-            <div id="noResultsDesktop" style="display: none;">
-                <strong>No developers found</strong> matching your filters.
-            </div>
-        </div>
-
-        <div class="grid" id="grid"></div>
-</main>
-</div>
-
-<footer>
-  <p>© 2025 <a href="https://github.com/john-bampton/john-bampton.github.io" target="_blank" rel="noopener noreferrer">John Bampton and Seyyed Ali Mohammadiyeh (Max Base)</a>. Licensed under the <a href="https://github.com/john-bampton/john-bampton.github.io/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT License</a>.</p>
-</footer>
-
-<script src="bootstrap/js/jquery.min.js"></script>
-<script src="bootstrap/js/popper.min.js"></script>
-<script src="bootstrap/js/bootstrap.min.js"></script>
-<script src="script.js"></script>
-
-<script>
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('service-worker.js')
-      .then(registration => {
-        console.log('✓ Service Worker registered:', registration);
-      })
-      .catch(error => {
-        console.warn('✗ Service Worker registration failed:', error);
-      });
-  });
-}
-</script>
+
+            <div class="grid" id="grid"></div>
+        </main>
+    </div>
+
+    <footer>
+        <p>© 2025 <a href="https://github.com/john-bampton/john-bampton.github.io" target="_blank"
+                rel="noopener noreferrer">John Bampton and Seyyed Ali Mohammadiyeh (Max Base)</a>. Licensed under the <a
+                href="https://github.com/john-bampton/john-bampton.github.io/blob/main/LICENSE" target="_blank"
+                rel="noopener noreferrer">MIT License</a>.</p>
+    </footer>
+
+    <script src="bootstrap/js/jquery.min.js"></script>
+    <script src="bootstrap/js/popper.min.js"></script>
+    <script src="bootstrap/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(registration => {
+                        console.log('✓ Service Worker registered:', registration);
+                    })
+                    .catch(error => {
+                        console.warn('✗ Service Worker registration failed:', error);
+                    });
+            });
+        }
+    </script>
 </body>
+
 </html>
\ No newline at end of file

From 8b81cd744e1cd8523147422056c7bd6570de5db0 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 18:42:34 +0530
Subject: [PATCH 07/14] Implement code review feedback for dark mode feature

Fixes and improvements based on Gemini Code Assist review:

HIGH PRIORITY - Bug Fix:
- Restore mobile loading state line in hideLoadingState()
  The loadingState (mobile) was being hidden but this line was missing,
  causing the loading indicator to remain visible on mobile devices after
  filtering. Now both mobile and desktop loading indicators are properly hidden.

MEDIUM - Clarity & Accessibility:
- Update initializeDarkMode() JSDoc comment
  Clarifies that the function reads theme state from DOM, not directly from
  localStorage. The preference is loaded by inline script in layout.html to
  prevent FOIT (Flash of Incorrect Theme).

- Add dynamic aria-label update in updateDarkModeIcon()
  The dark mode toggle button now updates its aria-label along with title
  and icon. Screen readers will now announce 'Switch to Light Mode' or
  'Switch to Dark Mode' as appropriate.

MEDIUM - Maintainability:
- Add CSS variables for dark mode accent colors
  Defined new variables: --dark-accent, --dark-accent-light, --dark-text-muted,
  --dark-text-subtle, --dark-text-secondary

- Replace hardcoded colors with variables in dark mode rules:
  * .activity-row: Use variables instead of #252525, #333, #ccc
  * .lang-pill: Use variable for text color instead of #ddd
  * .stat-label: Use variable for color instead of #888

This improves consistency and makes future theme adjustments easier.
---
 docs/script.js  |  7 +++++--
 docs/styles.css | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index 2f88540..746c45d 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -755,6 +755,7 @@ function hideLoadingState() {
     const loadingState = document.getElementById('loadingState');
     const loadingStateDesktop = document.getElementById('loadingStateDesktop');
 
+    if (loadingState) loadingState.style.display = 'none';
     if (loadingStateDesktop) loadingStateDesktop.style.display = 'none';
 }
 
@@ -763,7 +764,7 @@ function hideLoadingState() {
 // ============================================================================
 /**
  * Initialize dark mode functionality
- * - Load saved preference from localStorage
+ * - Reads current theme state from the DOM (loaded by inline script)
  * - Set up toggle button listener
  * - Update icon based on current theme state
  * - Cache DOM element for performance
@@ -796,7 +797,9 @@ function toggleDarkMode() {
  */
 function updateDarkModeIcon(isDarkMode) {
     if (darkModeToggleElement) {
+        const newLabel = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
         darkModeToggleElement.textContent = isDarkMode ? '☀️' : '🌙';
-        darkModeToggleElement.title = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+        darkModeToggleElement.title = newLabel;
+        darkModeToggleElement.setAttribute('aria-label', newLabel);
     }
 }
\ No newline at end of file
diff --git a/docs/styles.css b/docs/styles.css
index d7d03cc..5c1f267 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -718,6 +718,11 @@ html.dark-mode {
     --footer-border: #444;
     --link-color: #667eea;
     --link-hover: #764ba2;
+    --dark-accent: #252525;
+    --dark-accent-light: #333;
+    --dark-text-muted: #ccc;
+    --dark-text-subtle: #888;
+    --dark-text-secondary: #ddd;
 }
 
 html.dark-mode .filters-aside {
@@ -729,19 +734,19 @@ html.dark-mode .card:hover {
 }
 
 html.dark-mode .activity-row {
-    background: #252525;
-    border-color: #333;
-    color: #ccc;
+    background: var(--dark-accent);
+    border-color: var(--dark-accent-light);
+    color: var(--dark-text-muted);
 }
 
 html.dark-mode .lang-pill {
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
     border-color: rgba(102, 126, 234, 0.4);
-    color: #ddd;
+    color: var(--dark-text-secondary);
 }
 
 html.dark-mode .stat-label {
-    color: #888;
+    color: var(--dark-text-subtle);
 }
 
 html.dark-mode .btn-apply {

From 29b1eb0453793737e275c2e6b7b2d50f06112c1b Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 20:52:18 +0530
Subject: [PATCH 08/14] Refactor CSS variables for better consistency and
 maintainability

Implement feedback from code review to improve theming strategy:

CENTRALIZED VARIABLE DEFINITIONS:
- Define all theme variables in :root with light-mode values
- Only override variable values in html.dark-mode (not definitions)
- Creates single source of truth for all theme colors

NEW VARIABLES (in :root):
- --accent: #f7f8fb (light mode accent background)
- --accent-light: #eef0f5 (light mode accent border)
- --text-muted: #999 (light mode muted text)
- --text-subtle: #555 (light mode subtle text)
- --text-pill: #4a4a4a (light mode pill text)

LIGHT MODE REFACTORING:
- .stat-label: Use --text-muted instead of hardcoded #999
- .activity-row: Use --accent and --accent-light instead of #f7f8fb/#eef0f5
                 Use --text-subtle instead of #555
- .lang-pill: Use --text-pill instead of #4a4a4a

DARK MODE SIMPLIFICATION:
- Renamed --dark-accent to --accent (override in dark-mode)
- Renamed --dark-accent-light to --accent-light (override in dark-mode)
- Renamed --dark-text-muted to --text-muted (override in dark-mode)
- Renamed --dark-text-subtle to --text-subtle (override in dark-mode)
- Renamed --dark-text-secondary to --text-pill (override in dark-mode)

BENEFITS:
- Consistent variable naming across light and dark themes
- Easy to see all theme colors in one place (:root)
- Simpler to maintain and extend themes
- Clear separation between definitions (root) and overrides (dark-mode)
---
 docs/styles.css | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 5c1f267..4a45e95 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -18,6 +18,11 @@
     --footer-border: #e0e0e0;
     --link-color: #667eea;
     --link-hover: #764ba2;
+    --accent: #f7f8fb;
+    --accent-light: #eef0f5;
+    --text-muted: #999;
+    --text-subtle: #555;
+    --text-pill: #4a4a4a;
 }
 
 body {
@@ -469,7 +474,7 @@ h1 {
 .stat-label {
     display: block;
     font-size: 0.75rem;
-    color: #999;
+    color: var(--text-muted);
     margin-top: 2px;
 }
 
@@ -477,9 +482,9 @@ h1 {
     margin-top: 10px;
     padding: 8px;
     font-size: 0.8rem;
-    color: #555;
-    background: #f7f8fb;
-    border: 1px solid #eef0f5;
+    color: var(--text-subtle);
+    background: var(--accent);
+    border: 1px solid var(--accent-light);
     border-radius: 8px;
     line-height: 1.4;
 }
@@ -496,7 +501,7 @@ h1 {
     padding: 6px 10px;
     border-radius: 999px;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
-    color: #4a4a4a;
+    color: var(--text-pill);
     font-size: 0.8rem;
     border: 1px solid rgba(102, 126, 234, 0.25);
     white-space: nowrap;
@@ -718,11 +723,11 @@ html.dark-mode {
     --footer-border: #444;
     --link-color: #667eea;
     --link-hover: #764ba2;
-    --dark-accent: #252525;
-    --dark-accent-light: #333;
-    --dark-text-muted: #ccc;
-    --dark-text-subtle: #888;
-    --dark-text-secondary: #ddd;
+    --accent: #252525;
+    --accent-light: #333;
+    --text-muted: #ccc;
+    --text-subtle: #888;
+    --text-pill: #ddd;
 }
 
 html.dark-mode .filters-aside {
@@ -734,19 +739,19 @@ html.dark-mode .card:hover {
 }
 
 html.dark-mode .activity-row {
-    background: var(--dark-accent);
-    border-color: var(--dark-accent-light);
-    color: var(--dark-text-muted);
+    background: var(--accent);
+    border-color: var(--accent-light);
+    color: var(--text-muted);
 }
 
 html.dark-mode .lang-pill {
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
     border-color: rgba(102, 126, 234, 0.4);
-    color: var(--dark-text-secondary);
+    color: var(--text-pill);
 }
 
 html.dark-mode .stat-label {
-    color: var(--dark-text-subtle);
+    color: var(--text-muted);
 }
 
 html.dark-mode .btn-apply {

From 7d71e0b2fa2c19f82d826528692da599fce81b83 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 21:04:37 +0530
Subject: [PATCH 09/14] Address code review feedback: improve button
 consistency and accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Split dark mode reset button hover to use red (rgba(255, 80, 80, 0.5)) instead of purple for visual consistency with its danger/reset action
- Add default emoji content (🌙) to dark mode toggle button for better accessibility and graceful degradation if JavaScript fails
- Simplify aria-label to be consistent
---
 docs/styles.css     | 7 +++++--
 layouts/layout.html | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 4a45e95..85d2edc 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -706,9 +706,12 @@ footer {
         display: none;
     }
 }
+ {
+    background: var(--link-hover);
+}
 
-/* ============================================================================ */
-/* DARK MODE STYLES - USING CSS VARIABLES */
+html.dark-mode .btn-reset:hover {
+    background: rgba(255, 80, 80, 0.5VARIABLES */
 /* ============================================================================ */
 html.dark-mode {
     --bg-color: #1e1e1e;
diff --git a/layouts/layout.html b/layouts/layout.html
index c412bb8..233efe3 100644
--- a/layouts/layout.html
+++ b/layouts/layout.html
@@ -55,7 +55,7 @@
     </a>
 
     <!-- Dark Mode Toggle Button -->
-    <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode"></button>
+    <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode">🌙</button>
 
     <!-- Mobile Filter Toggle Button -->
 

From 88bfb0fa96d07b26ce64e3f1e8034f179ab30469 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 21:46:46 +0530
Subject: [PATCH 10/14] fix: remove invalid CSS syntax from dark mode styles

---
 docs/styles.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 85d2edc..497b66a 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -706,12 +706,7 @@ footer {
         display: none;
     }
 }
- {
-    background: var(--link-hover);
-}
 
-html.dark-mode .btn-reset:hover {
-    background: rgba(255, 80, 80, 0.5VARIABLES */
 /* ============================================================================ */
 html.dark-mode {
     --bg-color: #1e1e1e;

From f7e562f7ef7ac7baa6253fc8bd9b5c011fa95d14 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 22:16:12 +0530
Subject: [PATCH 11/14] Fix dark mode button hover consistency - use red shade
 for reset button

---
 docs/styles.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 04312ab..98dd78e 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -764,11 +764,14 @@ html.dark-mode .btn-reset {
     border: 1px solid rgba(255, 80, 80, 0.5);
 }
 
-html.dark-mode .btn-apply:hover,
-html.dark-mode .btn-reset:hover {
+html.dark-mode .btn-apply:hover {
     background: var(--link-hover);
 }
 
+html.dark-mode .btn-reset:hover {
+    background: rgba(255, 80, 80, 0.5);
+}
+
 /* Ensure images have slight opacity reduction in dark mode for comfort */
 html.dark-mode .card img {
     opacity: 0.9;

From 73f88bb1e9b350a88ec3b022bb5b5f74914f904e Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Thu, 18 Dec 2025 22:23:06 +0530
Subject: [PATCH 12/14] fix: unset top property for dark mode toggle on mobile
 view

---
 docs/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/styles.css b/docs/styles.css
index 98dd78e..1b1cbd5 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -812,6 +812,7 @@ html.dark-mode .card:hover img {
 /* Adjust position for mobile if needed */
 @media (max-width: 767px) {
     .dark-mode-toggle {
+        top: unset;
         bottom: 80px;
         /* Above the filter toggle button */
         width: 45px;

From 86c93331605fdb50d9ec775ef4b37da8baf0d051 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Mon, 22 Dec 2025 20:52:25 +0530
Subject: [PATCH 13/14] fix: move dark mode toggle from top-right to
 bottom-right to avoid fork ribbon overlap

---
 docs/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/styles.css b/docs/styles.css
index 1b1cbd5..e4f2c36 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -786,7 +786,7 @@ html.dark-mode .card:hover img {
 /* Dark Mode Toggle Button */
 .dark-mode-toggle {
     position: fixed;
-    top: 20px;
+    bottom: 20px;
     right: 20px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border: none;
@@ -812,9 +812,9 @@ html.dark-mode .card:hover img {
 /* Adjust position for mobile if needed */
 @media (max-width: 767px) {
     .dark-mode-toggle {
-        top: unset;
         bottom: 80px;
         /* Above the filter toggle button */
+        right: 20px;
         width: 45px;
         height: 45px;
         font-size: 18px;

From c4ec293bdc5e24cabd977834eb5f743252abf6b6 Mon Sep 17 00:00:00 2001
From: Subham Sangwan <subhamsangwan26@gmail.com>
Date: Fri, 26 Dec 2025 13:59:47 +0530
Subject: [PATCH 14/14] Merge upstream/main into feat/dark-mode-toggle: Resolve
 conflicts

---
 docs/script.js  |  10 +-
 docs/styles.css | 246 ------------------------------------------------
 2 files changed, 2 insertions(+), 254 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index 8784d47..7c0391c 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -997,9 +997,10 @@ function hideLoadingState() {
   const resultsInfo = document.getElementById('resultsInfo');
   const resultsInfoDesktop = document.getElementById('resultsInfoDesktop');
 
-<<<<<<< HEAD
     if (loadingState) loadingState.style.display = 'none';
     if (loadingStateDesktop) loadingStateDesktop.style.display = 'none';
+    if (resultsInfo) resultsInfo.style.display = 'block';
+    if (resultsInfoDesktop) resultsInfoDesktop.style.display = 'block';
 }
 
 // ============================================================================
@@ -1046,10 +1047,3 @@ function updateDarkModeIcon(isDarkMode) {
         darkModeToggleElement.setAttribute('aria-label', newLabel);
     }
 }
-=======
-  if (loadingState) loadingState.style.display = 'none';
-  if (loadingStateDesktop) loadingStateDesktop.style.display = 'none';
-  if (resultsInfo) resultsInfo.style.display = 'block';
-  if (resultsInfoDesktop) resultsInfoDesktop.style.display = 'block';
-}
->>>>>>> upstream/main
diff --git a/docs/styles.css b/docs/styles.css
index bf66095..f6a7560 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -105,7 +105,6 @@ h1 {
 }
 
 .filter-close-btn {
-<<<<<<< HEAD
     display: none;
     position: absolute;
     top: 15px;
@@ -139,41 +138,6 @@ h1 {
     grid-row: 2;
     margin-top: 0;
     align-self: start;
-=======
-  display: none;
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: rgba(0, 0, 0, 0.1);
-  border: none;
-  color: white;
-  font-size: 28px;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.3s;
-}
-
-.filter-close-btn:hover {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.filters-aside {
-  z-index: 1000000;
-  position: sticky;
-  top: 0;
-  width: auto;
-  max-width: 350px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 30px 20px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-  grid-column: 1;
-  grid-row: 2;
-  margin-top: 0;
-  align-self: start;
->>>>>>> upstream/main
 }
 
 .filters-content {
@@ -205,32 +169,18 @@ h1 {
 
 #languageFilter,
 #searchInput {
-<<<<<<< HEAD
     width: 100%;
     padding: 12px 40px 12px 15px;
     border: none;
     border-radius: 8px;
     font-size: 14px;
     transition: all 0.3s;
-=======
-  width: 100%;
-  padding: 12px 40px 12px 15px;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  transition: all 0.3s;
->>>>>>> upstream/main
 }
 
 #languageFilter:focus,
 #searchInput:focus {
-<<<<<<< HEAD
     outline: none;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-=======
-  outline: none;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
->>>>>>> upstream/main
 }
 
 .search-icon {
@@ -277,32 +227,12 @@ h1 {
 }
 
 .filter-group select:hover {
-<<<<<<< HEAD
     box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
 }
 
 .filter-group select:focus {
     outline: none;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-=======
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-}
-
-.filter-group select:focus {
-  outline: none;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
-}
-
-.growth-indicator {
-  margin-top: 8px;
-  padding: 6px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #27ae60; /* Green for positive growth */
-  background-color: #e9f7ef;
-  border-radius: 6px;
-  border: 1px solid #a7d7c5;
->>>>>>> upstream/main
 }
 
 .filters-buttons {
@@ -313,7 +243,6 @@ h1 {
 }
 
 .btn-reset {
-<<<<<<< HEAD
     padding: 10px 24px;
     background: rgba(255, 100, 100, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.5);
@@ -338,32 +267,6 @@ h1 {
     cursor: pointer;
     font-weight: 500;
     transition: all 0.3s;
-=======
-  padding: 10px 24px;
-  background: rgba(255, 100, 100, 0.2);
-  border: 2px solid rgba(255, 255, 255, 0.5);
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s;
-}
-
-.btn-reset:hover {
-  background: rgba(255, 100, 100, 0.4);
-  border-color: white;
-}
-
-.btn-apply {
-  padding: 10px 24px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 2px solid white;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s;
->>>>>>> upstream/main
 }
 
 .btn-apply:hover {
@@ -389,7 +292,6 @@ h1 {
 }
 
 .btn-random {
-<<<<<<< HEAD
     width: 100%;
     padding: 12px;
     background: #ff9f43;
@@ -405,23 +307,6 @@ h1 {
     justify-content: center;
     gap: 8px;
     font-size: 1rem;
-=======
-  width: 100%;
-  padding: 12px;
-  background: #ff9f43;
-  border: 2px solid rgba(255, 255, 255, 0.5);
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 600;
-  transition: all 0.3s;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 1rem;
->>>>>>> upstream/main
 }
 
 .btn-random:hover {
@@ -474,15 +359,9 @@ h1 {
 }
 
 @keyframes spin {
-<<<<<<< HEAD
     to {
         transform: rotate(360deg);
     }
-=======
-  to {
-    transform: rotate(360deg);
-  }
->>>>>>> upstream/main
 }
 
 #loadingState,
@@ -528,7 +407,6 @@ h1 {
 /* CARDS */
 /* ============================================================================ */
 .card {
-<<<<<<< HEAD
     position: relative;
     width: 220px;
     border-radius: 12px;
@@ -537,18 +415,6 @@ h1 {
     background: var(--card-bg);
     transition: transform 0.3s, box-shadow 0.3s;
     display: none;
-=======
-  position: relative;
-  width: 220px;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-  background: #fff;
-  transition:
-    transform 0.3s,
-    box-shadow 0.3s;
-  display: none;
->>>>>>> upstream/main
 }
 
 .card.visible {
@@ -556,7 +422,6 @@ h1 {
 }
 
 .card:hover {
-<<<<<<< HEAD
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
 }
@@ -579,30 +444,6 @@ h1 {
     100% {
         transform: scale(1);
     }
-=======
-  transform: translateY(-5px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
-}
-
-.card.highlight {
-  animation: pulse-highlight 2s ease-in-out;
-  box-shadow:
-    0 0 0 4px #ff9f43,
-    0 10px 20px rgba(0, 0, 0, 0.25);
-  z-index: 10;
-}
-
-@keyframes pulse-highlight {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
->>>>>>> upstream/main
 }
 
 .card img {
@@ -616,7 +457,6 @@ h1 {
 }
 
 .details-box strong {
-<<<<<<< HEAD
     display: block;
     font-size: 1.1rem;
     color: var(--text-color);
@@ -636,27 +476,6 @@ h1 {
     padding-top: 8px;
     border-top: 1px solid var(--card-border);
     font-size: 0.85rem;
-=======
-  display: block;
-  font-size: 1.1rem;
-  color: #222;
-}
-
-.details-box span {
-  display: block;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.stats-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #eee;
-  font-size: 0.85rem;
->>>>>>> upstream/main
 }
 
 .stat {
@@ -665,7 +484,6 @@ h1 {
 }
 
 .stat a {
-<<<<<<< HEAD
     color: var(--link-color);
     text-decoration: none;
     font-weight: 600;
@@ -693,35 +511,6 @@ h1 {
     border: 1px solid var(--accent-light);
     border-radius: 8px;
     line-height: 1.4;
-=======
-  color: #667eea;
-  text-decoration: none;
-  font-weight: 600;
-  transition: color 0.2s;
-}
-
-.stat a:hover {
-  color: #764ba2;
-  text-decoration: underline;
-}
-
-.stat-label {
-  display: block;
-  font-size: 0.75rem;
-  color: #999;
-  margin-top: 2px;
-}
-
-.activity-row {
-  margin-top: 10px;
-  padding: 8px;
-  font-size: 0.8rem;
-  color: #555;
-  background: #f7f8fb;
-  border: 1px solid #eef0f5;
-  border-radius: 8px;
-  line-height: 1.4;
->>>>>>> upstream/main
 }
 
 .lang-row {
@@ -733,7 +522,6 @@ h1 {
 }
 
 .lang-pill {
-<<<<<<< HEAD
     padding: 6px 10px;
     border-radius: 999px;
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
@@ -741,19 +529,6 @@ h1 {
     font-size: 0.8rem;
     border: 1px solid rgba(102, 126, 234, 0.25);
     white-space: nowrap;
-=======
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: linear-gradient(
-    135deg,
-    rgba(102, 126, 234, 0.12),
-    rgba(118, 75, 162, 0.12)
-  );
-  color: #4a4a4a;
-  font-size: 0.8rem;
-  border: 1px solid rgba(102, 126, 234, 0.25);
-  white-space: nowrap;
->>>>>>> upstream/main
 }
 
 /* ============================================================================ */
@@ -1100,7 +875,6 @@ html.dark-mode .card:hover img {
 }
 
 @keyframes toastFadeIn {
-<<<<<<< HEAD
     from {
         opacity: 0;
         transform: translate(-50%, -60%);
@@ -1110,16 +884,6 @@ html.dark-mode .card:hover img {
         opacity: 1;
         transform: translate(-50%, -50%);
     }
-=======
-  from {
-    opacity: 0;
-    transform: translate(-50%, -60%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
->>>>>>> upstream/main
 }
 
 @media (max-width: 768px) {
@@ -1132,7 +896,6 @@ html.dark-mode .card:hover img {
 }
 
 @media (max-width: 480px) {
-<<<<<<< HEAD
     .toast-notification {
         padding: 14px 20px;
         font-size: 15px;
@@ -1140,12 +903,3 @@ html.dark-mode .card:hover img {
         max-width: 80%;
     }
 }
-=======
-  .toast-notification {
-    padding: 14px 20px;
-    font-size: 15px;
-    border-radius: 8px;
-    max-width: 80%;
-  }
-}
->>>>>>> upstream/main