From 72b210130f6ca9d5c3d421d2cbe89036aa6578a0 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 11 Sep 2025 17:56:10 +0000 Subject: [PATCH] Fixes an issue where search results would not appear, resulting in a "black screen". The root cause was that dynamically generated search result cards were not being correctly processed by the IntersectionObserver responsible for triggering their fade-in animation. This left the cards with an opacity of 0, making them invisible. This commit resolves the issue by: 1. Manually adding the `.visible` class to the new search result cards in `js/search.js` to ensure they become visible. 2. Removing the old search result header before adding a new one to prevent duplicates. 3. Fixing a minor CSS typo in `css/style.css` where an ID selector was used instead of a class selector. --- css/style.css | 2 +- js/search.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 0e7e722..d94911f 100644 --- a/css/style.css +++ b/css/style.css @@ -514,7 +514,7 @@ a:hover { box-shadow: var(--shadow-cyber); overflow: hidden; } -#toolsGrid p { +.tools-grid p { color: var(--primary-text); } diff --git a/js/search.js b/js/search.js index 7a31387..a17b833 100644 --- a/js/search.js +++ b/js/search.js @@ -547,6 +547,21 @@ class AdvancedSearch { toolsGrid.innerHTML = toolCards; + // Manually trigger the animation for the new cards since they are dynamically added + const newToolCards = toolsGrid.querySelectorAll('.tool-card'); + newToolCards.forEach(card => { + // A small delay to ensure the browser registers the elements before adding the class + setTimeout(() => { + card.classList.add('visible'); + }, 10); + }); + + // Remove existing search header to prevent duplicates + const existingHeader = document.querySelector('.search-results-header'); + if (existingHeader) { + existingHeader.remove(); + } + // Add search results header const searchHeader = `