hybe / index.html
Bujurocks's picture
Add 3 files
792d2c9 verified
<!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">
<!-- Navigation -->
<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>
<!-- Artist Header -->
<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>
<!-- Main Content with Sidebar -->
<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">
<!-- Main Content Area -->
<div class="flex-1">
<!-- Tabs -->
<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>
<!-- Featured Links Section -->
<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>
<!-- New CALLNOMORE Card -->
<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>
<!-- Songs List -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
<div class="divide-y divide-gray-200">
<!-- Song Item -->
<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>
<!-- Song Item -->
<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>
<!-- Song Item -->
<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>
<!-- Song Item -->
<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>
<!-- Song Item -->
<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>
<!-- About Section -->
<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>
<!-- Sidebar with YouTube Video -->
<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>
<!-- New CALLNOMORE Sidebar Item -->
<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 -->
<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">
&copy; 2023 Genius, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.sm\\:hidden button');
const mobileMenu = document.querySelector('.sm\\:hidden');
mobileMenuButton.addEventListener('click', function() {
// This would toggle a mobile menu if implemented
console.log('Mobile menu button clicked');
});
// Play button animation
const playButton = document.querySelector('.play-button');
playButton.addEventListener('click', function() {
console.log('Play all songs');
});
// Tab switching functionality
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');
});
});
// BujuRocks card animation
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 = '';
});
});
// CALLNOMORE card animation
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>