Marco Cotrufo
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <header class="bg-white shadow-lg p-4 flex justify-between items-center"> <div class="flex items-center space-x-4"> <i class="iconoir-gamepad text-2xl"></i> <span class="font-bold text-xl">ROM Finder</span> </div> <div class="flex items-center space-x-4"> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-search text-2xl"></i> </button> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-user text-2xl"></i> </button> </div> </header> <main class="flex-1 flex flex-col p-4"> <section class="bg-white shadow-lg rounded-lg p-6 mb-4"> <h2 class="text-xl font-bold mb-4">Search Roms</h2> <form class="flex flex-col space-y-4"> <div> <label for="keyword" class="block text-gray-700 mb-2">Keyword</label> <input type="text" id="keyword" class="w-full p-2 border rounded" placeholder="Enter keyword"> </div> <div> <label for="platform" class="block text-gray-700 mb-2">Platform</label> <select id="platform" class="w-full p-2 border rounded"> <option value="">Select Platform</option> <option value="gba">Game Boy Advance</option> <option value="snes">Super Nintendo</option> <option value="nes">Nintendo Entertainment System</option> <option value="genesis">Sega Genesis</option> </select> </div> <button type="submit" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Search</button> </form> </section> <section class="bg-white shadow-lg rounded-lg p-6 mb-4 flex-1 overflow-y-auto"> <h2 class="text-xl font-bold mb-4">Available Roms</h2> <table class="min-w-full bg-white"> <thead> <tr class="w-full bg-gray-200 text-gray-700"> <th class="py-2 px-4 border-b">Game Title</th> <th class="py-2 px-4 border-b">Platform</th> <th class="py-2 px-4 border-b">Action</th> </tr> </thead> <tbody> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Super Mario World</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">The Legend of Zelda: A Link to the Past</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Pokemon FireRed</td> <td class="py-2 px-4 border-b">GBA</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Donkey Kong Country</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Final Fantasy VI</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Chrono Trigger</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Metroid Fusion</td> <td class="py-2 px-4 border-b">GBA</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Castlevania: Aria of Sorrow</td> <td class="py-2 px-4 border-b">GBA</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">Super Metroid</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> <tr class="hover:bg-gray-100"> <td class="py-2 px-4 border-b">EarthBound</td> <td class="py-2 px-4 border-b">SNES</td> <td class="py-2 px-4 border-b"> <button class="bg-green-500 text-white p-2 rounded hover:bg-green-400"> <i class="iconoir-download text-xl"></i> </button> </td> </tr> </tbody> </table> <div class="flex justify-between items-center mt-4"> <button class="bg-gray-300 text-gray-700 p-2 rounded hover:bg-gray-400">Previous</button> <span class="text-gray-700">Page 1 of 5</span> <button class="bg-gray-300 text-gray-700 p-2 rounded hover:bg-gray-400">Next</button> </div> </section> <section class="bg-white shadow-lg rounded-lg p-6"> <h2 class="text-xl font-bold mb-4">Download Queue</h2> <ul class="space-y-4"> <li class="flex justify-between items-center p-4 border-b"> <div> <p class="font-bold">Super Mario World</p> <p class="text-sm text-gray-600">Status: Downloading...</p> </div> <div class="flex items-center space-x-2"> <span class="text-sm">50%</span> <div class="w-32 bg-gray-200 rounded-full"> <div class="bg-blue-500 h-2 rounded-full" style="width: 50%;"></div> </div> </div> </li> <li class="flex justify-between items-center p-4 border-b"> <div> <p class="font-bold">Pokemon FireRed</p> <p class="text-sm text-gray-600">Status: Queued</p> </div> <div class="flex items-center space-x-2"> <span class="text-sm">0%</span> <div class="w-32 bg-gray-200 rounded-full"> <div class="bg-blue-500 h-2 rounded-full" style="width: 0%;"></div> </div> </div> </li> </ul> </section> </main> </body>
v
v
v