| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Explore - LoopLodge</title> |
| <meta name="description" content="Browse our collection of indie loops, stems, and full tracks. Filter by genre, mood, BPM and more."> |
| <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <link href="/css/styles.css" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| dark: { |
| 800: '#1e293b', |
| 900: '#0f172a', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col"> |
| |
| <nav class="bg-white dark:bg-dark-800 shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <a href="/" class="flex items-center space-x-2"> |
| <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/> |
| <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> |
| <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <span class="text-xl font-bold text-primary-600">LoopLodge</span> |
| </a> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="/explore.html" class="text-primary-600 dark:text-primary-400 px-3 py-2 text-sm font-medium border-b-2 border-primary-600">Explore</a> |
| <a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Pricing</a> |
| <a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">About</a> |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="moon" class="hidden dark:block"></i> |
| <i data-feather="sun" class="dark:hidden"></i> |
| </button> |
| <a href="#" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</a> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-800 pb-3 px-4"> |
| <div class="pt-2 space-y-1"> |
| <a href="/explore.html" class="block px-3 py-2 text-base font-medium text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900 rounded">Explore</a> |
| <a href="/pricing.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a> |
| <a href="/about.html" class="block px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a> |
| <button id="mobile-theme-toggle" class="w-full text-left px-3 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 flex items-center"> |
| <span class="mr-2">Toggle Theme</span> |
| <i data-feather="moon" class="hidden dark:block"></i> |
| <i data-feather="sun" class="dark:hidden"></i> |
| </button> |
| <a href="#" class="block w-full text-center bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md text-base font-medium mt-2">Sign In</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="flex-grow"> |
| |
| <section class="bg-white dark:bg-dark-800 shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0"> |
| <h1 class="text-2xl font-bold">Explore Library</h1> |
| <div class="relative w-full md:w-64"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i data-feather="search" class="w-5 h-5 text-gray-400"></i> |
| </div> |
| <input type="text" placeholder="Search tracks..." class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-dark-700 rounded-md leading-5 bg-white dark:bg-dark-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <div class="flex flex-wrap gap-2"> |
| <button class="px-3 py-1 bg-primary-600 text-white text-sm rounded-full flex items-center"> |
| <span>All</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Synthwave</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Lo-fi</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Hip Hop</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>EDM</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Ambient</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Jazz</span> |
| </button> |
| <button class="px-3 py-1 bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-gray-200 text-sm rounded-full flex items-center hover:bg-gray-200 dark:hover:bg-dark-600"> |
| <span>Rock</span> |
| </button> |
| </div> |
| |
| <div class="mt-4 flex flex-wrap items-center gap-4"> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-600 dark:text-gray-400">BPM:</span> |
| <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800"> |
| <option>Any</option> |
| <option>60-80</option> |
| <option>80-100</option> |
| <option>100-120</option> |
| <option>120-140</option> |
| <option>140+</option> |
| </select> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-600 dark:text-gray-400">Key:</span> |
| <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800"> |
| <option>Any</option> |
| <option>C</option> |
| <option>C#</option> |
| <option>D</option> |
| <option>D#</option> |
| <option>E</option> |
| <option>F</option> |
| <option>F#</option> |
| <option>G</option> |
| <option>G#</option> |
| <option>A</option> |
| <option>A#</option> |
| <option>B</option> |
| </select> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-600 dark:text-gray-400">License:</span> |
| <select class="block w-24 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800"> |
| <option>Any</option> |
| <option>Free</option> |
| <option>Member</option> |
| </select> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-600 dark:text-gray-400">Sort by:</span> |
| <select class="block w-32 pl-3 pr-10 py-2 text-base border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent sm:text-sm rounded-md bg-white dark:bg-dark-800"> |
| <option>Trending</option> |
| <option>Newest</option> |
| <option>Most Downloads</option> |
| <option>Editor's Picks</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,synthwave" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Midnight Drive</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Nova Beats</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Synthwave</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>1.2K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,lofi" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Coffee Shop</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Chill Pill</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Lo-fi</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">85 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>856</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,hiphop" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Urban Flow</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Metro Sounds</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Hip Hop</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">95 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>1.5K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,electronic" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Digital Dreams</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Electro Nova</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">EDM</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">128 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>2.1K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,ambient" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Floating Clouds</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Aether</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Ambient</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">60 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>723</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,jazz" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Smooth Groove</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Jazz Cat</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Jazz</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">90 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>612</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,rock" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Electric Storm</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Rock Titan</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Rock</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">140 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>932</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> |
| <div class="relative"> |
| <img src="https://source.unsplash.com/random/400x400/?music,pop" alt="Track cover" class="w-full h-48 object-cover"> |
| <button class="absolute bottom-4 right-4 w-10 h-10 bg-white dark:bg-dark-700 rounded-full shadow-md flex items-center justify-center hover:bg-gray-100 dark:hover:bg-dark-600"> |
| <i data-feather="play" class="w-4 h-4 text-primary-600"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1">Summer Vibes</h3> |
| <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">by Pop Star</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">Pop</span> |
| <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-dark-700 rounded-full">100 BPM</span> |
| </div> |
| <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| <span>1.8K</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-10 flex justify-center"> |
| <nav class="flex items-center space-x-2"> |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="chevron-left" class="w-4 h-4"></i> |
| </button> |
| <button class="px-3 py-1 rounded bg-primary-600 text-white">1</button> |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">2</button> |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">3</button> |
| <span class="px-2 text-gray-500">...</span> |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">8</button> |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-dark-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="chevron-right" class="w-4 h-4"></i> |
| </button> |
| </nav> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700 mt-auto"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div class="col-span-2"> |
| <a href="/" class="flex items-center space-x-2"> |
| <svg class="w-8 h-8 text-primary-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/> |
| <path d="M8 16C8 16 9.5 14 12 14C14.5 14 16 16 16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> |
| <path d="M8 8H8.01M16 8H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <span class="text-xl font-bold text-primary-600">LoopLodge</span> |
| </a> |
| <p class="mt-4 text-gray-600 dark:text-gray-400 max-w-xs"> |
| A members' hideout for indie producers to share loops, stems, and tracks. |
| </p> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Explore</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="/explore.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Browse Library</a></li> |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Top Charts</a></li> |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">New Releases</a></li> |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Genres</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 tracking-wider uppercase">Company</h3> |
| <ul class="mt-4 space-y-2"> |
| <li><a href="/about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">About</a></li> |
| <li><a href="/pricing.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Pricing</a></li> |
| <li><a href="/terms.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Terms</a></li> |
| <li><a href="/privacy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Privacy</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="mt-12 border-t border-gray-200 dark:border-dark-700 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 dark:text-gray-400 text-sm">© 2023 LoopLodge. All rights reserved.</p> |
| <div class="mt-4 md:mt-0 flex space-x-6"> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> |
| <i data-feather="instagram" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> |
| <i data-feather="facebook" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> |
| <i data-feather="youtube" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-800 shadow-lg border-t border-gray-200 dark:border-dark-700"> |
| <div class="max-w-7xl mx-auto px-4 py-2"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4 w-1/4"> |
| <img src="https://source.unsplash.com/random/80x80/?music" alt="Now playing" class="w-12 h-12 rounded"> |
| <div> |
| <h4 class="font-medium text-sm">Neon Dreams</h4> |
| <p class="text-xs text-gray-500 dark:text-gray-400">Kora Vale</p> |
| </div> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="heart" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="flex-1 max-w-2xl"> |
| <div class="flex items-center justify-center space-x-6"> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="shuffle" class="w-4 h-4"></i> |
| </button> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="skip-back" class="w-4 h-4"></i> |
| </button> |
| <button class="w-10 h-10 bg-primary-600 hover:bg-primary-700 rounded-full flex items-center justify-center"> |
| <i data-feather="play" class="w-5 h-5 text-white"></i> |
| </button> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="skip-forward" class="w-4 h-4"></i> |
| </button> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="repeat" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="flex items-center mt-2 space-x-3"> |
| <span class="text-xs text-gray-500 dark:text-gray-400 w-10">1:24</span> |
| <div class="flex-1 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden"> |
| <div class="h-full bg-primary-600 w-1/3"></div> |
| </div> |
| <span class="text-xs text-gray-500 dark:text-gray-400 w-10">3:45</span> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4 w-1/4 justify-end"> |
| <button class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"> |
| <i data-feather="list" class="w-4 h-4"></i> |
| </button> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="volume-2" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i> |
| <div class="w-20 h-1 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden"> |
| </body> |
| </html> |
