Search bar and adjust contrast

src/main/resources/static/js/homecard.js

@@ -1,3 +1,24 @@
+function filterCards() {
+    var input = document.getElementById('searchBar');
+    var filter = input.value.toUpperCase();
+    var cards = document.querySelectorAll('.feature-card');
+
+    for (var i = 0; i < cards.length; i++) {
+        var card = cards[i];
+        var title = card.querySelector('h5.card-title').innerText;
+        var text = card.querySelector('p.card-text').innerText;
+        var tags = card.getAttribute('data-tags');
+        var content = title + ' ' + text + ' ' + tags;
+
+        if (content.toUpperCase().indexOf(filter) > -1) {
+            card.style.display = "";
+        } else {
+            card.style.display = "none";
+        }
+    }
+}
+
+
 function toggleFavorite(element) {
 	var img = element.querySelector('img');
 	var card = element.closest('.feature-card');
@@ -13,6 +34,7 @@ function toggleFavorite(element) {
 	}
 	reorderCards();
 	updateFavoritesDropdown();
+	filterCards();
 }
 
 function reorderCards() {
@@ -45,5 +67,7 @@ function initializeCards() {
 	});
 	reorderCards();
 	updateFavoritesDropdown();
+	filterCards();
 }
+
 window.onload = initializeCards;

src/main/resources/static/js/search.js

@@ -0,0 +1,72 @@
+// Toggle search bar when the search icon is clicked
+document.querySelector('#search-icon').addEventListener('click', function(e) {
+	e.preventDefault();
+	var searchBar = document.querySelector('#navbarSearch');
+	searchBar.classList.toggle('show');
+});
+window.onload = function() {
+    var items = document.querySelectorAll('.dropdown-item, .nav-link');
+    var dummyContainer = document.createElement('div');
+    dummyContainer.style.position = 'absolute';
+    dummyContainer.style.visibility = 'hidden';
+    dummyContainer.style.whiteSpace = 'nowrap';  // Ensure we measure full width
+    document.body.appendChild(dummyContainer);
+
+    var maxWidth = 0;
+
+    items.forEach(function(item) {
+        var clone = item.cloneNode(true);
+        dummyContainer.appendChild(clone);
+        var width = clone.offsetWidth;
+        if (width > maxWidth) {
+            maxWidth = width;
+        }
+        dummyContainer.removeChild(clone);
+    });
+
+    document.body.removeChild(dummyContainer);
+
+    // Store max width for later use
+    window.navItemMaxWidth = maxWidth;
+};
+
+// Show search results as user types in search box
+document.querySelector('#navbarSearchInput').addEventListener('input', function(e) {
+    var searchText = e.target.value.toLowerCase();
+    var items = document.querySelectorAll('.dropdown-item, .nav-link');
+    var resultsBox = document.querySelector('#searchResults');
+
+    // Clear any previous results
+    resultsBox.innerHTML = '';
+
+    items.forEach(function(item) {
+        var titleElement = item.querySelector('.icon-text');
+        var iconElement = item.querySelector('.icon');
+        var itemHref = item.getAttribute('href');
+        if (titleElement && iconElement && itemHref !== '#') {
+            var title = titleElement.innerText.toLowerCase();
+            if (title.indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
+                var result = document.createElement('a');
+                result.href = itemHref;
+                result.classList.add('dropdown-item');
+
+                var resultIcon = document.createElement('img');
+                resultIcon.src = iconElement.src;
+                resultIcon.alt = 'icon';
+                resultIcon.classList.add('icon');
+                result.appendChild(resultIcon);
+
+                var resultText = document.createElement('span');
+                resultText.textContent = title;
+                resultText.classList.add('icon-text');
+                result.appendChild(resultText);
+
+                resultsBox.appendChild(result);
+            }
+        }
+    });
+
+    // Set the width of the search results box to the maximum width
+    resultsBox.style.width = window.navItemMaxWidth + 'px';
+});
+