chore: update dependencies and add new features

- Added Font Awesome and Annyang for enhanced UI and voice recognition capabilities.
- Updated package.json to include new dependencies: @fortawesome/fontawesome-free, annyang, and wrangler.
- Modified postcss.config.js for proper syntax.
- Updated style.css to include Font Awesome styles and added new styles for voice search button and footer.
- Adjusted tailwind.config.js to scan all relevant files for dynamic classes.
- Added VSCode settings to ignore unknown at-rules in CSS, SCSS, and LESS.
- Created a Caddyfile for server configuration with basic settings.

index.html

@@ -19,31 +19,22 @@
       <div class="flex flex-col sm:flex-row gap-4 mb-6">
         <!-- Wrap input and voice button -->
         <div class="relative flex-grow">
+          <!-- Search Icon -->
+          <i
+            class="fas fa-search absolute inset-y-0 left-3 flex items-center text-gray-500"
+          ></i>
           <input
             type="text"
             id="pokemonName"
-            placeholder="Enter Pokémon name or use mic"
-            class="w-full px-4 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200"
+            placeholder="Enter Pokémon name"
+            class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-200"
           />
-          <!-- Microphone Button -->
+          <!-- Microphone Icon -->
           <button
             id="voiceSearchButton"
-            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-600 focus:outline-none"
+            class="absolute inset-y-0 right-3 flex items-center text-gray-500 hover:text-blue-600 focus:outline-none"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-5 h-5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1-6 0v8.25a3 3 0 0 1-3 3Z"
-              />
-            </svg>
+            <i class="fas fa-microphone"></i>
           </button>
         </div>
         <button
@@ -53,21 +44,44 @@
           Search
         </button>
       </div>
-      <div id="pokemonInfo" class="mt-6 text-center text-gray-700">
-        <!-- Pokémon info will be displayed here -->
-      </div>
+      <div id="pokemonInfo" class="mt-6 text-center text-gray-700"></div>
 
-      <!-- History Section - Removed h3 and border -->
+      <!-- History Section -->
       <div id="searchHistory" class="mt-8 pt-4">
         <ul id="historyList" class="list-none space-y-4">
-          <!-- History items (full cards) will be added here -->
-          <li class="italic text-sm text-center text-gray-600">
-            No history yet.
-          </li>
+          <li class="italic text-sm text-center text-gray-600"></li>
         </ul>
       </div>
     </div>
 
+    <!-- Voice Overlay -->
+    <div
+      id="voiceOverlay"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"
+    >
+      <i class="fas fa-microphone text-white text-6xl"></i>
+    </div>
+
+    <!-- Footer -->
+    <footer
+      class="mt-8 text-center text-gray-600 flex items-center justify-center gap-4"
+    >
+      <p>Made with ❤️ by Daddy.</p>
+      <a
+        href="https://github.com/acedanger/pokemon"
+        target="_blank"
+        class="text-blue-600 hover:text-blue-800"
+      >
+        <i class="fab fa-github w-6 h-6"></i>
+      </a>
+      <button
+        id="themeToggleButton"
+        class="flex items-center justify-center text-gray-600 hover:text-gray-800 focus:outline-none"
+      >
+        <i id="themeIcon" class="fas fa-moon w-6 h-6"></i>
+      </button>
+    </footer>
+
     <script type="module" src="/index.js"></script>
   </body>
 </html>