Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Podcast Player</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: '#8B5CF6', | |
| secondary: '#F43F5E', | |
| dark: '#1F2937', | |
| light: '#F9FAFB' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #8B5CF6; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #7C3AED; | |
| } | |
| .podcast-progress { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| background: #D1D5DB; | |
| border-radius: 2px; | |
| outline: none; | |
| } | |
| .podcast-progress::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #8B5CF6; | |
| cursor: pointer; | |
| } | |
| .slide { | |
| opacity: 0; | |
| transition: opacity 1s ease-in-out; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| } | |
| .active-podcast { | |
| background-color: rgba(139, 92, 246, 0.1); | |
| border-left: 3px solid #8B5CF6; | |
| } | |
| .active-music { | |
| background-color: rgba(244, 63, 94, 0.1); | |
| border-left: 3px solid #F43F5E; | |
| } | |
| .active-poem { | |
| background-color: rgba(139, 92, 246, 0.1); | |
| border-left: 2px solid #8B5CF6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-primary to-secondary text-white p-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-podcast mr-2"></i>PodVerse | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white text-primary px-4 py-2 rounded-full font-medium hover:bg-opacity-90 transition"> | |
| <i class="fas fa-plus mr-1"></i> Add Channel | |
| </button> | |
| <button class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-1 container mx-auto p-4 md:p-6 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - Podcasts --> | |
| <div class="bg-white rounded-xl shadow-md p-4 lg:col-span-2"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-headphones-alt text-primary mr-2"></i> Podcast Episodes | |
| </h2> | |
| <!-- Player Controls - Compact --> | |
| <div class="bg-gray-50 rounded-lg p-3 mb-4"> | |
| <div class="flex items-center space-x-3 mb-2"> | |
| <img src="https://picsum.photos/60/60?random=1" alt="Podcast Cover" class="w-12 h-12 rounded-lg shadow"> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-medium text-gray-800 text-sm truncate">The Future of AI</h3> | |
| <p class="text-xs text-gray-600 truncate">Tech Talk Podcast</p> | |
| </div> | |
| <button class="text-primary hover:text-purple-700"> | |
| <i class="fas fa-heart text-lg"></i> | |
| </button> | |
| </div> | |
| <div class="mb-1"> | |
| <input type="range" min="0" max="100" value="35" class="podcast-progress"> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-2"> | |
| <span>12:45</span> | |
| <span>38:20</span> | |
| </div> | |
| <div class="flex justify-center items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-primary text-sm"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="bg-primary text-white p-2 rounded-full hover:bg-purple-700 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-primary text-sm"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Episodes List --> | |
| <div class="h-80 overflow-y-auto custom-scrollbar"> | |
| <div class="space-y-3"> | |
| <div class="p-3 rounded-lg flex items-center space-x-3 active-podcast"> | |
| <img src="https://picsum.photos/60/60?random=2" alt="Episode" class="w-12 h-12 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">The Future of AI</h4> | |
| <p class="text-sm text-gray-600">Tech Talk Podcast • 38 min</p> | |
| </div> | |
| <div class="text-primary"> | |
| <i class="fas fa-play-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/60/60?random=3" alt="Episode" class="w-12 h-12 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Digital Nomad Lifestyle</h4> | |
| <p class="text-sm text-gray-600">Remote Work Podcast • 45 min</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/60/60?random=4" alt="Episode" class="w-12 h-12 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Mindfulness Meditation</h4> | |
| <p class="text-sm text-gray-600">Wellness Podcast • 28 min</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/60/60?random=5" alt="Episode" class="w-12 h-12 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Startup Funding Strategies</h4> | |
| <p class="text-sm text-gray-600">Business Podcast • 52 min</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/60/60?random=6" alt="Episode" class="w-12 h-12 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Climate Change Solutions</h4> | |
| <p class="text-sm text-gray-600">Science Podcast • 41 min</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play-circle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Gallery, Music and Poetry --> | |
| <div class="space-y-6"> | |
| <!-- Image Gallery --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-images text-primary mr-2"></i> Gallery | |
| </h2> | |
| <div class="relative h-48 rounded-lg overflow-hidden mb-4"> | |
| <div class="slide active"> | |
| <img src="https://picsum.photos/400/200?random=10" alt="Gallery Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://picsum.photos/400/200?random=11" alt="Gallery Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://picsum.photos/400/200?random=12" alt="Gallery Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-2 h-2 rounded-full bg-white opacity-50 slider-dot active-dot"></button> | |
| <button class="w-2 h-2 rounded-full bg-white opacity-50 slider-dot"></button> | |
| <button class="w-2 h-2 rounded-full bg-white opacity-50 slider-dot"></button> | |
| </div> | |
| <button class="absolute left-2 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-30 p-1 rounded-full"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-30 p-1 rounded-full"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <img src="https://picsum.photos/100/100?random=13" alt="Thumbnail" class="rounded cursor-pointer"> | |
| <img src="https://picsum.photos/100/100?random=14" alt="Thumbnail" class="rounded cursor-pointer"> | |
| <img src="https://picsum.photos/100/100?random=15" alt="Thumbnail" class="rounded cursor-pointer"> | |
| </div> | |
| </div> | |
| <!-- Music Player --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-music text-secondary mr-2"></i> Music Player | |
| </h2> | |
| <div class="bg-gray-50 rounded-lg p-2 mb-3"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <img src="https://picsum.photos/40/40?random=20" alt="Music Cover" class="w-10 h-10 rounded"> | |
| <div class="flex-1 min-w-0"> | |
| <h3 class="font-medium text-gray-800 text-sm truncate">Summer Vibes</h3> | |
| <p class="text-xs text-gray-600 truncate">Chill Beats</p> | |
| </div> | |
| <button class="text-secondary hover:text-pink-700 text-sm"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="mb-1"> | |
| <input type="range" min="0" max="100" value="60" class="podcast-progress"> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mb-2"> | |
| <span>2:15</span> | |
| <span>3:45</span> | |
| </div> | |
| <div class="flex justify-center items-center space-x-3"> | |
| <button class="text-gray-600 hover:text-secondary text-sm"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="bg-secondary text-white p-1 rounded-full hover:bg-pink-700 transition"> | |
| <i class="fas fa-play text-xs"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-secondary text-sm"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="h-40 overflow-y-auto custom-scrollbar"> | |
| <div class="space-y-2"> | |
| <div class="p-2 rounded-lg flex items-center space-x-3 active-music"> | |
| <img src="https://picsum.photos/40/40?random=21" alt="Music" class="w-10 h-10 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Summer Vibes</h4> | |
| <p class="text-xs text-gray-600">Chill Beats</p> | |
| </div> | |
| <div class="text-secondary"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/40/40?random=22" alt="Music" class="w-10 h-10 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Night Drive</h4> | |
| <p class="text-xs text-gray-600">Synthwave</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg flex items-center space-x-3 hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://picsum.photos/40/40?random=23" alt="Music" class="w-10 h-10 rounded"> | |
| <div class="flex-1"> | |
| <h4 class="font-medium text-gray-800">Coffee Morning</h4> | |
| <p class="text-xs text-gray-600">Acoustic</p> | |
| </div> | |
| <div class="text-gray-400"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Poetry Section --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-feather-alt text-primary mr-2"></i> Poetry Corner | |
| </h2> | |
| <div class="bg-gray-50 rounded-lg p-3 mb-3"> | |
| <h3 class="font-medium text-gray-800 mb-2 text-sm">The Road Not Taken</h3> | |
| <p class="text-xs text-gray-700 italic"> | |
| Two roads diverged in a yellow wood,<br> | |
| And sorry I could not travel both<br> | |
| And be one traveler, long I stood<br> | |
| And looked down one as far as I could... | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">- Robert Frost</p> | |
| </div> | |
| <!-- Poems List --> | |
| <div class="h-32 overflow-y-auto custom-scrollbar mb-3"> | |
| <div class="space-y-2"> | |
| <div class="p-2 rounded-lg flex items-center space-x-2 hover:bg-gray-50 cursor-pointer active-poem"> | |
| <div class="bg-primary bg-opacity-10 p-1 rounded"> | |
| <i class="fas fa-feather-alt text-primary text-xs"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h4 class="font-medium text-gray-800 text-sm truncate">The Road Not Taken</h4> | |
| <p class="text-xs text-gray-600 truncate">Robert Frost</p> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg flex items-center space-x-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="bg-primary bg-opacity-10 p-1 rounded"> | |
| <i class="fas fa-feather-alt text-primary text-xs"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h4 class="font-medium text-gray-800 text-sm truncate">Sonnet 18</h4> | |
| <p class="text-xs text-gray-600 truncate">William Shakespeare</p> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg flex items-center space-x-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="bg-primary bg-opacity-10 p-1 rounded"> | |
| <i class="fas fa-feather-alt text-primary text-xs"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h4 class="font-medium text-gray-800 text-sm truncate">The Raven</h4> | |
| <p class="text-xs text-gray-600 truncate">Edgar Allan Poe</p> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg flex items-center space-x-2 hover:bg-gray-50 cursor-pointer"> | |
| <div class="bg-primary bg-opacity-10 p-1 rounded"> | |
| <i class="fas fa-feather-alt text-primary text-xs"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <h4 class="font-medium text-gray-800 text-sm truncate">If—</h4> | |
| <p class="text-xs text-gray-600 truncate">Rudyard Kipling</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-primary text-white py-2 rounded-lg hover:bg-purple-700 transition flex items-center justify-center text-sm"> | |
| <i class="fas fa-plus mr-2 text-xs"></i> Add New Poem | |
| </button> | |
| </div> | |
| <!-- Channels & Links --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-link text-primary mr-2"></i> Channels & Links | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> | |
| <div class="bg-primary bg-opacity-10 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-podcast text-primary"></i> | |
| </div> | |
| <span class="text-gray-700">Tech Talk Podcast</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> | |
| <div class="bg-secondary bg-opacity-10 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-music text-secondary"></i> | |
| </div> | |
| <span class="text-gray-700">Chill Beats Channel</span> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> | |
| <div class="bg-yellow-500 bg-opacity-10 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-book text-yellow-500"></i> | |
| </div> | |
| <span class="text-gray-700">Poetry Society</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 border border-primary text-primary py-2 rounded-lg hover:bg-primary hover:text-white transition flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Add New Channel | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-dark text-gray-400 py-6 mt-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>© 2023 PodVerse - Your Ultimate Media Experience</p> | |
| <div class="flex justify-center space-x-4 mt-2"> | |
| <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Slideshow functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.slide'); | |
| const dots = document.querySelectorAll('.slider-dot'); | |
| const totalSlides = slides.length; | |
| // Initialize slideshow | |
| function showSlide(n) { | |
| slides.forEach(slide => slide.classList.remove('active')); | |
| dots.forEach(dot => dot.classList.remove('active-dot')); | |
| currentSlide = (n + totalSlides) % totalSlides; | |
| slides[currentSlide].classList.add('active'); | |
| dots[currentSlide].classList.add('active-dot'); | |
| } | |
| // Next/previous controls | |
| document.querySelector('.fa-chevron-right').parentNode.addEventListener('click', () => { | |
| showSlide(currentSlide + 1); | |
| }); | |
| document.querySelector('.fa-chevron-left').parentNode.addEventListener('click', () => { | |
| showSlide(currentSlide - 1); | |
| }); | |
| // Dot controls | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| showSlide(index); | |
| }); | |
| }); | |
| // Auto advance slides | |
| setInterval(() => { | |
| showSlide(currentSlide + 1); | |
| }, 5000); | |
| // Play/Pause functionality | |
| const playButtons = document.querySelectorAll('.fa-play'); | |
| playButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const isPlaying = this.classList.contains('fa-play'); | |
| const allPlayButtons = document.querySelectorAll('.fa-play, .fa-pause'); | |
| allPlayButtons.forEach(btn => { | |
| btn.classList.remove('fa-pause'); | |
| btn.classList.add('fa-play'); | |
| }); | |
| if (isPlaying) { | |
| this.classList.remove('fa-play'); | |
| this.classList.add('fa-pause'); | |
| } | |
| }); | |
| }); | |
| // Add channel modal (simplified) | |
| document.querySelectorAll('button:contains("Add Channel")').forEach(button => { | |
| button.addEventListener('click', function() { | |
| alert('Channel addition feature would open here!'); | |
| }); | |
| }); | |
| // Add poem functionality | |
| document.querySelector('button:contains("Add New Poem")').addEventListener('click', function() { | |
| alert('Poem addition feature would open here!'); | |
| }); | |
| }); | |
| </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=Mablue/masoudsoft-ir" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |