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>