Spaces:
Running
Running
File size: 2,271 Bytes
cc7a87b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <div class="fixed bottom-0 left-64 right-0 bg-gray-900 border-t border-gray-800 h-20 flex items-center px-4">
<div class="max-w-7xl mx-auto w-full flex items-center justify-between">
<div class="flex items-center">
<div class="relative w-12 h-12 mr-4">
<img src="http://static.photos/music/80x80/42" alt="Now playing" class="rounded-md w-full h-full object-cover">
<button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center">
<i data-feather="play" class="h-4 w-4 text-white"></i>
</button>
</div>
<div>
<h4 class="font-medium">Current Track</h4>
<p class="text-sm text-gray-400">Artist Name</p>
</div>
</div>
<div class="flex flex-col items-center w-1/3">
<div class="flex items-center space-x-4 mb-2">
<button class="text-gray-300 hover:text-white">
<i data-feather="skip-back" class="h-5 w-5"></i>
</button>
<button class="bg-white text-black rounded-full p-2 hover:scale-105 transition">
<i data-feather="play" class="h-5 w-5"></i>
</button>
<button class="text-gray-300 hover:text-white">
<i data-feather="skip-forward" class="h-5 w-5"></i>
</button>
</div>
<div class="w-full flex items-center">
<span class="text-xs text-gray-400 mr-2">0:00</span>
<div class="flex-1 h-1 bg-gray-700 rounded-full overflow-hidden">
<div class="bg-green-500 h-full w-1/3"></div>
</div>
<span class="text-xs text-gray-400 ml-2">3:42</span>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-300 hover:text-white">
<i data-feather="volume-2" class="h-5 w-5"></i>
</button>
<div class="w-24 h-1 bg-gray-700 rounded-full overflow-hidden">
<div class="bg-green-500 h-full w-2/3"></div>
</div>
</div>
</div>
</div> |