Spaces:
Running
Running
Make everything actually work make different pages forward login of the movie player everything makes it actually work Make a dashboard where I can upload my own songs to the website
92e28a6 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Search | Groovy Tunes Explorer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #121212; | |
| color: #ffffff; | |
| } | |
| .search-tab.active { | |
| border-bottom: 2px solid #1DB954; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation (same as index.html) --> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="mb-8"> | |
| <div class="relative max-w-2xl mx-auto"> | |
| <input type="text" placeholder="What do you want to listen to?" class="w-full px-6 py-4 rounded-full bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 text-lg"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-green-500 hover:bg-green-600 p-3 rounded-full"> | |
| <i data-feather="search" class="h-6 w-6 text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-700 mb-8"> | |
| <div class="flex space-x-8"> | |
| <button class="search-tab active pb-4 font-medium">All</button> | |
| <button class="search-tab pb-4 text-gray-400 hover:text-white">Tracks</button> | |
| <button class="search-tab pb-4 text-gray-400 hover:text-white">Artists</button> | |
| <button class="search-tab pb-4 text-gray-400 hover:text-white">Albums</button> | |
| <button class="search-tab pb-4 text-gray-400 hover:text-white">Playlists</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Search results would be displayed here --> | |
| <div class="bg-gray-800 bg-opacity-60 rounded-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4">Start searching</h3> | |
| <p class="text-gray-400">Find your favorite songs, artists, albums, and playlists by typing in the search bar above.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Bar (same as index.html) --> | |
| <script> | |
| feather.replace(); | |
| // Tab switching | |
| document.querySelectorAll('.search-tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelector('.search-tab.active').classList.remove('active'); | |
| this.classList.add('active'); | |
| // In a real app, you would update search results here | |
| }); | |
| }); | |
| // Search functionality would go here | |
| </script> | |
| </body> | |
| </html> |