파일 뷰어 구성 요소 - 음악/오디오
음악 및 오디오 플랫폼용으로 설계된 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 생생한 색상과 다크 모드를 지원하는 머티리얼 디자인 미학을 특징으로 합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex">
<!-- Left Pane: Navigation/Categories -->
<div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-400">My Music</h2>
<ul class="space-y-3">
<li>
<a href="#" class="flex items-center p-3 rounded-xl bg-blue-100 text-blue-900 dark:bg-blue-800 dark:text-blue-100 font-semibold shadow-md transition-all duration-300 hover:bg-blue-200 dark:hover:bg-blue-700">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
Home
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></svg>
Playlists
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
Albums
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
Artists
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9c0-4.97-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1-8V7h2v4h4v2h-4v4h-2v-4H7v-2h4z"></path></svg>
Add New
</a>
</li>
</ul>
</div>
<!-- Right Pane: Main Content -->
<div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 flex flex-col">
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-extrabold text-indigo-900 dark:text-indigo-400">Recently Played</h1>
<div class="flex items-center space-x-3">
<input type="text" placeholder="Search music..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-500 transition-all duration-300 w-32 sm:w-48 md:w-64">
<button class="p-2 rounded-full bg-violet-600 text-white shadow-lg transform active:scale-95 transition-all duration-200 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zM3 11V9h10v2H3zm0 3h7v2H3v-2zM3 7h14V5H3v2z"></path></svg>
</button>
</div>
</div>
<!-- File/Track Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 flex-grow">
<!-- Track Card 1 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Journey's End</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Melodies of the Sky</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">3:45</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 2 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Echoes of the Past</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">The Whispering Woods</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">4:10</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 3 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Moonlit Serenade</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nightfall Orchestra</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">5:00</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 4 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">City Lights Dream</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Urban Harmonics</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">3:15</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
<!-- Track Card 5 -->
<div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Forest Lullaby</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nature's Symphony</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">2:58</span>
<button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
</button>
<button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
</button>
</div>
</div>
</div>
<!-- Paginator (Example) -->
<div class="flex justify-center mt-8">
<nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-600 text-sm font-medium text-white z-10 dark:border-indigo-500 dark:bg-indigo-600">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">...
</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
10
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
<!-- Floating Action Button (FAB) / Global Player Control -->
<div class="fixed bottom-6 right-6 z-50">
<button class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-400 to-cyan-600 text-white flex items-center justify-center shadow-2xl transform active:scale-90 transition-all duration-300 hover:shadow-cyan-400/50 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-cyan-700">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
<span class="sr-only">Play Now</span>
</button>
</div>
</div>관련 구성 요소
파일 뷰어 구성 요소
재질 디자인에서 영감을 받은 파일 뷰어 구성 요소로, 미리보기 이미지, 파일 이름, 파일 크기 및 사용자 아바타와 함께 파일 목록을 표시합니다. 반응형 디자인과 어두운 테마를 지원합니다.
Skeuomorphic_Monochromatic_File_Viewer
시장을 위한 복잡한 스큐어모픽 파일 뷰어 구성 요소로, 단색 색 구성표로 설계되었습니다. 여기에는 파일 목록, 미리보기 창, 작업 버튼 및 자세한 정보 섹션이 포함되어 있으며 모두 완벽하게 반응하고 다크 모드를 지원합니다.