|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>BujuRocks - Official Music Player</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes rotate { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.vinyl-rotate { |
|
|
animation: rotate 20s linear infinite; |
|
|
} |
|
|
|
|
|
.vinyl-paused { |
|
|
animation-play-state: paused; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
-webkit-appearance: none; |
|
|
height: 6px; |
|
|
background: #4b5563; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-bar::-webkit-progress-bar { |
|
|
background: #4b5563; |
|
|
} |
|
|
|
|
|
.progress-bar::-webkit-progress-value { |
|
|
background: #ec4899; |
|
|
transition: width 0.1s linear; |
|
|
} |
|
|
|
|
|
.waveform { |
|
|
height: 60px; |
|
|
background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 100%); |
|
|
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 Q 5 20 10 10 T 20 10 T 30 10 T 40 10 T 50 10 T 60 10 T 70 10 T 80 10 T 90 10 T 100 10" stroke="black" fill="none" stroke-width="2"/></svg>'); |
|
|
mask-size: 100% 100%; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.album-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
|
.player-container { |
|
|
flex-direction: column; |
|
|
} |
|
|
.artwork-section { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
|
|
|
<nav class="bg-gray-800 shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="flex items-center py-2"> |
|
|
<span class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">BujuRocks</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#music" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Music</a> |
|
|
<a href="#albums" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Albums</a> |
|
|
<a href="#videos" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Videos</a> |
|
|
<a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="https://youtu.be/EYA5ndPCzFU?si=rYxRFrO7BvBfRpo9" target="_blank" class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium hover:shadow-lg transition duration-300"> |
|
|
Latest Video |
|
|
</a> |
|
|
<button class="md:hidden text-gray-300 hover:text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative bg-gradient-to-b from-gray-800 to-gray-900 py-20"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4">Experience <span class="bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">BujuRocks</span></h1> |
|
|
<p class="text-xl text-gray-300 mb-8">The global network connecting millions through powerful music and meaningful songs</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#music" class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition duration-300"> |
|
|
Play Now |
|
|
</a> |
|
|
<a href="#albums" class="border border-gray-600 text-gray-300 px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition duration-300"> |
|
|
Browse Albums |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80"> |
|
|
<div class="absolute inset-0 rounded-full overflow-hidden shadow-2xl vinyl-rotate"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b273c8b444df094279e70d0ed856" |
|
|
class="w-full h-full object-cover" alt="BujuRocks Album Cover"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-20"></div> |
|
|
</div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gray-800 rounded-full border-4 border-gray-700 z-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12" id="music"> |
|
|
<div class="bg-gray-800 rounded-3xl shadow-2xl overflow-hidden p-6 md:p-8"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold">Now Playing</h2> |
|
|
<p class="text-gray-400">BujuRocks Premium Experience</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white transition"> |
|
|
<i class="fas fa-share-alt text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="player-container flex flex-col md:flex-row items-center"> |
|
|
|
|
|
<div class="artwork-section relative mb-6 md:mb-0 md:mr-8 flex-shrink-0"> |
|
|
<div class="relative w-64 h-64"> |
|
|
<div class="absolute inset-0 rounded-full overflow-hidden shadow-lg vinyl-rotate" id="vinyl"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b273c8b444df094279e70d0ed856" |
|
|
class="w-full h-full object-cover" alt="Album Art"> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-20"></div> |
|
|
</div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-gray-800 rounded-full border-4 border-gray-700 z-10"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="controls-section flex-1 w-full"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold" id="song-title">TALK2M3</h2> |
|
|
<p class="text-gray-400" id="artist-name">BujuRocks</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="waveform mb-6 w-full"></div> |
|
|
|
|
|
|
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-400 mb-1"> |
|
|
<span id="current-time">0:00</span> |
|
|
<span id="duration">4:32</span> |
|
|
</div> |
|
|
<progress class="progress-bar w-full" id="progress", value="0" max="100"></progress> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-between mt-8"> |
|
|
<button class="text-gray-400 hover:text-white transition" id="shuffle"> |
|
|
<i class="fas fa-random text-xl"></i> |
|
|
</button> |
|
|
|
|
|
<button class="text-gray-400 hover:text-white transition" id="prev"> |
|
|
<i class="fas fa-step-backward text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
<button class="bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg hover:shadow-xl transition" id="play-pause"> |
|
|
<i class="fas fa-play text-2xl" id="play-icon"></i> |
|
|
</button> |
|
|
|
|
|
<button class="text-gray-400 hover:text-white transition" id="next"> |
|
|
<i class="fas fa-step-forward text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
<button class="text-gray-400 hover:text-white transition" id="repeat"> |
|
|
<i class="fas fa-redo text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center mt-8"> |
|
|
<i class="fas fa-volume-down text-gray-400 mr-2"></i> |
|
|
<input type="range" min="0" max="100" value="80" class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="volume"> |
|
|
<i class="fas fa-volume-up text-gray-400 ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12" id="albums"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">BujuRocks Singles & Albums</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-500 album-hover"> |
|
|
<div class="relative pt-[100%]"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b273c8b444df094279e70d0ed856" |
|
|
class="absolute top-0 left-0 w-full h-full object-cover" alt="TALK2M3 Single"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">TALK2M3</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Single • 2023</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-pink-500 hover:text-pink-400 text-sm font-medium">Play Now</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-spotify"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-apple"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-500 album-hover"> |
|
|
<div class="relative pt-[100%]"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b2731a5e7f5c37e221f3067b8c1f" |
|
|
class="absolute top-0 left-0 w-full h-full object-cover" alt="DESTINY4HELL Single"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">DESTINY4HELL</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Single • 2022</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-pink-500 hover:text-pink-400 text-sm font-medium">Play Now</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-spotify"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-apple"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-500 album-hover"> |
|
|
<div class="relative pt-[100%]"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b2737a4781629469bb83356cd318" |
|
|
class="absolute top-0 left-0 w-full h-full object-cover" alt="CALLNOMORE Single"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">CALLNOMORE</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Single • 2021</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-pink-500 hover:text-pink-400 text-sm font-medium">Play Now</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-spotify"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-apple"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition duration-500 album-hover"> |
|
|
<div class="relative pt-[100%]"> |
|
|
<img src="https://i.scdn.co/image/ab67616d0000b273f3eaae22e1c6b26400073b05" |
|
|
class="absolute top-0 left-0 w-full h-full object-cover" alt="Hey Boy! Do You Love Me? Single"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Hey Boy! Do You Love Me?</h3> |
|
|
<p class="text-gray-400 text-sm mb-3">Single • 2020</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-pink-500 hover:text-pink-400 text-sm font-medium">Play Now</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-spotify"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-apple"></i> |
|
|
</a> |
|
|
<a href="https://youtu.be/EYA5ndPCzFU?si=rYxRFrO7BvBfRpo9" target="_blank" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 py-16" id="videos"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Featured Videos</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-black rounded-xl overflow-hidden shadow-2xl"> |
|
|
<div class="relative pt-[56.25%]"> |
|
|
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/EYA5ndPCzFU?autoplay=0&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">BujuRocks - Hey Boy! Do You Love Me? (Official Video)</h3> |
|
|
<p class="text-gray-400 text-sm">5.2M views • 3 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="flex bg-gray-700 rounded-lg overflow-hidden hover:bg-gray-600 transition duration-300"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://i.ytimg.com/vi/7wtfhZwyrcc/maxresdefault.jpg" class="w-full h-full object-cover" alt="Video thumbnail"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="bg-black bg-opacity-70 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-medium mb-1">TALK2M3 Live Performance</h4> |
|
|
<p class="text-gray-400 text-sm">1.8M views • 8 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex bg-gray-700 rounded-lg overflow-hidden hover:bg-gray-600 transition duration-300"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://i.ytimg.com/vi/Mf4G-ZkP2v8/maxresdefault.jpg" class="w-full h-full object-cover" alt="Video thumbnail"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="bg-black bg-opacity-70 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-medium mb-1">DESTINY4HELL Music Video</h4> |
|
|
<p class="text-gray-400 text-sm">2.3M views • 1 year ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex bg-gray-700 rounded-lg overflow-hidden hover:bg-gray-600 transition duration-300"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://i.ytimg.com/vi/LUfW7O3XUY4/maxresdefault.jpg" class="w-full h-full object-cover" alt="Video thumbnail"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="bg-black bg-opacity-70 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-medium mb-1">CALLNOMORE Live Session</h4> |
|
|
<p class="text-gray-400 text-sm">3.1M views • 2 years ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-16" id="about"> |
|
|
<div class="bg-gray-800 rounded-3xl overflow-hidden shadow-2xl"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/3"> |
|
|
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" |
|
|
class="w-full h-full object-cover" alt="BujuRocks Artist"> |
|
|
</div> |
|
|
<div class="md:w-2/3 p-8 md:p-12"> |
|
|
<h2 class="text-3xl font-bold mb-6">About BujuRocks</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
BujuRocks is a revolutionary artist blending rock, electronic, and world music to create a unique sound that transcends genres. |
|
|
With over 50 million streams worldwide, BujuRocks has become an essential part of modern music communication. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
The music of BujuRocks represents the fundamental building blocks of song information in today's digital age. |
|
|
Each composition is carefully processed and organized data that becomes meaningful artistic information when experienced by listeners. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="bg-gray-700 px-4 py-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-400">Monthly Listeners</p> |
|
|
<p class="text-xl font-bold">4.8M+</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-4 py-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-400">Total Streams</p> |
|
|
<p class="text-xl font-bold">52M+</p> |
|
|
</div> |
|
|
<div class="bg-gray-700 px-4 py-3 rounded-lg"> |
|
|
<p class="text-sm text-gray-400">Awards</p> |
|
|
<p class="text-xl font-bold">12</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 pt-12 pb-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">BujuRocks</h3> |
|
|
<p class="text-gray-400">The global network connecting millions through powerful music and meaningful songs.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Music</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Latest Release</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Popular Songs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Albums</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Singles</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Connect</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Tour Dates</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Newsletter</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Follow</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-spotify"></i></a> |
|
|
<a href="https://youtu.be/EYA5ndPCzFU?si=rYxRFrO7BvBfRpo9" target="_blank" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 pt-6"> |
|
|
<p class="text-gray-400 text-sm text-center">© 2023 BujuRocks. All rights reserved. Music that connects the world.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const playPauseBtn = document.getElementById('play-pause'); |
|
|
const playIcon = document.getElementById('play-icon'); |
|
|
const vinyl = document.getElementById('vinyl'); |
|
|
const progress = document.getElementById('progress'); |
|
|
const currentTimeEl = document.getElementById('current-time'); |
|
|
const durationEl = document.getElementById('duration'); |
|
|
const volumeControl = document.getElementById('volume'); |
|
|
const songTitle = document.getElementById('song-title'); |
|
|
const artistName = document.getElementById('artist-name'); |
|
|
|
|
|
let isPlaying = false; |
|
|
let progressInterval; |
|
|
|
|
|
|
|
|
const songs = [ |
|
|
{ title: "TALK2M3", artist: "BujuRocks", duration: "4:32", cover: "https://i.scdn.co/image/ab67616d0000b273c8b444df094279e70d0ed856" }, |
|
|
{ title: "DESTINY4HELL", artist: "BujuRocks", duration: "3:45", cover: "https://i.scdn.co/image/ab67616d0000b2731a5e7f5c37e221f3067b8c1f" }, |
|
|
{ title: "CALLNOMORE", artist: "BujuRocks", duration: "5:18", cover: "https://i.scdn.co/image/ab67616d0000b2737a4781629469bb83356cd318" }, |
|
|
{ title: "Hey Boy! Do You Love Me?", artist: "BujuRocks", duration: "3:22", cover: "https://i.scdn.co/image/ab67616d0000b273f3eaae22e1c6b26400073b05" } |
|
|
]; |
|
|
|
|
|
|
|
|
playPauseBtn.addEventListener('click', function() { |
|
|
isPlaying = !isPlaying; |
|
|
|
|
|
if (isPlaying) { |
|
|
playIcon.classList.remove('fa-play'); |
|
|
playIcon.classList.add('fa-pause'); |
|
|
vinyl.classList.remove('vinyl-paused'); |
|
|
|
|
|
|
|
|
let progressValue = 0; |
|
|
progressInterval = setInterval(() => { |
|
|
if (progressValue >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
isPlaying = false; |
|
|
playIcon.classList.remove('fa-pause'); |
|
|
playIcon.classList.add('fa-play'); |
|
|
vinyl.classList.add('vinyl-paused'); |
|
|
return; |
|
|
} |
|
|
progressValue += 0.5; |
|
|
progress.value = progressValue; |
|
|
|
|
|
|
|
|
const totalSeconds = 272; |
|
|
const currentSeconds = Math.floor(totalSeconds * (progressValue / 100)); |
|
|
const minutes = Math.floor(currentSeconds / 60); |
|
|
const seconds = currentSeconds % 60; |
|
|
currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; |
|
|
}, 1000); |
|
|
} else { |
|
|
playIcon.classList.remove('fa-pause'); |
|
|
playIcon.classList.add('fa-play'); |
|
|
vinyl.classList.add('vinyl-paused'); |
|
|
clearInterval(progressInterval); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
volumeControl.addEventListener('input', function() { |
|
|
|
|
|
console.log('Volume set to:', this.value); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('next').addEventListener('click', function() { |
|
|
changeSong(1); |
|
|
}); |
|
|
|
|
|
document.getElementById('prev').addEventListener('click', function() { |
|
|
changeSong(-1); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('shuffle').addEventListener('click', function() { |
|
|
this.classList.toggle('text-purple-500'); |
|
|
}); |
|
|
|
|
|
document.getElementById('repeat').addEventListener('click', function() { |
|
|
this.classList.toggle('text-purple-500'); |
|
|
}); |
|
|
|
|
|
|
|
|
function changeSong(direction) { |
|
|
const currentIndex = songs.findIndex(song => song.title === songTitle.textContent); |
|
|
let newIndex = currentIndex + direction; |
|
|
|
|
|
if (newIndex < 0) newIndex = songs.length - 1; |
|
|
if (newIndex >= songs.length) newIndex = 0; |
|
|
|
|
|
const newSong = songs[newIndex]; |
|
|
songTitle.textContent = newSong.title; |
|
|
artistName.textContent = newSong.artist; |
|
|
durationEl.textContent = newSong.duration; |
|
|
|
|
|
|
|
|
document.querySelector('#vinyl img').src = newSong.cover; |
|
|
|
|
|
|
|
|
progress.value = 0; |
|
|
currentTimeEl.textContent = "0:00"; |
|
|
|
|
|
|
|
|
if (isPlaying) { |
|
|
clearInterval(progressInterval); |
|
|
let progressValue = 0; |
|
|
progressInterval = setInterval(() => { |
|
|
if (progressValue >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
isPlaying = false; |
|
|
playIcon.classList.remove('fa-pause'); |
|
|
playIcon.classList.add('fa-play'); |
|
|
vinyl.classList.add('vinyl-paused'); |
|
|
return; |
|
|
} |
|
|
progressValue += 0.5; |
|
|
progress.value = progressValue; |
|
|
|
|
|
|
|
|
const durations = { |
|
|
"TALK2M3": 272, |
|
|
"Hey Boy! Do You Love Me?": 225, |
|
|
"CALLNOMORE": 318, |
|
|
"DESTINY4HELL": 202 |
|
|
}; |
|
|
const totalSeconds = durations[newSong.title]; |
|
|
const currentSeconds = Math.floor(totalSeconds * (progressValue / 100)); |
|
|
const minutes = Math.floor(currentSeconds / 60); |
|
|
const seconds = currentSeconds % 60; |
|
|
currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
durationEl.textContent = songs[0].duration; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.album-hover').forEach((album, index) => { |
|
|
album.addEventListener('click', function() { |
|
|
const song = songs[index]; |
|
|
songTitle.textContent = song.title; |
|
|
artistName.textContent = song.artist; |
|
|
durationEl.textContent = song.duration; |
|
|
document.querySelector('#vinyl img').src = song.cover; |
|
|
|
|
|
|
|
|
progress.value = 0; |
|
|
currentTimeEl.textContent = "0:00"; |
|
|
|
|
|
|
|
|
if (isPlaying) { |
|
|
clearInterval(progressInterval); |
|
|
let progressValue = 0; |
|
|
progressInterval = setInterval(() => { |
|
|
if (progressValue >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
isPlaying = false; |
|
|
playIcon.classList.remove('fa-pause'); |
|
|
playIcon.classList.add('fa-play'); |
|
|
vinyl.classList.add('vinyl-paused'); |
|
|
return; |
|
|
} |
|
|
progressValue += 0.5; |
|
|
progress.value = progressValue; |
|
|
|
|
|
|
|
|
const durations = { |
|
|
"TALK2M3": 272, |
|
|
"DESTINY4HELL": 225, |
|
|
"CALLNOMORE": 318, |
|
|
"Hey Boy! Do You Love Me?": 202 |
|
|
}; |
|
|
const totalSeconds = durations[song.title]; |
|
|
const currentSeconds = Math.floor(totalSeconds * (progressValue / 100)); |
|
|
const minutes = Math.floor(currentSeconds / 60); |
|
|
const seconds = currentSeconds % 60; |
|
|
currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bujurocks/nanometer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
