Merge pull request #985 from jayadarshinig0609/feature-jd-codes

enhanced features

progressbarvisibility.css

@@ -0,0 +1,15 @@
+#progressBarContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: rgba(0,0,0,0.1);
+  }
+  #progressBar {
+    width: 0;
+    height: 4px;
+    background-color: #0366d6;
+    transition: width 0.25s ease-out;
+  }
+

searchsuggestions.html

@@ -0,0 +1,41 @@
+<input type="search" id="search-input" placeholder="Search tools...">
+<ul id="suggestions"></ul>
+
+<script>
+  const searchInput = document.getElementById('search-input');
+  const suggestionsList = document.getElementById('suggestions');
+
+  const suggestions = ['GitHub', 'VS Code', 'Trello', 'Debuggy', 'RescueTime', 'OWASP ZAP'];
+
+  searchInput.addEventListener('input', () => {
+    const value = searchInput.value.toLowerCase();
+    suggestionsList.innerHTML = '';
+    const filteredSuggestions = suggestions.filter(suggestion => suggestion.toLowerCase().includes(value));
+    filteredSuggestions.forEach(suggestion => {
+      const li = document.createElement('li');
+      li.textContent = suggestion;
+      suggestionsList.appendChild(li);
+    });
+  });
+</script>
+
+<style>
+  #suggestions {
+    list-style: none;
+    padding: 0;
+    position: absolute;
+    background-color: white;
+    width: 100%;
+    max-width: 600px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  #suggestions li {
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  #suggestions li:hover {
+    background-color: #f0f2f5;
+  }
+</style>

toolsforsmallerscreen.css

@@ -0,0 +1,6 @@
+@media (max-width: 768px) {
+  .tool-listing {
+    width: 100%;
+    margin: 0 auto;
+  }
+}