|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PodGenius - Podcast Library</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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); |
|
|
} |
|
|
|
|
|
.podcast-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.wave-pattern { |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e9d5ff' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
|
|
} |
|
|
|
|
|
.recording-indicator { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.editor-toolbar { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #c4b5fd transparent; |
|
|
} |
|
|
|
|
|
.editor-toolbar::-webkit-scrollbar { |
|
|
height: 6px; |
|
|
} |
|
|
|
|
|
.editor-toolbar::-webkit-scrollbar-thumb { |
|
|
background-color: #c4b5fd; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.library-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.podcast-cover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.podcast-cover:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.play-button { |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.podcast-item:hover .play-button { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.progress-ring { |
|
|
transform: rotate(-90deg); |
|
|
} |
|
|
|
|
|
.progress-ring-circle { |
|
|
stroke-dasharray: 100; |
|
|
stroke-dashoffset: 100; |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<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"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<a href="index.html" class="flex items-center"> |
|
|
<i class="fas fa-podcast text-purple-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">PodGenius</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="index.html" 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">Home</a> |
|
|
<a href="library.html" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Library</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">Templates</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">Analytics</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button type="button" class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<span class="sr-only">View notifications</span> |
|
|
<i class="fas fa-bell h-6 w-6"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button type="button" class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> |
|
|
<span class="sr-only">Open user menu</span> |
|
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</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-purple-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars block h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="py-8"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2">Your Podcast Library</h1> |
|
|
<p class="text-gray-600">Browse, manage, and edit all your podcast episodes in one place</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-8"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
|
<div class="relative flex-grow"> |
|
|
<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:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="Search podcasts..."> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
|
|
<option>All Categories</option> |
|
|
<option>Business</option> |
|
|
<option>Technology</option> |
|
|
<option>Education</option> |
|
|
<option>Entertainment</option> |
|
|
</select> |
|
|
<select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> |
|
|
<option>Sort by: Newest</option> |
|
|
<option>Sort by: Oldest</option> |
|
|
<option>Sort by: Most Popular</option> |
|
|
<option>Sort by: A-Z</option> |
|
|
</select> |
|
|
<button class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-plus mr-2"></i> New Episode |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-podcast text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Episodes</p> |
|
|
<p class="text-2xl font-semibold text-gray-900">47</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-headphones text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Listens</p> |
|
|
<p class="text-2xl font-semibold text-gray-900">12.4K</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Subscribers</p> |
|
|
<p class="text-2xl font-semibold text-gray-900">1.2K</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> |
|
|
<i class="fas fa-star text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Avg. Rating</p> |
|
|
<div class="flex items-center"> |
|
|
<p class="text-2xl font-semibold text-gray-900 mr-2">4.7</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star-half-alt text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-900">Recent Episodes</h2> |
|
|
<a href="#" class="text-sm font-medium text-purple-600 hover:text-purple-500">View all</a> |
|
|
</div> |
|
|
|
|
|
<div class="library-grid"> |
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1593697909683-bccb1b9e68a4?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">The Future of AI in Business</h3> |
|
|
<span class="text-xs text-gray-500">42 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">Exploring how artificial intelligence is transforming modern enterprises</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.8</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">1.2K listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 30;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">70%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">Remote Work Revolution</h3> |
|
|
<span class="text-xs text-gray-500">35 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">Strategies for building effective remote teams in 2023</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.9</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">980 listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 15;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">85%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">Sustainable Tech</h3> |
|
|
<span class="text-xs text-gray-500">28 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">How technology companies are addressing climate change</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.7</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">1.5K listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 45;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">55%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">The Psychology of UX</h3> |
|
|
<span class="text-xs text-gray-500">39 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">Understanding user behavior to create better digital experiences</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.6</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">890 listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 20;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">80%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">Web Development Trends</h3> |
|
|
<span class="text-xs text-gray-500">31 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">What's new and exciting in the world of web development</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.5</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">1.1K listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 60;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">40%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="podcast-item bg-white rounded-lg shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Podcast cover" class="w-full h-48 object-cover podcast-cover"> |
|
|
<button class="play-button absolute bottom-4 right-4 h-12 w-12 rounded-full bg-purple-600 text-white flex items-center justify-center hover:bg-purple-700"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-medium text-gray-900 truncate">Data Privacy Essentials</h3> |
|
|
<span class="text-xs text-gray-500">45 min</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mb-3">Protecting user data in an increasingly connected world</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.8</span> |
|
|
<span class="mx-1 text-xs text-gray-500">•</span> |
|
|
<span class="text-xs text-gray-500">1.3K listens</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 25;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">75%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold text-gray-900">All Episodes</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-md border border-gray-300 text-gray-500 hover:bg-gray-50"> |
|
|
<i class="fas fa-th-large"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-md border border-purple-500 text-purple-600 bg-purple-50"> |
|
|
<i class="fas fa-list"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
|
|
<ul class="divide-y divide-gray-200"> |
|
|
|
|
|
<li class="hover:bg-gray-50"> |
|
|
<div class="px-4 py-4 sm:px-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-play text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-purple-600 truncate">The Future of AI in Business</p> |
|
|
<p class="text-sm text-gray-500">Exploring how artificial intelligence is transforming modern enterprises</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-2 flex-shrink-0 flex"> |
|
|
<div class="flex items-center mr-6"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.8</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">42 min</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">Jun 15, 2023</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 30;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">70%</span> |
|
|
</div> |
|
|
<button class="ml-6 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-ellipsis-v h-5 w-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="hover:bg-gray-50"> |
|
|
<div class="px-4 py-4 sm:px-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-play text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-purple-600 truncate">Remote Work Revolution</p> |
|
|
<p class="text-sm text-gray-500">Strategies for building effective remote teams in 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-2 flex-shrink-0 flex"> |
|
|
<div class="flex items-center mr-6"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.9</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">35 min</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">Jun 8, 2023</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 15;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">85%</span> |
|
|
</div> |
|
|
<button class="ml-6 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-ellipsis-v h-5 w-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="hover:bg-gray-50"> |
|
|
<div class="px-4 py-4 sm:px-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-play text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-purple-600 truncate">Sustainable Tech</p> |
|
|
<p class="text-sm text-gray-500">How technology companies are addressing climate change</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-2 flex-shrink-0 flex"> |
|
|
<div class="flex items-center mr-6"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.7</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">28 min</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">Jun 1, 2023</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 45;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">55%</span> |
|
|
</div> |
|
|
<button class="ml-6 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-ellipsis-v h-5 w-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
|
|
|
<li class="hover:bg-gray-50"> |
|
|
<div class="px-4 py-4 sm:px-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-play text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-purple-600 truncate">The Psychology of UX</p> |
|
|
<p class="text-sm text-gray-500">Understanding user behavior to create better digital experiences</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-2 flex-shrink-0 flex"> |
|
|
<div class="flex items-center mr-6"> |
|
|
<svg class="w-4 h-4 mr-1 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> |
|
|
</svg> |
|
|
<span class="text-xs font-medium text-gray-900">4.6</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">39 min</span> |
|
|
</div> |
|
|
<div class="mr-6"> |
|
|
<span class="text-xs text-gray-500">May 25, 2023</span> |
|
|
</div> |
|
|
<div class="relative w-6 h-6"> |
|
|
<svg class="progress-ring w-6 h-6" width="24" height="24"> |
|
|
<circle class="progress-ring-circle" stroke="#8b5cf6" stroke-width="2" fill="transparent" r="10" cx="12" cy="12" style="stroke-dashoffset: 20;"></circle> |
|
|
</svg> |
|
|
<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-900">80%</span> |
|
|
</div> |
|
|
<button class="ml-6 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-ellipsis-v h-5 w-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
|
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Previous |
|
|
</a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Next |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">47</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left h-5 w-5"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-purple-50 border-purple-500 text-purple-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
|
1 |
|
|
</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
|
2 |
|
|
</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
|
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"> |
|
|
... |
|
|
</span> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
|
8 |
|
|
</a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right h-5 w-5"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200 mt-12 wave-pattern"> |
|
|
<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-gray-900 tracking-wider uppercase">Product</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Features</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Pricing</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Templates</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Integrations</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">Resources</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Documentation</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Guides</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Blog</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">Company</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Careers</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Press</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase">Legal</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-500 hover:text-gray-900">Licenses</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">Facebook</span> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">Twitter</span> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">Instagram</span> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<span class="sr-only">LinkedIn</span> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 text-center md:text-right"> |
|
|
<p class="text-base text-gray-500">© 2023 PodGenius. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); |
|
|
if (mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
|
|
|
alert('Mobile menu would open here in a complete implementation'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.play-button').forEach(button => { |
|
|
button.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
const podcastTitle = this.closest('.podcast-item').querySelector('h3').textContent; |
|
|
alert(`Now playing: ${podcastTitle}`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.podcast-item').forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
const podcastTitle = this.querySelector('h3').textContent; |
|
|
window.location.href = `index.html?podcast=${encodeURIComponent(podcastTitle)}`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const viewToggleButtons = document.querySelectorAll('button:has(.fa-th-large), button:has(.fa-list)'); |
|
|
viewToggleButtons.forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
viewToggleButtons.forEach(btn => { |
|
|
btn.classList.remove('border-purple-500', 'text-purple-600', 'bg-purple-50'); |
|
|
btn.classList.add('border-gray-300', 'text-gray-500', 'hover:bg-gray-50'); |
|
|
}); |
|
|
this.classList.remove('border-gray-300', 'text-gray-500', 'hover:bg-gray-50'); |
|
|
this.classList.add('border-purple-500', 'text-purple-600', 'bg-purple-50'); |
|
|
|
|
|
|
|
|
alert('View would change here in a complete implementation'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.progress-ring-circle').forEach(circle => { |
|
|
const offset = circle.style.strokeDashoffset; |
|
|
const percentage = 100 - parseInt(offset); |
|
|
circle.style.strokeDashoffset = offset; |
|
|
}); |
|
|
}); |
|
|
</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=MrEzzat/podify" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
