| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Courageous Music Player</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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: #0f172a; |
| | color: #f8fafc; |
| | } |
| | .waveform { |
| | height: 60px; |
| | width: 100%; |
| | background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| | mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"><path d="M0,10 Q5,15 10,10 T20,10 T30,10 T40,10 T50,10 T60,10 T70,10 T80,10 T90,10 T100,10" stroke="white" fill="none" stroke-width="2"/></svg>'); |
| | mask-size: 100% 100%; |
| | mask-repeat: no-repeat; |
| | } |
| | .progress-bar { |
| | height: 4px; |
| | background-color: #334155; |
| | } |
| | .progress { |
| | height: 100%; |
| | background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| | width: 0%; |
| | transition: width 0.1s linear; |
| | } |
| | .album-art { |
| | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2); |
| | } |
| | .playlist-item:hover { |
| | background-color: #1e293b; |
| | transform: translateX(4px); |
| | } |
| | .volume-slider::-webkit-slider-thumb { |
| | -webkit-appearance: none; |
| | width: 16px; |
| | height: 16px; |
| | border-radius: 50%; |
| | background: #3b82f6; |
| | cursor: pointer; |
| | } |
| | </style> |
| | <style> |
| | .slide-img { |
| | opacity: 0; |
| | transition: opacity 1s ease-in-out; |
| | } |
| | .slide-img.active { |
| | opacity: 1; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| | <header class="flex justify-between items-center mb-8"> |
| | <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">CourageousTunes</h1> |
| | <div class="flex items-center space-x-4"> |
| | <select id="quality-selector" class="bg-slate-800 text-white px-4 py-2 rounded-lg border border-slate-700 focus:outline-none focus:border-blue-500"> |
| | <option value="high">High Quality (320kbps)</option> |
| | <option value="medium">Medium (192kbps)</option> |
| | <option value="low">Low (128kbps)</option> |
| | </select> |
| | <button class="p-2 rounded-full bg-slate-800 hover:bg-slate-700 transition-colors"> |
| | <i data-feather="settings"></i> |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | <main> |
| | <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
| | |
| | <div class="lg:col-span-2 space-y-6" data-aos="fade-right"> |
| | <div class="bg-slate-800 rounded-2xl p-6 shadow-xl"> |
| | <div class="flex flex-col items-center"> |
| | <div class="album-art w-64 h-64 rounded-xl overflow-hidden mb-6 relative"> |
| | <img src="http://static.photos/music/640x360/1" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img active"> |
| | <img src="http://static.photos/music/640x360/2" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img"> |
| | <img src="http://static.photos/music/640x360/3" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img"> |
| | <img src="http://static.photos/music/640x360/4" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img"> |
| | </div> |
| | <div class="text-center"> |
| | <h2 class="text-2xl font-semibold">Current Song</h2> |
| | <p class="text-slate-400">Artist Name</p> |
| | </div> |
| | </div> |
| |
|
| | <div class="mt-8"> |
| | <div class="waveform mb-2"></div> |
| | <div class="progress-bar rounded-full mb-4"> |
| | <div class="progress rounded-full"></div> |
| | </div> |
| | <div class="flex justify-between text-sm text-slate-400"> |
| | <span>0:00</span> |
| | <span>3:45</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="flex justify-center items-center mt-8 space-x-6"> |
| | <button class="p-3 rounded-full bg-slate-700 hover:bg-slate-600 transition-colors"> |
| | <i data-feather="skip-back"></i> |
| | </button> |
| | <button class="p-5 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 transition-colors shadow-lg"> |
| | <i data-feather="play"></i> |
| | </button> |
| | <button class="p-3 rounded-full bg-slate-700 hover:bg-slate-600 transition-colors"> |
| | <i data-feather="skip-forward"></i> |
| | </button> |
| | </div> |
| |
|
| | <div class="flex items-center mt-6 space-x-4"> |
| | <i data-feather="volume-2" class="text-slate-400"></i> |
| | <input type="range" min="0" max="100" value="80" class="volume-slider w-full h-1 bg-slate-700 rounded-full appearance-none"> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="lg:col-span-1" data-aos="fade-left"> |
| | <div class="bg-slate-800 rounded-2xl p-6 shadow-xl h-full"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-semibold">Your Playlist</h2> |
| | <button class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition-colors"> |
| | <i data-feather="plus"></i> |
| | </button> |
| | </div> |
| |
|
| | <div class="space-y-2 max-h-96 overflow-y-auto pr-2"> |
| | |
| | <div class="playlist-item flex items-center p-3 rounded-lg cursor-pointer transition-all bg-slate-700"> |
| | <div class="w-12 h-12 rounded-md overflow-hidden mr-3"> |
| | <img src="http://static.photos/music/200x200/1" alt="Album Cover" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h3 class="font-medium">Song Title 1</h3> |
| | <p class="text-sm text-slate-400">Artist 1</p> |
| | </div> |
| | <span class="text-sm text-slate-400">3:45</span> |
| | </div> |
| |
|
| | |
| | <div class="playlist-item flex items-center p-3 rounded-lg cursor-pointer transition-all hover:bg-slate-700"> |
| | <div class="w-12 h-12 rounded-md overflow-hidden mr-3"> |
| | <img src="http://static.photos/music/200x200/2" alt="Album Cover" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h3 class="font-medium">Song Title 2</h3> |
| | <p class="text-sm text-slate-400">Artist 2</p> |
| | </div> |
| | <span class="text-sm text-slate-400">4:12</span> |
| | </div> |
| |
|
| | <div class="playlist-item flex items-center p-3 rounded-lg cursor-pointer transition-all hover:bg-slate-700"> |
| | <div class="w-12 h-12 rounded-md overflow-hidden mr-3"> |
| | <img src="http://static.photos/music/200x200/3" alt="Album Cover" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h3 class="font-medium">Song Title 3</h3> |
| | <p class="text-sm text-slate-400">Artist 3</p> |
| | </div> |
| | <span class="text-sm text-slate-400">2:58</span> |
| | </div> |
| |
|
| | <div class="playlist-item flex items-center p-3 rounded-lg cursor-pointer transition-all hover:bg-slate-700"> |
| | <div class="w-12 h-12 rounded-md overflow-hidden mr-3"> |
| | <img src="http://static.photos/music/200x200/4" alt="Album Cover" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h3 class="font-medium">Song Title 4</h3> |
| | <p class="text-sm text-slate-400">Artist 4</p> |
| | </div> |
| | <span class="text-sm text-slate-400">3:30</span> |
| | </div> |
| |
|
| | <div class="playlist-item flex items-center p-3 rounded-lg cursor-pointer transition-all hover:bg-slate-700"> |
| | <div class="w-12 h-12 rounded-md overflow-hidden mr-3"> |
| | <img src="http://static.photos/music/200x200/5" alt="Album Cover" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="flex-1"> |
| | <h3 class="font-medium">Song Title 5</h3> |
| | <p class="text-sm text-slate-400">Artist 5</p> |
| | </div> |
| | <span class="text-sm text-slate-400">5:21</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="mt-6"> |
| | <label for="file-upload" class="flex items-center justify-center w-full p-3 bg-slate-700 rounded-lg cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <i data-feather="upload" class="mr-2"></i> |
| | <span>Add Music Files</span> |
| | <input id="file-upload" type="file" class="hidden" accept="audio/*" multiple> |
| | </label> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="lg:col-span-1" data-aos="fade-up"> |
| | <div class="bg-slate-800 rounded-2xl p-6 shadow-xl h-full"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-semibold">Library</h2> |
| | <button class="p-2 rounded-full bg-slate-700 hover:bg-slate-600 transition-colors"> |
| | <i data-feather="folder"></i> |
| | </button> |
| | </div> |
| |
|
| | <div class="space-y-3"> |
| | <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="font-medium">Recently Added</h3> |
| | <p class="text-sm text-slate-400">23 songs</p> |
| | </div> |
| | <i data-feather="chevron-right" class="text-slate-400"></i> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="font-medium">Favorites</h3> |
| | <p class="text-sm text-slate-400">17 songs</p> |
| | </div> |
| | <i data-feather="chevron-right" class="text-slate-400"></i> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="font-medium">High Quality</h3> |
| | <p class="text-sm text-slate-400">45 songs</p> |
| | </div> |
| | <i data-feather="chevron-right" class="text-slate-400"></i> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="font-medium">Offline</h3> |
| | <p class="text-sm text-slate-400">89 songs</p> |
| | </div> |
| | <i data-feather="chevron-right" class="text-slate-400"></i> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-slate-700 rounded-lg p-3 cursor-pointer hover:bg-slate-600 transition-colors"> |
| | <div class="flex items-center justify-between"> |
| | <div> |
| | <h3 class="font-medium">MP4 Videos</h3> |
| | <p class="text-sm text-slate-400">12 songs</p> |
| | </div> |
| | <i data-feather="chevron-right" class="text-slate-400"></i> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="mt-6 space-y-2"> |
| | <h3 class="text-sm font-medium text-slate-400 mb-2">Library Stats</h3> |
| | <div class="flex justify-between text-sm"> |
| | <span class="text-slate-400">Total Songs:</span> |
| | <span class="font-medium">186</span> |
| | </div> |
| | <div class="flex justify-between text-sm"> |
| | <span class="text-slate-400">Play Time:</span> |
| | <span class="font-medium">12h 34m</span> |
| | </div> |
| | <div class="flex justify-between text-sm"> |
| | <span class="text-slate-400">Storage:</span> |
| | <span class="font-medium">2.4 GB</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | </div> |
| |
|
| | <script> |
| | AOS.init(); |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const playButton = document.querySelector('.bg-gradient-to-r'); |
| | const progressBar = document.querySelector('.progress'); |
| | let isPlaying = false; |
| | let progress = 0; |
| | let interval; |
| | |
| | playButton.addEventListener('click', function() { |
| | isPlaying = !isPlaying; |
| | |
| | if (isPlaying) { |
| | playButton.innerHTML = '<i data-feather="pause"></i>'; |
| | feather.replace(); |
| | |
| | |
| | interval = setInterval(() => { |
| | if (progress >= 100) { |
| | progress = 0; |
| | isPlaying = false; |
| | clearInterval(interval); |
| | playButton.innerHTML = '<i data-feather="play"></i>'; |
| | feather.replace(); |
| | } else { |
| | progress += 0.5; |
| | progressBar.style.width = progress + '%'; |
| | } |
| | }, 100); |
| | } else { |
| | clearInterval(interval); |
| | playButton.innerHTML = '<i data-feather="play"></i>'; |
| | feather.replace(); |
| | } |
| | }); |
| | |
| | |
| | let slideIndex = 0; |
| | const slides = document.querySelectorAll('.slide-img'); |
| | setInterval(() => { |
| | slides[slideIndex].classList.remove('active'); |
| | slideIndex = (slideIndex + 1) % slides.length; |
| | slides[slideIndex].classList.add('active'); |
| | }, 3000); |
| | |
| | |
| | const fileUpload = document.getElementById('file-upload'); |
| | fileUpload.addEventListener('change', function(e) { |
| | const files = e.target.files; |
| | if (files.length > 0) { |
| | alert(`Added ${files.length} music file(s) to your library!`); |
| | |
| | } |
| | }); |
| | }); |
| | </script> |
| | // Simple player functionality |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const playButton = document.querySelector('.bg-gradient-to-r'); |
| | const progressBar = document.querySelector('.progress'); |
| | let isPlaying = false; |
| | let progress = 0; |
| | let interval; |
| |
|
| | playButton.addEventListener('click', function() { |
| | isPlaying = !isPlaying; |
| | |
| | if (isPlaying) { |
| | playButton.innerHTML = '<i data-feather="pause"></i>'; |
| | feather.replace(); |
| | |
| | // Simulate progress |
| | interval = setInterval(() => { |
| | if (progress >= 100) { |
| | progress = 0; |
| | isPlaying = false; |
| | clearInterval(interval); |
| | playButton.innerHTML = '<i data-feather="play"></i>'; |
| | feather.replace(); |
| | } else { |
| | progress += 0.5; |
| | progressBar.style.width = progress + '%'; |
| | } |
| | }, 100); |
| | } else { |
| | clearInterval(interval); |
| | playButton.innerHTML = '<i data-feather="play"></i>'; |
| | feather.replace(); |
| | } |
| | }); |
| |
|
| | // File upload handling |
| | const fileUpload = document.getElementById('file-upload'); |
| | fileUpload.addEventListener('change', function(e) { |
| | const files = e.target.files; |
| | if (files.length > 0) { |
| | alert(`Added ${files.length} music file(s) to your library!`); |
| | // In a real app, you would process these files and add them to the playlist |
| | } |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
