Hugging Face's logo

Spaces:
nkjoy
/
nkmuics
Running

App Files Community
nkmuics / index.html
nkjoy's picture
nkjoy
๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋งŒ๋“ค์–ด์ค˜ - Initial Deployment
d9ba53e verified
raw
history blame contribute delete
24.2 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">๋‚ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ</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="#" 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 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-12" data-aos="fade-up">
 <div class="glass-effect rounded-2xl p-8 md:p-12 flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-6 md:mb-0">
 <h1 class="text-4xl md:text-5xl font-bold mb-4">๋‹น์‹ ๋งŒ์„ ์œ„ํ•œ ์Œ์•…</h1>
 <p class="text-xl text-gray-300 mb-6">์ˆ˜๋ฐฑ๋งŒ ๊ณก์˜ ์Œ์•…์„ ๋ฌด์ œํ•œ์œผ๋กœ ์ŠคํŠธ๋ฆฌ๋ฐํ•˜๊ณ , ๊ฐœ์ธ ๋งž์ถค ์ถ”์ฒœ์„ ๋ฐ›์•„๋ณด์„ธ์š”.</p>
 <button class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-medium transition">
 ์ง€๊ธˆ ์‹œ์ž‘ํ•˜๊ธฐ
 </button>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <img src="http://static.photos/music/500x500/1" alt="์Œ์•… ์ŠคํŠธ๋ฆฌ๋ฐ" class="rounded-2xl w-full max-w-md">
 </div>
 </div>
 </section>
<!-- ์ธ๊ธฐ ์Œ์•… ์„น์…˜ -->
 <section class="mb-12" data-aos="fade-up">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold">์ธ๊ธฐ ์Œ์•…</h2>
 <div class="flex space-x-2">
 <button class="px-4 py-2 rounded-full glass-effect text-sm active-tab">์ธ๊ธฐ์ˆœ</button>
 <button class="px-4 py-2 rounded-full glass-effect text-sm">์ตœ์‹ ์ˆœ</button>
 <button class="px-4 py-2 rounded-full glass-effect text-sm">์žฅ๋ฅด๋ณ„</button>
 </div>
 </div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
 <!-- ์Œ์•… ์นด๋“œ -->
 <div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/1" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">๋…ธ๋ž˜ ์ œ๋ชฉ</h3>
 <p class="text-gray-400 text-sm truncate">์•„ํ‹ฐ์ŠคํŠธ ์ด๋ฆ„</p>
 </div>
<!-- ๋” ๋งŽ์€ ์Œ์•… ์นด๋“œ๋“ค -->
 <div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/2" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">๋Œ„์Šค ํƒ€์ž„</h3>
 <p class="text-gray-400 text-sm truncate">ํŒ ์Šคํƒ€</p>
 </div>
<div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/3" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">๊ฐ์„ฑ ๋ฐœ๋ผ๋“œ</h3>
 <p class="text-gray-400 text-sm truncate">๋ฐœ๋ผ๋“œ ๊ฐ€์ˆ˜</p>
 </div>
<div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/4" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">ํž™ํ•ฉ ๋น„ํŠธ</h3>
 <p class="text-gray-400 text-sm truncate">๋ž˜ํผ ์ด๋ฆ„</p>
 </div>
<div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/5" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">์ผ๋ ‰ํŠธ๋กœ๋‹‰</h3>
 <p class="text-gray-400 text-sm truncate">EDM ์•„ํ‹ฐ์ŠคํŠธ</p>
 </div>
<div class="song-card glass-effect rounded-xl p-4 cursor-pointer">
 <div class="relative mb-4">
 <img src="http://static.photos/music/300x300/6" alt="์Œ์•… ์•จ๋ฒ”" class="w-full rounded-lg">
 <button class="absolute bottom-2 right-2 bg-purple-600 p-3 rounded-full hover:bg-purple-700 transition">
 <i data-feather="play" class="w-4 h-4"></i>
 </button>
 </div>
 <h3 class="font-medium truncate">๋ฝ ์•ค ๋กค</h3>
 <p class="text-gray-400 text-sm truncate">๋ฝ ๋ฐด๋“œ</p>
 </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-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
 <div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="music" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>ํŒ</p>
 </div>
<div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="activity" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>ํž™ํ•ฉ</p>
 </div>
<div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="heart" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>R&B</p>
 </div>
<div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="zap" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>์ผ๋ ‰ํŠธ๋กœ๋‹‰</p>
 </div>
<div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="star" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>๋ฝ</p>
 </div>
<div class="genre-chip glass-effect rounded-xl p-6 text-center cursor-pointer">
 <i data-feather="mic" class="w-8 h-8 mx-auto mb-2 text-purple-400"></i>
 <p>๋ฐœ๋ผ๋“œ</p>
 </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/10" 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">30๊ณก ยท 2์‹œ๊ฐ„</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/11" 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์‹œ๊ฐ„ 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/12" 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์‹œ๊ฐ„ 15๋ถ„</p>
 </div>
 </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-4 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>
 <i 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');
 const playerPlayButton = document.querySelector('.player-controls button:nth-child(3)');
 let isPlaying = false;
playButtons.forEach(button => {
 button.addEventListener('click', function() {
 // ํ”Œ๋ ˆ์ด์–ด์— ์Œ์•… ์ •๋ณด ์—…๋ฐ์ดํŠธ
 const card = this.closest('.song-card') || this.closest('.playlist-card');
 const title = card.querySelector('h3').textContent;
 const artist = card.querySelector('p').textContent;
 const imgSrc = card.querySelector('img').src;
document.querySelector('.fixed.bottom-0 img').src = imgSrc;
 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');
 }
 });
// ํƒญ ์ „ํ™˜
 const tabButtons = document.querySelectorAll('.flex.space-x-2 button');
 tabButtons.forEach(button => {
 button.addEventListener('click', function() {
 tabButtons.forEach(btn => btn.classList.remove('active-tab'));
 this.classList.add('active-tab');
 });
 });
 </script>
</body>
</html>