mirror of
https://github.com/acedanger/pokemon.git
synced 2025-12-05 22:50:13 -08:00
0f6cfe3d6c
- 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.
88 lines
2.9 KiB
HTML
88 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Pokémon Finder</title>
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body
|
|
class="bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 min-h-screen flex items-center justify-center p-4"
|
|
>
|
|
<div
|
|
class="bg-white bg-opacity-90 rounded-lg shadow-xl p-6 md:p-10 w-full max-w-md"
|
|
>
|
|
<h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-6">
|
|
Find Your Pokémon!
|
|
</h1>
|
|
<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"
|
|
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 Icon -->
|
|
<button
|
|
id="voiceSearchButton"
|
|
class="absolute inset-y-0 right-3 flex items-center text-gray-500 hover:text-blue-600 focus:outline-none"
|
|
>
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
</div>
|
|
<button
|
|
id="searchButton"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-200 shadow-md"
|
|
>
|
|
Search
|
|
</button>
|
|
</div>
|
|
<div id="pokemonInfo" class="mt-6 text-center text-gray-700"></div>
|
|
|
|
<!-- History Section -->
|
|
<div id="searchHistory" class="mt-8 pt-4">
|
|
<ul id="historyList" class="list-none space-y-4">
|
|
<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>
|