From b0235e3fd7be61a039232f68ccaf83b16bec0e9e Mon Sep 17 00:00:00 2001
From: Peter Wood <peter@peterwood.dev>
Date: Wed, 23 Apr 2025 07:44:24 -0400
Subject: [PATCH] feat: implement voice search overlay with microphone icon

---
 index.html |  1 +
 index.js   | 11 +++++++++++
 style.css  | 16 ++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/index.html b/index.html
index b7e83d9..f417a9d 100644
--- a/index.html
+++ b/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
diff --git a/index.js b/index.js
index a99f893..b47bd86 100644
--- a/index.js
+++ b/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;
diff --git a/style.css b/style.css
index 4886962..15d7908 100644
--- a/style.css
+++ b/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;