Spaces:
Running
Running
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Melodify - Search</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8A2BE2', | |
| secondary: '#1E1E2F', | |
| accent: '#2D2D44', | |
| dark: '#0F0F1A', | |
| light: '#F5F5F5' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%); | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .scroll-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #8A2BE2, #FF6B6B); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .search-result:hover { | |
| background: rgba(138, 43, 226, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-light"> | |
| <!-- Main Container --> | |
| <div class="flex flex-col h-screen max-w-md mx-auto bg-dark"> | |
| <!-- Header --> | |
| <header class="p-4 flex justify-between items-center border-b border-accent"> | |
| <div class="flex items-center"> | |
| <a href="index.html"> | |
| <i data-feather="arrow-left" class="mr-4 text-light"></i> | |
| </a> | |
| <h1 class="text-xl font-bold gradient-text">Search</h1> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="mic" class="text-light"></i> | |
| </div> | |
| </header> | |
| <!-- Search Bar --> | |
| <div class="p-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Artists, songs, or albums" class="w-full p-3 pl-10 rounded-lg bg-accent text-light placeholder-gray-400"> | |
| <i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto scroll-hidden px-4 pb-4"> | |
| <!-- Browse All --> | |
| <section class="mb-8"> | |
| <h2 class="text-lg font-semibold mb-4">Browse All</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gradient-to-br from-purple-600 to-blue-500 rounded-lg p-4 h-24 flex items-end"> | |
| <span class="font-bold">Pop</span> | |
| </div> | |
| <div class="bg-gradient-to-br from-red-600 to-orange-500 rounded-lg p-4 h-24 flex items-end"> | |
| <span class="font-bold">Rock</span> | |
| </div> | |
| <div class="bg-gradient-to-br from-green-600 to-teal-500 rounded-lg p-4 h-24 flex items-end"> | |
| <span class="font-bold">Hip Hop</span> | |
| </div> | |
| <div class="bg-gradient-to-br from-yellow-600 to-amber-500 rounded-lg p-4 h-24 flex items-end"> | |
| <span class="font-bold">Jazz</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recent Searches --> | |
| <section> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Searches</h2> | |
| <span class="text-primary text-sm">Clear All</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Search Item --> | |
| <div class="flex items-center p-3 rounded-lg search-result cursor-pointer"> | |
| <i data-feather="clock" class="text-gray-400 mr-4"></i> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">The Weeknd</h4> | |
| </div> | |
| <i data-feather="x" class="text-gray-400"></i> | |
| </div> | |
| <!-- Search Item --> | |
| <div class="flex items-center p-3 rounded-lg search-result cursor-pointer"> | |
| <i data-feather="clock" class="text-gray-400 mr-4"></i> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Blinding Lights</h4> | |
| </div> | |
| <i data-feather="x" class="text-gray-400"></i> | |
| </div> | |
| <!-- Search Item --> | |
| <div class="flex items-center p-3 rounded-lg search-result cursor-pointer"> | |
| <i data-feather="clock" class="text-gray-400 mr-4"></i> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Dua Lipa</h4> | |
| </div> | |
| <i data-feather="x" class="text-gray-400"></i> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Navigation --> | |
| <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary"> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="home" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </div> | |
| <div class="flex flex-col items-center text-primary"> | |
| <i data-feather="search" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Search</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="book" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Library</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="heart" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Favorites</span> | |
| </div> | |
| <div class="flex flex-col items-center text-gray-400"> | |
| <i data-feather="user" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Profile</span> | |
| </div> | |
| </nav> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |
| >>>>>>> REPLACE |