Hugging Face's logo

Spaces:
nkjoy
/
nkmuics
Running

App Files Community
nkmuics / library.html
nkjoy's picture
nkjoy
๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋งŒ๋“ค์–ด์ค˜ - Initial Deployment
d9ba53e verified
raw
history blame contribute delete
25 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ - Melodify</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></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/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;700&display=swap');
body {
 font-family: 'Noto Sans KR', sans-serif;
 background: linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffafcc);
 min-height: 100vh;
 color: #fff;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
.glass-effect {
 background: rgba(255, 255, 255, 0.15);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.25);
 }
.song-card:hover {
 transform: translateY(-5px);
 transition: all 0.3s ease;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
.progress-bar {
 height: 4px;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 2px;
 overflow: hidden;
 }
.progress-fill {
 height: 100%;
 background: #ff6b6b;
 width: 30%;
 }
.player-controls button:hover {
 background: rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 }
.volume-slider {
 -webkit-appearance: none;
 width: 100px;
 height: 4px;
 background: rgba(255, 255, 255, 0.3);
 border-radius: 2px;
 outline: none;
 }
.volume-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #fff;
 cursor: pointer;
 }
.active-tab {
 border-bottom: 2px solid #ff6b6b;
 color: #ff6b6b !important;
 font-weight: 600;
 text-shadow: none;
 }
.genre-chip {
 transition: all 0.2s ease;
 }
.genre-chip:hover {
 background: #ff6b6b;
 color: white;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
.playlist-card {
 transition: all 0.3s ease;
 }
.text-improved {
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
.text-bold {
 font-weight: 600;
 }
.playlist-card:hover .playlist-overlay {
 opacity: 1;
 }
.playlist-overlay {
 opacity: 0;
 transition: opacity 0.3s ease;
 }
/* ๋ฐ˜์‘ํ˜• ๋””์ž์ธ์„ ์œ„ํ•œ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ */
 @media (max-width: 768px) {
 .sidebar {
 transform: translateX(-100%);
 position: fixed;
 z-index: 40;
 height: 100vh;
 }
.sidebar.open {
 transform: translateX(0);
 }
.mobile-menu-button {
 display: block;
 }
 }
 </style>
</head>
<body class="min-h-screen flex flex-col">
 <!-- ์ƒ๋‹จ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” -->
 <nav class="glass-effect fixed w-full z-50">
 <div class="container mx-auto px-4 py-3 flex items-center justify-between">
 <div class="flex items-center space-x-2">
 <i data-feather="music" class="text-pink-500"></i>
 <span class="text-xl font-bold">Melodify</span>
 </div>
<div class="hidden md:flex items-center space-x-6">
 <a href="index.html" class="text-white hover:text-pink-300 transition">ํ™ˆ</a>
 <a href="#" class="text-white hover:text-pink-300 transition">๊ฒ€์ƒ‰</a>
 <a href="library.html" class="text-white hover:text-pink-300 transition active-tab">๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ</a>
 </div>
<div class="flex items-center space-x-4">
 <div class="relative hidden md:block">
 <input type="text" placeholder="์Œ์•…, ์•„ํ‹ฐ์ŠคํŠธ, ์•จ๋ฒ” ๊ฒ€์ƒ‰..."
class="bg-gray-800 text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-pink-500 w-64">
 <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400"></i>
 </div>
<button class="md:hidden mobile-menu-button">
 <i data-feather="menu"></i>
 </button>
<div class="flex items-center space-x-2 cursor-pointer">
 <img src="http://static.photos/people/40x40/1" alt="ํ”„๋กœํ•„" class="w-8 h-8 rounded-full">
 <span class="hidden md:block">์‚ฌ์šฉ์ž๋‹˜</span>
 </div>
 </div>
 </div>
 </nav>
<!-- ๋ชจ๋ฐ”์ผ ์‚ฌ์ด๋“œ๋ฐ” -->
 <div class="sidebar glass-effect w-64 p-6 md:hidden fixed inset-y-0 left-0 transform transition duration-300 ease-in-out">
 <div class="flex justify-between items-center mb-8">
 <div class="flex items-center space-x-2">
 <i data-feather="music" class="text-pink-500"></i>
 <span class="text-xl font-bold">Melodify</span>
 </div>
 <button class="close-sidebar">
 <i data-feather="x"></i>
 </button>
 </div>
<div class="space-y-6">
 <a href="index.html" class="block text-white hover:text-pink-300 transition">ํ™ˆ</a>
 <a href="#" class="block text-white hover:text-pink-300 transition">๊ฒ€์ƒ‰</a>
 <a href="library.html" class="block text-white hover:text-pink-300 transition active-tab">๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ</a>
<div class="pt-6 border-t border-gray-700">
 <h3 class="text-gray-400 uppercase text-xs tracking-wide mb-4">๋‚ด ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ</h3>
 <div class="space-y-3">
 <a href="#" class="block text-white hover:text-pink-300 transition">์ธ์ƒ ์Œ์•…</a>
 <a href="#" class="block text-white hover:text-pink-300 transition">์ž‘์—…์šฉ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ</a>
 <a href="#" class="block text-white hover:text-pink-300 transition">์šด๋™ํ•  ๋•Œ</a>
 </div>
 </div>
 </div>
 </div>
<!-- ๋ฉ”์ธ ์ฝ˜ํ…์ธ  -->
 <main class="flex-1 container mx-auto px-4 pt-24 pb-32">
 <!-- ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ—ค๋” -->
 <section class="mb-8" data-aos="fade-up">
 <div class="flex items-center justify-between">
 <h1 class="text-3xl font-bold">๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ</h1>
 <button class="glass-effect px-4 py-2 rounded-full flex items-center space-x-2">
 <i data-feather="plus" class="w-4 h-4"></i>
 <span>์ƒˆ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ</span>
 </button>
 </div>
 </section>
<!-- ์ข‹์•„์š” ํ‘œ์‹œํ•œ ์Œ์•… -->
 <section class="mb-12" data-aos="fade-up">
 <h2 class="text-2xl font-bold mb-6">์ข‹์•„์š” ํ‘œ์‹œํ•œ ์Œ์•…</h2>
<div class="glass-effect rounded-2xl p-6">
 <div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="border-b border-gray-700">
 <th class="pb-3 text-left text-gray-400">#</th>
 <th class="pb-3 text-left text-gray-400">์ œ๋ชฉ</th>
 <th class="pb-3 text-left text-gray-400">์•„ํ‹ฐ์ŠคํŠธ</th>
 <th class="pb-3 text-left text-gray-400">์•จ๋ฒ”</th>
 <th class="pb-3 text-left text-gray-400">์ถ”๊ฐ€ํ•œ ๋‚ ์งœ</th>
 <th class="pb-3 text-left text-gray-400"></th>
 </tr>
 </thead>
 <tbody>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4">1</td>
 <td class="py-4 font-medium">๊ฐ์„ฑ ๋ฐœ๋ผ๋“œ</td>
 <td class="py-4 text-gray-300">๋ฐœ๋ผ๋“œ ๊ฐ€์ˆ˜</td>
 <td class="py-4 text-gray-300">๊ฐ์„ฑ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">3์ผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4">2</td>
 <td class="py-4 font-medium">๋Œ„์Šค ํƒ€์ž„</td>
 <td class="py-4 text-gray-300">ํŒ ์Šคํƒ€</td>
 <td class="py-4 text-gray-300">๋Œ„์Šค ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">1์ฃผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4">3</td>
 <td class="py-4 font-medium">ํž™ํ•ฉ ๋น„ํŠธ</td>
 <td class="py-4 text-gray-300">๋ž˜ํผ ์ด๋ฆ„</td>
 <td class="py-4 text-gray-300">ํž™ํ•ฉ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">2์ฃผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4">4</td>
 <td class="py-4 font-medium">์ผ๋ ‰ํŠธ๋กœ๋‹‰</td>
 <td class="py-4 text-gray-300">EDM ์•„ํ‹ฐ์ŠคํŠธ</td>
 <td class="py-4 text-gray-300">์ผ๋ ‰ํŠธ๋กœ๋‹‰ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">3์ฃผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
<!-- ๋‚ด ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ -->
 <section class="mb-12" data-aos="fade-up">
 <h2 class="text-2xl font-bold mb-6">๋‚ด ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <div class="playlist-card glass-effect rounded-xl overflow-hidden cursor-pointer">
 <div class="relative">
 <img src="http://static.photos/music/600x600/20" alt="ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ" class="w-full h-48 object-cover">
 <div class="playlist-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <button class="bg-pink-600 p-4 rounded-full hover:bg-pink-700 transition">
 <i data-feather="play" class="w-6 h-6"></i>
 </button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-medium mb-1 text-bold">์ธ์ƒ ์Œ์•…</h3>
 <p class="text-gray-200 text-sm">15๊ณก ยท 1์‹œ๊ฐ„ 10๋ถ„</p>
 </div>
 </div>
<div class="playlist-card glass-effect rounded-xl overflow-hidden cursor-pointer">
 <div class="relative">
 <img src="http://static.photos/music/600x600/21" alt="ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ" class="w-full h-48 object-cover">
 <div class="playlist-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <button class="bg-pink-600 p-4 rounded-full hover:bg-pink-700 transition">
 <i data-feather="play" class="w-6 h-6"></i>
 </button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-medium mb-1 text-bold">์ž‘์—…์šฉ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ</h3>
 <p class="text-gray-200 text-sm">20๊ณก ยท 1์‹œ๊ฐ„ 30๋ถ„</p>
 </div>
 </div>
<div class="playlist-card glass-effect rounded-xl overflow-hidden cursor-pointer">
 <div class="relative">
 <img src="http://static.photos/music/600x600/22" alt="ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ" class="w-full h-48 object-cover">
 <div class="playlist-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
 <button class="bg-pink-600 p-4 rounded-full hover:bg-pink-700 transition">
 <i data-feather="play" class="w-6 h-6"></i>
 </button>
 </div>
 </div>
 <div class="p-4">
 <h3 class="font-medium mb-1 text-bold">์šด๋™ํ•  ๋•Œ</h3>
 <p class="text-gray-200 text-sm">25๊ณก ยท 1์‹œ๊ฐ„ 45๋ถ„</p>
 </div>
 </div>
 </div>
 </section>
<!-- ์ตœ๊ทผ ์žฌ์ƒํ•œ ์Œ์•… -->
 <section class="mb-12" data-aos="fade-up">
 <h2 class="text-2xl font-bold mb-6">์ตœ๊ทผ ์žฌ์ƒํ•œ ์Œ์•…</h2>
<div class="glass-effect rounded-2xl p-6">
 <div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="border-b border-gray-700">
 <th class="pb-3 text-left text-gray-400">์ œ๋ชฉ</th>
 <th class="pb-3 text-left text-gray-400">์•„ํ‹ฐ์ŠคํŠธ</th>
 <th class="pb-3 text-left text-gray-400">์•จ๋ฒ”</th>
 <th class="pb-3 text-left text-gray-400">์žฌ์ƒ ์‹œ๊ฐ„</th>
 <th class="pb-3 text-left text-gray-400"></th>
 </tr>
 </thead>
 <tbody>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4 font-medium">๊ฐ์„ฑ ๋ฐœ๋ผ๋“œ</td>
 <td class="py-4 text-gray-300">๋ฐœ๋ผ๋“œ ๊ฐ€์ˆ˜</td>
 <td class="py-4 text-gray-300">๊ฐ์„ฑ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">์˜ค๋Š˜</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4 font-medium">๋Œ„์Šค ํƒ€์ž„</td>
 <td class="py-4 text-gray-300">ํŒ ์Šคํƒ€</td>
 <td class="py-4 text-gray-300">๋Œ„์Šค ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">์–ด์ œ</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-700 hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="py-4 font-medium">ํž™ํ•ฉ ๋น„ํŠธ</td>
 <td class="py-4 text-gray-300">๋ž˜ํผ ์ด๋ฆ„</td>
 <td class="py-4 text-gray-300">ํž™ํ•ฉ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">2์ผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 <tr class="hover:bg-white hover:bg-opacity-10 cursor-pointer">
 <td class="ๆž font-medium">์ผ๋ ‰ํŠธ๋กœ๋‹‰</td>
 <td class="py-4 text-gray-300">EDM ์•„ํ‹ฐ์ŠคํŠธ</td>
 <td class="py-4 text-gray-300">์ผ๋ ‰ํŠธ๋กœ๋‹‰ ์•จ๋ฒ”</td>
 <td class="py-4 text-gray-300">3์ผ ์ „</td>
 <td class="py-4">
 <button class="text-pink-400 hover:text-pink-300">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
 </main>
<!-- ์Œ์•… ํ”Œ๋ ˆ์ด์–ด -->
 <div class="fixed bottom-0 left-0 right-0 glass-effect p-4">
 <div class="container mx-auto flex items-center justify-between">
 <div class="flex items-center space-x-4 w-1/4">
 <img src="http://static.photos/music/60x60/1" alt="ํ˜„์žฌ ์žฌ์ƒ ์ค‘" class="w-12 h-12 rounded">
 <div>
 <p class="font-medium text-sm truncate text-bold">ํ˜„์žฌ ์žฌ์ƒ ์ค‘์ธ ๋…ธ๋ž˜</p>
 <p class="text-gray-200 text-xs">์•„ํ‹ฐ์ŠคํŠธ</p>
 </div>
 <button>
 <i data-feather="heart" class="w-ๆž h-4 text-gray-300 hover:text-pink-400"></i>
 </button>
 </div>
<div class="flex flex-col items-center w-2/4">
 <div class="player-controls flex items-center space-x-6 mb-2">
 <button>
 <ๆž data-feather="shuffle" class="w-4 h-4 text-gray-400 hover:text-white"></i>
 </button>
 <button>
 <i data-feather="skip-back" class="w-5 h-5 hover:text-white"></i>
 </button>
 <button class="bg-white p-3 rounded-full hover:bg-gray-200">
 <i data-feather="play" class="w-5 h-5 text-black"></i>
 </button>
 ๆž button>
 <i data-feather="skip-forward" class="w-5 h-5 hover:text-white"></i>
 </button>
 <button>
 <i data-feather="repeat" class="w-4 h-4 text-gray-400 hover:text-white"></i>
 </button>
 </div>
<div class="w-full flex items-center space-x-3">
 <span class="text-xs text-gray-300">1:23</span>
 <div class="progress-bar flex-1">
 <div class="progress-fill"></div>
 </div>
 <span class="text-xs text-gray-300">4:15</span>
 </div>
 </div>
<div class="flex items-center justify-end space-x-4 w-1/4">
 <button>
 <i data-feather="list" class="w-4 h-4 hover:text-white"></i>
 </button>
 <div class="flex items-center space-x-2">
 <i data-feather="volume-2" class="w-4 h-4"></i>
 <input type="range" min="0" max="100" value="80" class="volume-slider">
 </div>
 </div>
 </div>
 </div>
<script>
 // AOS ์ดˆ๊ธฐํ™”
 AOS.init({
 duration: 800,
 easing: 'ease-in-out',
 once: true
 });
// Feather ์•„์ด์ฝ˜ ์ดˆ๊ธฐํ™”
 feather.replace();
// ๋ชจ๋ฐ”์ผ ์‚ฌ์ด๋“œ๋ฐ” ํ† ๊ธ€
 document.querySelector('.mobile-menu-button').addEventListener('click', function() {
 document.querySelector('.sidebar').classList.add('open');
 });
document.querySelector('.close-sidebar').addEventListener('click', function() {
 document.querySelector('.sidebar').classList.remove('open');
 });
// ์Œ์•… ์žฌ์ƒ ์‹œ๋ฎฌ๋ ˆ์ด์…˜
 const playButtons = document.querySelectorAll('.song-card button, .playlist-overlay button, table button');
 const playerPlayButton = document.querySelector('.player-controls button:nth-child(3)');
 let isPlaying = false;
playButtons.forEach(button => {
 button.addEventListener('click', function() {
 // ํ”Œ๋ ˆ์ด์–ด์— ์Œ์•… ์ •๋ณด ์—…๋ฐ์ดํŠธ
 const row = this.closest('tr');
 if (row) {
 const title = row.querySelector('td:nth-child(1)').textContent;
 const artist = row.querySelector('td:nth-child(2)').textContent;
document.querySelector('.fixed.bottom-0 .font-medium').textContent = title;
 document.querySelector('.fixed.bottom-0 .text-gray-400').textContent = artist;
 }
// ์žฌ์ƒ ์ƒํƒœ๋กœ ๋ณ€๊ฒฝ
 playerPlayButton.innerHTML = '<i data-feather="pause" class="w-5 h-5 text-black"></i>';
 feather.replace();
 isPlaying = true;
 });
 });
// ์žฌ์ƒ/์ผ์‹œ์ •์ง€ ํ† ๊ธ€
 playerPlayButton.addEventListener('click', function() {
 if (isPlaying) {
 this.innerHTML = '<i data-feather="play" class="w-5 h-5 text-black"></i>';
 } else {
 this.innerHTML = '<i data-feather="pause" class="w-5 h-5 text-black"></i>';
 }
 feather.replace();
 isPlaying = !isPlaying;
 });
// ์ข‹์•„์š” ํ† ๊ธ€
 const likeButton = document.querySelector('.fixed.bottom-0 button:nth-child(3)');
 likeButton.addEventListener('click', function() {
 const heartIcon = this.querySelector('i');
 if (heartIcon.classList.contains('text-gray-400')) {
 heartIcon.classList.remove('text-gray-400');
 heartIcon.classList.add('text-red-500');
 } else {
 heartIcon.classList.remove('text-red-500');
 heartIcon.classList.add('text-gray-400');
 }
 });
 </script>
</body>
</html>