|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>HYBE | Genius</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> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #f8f8f8; |
|
} |
|
|
|
.gradient-bg { |
|
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); |
|
} |
|
|
|
.artist-header { |
|
background-size: cover; |
|
background-position: center; |
|
} |
|
|
|
.song-item:hover { |
|
background-color: rgba(0,0,0,0.05); |
|
} |
|
|
|
.tab-active { |
|
border-bottom: 3px solid #ff2d55; |
|
color: #ff2d55; |
|
font-weight: 600; |
|
} |
|
|
|
.play-button { |
|
background-color: #ff2d55; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.play-button:hover { |
|
transform: scale(1.05); |
|
background-color: #e61e40; |
|
} |
|
|
|
.dropdown:hover .dropdown-menu { |
|
display: block; |
|
} |
|
|
|
.sidebar-video { |
|
position: sticky; |
|
top: 100px; |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
.sidebar-video { |
|
display: none; |
|
} |
|
} |
|
|
|
.buju-card { |
|
background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); |
|
color: white; |
|
border-radius: 12px; |
|
overflow: hidden; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.buju-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
|
|
.callnomore-card { |
|
background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%); |
|
color: white; |
|
border-radius: 12px; |
|
overflow: hidden; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.callnomore-card:hover { |
|
transform: translateY(-5px); |
|
} |
|
</style> |
|
</head> |
|
<body class="text-gray-900"> |
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
<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-shrink-0 flex items-center"> |
|
<img class="h-8 w-auto" src="https://assets.genius.com/images/apple-touch-icon.png" alt="Genius"> |
|
<span class="ml-2 text-xl font-bold">Genius</span> |
|
</a> |
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Browse</a> |
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a> |
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> |
|
</div> |
|
</div> |
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Search lyrics & more" class="border border-gray-300 rounded-full py-1 px-4 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent w-64"> |
|
<button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> |
|
<i class="fas fa-search"></i> |
|
</button> |
|
</div> |
|
<button class="ml-4 bg-gray-100 rounded-full p-2 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-user"></i> |
|
</button> |
|
</div> |
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500"> |
|
<span class="sr-only">Open main menu</span> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<div class="artist-header bg-[url('https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg')] h-96 relative"> |
|
<div class="gradient-bg absolute inset-0"></div> |
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-end pb-8"> |
|
<div class="flex items-end"> |
|
<div class="mr-6"> |
|
<div class="w-40 h-40 rounded-full bg-white shadow-lg overflow-hidden"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="HYBE" class="w-full h-full object-cover"> |
|
</div> |
|
</div> |
|
<div class="text-white"> |
|
<h1 class="text-5xl font-bold mb-2">HYBE</h1> |
|
<p class="text-lg mb-4">South Korean entertainment company</p> |
|
<div class="flex items-center space-x-4"> |
|
<button class="play-button text-white rounded-full px-6 py-2 font-medium flex items-center"> |
|
<i class="fas fa-play mr-2"></i> Play All |
|
</button> |
|
<button class="bg-white bg-opacity-20 text-white rounded-full px-6 py-2 font-medium flex items-center border border-white border-opacity-30"> |
|
<i class="fas fa-heart mr-2"></i> Follow |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col lg:flex-row gap-8"> |
|
|
|
<div class="flex-1"> |
|
|
|
<div class="border-b border-gray-200 mb-8"> |
|
<nav class="-mb-px flex space-x-8"> |
|
<a href="#" class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Songs</a> |
|
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Albums</a> |
|
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">About</a> |
|
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">News</a> |
|
</nav> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-6 mb-8"> |
|
<h2 class="text-xl font-bold mb-4">Featured Content</h2> |
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
<a href="https://huggingface.co/spaces/Bujurocks/music" target="_blank" class="buju-card p-4 hover:bg-gray-200 transition-colors duration-200 flex items-center"> |
|
<div class="bg-white text-indigo-600 rounded-lg w-16 h-16 flex items-center justify-center mr-4"> |
|
<i class="fas fa-robot text-2xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">BujuRocks AI</h3> |
|
<p class="text-indigo-100 text-sm">Explore AI music generation</p> |
|
</div> |
|
</a> |
|
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" target="_blank" class="bg-gray-100 rounded-lg p-4 hover:bg-gray-200 transition-colors duration-200 flex items-center"> |
|
<div class="bg-blue-500 text-white rounded-lg w-16 h-16 flex items-center justify-center mr-4"> |
|
<i class="fab fa-youtube text-2xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">HYBE Documentary</h3> |
|
<p class="text-gray-600 text-sm">Watch the latest HYBE content</p> |
|
</div> |
|
</a> |
|
<a href="https://huggingface.co/Bujurocks" target="_blank" class="bg-gray-100 rounded-lg p-4 hover:bg-gray-200 transition-colors duration-200 flex items-center"> |
|
<div class="bg-purple-500 text-white rounded-lg w-16 h-16 flex items-center justify-center mr-4"> |
|
<i class="fas fa-brain text-2xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">BujuRocks HF</h3> |
|
<p class="text-gray-600 text-sm">AI models by BujuRocks</p> |
|
</div> |
|
</a> |
|
|
|
<a href="https://youtu.be/ZtvvvBnjOZI?si=XHstZLcNu_ahLntk" target="_blank" class="callnomore-card p-4 hover:bg-gray-200 transition-colors duration-200 flex items-center"> |
|
<div class="bg-white text-indigo-600 rounded-lg w-16 h-16 flex items-center justify-center mr-4"> |
|
<i class="fas fa-music text-2xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-medium">CALLNOMORE</h3> |
|
<p class="text-indigo-100 text-sm">BujuRocks Music Video</p> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden"> |
|
<div class="divide-y divide-gray-200"> |
|
|
|
<div class="song-item p-4 hover:bg-gray-50 transition-colors duration-200 flex items-center"> |
|
<div class="w-10 text-center text-gray-500 mr-4">1</div> |
|
<div class="flex-shrink-0 h-12 w-12 rounded bg-gray-200 overflow-hidden mr-4"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="Album Cover" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-medium">Dynamite</h3> |
|
<p class="text-gray-600 text-sm">BTS</p> |
|
</div> |
|
<div class="text-gray-500 text-sm">3,456,789</div> |
|
<div class="ml-6"> |
|
<button class="text-gray-400 hover:text-red-500"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="song-item p-4 hover:bg-gray-50 transition-colors duration-200 flex items-center"> |
|
<div class="w-10 text-center text-gray-500 mr-4">2</div> |
|
<div class="flex-shrink-0 h-12 w-12 rounded bg-gray-2B00 overflow-hidden mr-4"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="Album Cover" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-medium">Butter</h3> |
|
<p class="text-gray-600 text-sm">BTS</p> |
|
</div> |
|
<div class="text-gray-500 text-sm">3,123,456</div> |
|
<div class="ml-6"> |
|
<button class="text-gray-400 hover:text-red-500"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="song-item p-4 hover:bg-gray-50 transition-colors duration-200 flex items-center"> |
|
<div class="w-10 text-center text-gray-500 mr-4">3</div> |
|
<div class="flex-shrink-0 h-12 w-12 rounded bg-gray-200 overflow-hidden mr-4"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="Album Cover" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-medium">Permission to Dance</h3> |
|
<p class="text-gray-600 text-sm">BTS</p> |
|
</div> |
|
<div class="text-gray-500 text-sm">2,987,654</div> |
|
<div class="ml-6"> |
|
<button class="text-gray-400 hover:text-red-500"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="song-item p-4 hover:bg-gray-50 transition-colors duration-200 flex items-center"> |
|
<div class="w-10 text-center text-gray-500 mr-4">4</div> |
|
<div class="flex-shrink-0 h-12 w-12 rounded bg-gray-200 overflow-hidden mr-4"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="Album Cover" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-medium">Boy With Luv</h3> |
|
<p class="text-gray-600 text-sm">BTS feat. Halsey</p> |
|
</div> |
|
<div class="text-gray-500 text-sm">2,876,543</div> |
|
<div class="ml-6"> |
|
<button class="text-gray-400 hover:text-red-500"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="song-item p-4 hover:bg-gray-50 transition-colors duration-200 flex items-center"> |
|
<div class="w-10 text-center text-gray-500 mr-4">5</div> |
|
<div class="flex-shrink-0 h-12 w-12 rounded bg-gray-200 overflow-hidden mr-4"> |
|
<img src="https://images.genius.com/9c4c7c0c4b7a2a5e8e8e8e8e8e8e8e8.1000x1000x1.jpg" alt="Album Cover" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="flex-grow"> |
|
<h3 class="font-medium">Fake Love</h3> |
|
<p class="text-gray-600 text-sm">BTS</p> |
|
</div> |
|
<div class="text-gray-500 text-sm">2,765,432</div> |
|
<div class="ml-6"> |
|
<button class="text-gray-400 hover:text-red-500"> |
|
<i class="fas fa-ellipsis-h"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6"> |
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"> |
|
View All Songs |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-white rounded-lg shadow-sm p-6"> |
|
<h2 class="text-xl font-bold mb-4">About HYBE & BujuRocks</h2> |
|
<div class="prose max-w-none"> |
|
<p>HYBE (formerly Big Hit Entertainment) is a South Korean entertainment company established in 2005 by Bang Si-hyuk. The company operates as a record label, talent agency, music production company, event management company, and music publishing house.</p> |
|
<p class="mt-4">BujuRocks is an innovative AI developer creating cutting-edge music generation models. Their work on platforms like Hugging Face demonstrates the future of AI in music creation and production.</p> |
|
<p class="mt-4">In 2021, Big Hit Entertainment rebranded as HYBE Corporation, reflecting its evolution from a single-label company to a multi-label entertainment group. HYBE continues to innovate in the music industry with its artist-focused approach and global expansion strategies.</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="lg:w-80 flex-shrink-0"> |
|
<div class="sidebar-video bg-white rounded-lg shadow-sm p-4 mb-6"> |
|
<h3 class="font-bold text-lg mb-4">Featured Video</h3> |
|
<div class="aspect-w-16 aspect-h-9"> |
|
<iframe |
|
width="100%" |
|
height="225" |
|
src="https://www.youtube.com/embed/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" |
|
title="YouTube video player" |
|
frameborder="0" |
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
|
referrerpolicy="strict-origin-when-cross-origin" |
|
allowfullscreen> |
|
</iframe> |
|
</div> |
|
<div class="mt-4"> |
|
<h4 class="font-medium">HYBE Documentary</h4> |
|
<p class="text-gray-600 text-sm mt-1">An inside look at HYBE's journey and global impact</p> |
|
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" target="_blank" class="inline-block mt-3 text-red-500 hover:text-red-700 text-sm font-medium"> |
|
Watch on YouTube <i class="fas fa-external-link-alt ml-1"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="sidebar-video bg-white rounded-lg shadow-sm p-4"> |
|
<h3 class="font-bold text-lg mb-4">BujuRocks Projects</h3> |
|
<div class="space-y-4"> |
|
<a href="https://huggingface.co/spaces/Bujurocks/music" target="_blank" class="block p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"> |
|
<div class="flex items-center"> |
|
<div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-music text-indigo-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">Music AI Space</h4> |
|
<p class="text-gray-600 text-xs">Explore AI music generation</p> |
|
</div> |
|
</div> |
|
</a> |
|
<a href="https://huggingface.co/Bujurocks" target="_blank" class="block p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"> |
|
<div class="flex items-center"> |
|
<div class="bg-purple-100 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-robot text-purple-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">AI Models</h4> |
|
<p class="text-gray-600 text-xs">Collection of AI models</p> |
|
</div> |
|
</div> |
|
</a> |
|
|
|
<a href="https://youtu.be/ZtvvvBnjOZI?si=XHstZLcNu_ahLntk" target="_blank" class="block p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"> |
|
<div class="flex items-center"> |
|
<div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
|
<i class="fas fa-video text-indigo-600"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-medium">CALLNOMORE</h4> |
|
<p class="text-gray-600 text-xs">BujuRocks Music Video</p> |
|
</div> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="bg-gray-100 mt-12"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
<div class="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between"> |
|
<div class="flex space-x-6 md:order-2"> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-apple"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
<i class="fab fa-google-play"></i> |
|
</a> |
|
</div> |
|
<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
|
© 2023 Genius, Inc. All rights reserved. |
|
</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const mobileMenuButton = document.querySelector('.sm\\:hidden button'); |
|
const mobileMenu = document.querySelector('.sm\\:hidden'); |
|
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
|
console.log('Mobile menu button clicked'); |
|
}); |
|
|
|
|
|
const playButton = document.querySelector('.play-button'); |
|
playButton.addEventListener('click', function() { |
|
console.log('Play all songs'); |
|
}); |
|
|
|
|
|
const tabs = document.querySelectorAll('[role="tab"]'); |
|
tabs.forEach(tab => { |
|
tab.addEventListener('click', function() { |
|
tabs.forEach(t => t.classList.remove('tab-active')); |
|
this.classList.add('tab-active'); |
|
}); |
|
}); |
|
|
|
|
|
const bujuCards = document.querySelectorAll('.buju-card'); |
|
bujuCards.forEach(card => { |
|
card.addEventListener('mouseenter', function() { |
|
this.style.transform = 'translateY(-5px)'; |
|
}); |
|
card.addEventListener('mouseleave', function() { |
|
this.style.transform = ''; |
|
}); |
|
}); |
|
|
|
|
|
const callnomoreCards = document.querySelectorAll('.callnomore-card'); |
|
callnomoreCards.forEach(card => { |
|
card.addEventListener('mouseenter', function() { |
|
this.style.transform = 'translateY(-5px)'; |
|
}); |
|
card.addEventListener('mouseleave', function() { |
|
this.style.transform = ''; |
|
}); |
|
}); |
|
}); |
|
</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/hybe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |