Hugging Face's logo

Spaces:
nkjoy
/
aimuisc
Running

App Files Community
aimuisc / explore.html
nkjoy's picture
nkjoy
탐색 페이지도 만들어줘! - Follow Up Deployment
5bad1ac verified
raw
history blame contribute delete
38.1 kB
 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탐색 - AI Music Hub</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
navy: '#0f172a',
charcoal: '#1极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录e293b',
accent: {
from: '#a855f7',
to: '#ec4899'
}
},
backgroundImage: {
'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
'neon-glow': 'linear-gradient(45deg, #a855f7极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录, #ec4899, #a855f7)',
},
boxShadow: {
'neon': '0 0 5px #a855f7, 0 0 10px #ec4899, 0 0 15px #a855f7',
'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7'
}
}
}
}
</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极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录/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=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #f8fafc;
min-height: 100vh;
}
.glass-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖极速赛车开奖官网历史记录【——qq极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录:49678154——】.极速赛车开奖官网历史记录官网历史记录0.05));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.glass-button:hover {
box-shadow: 0 0 10px #a855f7, 0 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录0 20px #ec4899, 0 0 30px #a855f7;
transform: translateY(-2px);
}
.neon-border {
border: 1px solid transparent;
background: linear-gradient(#0f172a, #0f172a) padding-box,
linear-gradient(45deg, #a855f7, #ec4899) border-box;
}
.track-card {
transition: all 0.3s ease;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
backdrop-filter: blur(10px);
}
.track-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
}
.progress-bar {
appearance: none;
height: 4px;
border-radius: 2px;
background: #334155;
outline: none;
}
.progress-bar::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(45deg, #a855f7, #ec4899);
cursor: pointer;
box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
}
.search-input {
background: rgba(30, 41, 59, 0.5);
backdrop-filter: blur(10px);
}
.search-input:focus {
box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
}
.category-chip {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.category-chip.active {
background: linear-gradient(45deg, #a855f7, #ec4899);
box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}
.filter-panel {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<a href="index.html" class="flex items-center space-x-2">
<div class="w-8极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
<i data-feather="music" class="text-white"></i>
</div>
<span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
</a>
<div class="hidden md:flex items-center space-x-6">
<a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
<a href="explore.html" class="text-accent-from font-medium transition">탐색</a>
<a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a>
<a href="chart.html" class="text-gray-300 hover:text-white transition">차트</a>
</div>
<div class="flex items-center space-x-2 sm:space-x-4">
<div class="relative hidden sm:block">
<input type="text" placeholder="음악 검색..." class="search-input py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
</div>
<a href="upload.html" class="glass-button px-3 py-2 sm:px-4 text-white flex items-center space-x-1 sm:space-x-2">
<i data-feather="plus" class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="w-4 h-4"></i>
<span class="hidden xs:block">업로드</span>
</a>
<a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-1 sm:space-x-2">
<i data-feather="log-in" class="w-4 h-4"></i>
<span class="hidden xs:block">로그인</span>
</a>
<a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
<i data-feather="user" class="w-4 h-4"></i>
<span class="hidden xs:block">마이페이지</span>
</a>
<!-- Mobile menu button -->
<button class="md:hidden glass-button p-2" id="mobile-menu-button">
<i data-feather="menu" class="w-5 h-5"></极速赛车开奖官网历史记录【——qq:49678154——】.极极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录速赛车开奖官网历史记录i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
<div class="container mx-auto px-4极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 py-3 flex flex-col space-y-3">
<a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a>
<a href="explore.html" class="text-accent-from font-medium transition py-2">탐색</a>
<a href="collection.html" class="text-gray-300 hover:text-white transition py-2">컬렉션</a>
<a href="chart.html" class="text-gray-300 hover:text-white transition py-2">차极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录트</a>
<div class="relative block sm:hidden pt-2">
<input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-7极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录00 focus:outline-none focus:border-transparent">
<i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
</div>
</div>
</div>
</nav>
<!-- Explore Header -->
<section class="pt-28 pb-8 px-4">
<div class="container mx-auto text-center" data-aos="fade-up">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">AI 음악 탐색</h1>
<p class="text-lg text-gray-300 max-w-2xl mx-auto">다양한 AI 생성 음악을 발견하고 새로운 사운드를 경험해보세요</p>
</div>
</section>
<!-- Search and Filters -->
<section class="py-6 px-4">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row gap-4 mb-8">
<!-- Search Bar -->
<div class="flex-1 relative">
<input type="text" placeholder="아티스트, 곡, 장르로 검색..." class="search-input w-full py-3 px-4 pl-12 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
<i data-feather="search" class="absolute left-4 top-3.5 text-gray-400"></i>
</div>
<!-- Filter Button -->
<button class="glass-button px-6 py-3 text-white flex items-center space-x-2" id="filter-button">
<i data-feather="filter" class="w-4 h-4"></i>
<span>필터</span>
</button>
</div>
<!-- Filter Panel -->
<div class="filter-panel rounded-2xl p-6 mb-8 hidden" id="filter-panel">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h3 class="font-semibold mb-4">장르</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>일렉트로닉</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>앰비언트</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>팝</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>힙합</span>
</label>
</div>
</div>
<div>
<h3 class="font-semibold mb-4">AI 도구</h3>
<div class="space-y-2">
<label class="flex items-center space-x极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>Soundful AI</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>AIVA</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>Amper Music</span>
</label>
<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox rounded text-accent-from">
<span>OpenAI MuseNet</span>
</label>
</div>
</div>
<div>
<h3 class="font-semibold mb-4">정렬</h3>
<div class="space-y-2">
<label class="flex items-center space-x-2">
<input type="radio" name="sort" checked class="form-radio text-accent-from">
<span>인기순</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="sort" class="form-radio text-accent-from">
<span>최신순</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="sort" class="form-radio text-accent-from">
<span>재생시간순</span>
</label>
</div>
</div>
</div>
<div class="flex justify-end mt-6 space-x-3">
<button class="px-4 py-2 text-gray-400 hover:text-white transition">초기화</button>
<button class="glass-button px-6 py-2 text-white">적용</button>
</div>
</div>
<!-- Categories -->
<div class="flex flex-wrap gap-3 mb-8 overflow-x-auto py-2">
<button class="category-chip px-4 py-2 rounded-full text-white active">전체</button>
<button class="category-chip px-4 py-2 rounded-full text-white">인기</button>
<button class="category-chip px-4 py-2 rounded-full text-white">신규</button>
<button class="category-chip px-4 py-2 rounded-full text-white">일렉트로닉</button>
<button class="category-chip px-4 py-2 rounded-full text-white">앰비언트</button>
<button class="category-chip px-4 py-2 rounded-full text-white">팝</button>
<button class="category-chip px-4 py-2 rounded-full text-white">힙합</button>
<button class="category-chip px-4 py-2 rounded-full text-white">클래식</button>
<button class="category-chip px-4 py-2 rounded-full text-white">로파이</button>
</div>
</div>
</section>
<!-- Discover Section -->
<section class="py-8 px-4">
<div class="container mx-auto">
<h2 class="text-2xl font-bold mb-6" data-aos="fade-right">추천 음악</h2>
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
<!-- Track 1 -->
<div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100">
<div class="relative mb-4">
<img src="http://static.photos/abstract/320x320/1001" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
<button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
<i data-feather="play" class="text-white"></i>
</button>
</div>
<div class="mb-3">
<h3 class="font-semibold text-lg mb-1">Digital Dreams</h3>
<p class="text-gray-400 text-sm">Soundful AI · 12K 재생</p>
</div>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<i data-feather="heart" class="w-4 h-4 text-red-400"></i>
<span class="text-sm">2.4K</span>
</div>
<button class="glass-button p-2">
<i data-feather="share" class="w极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-4 h-4"></i>
</button>
</div>
<input type="range" class="progress-bar w-full" value="0">
</div>
<!-- Track 2 -->
<div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200">
<div class="relative mb-4">
<img src="http://static.photos/abstract/320x320/1002" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
<button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
<i data-feather="play" class="text-white"></i>
</button>
</div>
<div class="mb-3">
<h3 class="font-semibold text-lg mb-1">Neon Skyline</h3>
<p class="text-gray-400 text-sm">AIVA · 8.7K 재생</p>
</div>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i data-feather="heart" class="w-4 h-4 text-red-400"></i>
<span class="text-sm">1.8K</span>
</div>
<button class="glass-button p-2">
<i data-feather="share" class="w-4 h-4"></i>
</button>
</div>
<input type="range" class="progress-bar w-full" value="0">
</div>
<!-- Track 3 -->
<div class="track-card rounded-2xl p-4" data-aos="fade-up" data极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-aos-delay="300">
<div class="relative mb-4">
<img src="http://static.photos/abstract/320x320/1003" alt="Cover极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录" class="w-full rounded-xl aspect-square object-cover">
<button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
<i data-feather="play" class="text-white"></i>
</button>
</div>
<div class="mb-3">
<h3 class="font-semibold text-lg mb-1">Quantum Waves</h3>
<p class="text-gray-400 text-sm">Amper Music · 15K 재생</p>
</div>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<i data-feather="heart" class="w-4 h-4 text-red-400"></i>
<span class="text-sm">3.1K</span>
</div>
<button class="glass-button p-2">
<i data-feather="share" class="w-4 h-4"></i>
</button>
</div>
<input type="range" class="progress-bar w-full" value="0">
</div>
<!-- Track 4 -->
<div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="400">
<div class="relative mb-4">
<img src="http://static.photos/abstract/320x320/1004" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
<button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:极速赛车开奖官网历史记录【——qq:49678154——极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录】.极速赛车开奖官网历史记录bg-accent-from transition">
<i data-feather极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="play" class="text-white"></i>
</button>
</div>
<极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录div class="mb-3">
<h3 class="font-semibold text-lg mb-1">Synth Memories</h3>
<p class="text-gray-400 text-sm">OpenAI MuseNet · 9.5K 재생</p>
</div>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center space-x-2">
<i data-feather="heart" class="w-4 h-4 text-red-400"></i>
<span class="text-sm">2.2K</span>
</div>
<button class="glass-button p-2">
<i data-feather="share" class="w-4 h-4"></i>
</button>
</div>
<input type="range" class="progress-bar w-full" value="0">
</div>
</div>
</div>
</section>
<!-- Popular Artists -->
<section class="py-12 px-4">
<div class="container mx-auto">
<h2 class="text-2xl font-bold mb-6" data-aos="fade-right">인기 AI 아티스트</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6">
<!-- Artist 1 -->
<div class="text-center" data-aos="fade-up" data-aos-delay="100">
<div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1101" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">Soundful AI</h3>
<p class="text-gray-400 text-sm">24.5K 팔로워</p>
</div>
<!-- Artist 2 -->
<div class="text-center" data-aos="fade-up" data-aos-delay="200">
<div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1102" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">AIVA</h3>
<p class="text-gray-400 text-sm">18.7K 팔로워</p>
</div>
<!-- Artist 3 -->
<div class="text-center" data-aos="fade-up" data-aos-delay="300">
<div class="极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1103" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">Amper Music</h3>
<p class="text-gray-400 text-sm">32.1K 팔로워</p>
</div>
<!-- Artist 4 -->
<div class="text-center" data-aos="fade-up" data-aos-delay="400">
<div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1104" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">MuseNet</h3>
<p class="text-gray-400 text-sm">15.3K 팔로워</p>
</div>
<!-- Artist 5 -->
<div class="text-center" data-aos="fade-up" data-aos-delay="500">
<div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1105" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">Jukebox AI</h3>
<p class="text-gray-400 text-sm">12.8K 팔로워</p>
</div>
<!-- Artist 6 -->
<div class="text-center" data-aos极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="fade-up" data-aos-delay="600">
<div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
<img src="http://static.photos/people/80x80/1106" alt="Artist" class="w-full h-full rounded-full object-cover">
</div>
<h3 class="font-semibold mb-1">Amadeus Code</h3>
<p class="text-gray-400 text-sm">9.6K 팔로워</p>
</div>
</div>
</div>
</section>
<!-- New Releases -->
<section class="py-12 px-4">
<div class="container mx-auto">
<h2 class="text-2xl font-bold mb-6" data-aos="fade-right">최신 릴리즈</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-c极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录ols-3 gap-4 sm:gap-6">
<!-- New Track 1 -->
<div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x-4" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/abstract/120x120/1201" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-sm sm:text-base mb-1 truncate">Neural Echo</h3>
<p class="text-gray-400 text-xs sm:text-sm truncate">Jukebox AI · 1.2K 재생</p>
</div>
<button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
<i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
</button>
</div>
<!-- New Track 2 -->
<div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-4" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/abstract/120x120/1202" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
<div class="flex-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录1 min-w-0">
<h3 class="font-semibold text-sm sm:text-base mb极速赛车开奖官网历史记录【——qq:49678154——】极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录历史记录-1 truncate">Digital Dawn</h3>
<p class="text-gray-400 text-xs sm:text-sm truncate">Amadeus Code · 890 재생</p>
</div>
<button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
<i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
</button>
</div>
<!-- New Track 3 -->
<div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x-4" data-aos="fade-up" data-aos-delay="300">
<img src="http://static.photos/abstract/120x120/1203" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-sm sm:text-base mb-1 truncate">AI Symphony</h3>
<p class="text-gray-400 text-xs sm:text-sm truncate">Ecrett Music · 1.5K 재생</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录p>
</div>
<button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
<i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-4 border-t border-gray-800 mt-12">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
<i data-feather="music" class="text-white"></极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i>
</div>
<span class="text-xl font-bold">AI Music Hub</span>
</div>
<p class="极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
</div>
<div>
<h3 class="font-semibold mb-4">서비스</h3>
<ul class="space-y-2">
<li><a href="explore.html" class="text-gray-400 hover:text-white transition">탐색</a></li>
<li><a href="chart.html" class="text-gray-400 hover:text-white transition">차트</a></li>
<li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
<li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold mb-4">지원</h极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录400 hover:text-white transition">고객센터</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">문의하기</a></li>
</ul>
</div>
<div>
<h3 class="font-semibold mb-4">소셜 미디어</h3>
<div class="flex space-x-4">
<a href="#" class="glass-button p极速赛车开奖官网历史极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
<i data-feather="facebook" class="w-4 h-4"></i>
</a>
<a href="#" class="glass-button p-2">
<i data-feather="twitter" class="w-4 h-4"></i>
</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录a>
<a href="#" class="glass-button p-2">
<i data-feather="instagram" class="w-4 h-4"></i>
</a>
<a href="#" class="glass-button p-2">
<i data-feather="youtube" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2023 AI Music Hub. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Mobile menu functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
const icon = mobileMenuButton.querySelector('i');
if (mobileMenu.classList.contains('hidden')) {
icon.setAttribute('data-feather', 'menu');
} else {
icon.setAttribute('data-feather', 'x');
}
feather.replace();
});
// Filter panel functionality
const filterButton = document.getElementById('filter-button');
const filterPanel = document.getElementById('filter-panel');
filterButton.addEventListener('click', () => {
filterPanel.classList.toggle('hidden');
});
// Category chips functionality
const categoryChips = document.querySelectorAll('.category-chip');
categoryChips.forEach(chip => {
chip.addEventListener('click', () => {
categoryChips.forEach(c => c.classList.remove('active'));
chip.classList.add('active');
});
});
// Simple music player functionality
document.querySelectorAll('.track-card button').forEach(button => {
button.addEventListener('click', function() {
const card = this.closest('.track-card');
const range = card.querySelector('input[type="range"]');
// Simulate playback
let value = 0;
const interval = setInterval(() => {
value += 0.5;
range.value = value;
if (value >= 100) {
clearInterval(interval);
range.value = 0;
}
}, 100);
});
});
// Close mobile menu when clicking outside
document.addEventListener('click', (极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录e) => {
if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
const icon = mobileMenuButton.querySelector('i');
icon.setAttribute('data-feather', 'menu');
feather.replace();
}
if (!filterPanel.contains(e.target) && !filterButton.contains(e.target) && !filterPanel.classList.contains('hidden')) {
filterPanel.classList.add('hidden');
}
});
</script>
</body>
</html>