feat: implement voice search overlay with microphone icon

index.html

@@ -61,6 +61,7 @@
     >
       <i class="fas fa-microphone text-white text-6xl"></i>
     </div>
+    <!-- The overlay is hidden by default and is shown when the microphone button is clicked. -->
 
     <!-- Footer -->
     <footer

index.js

@@ -177,6 +177,17 @@ pokemonNameInput.addEventListener("keypress", (event) => {
   }
 });
 
+// Show a dimmed overlay with a large microphone icon when the voice search button is clicked
+voiceSearchButton.addEventListener("click", () => {
+  const voiceOverlay = document.getElementById("voiceOverlay");
+  voiceOverlay.classList.remove("hidden");
+
+  // Simulate listening for 3 seconds, then hide the overlay
+  setTimeout(() => {
+    voiceOverlay.classList.add("hidden");
+  }, 3000);
+});
+
 const SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition;

style.css

@@ -62,6 +62,22 @@ body {
   color: #2563eb; /* Matches hover:text-blue-600 */
 }
 
+/* Styling for the voice overlay that dims the page and displays a large microphone icon */
+#voiceOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50; /* Ensure it appears above other elements */
+}
+
+#voiceOverlay i {
+  color: white;
+  font-size: 6rem; /* Large microphone icon */
+}
+
 footer {
   position: fixed;
   bottom: 0;