| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LoopLodge – A Members' Hideout for Indie Loops & Tracks</title> |
| <meta name="description" content="Premium platform for indie producers to share loop packs, stems, and full tracks. Join our creative community."> |
| <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-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">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-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">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> |
|
|
| |
| <section class="bg-gradient-to-br from-primary-500 to-primary-700 text-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row items-center justify-between"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Your Creative Hideout for Indie Loops & Tracks</h1> |
| <p class="text-xl mb-8 opacity-90">Discover, share, and collaborate with a community of passionate producers. Royalty-free samples, stems, and full tracks at your fingertips.</p> |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| <a href="/explore.html" class="bg-white text-primary-600 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center">Explore Library</a> |
| <a href="/pricing.html" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-md text-lg font-semibold text-center">Join Membership</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse"></div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary-400 rounded-lg opacity-20 animate-pulse"></div> |
| <div class="relative bg-white dark:bg-dark-800 rounded-xl shadow-xl overflow-hidden"> |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500"></div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="text-lg font-bold text-gray-900 dark:text-white">Neon Dreams</h3> |
| <p class="text-gray-600 dark:text-gray-300">by Kora Vale</p> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="heart" class="w-5 h-5"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700"> |
| <i data-feather="more-vertical" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div class="flex space-x-4"> |
| <button class="w-12 h-12 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> |
| </div> |
| <div class="flex-1 mx-4"> |
| <div class="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> |
| </div> |
| <span class="text-sm text-gray-500">1:24 / 3:45</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50 dark:bg-dark-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center mb-10"> |
| <h2 class="text-2xl font-bold">Featured This Week</h2> |
| <a href="/explore.html" class="text-primary-600 hover:text-primary-800 dark:hover:text-primary-400 font-medium flex items-center"> |
| View all <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i> |
| </a> |
| </div> |
| <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> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white dark:bg-dark-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Why Choose LoopLodge</h2> |
| <p class="text-lg text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">A platform built by producers, for producers. We're redefining how indie creators share and monetize their work.</p> |
| </div> |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="shield" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Clear Licensing</h3> |
| <p class="text-gray-600 dark:text-gray-400">All tracks come with royalty-free licenses. Creators retain ownership while users get clear usage rights.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="star" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Curated Quality</h3> |
| <p class="text-gray-600 dark:text-gray-400">Every submission is reviewed by our team to ensure professional quality standards.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="layers" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Stems & Loops</h3> |
| <p class="text-gray-600 dark:text-gray-400">Get full track stems and isolated loops for ultimate flexibility in your productions.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="trending-up" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Creator Analytics</h3> |
| <p class="text-gray-600 dark:text-gray-400">Detailed stats on plays, downloads, and earnings help you understand your audience.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="users" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Collaborative</h3> |
| <p class="text-gray-600 dark:text-gray-400">Connect with other producers, remix tracks, and collaborate on new projects.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 dark:bg-dark-900 p-6 rounded-xl"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="dollar-sign" class="w-6 h-6 text-primary-600"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Fair Earnings</h3> |
| <p class="text-gray-600 dark:text-gray-400">We take the smallest cut in the industry so you keep more of your hard-earned revenue.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-primary-50 dark:bg-primary-900 bg-opacity-50"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md p-8 md:p-10"> |
| <h2 class="text-2xl font-bold mb-4">Stay in the Loop</h2> |
| <p class="text-gray-600 dark:text-gray-400 mb-8">Subscribe to our newsletter for new releases, producer spotlights, and exclusive member content.</p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md border border-gray-300 dark:border-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> |
| <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium">Subscribe</button> |
| </form> |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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"> |
| <div class="h-full bg-primary-600 w-3/4"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="/js/app.js"></script> |
| <script> |
| |
| feather.replace(); |
| |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const mobileThemeToggle = document.getElementById('mobile-theme-toggle'); |
| |
| function toggleTheme() { |
| const html = document.documentElement; |
| if (html.classList.contains('dark')) { |
| html.classList.remove('dark'); |
| localStorage.setItem('theme', 'light'); |
| } else { |
| html.classList.add('dark'); |
| localStorage.setItem('theme', 'dark'); |
| } |
| feather.replace(); |
| } |
| |
| themeToggle.addEventListener('click', toggleTheme); |
| mobileThemeToggle.addEventListener('click', toggleTheme); |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| } |
| </script> |
| </body> |
| </html> |
|
|
