| | <!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: '#0f极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录172a', |
| | charcoal: '#1e293b', |
| | 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, #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 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录0 30px #a855f7' |
| | } |
| | } |
| | } |
| | } |
| | </script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist极速赛车开奖官网历史记录【——qq:496781极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录54——】.极速赛车开奖官网历史记录/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/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, 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 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, #a855极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录f7, #ec4899) border-box; |
| | } |
| | |
| | .collection-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); |
| | } |
| | |
| | .collection-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2); |
| | } |
| | |
| | .stats-card { |
| | background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5)); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .tab-button { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .tab-button.active { |
| | background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)); |
| | box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); |
| | } |
| | |
| | .playlist-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| | gap: 1.5rem; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | |
| | <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 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="#" class="text-gray-300 hover:text-white transition">탐색</a> |
| | <a href="collection.html" class="text-accent-from font-medium 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"> |
| | <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="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-x-1 sm:space-x-2"> |
| | <i data-feather="log-in" class="w-4 h-4"></i> |
| | <span class="hidden xs:block">로그极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录인</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> |
| | |
| | |
| | <button class="md:hidden glass-button p-2" id="mobile-menu-button"> |
| | <极速赛车开奖官网历史记录【——qq:49678154——极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录】.极速赛车开奖官网历史记录i data-feather="menu" class="w-5 h-5"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu"> |
| | <div class="container mx-auto px-4 py-3 flex flex-col space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-y-3"> |
| | <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a> |
| | <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a> |
| | <a href="collection.html" class="text-accent-from font-medium transition py-2">컬렉션</a> |
| | <a href="chart.html" class="text-gray-300 hover:text-white transition py-2">차트</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-700 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> |
| |
|
| | |
| | <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">나의 컬렉션</h1> |
| | <p class="text-lg text-gray-300 max-w-2xl mx-auto">저장한 플레이리스트와 좋아하는 음악들을 모아보세요</p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-8 px-4"> |
| | <div class="container mx-auto"> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| | <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="100"> |
| | <i data-feather="list" class="w-8 h-8 text-accent-from mx-auto mb-4"></i> |
| | <div class="text-3xl font-bold mb-2">8</div> |
| | <p class="text-gray-400">플레이리스트</p> |
| | </div> |
| | |
| | <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="200"> |
| | <i data-feather="heart" class="w-8 h-8 text-red-400 mx-auto mb-4"></i> |
| | <div class="text-3xl font-bold mb-2">127</div> |
| | <p class="text-gray-400">좋아요한 음악</p> |
| | </div> |
| | |
| | <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="300"> |
| | <i data-feather="clock" class="w-8 h-8 text-green-400 mx-auto mb-4"></i> |
| | <div class="text-3xl font-bold mb-2">24.5</div> |
| | <p class="text-gray-400">시간 음악</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-8 px-4"> |
| | <div class="container mx-auto"> |
| | <div class="flex border-b border-gray-800 mb-8 overflow-x-auto"> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-accent-from active" data-tab="playlists"> |
| | 플레이리스트 |
| | </button> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="liked"> |
| | 좋아요한 음악 |
| | </button> |
| | <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="recent"> |
| | 최근 들은 음악 |
| | </button> |
| | </div> |
| | |
| | |
| | <div id="playlists" class="tab-content active"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-semibold">내 플레이리스트</h2> |
| | <button class="glass-button px-4 py-2 text-white flex items-center space-x-2"> |
| | <i data-feather="plus" class="w-4 h-4"></i> |
| | <span>새 플레이리스트</span> |
| | </button> |
| | </div> |
| | |
| | <div class="playlist-grid"> |
| | |
| | <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100"> |
| | <div class="relative"> |
| | <img src="http://static.photos/abstract/400x400/901" alt="Playlist" class="w-full h-48 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">일렉트로닉 에센스</h3> |
| | <p class="text-gray-300 text-sm">24곡 · 2.4K 재생</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full"> |
| | <span class="text-sm text-gray-400">내 플레이리스트</span> |
| | </div> |
| | <button class="glass-button p-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200"> |
| | <div class="relative"> |
| | <img src="http://static.photos/abstract/400x400/902" alt="Playlist" class="w-full h-48 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">아침을 깨우는 AI 음악</h3> |
| | <p class="text-gray-300 text-sm">18곡 · 1.8K 재생</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full"> |
| | <span class="text-sm text-gray-400">내 플레이리스트</span> |
| | </div> |
| | <button class="glass-button p极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="300"> |
| | <div class="relative"> |
| | <img src="http://static.photos/abstract/400x400/903" alt="Playlist" class="w-full h-48 object-cover"> |
| | <div class="absolute inset极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-0 bg-gradient-to-t from-black/60 to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">집중 모드</h3> |
| | <p class="text-gray-300 text-sm">32곡 · 3.2K 재생</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full"> |
| | <span class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="text-sm text-gray-400">내 플레이리스트</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录span> |
| | </div> |
| | <button class="glass-button p-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="400"> |
| | <div class="relative"> |
| | <img src="http://static.photos/abstract/400x400/904" alt="Playlist" class="w-full h-48 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div> |
| | <div class="absolute bottom-4 left-4"> |
| | <h3 class="text-xl font-bold">운동 플레이리스트</h3> |
| | <p class="text-gray-300 text-sm">20곡 · 2.1K 재생</p> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex items-center space-x-2"> |
| | <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-6 rounded-full"> |
| | <span class="text-sm text-gray-400">내 플레이리스트</span> |
| | </div> |
| | <button class="glass-button p-2"> |
| | <i data-feather="play" class="w-4 h-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="liked" class="tab-content hidden"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h2 class="text-xl font-semibold">좋아요한 음악</h2> |
| | <button class="glass-button px-4 py-2 text-white flex items-center space-x-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | <span>모두 재생</span> |
| | </button> |
| | </div> |
| | |
| | <div class="bg-charcoal/50 rounded-2xl p-6"> |
| | <div class="grid grid-cols-1 gap-4"> |
| | |
| | <div class="flex items-center justify-between p-3 rounded-lg hover:bg-navy/50 transition"> |
| | <div class="flex items-center space-x-4"> |
| | <img src="http://static.photos/abstract/64x64/911" alt="Track" class="w-12 h-12 rounded-lg object-cover"> |
| | <div> |
| | <h4 class="font-medium">Cosmic Dreams</h4> |
| | <p class="text-gray-400 text-sm">Soundful AI</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <span class="text-gray-400 text-sm">3:42</span> |
| | <button class="glass-button p-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="flex items-center justify-between p-3 rounded-lg hover:bg-navy/50 transition"> |
| | <div class="flex items-center space-x-4"> |
| | <img src="http://static.photos/abstract/64x64/912" alt="Track" class="w-12 h-12 rounded-lg object-cover"> |
| | <div> |
| | <h4 class="font-medium">Neon Pulse</h4> |
| | <p class="text-gray-400 text-sm">AIVA</p> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <span class="text-gray-400 text-sm">4:15</span> |
| | <button class="glass-button p-2"> |
| | <i data-feather="play" class="w-4 h-4"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="recent" class="tab-content hidden"> |
| | <div class="text-center py-12"> |
| | <i data-feather="clock" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i> |
| | <h3 class="text-xl font-semibold mb-2">최근 들은 음악이 없어요</h3> |
| | <p class="text-gray-400">음악을 재생하면 여기에 표시됩니다</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <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极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-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"></i> |
| | </div> |
| | <span class="text-xl font-bold">AI Music Hub</span> |
| | </div> |
| | <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p> |
| | </div> |
| | |
| | <div> |
| | <h3 class="font-semibold mb-4">서비스</h3> |
| | <ul class="space-y-2"> |
| | <li><a href="#" 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="chart.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">지원</h3> |
| | <ul class="space-y-2"> |
| | <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> |
| | <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录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-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> |
| | </a> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="instagram" class="w-4 h-4"></极速赛车极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i> |
| | </a> |
| | <a href="#" class="glass-button p-2"> |
| | <i data-feather="youtube极速赛车开奖官网历史极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录录【——qq:49678154——】.极速赛车开奖官网历史记录" 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> |
| | </极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | AOS.init({ |
| | duration: 800, |
| | easing: 'ease-in-out', |
| | once: true |
| | }); |
| | |
| | feather.replace(); |
| | |
| | |
| | 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(); |
| | }); |
| | |
| | |
| | const tabButtons = document.querySelectorAll('.tab-button'); |
| | const tabContents = document.querySelectorAll('.tab-content'); |
| | |
| | tabButtons.forEach(button => { |
| | button.addEventListener('click', () => { |
| | const tabId = button.getAttribute('data-tab'); |
| | |
| | |
| | tabButtons.forEach(btn => btn.classList.remove('active')); |
| | button.classList.add('active'); |
| | |
| | |
| | tabContents.forEach(content => { |
| | content.classList.remove('active'); |
| | content.classList.add('hidden'); |
| | }); |
| | |
| | document.getElementById(tabId).classList.remove('hidden'); |
| | document.getElementById(tabId).classList.add('active'); |
| | }); |
| | }); |
| | |
| | |
| | document.addEventListener('click', (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(); |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
