Hugging Face's logo

Spaces:
nkjoy
/
audio
Running

App Files Community
audio / index.html
nkjoy's picture
nkjoy
์ด๋ฒˆ์—” ์˜ค๋””์˜คํ”Œ๋ ˆ์ด์–ด ๋งŒ๋“ค์ž - Follow Up Deployment
f0c0241 verified
raw
history blame contribute delete
64.4 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Harmony Audiobooks - ์˜ํ˜ผ์„ ์œ„ํ•œ ์†Œ๋ฆฌ</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#5E35B1',
 secondary: '#FFAB00',
 dark: '#1A237E',
 light: '#E8EAF6',
 },
 fontFamily: {
 sans: ['"Noto Sans KR"', 'sans-serif'],
 serif: ['"Noto Serif KR"', 'serif'],
 },
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap');
body {
 background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 100%);
 }
.hero-pattern {
 background: linear-gradient(135deg, rgba(94,53,177,0.8) 0%, rgba(26,35,126,0.9) 100%),
radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
 background-size: 20px 20px;
 }
.book-card {
 transition: all 0.3s ease;
 transform-style: preserve-3d;
 perspective: 1000px;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
 }
.book-card:hover {
 transform: translateY(-8px) rotateY(10deg) scale(1.03);
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
.audio-player {
 background: linear-gradient(135deg, #5E35B1 0%, #1A237E 100%);
 }
/* Remove default progress bar styles */
 input[type="range"] {
 -webkit-appearance: none;
 background: transparent;
 }
input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: #FFAB00;
 cursor: pointer;
 transform: translateY(-6px);
 box-shadow: 0 0 5px rgba(255, 171, 0, 0.8);
 transition: all 0.2s ease;
 }
input[type="range"]::-webkit-slider-thumb:hover {
 transform: translateY(-6px) scale(1.2);
 box-shadow: 0 0 8px rgba(255, 221, 0, 0.9);
 }
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
.floating {
 animation: float 4s ease-in-out infinite;
 }
 </style>
</head>
<body class="font-sans bg-gray-50">
 <!-- Navigation -->
 <nav class="bg-gradient-to-r from-primary to-dark shadow-lg">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <a href="#" class="flex-shrink-0 flex items-center">
 <i class="fas fa-headphones text-primary text-2xl mr-2"></i>
 <span class="text-xl font-bold text-primary">Harmony</span>
 </a>
 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
 <a href="#" class="border-primary text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">ํ™ˆ</a>
 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">์นดํ…Œ๊ณ ๋ฆฌ</a>
 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">๋ฒ ์ŠคํŠธ์…€๋Ÿฌ</a>
 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">์‹ ๊ฐ„</a>
 </div>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:items-center">
 <div class="relative max-w-xs mx-auto">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <i class="fas fa-search text-gray-400"></i>
 </div>
 <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary focus:border-primary sm:text-sm" placeholder="์˜ค๋””์˜ค๋ถ ๊ฒ€์ƒ‰">
 </div>
 <button class="ml-4 bg-primary hover:bg-dark text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">๋กœ๊ทธ์ธ</button>
 <button class="ml-2 bg-secondary hover:bg-opacity-80 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">๋ฌด๋ฃŒ์ฒดํ—˜</button>
 </div>
 <div class="-mr-2 flex items-center sm:hidden">
 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- ์‚ฌ์—ฐ ์ ‘์ˆ˜ ์„น์…˜ -->
 <div class="py-16 bg-light">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">์—ฌ๋Ÿฌ๋ถ„์˜ ์ด์•ผ๊ธฐ๋ฅผ ๋“ค๋ ค์ฃผ์„ธ์š”</h2>
 <p class="mt-4 text-xl text-gray-600">๋‚˜๋ˆ”์˜ ์ •์‹ ์œผ๋กœ ํƒˆ๋ถ๋ฏผ ๋ถ„๋“ค์˜ ์ง„์†”ํ•œ ๊ฒฝํ—˜์„ ์˜ค๋””์˜ค๋ถ์œผ๋กœ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค</p>
 </div>
<div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
 <div class="p-8">
 <form action="#" method="POST">
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-700">์ด๋ฆ„</label>
 <input type="text" name="name" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
 </div>
<div>
 <label for="category" class="block text-sm font-medium text-gray-700">์นดํ…Œ๊ณ ๋ฆฌ</label>
 <select id="category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
 <option>ํƒˆ๋ถ๋ฏผ ์ˆ˜๊ธฐ</option>
 <option>๊ณ ํ–ฅ ํŽธ์ง€</option>
 <option>์ž์ž‘ ์‹œ</option>
 <option>์ž์ž‘ ๊ธ€</option>
 <option>๊ธฐํƒ€ ๊ฒฝํ—˜ ๊ณต์œ </option>
 </select>
 </div>
<div class="sm:col-span-2">
 <label for="title" class="block text-sm font-medium text-gray-700">์ œ๋ชฉ</label>
 <input type="text" name="title" id="title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
 </div>
<div class="sm:col-span-2">
 <label for="content" class="block text-sm font-medium text-gray-700">๋‚ด์šฉ</label>
 <textarea id="content" name="content" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"></textarea>
 </div>
<div class="sm:col-span-2">
 <div class="flex items-start">
 <div class="flex-shrink-0">
 <input id="privacy" name="privacy" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
 </div>
 <div class="ml-3">
 <label for="privacy" class="text-sm text-gray-700">๊ฐœ์ธ์ •๋ณด ์ˆ˜์ง‘ ๋ฐ ์ด์šฉ์— ๋™์˜ํ•ฉ๋‹ˆ๋‹ค</label>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-end">
 <button type="submit" class="ml-3 inline-flex justify-center py-2 px-6 border border-transparent shadow-lg text-sm font-medium rounded-md text-white bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-dark transform hover:-translate-y-1 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
 ์‚ฌ์—ฐ ๋ณด๋‚ด๊ธฐ
 </button>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>
<!-- Hero Section -->
 <div class="hero-pattern relative overflow-hidden">
 <div class="max-w-7xl mx-auto">
 <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
 <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
 <div class="sm:text-center lg:text-left">
 <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
 <span class="block text-primary">์ง„์†”ํ•œ ์ด์•ผ๊ธฐ๊ฐ€ ์ „ํ•˜๋Š”</span>
 <span class="block text-dark">ํŠน๋ณ„ํ•œ ์˜ค๋””์˜ค๋ถ ๊ฒฝํ—˜</span>
 </h1>
 <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
 ํƒˆ๋ถ๋ฏผ์˜ ๊ฒฝํ—˜, ๋งˆ์Œ์„ ๋‹ด์€ ํŽธ์ง€, ๊ฐ๋™์ ์ธ ์‹œ, ์ž์ž‘๊ธ€ ๋“ฑ ์ง„์†”ํ•œ ์ด์•ผ๊ธฐ๋“ค์ด ์Œ์„ฑ์œผ๋กœ ์‚ด์•„๋‚ฉ๋‹ˆ๋‹ค.
 </p>
 <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
 <div class="rounded-md shadow">
 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-dark md:py-4 md:text-lg md:px-10">
 ์ง€๊ธˆ ์‹œ์ž‘ํ•˜๊ธฐ
 </a>
 </div>
 <div class="mt-3 sm:mt-0 sm:ml-3">
 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white border-primary hover:bg-light md:py-4 md:text-lg md:px-10">
 ์ƒ˜ํ”Œ ๋“ฃ๊ธฐ
 </a>
 </div>
 </div>
 </div>
 </main>
 </div>
 </div>
 <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
 <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full floating" src="https://images.unsplash.com/photo-1589998059171-988d887df646?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Woman listening to audiobook">
 </div>
 </div>
<!-- Featured Categories -->
 <div class="py-12 bg-light">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-primary font-semibold tracking-wide uppercase">์นดํ…Œ๊ณ ๋ฆฌ ํƒ์ƒ‰</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">๋‹น์‹ ์˜ ์ทจํ–ฅ์— ๋งž๋Š” ์˜ค๋””์˜ค๋ถ์„ ์ฐพ์•„๋ณด์„ธ์š”</p>
 </div>
<div class="mt-10 grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-6">
 <a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gradient-to-br from-white to-gray-100 shadow-lg transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-hand-holding-heart text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">ํƒˆ๋ถ๋ฏผ ์ˆ˜๊ธฐ</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-envelope text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">๊ณ ํ–ฅ ํŽธ์ง€</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-pen-nib text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">์ž์ž‘ ๊ธ€</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-brain text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">์ž๊ธฐ๊ณ„๋ฐœ</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-chart-line text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">๊ฒฝ์ œ/๊ฒฝ์˜</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-child text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">์–ด๋ฆฐ์ด</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-seedling text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">์—์„ธ์ด</h3>
 </div>
 </div>
 </div>
 </a>
<a href="#" class="group">
 <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-white shadow-md transition duration-300 group-hover:shadow-xl">
 <div class="flex items-center justify-center h-full p-4">
 <div class="text-center">
 <i class="fas fa-history text-3xl text-primary mb-2"></i>
 <h3 class="text-sm font-medium text-gray-900">์—ญ์‚ฌ/๋ฌธํ™”</h3>
 </div>
 </div>
 </div>
 </a>
 </div>
 </div>
 </div>
<!-- Special Collection -->
 <div class="py-16 bg-gradient-to-r from-purple-700 via-primary to-indigo-900 text-white transform -skew-y-1">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold sm:text-4xl">๋งˆ์Œ์œผ๋กœ ์ „ํ•˜๋Š” ํŠน๋ณ„ํ•œ ์ด์•ผ๊ธฐ</h2>
 <p class="mt-4 text-xl">ํƒˆ๋ถ๋ฏผ์˜ ๊ฒฝํ—˜, ํŽธ์ง€, ์‹œ, ์ž์ž‘๊ธ€ ๋“ฑ ์ง„์†”ํ•œ ์ด์•ผ๊ธฐ๋“ค์„ ์Œ์„ฑ์œผ๋กœ ๋งŒ๋‚˜๋ณด์„ธ์š”</p>
 </div>
 <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2">
 <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-8 border border-white border-opacity-20">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-16 w-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-book-reader text-2xl text-white"></i>
 </div>
 <div class="ml-6">
 <h3 class="text-xl font-bold">ํƒˆ๋ถ๋ฏผ์˜ ์ƒ์ƒํ•œ ๊ฒฝํ—˜</h3>
 <p class="mt-2 text-white text-opacity-80">์ง์ ‘ ๊ฒช์€ ์ด์•ผ๊ธฐ๋ฅผ ์ƒ์ƒํ•œ ๋ชฉ์†Œ๋ฆฌ๋กœ ์ „ํ•ฉ๋‹ˆ๋‹ค</p>
 </div>
 </div>
 </div>
 <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-8 border border-white border-opacity-20">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-16 w-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
 <i class="fas fa-envelope-open-text text-2xl text-white"></i>
 </div>
 <div class="ml-6">
 <h3 class="text-xl font-bold">๋งˆ์Œ์„ ๋‹ด์€ ํŽธ์ง€</h3>
 <p class="mt-2 text-white text-opacity-80">๋ฐœ์†ก๋˜์ง€ ๋ชปํ•œ ํŽธ์ง€๋“ค์ด ๋ชฉ์†Œ๋ฆฌ๋กœ ์ „ํ•ด์ง‘๋‹ˆ๋‹ค</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- New Releases -->
 <div class="py-12 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between">
 <div>
 <h2 class="text-2xl font-bold text-gray-900">์‹ ๊ฐ„ ์˜ค๋””์˜ค๋ถ</h2>
 <p class="mt-1 text-sm text-gray-500">์ตœ๊ทผ ์ถœ์‹œ๋œ ์˜ค๋””์˜ค๋ถ์„ ๋งŒ๋‚˜๋ณด์„ธ์š”</p>
 </div>
 <a href="#" class="hidden sm:block text-sm font-medium text-primary hover:text-dark">๋ชจ๋‘ ๋ณด๊ธฐ <span>&rarr;</span></a>
 </div>
<div class="mt-6 grid grid-cols-1 gap-x-4 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
 <!-- Book 1 -->
 <div class="book-card group relative">
 <div class="w-full min-h-80 bg-white aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-90 lg:h-80 lg:aspect-none">
 <div class="relative h-full">
 <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 rounded-md"></div>
 <img src="https://image.yes24.com/goods/114954082/XL" alt="Book cover" class="w-full h-full object-cover object-center">
 <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary bg-opacity-80 hover:bg-opacity-100 text-white rounded-full p-3">
 <i class="fas fa-play text-lg"></i>
 </button>
 <div class="absolute bottom-3 left-3 right-3">
 <h3 class="text-white font-bold truncate">์šฐ๋ฆฌ๊ฐ€ ๋น›์˜ ์†๋„๋กœ ๊ฐˆ ์ˆ˜ ์—†๋‹ค๋ฉด</h3>
 <p class="text-xs text-gray-200">๊น€์ดˆ์—ฝ | ๋ผ์ž„๋ถ์Šค</p>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-white bg-primary px-2 py-1 rounded">5์‹œ๊ฐ„ 42๋ถ„</span>
 <span class="text-sm font-bold text-white">โ‚ฉ12,000</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Book 2 -->
 <div class="book-card group relative">
 <div class="w-full min-h-80 bg-white aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-90 lg:h-80 lg:aspect-none">
 <div class="relative h-full">
 <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 rounded-md"></div>
 <img src="https://image.yes24.com/goods/116611682/XL" alt="Book cover" class="w-full h-full object-cover object-center">
 <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary bg-opacity-80 hover:bg-opacity-100 text-white rounded-full p-3">
 <i class="fas fa-play text-lg"></i>
 </button>
 <div class="absolute bottom-3 left-3 right-3">
 <h3 class="text-white font-bold truncate">๋ถˆํŽธํ•œ ํŽธ์˜์ </h3>
 <p class="text-xs text-gray-200">๊น€ํ˜ธ์—ฐ | ๋‚˜๋ฌด์˜†์˜์ž</p>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-white bg-primary px-2 py-1 rounded">6์‹œ๊ฐ„ 15๋ถ„</span>
 <span class="text-sm font-bold text-white">โ‚ฉ13,500</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Book 3 -->
 <div class="book-card group relative">
 <div class="w-full min-h-80 bg-white aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-90 lg:h-80 lg:aspect-none">
 <div class="relative h-full">
 <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 rounded-md"></div>
 <img src="https://image.yes24.com/goods/122611359/XL" alt="Book cover" class="w-full h-full object-cover object-center">
 <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary bg-opacity-80 hover:bg-opacity-100 text-white rounded-full p-3">
 <i class="fas fa-play text-lg"></i>
 </button>
 <div class="absolute bottom-3 left-3 right-3">
 <h3 class="text-white font-bold truncate">์•„์ฃผ ํฌ๋ฏธํ•œ ๋น›์œผ๋กœ๋„</h3>
 <p class="text-xs text-gray-200">๋ฐฑ๋ฏผ์„ | ๋ฌธํ•™๋™๋„ค</p>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-white bg-primary px-2 py-1 rounded">4์‹œ๊ฐ„ 28๋ถ„</span>
 <span class="text-sm font-bold text-white">โ‚ฉ10,800</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Book 4 - Defector's Memoir -->
 <div class="book-card group relative">
 <div class="w-full min-h-80 bg-white aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-90 lg:h-80 lg:aspect-none">
 <div class="relative h-full">
 <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 rounded-md"></div>
 <img src="https://image.yes24.com/goods/117533273/XL" alt="Book cover" class="w-full h-full object-cover object-center">
 <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary bg-opacity-80 hover:bg-opacity-100 text-white rounded-full p-3">
 <i class="fas fa-play text-lg"></i>
 </button>
 <div class="absolute bottom-3 left-3 right-3">
 <h3 class="text-white font-bold truncate">๋– ๋‚˜์˜จ ๋•…์„ ๋งํ•˜๋‹ค</h3>
 <p class="text-xs text-gray-200">๊น€์˜ํฌ (ํƒˆ๋ถ๋ฏผ) | ํ†ต์ผ๋ฏธ๋””์–ด</p>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-white bg-primary px-2 py-1 rounded">4์‹œ๊ฐ„ 15๋ถ„</span>
 <span class="text-sm font-bold text-white">๋ฌด๋ฃŒ</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Book 5 -->
 <div class="book-card group relative">
 <div class="w-full min-h-80 bg-white aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-90 lg:h-80 lg:aspect-none">
 <div class="relative h-full">
 <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50 rounded-md"></div>
 <img src="https://image.yes24.com/goods/112163395/XL" alt="Book cover" class="w-full h-full object-cover object-center">
 <button class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary bg-opacity-80 hover:bg-opacity-100 text-white rounded-full p-3">
 <i class="fas fa-play text-lg"></i>
 </button>
 <div class="absolute bottom-3 left-3 right-3">
 <h3 class="text-white font-bold truncate">๋‹ฌ๋Ÿฌ๊ตฌํŠธ ๊ฟˆ ๋ฐฑํ™”์ </h3>
 <p class="text-xs text-gray-200">์ด๋ฏธ์˜ˆ | ํŒฉํ† ๋ฆฌ๋‚˜์ธ</p>
 <div class="flex justify-between items-center mt-2">
 <span class="text-xs text-white bg-primary px-2 py-1 rounded">7์‹œ๊ฐ„ 12๋ถ„</span>
 <span class="text-sm font-bold text-white">โ‚ฉ14,900</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 sm:hidden">
 <a href="#" class="text-sm font-medium text-primary hover:text-dark">๋” ๋งŽ์€ ์‹ ๊ฐ„ ๋ณด๊ธฐ <span>&rarr;</span></a>
 </div>
 </div>
 </div>
<!-- Testimonials -->
 <div class="py-16 bg-gradient-to-r from-primary to-dark">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center mb-12">
 <h2 class="text-base text-yellow-200 font-semibold tracking-wide uppercase">์‚ฌ์šฉ์ž ํ›„๊ธฐ</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">Harmony์™€ ํ•จ๊ป˜ํ•œ ์‚ฌ๋žŒ๋“ค์˜ ์ด์•ผ๊ธฐ</p>
 </div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3">
 <div class="bg-white p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="ํ”„๋กœํ•„ ์ด๋ฏธ์ง€" class="w-full h-full object-cover">
 </div>
 <div class="ml-4">
 <h4 class="font-bold text-gray-900">๊น€์ง€์˜</h4>
 <div class="flex items-center mt-1">
 <div class="flex text-yellow-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 </div>
 <p class="text-gray-600">
 "์ถœํ‡ด๊ทผ ์‹œ๊ฐ„์ด ์ด์ œ๋Š” ๊ธฐ๋‹ค๋ ค์ ธ์š”. ์„ฑ์šฐ๋“ค์˜ ๋ชฉ์†Œ๋ฆฌ๊ฐ€ ๋„ˆ๋ฌด ๋”ฐ๋œปํ•˜๊ณ  ์ƒ์ƒํ•ด์„œ ์ฑ… ์†์œผ๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋น ์ ธ๋“ค๊ฒŒ ํ•ด์š”. ์•„์ด๋“ค ๋™ํ™”๋„ ํ•จ๊ป˜ ๋“ฃ๊ณ  ์žˆ์–ด์š”!"
 </p>
 </div>
<div class="bg-white p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="ํ”„๋กœํ•„ ์ด๋ฏธ์ง€" class="w-full h-full object-cover">
 </div>
 <div class="ml-4">
 <h4 class="font-bold text-gray-900">๋ฐ•๋ฏผ์ค€</h4>
 <div class="flex items-center mt-1">
 <div class="flex text-yellow-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star-half-alt"></i>
 </div>
 </div>
 </div>
 </div>
 <p class="text-gray-600">
 "ํšŒ์‚ฌ์—์„œ๋„, ์šด๋™ํ•  ๋•Œ๋„ ํ•ญ์ƒ Harmony์™€ ํ•จ๊ป˜ํ•ด์š”. ์ตœ๊ณ ์˜ ์„ฑ์šฐ๋“ค์ด ๋‚ญ๋…ํ•˜๋Š” ์˜ค๋””์˜ค๋ถ ๋•๋ถ„์— ๋…์„œ ์Šต๊ด€์„ ๊ธฐ๋ฅผ ์ˆ˜ ์žˆ์—ˆ์–ด์š”. ์ •๋ง ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค!"
 </p>
 </div>
<div class="bg-white p-6 rounded-lg shadow-lg">
 <div class="flex items-center mb-4">
 <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden">
 <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="ํ”„๋กœํ•„ ์ด๋ฏธ์ง€" class="w-full h-full object-cover">
 </div>
 <div class="ml-4">
 <h4 class="font-bold text-gray-900">์ด๋‚˜์—ฐ</h4>
 <div class="flex items-center mt-1">
 <div class="flex text-yellow-400">
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 <i class="fas fa-star"></i>
 </div>
 </div>
 </div>
 </div>
 <p class="text-gray-600">
 "์•ˆ๊ตฌ๊ฑด๊ฐ•์ด ๋‚˜๋น ์ ธ์„œ ์ฑ…์„ ๋ชป ์ฝ๊ฒŒ ๋˜์—ˆ์„ ๋•Œ ์ •๋ง ์ ˆ๋งํ–ˆ์–ด์š”. ๊ทธ๋Ÿฐ๋ฐ Harmony๋ฅผ ์•Œ๊ฒŒ ๋˜๊ณ  ์‚ถ์ด ๋ฐ”๋€Œ์—ˆ์–ด์š”. ์ด์ œ๋Š” ๋ˆˆ์„ ๊ฐ๊ณ  ํŽธ์•ˆํ•˜๊ฒŒ ์ฑ…์„ ์ฆ๊ธธ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์ฃ !"
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Subscription Plans -->
 <div class="py-16 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center">
 <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">๋‚˜์—๊ฒŒ ๋”ฑ ๋งž๋Š” ๊ตฌ๋… ํ”Œ๋žœ ์„ ํƒ</h2>
 <p class="mt-4 text-xl text-gray-600">30์ผ ๋ฌด๋ฃŒ ์ฒดํ—˜ ๊ธฐ๊ฐ„ ์ œ๊ณต. ์–ธ์ œ๋“ ์ง€ ์ทจ์†Œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.</p>
 </div>
<div class="mt-16 space-y-16 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-5">
 <!-- Basic Plan -->
 <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
 <div class="p-6">
 <h2 class="text-lg leading-6 font-medium text-gray-900">๋ฒ ์ด์ง</h2>
 <p class="mt-2 text-sm text-gray-500">๊ฐ€๋ณ๊ฒŒ ์‹œ์ž‘ํ•˜๋Š” ๋ถ„์—๊ฒŒ ์ถ”์ฒœ</p>
 <p class="mt-8">
 <span class="text-4xl font-extrabold text-gray-900">โ‚ฉ7,900</span>
 <span class="text-base font-medium text-gray-500">/์›”</span>
 </p>
 <button class="mt-8 block w-full py-3 px-6 border border-gray-800 rounded-md text-center font-medium text-gray-800 hover:bg-gray-50">
 ์‹œ์ž‘ํ•˜๊ธฐ
 </button>
 </div>
 <div class="pt-6 pb-8 px-6">
 <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">ํฌํ•จ ๋‚ด์šฉ</h3>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์›” 1๊ถŒ ์˜ค๋””์˜ค๋ถ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฌด์ œํ•œ ๋“ฃ๊ธฐ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-gray-400">
 <i class="fas fa-times"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์˜คํ”„๋ผ์ธ ๋“ฃ๊ธฐ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-gray-400">
 <i class="fas fa-times"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฌด์ œํ•œ ์ฑ…๊ฐˆํ”ผ</p>
 </li>
 </ul>
 </div>
 </div>
<!-- Premium Plan -->
 <div class="bg-white border-2 border-primary rounded-lg shadow-xl divide-y divide-gray-200">
 <div class="p-6">
 <div class="flex justify-between">
 <h2 class="text-lg leading-6 font-medium text-gray-900">ํ”„๋ฆฌ๋ฏธ์—„</h2>
 <p class="bg-primary text-white text-xs font-bold px-2 py-1 rounded">BEST VALUE</p>
 </div>
 <p class="mt-2 text-sm text-gray-500">์—ด์ •์ ์ธ ๋…์„œ๊ฐ€์—๊ฒŒ ์ถ”์ฒœ</p>
 <p class="mt-8">
 <span class="text-4xl font-extrabold text-gray-900">โ‚ฉ12,900</span>
 <span class="text-base font-medium text-gray-500">/์›”</span>
 </p>
 <button class="mt-8 block w-full py-3 px-6 bg-primary border border-transparent rounded-md text-center font-medium text-white hover:bg-dark">
 ์‹œ์ž‘ํ•˜๊ธฐ
 </button>
 </div>
 <div class="pt-6 pb-8 px-6">
 <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">ํฌํ•จ ๋‚ด์šฉ</h3>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์›” 3๊ถŒ ์˜ค๋””์˜ค๋ถ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฌด์ œํ•œ ๋“ฃ๊ธฐ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์˜คํ”„๋ผ์ธ ๋“ฃ๊ธฐ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฌด์ œํ•œ ์ฑ…๊ฐˆํ”ผ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฉค๋ฒ„ ์ „์šฉ ํ• ์ธ ํ˜œํƒ</p>
 </li>
 </ul>
 </div>
 </div>
<!-- Unlimited Plan -->
 <div class="bg-white border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
 <div class="p-6">
 <h2 class="text-lg leading-6 font-medium text-gray-900">๋ฌด์ œํ•œ</h2>
 <p class="mt-2 text-sm text-gray-500">์ง„์ •ํ•œ ์˜ค๋””์˜ค๋ถ ์• ํ˜ธ๊ฐ€๋ฅผ ์œ„ํ•œ</p>
 <p class="mt-8">
 <span class="text-4xl font-extrabold text-gray-900">โ‚ฉ16,900</span>
 <span class="text-base font-medium text-gray-500">/์›”</span>
 </p>
 <button class="mt-8 block w-full py-3 px-6 border border-gray-800 rounded-md text-center font-medium text-gray-800 hover:bg-gray-50">
 ์‹œ์ž‘ํ•˜๊ธฐ
 </button>
 </div>
 <div class="pt-6 pb-8 px-6">
 <h3 class="text-xs font-medium text-gray-900 tracking-wide uppercase">ํฌํ•จ ๋‚ด์šฉ</h3>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์›” ๋ฌด์ œํ•œ ์˜ค๋””์˜ค๋ถ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">ํ”„๋ฆฌ๋ฏธ์—„ ์ปจํ…์ธ  ํฌํ•จ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">์˜คํ”„๋ผ์ธ ๋“ฃ๊ธฐ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฌด์ œํ•œ ์ฑ…๊ฐˆํ”ผ</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0 h-5 w-5 text-primary">
 <i class="fas fa-check"></i>
 </div>
 <p class="ml-3 text-sm text-gray-500">๋ฉค๋ฒ„ ์ „์šฉ ํ• ์ธ ํ˜œํƒ</p>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gradient-to-br from-dark to-gray-900 text-white">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-sm font-semibold text-light tracking-wider uppercase">ํšŒ์‚ฌ</h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-sm font-semibold text-light tracking-wider uppercase">์„œ๋น„์Šค</h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์˜ค๋””์˜ค๋ถ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">ํŒŸ์บ์ŠคํŠธ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">๋ฌด๋ฃŒ ์ฒดํ—˜</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">๊ธฐ์—… ์„œ๋น„์Šค</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-sm font-semibold text-light tracking-wider uppercase">๋ฒ•๋ฅ </h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์ด์šฉ์•ฝ๊ด€</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์ €์ž‘๊ถŒ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์ฟ ํ‚ค ์„ค์ •</a></li>
 </ul>
 </div>
<div>
 <h3 class="text-sm font-semibold text-light tracking-wider uppercase">๋ฌธ์˜ํ•˜๊ธฐ</h3>
 <ul class="mt-4 space-y-2">
 <li><a href="#" class="text-base text-gray-300 hover:text-white">๊ณ ๊ฐ์„ผํ„ฐ</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์ œํœด ๋ฌธ์˜</a></li>
 <li><a href="#" class="text-base text-gray-300 hover:text-white">์ถœํŒ์‚ฌ ๋ฌธ์˜</a></li>
 </ul>
<div class="mt-6 flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-facebook-f text-lg"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-instagram text-lg"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-youtube text-lg"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-twitter text-lg"></i>
 </a>
 </div>
 </div>
 </div>
<div class="mt-12 pt-8 border-t border-gray-700">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-headphones text-secondary text-2xl mr-2"></i>
 <span class="text-xl font-bold">Harmony</span>
 </div>
 <p class="mt-4 md:mt-0 text-base text-gray-400">
 &copy; 2023 Harmony Audiobooks. All rights reserved.
 </p>
 </div>
 </div>
 </div>
 </footer>
<!-- Enhanced Audio Player (Fixed at bottom) -->
 <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-purple-700 to-primary shadow-2xl z-50 border-t border-white border-opacity-20">
 <div class="max-w-7xl mx-auto px-4 py-3">
 <div class="flex items-center">
 <!-- Album Art -->
 <div class="flex-shrink-0 h-16 w-16 rounded-lg overflow-hidden shadow-lg relative group">
 <img src="https://image.yes24.com/goods/112163395/XL" alt="Current book cover" class="h-full w-full object-cover" id="currentBookCover">
 <button class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
 <i class="fas fa-expand text-white text-lg"></i>
 </button>
 </div>
<!-- Track Info -->
 <div class="ml-4 flex-1 min-w-0">
 <div class="flex items-center justify-between">
 <div class="truncate">
 <h3 class="text-sm font-medium text-white truncate" id="currentTrackTitle">๋‹ฌ๋Ÿฌ๊ตฌํŠธ ๊ฟˆ ๋ฐฑํ™”์  1์žฅ - ๊ฟˆ ๋ฐฑํ™”์ ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค</h3>
 <p class="text-xs text-gray-200 truncate" id="currentBookInfo">์ด๋ฏธ์˜ˆ | 7์‹œ๊ฐ„ 12๋ถ„ | ์ฑ•ํ„ฐ 3/12</p>
 </div>
 <div class="flex items-center ml-2">
 <span class="text-xs text-gray-300" id="currentTime">1:24:35</span>
 <span class="mx-1 text-xs text-gray-400">/</span>
 <span class="text-xs text-gray-300" id="duration">7:12:08</span>
 </div>
 </div>
<!-- Player Controls -->
 <div class="mt-1 flex items-center">
 <!-- Main Controls -->
 <div class="flex items-center space-x-3">
 <button class="text-gray-300 hover:text-white transition-colors" title="์ด์ „ ์ฑ•ํ„ฐ" id="prevChapter">
 <i class="fas fa-step-backward text-lg"></i>
 </button>
 <button class="p-2 text-white bg-gradient-to-br from-secondary to-yellow-500 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200" title="์žฌ์ƒ/์ผ์‹œ์ •์ง€" id="playPauseBtn">
 <i class="fas fa-pause text-base" id="playPauseIcon"></i>
 </button>
 <button class="text-gray-300 hover:text-white transition-colors" title="๋‹ค์Œ ์ฑ•ํ„ฐ" id="nextChapter">
 <i class="fas fa-step-forward text-lg"></i>
 </button>
 </div>
<!-- Progress Bar -->
 <div class="ml-4 flex-1 relative">
 <div class="h-1 bg-gray-700 bg-opacity-60 rounded-full overflow-hidden">
 <div class="h-full bg-secondary rounded-full" id="progressBar" style="width: 35%"></div>
 </div>
 <input type="range" min="0" max="100" value="35" id="progressSlider"
 class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
 </div>
<!-- Secondary Controls -->
 <div class="ml-4 flex items-center space-x-4">
 <div class="relative group" id="playbackSpeedContainer">
 <button class="text-gray-300 hover:text-white" title="์†๋„ ์กฐ์ ˆ" id="playbackSpeedBtn">
 <i class="fas fa-tachometer-alt text-base"></i>
 </button>
 <div class="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 bg-gray-800 text-white text-sm rounded py-1 px-2 shadow-lg">
 <div class="flex space-x-2">
 <button class="speed-option" data-speed="0.5">0.5x</button>
 <button class="speed-option" data-speed="0.75">0.75x</button>
 <button class="speed-option active" data-speed="1.0">1.0x</button>
 <button class="speed-option" data-speed="1.25">1.25x</button>
 <button class="speed-option" data-speed="1.5">1.5x</button>
 </div>
 </div>
 </div>
 <div class="relative group" id="volumeControlContainer">
 <button class="text-gray-300 hover:text-white" title="๋ณผ๋ฅจ ์กฐ์ ˆ" id="volumeBtn">
 <i class="fas fa-volume-up text-base"></i>
 </button>
 <div class="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-24 bg-gray-800 rounded py-2 px-3 shadow-lg">
 <input type="range" min="0" max="100" value="70" id="volumeSlider"
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer">
 </div>
 </div>
 <button class="text-gray-300 hover:text-white" title="๋ถ๋งˆํฌ" id="bookmarkBtn">
 <i class="fas fa-bookmark text-base"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Audio player state
 const audioPlayer = {
 isPlaying: false,
 currentTime: 0,
 duration: 0,
 playbackRate: 1.0,
 volume: 0.7,
 currentChapter: 3,
 totalChapters: 12
 };
 // DOM elements
 const playPauseBtn = document.getElementById('playPauseBtn');
 const playPauseIcon = document.getElementById('playPauseIcon');
 const progressBar = document.getElementById('progressBar');
 const progressSlider = document.getElementById('progressSlider');
 const currentTimeEl = document.getElementById('currentTime');
 const durationEl = document.getElementById('duration');
 const volumeSlider = document.getElementById('volumeSlider');
 const volumeBtn = document.getElementById('volumeBtn');
 const playbackSpeedBtn = document.getElementById('playbackSpeedBtn');
 const speedOptions = document.querySelectorAll('.speed-option');
 const prevChapterBtn = document.getElementById('prevChapter');
 const nextChapterBtn = document.getElementById('nextChapter');
 const bookmarkBtn = document.getElementById('bookmarkBtn');
 const currentTrackTitle = document.getElementById('currentTrackTitle');
 const currentBookInfo = document.getElementById('currentBookInfo');
 const currentBookCover = document.getElementById('currentBookCover');
 // Initialize player
 function initPlayer() {
 updateTimeDisplay();
 updateVolumeIcon();
 }
 // Play/Pause toggle
 playPauseBtn.addEventListener('click', function() {
 audioPlayer.isPlaying = !audioPlayer.isPlaying;
 if (audioPlayer.isPlaying) {
 playPauseIcon.classList.remove('fa-play');
 playPauseIcon.classList.add('fa-pause');
 // In a real app, you would call audioElement.play() here
 } else {
 playPauseIcon.classList.remove('fa-pause');
 playPauseIcon.classList.add('fa-play');
 // In a real app, you would call audioElement.pause() here
 }
 });
 // Progress slider
 progressSlider.addEventListener('input', function() {
 const percent = this.value;
 progressBar.style.width = `${percent}%`;
 // Calculate and update current time based on percentage
 audioPlayer.currentTime = (percent / 100) * audioPlayer.duration;
 updateTimeDisplay();
 });
 // Volume control
 volumeSlider.addEventListener('input', function() {
 audioPlayer.volume = this.value / 100;
 updateVolumeIcon();
 // In a real app, you would set audioElement.volume here
 });
 function updateVolumeIcon() {
 const volIcon = volumeBtn.querySelector('i');
 if (audioPlayer.volume === 0) {
 volIcon.classList.remove('fa-volume-up', 'fa-volume-down');
 volIcon.classList.add('fa-volume-mute');
 } else if (audioPlayer.volume < 0.5) {
 volIcon.classList.remove('fa-volume-up', 'fa-volume-mute');
 volIcon.classList.add('fa-volume-down');
 } else {
 volIcon.classList.remove('fa-volume-down', 'fa-volume-mute');
 volIcon.classList.add('fa-volume-up');
 }
 }
 // Playback speed control
 speedOptions.forEach(option => {
 option.addEventListener('click', function() {
 const speed = parseFloat(this.dataset.speed);
 audioPlayer.playbackRate = speed;
// Update active state
 speedOptions.forEach(opt => opt.classList.remove('active'));
 this.classList.add('active');
// In a real app, you would set audioElement.playbackRate here
 });
 });
 // Chapter navigation
 prevChapterBtn.addEventListener('click', function() {
 if (audioPlayer.currentChapter > 1) {
 audioPlayer.currentChapter--;
 updateBookInfo();
 resetProgress();
 }
 });
 nextChapterBtn.addEventListener('click', function() {
 if (audioPlayer.currentChapter < audioPlayer.totalChapters) {
 audioPlayer.currentChapter++;
 updateBookInfo();
 resetProgress();
 }
 });
 // Bookmark
 bookmarkBtn.addEventListener('click', function() {
 alert(`ํ˜„์žฌ ${formatTime(audioPlayer.currentTime)}์— ๋ถ๋งˆํฌ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.`);
 });
 // Update time display
 function updateTimeDisplay() {
 currentTimeEl.textContent = formatTime(audioPlayer.currentTime);
 durationEl.textContent = formatTime(audioPlayer.duration);
 }
 // Update book/chapter info
 function updateBookInfo() {
 currentBookInfo.textContent = `์ด๋ฏธ์˜ˆ | 7์‹œ๊ฐ„ 12๋ถ„ | ์ฑ•ํ„ฐ ${audioPlayer.currentChapter}/${audioPlayer.totalChapters}`;
 }
 // Reset progress when changing chapters
 function resetProgress() {
 audioPlayer.currentTime = 0;
 progressBar.style.width = '0%';
 progressSlider.value = 0;
 updateTimeDisplay();
 }
 // Format time (HH:MM:SS)
 function formatTime(seconds) {
 const hrs = Math.floor(seconds / 3600);
 const mins = Math.floor((seconds % 3600) / 60);
 const secs = Math.floor(seconds % 60);
 return `${hrs}:${mins < 10 ? '0' : ''}${mins}:${secs < 10 ? '0' : ''}${secs}`;
 }
 // Simulate playback progress (for demo)
 function simulatePlayback() {
 if (audioPlayer.isPlaying) {
 // Update current time (demo only - in real app use actual audio position)
 audioPlayer.currentTime += 0.5;
// Update progress
 const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
 progressBar.style.width = `${percent}%`;
 progressSlider.value = percent;
 updateTimeDisplay();
// Check if chapter ended
 if (percent >= 100 && audioPlayer.currentChapter < audioPlayer.totalChapters) {
 audioPlayer.currentChapter++;
 updateBookInfo();
 audioPlayer.currentTime = 0;
 }
 }
 }
 // Initialize demo values
 audioPlayer.currentTime = 5065; // 1:24:25 in seconds
 audioPlayer.duration = 25920; // 7:12:00 in seconds
 initPlayer();
 // Start playback simulation (for demo)
 setInterval(simulatePlayback, 500);
 // Book card play buttons
 document.querySelectorAll('.book-card button').forEach(button => {
 button.addEventListener('click', function(e) {
 e.preventDefault();
 const bookCard = this.closest('.book-card');
 const title = bookCard.querySelector('h3').textContent;
 const author = bookCard.querySelector('p').textContent;
 const cover = bookCard.querySelector('img').src;
// Update player with new book
 currentTrackTitle.textContent = title;
 currentBookInfo.textContent = `${author} | 7์‹œ๊ฐ„ 12๋ถ„ | ์ฑ•ํ„ฐ 1/12`;
 currentBookCover.src = cover;
// Reset player state
 audioPlayer.currentChapter = 1;
 audioPlayer.isPlaying = true;
 playPauseIcon.classList.remove('fa-play');
 playPauseIcon.classList.add('fa-pause');
 resetProgress();
alert(`${title} ์˜ค๋””์˜ค๋ถ ์žฌ์ƒ์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค!`);
 });
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=nkjoy/audio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>